mirror of
https://github.com/siyuan-note/plugin-sample-vite-svelte.git
synced 2025-06-08 02:46:02 +00:00
去掉svelte
This commit is contained in:
Frostime
GitHub
parent
6b903d5a14
commit
ee7e88b798
10 changed files with 6 additions and 300 deletions
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
# SiYuan plugin sample with vite and svelte
|
||||
# SiYuan plugin sample with vite
|
||||
|
||||
[中文版](./README_zh_CN.md)
|
||||
|
||||
|
|
@ -9,8 +9,7 @@
|
|||
|
||||
1. Using vite for packaging
|
||||
2. Use symbolic linking instead of putting the project into the plugins directory program development
|
||||
3. Built-in support for the svelte framework
|
||||
4. Provides a github action template to automatically generate package.zip and upload to new release
|
||||
3. Provides a github action template to automatically generate package.zip and upload to new release
|
||||
|
||||
|
||||
## Get started
|
||||
|
|
@ -26,7 +25,7 @@
|
|||
- Run `pnpm run make-link`, the script will detect all the siyuan workspace, please select the targe workspace and the script will automatically create the symbolic link under the `{workspace}/data/plugins/` folder
|
||||
```bash
|
||||
>>> pnpm run make-link
|
||||
> plugin-sample-vite-svelte@0.0.3 make-link H:\SrcCode\开源项目\plugin-sample-vite-svelte
|
||||
> plugin-sample-vite@0.0.3 make-link H:\SrcCode\开源项目\plugin-sample-vite
|
||||
> node --no-warnings ./scripts/make_dev_link.js
|
||||
|
||||
"targetDir" is empty, try to get SiYuan directory automatically....
|
||||
|
|
|
|||
|
|
@ -13,8 +13,6 @@
|
|||
"build": "vite build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^2.0.3",
|
||||
"@tsconfig/svelte": "^4.0.1",
|
||||
"@types/node": "^20.2.0",
|
||||
"fast-glob": "^3.2.12",
|
||||
"glob": "^7.2.3",
|
||||
|
|
@ -22,7 +20,6 @@
|
|||
"rollup-plugin-livereload": "^2.0.5",
|
||||
"sass": "^1.62.1",
|
||||
"siyuan": "^0.7.2",
|
||||
"svelte": "^3.57.0",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.0.4",
|
||||
"vite": "^4.3.7",
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
import { version } from "@/api";
|
||||
import { showMessage } from "siyuan";
|
||||
import Typo from "@/libs/b3-typography.svelte";
|
||||
|
||||
export let name: string;
|
||||
export let i18n: any;
|
||||
|
||||
let time;
|
||||
let ver;
|
||||
|
||||
let intv1 = setInterval(async () => {
|
||||
time = new Date();
|
||||
}, 1000);
|
||||
|
||||
onMount(async () => {
|
||||
time = new Date();
|
||||
ver = await version();
|
||||
});
|
||||
|
||||
/**
|
||||
* You must call this function when the component is destroyed.
|
||||
*/
|
||||
onDestroy(() => {
|
||||
showMessage("Hello panel closed");
|
||||
clearInterval(intv1);
|
||||
});
|
||||
|
||||
$: time_str = new Date(time).toLocaleTimeString();
|
||||
|
||||
</script>
|
||||
|
||||
<div id="hello">
|
||||
<div class="fn__flex">
|
||||
<div class="fn__flex-1">
|
||||
<h2>Hello {name} v{ver}</h2>
|
||||
</div>
|
||||
<div class="fn__flex-1 b3-label__text __text-right">
|
||||
{time_str}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Typo>
|
||||
<h2>Wellcome to plugin sample with vite & svelte</h2>
|
||||
<p>{@html i18n.makesure}</p>
|
||||
</Typo>
|
||||
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
#hello {
|
||||
margin: 20px;
|
||||
div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.__text-right {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
31
src/index.ts
31
src/index.ts
|
|
@ -12,9 +12,6 @@ import {
|
|||
} from "siyuan";
|
||||
import "@/index.scss";
|
||||
|
||||
import HelloExample from "@/hello.svelte";
|
||||
import SettingPannel from "@/libs/setting-panel.svelte";
|
||||
|
||||
const STORAGE_NAME = "menu-config";
|
||||
const TAB_TYPE = "custom_tab";
|
||||
const DOCK_TYPE = "dock_tab";
|
||||
|
|
@ -71,22 +68,10 @@ export default class PluginSample extends Plugin {
|
|||
element: statusIconTemp.content.firstElementChild as HTMLElement,
|
||||
});
|
||||
|
||||
let tabDiv = document.createElement("div");
|
||||
new HelloExample({
|
||||
target: tabDiv,
|
||||
props: {
|
||||
name: this.i18n.name,
|
||||
i18n: this.i18n.hello
|
||||
}
|
||||
});
|
||||
this.customTab = this.addTab({
|
||||
type: TAB_TYPE,
|
||||
init() {
|
||||
this.element.appendChild(tabDiv);
|
||||
console.log(this.element);
|
||||
},
|
||||
destroy() {
|
||||
console.log("destroy tab:", TAB_TYPE);
|
||||
this.element.innerHTML = '<p>Hello</p>'
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -144,19 +129,7 @@ export default class PluginSample extends Plugin {
|
|||
}
|
||||
|
||||
openSetting(): void {
|
||||
let dialog = new Dialog({
|
||||
title: "SettingPannel",
|
||||
content: `<div id="SettingPanel"></div>`,
|
||||
width: "600px",
|
||||
destroyCallback: (options) => {
|
||||
console.log("destroyCallback", options);
|
||||
//You must destroy the component when the dialog is closed
|
||||
pannel.$destroy();
|
||||
}
|
||||
});
|
||||
let pannel = new SettingPannel({
|
||||
target: dialog.element.querySelector("#SettingPanel"),
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
private eventBusLog({detail}: any) {
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<div class="item__readme b3-typography">
|
||||
<slot/>
|
||||
</div>
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
export let type: string; // Setting Type
|
||||
export let title: string; // Displayint Setting Title
|
||||
export let text: string; // Displaying Setting Text
|
||||
export let settingKey: string;
|
||||
export let settingValue: any;
|
||||
|
||||
//Optional
|
||||
export let placeholder: string = ""; // Use it if type is input
|
||||
export let options: { [key: string]: string } = {}; // Use it if type is select
|
||||
export let slider: {
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
} = {min: 0, max: 100, step: 1}; // Use it if type is slider
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function clicked() {
|
||||
dispatch("clicked");
|
||||
}
|
||||
|
||||
function changed() {
|
||||
dispatch("changed", { key: settingKey, value: settingValue });
|
||||
}
|
||||
</script>
|
||||
|
||||
<label class="fn__flex b3-label">
|
||||
<div class="fn__flex-1">
|
||||
{title}
|
||||
<div class="b3-label__text">
|
||||
{text}
|
||||
</div>
|
||||
</div>
|
||||
<span class="fn__space" />
|
||||
<!-- <slot /> -->
|
||||
{#if type === "checkbox"}
|
||||
<!-- Checkbox -->
|
||||
<input
|
||||
class="b3-switch fn__flex-center"
|
||||
id={settingKey}
|
||||
type="checkbox"
|
||||
bind:checked={settingValue}
|
||||
on:change={changed}
|
||||
/>
|
||||
{:else if type === "input"}
|
||||
<!-- Text Input -->
|
||||
<input
|
||||
class="b3-text-field fn__flex-center fn__size200"
|
||||
id={settingKey}
|
||||
{placeholder}
|
||||
bind:value={settingValue}
|
||||
on:change={changed}
|
||||
/>
|
||||
{:else if type === "button"}
|
||||
<!-- Button Input -->
|
||||
<button
|
||||
class="b3-button b3-button--outline fn__flex-center fn__size200"
|
||||
id={settingKey}
|
||||
on:click={clicked}
|
||||
>
|
||||
{settingValue}
|
||||
</button>
|
||||
{:else if type === "select"}
|
||||
<!-- Dropdown select -->
|
||||
<select
|
||||
class="b3-select fn__flex-center fn__size200"
|
||||
id="iconPosition"
|
||||
bind:value={settingValue}
|
||||
on:change={changed}
|
||||
>
|
||||
{#each Object.entries(options) as [value, text]}
|
||||
<option {value}>{text}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else if type == "slider"}
|
||||
<!-- Slider -->
|
||||
<input
|
||||
class="b3-slider fn__size200"
|
||||
id="fontSize"
|
||||
min="{slider.min}"
|
||||
max="{slider.max}"
|
||||
step="{slider.step}"
|
||||
type="range"
|
||||
bind:value={settingValue}
|
||||
on:change={changed}
|
||||
/>
|
||||
{/if}
|
||||
</label>
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
<script>
|
||||
import SettingItem from "./setting-item.svelte";
|
||||
import { showMessage } from "siyuan";
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
onMount(() => {
|
||||
showMessage("Setting panel opened");
|
||||
});
|
||||
onDestroy(() => {
|
||||
showMessage("Setting panel closed");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--
|
||||
You can use this template to quickly create a setting panel,
|
||||
with the same UI style in SiYuan
|
||||
-->
|
||||
|
||||
<div class="config__tab-container">
|
||||
<div data-type="Header" class="fn__flex b3-label">
|
||||
<div class="fn_flex-1">
|
||||
<h4>This setting panel is provided by a svelte component</h4>
|
||||
<div class="b3-label__text">
|
||||
<span class="fn__flex-1">
|
||||
See:
|
||||
<pre style="display: inline">/lib/setting-pannel.svelte</pre>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SettingItem
|
||||
type="checkbox"
|
||||
title="Checkbox"
|
||||
text="This is a checkbox"
|
||||
settingKey="Checkbox"
|
||||
settingValue={true}
|
||||
on:changed={(event) => {
|
||||
showMessage(
|
||||
`Checkbox changed: ${event.detail.key} = ${event.detail.value}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<SettingItem
|
||||
type="input"
|
||||
title="Input"
|
||||
text="This is an input"
|
||||
settingKey="Input"
|
||||
settingValue=""
|
||||
placeholder="Input something"
|
||||
on:changed={(event) => {
|
||||
showMessage(
|
||||
`Input changed: ${event.detail.key} = ${event.detail.value}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<SettingItem
|
||||
type="button"
|
||||
title="Button"
|
||||
text="This is a button"
|
||||
settingKey="Button"
|
||||
settingValue="Click me"
|
||||
on:clicked={() => {
|
||||
showMessage("Button clicked");
|
||||
}}
|
||||
/>
|
||||
<SettingItem
|
||||
type="select"
|
||||
title="Select"
|
||||
text="This is a select"
|
||||
settingKey="Select"
|
||||
settingValue="left"
|
||||
options={{
|
||||
left: "Left",
|
||||
center: "Center",
|
||||
right: "Right",
|
||||
}}
|
||||
on:changed={(event) => {
|
||||
showMessage(
|
||||
`Select changed: ${event.detail.key} = ${event.detail.value}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<SettingItem
|
||||
type="slider"
|
||||
title="Slide"
|
||||
text="This is a slide"
|
||||
settingKey="Slide"
|
||||
settingValue={50}
|
||||
slider={{
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
}}
|
||||
on:changed={(event) => {
|
||||
showMessage(
|
||||
`Slide changed: ${event.detail.key} = ${event.detail.value}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
|
||||
|
||||
export default {
|
||||
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
}
|
||||
|
|
@ -33,8 +33,7 @@
|
|||
"checkJs": true,
|
||||
"types": [
|
||||
"node",
|
||||
"vite/client",
|
||||
"svelte"
|
||||
"vite/client"
|
||||
],
|
||||
"baseUrl": "./src",
|
||||
"paths": {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { defineConfig, loadEnv } from "vite"
|
|||
import minimist from "minimist"
|
||||
import { viteStaticCopy } from "vite-plugin-static-copy"
|
||||
import livereload from "rollup-plugin-livereload"
|
||||
import { svelte } from "@sveltejs/vite-plugin-svelte"
|
||||
import zipPack from "vite-plugin-zip-pack";
|
||||
import fg from 'fast-glob';
|
||||
|
||||
|
|
@ -23,7 +22,6 @@ export default defineConfig({
|
|||
},
|
||||
|
||||
plugins: [
|
||||
svelte(),
|
||||
|
||||
viteStaticCopy({
|
||||
targets: [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue