wuchale 0.1.0

package/README.md

@@ -0,0 +1,214 @@
+# wuchale
+
+A non-invasive compile-time internationalization (i18n) system for Svelte —
+inspired by Lingui, but built from scratch with performance, clarity, and
+simplicity in mind.
+
+> 🌍 Smart translations, tiny runtime, full HMR. `wuchale` extracts your
+> strings at build time, generates optimized translation catalogs, supports
+> live translations (even from Gemini), and ships almost no extra code to
+> production.
+
+## ✨ Features
+
+### 🪄 Invisible Integration
+
+*Write your Svelte code naturally.* — instead of
+`<p>{t('Hello')}</p>`, or `<p><Trans>Hello</Trans></p>`, or
+`<p>{t(page.home.hello)}</p>`, you write just:
+
+```svelte
+
+<p>Hello</p>
+
+```
+
+No extra imports or annotations. `wuchale` extracts and compiles everything
+automatically. In the spirit of Svelte itself.
+
+### 🧠 Compiler-Powered
+
+Built on the Svelte compiler and powered by AST
+analysis. All transformations happen at build time using Vite. Runtime is
+minimal and constant-time.
+
+### 🧩 Full Nesting Support
+
+Handles deeply nested markup and interpolations — mixed conditionals, loops,
+and awaits — by compiling them into nested Svelte snippets.
+
+### 📦 No String Parsing at Runtime
+
+Messages are compiled into arrays with index-based lookups. Runtime only
+concatenates and renders — no regex, replace, or complex logic. And the
+compiled bundles are as small as possible, they don't even have keys.
+
+### 🔁 HMR & Dev Translations Live updates during development.
+
+Translation files and source changes trigger updates instantly — including
+optional Gemini-based auto-translation. This means you can write the code in
+English and have it shown in another language in the browser while in dev mode.
+
+### 🔤 Uses .po Files
+
+Output is standard gettext .po files with references, status tracking, and
+optional integration with external tools.
+
+### 🚀 Tiny Footprint
+
+Adds just 2 packages (your own) to `node_modules`, and only a few kilobytes to
+the bundle. No 90MB dependency trees like some existing solutions.
+
+### ✨ Ready for Svelte 5
+
+Works with Svelte 5's new architecture and snippets. Future-proof and tightly
+integrated
+
+## 🚀 Getting Started
+
+Install:
+
+```bash
+npm install wuchale
+```
+
+Add to your Vite config:
+
+```javascript
+
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { wuchale } from 'wuchale'
+
+export default { plugins: [ wuchale(), svelte(), ] }
+
+```
+
+Use in your Svelte files:
+
+```svelte
+
+<!-- you write -->
+<p>Hello</p>
+
+<!-- it becomes -->
+
+<script>
+import WuchaleTrans, { wuchaleTrans } from 'wuchale/runtime.svelte'
+</script>
+<h1>{wuchaleTrans(0)}</h1> <!-- Extracted "Hello" as index 0 -->
+```
+
+## 📦 How It Works
+
+### Process
+
+![Diagram](https://raw.githubusercontent.com/K1DV5/wuchale/main/images/diagram.svg)
+
+1. All text nodes are extracted using AST traversal.
+1. Replaced with index-based lookups `wuchaleTrans(n)`, which is minifiable for production builds.
+1. Catalog is updated
+1. If Gemini integration is enabled, it fetches translations automatically.
+1. Messages are compiled and written
+1. In dev mode: Vite picks the write and does HMR during dev
+1. In production mode: unused messages are marked obsolete
+1. On next run, obsolete ones are purged unless reused.
+1. Final build contains only minified catalogs and the runtime.
+
+### Catalogs:
+
+- Stored as PO files (.po).
+- Compatible with tools like Poedit or translation.io.
+- Includes source references and obsolete flags for cleaning.
+
+## 🌐 Gemini Integration (optional)
+
+To enable the Gemini live translation, set the environment variable
+`GEMINI_API_KEY` to your API key beforehand. The integration is:
+
+- Rate-limit friendly (bundles messages to be translated into one request)
+- Only translates new/changed messages
+- Keeps original source intact
+
+## 🧪 Example
+
+Input:
+
+```svelte
+
+<p>Hello <b>{userName}</b></p>
+
+```
+
+Output:
+
+```svelte
+
+<p>{wuchaleTrans(0, <b>{userName}</b>)}</p>
+
+```
+
+Catalog (PO):
+
+```nginx
+
+msgid "Hello {0}" msgstr "Bonjour {0}"
+
+```
+
+## Supported syntax
+
+Text can be in three places: markup, script and attributes. Script means not
+just the part inside the `<script>` tags, but also inside interpolations inside
+the markup, such as `<p>{'This string'}</p>` and also in other places such as
+`{#if 'this string' == ''}`. And each can have their own rules. While these
+rules can be configured, the default is:
+
+- Markup:
+    - All text should be extracted unless prefixed with `-`. Example: `<p>-
+    This will be ignored.</p>`
+- Attributes:
+    - All attributes starting with upper case letters are extracted unless
+    prefixed with `-` like `label="-Ignore"`.
+    - All attributes starting with lower case letters are ignored, unless
+    prefixed with `+` like `alt="+extract"`.
+- Script:
+    - Strings: same rules as attributes above, but:
+    - If they are used inside the `<script>` tags, there is the additional
+      restriction that they must be inside a `$derived` variable declaration.
+      This is to make the behavior less magic and being more explicit.
+
+## Where does it look?
+
+All files that can contain reactive logic. This means `*.svelte` and
+`*.svelte.js` files specifically.
+
+## Plurals?
+
+Since messages can be written anywhere in the reactive places, it was not
+necessary to have a separate plurals support because you can do something like:
+
+```svelte
+
+<p>{items === 1 ? 'One item listed' : `${items} items listed`}
+
+```
+
+And they will be extracted separately. You can also make a reusable function
+yourself.
+
+## 🧹 Cleaning
+
+Unused keys are marked as obsolete during a production build. Obsoletes are
+purged on the next run (build or dev). Essentially this means cleaning needs
+two passes. This is because of how vite/rollup works.
+
+## 🧪 Tests
+
+A wide range of scenarios are tested, including:
+
+- Raw strings, HTML markup, nested blocks
+- Loops, awaits, conditionals
+- PO parsing and index consistency
+- Obsolete tracking and cleanup
+
+## 📜 License MIT

package/index.js

@@ -0,0 +1,3 @@
+import wuchale from "./preprocess/index.js"
+
+export default wuchale

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "wuchale",
+  "version": "0.1.0",
+  "description": "i18n for svelte without turning your codebase upside down",
+  "main": "index.js",
+  "scripts": {
+    "test": "node tests"
+  },
+  "keywords": [
+    "svelte",
+    "js",
+    "i18n"
+  ],
+  "files": [
+      "index.js",
+      "preprocess/",
+      "runtime.svelte"
+  ],
+  "homepage": "https://github.com/K1DV5/wuchale",
+  "bugs": "https://github.com/K1DV5/wuchale/issues",
+  "author": "K1DV5",
+  "license": "MIT",
+  "dependencies": {
+    "magic-string": "^0.30.17",
+    "pofile": "^1.1.4"
+  },
+  "devDependencies": {
+    "svelte": "^5.28.1"
+  },
+  "type": "module"
+}

