@mralfarrakhan/svork 0.7.1-alpha → 0.8.0-alpha

package/README.md

@@ -1,8 +1,11 @@
 # Svork
 
-Svork provides `svelteMarkdown`, a Svelte 5 preprocessor for Markdown files that need a small amount of Svelte interop.
+Svelte 5 preprocessors for content files.
 
-It is intended for blog/content pages where Markdown should stay ergonomic while still allowing frontmatter, scripts, components, and inline expressions like `{post.title}`.
+- `svelteMarkdown` — Markdown with Svelte interop
+- `svelteTypst` — Typst documents compiled to Svelte components
+
+---
 
 ## Install
 
@@ -10,22 +13,30 @@ It is intended for blog/content pages where Markdown should stay ergonomic while
 bun add -D @mralfarrakhan/svork
 ```
 
-Svork has a peer dependency on Svelte 5.
+For Typst support, also install the compiler:
+
+```sh
+bun add -D @myriaddreamin/typst-ts-node-compiler
+```
+
+---
+
+## svelteMarkdown
 
-## Usage
+Markdown files with frontmatter, scripts, components, and inline expressions.
 
-Add the preprocessor to your Svelte config:
+### Setup
 
 ```js
-import { svelteMarkdown } from "svork";
+import { svelteMarkdown } from "@mralfarrakhan/svork";
 
 export default {
   preprocess: [svelteMarkdown()],
-  extensions: [".svx", ".md"],
+  extensions: [".svelte", ".md"],
 };
 ```
 
-Then write Markdown with the supported Svelte syntax:
+### Usage
 
 ```svelte
 ---
@@ -35,7 +46,6 @@ author: Budi
 
 <script lang="ts">
   import Badge from "./Badge.svelte";
-
   const label = "New";
 </script>
 
@@ -46,55 +56,107 @@ author: Budi
 Hello, {metadata.author}.
 ```
 
-Frontmatter is exported as `metadata` from the instance script:
+Frontmatter is exported as `metadata` from a module script:
 
-```svelte
-export const metadata = {
-  title: "Hello",
-  author: "Budi",
-};
+```ts
+export const metadata = { title: "Hello", author: "Budi" };
 ```
 
-## Options
+### Options
 
 ```ts
 type SvelteMarkdownOptions = {
-  extensions?: string[];
+  extensions?: string[];       // default: [".md"]
   remarkPlugins?: PluggableList;
   rehypePlugins?: PluggableList;
 };
 ```
 
-`extensions` defaults to `[".md"]`.
-
-Example with common unified plugins:
+Example with plugins:
 
 ```js
 import rehypeExpressiveCode from "rehype-expressive-code";
 import remarkGfm from "remark-gfm";
-import { svelteMarkdown } from "svork";
+
+svelteMarkdown({
+  remarkPlugins: [remarkGfm],
+  rehypePlugins: [[rehypeExpressiveCode, { themes: ["github-light"] }]],
+})
+```
+
+### Behavior
+
+- Parses source with Svelte before Markdown so Svelte spans are protected.
+- Hides code spans and fenced blocks from the Svelte parse — `{`, `}`, component-like text inside code stay as code.
+- Preserves instance scripts, module scripts, components, and inline expression tags.
+- Runs `remarkPlugins` and `rehypePlugins` through the unified pipeline.
+- Escapes remaining text and attribute braces after rehype plugins run.
+- Emits unsupported Svelte syntax as text: `{#if}`, `{#each}`, `{#snippet}`, `{@html}`, `{@render}`, and directives on lowercase elements.
+- Falls back to Markdown-only processing with metadata export when Svelte parsing fails.
+
+---
+
+## svelteTypst
+
+Full Typst documents compiled to Svelte components at build time.
+
+### Setup
+
+```js
+import { svelteTypst } from "@mralfarrakhan/svork";
 
 export default {
-  preprocess: [
-    svelteMarkdown({
-      remarkPlugins: [remarkGfm],
-      rehypePlugins: [[rehypeExpressiveCode, { themes: ["github-light"] }]],
-    }),
-  ],
-  extensions: [".svelte", ".md"],
+  preprocess: [svelteTypst()],
+  extensions: [".svelte", ".typ"],
 };
 ```
 
-## Behavior
+### Usage
+
+```typst
+#metadata((
+  title: "My Post",
+  date: "2026-01-01",
+)) <frontmatter>
+
+= Section Heading
+
+A paragraph with *bold* and _italic_ text.
+
+== Subsection
+
+More content. A footnote.#footnote[Footnote content here.]
+```
+
+Metadata is exported from a module script:
 
