Modern.TiddlyDev

        

  

View Tutorials

Modern.TiddlyDev is a one-click development environment for various TiddlyWiki plug-in developers built on a modern front-end technology stack, with the following features and functions:

• Compile, test and publish plug-ins with one click:
  • Open the page server in development mode, which can be tested in the browser, automatically detect changes to the plug-in files and synchronize the plug-in content updates to the browser page, realizing the WYSIWYG of plug-in development;
  • One-click plugin building and support for generating plugin library for use by your subscribers.
  • Has a built-in GitHub Page publishing script that automatically publishes written plugin documentation pages and plugin library to the Internet;
  • Built-in GitHub Release script, which releases the plugin according to the version specified by the git tag;
• Tailored for TypeScript plugin development, so it is now easy to use TypeScript development in TiddlyWiki:
  • Multi-entry file compilation is supported, and various plugins can be easily written in TiddlyWiki;
  • Support for .ts, .tsx, .jsx, .mjs, .cjs files compiled with the tw-react plugin for React development in TiddlyWiki;
  • Use tw5-typed to type annotate TiddlyWiki API to bring a native TypeScript experience to development;
  • Use the full amount of ESLint and Prettier rules provided by Modern.JS to normalize the code;
  • Incremental project builds using the extremely fast esbuild, which makes writing code a blast;
  • Support for setting browser compatibility ranges for plugins using browserslist;
  • Automatically generate sourcemap for source code (start by default when developing, specify to turn on when building), no need to worry about debugging!
  • The possibility of introducing CSS, JSON, etc. into the script;
  • Automatic volume compression of the plug-in (can be turned off);
  • Automatic generation of hash-check signatures for the generated plug-ins;

Don't worry, even if you are not good at programming, it doesn't matter, Modern.TiddlyDev can be your development tool as well. No code plugin development can be an enjoyable development experience as well!

There's a lot of work here, but it's just Out-of-the-Box for you. Use it and get started on your modern TiddlyWiki plugin development journey!

TypeScript Setup

Modern.TiddlyDev now loads tw5-typed in the supported way:

{
  "compilerOptions": {
    "types": ["node", "tw5-typed"]
  }
}

And the template keeps a project ambient entry in src/global.d.ts:

/// <reference types="tw5-typed" />

This makes both import type { ... } from 'tiddlywiki' and the global $tw available to TypeScript and VS Code. Do not put tw5-typed into typeRoots; it is a normal package with its own types entry, and using typeRoots there can stop the editor from resolving the declarations correctly.

Playwright E2E Test

This project now supports browser E2E tests with Playwright and pnpm.

• Test files are placed in wiki/tiddlers/tests/playwright
• Example render test: wiki/tiddlers/tests/playwright/example-widget.spec.ts
• Example click behavior test: wiki/tiddlers/tests/playwright/example-widget-click.spec.ts
• The sample tiddler used by the test is wiki/tiddlers/tests/playwright/PlaywrightExampleWidget.tid

Run tests:

pnpm test:playwright

pnpm test:playwright runs in headless mode (no visible browser), which is suitable for CI and quick local checks.

Run tests in headed mode:

pnpm test:playwright:headed

pnpm test:playwright:headed opens a visible browser window, which is useful for debugging interaction steps.