package/preprocess/compile.js

@@ -0,0 +1,52 @@
+// $$ cd .. && npm run test
+// $$ node %f
+
+import { parse } from "svelte/compiler"
+
+/**
+ * @param {{ type: string; data: any; name: string | any[]; children: any; expression: { value: any; }; }} ast
+ */
+function walkCompileNodes(ast) {
+    const parts = []
+    if (ast.type === 'Text') {
+        parts.push(ast.data)
+    } else if (ast.type === 'InlineComponent') {
+        const nodeIndex = Number(ast.name.slice(1))
+        const subParts = [nodeIndex]
+        for (const child of ast.children) {
+            subParts.push(...walkCompileNodes(child))
+        }
+        parts.push(subParts)
+    } else if (ast.type === 'MustacheTag') {
+        parts.push(ast.expression.value)
+    } else if (ast.type === 'Fragment') {
+        for (const child of ast.children) {
+            parts.push(...walkCompileNodes(child))
+        }
+    } else {
+        console.log(ast)
+    }
+    return parts
+}
+
+/**
+ * @param {string} text
+ * @param {any} fallback
+ */
+export default function compileTranslation(text, fallback) {
+    if (!text) {
+        return fallback
+    }
+    if (!text.includes('<') && !text.includes('{')) {
+        return text
+    }
+    // <0></0> to <X0></X0> to please svelte parser
+    text = text.replace(/(<|(<\/))(\d+)/g, '$1X$3')
+    try {
+        const ast = parse(text).html
+        return walkCompileNodes(ast)
+    } catch(err) {
+        console.error(err)
+        return fallback
+    }
+}

package/preprocess/gemini.js