-- Parses source with Svelte before Markdown processing so Svelte spans can be protected.
-- Hides Markdown code spans and fenced code blocks from the initial Svelte parse, so examples containing `{`, `}`, quotes, or component-like text stay ordinary code.
-- Processes the document as one Markdown stream, preserving inline components inside paragraphs and list items.
-- Preserves instance scripts, module scripts, Svelte components, and normal inline expression tags.
-- Runs user `remarkPlugins` and `rehypePlugins` through the unified pipeline.
-- Escapes remaining text and attribute braces after rehype plugins run, so generated highlighter markup remains Svelte-safe.
-- Emits unsupported Svelte syntax as text, including `{#if}`, `{#each}`, `{#snippet}`, `{@html}`, `{@render}`, and lowercase-element directives such as `bind:*` or `class:*`.
-- Falls back to Markdown processing with metadata export when Svelte parsing fails.
+```ts
+export const metadata = { title: "My Post", date: "2026-01-01" };
+```
+
+### Options
+
+```ts
+type SvelteTypstOptions = {
+  extensions?: string[];       // default: [".typ"]
+  rehypePlugins?: PluggableList;
+  compileArgs?: CompileArgs;   // passed to NodeCompiler.create()
+};
+```
+
+`compileArgs` accepts `fontArgs`, `workspace`, and `inputs` from `@myriaddreamin/typst-ts-node-compiler`.
+
+### Behavior
+
+- Compiles Typst source with `typst-ts-node-compiler` at build time (no runtime dependency).
+- Extracts metadata via `#metadata((...)) <frontmatter>` label. Values must be JSON-serializable.
+- Runs `rehypePlugins` on the HTML output. Headings are root-level tree children, so plugins like `rehype-sectionize` work correctly.
+- Seeds `vfile.data.fm` with extracted metadata before running plugins — plugins can read and augment it.
+- Escapes braces in output for Svelte safety.
+- No Svelte expressions or components inside `.typ` files — Typst owns the document syntax.
+- Heading levels are offset by one: `= Heading` → `<h2>`, `== Heading` → `<h3>`. Typst reserves `<h1>` for the document title.
+
+---
 
 ## Development
 

package/dist/index.mjs

@@ -7,6 +7,7 @@ import remarkRehype from "remark-rehype";
 import rehypeRaw from "rehype-raw";
 import rehypeStringify from "rehype-stringify";
 import yaml from "js-yaml";
+import { resolve } from "path";
 import { NodeCompiler } from "@myriaddreamin/typst-ts-node-compiler";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
@@ -11379,7 +11380,9 @@ const svelteTypst = (options) => {
 		markup: async ({ content, filename }) => {
 			if (!filename || !hasWantedExt(filename)) return;
 			const c = getCompiler();
-			const compiled = c.compileHtml({ mainFileContent: content });
+			const absolutePath = resolve(filename);
+			c.addSource(absolutePath, content);
+			const compiled = c.compileHtml({ mainFilePath: absolutePath });
 			if (compiled.hasError()) {
 				compiled.printErrors();
 				throw new Error(`[svelteTypst] Compilation failed for ${filename}`);
@@ -11402,7 +11405,12 @@ const svelteTypst = (options) => {
 				throw new Error(`[svelteTypst] HTML rendering failed for ${filename}`);
 			}
 			const htmlOutput = htmlExec.result;
-			const bodyRoot = fromParse5(parseFragment(htmlOutput.body()));
+			const parsed = fromParse5(parseFragment(htmlOutput.body()));
+			const outerDiv = parsed.children.find((c) => c.tagName === "div");
+			const bodyRoot = outerDiv ? {
+				type: "root",
+				children: outerDiv.children
+			} : parsed;
 			const vfile = new VFile();
 			vfile.data.fm = { ...metadata };
 			const transformed = await rehypeProcessor.run(bodyRoot, vfile);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mralfarrakhan/svork",
   "type": "module",
-  "version": "0.7.1-alpha",
+  "version": "0.8.0-alpha",
   "description": "Svelte utilities for writing blog",
   "author": "mralfarrakhan <alfarrakhan@gmail.com",
   "license": "AGPL-3.0-or-later",
@@ -51,8 +51,8 @@
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.1.0",
-    "svelte": "^5.55.9",
-    "tsdown": "^0.22.0",
+    "svelte": "^5.55.10",
+    "tsdown": "^0.22.1",
     "typescript": "^6.0.3",
     "unified": "^11.0.5",
     "vitest": "^4.1.7"