Typescript plugin template for TiddlyWiki5

Use tiddly-gittly/Modern.TiddlyDev instead now!

---

This template will help you automatically package zipped multiple-file plugin for nodejs wiki, and single file JSON plugin for HTML wiki.

You can also try Modern.TiddlyDev.

What need to change after apply the template

Basic

1. update title, author and description in the src/plugin.info, update url field in the package.json.
2. write your plugin code in the src/ directory, use index.ts as your ts code's entry point.
3. you can use other file name or path, just update the "tsFiles" field in the package.json
4. write .js.meta file aloneside with your ts file (that listed in the "tsFiles" field in the package.json), because when bundled as a plugin, all ts (in "tsFiles" field) will become js.
5. other tid files just put in the src directory, they will be copy to the plugin automatically.
   1. You can use folder to organize the files, like src/filters/ to place the filter tiddlers, and that structure will be preserved in the nodejs multiple-file plugin
   2. In the JSON plugin, the structure will strictly follow the tiddler title.
   3. ignoredExtensionsWhenBuildPlugin field in package.json are file extensions that should not be copied to the dist. Normally they will be bundled by esbuild.
6. update demo site tiddlers in the demo/ directory.
7. update this readme.md

During development

There are some scripts you can run to boost your development.

After npm i --legacy-peer-deps:

• npm run dev to pack the plugin in the dist/ directory, this will setup a site that will auto reload when you have changes. But this is development mode, will produce a much larget bundle than the final version, so only for dev.
• npm run dev-html to setup the demo site locally. Re-run this command and refresh browser to see changes. In this way you can see the real bundle size same as your user will get.

You will need --legacy-peer-deps when npm i if you are using latest nodejs. This is a bug in npm.

Add a second ts file

Add new file name (without .ts) to package.json's tsFiles field. And build script will read it and compile files in it.

After the plugin is complete

Publish

Enable github action in your repo (in your github repo - setting - action - general) if it is not allowed, and when you tagging a new version vx.x.x in a git commit and push, it will automatically publish to the github release.

Demo

You will get a Github Pages demo site automatically after publish. If it is 404, you may need to manually enable Github Pages in your github repo:

Settings - Pages (on left side) - Source - choose gh-pages branch

Examples

• https://github.com/tiddly-gittly/tw-react
• https://github.com/tiddly-gittly/slate-write

Trouble Shooting

▲ [WARNING] Import "useFilter" will always be undefined because the file "node_modules/tw-react/dist/plugins/linonetwo/tw-react/index.js" has no exports

See tw-react's esbuild config, you will need to exclude the file from the modification here.