@@ -0,0 +1,61 @@
+// $$ node %f
+
+const baseURL = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key='
+const h = {'Content-Type': 'application/json'}
+
+/**
+ * @param {string[]} fragments
+ * @param {string} sourceLocale
+ * @param {string} targetLocale
+ */
+function prepareData(fragments, sourceLocale, targetLocale) {
+    const instruction = `
+        You will be given text fragments for a web app separated by new line characters.
+        Translate each of the fragments from the source to the target language.
+        You have to find out the languages using their ISO 639-1 codes.
+        The source language is: ${sourceLocale}.
+        The target language is: ${targetLocale}.
+        Preserve any placeholders and provide the translations in the target language only,
+        separated by new line characters in the same order.
+        The placeholder format is like the following examples:
+            - {0}: means arbitrary values.
+            - <0>something</0>: means something enclosed in some tags, like HTML tags
+            - <0/>: means a self closing tag, like in HTML
+        In all of the examples, 0 is an example for any integer.
+    `
+    return {
+        system_instruction: {
+            parts: [{ text: instruction }]
+        },
+        contents: [{parts: [{text: fragments.join('\n')}]}]
+    }
+}
+
+/**
+ * @param {string} targetLocale
+ * @param {string | undefined} apiKey
+ */
+function setupGemini(sourceLocale = 'en', targetLocale, apiKey) {
+    if (apiKey === 'env') {
+        apiKey = process.env.GEMINI_API_KEY
+    }
+    if (!apiKey) {
+        return
+    }
+    const url = `${baseURL}${apiKey}`
+    return async (/** @type {string[]} */ fragments) => {
+        const data = prepareData(fragments, sourceLocale, targetLocale)
+        const res = await fetch(url, {method: 'POST', headers: h, body: JSON.stringify(data)})
+        const json = await res.json()
+        const resText = json.candidates[0].content.parts[0].text
+        const trans = {}
+        for (const [i, text] of resText.split('\n').entries()) {
+            if (text.trim()) {
+                trans[fragments[i]] = text
+            }
+        }
+        return trans
+    }
+}
+
+export default setupGemini

package/preprocess/index.js

