Support for Svelte plugin in Modern.TiddlyDev, make complex JS plugin smaller

Developers
#1

I’ve just update the Best TW Dev Framework! Easy WYSIWYG plugin developing, support TypeScript to v0.3.1

Now you can write src/App.svelte

<script lang="ts">
	let name = 'world';
	export let answer;
</script>

<h1>Hello {name}! {answer}</h1>

Add a type.d.ts

declare module '*.svelte' {
  export { SvelteComponent as default } from 'svelte';
}

npm i -D svelte, and use svelte component in regular JS widget src/index.ts

import { widget as Widget } from '$:/core/modules/widgets/widget.js';
import { IChangedTiddlers } from 'tiddlywiki';
import App from './App.svelte';

class ExampleWidget extends Widget {
  refresh(_changedTiddlers: IChangedTiddlers) {
    return false;
  }

  render(parent: Element, nextSibling: Element) {
    this.parentDomNode = parent;
    this.computeAttributes();
    this.execute();
    const containerElement = $tw.utils.domMaker('p', {
      class: 'tc-example-widget',
      text: 'This is a widget!',
    });
    const app = new App({
      target: containerElement,
      props: {
        // assuming App.svelte contains something like
        // `export let answer`:
        answer: 42
      }
    });
    parent.insertBefore(containerElement, nextSibling);
    this.domNodes.push(containerElement);
  }
}

// en tips
// The module variable name RandomNumber exported here will be used as the name of the widget. Use <$RandomNumber/> to call this Widget.
// The Widget's tiddler name, source file, and source file .meta file name in tiddlywiki can be inconsistent with the Widget name.
// For example, the Widget entry name could be My-Widget, and the source and source.meta file names could be index.ts and index.ts.meta, but the final Widget name could be RandomNumber, and the widget would be called with <$RandomNumber/>.
// If a .meta is added to a script file it will be treated as an entry file.
declare let exports: {
  RandomNumber: typeof ExampleWidget;
};
exports.RandomNumber = ExampleWidget;

result is

图片

And the plugin size is very small, with nerly no runtime, see https://svelte.dev/ . Compare to React and Vue. And you can still write very complex UI component in a modern way.

5 Likes