@wuchale/jsx 0.5.2 → 0.6.1

package/dist/index.js

@@ -1,5 +1,5 @@
 import { defaultGenerateLoadID, defaultHeuristic, deepMergeObjects } from 'wuchale';
-import { adapter as vanillaAdapter, initRuntimeStmt } from 'wuchale/adapter-vanilla';
+import { adapter as vanillaAdapter } from 'wuchale/adapter-vanilla';
 import { JSXTransformer } from "./transformer.js";
 import { getDependencies } from 'wuchale/adapter-utils';
 const ignoreElements = ['style', 'path'];
@@ -18,6 +18,41 @@ const jsxHeuristic = (msgStr, details) => {
     }
     return true;
 };
+const defaultRuntime = {
+    useReactive: ({ funcName, nested }) => {
+        const inTopLevel = funcName == null;
+        const insideReactive = !inTopLevel && !nested && ((funcName.startsWith('use') && funcName.length > 3) || /[A-Z]/.test(funcName[0]));
+        return {
+            init: inTopLevel ? null : insideReactive,
+            use: insideReactive
+        };
+    },
+    reactive: {
+        importName: 'default',
+        wrapInit: expr => expr,
+        wrapUse: expr => expr,
+    },
+    plain: {
+        importName: 'get',
+        wrapInit: expr => expr,
+        wrapUse: expr => expr,
+    },
+};
+const defaultRuntimeSolid = {
+    ...defaultRuntime,
+    useReactive: ({ funcName }) => {
+        const inTopLevel = funcName == null;
+        return {
+            init: inTopLevel ? true : null, // init only in top level
+            use: true, // always use reactive
+        };
+    },
+    reactive: {
+        importName: 'default',
+        wrapInit: expr => `() => ${expr}`,
+        wrapUse: expr => `${expr}()`
+    }
+};
 const defaultArgs = {
     files: { include: 'src/**/*.{js,ts,jsx,tsx}', ignore: '**/*.d.ts' },
     catalog: './src/locales/{locale}',
@@ -27,13 +62,17 @@ const defaultArgs = {
     bundleLoad: false,
     generateLoadID: defaultGenerateLoadID,
     writeFiles: {},
+    runtime: defaultRuntime,
     variant: 'default',
 };
 export const adapter = (args = defaultArgs) => {
-    const { heuristic, pluralsFunc, variant, ...rest } = deepMergeObjects(args, defaultArgs);
+    let { heuristic, pluralsFunc, variant, runtime, ...rest } = deepMergeObjects(args, defaultArgs);
+    if (variant === 'solidjs' && args.runtime == null) {
+        runtime = defaultRuntimeSolid;
+    }
     return {
         transform: ({ content, filename, index, header }) => {
-            return new JSXTransformer(content, filename, index, heuristic, pluralsFunc, initRuntimeStmt(header.expr)).transformJx(header.head, variant);
+            return new JSXTransformer(content, filename, index, heuristic, pluralsFunc, header.expr, runtime).transformJx(header.head, variant);
         },
         loaderExts: ['.js', '.ts'],
         defaultLoaders: async () => {
@@ -56,6 +95,7 @@ export const adapter = (args = defaultArgs) => {
             }
             return new URL(`../src/loaders/${loader}.js`, import.meta.url).pathname;
         },
+        runtime,
         ...rest,
         docsUrl: 'https://wuchale.dev/adapters/jsx'
     };

package/dist/transformer.d.ts

@@ -1,10 +1,10 @@
-import { type Program } from "acorn";
 import { Message } from 'wuchale';
 import type * as JX from 'estree-jsx';
+import type * as Estree from 'acorn';
 import { Transformer } from 'wuchale/adapter-vanilla';
-import type { IndexTracker, HeuristicFunc, TransformOutput, CommentDirectives } from 'wuchale';
+import type { IndexTracker, HeuristicFunc, TransformOutput, CommentDirectives, RuntimeConf, CatalogExpr } from 'wuchale';
 import { MixedVisitor } from "wuchale/adapter-utils";
-export declare function parseScript(content: string): [Program, JX.Comment[][]];
+export declare function parseScript(content: string): [Estree.Program, Estree.Comment[][]];
 type MixedNodesTypes = JX.JSXElement | JX.JSXFragment | JX.JSXText | JX.JSXExpressionContainer | JX.JSXSpreadChild;
 export type JSXLib = 'default' | 'solidjs';
 export declare class JSXTransformer extends Transformer {
@@ -14,7 +14,7 @@ export declare class JSXTransformer extends Transformer {
     lastVisitIsComment: boolean;
     currentElementI: 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);
     initMixedVisitor: () => MixedVisitor<MixedNodesTypes>;
     visitChildrenJ: (node: JX.JSXElement | JX.JSXFragment) => Message[];
     visitNameJSXNamespacedName: (node: JX.JSXNamespacedName) => string;
@@ -29,7 +29,7 @@ export declare class JSXTransformer extends Transformer {
     visitJSXAttribute: (node: JX.JSXAttribute) => Message[];
     visitJSXSpreadAttribute: (node: JX.JSXSpreadAttribute) => Message[];
     visitJSXEmptyExpression: (node: JX.JSXEmptyExpression) => Message[];
-    visitJx: (node: JX.Node | JX.JSXSpreadChild | Program) => Message[];
+    visitJx: (node: JX.Node | JX.JSXSpreadChild | Estree.Program) => Message[];
     transformJx: (headerHead: string, lib: JSXLib) => TransformOutput;
 }
 export {};

package/dist/transformer.js

@@ -1,10 +1,10 @@
-import MagicString from "magic-string";
-import { Parser } from "acorn";
+import MagicString from 'magic-string';
+import { Parser } from 'acorn';
 import { Message } from 'wuchale';
 import { tsPlugin } from '@sveltejs/acorn-typescript';
 import jsx from 'acorn-jsx';
 import { Transformer, scriptParseOptionsWithComments } from 'wuchale/adapter-vanilla';
-import { nonWhitespaceText, MixedVisitor, runtimeVars } from "wuchale/adapter-utils";
+import { nonWhitespaceText, MixedVisitor } from "wuchale/adapter-utils";
 const JsxParser = Parser.extend(tsPlugin(), jsx());
 export function parseScript(content) {
     const [opts, comments] = scriptParseOptionsWithComments();
@@ -20,11 +20,12 @@ export class JSXTransformer extends Transformer {
     lastVisitIsComment = false;
     currentElementI = 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);
     }
     initMixedVisitor = () => new MixedVisitor({
         mstr: this.mstr,
+        vars: this.vars,
         getRange: node => ({
             // @ts-expect-error
             start: node.start,
@@ -59,15 +60,15 @@ export class JSXTransformer extends Transformer {
                 else {
                     toAppend = ', ';
                 }
-                this.mstr.appendRight(childStart, `${toAppend}${haveCtx ? runtimeVars.nestCtx : '()'} => `);
+                this.mstr.appendRight(childStart, `${toAppend}${haveCtx ? this.vars().nestCtx : '()'} => `);
             }
             let begin = `]} ctx=`;
             if (this.inCompoundText) {
-                begin += `{${runtimeVars.nestCtx}} nest`;
+                begin += `{${this.vars().nestCtx}} nest`;
             }
             else {
                 const index = this.index.get(msgInfo.toKey());
-                begin += `{${runtimeVars.rtCtx}(${index})}`;
+                begin += `{${this.vars().rtCtx}(${index})}`;
             }
             let end = ' />';
             if (hasExprs) {
@@ -123,7 +124,7 @@ export class JSXTransformer extends Transformer {
         // @ts-expect-error
         node.start + startWh, 
         // @ts-expect-error
-        node.end - endWh, `{${runtimeVars.rtTrans}(${this.index.get(msgInfo.toKey())})}`);
+        node.end - endWh, `{${this.vars().rtTrans}(${this.index.get(msgInfo.toKey())})}`);
         return [msgInfo];
     };
     visitJSXFragment = (node) => this.visitChildrenJ(node);
@@ -168,7 +169,7 @@ export class JSXTransformer extends Transformer {
         // @ts-expect-error
         value.start, 
         // @ts-expect-error
-        value.end, `{${runtimeVars.rtTrans}(${this.index.get(msgInfo.toKey())})}`);
+        value.end, `{${this.vars().rtTrans}(${this.index.get(msgInfo.toKey())})}`);
         return [msgInfo];
     };
     visitJSXSpreadAttribute = (node) => this.visit(node.argument);
@@ -215,13 +216,13 @@ export class JSXTransformer extends Transformer {
         if (!msgs.length) {
             return this.finalize(msgs, 0);
         }
-        let devInit = '';
         const headerFin = [
             `import ${rtComponent} from "@wuchale/jsx/runtime${lib === 'solidjs' ? '.solid' : ''}.jsx"`,
             headerHead,
-            devInit,
+            this.initRuntime(this.filename, null, null, {}),
         ].join('\n');
-        this.mstr.appendRight(0, headerFin + '\n');
-        return this.finalize(msgs, 0);
+        const bodyStart = this.getRealBodyStart(ast.body);
+        this.mstr.appendRight(bodyStart, headerFin + '\n');
+        return this.finalize(msgs, bodyStart);
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wuchale/jsx",
-    "version": "0.5.2",
+    "version": "0.6.1",
     "description": "Protobuf-like i18n from plain code: JSX adapter",
     "scripts": {
         "dev": "tsc --watch",
@@ -72,7 +72,7 @@
         "@sveltejs/acorn-typescript": "^1.0.5",
         "acorn": "^8.15.0",
         "acorn-jsx": "^5.3.2",
-        "wuchale": "^0.14.2"
+        "wuchale": "^0.15.1"
     },
     "devDependencies": {
         "@types/estree-jsx": "^1.0.5",

package/src/loaders/react.bundle.js

@@ -5,7 +5,9 @@
 
 import { useState, useEffect } from 'react'
 
-const callbacks = new Set()
+let locale = 'en'
+
+const callbacks = new Set([(/** @type {string} */ loc) => {locale = loc}])
 
 /**
  * @param {string} locale
@@ -19,7 +21,12 @@ export function setLocale(locale) {
 export default (/** @type {{[locale: string]: import('wuchale/runtime').CatalogModule }} */ catalogs) => {
     const [locale, setLocale] = useState('en')
     useEffect(() => {
-        callbacks.add((/** @type {string} */ locale) => setLocale(locale))
+        const cb = (/** @type {string} */ locale) => setLocale(locale)
+        callbacks.add(cb)
+        return () => callbacks.delete(cb)
     })
     return catalogs[locale]
 }
+
+// non-reactive
+export const get = (/** @type {{[locale: string]: import('wuchale/runtime').CatalogModule }} */ catalogs) => catalogs[locale]

package/src/loaders/react.js

@@ -10,8 +10,11 @@ import { useState, useEffect } from 'react'
 const callbacks = {}
 const store = {}
 
+// non-reactive
+export const get = (/** @type {string} */ loadID) => store[loadID]
+
 const collection = {
-    get: loadID => store[loadID],
+    get,
     set: (/** @type {string} */ loadID, /** @type {import('wuchale/runtime').CatalogModule} */ catalog) => {
         store[loadID] = catalog // for when useEffect hasn't run yet
         callbacks[loadID]?.(catalog)
@@ -20,13 +23,11 @@ const collection = {
 
 registerLoaders(key, loadCatalog, loadIDs, collection)
 
-/**
- * @param { string } loadID
- */
-export default loadID => {
+export default (/** @type {string} */ loadID) => {
     const [catalog, setCatalog] = useState(collection.get(loadID))
     useEffect(() => {
         callbacks[loadID] = (/** @type {import('wuchale/runtime').CatalogModule} */ catalog) => setCatalog(catalog)
+        return () => delete callbacks[loadID]
     })
     return catalog
 }

package/src/loaders/solidjs.bundle.js

@@ -11,4 +11,6 @@ export { setLocale }
 /**
  * @param {{ [locale: string]: import('wuchale/runtime').CatalogModule }} catalogs
  */
-export default catalogs => catalogs[locale()]
+export const get = catalogs => catalogs[locale()]
+// same function, because solid-js can use them anywhere
+export default get

package/src/loaders/solidjs.js

@@ -9,7 +9,9 @@ import { createStore } from 'solid-js/store'
 
 const [store, setStore] = createStore({})
 
-export default registerLoaders(key, loadCatalog, loadIDs, {
+// two exports. can be the same because solid-js can use them anywhere unlike react
+export const get = registerLoaders(key, loadCatalog, loadIDs, {
     get: loadID => store[loadID],
     set: setStore,
 })
+export default get