@@ -0,0 +1,270 @@
+import Preprocess, { IndexTracker } from "./prep.js"
+import { parse } from "svelte/compiler"
+import {writeFile} from 'node:fs/promises'
+import compileTranslation from "./compile.js"
+import setupGemini from "./gemini.js"
+import PO from "pofile"
+import { relative } from "node:path"
+
+/**
+ * @param {string} text
+ * @param {string} scope
+ * @returns {{extract: boolean, replace: string}}
+ */
+export function defaultHeuristic(text, scope = 'markup') {
+    if (scope === 'markup') {
+        if (text.startsWith('-')) {
+            return {extract: false, replace: text.slice(1).trim()}
+        }
+        return {extract: true, replace: text}
+    }
+    // script and attribute
+    if (text.startsWith('+')) {
+        return {extract: true, replace: text.slice(1).trim()}
+    }
+    const range = 'AZ'
+    const startCode = text.charCodeAt(0)
+    if (startCode >= range.charCodeAt(0) && startCode <= range.charCodeAt(1)) {
+        return {extract: true, replace: text}
+    }
+    return {extract: false, replace: text}
+}
+
+export const defaultOptions = {
+    sourceLocale: 'en',
+    otherLocales: ['am'],
+    localesDir: './locales',
+    importFrom: 'wuchale/runtime.svelte',
+    heuristic: defaultHeuristic,
+    geminiAPIKey: 'env',
+}
+
+/**
+ * @param {string} filename
+ */
+async function loadPONoFail(filename) {
+    return new Promise((res) => {
+        PO.load(filename, (err, po) => {
+            if (err) {
+                res({})
+                return
+            }
+            const translations = {}
+            let total = 0
+            let obsolete = 0
+            let untranslated = 0
+            for (const item of po.items) {
+                total++
+                if (item.obsolete) {
+                    obsolete++
+                    continue
+                }
+                if (!item.msgstr[0]) {
+                    untranslated++
+                }
+                translations[item.msgid] = item
+            }
+            res({translations, total, obsolete, untranslated})
+        })
+    })
+}
+
+/**
+ * @param {{ [s: string]: any; } | ArrayLike<any>} translations
+ * @param {string} filename
+ */
+async function savePO(translations, filename) {
+    const po = new PO()
+    for (const item of Object.values(translations)) {
+        po.items.push(item)
+    }
+    return new Promise((res, rej) => {
+        po.save(filename, err => {
+            if (err) {
+                rej(err)
+            } else {
+                res()
+            }
+        })
+    })
+}
+
+function mergeOptionsWithDefault(options = defaultOptions) {
+    for (const key of Object.keys(defaultOptions)) {
+        if (key in options) {
+            continue
+        }
+        options[key] = defaultOptions[key]
+    }
+}
+
+export default async function wuchale(options = defaultOptions) {
+    mergeOptionsWithDefault(options)
+    const locales = [options.sourceLocale, ...options.otherLocales]
+    const translations = {}
+    const compiledFname = {}
+    const translationsFname = {}
+    for (const loc of locales) {
+        compiledFname[loc] = `${options.localesDir}/${loc}.json`
+        translationsFname[loc] = `${options.localesDir}/${loc}.po`
+    }
+
+    let forProduction = false
+    let projectRoot = ''
+
+    let sourceTranslations = {}
+    let indexTracker = new IndexTracker({})
+
+    const compiled = {}
+
+    async function loadFilesAndSetup() {
+        for (const loc of locales) {
+            const {translations: trans, total, obsolete, untranslated} = await loadPONoFail(translationsFname[loc])
+            translations[loc] = trans
+            console.info(`i18n stats (${loc}): total: ${total}, obsolete: ${obsolete}, untranslated: ${untranslated}`)
+        }
+        sourceTranslations = translations[options.sourceLocale]
+        indexTracker = new IndexTracker(sourceTranslations)
+        // startup compile
+        for (const loc of locales) {
+            compiled[loc] = []
+            for (const txt in translations[loc]) {
+                const poItem = translations[loc][txt]
+                if (forProduction) {
+                    poItem.references = []
+                }
+                const index = indexTracker.get(txt)
+                compiled[loc][index] = compileTranslation(poItem.msgstr[0], compiled[options.sourceLocale][index])
+            }
+            await writeFile(compiledFname[loc], JSON.stringify(compiled[loc], null, 2))
+        }
+    }
+
+    /**
+     * @param {string} content
+     * @param {import("./prep.js").Node} ast
+     * @param {string} filename
+     */
+    async function preprocess(content, ast, filename) {
+        const prep = new Preprocess(indexTracker, options.heuristic, options.importFrom)
+        const txts = prep.process(content, ast)
+        if (!txts.length) {
+            return {}
+        }
+        for (const loc of locales) {
+            const newTxts = []
+            for (const nTxt of txts) {
+                const txt = nTxt.toString()
+                let translated = translations[loc][txt]
+                if (translated == null) {
+                    translated = new PO.Item()
+                    translated.msgid = txt
+                    translations[loc][txt] = translated
+                }
+                if (!translated.references.includes(filename)) {
+                    translated.references.push(filename)
+                }
+                if (loc === options.sourceLocale) {
+                    if (translated.msgstr[0] !== txt) {
+                        translated.msgstr = [txt]
+                        newTxts.push(txt)
+                    }
+                } else if (!translated.msgstr[0]) {
+                    newTxts.push(txt)
+                }
+            }
+            if (loc !== options.sourceLocale && newTxts.length) {
+                const geminiT = setupGemini(options.sourceLocale, loc, options.geminiAPIKey)
+                if (geminiT) {
+                    const gTrans = await geminiT(newTxts)
+                    for (const txt of newTxts) {
+                        translations[loc][txt].msgstr = [gTrans[txt]]
+                    }
+                }
+            }
+            for (const nTxt of txts) {
+                const txt = nTxt.toString()
+                const index = indexTracker.get(txt)
+                compiled[loc][index] = compileTranslation(translations[loc][txt].msgstr[0], compiled[options.sourceLocale][index])
+            }
+            for (const [i, c] of compiled[loc].entries()) {
+                if (c == null) {
+                    compiled[loc][i] = 0 // reduce json size for jumped indices, instead of null
+                }
+            }
+            if (!newTxts.length) {
+                continue
+            }
+        }
+        return {
+            code: prep.mstr.toString(),
+            map: prep.mstr.generateMap(),
+        }
+    }
+
+    return {
+        name: 'wuchale',
+        /**
+         * @param {{ env: { PROD: boolean; }, root: string; }} config
+         */
+        async configResolved(config) {
+            forProduction = config.env.PROD
+            projectRoot = config.root
+            await loadFilesAndSetup()
+        },
+        transform: {
+            order: 'pre',
+            /**
+             * @param {string} code
+             * @param {string} id
+            */
+            handler: async function(code, id) {
+                const isModule = id.endsWith('.svelte.js')
+                if (!id.endsWith('.svelte') && !isModule) {
+                    return
+                }
+                let ast
+                if (isModule) {
+                    ast = this.parse(code)
+                } else {
+                    ast = parse(code)
+                    ast.type = 'SvelteComponent'
+                }
+                const filename = relative(projectRoot, id)
+                const processed = await preprocess(code, ast, filename)
+                if (processed.code) {
+                    for (const loc of locales) {
+                        await savePO(translations[loc], translationsFname[loc])
+                        await writeFile(compiledFname[loc], JSON.stringify(compiled[loc]))
+                    }
+                }
+                return processed
+            }
+        },
+        async buildEnd() {
+            if (!forProduction) {
+                // just being pragmatic
+                return
+            }
+            for (const loc of locales) {
+                for (const txt in translations[loc]) {
+                    const poItem = translations[loc][txt]
+                    poItem.obsolete = poItem.references.length === 0
+                }
+                await savePO(translations[loc], translationsFname[loc])
+            }
+        },
+        setupTesting() {
+            for (const loc of locales) {
+                translations[loc] = {}
+                compiled[loc] = []
+            }
+            sourceTranslations = translations[options.sourceLocale]
+            return {
+                translations,
+                compiled,
+                preprocess,
+            }
+        }
+    }
+}

