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)
|
[中文版](./README_zh_CN.md)
|
||||||
|
|
||||||
|
|
@ -9,8 +9,7 @@
|
||||||
|
|
||||||
1. Using vite for packaging
|
1. Using vite for packaging
|
||||||
2. Use symbolic linking instead of putting the project into the plugins directory program development
|
2. Use symbolic linking instead of putting the project into the plugins directory program development
|
||||||
3. Built-in support for the svelte framework
|
3. Provides a github action template to automatically generate package.zip and upload to new release
|
||||||
4. Provides a github action template to automatically generate package.zip and upload to new release
|
|
||||||
|
|
||||||
|
|
||||||
## Get started
|
## 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
|
- 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
|
```bash
|
||||||
>>> pnpm run make-link
|
>>> 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
|
> node --no-warnings ./scripts/make_dev_link.js
|
||||||
|
|
||||||
"targetDir" is empty, try to get SiYuan directory automatically....
|
"targetDir" is empty, try to get SiYuan directory automatically....
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,6 @@
|
||||||
"build": "vite build"
|
"build": "vite build"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/vite-plugin-svelte": "^2.0.3",
|
|
||||||
"@tsconfig/svelte": "^4.0.1",
|
|
||||||
"@types/node": "^20.2.0",
|
"@types/node": "^20.2.0",
|
||||||
"fast-glob": "^3.2.12",
|
"fast-glob": "^3.2.12",
|
||||||
"glob": "^7.2.3",
|
"glob": "^7.2.3",
|
||||||
|
|
@ -22,7 +20,6 @@
|
||||||
"rollup-plugin-livereload": "^2.0.5",
|
"rollup-plugin-livereload": "^2.0.5",
|
||||||
"sass": "^1.62.1",
|
"sass": "^1.62.1",
|
||||||
"siyuan": "^0.7.2",
|
"siyuan": "^0.7.2",
|
||||||
"svelte": "^3.57.0",
|
|
||||||
"ts-node": "^10.9.1",
|
"ts-node": "^10.9.1",
|
||||||
"typescript": "^5.0.4",
|
"typescript": "^5.0.4",
|
||||||
"vite": "^4.3.7",
|
"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";
|
} from "siyuan";
|
||||||
import "@/index.scss";
|
import "@/index.scss";
|
||||||
|
|
||||||
import HelloExample from "@/hello.svelte";
|
|
||||||
import SettingPannel from "@/libs/setting-panel.svelte";
|
|
||||||
|
|
||||||
const STORAGE_NAME = "menu-config";
|
const STORAGE_NAME = "menu-config";
|
||||||
const TAB_TYPE = "custom_tab";
|
const TAB_TYPE = "custom_tab";
|
||||||
const DOCK_TYPE = "dock_tab";
|
const DOCK_TYPE = "dock_tab";
|
||||||
|
|
@ -71,22 +68,10 @@ export default class PluginSample extends Plugin {
|
||||||
element: statusIconTemp.content.firstElementChild as HTMLElement,
|
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({
|
this.customTab = this.addTab({
|
||||||
type: TAB_TYPE,
|
type: TAB_TYPE,
|
||||||
init() {
|
init() {
|
||||||
this.element.appendChild(tabDiv);
|
this.element.innerHTML = '<p>Hello</p>'
|
||||||
console.log(this.element);
|
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
console.log("destroy tab:", TAB_TYPE);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -144,19 +129,7 @@ export default class PluginSample extends Plugin {
|
||||||
}
|
}
|
||||||
|
|
||||||
openSetting(): void {
|
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) {
|
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,
|
"checkJs": true,
|
||||||
"types": [
|
"types": [
|
||||||
"node",
|
"node",
|
||||||
"vite/client",
|
"vite/client"
|
||||||
"svelte"
|
|
||||||
],
|
],
|
||||||
"baseUrl": "./src",
|
"baseUrl": "./src",
|
||||||
"paths": {
|
"paths": {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@ import { defineConfig, loadEnv } from "vite"
|
||||||
import minimist from "minimist"
|
import minimist from "minimist"
|
||||||
import { viteStaticCopy } from "vite-plugin-static-copy"
|
import { viteStaticCopy } from "vite-plugin-static-copy"
|
||||||
import livereload from "rollup-plugin-livereload"
|
import livereload from "rollup-plugin-livereload"
|
||||||
import { svelte } from "@sveltejs/vite-plugin-svelte"
|
|
||||||
import zipPack from "vite-plugin-zip-pack";
|
import zipPack from "vite-plugin-zip-pack";
|
||||||
import fg from 'fast-glob';
|
import fg from 'fast-glob';
|
||||||
|
|
||||||
|
|
@ -23,7 +22,6 @@ export default defineConfig({
|
||||||
},
|
},
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
svelte(),
|
|
||||||
|
|
||||||
viteStaticCopy({
|
viteStaticCopy({
|
||||||
targets: [
|
targets: [
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue