docs: complete guidance

README.md

@@ -16,7 +16,7 @@
 `typst.ts` is a project dedicated to bring the power of
 [typst](https://github.com/typst/typst) to the world of JavaScript. In short, it
 provides an `typst::World` implementation and several exporters to help compile
-and render your Typst document inside _Browser Environment_. In the scope of server-side rendering
+and render your Typst document typically inside _Browser Environment_. In the scope of server-side rendering
 collaborated by
 $\textcolor{#3c9123}{\textsf{server}}$ and $\textcolor{#0074d9}{\textsf{browser}}$, there would be a data flow like this:
 
@@ -44,7 +44,7 @@ The _Form2: Vector Format_ is developed specially for typst documents, and it ha
   </picture>
 </p>
 
-So with _Form2_, you can continue rendeing the document in different ways:
+So with _Form2_, you can continue rendering the document in different ways:
 
 ##### Static but <ins>responsive</ins> rendering
 

docs/cookery/book.typ

@@ -29,19 +29,20 @@
   title: "reflexo-typst Documentation",
   summary: [
     #prefix-chapter("introduction.typ")[Introduction]
-    = Quickstart
+    = Guidance
     - #chapter("get-started.typ", section: "1")[Get started]
       - #chapter("guide/all-in-one.typ", section: "1.1")[All-in-one JavaScript Library]
     - #chapter("guide/compilers.typ", section: "2")[Compilers]
       - #chapter("guide/compiler/ts-cli.typ", section: "2.1")[Command Line Interface]
       - #chapter("guide/compiler/service.typ", section: "2.2")[Compiler Service Library]
       - #chapter("guide/compiler/serverless.typ", section: "2.3")[Serverless (In-browser) Compiler]
       - #chapter("guide/compiler/node.typ", section: "2.4")[Compiler for Node.js]
-    - #chapter("guide/e2e-renderers.typ", section: "3")[End-to-end Renderers]
-      - #chapter(none, section: "3.1")[React Library]
-      - #chapter(none, section: "3.2")[Angular Library]
-      - #chapter(none, section: "3.3")[Vue3 Library]
-      - #chapter(none, section: "3.4")[Hexo Plugin]
+    - #chapter("guide/renderers.typ", section: "3")[Renderers]
+      - #chapter("guide/renderer/ts-lib.typ", section: "3.1")[JavaScript/TypeScript Library]
+      - #chapter("guide/renderer/react.typ", section: "3.2")[React Library]
+      - #chapter("guide/renderer/angular.typ", section: "3.3")[Angular Library]
+      - #chapter("guide/renderer/vue3.typ", section: "3.4")[Vue3 Library]
+      - #chapter("guide/renderer/hexo.typ", section: "3.5")[Hexo Plugin]
     - #chapter("guide/trouble-shooting.typ", section: "4")[Trouble Shooting]
     = Advanced development
     - #chapter("guide/env-setup.typ", section: "5")[Environment Setup]

docs/cookery/get-started.typ

@@ -1,4 +1,5 @@
 #import "/docs/cookery/book.typ": book-page
+#import "/docs/cookery/term.typ" as term
 
 #show: book-page.with(title: "Get Started")
 
@@ -34,28 +35,44 @@ There are several ways to setup typst.ts. The difficulty of each approach is eva
 #let difficult-medium = text(fill: orange.darken(25%), "medium")
 #let difficult-hard = text(fill: hard_color, "hard")
 
-- #box(link(<approach-bundle>)[Approach 1]), difficulty: #difficult-easy
-
-  Use a bundled javascript file along with wasm modules.
+- #box(link(<approach-all-in-one>)[Approach 1]) (Recommended)
+  start with the all-in-one JavaScript Library.
 
-- #box(link(<approach-node-lib>)[Approach 2]), difficulty: #difficult-easy
+- #box(link(<approach-bundle>)[Approach 2])
+  Use a bundled javascript file along with wasm modules.
 
+- #box(link(<approach-node-lib>)[Approach 3])
   Use typst.ts as a library in Node.js. 
 
-- #box(link(<approach-ts-lib>)[Approach 3]), difficulty: #difficult-medium:
-
+- #box(link(<approach-ts-lib>)[Approach 4])
   Use typst.ts as a library in browser (for TypeScript users).
 
-- #box(link(<approach-js-lib>)[Approach 4]), difficulty: #difficult-medium:
-
+- #box(link(<approach-js-lib>)[Approach 5])
   Use typst.ts as a library in browser (for JavaScript users).
 
-- #box(link(<approach-ts-lib-from-source>)[Approach 5]), difficulty: #difficult-hard:
-
+- #box(link(<approach-ts-lib-from-source>)[Approach 6])
   Use typst.ts with customized renderer/compiler modules.
 
 #line(length: 100%)
 
+=== Run the compiler or renderer with simplified APIs <approach-all-in-one>
+#let easy-preview-example = link("https://github.com/Myriad-Dreamin/typst.ts/blob/main/packages/typst.ts/examples/all-in-one.html")[Single HTML file for real-time previewing typst document]
+
+Difficulty: #difficult-easy, Example: #easy-preview-example
+
+The most simple examples always work with the all-in-one JavaScript Library:
+
+```ts
+import { $typst } from '@myriaddreamin/typst.ts/dist/esm/contrib/snippet.mjs';
+console.log((await $typst.svg({
+  mainContent: 'Hello, typst!' })).length);
+// :-> 7317
+```
+
+See #link("https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html")[All-in-one (Simplified) JavaScript Library] for more example usage.
+
+Once you feel more conformtable, please continue to try other approaches.
+
 === Use a bundled javascript file along with wasm modules. <approach-bundle>
 #let bundle-example = link("https://github.com/Myriad-Dreamin/typst.ts/blob/main/packages/typst.ts/index.html")[Single HTML file]
 
@@ -180,21 +197,6 @@ const getModule = () => WebAssembly.instantiate(/* params */);
 const getModule = async () => {/* above four ways */};
 ```
 
-== Run the compiler or renderer with simplified APIs
-
-The most simple examples always work with the all-in-one JavaScript Library:
-
-```ts
-import { $typst } from '@myriaddreamin/typst.ts/dist/esm/contrib/snippet.mjs';
-console.log((await $typst.svg({
-  mainContent: 'Hello, typst!' })).length);
-// :-> 7317
-```
-
-See #link("https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html")[All-in-one (Simplified) JavaScript Library] for more example usage.
-
-Once you feel more conformtable, please continue reading following sections.
-
 == Configure and run compiler <run-compiler>
 
 - Configure font resources
@@ -203,12 +205,25 @@ Once you feel more conformtable, please continue reading following sections.
 
 - Configure package registry
 
+See #link("https://github.com/Myriad-Dreamin/typst.ts/blob/main/packages/typst.ts/src/options.init.mts")[options.init.mts] for more details.
+
 === Precompile with `typst-ts-cli`
 
+See #term.ts-cli for more details.
+
 === Build a compilation service in rust
 
+See #link("https://myriad-dreamin.github.io/typst.ts/cookery/guide/compiler/service.html")[Compiler Service Library] for more details.
+
 == Configure and run renderer <run-renderer>
 
 - Configure font resources, same as compiler.
 
-=== Full Code Listing
+See #link("https://github.com/Myriad-Dreamin/typst.ts/blob/main/packages/typst.ts/src/options.init.mts")[options.init.mts] for more details.
+
+== Further reading
+
++ #link("https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html")[All-in-one (Simplified) JavaScript Library]
++ #link("https://myriad-dreamin.github.io/typst.ts/cookery/guide/compilers.html")[Compilers]
++ #link("https://myriad-dreamin.github.io/typst.ts/cookery/guide/renderers.html")[Renderers]
++ #link("https://myriad-dreamin.github.io/typst.ts/cookery/guide/trouble-shooting.html")[Troble shooting]

docs/cookery/guide/all-in-one.typ

@@ -5,7 +5,7 @@
 = All-in-one (Simplified) JavaScript Library
 
 #let snippet-source = "https://github.com/Myriad-Dreamin/typst.ts/blob/main/packages/typst.ts/src/contrib/snippet.mts"
-#let snippet-lib = link(snippet-source)[`snippet`]
+#let snippet-lib = link(snippet-source)[`snippet.mts`]
 
 The most simple examples always work with #snippet-lib utility library, an all-in-one JavaScript Library with simplified API interfaces:
 
@@ -41,15 +41,17 @@ because the compilation process may change the state of that.
 === Example: Create an instance of the utility class:
 
 ```typescript
-// optional renderer instance
-const renderer = enableRendering ?? (() => {
-  return createGlobalRenderer(createTypstRenderer,
-    undefined /* pdfJsLib */, initOptions);
+const $typst = new TypstSnippet({
+  // optional renderer instance
+  renderer: enableRendering ?? (() => {
+    return createGlobalRenderer(createTypstRenderer,
+      undefined /* pdfJsLib */, initOptions);
+  }),
+  compiler() => {
+    return createGlobalCompiler(createTypstCompiler,
+      initOptions);
+  }
 });
-const $typst = new TypstSnippet(() => {
-  return createGlobalCompiler(createTypstCompiler,
-    initOptions);
-}, renderer);
 ```
 
 === Example: get output from input
@@ -149,6 +151,62 @@ await $typst.svg({ mainContent });
 
 Note: There are more documentation about initialization in the *Import typst.ts to your project* section of #link("https://myriad-dreamin.github.io/typst.ts/cookery/get-started.html")[Get started with Typst.ts].
 
+== Configure snippet by the `use` API
+
+Specify address to a http server for filesystem backend (shadowed by the `addSource` and `mapShadow` api):
+
+```js
+const cm = window.TypstCompileModule;
+const fetchBackend = new cm.FetchAccessModel(
+  'http://localhost:20810',
+);
+$typst.use(
+  TypstSnippet.withAccessModel(fetchBackend),
+);
+```
+
+Specify a memory filesystem backend (shadowed by the `addSource` and `mapShadow` api):
+
+```js
+const memoryAccessModel = new cm.MemoryAccessModel();
+$typst.use(
+  TypstSnippet.withAccessModel(memoryAccessModel),
+);
+```
+
+Fetch package from remote registry:
+
+```js
+const acessModel = cm.FetchAccessModel() or
+  cm.MemoryAccessModel() or others;
+$typst.use(
+  TypstSnippet.fetchPackageRegistry(fetchBackend),
+);
+```
+
 == Specify extra render options
 
 See #link(snippet-source)[comments on source] for more details.
+
+== Configure dependencies of canvas export
+
+To display text layer of canvas, it needs pdf.js.
+
+#include "renderer/pdfjs.typ"
+
+=== Sample application: real-time preview document
+
+See #link("https://github.com/Myriad-Dreamin/typst.ts/blob/main/packages/typst.ts/examples/all-in-one.html")[Preview by all-in-one Library] by a single included file (`all-in-one.bundle.js`).
+
+See #link("https://github.com/Myriad-Dreamin/typst.ts/blob/main/packages/typst.ts/examples/all-in-one-lite.html")[Preview by all-in-one-lite Library] by the more pratical single included file (`all-in-one-lite.bundle.js`), which needs configure your frontend to have access to wasm module files:
+
+```js
+$typst.setCompilerInitOptions({
+  getModule: () =>
+    '/path/to/typst_ts_web_compiler_bg.wasm',
+});
+$typst.setRendererInitOptions({
+  getModule: () =>
+    '/path/to/typst_ts_renderer_bg.wasm',
+});
+```