package/preprocess/prep.js

@@ -0,0 +1,565 @@
+// $$ cd .. && npm run test
+
+import MagicString from "magic-string"
+
+const snipPrefix = 'wuchaleSnippet'
+const rtComponent = 'WuchaleTrans'
+const rtFunc = 'wuchaleTrans'
+
+/**
+ * @typedef {object} Node
+ * @property {string} type
+ * @property {number} start
+ * @property {number} end
+ */
+
+/**
+ * @typedef {Node & {expression: Node, value: boolean | (Node & {data: string})[]}} Attribute
+ * @typedef {Node & {value: string}} NodeWithVal
+ * @typedef {Node & {data: string}} NodeWithData
+ * @typedef {Node & {
+     * attributes: Attribute[],
+     * children: (Element & NodeWithData & { expression: Node })[]
+     * inCompoundText: boolean | null,
+ * }} Element
+ * @typedef {(text: string, scope?: string) => {extract: boolean; replace: string}} HeuristicFunc
+ * @typedef {Node & {
+     *  properties: Node & { key: Node, value: Node }[]
+     * }} ObjExpr
+ */
+
+class NestText extends String {
+    /**
+     * @param {string} txt
+     * @param {string} scope
+     */
+    constructor(txt, scope) {
+        super(txt)
+        this.scope = scope
+    }
+}
+
+export class IndexTracker {
+    /**
+     * @param {object} sourceTranslations
+     */
+    constructor(sourceTranslations) {
+        this.indices = {}
+        this.nextIndex = 0
+        for (const txt of Object.keys(sourceTranslations)) {
+            // guaranteed order for strings since ES2015
+            this.indices[txt] = this.nextIndex
+            this.nextIndex++
+        }
+    }
+
+    get = (/** @type {string} */ txt) => {
+        if (txt in this.indices) {
+            return this.indices[txt]
+        }
+        const index = this.nextIndex
+        this.indices[txt] = index
+        this.nextIndex++
+        return index
+    }
+}
+
+export default class Preprocess {
+    /**
+     * @param {IndexTracker} index
+     * @param {HeuristicFunc} heuristic
+     * @param {string} importFrom
+     */
+    constructor(index, heuristic, importFrom) {
+        this.index = index
+        this.importFrom = importFrom
+        this.heuristic = heuristic
+        this.content = ''
+        /** @type {MagicString} */
+        this.mstr = null
+    }
+
+    /**
+     * @param {{ start: number; end: number; }} node
+     * @param {string} text
+     * @param {string} scope
+     * @returns {Array<*> & {0: boolean, 1: NestText}}
+     */
+    modifyCheck = (node, text, scope) => {
+        text = text.replace(/\s+/g, ' ').trim()
+        if (text === '') {
+            // nothing to ask
+            return [false, null]
+        }
+        let {extract, replace} = this.heuristic(text, scope)
+        replace = replace.trim()
+        if (!extract && text !== replace) {
+            this.mstr.update(node.start, node.end, replace)
+        }
+        return [extract, new NestText(replace, scope)]
+    }
+
+    // visitComment = () => []
+    // visitIdentifier = () => []
+    // visitImportDeclaration = () => []
+
+    /**
+     * @param {NodeWithVal} node
+     * @returns {NestText[]}
+     */
+    visitLiteral = node => {
+        if (typeof node.value !== 'string') {
+            return []
+        }
+        const [pass, txt] = this.modifyCheck(node, node.value, 'script')
+        if (!pass) {
+            return []
+        }
+        this.mstr.update(node.start, node.end, `${rtFunc}(${this.index.get(txt.toString())})`)
+        return [txt]
+    }
+
+    /**
+     * @param {Node & { elements: Node[] }} node
+     * @returns {NestText[]}
+     */
+    visitArrayExpression = node => {
+        const txts = []
+        for (const elm of node.elements) {
+            txts.push(...this.visit(elm))
+        }
+        return txts
+    }
+
+    /**
+     * @param {ObjExpr} node
+     * @returns {NestText[]}
+     */
+    visitObjectExpression = node => {
+        const txts = []
+        for (const prop of node.properties) {
+            txts.push(...this.visit(prop.key))
+            txts.push(...this.visit(prop.value))
+        }
+        return txts
+    }
+
+    /**
+     * @param {Node & { object: Node, property: Node }} node
+     * @returns {NestText[]}
+     */
+    visitMemberExpression = node => {
+        return [
+            ...this.visit(node.object),
+            ...this.visit(node.property),
+        ]
+    }
+
+    /**
+     * @param {Node & { callee: Node, arguments: Node[] }} node
+     * @returns {NestText[]}
+     */
+    visitCallExpression = node => {
+        const txts = [...this.visit(node.callee)]
+        for (const arg of node.arguments) {
+            txts.push(...this.visit(arg))
+        }
+        return txts
+    }
+
+    /**
+     * @param {Node & {
+     *  declarations: Node & {
+     *   init: Node & {
+     *    callee: Node & { name: string },
+     *   },
+     *  }[]
+     * }} node
+     * @returns {NestText[]}
+     */
+    visitVariableDeclaration = node => {
+        const txts = []
+        for (const dec of node.declarations) {
+            if (!dec.init) {
+                continue
+            }
+            // visit only contents inside $derived
+            if (dec.init.type !== 'CallExpression' || dec.init.callee.type !== 'Identifier' || dec.init.callee.name !== '$derived') {
+                continue
+            }
+            const decVisit = this.visit(dec.init)
+            if (!decVisit.length) {
+                continue
+            }
+            txts.push(...decVisit)
+        }
+        return txts
+    }
+
+    /**
+     * @param {Node & { declaration: Node }} node
+     * @returns {NestText[]}
+     */
+    visitExportDefaultDeclaration = node => this.visit(node.declaration)
+
+    /**
+     * @param {Node & {
+     *  quasis: (Node & {
+     *   value: {cooked: string}
+     *  })[],
+     *  expressions: Node[]
+     * }} node
+     * @returns {NestText[]}
+     */
+    visitTemplateLiteral = node => {
+        const txts = []
+        const quasi0 = node.quasis[0]
+        const [pass, txt] = this.modifyCheck(quasi0, quasi0.value.cooked, 'script')
+        if (!pass) {
+            return txts
+        }
+        let nTxt = txt.toString()
+        for (const [i, expr] of node.expressions.entries()) {
+            txts.push(...this.visit(expr))
+            const quasi = node.quasis[i + 1]
+            nTxt += `{${i}}${quasi.value.cooked}`
+            this.mstr.remove(quasi.start - 1, quasi.end)
+            if (i + 1 === node.expressions.length) {
+                continue
+            }
+            this.mstr.update(quasi.end, quasi.end + 2, ', ')
+        }
+        let repl = `${rtFunc}(${this.index.get(txt.toString())}`
+        if (node.expressions.length) {
+            repl += ', '
+        }
+        this.mstr.update(quasi0.start - 1, quasi0.end + 2, repl)
+        this.mstr.update(node.end - 1, node.end, ')')
+        txts.push(new NestText(nTxt, 'script'))
+        return txts
+    }
+
+
+    /**
+     * @param {Node & {expression: Node}} node
+     * @returns {NestText[]}
+     */
+    visitMustacheTag = node => this.visit(node.expression)
+
+    /**
+     * @param {Node & {children: NodeWithData[]}} node
+     * @returns {boolean}
+     */
+    checkHasCompoundText = node => {
+        let text = false
+        let nonText = false
+        for (const child of node.children ?? []) {
+            if (child.type === 'Text') {
+                if (child.data.trim()) {
+                    text = true
+                }
+            } else if (child.type !== 'Comment') {
+                nonText = true
+            }
+        }
+        return text && nonText // mixed content
+    }
+
+    /**
+     * @param {Element} node
+     * @returns {NestText[]}
+     */
+    visitElement = node => {
+        const txts = []
+        for (const attrib of node.attributes) {
+            txts.push(...this.visitAttribute(attrib))
+        }
+        if (node.children.length === 0) {
+            return txts
+        }
+        let hasTextChild = false
+        let hasNonTextChild = false
+        const textNodesToModify = {}
+        for (const [i, child] of node.children.entries()) {
+            if (child.type === 'Text') {
+                const [pass, modify] = this.modifyCheck(child, child.data, 'markup')
+                if (pass) {
+                    hasTextChild = true
+                    textNodesToModify[i] = modify
+                } else if (i === 0 && modify != null) { // non whitespace
+                    return txts // explicitly to ignore
+                }
+            } else if (child.type !== 'Comment') {
+                hasNonTextChild = true
+            }
+            // no break because of textNodesToModify, already started, finish it
+        }
+        let hasCompoundText = hasTextChild && hasNonTextChild
+        let txt = ''
+        let iArg = 0
+        let iTag = 0
+        const lastChildEnd = node.children.slice(-1)[0].end
+        for (const [i, child] of node.children.entries()) {
+            if (child.type === 'Comment') {
+                continue
+            }
+            if (child.type === 'Text') {
+                const modify = textNodesToModify[i]
+                if (modify == null) { // whitespace
+                    continue
+                }
+                txt += ' ' + modify
+                if (node.inCompoundText && node.children.length === 1) {
+                    this.mstr.update(child.start, child.end, `{ctx[1]}`)
+                } else {
+                    this.mstr.remove(child.start, child.end)
+                }
+                continue
+            }
+            if (!node.inCompoundText && !hasCompoundText) {
+                txts.push(...this.visit(child))
+                continue
+            }
+            if (child.type === 'MustacheTag') {
+                txts.push(...this.visitMustacheTag(child))
+                txt += ` {${iArg}}`
+                this.mstr.move(child.start + 1, child.end - 1, lastChildEnd)
+                if (iArg > 0) {
+                    this.mstr.update(child.start, child.start + 1, ', ')
+                } else {
+                    this.mstr.remove(child.start, child.start + 1)
+                }
+                this.mstr.remove(child.end - 1, child.end)
+                iArg++
+                continue
+            }
+            // elements and components
+            child.inCompoundText = true
+            let chTxt = ''
+            for (const txt of this.visit(child)) {
+                if (child.type === 'Element' && txt.scope === 'markup') {
+                    chTxt += txt.toString()
+                } else { // attributes, blocks
+                    txts.push(txt)
+                }
+            }
+            if (child.type === 'Element') {
+                chTxt = `<${iTag}>${chTxt}</${iTag}>`
+            } else {
+                // InlineComponent
+                chTxt = `<${iTag}/>`
+            }
+            const snippetName = `${snipPrefix}${iTag}`
+            const snippetBegin = `\n{#snippet ${snippetName}(ctx)}\n`
+            const snippetEnd = '\n{/snippet}'
+            this.mstr.appendRight(child.start, snippetBegin)
+            this.mstr.prependLeft(child.end, snippetEnd)
+            iTag++
+            if (!txt.endsWith(' ')) {
+                txt += ' '
+            }
+            txt += chTxt
+        }
+        txt = txt.trim()
+        if (!txt) {
+            return txts
+        }
+        const nTxt = new NestText(txt, 'markup')
+        txts.push(nTxt)
+        if (iTag > 0) {
+            const snippets = []
+            // reference all new snippets added
+            for (let i = 0; i < iTag; i++) {
+                snippets.push(`${snipPrefix}${i}`)
+            }
+            let begin = `\n<${rtComponent} tags={[${snippets.join(', ')}]} `
+            if (node.inCompoundText) {
+                begin += `ctx={ctx}`
+            } else {
+                begin += `id={${this.index.get(txt)}}`
+            }
+            let end = ' />\n'
+            if (iArg > 0) {
+                begin += ' args={['
+                end = ']}' + end
+            }
+            this.mstr.appendLeft(lastChildEnd, begin)
+            this.mstr.appendRight(lastChildEnd, end)
+        } else if (!node.inCompoundText) {
+            this.mstr.appendLeft(lastChildEnd, `{${rtFunc}(${this.index.get(txt)}, `)
+            this.mstr.appendRight(lastChildEnd, ')}')
+        }
+        return txts
+    }
+
+    visitInlineComponent = this.visitElement
+
+    /**
+     * @param {NodeWithData} node
+     * @returns {NestText[]}
+     */
+    visitText = node => {
+        const [pass, txt] = this.modifyCheck(node, node.data, 'markup')
+        if (!pass) {
+            return []
+        }
+        this.mstr.update(node.start, node.end, `{${rtFunc}(${this.index.get(txt.toString())})}`)
+        return [txt]
+    }
+
+    /**
+     * @param {Attribute} node
+     * @returns {NestText[]}
+     */
+    visitAttribute = node => {
+        if (node.type === 'Spread') {
+            return this.visit(node.expression)
+        }
+        if (node.type !== 'Attribute' || typeof node.value === 'boolean') {
+            return []
+        }
+        const txts = []
+        for (const value of node.value) {
+            if (value.type !== 'Text') {
+                txts.push(...this.visit(value))
+                continue
+            }
+            const [pass, txt] = this.modifyCheck(value, value.data, 'attribute')
+            if (!pass) {
+                continue
+            }
+            txts.push(txt)
+            this.mstr.update(value.start, value.end, `{${rtFunc}(${this.index.get(txt.toString())})}`)
+            let {start, end} = value
+            if (!`'"`.includes(this.content[start - 1])) {
+                continue
+            }
+            this.mstr.remove(start - 1, start)
+            this.mstr.remove(end, end + 1)
+        }
+        return txts
+    }
+
+    /**
+     * @param {Node & {children: Node[]}} node
+     * @returns {NestText[]}
+     */
+    visitFragment = node => {
+        const txts = []
+        for (const child of node.children) {
+            txts.push(...this.visit(child))
+        }
+        return txts
+    }
+
+    visitSnippetBlock = this.visitFragment
+
+    /**
+     * @param {Node & {children: Node[], expression: Node}} node
+     * @returns {NestText[]}
+     */
+    visitIfBlock = node => {
+        const txts = this.visit(node.expression)
+        for (const child of node.children) {
+            txts.push(...this.visit(child))
+        }
+        return txts
+    }
+
+    visitEachBlock = this.visitIfBlock
+
+    visitKeyBlock = this.visitFragment
+
+    /**
+     * @typedef {Node & {children: Node[]}} Block
+     * @param {Node & {
+     *  expression: Node
+     *  value: ObjExpr
+     *  pending: Block
+     *  then: Block
+     *  catch: Block
+     * }} node
+     * @returns {NestText[]}
+     */
+    visitAwaitBlock = node => {
+        const txts = this.visit(node.expression)
+        txts.push(
+            ...this.visit(node.value),
+            ...this.visitFragment(node.pending),
+            ...this.visitFragment(node.then),
+            ...this.visitFragment(node.catch),
+        )
+        return txts
+    }
+
+    /**
+     * @typedef {Node & {body: Node[]}} Program
+     * @param {Program} node
+     * @returns {NestText[]}
+     */
+    visitProgram = (node, needImport = true) => {
+        const txts = []
+        for (const child of node.body) {
+            txts.push(...this.visit(child))
+        }
+        if (needImport) {
+            const importStmt = `import {${rtFunc}} from "${this.importFrom}"\n`
+            this.mstr.appendRight(node.start, importStmt)
+        }
+        return txts
+    }
+
+    /**
+     * @param {Node & {
+     *  html: Node & {children: Node[]}
+     *  instance: Node & {content: Program}}
+     * } node
+     * @returns {NestText[]}
+     */
+    visitSvelteComponent = node => {
+        const txts = this.visitFragment(node.html)
+        if (node.instance) {
+            txts.push(...this.visitProgram(node.instance.content, false))
+        }
+        // @ts-ignore: module is a reserved keyword, not sure how to specify the type
+        if (node.module) {
+            // @ts-ignore
+            txts.push(...this.visitProgram(node.module.content, false))
+        }
+        const importStmt = `import ${rtComponent}, {${rtFunc}} from "${this.importFrom}"\n`
+        if (node.instance) {
+            this.mstr.appendRight(node.instance.content.start, importStmt)
+        // @ts-ignore
+        } else if (node.module) {
+            // @ts-ignore
+            this.mstr.appendRight(node.module.content.start, importStmt)
+        } else {
+            this.mstr.prepend(`<script>${importStmt}</script>\n`)
+        }
+        return txts
+    }
+
+    /**
+     * @param {Node} node
+     * @returns {NestText[]}
+     */
+    visit = node => {
+        const methodName = `visit${node.type}`
+        if (methodName in this) {
+            return this[methodName](node)
+        }
+        // console.log(node)
+        return []
+    }
+
+    /**
+     * @param {string} content
+     * @param {Node} ast
+     * @returns {NestText[]}
+     */
+    process = (content, ast) => {
+        this.content = content
+        this.mstr = new MagicString(content)
+        return this.visit(ast)
+    }
+}

