@wuchale/svelte 0.13.5 → 0.14.1

package/dist/index.js

@@ -1,5 +1,5 @@
+// $$ cd .. && npm run test
 import { defaultGenerateLoadID, defaultHeuristic, deepMergeObjects } from 'wuchale';
-import { initRuntimeStmt, adapter as vanillaAdapter } from 'wuchale/adapter-vanilla';
 import { SvelteTransformer } from "./transformer.js";
 import { getDependencies } from 'wuchale/adapter-utils';
 const topLevelDeclarationsInside = ['$derived', '$derived.by'];
@@ -31,12 +31,32 @@ const defaultArgs = {
     bundleLoad: false,
     generateLoadID: defaultGenerateLoadID,
     writeFiles: {},
+    runtime: {
+        useReactive: ({ file, funcName, additional }) => {
+            const inTopLevel = funcName == null;
+            const inModule = file.endsWith('.svelte.js') || additional.module;
+            return {
+                init: inModule ? inTopLevel : (inTopLevel ? true : null),
+                use: inModule ? inTopLevel : true,
+            };
+        },
+        reactive: {
+            importName: 'default',
+            wrapInit: expr => `$derived(${expr})`,
+            wrapUse: expr => expr,
+        },
+        plain: {
+            importName: 'get',
+            wrapInit: expr => expr,
+            wrapUse: expr => expr,
+        },
+    },
 };
 export const adapter = (args = defaultArgs) => {
-    const { heuristic, pluralsFunc, ...rest } = deepMergeObjects(args, defaultArgs);
+    const { heuristic, pluralsFunc, runtime, ...rest } = deepMergeObjects(args, defaultArgs);
     return {
-        transform: ({ content, filename, index, header }) => {
-            return new SvelteTransformer(content, filename, index, heuristic, pluralsFunc, initRuntimeStmt(header.expr)).transformSv(header.head, header.expr);
+        transform: ({ content, filename, index, expr }) => {
+            return new SvelteTransformer(content, filename, index, heuristic, pluralsFunc, expr, runtime).transformSv();
         },
         loaderExts: ['.svelte.js', '.svelte.ts', '.js', '.ts'],
         defaultLoaders: async () => {
@@ -44,18 +64,22 @@ export const adapter = (args = defaultArgs) => {
                 return ['bundle'];
             }
             const deps = await getDependencies();
-            const available = ['reactive', 'vanilla'];
+            const available = ['svelte'];
             if (deps.has('@sveltejs/kit')) {
                 available.unshift('sveltekit');
             }
             return available;
         },
-        defaultLoaderPath: (loader) => {
-            if (loader === 'vanilla') {
-                return vanillaAdapter().defaultLoaderPath('vite');
+        defaultLoaderPath: loader => {
+            if (loader === 'sveltekit') {
+                return {
+                    client: new URL(`../src/loaders/svelte.svelte.js`, import.meta.url).pathname,
+                    ssr: new URL(`../src/loaders/sveltekit.ssr.svelte.js`, import.meta.url).pathname
+                };
             }
             return new URL(`../src/loaders/${loader}.svelte.js`, import.meta.url).pathname;
         },
+        runtime,
         ...rest,
         docsUrl: 'https://wuchale.dev/adapters/svelte'
     };

package/dist/transformer.d.ts

@@ -2,7 +2,7 @@ import type { AnyNode } from "acorn";
 import { type AST } from "svelte/compiler";
 import { Message } from 'wuchale';
 import { Transformer } from 'wuchale/adapter-vanilla';
-import type { IndexTracker, HeuristicFunc, TransformOutput, CommentDirectives } from 'wuchale';
+import type { IndexTracker, HeuristicFunc, TransformOutput, CommentDirectives, CatalogExpr, RuntimeConf } from 'wuchale';
 import { MixedVisitor } from "wuchale/adapter-utils";
 type MixedNodesTypes = AST.Text | AST.Tag | AST.ElementLike | AST.Block | AST.Comment;
 export declare class SvelteTransformer extends Transformer {
@@ -12,7 +12,7 @@ export declare class SvelteTransformer extends Transformer {
     lastVisitIsComment: boolean;
     currentSnippet: number;
     mixedVisitor: MixedVisitor<MixedNodesTypes>;
-    constructor(content: string, filename: string, index: IndexTracker, heuristic: HeuristicFunc, pluralsFunc: string, initRuntime: string);
+    constructor(content: string, filename: string, index: IndexTracker, heuristic: HeuristicFunc, pluralsFunc: string, catalogExpr: CatalogExpr, rtConf: RuntimeConf);
     visitExpressionTag: (node: AST.ExpressionTag) => Message[];
     initMixedVisitor: () => MixedVisitor<MixedNodesTypes>;
     visitFragment: (node: AST.Fragment) => Message[];
@@ -34,6 +34,6 @@ export declare class SvelteTransformer extends Transformer {
     visitSvelteWindow: (node: AST.SvelteWindow) => Message[];
     visitRoot: (node: AST.Root) => Message[];
     visitSv: (node: AST.SvelteNode | AnyNode) => Message[];
-    transformSv: (headerHead: string, headerExpr: string) => TransformOutput;
+    transformSv: () => TransformOutput;
 }
 export {};

package/dist/transformer.js

@@ -2,10 +2,10 @@ import MagicString from "magic-string";
 import { parse } from "svelte/compiler";
 import { Message } from 'wuchale';
 import { Transformer, parseScript } from 'wuchale/adapter-vanilla';
-import { MixedVisitor, nonWhitespaceText, runtimeVars } from "wuchale/adapter-utils";
+import { MixedVisitor, nonWhitespaceText } from "wuchale/adapter-utils";
 const nodesWithChildren = ['RegularElement', 'Component'];
-const rtComponent = 'WuchaleTrans';
-const snipPrefix = 'wuchaleSnippet';
+const rtComponent = 'W_tx_';
+const snipPrefix = '_w_snippet_';
 export class SvelteTransformer extends Transformer {
     // state
     currentElement;
@@ -14,12 +14,13 @@ export class SvelteTransformer extends Transformer {
     lastVisitIsComment = false;
     currentSnippet = 0;
     mixedVisitor;
-    constructor(content, filename, index, heuristic, pluralsFunc, initRuntime) {
-        super(content, filename, index, heuristic, pluralsFunc, initRuntime);
+    constructor(content, filename, index, heuristic, pluralsFunc, catalogExpr, rtConf) {
+        super(content, filename, index, heuristic, pluralsFunc, catalogExpr, rtConf);
     }
     visitExpressionTag = (node) => this.visit(node.expression);
     initMixedVisitor = () => new MixedVisitor({
         mstr: this.mstr,
+        vars: this.vars,
         getRange: node => ({ start: node.start, end: node.end }),
         isText: node => node.type === 'Text',
         isComment: node => node.type === 'Comment',
@@ -44,21 +45,25 @@ export class SvelteTransformer extends Transformer {
                 const snippetName = `${snipPrefix}${this.currentSnippet}`;
                 snippets.push(snippetName);
                 this.currentSnippet++;
-                const snippetBegin = `\n{#snippet ${snippetName}(${haveCtx ? runtimeVars.nestCtx : ''})}\n`;
+                const snippetBegin = `\n{#snippet ${snippetName}(${haveCtx ? this.vars().nestCtx : ''})}\n`;
                 this.mstr.appendRight(childStart, snippetBegin);
                 this.mstr.prependLeft(childEnd, '\n{/snippet}');
             }
-            let begin = `\n<${rtComponent} tags={[${snippets.join(', ')}]} ctx=`;
+            let begin = `\n<${rtComponent}`;
+            if (snippets.length) {
+                begin += ` t={[${snippets.join(', ')}]}`;
+            }
+            begin += ' x=';
             if (this.inCompoundText) {
-                begin += `{${runtimeVars.nestCtx}} nest`;
+                begin += `{${this.vars().nestCtx}} n`;
             }
             else {
                 const index = this.index.get(msgInfo.toKey());
-                begin += `{${runtimeVars.rtCtx}(${index})}`;
+                begin += `{${this.vars().rtCtx}(${index})}`;
             }
             let end = ' />\n';
             if (hasExprs) {
-                begin += ' args={[';
+                begin += ' a={[';
                 end = ']}' + end;
             }
             this.mstr.appendLeft(lastChildEnd, begin);
@@ -93,7 +98,7 @@ export class SvelteTransformer extends Transformer {
         if (!pass) {
             return [];
         }
-        this.mstr.update(node.start + startWh, node.end - endWh, `{${runtimeVars.rtTrans}(${this.index.get(msgInfo.toKey())})}`);
+        this.mstr.update(node.start + startWh, node.end - endWh, `{${this.vars().rtTrans}(${this.index.get(msgInfo.toKey())})}`);
         return [msgInfo];
     };
     visitSpreadAttribute = (node) => this.visit(node.expression);
@@ -130,7 +135,7 @@ export class SvelteTransformer extends Transformer {
         if (!pass) {
             return [];
         }
-        this.mstr.update(value.start, value.end, `{${runtimeVars.rtTrans}(${this.index.get(msgInfo.toKey())})}`);
+        this.mstr.update(value.start, value.end, `{${this.vars().rtTrans}(${this.index.get(msgInfo.toKey())})}`);
         if (`'"`.includes(this.content[value.start - 1])) {
             this.mstr.remove(value.start - 1, value.start);
             this.mstr.remove(value.end, value.end + 1);
@@ -191,21 +196,17 @@ export class SvelteTransformer extends Transformer {
         const msgs = [];
         // @ts-ignore: module is a reserved keyword, not sure how to specify the type
         if (node.module) {
+            this.additionalState = { module: true };
             this.commentDirectives = {}; // reset
             // @ts-ignore
             msgs.push(...this.visitProgram(node.module.content));
+            this.additionalState = {}; // reset
         }
-        // no need to init runtime inside components outside <script module>s
-        // they run everytime they are rendered instead of once at startup
-        const initRuntime = this.initRuntime;
-        this.initRuntime = null;
         if (node.instance) {
             this.commentDirectives = {}; // reset
             msgs.push(...this.visitProgram(node.instance.content));
         }
         msgs.push(...this.visitFragment(node.fragment));
-        // restore just in case
-        this.initRuntime = initRuntime;
         return msgs;
     };
     visitSv = (node) => {
@@ -235,7 +236,7 @@ export class SvelteTransformer extends Transformer {
         this.commentDirectives = commentDirectivesPrev;
         return msgs;
     };
-    transformSv = (headerHead, headerExpr) => {
+    transformSv = () => {
         const isComponent = this.filename.endsWith('.svelte');
         let ast;
         if (isComponent) {
@@ -249,36 +250,30 @@ export class SvelteTransformer extends Transformer {
         this.mstr = new MagicString(this.content);
         this.mixedVisitor = this.initMixedVisitor();
         const msgs = this.visitSv(ast);
-        if (!msgs.length) {
-            return this.finalize(msgs, 0);
-        }
         const headerLines = [
             isComponent ? `\nimport ${rtComponent} from "@wuchale/svelte/runtime.svelte"` : '',
-            headerHead,
-            `const ${runtimeVars.rtConst} = $derived(${runtimeVars.rtWrap}(${headerExpr}))\n`,
+            this.initRuntime(this.filename, null, null, {}),
         ];
         const headerFin = headerLines.join('\n');
         if (ast.type === 'Program') {
-            this.mstr.appendRight(0, headerFin + '\n');
-            return this.finalize(msgs, 0);
+            const bodyStart = this.getRealBodyStart(ast.body);
+            return this.finalize(msgs, bodyStart, headerFin);
         }
         let hmrHeaderIndex = 0;
         if (ast.module) {
             // @ts-ignore
-            hmrHeaderIndex = ast.module.content.start;
-            this.mstr.appendRight(hmrHeaderIndex, headerFin);
+            hmrHeaderIndex = this.getRealBodyStart(ast.module.content.body);
         }
         else if (ast.instance) {
             // @ts-ignore
-            hmrHeaderIndex = ast.instance.content.start;
-            this.mstr.appendRight(hmrHeaderIndex, headerFin);
+            hmrHeaderIndex = this.getRealBodyStart(ast.instance.content.body);
         }
         else {
             this.mstr.prepend('<script>');
             // account index for hmr data here
-            this.mstr.prependRight(0, `${headerFin}</script>\n`);
+            this.mstr.prependRight(0, `</script>\n`);
             // now hmr data can be prependRight(0, ...)
         }
-        return this.finalize(msgs, hmrHeaderIndex);
+        return this.finalize(msgs, hmrHeaderIndex, headerFin);
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wuchale/svelte",
-    "version": "0.13.5",
+    "version": "0.14.1",
     "description": "Protobuf-like i18n from plain code: Svelte adapter",
     "scripts": {
         "dev": "tsc --watch",
@@ -52,7 +52,7 @@
     "license": "MIT",
     "dependencies": {
         "svelte": "^5.37.0",
-        "wuchale": "^0.14.6"
+        "wuchale": "^0.15.4"
     },
     "devDependencies": {
         "acorn": "^8.15.0",

package/src/loaders/bundle.svelte.js

@@ -10,7 +10,11 @@ export function setLocale(newLocale) {
     locale = newLocale
 }
 
+// for non-reactive
 /**
  * @param {{ [locale: string]: import("wuchale/runtime").CatalogModule }} catalogs
 */ 
-export default catalogs => catalogs[locale]
+export const get = catalogs => catalogs[locale]
+
+// same function, only will be inside $derived when used
+export default get

package/src/loaders/{reactive.svelte.js → svelte.svelte.js}

@@ -8,4 +8,8 @@ import { registerLoaders, defaultCollection } from 'wuchale/load-utils'
 
 const catalogs = $state({})
 
-export default registerLoaders(key, loadCatalog, loadIDs, defaultCollection(catalogs))
+// for non-reactive
+export const get = registerLoaders(key, loadCatalog, loadIDs, defaultCollection(catalogs))
+
+// same function, only will be inside $derived when used
+export default get

package/src/loaders/sveltekit.ssr.svelte.js

@@ -0,0 +1,15 @@
+// This is just the default loader.
+// You can customize it however you want, it will not be overwritten once it exists and is not empty.
+
+/// <reference types="wuchale/virtual" />
+
+import { loadCatalog, loadIDs, key } from 'virtual:wuchale/proxy/sync' // because it's on the server
+import { currentCatalog } from 'wuchale/load-utils/server'
+
+export { loadCatalog, loadIDs, key } // for hooks.server.{js,ts}
+
+// for non-reactive
+export const get = (/** @type {string} */ loadID) => currentCatalog(key, loadID)
+
+// same function, only will be inside $derived when used
+export default get

package/src/runtime.svelte

@@ -1,16 +1,16 @@
 <script>
-    const {nest = false, ctx, tags, args} = $props()
+    const {n = false, x, t, a} = $props()
 </script>
 
-{#each ctx as fragment, i}
+{#each x as fragment, i}
     {#if typeof fragment === 'string'}
         {fragment}
     {:else if typeof fragment === 'number'}
-        {#if !nest || i > 0}
-            {args[fragment]}
+        {#if !n || i > 0}
+            {a[fragment]}
         {/if}
     {:else}
-        {@const tag = tags[fragment[0]]}
+        {@const tag = t[fragment[0]]}
         {#if tag == null}
             [i18n-404:tag]
         {:else}

package/src/loaders/sveltekit.svelte.js

@@ -1,21 +0,0 @@
-// This is just the default loader.
-// You can customize it however you want, it will not be overwritten once it exists and is not empty.
-
-/// <reference types="wuchale/virtual" />
-
-import { loadCatalog, loadIDs, key } from 'virtual:wuchale/proxy' // or proxy/sync
-import { registerLoaders, defaultCollection } from 'wuchale/load-utils'
-
-export { loadCatalog, loadIDs, key } // for +layout.{js,ts} and hooks.server.{js,ts}
-
-let loadC
-
-if (import.meta.env.SSR) { // stripped from production client builds
-    const { currentCatalog } = await import('wuchale/load-utils/server')
-    loadC = (/** @type {string} */ loadID) => currentCatalog(key, loadID)
-} else { // client
-    const catalogs = $state({})
-    loadC = registerLoaders(key, loadCatalog, loadIDs, defaultCollection(catalogs))
-}
-
-export default loadC