Skip to content

Wiki AST transformation for WYSIWYG editor and advanced dynamic widgets in Tiddlywiki.

License

Notifications You must be signed in to change notification settings

tiddly-gittly/wikiast

Repository files navigation

Wikiast Transform

This folder contains AST transformers, in two types:

  • Between text and AST: wikiast-util-to-wikitext
  • Between ASTs: wikiast-util-from-slate-plate-ast wikiast-util-to-slate-plate-ast
  1. In src/transform/serialize.ts
    1. when loading, get slate-plate-ast using wikitext -> wikiast-util-from-wikitext -> wikiast-util-to-slate-plate-ast
    2. when saving, get wikitext using slate-plate-ast -> wikiast-util-from-slate-plate-ast -> wikiast-util-to-wikitext

AST

slate-plate-ast

SlateJS don't have many constrains on how user construct their JSONSchema, so each slate-based-editor will have different AST. For example, udecode/plate and prezly/slate uses similar but different JSON structure.

In our packages, we choose to use udecode/plate, so we use wikiast-util-from-slate-plate-ast to convert Slate generated JSON to wikiast.

Wiki AST

Similar to SlateJS AST, each wiki system will generate different AST. In our package, we focus on tiddlywiki-generated AST.

How to develop new transformer for new syntax

pnpm i

pnpm i

(See https://npmmirror.com/ for how to speed up in China)

Add code

  1. Add test in test folder as described in its Readme (Test Driven Development).
  2. In each xxx-util-to/from-xxx folder, add new transform functions to xxxBuilder folder.
  3. Import and put them in builders object in each xxxBuilder/index.ts file.

Test it

npm run test

You can use it.only to run a single test.

You can console.log an ast object to see its struct and use transform.tools to transform it into typescript and contribute back to TW5-Typed

traverse.ts file

It contains one and all functions (may have different name, but concept are the same) similar to syntax-tree/mdast-util-to-hast.

See https://onetwo.ren/wiki/#AST转换成另一种AST (in Chinese) for explanation of this compiler design pattern.

Development

Publish

We use changeset to update version of all packages at once, follow its guide for how to use

npx changeset
npx changeset version
npx changeset publish