package/runtime.svelte

@@ -0,0 +1,68 @@
+<script module>
+
+let translations = $state({})
+
+/**
+ * @param {object} transArray
+ */
+export function setTranslations(transArray) {
+    translations = transArray
+}
+
+/**
+ * @param {number} id
+ */
+function getCtx(id) {
+    const ctx = translations[id]
+    if (typeof ctx === 'string') {
+        return [ctx]
+    }
+    if (ctx == null || typeof ctx === 'number') {
+        return [`[i18n-404:${id}(${ctx})]`]
+    }
+    return ctx
+}
+
+/**
+ * @param {number} id
+ * @param {string[]} args
+ */
+export function wuchaleTrans(id, ...args) {
+    const ctx = getCtx(id)
+    let txt = ''
+    for (const fragment of ctx) {
+        if (typeof fragment === 'string') {
+            txt += fragment
+        } else if (typeof fragment === 'number') { // index of non-text children
+            txt += args[fragment]
+        } else {
+            // shouldn't happen
+            console.error('Unknown item in compiled catalog: ', id, fragment)
+        }
+    }
+    return txt
+}
+
+</script>
+
+<script>
+    const {id = null, ctx, tags, args} = $props()
+    const finalCtx = $derived(id != null ? getCtx(id) : ctx)
+</script>
+
+{#each finalCtx as fragment, i}
+    {#if typeof fragment === 'string'}
+        {fragment}
+    {:else if typeof fragment === 'number'}
+        {#if id != null || i > 0}
+            {args[fragment]}
+        {/if}
+    {:else}
+        {@const tag = tags[fragment[0]]}
+        {#if tag == null}
+            [i18n-404:tag]
+        {:else}
+            {@render tag(fragment)}
+        {/if}
+    {/if}
+{/each}