@wuchale/jsx 0.9.7 → 0.10.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import type { HeuristicFunc, Adapter, AdapterArgs, LoaderChoice, CreateHeuristicOpts } from 'wuchale';
-import { type JSXLib } from "./transformer.js";
+import type { Adapter, AdapterArgs, CreateHeuristicOpts, HeuristicFunc, LoaderChoice } from 'wuchale';
+import { type JSXLib } from './transformer.js';
 export declare function createJsxHeuristic(opts: CreateHeuristicOpts): HeuristicFunc;
 export declare const jsxDefaultHeuristic: HeuristicFunc;
 type LoadersAvailable = 'default' | 'react' | 'solidjs';

package/dist/index.js

@@ -1,10 +1,10 @@
-import { defaultGenerateLoadID, deepMergeObjects, createHeuristic, defaultHeuristicOpts } from 'wuchale';
-import { pluralPattern, getDefaultLoaderPath as getDefaultLoaderPathVanilla } from 'wuchale/adapter-vanilla';
-import { JSXTransformer } from "./transformer.js";
+import { createHeuristic, deepMergeObjects, defaultGenerateLoadID, defaultHeuristicOpts } from 'wuchale';
 import { loaderPathResolver } from 'wuchale/adapter-utils';
+import { getDefaultLoaderPath as getDefaultLoaderPathVanilla, pluralPattern } from 'wuchale/adapter-vanilla';
+import { JSXTransformer } from './transformer.js';
 export function createJsxHeuristic(opts) {
     const defaultHeuristic = createHeuristic(opts);
-    return msg => {
+    return (msg) => {
         const defRes = defaultHeuristic(msg);
         if (!defRes) {
             return false;
@@ -20,36 +20,31 @@ export function createJsxHeuristic(opts) {
 }
 export const jsxDefaultHeuristic = createJsxHeuristic(defaultHeuristicOpts);
 const defaultRuntime = {
-    useReactive: ({ funcName, nested }) => {
+    initReactive: ({ 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
-        };
+        return inTopLevel ? null : insideReactive;
     },
+    useReactive: ({ funcName, nested }) => funcName != null &&
+        !nested &&
+        ((funcName.startsWith('use') && funcName.length > 3) || /[A-Z]/.test(funcName[0])),
     reactive: {
-        wrapInit: expr => expr,
-        wrapUse: expr => expr,
+        wrapInit: (expr) => expr,
+        wrapUse: (expr) => expr,
     },
     plain: {
-        wrapInit: expr => expr,
-        wrapUse: expr => expr,
+        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
-        };
-    },
+    initReactive: ({ funcName }) => (funcName == null ? true : null), // init only in top level
+    useReactive: true, // always reactive, because solidjs doesn't have a problem with it
     reactive: {
-        wrapInit: expr => `() => ${expr}`,
-        wrapUse: expr => `${expr}()`
-    }
+        wrapInit: (expr) => `() => ${expr}`,
+        wrapUse: (expr) => `${expr}()`,
+    },
 };
 const defaultArgs = {
     files: { include: 'src/**/*.{js,ts,jsx,tsx}', ignore: '**/*.d.ts' },
@@ -89,7 +84,7 @@ export const adapter = (args = defaultArgs) => {
         defaultLoaderPath: getDefaultLoaderPath(loader, rest.bundleLoad),
         runtime,
         getRuntimeVars: {
-            reactive: 'useW_load_rx_'
+            reactive: 'useW_load_rx_',
         },
         ...rest,
     };

package/dist/runtime.d.ts

@@ -2,9 +2,9 @@ import type { Composite, Mixed } from 'wuchale';
 export type WuchaleComponentProps = {
     n?: boolean;
     x: Composite;
-    t: Function;
+    t: Function[];
     a: any[];
 };
-export declare function selectFragment({ n, x, t, a }: WuchaleComponentProps, i: number): string | Mixed | Composite;
-declare const _default: (props: WuchaleComponentProps) => (string | Composite | Mixed)[];
+export declare function selectFragment({ n, x, t, a }: WuchaleComponentProps, i: number): string | Mixed | Composite | undefined;
+declare const _default: (props: WuchaleComponentProps) => (string | Composite | Mixed | undefined)[];
 export default _default;

package/dist/runtime.jsx

@@ -6,7 +6,7 @@ export function selectFragment({ n, x, t, a }, i) {
         if (!n || i > 0) {
             return a[x];
         }
-        return `i18n-400:${x}`;
+        return;
     }
     const tag = t[x[0]];
     if (tag == null) {

package/dist/runtime.solid.jsx

@@ -1,7 +1,7 @@
-import { selectFragment } from './runtime.jsx';
 import { For } from 'solid-js';
+import { selectFragment } from './runtime.jsx';
 export default (props) => {
-    return <For each={props.x}>
-        {(fragment, i) => <>{selectFragment({ ...props, x: fragment }, i())}</>}
-    </For>;
+    return (<For each={props.x}>
+            {(fragment, i) => <>{selectFragment({ ...props, x: fragment }, i())}</>}
+        </For>);
 };

package/dist/transformer.d.ts

@@ -1,16 +1,14 @@
-import { Message } from 'wuchale';
-import type * as JX from 'estree-jsx';
 import type * as Estree from 'acorn';
+import type * as JX from 'estree-jsx';
+import type { CatalogExpr, CodePattern, HeuristicFunc, IndexTracker, Message, RuntimeConf, TransformOutput, UrlMatcher } from 'wuchale';
+import { MixedVisitor } from 'wuchale/adapter-utils';
 import { Transformer } from 'wuchale/adapter-vanilla';
-import type { IndexTracker, HeuristicFunc, TransformOutput, RuntimeConf, CatalogExpr, CodePattern, UrlMatcher } from 'wuchale';
-import { MixedVisitor, type CommentDirectives } from "wuchale/adapter-utils";
 export declare function parseScriptJSX(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 {
     currentElement?: string;
     inCompoundText: boolean;
-    commentDirectivesStack: CommentDirectives[];
     lastVisitIsComment: boolean;
     currentJsxKey?: number;
     mixedVisitor: MixedVisitor<MixedNodesTypes>;
@@ -28,7 +26,6 @@ export declare class JSXTransformer extends Transformer {
     visitJSXExpressionContainer: (node: JX.JSXExpressionContainer) => Message[];
     visitJSXAttribute: (node: JX.JSXAttribute) => Message[];
     visitJSXSpreadAttribute: (node: JX.JSXSpreadAttribute) => Message[];
-    visitJSXEmptyExpression: (node: JX.JSXEmptyExpression) => Message[];
     visitJx: (node: JX.Node | JX.JSXSpreadChild | Estree.Program) => Message[];
     transformJx: (lib: JSXLib) => TransformOutput;
 }

package/dist/transformer.js

@@ -1,9 +1,8 @@
-import MagicString from 'magic-string';
-import { Parser } from 'acorn';
-import { Message } from 'wuchale';
 import { tsPlugin } from '@sveltejs/acorn-typescript';
-import { Transformer, scriptParseOptionsWithComments, parseScript } from 'wuchale/adapter-vanilla';
-import { nonWhitespaceText, MixedVisitor, processCommentDirectives } from "wuchale/adapter-utils";
+import { Parser } from 'acorn';
+import MagicString from 'magic-string';
+import { MixedVisitor, nonWhitespaceText } from 'wuchale/adapter-utils';
+import { parseScript, scriptParseOptionsWithComments, Transformer } from 'wuchale/adapter-vanilla';
 const JsxParser = Parser.extend(tsPlugin({ jsx: true }));
 export function parseScriptJSX(content) {
     const [opts, comments] = scriptParseOptionsWithComments();
@@ -15,7 +14,6 @@ export class JSXTransformer extends Transformer {
     // state
     currentElement;
     inCompoundText = false;
-    commentDirectivesStack = [];
     lastVisitIsComment = false;
     currentJsxKey;
     mixedVisitor;
@@ -25,19 +23,19 @@ export class JSXTransformer extends Transformer {
     initMixedVisitor = () => new MixedVisitor({
         mstr: this.mstr,
         vars: this.vars,
-        getRange: node => ({
+        getRange: (node) => ({
             start: node.start,
-            end: node.end
+            end: node.end,
         }),
-        isComment: node => node.type === 'JSXExpressionContainer'
-            && node.expression.type === 'JSXEmptyExpression'
-            && node.expression.end > node.expression.start,
-        isText: node => node.type === 'JSXText',
+        isComment: (node) => node.type === 'JSXExpressionContainer' &&
+            node.expression.type === 'JSXEmptyExpression' &&
+            node.expression.end > node.expression.start,
+        isText: (node) => node.type === 'JSXText',
         leaveInPlace: () => false,
-        isExpression: node => node.type === 'JSXExpressionContainer',
+        isExpression: (node) => node.type === 'JSXExpressionContainer',
         getTextContent: (node) => node.value,
         getCommentData: (node) => this.getMarkupCommentBody(node.expression),
-        canHaveChildren: node => nodesWithChildren.includes(node.type),
+        canHaveChildren: (node) => nodesWithChildren.includes(node.type),
         visitFunc: (child, inCompoundText) => {
             const inCompoundTextPrev = this.inCompoundText;
             this.inCompoundText = inCompoundText;
@@ -81,13 +79,19 @@ export class JSXTransformer extends Transformer {
             this.mstr.appendRight(lastChildEnd, end);
         },
     });
-    visitChildrenJ = (node) => this.mixedVisitor.visit({
-        children: node.children,
-        commentDirectives: this.commentDirectives,
-        inCompoundText: this.inCompoundText,
-        scope: 'markup',
-        element: this.currentElement,
-    });
+    visitChildrenJ = (node) => {
+        const prevInsideProg = this.heuristciDetails.insideProgram;
+        this.heuristciDetails.insideProgram = false;
+        const msg = this.mixedVisitor.visit({
+            children: node.children,
+            commentDirectives: this.commentDirectives,
+            inCompoundText: this.inCompoundText,
+            scope: 'markup',
+            element: this.currentElement,
+        });
+        this.heuristciDetails.insideProgram = prevInsideProg; // restore
+        return msg;
+    };
     visitNameJSXNamespacedName = (node) => {
         return `${this.visitName(node.namespace)}:${this.visitName(node.name)}`;
     };
@@ -106,7 +110,7 @@ export class JSXTransformer extends Transformer {
             msgs.push(...this.visitJx(attr));
         }
         if (this.inCompoundText && this.currentJsxKey != null) {
-            const key = node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'key');
+            const key = node.openingElement.attributes.find((attr) => attr.type === 'JSXAttribute' && attr.name.name === 'key');
             if (!key) {
                 this.mstr.appendLeft(node.openingElement.name.end, ` key="_${this.currentJsxKey}"`);
                 this.currentJsxKey++;
@@ -135,9 +139,7 @@ export class JSXTransformer extends Transformer {
         }
         return comment.slice(2, -2).trim();
     };
-    visitJSXExpressionContainer = (node) => {
-        return this.visit(node.expression);
-    };
+    visitJSXExpressionContainer = (node) => this.visit(node.expression);
     visitJSXAttribute = (node) => {
         if (node.value == null) {
             return [];
@@ -179,46 +181,10 @@ export class JSXTransformer extends Transformer {
         return [msgInfo];
     };
     visitJSXSpreadAttribute = (node) => this.visit(node.argument);
-    visitJSXEmptyExpression = (node) => {
-        const commentContents = this.getMarkupCommentBody(node);
-        if (!commentContents) {
-            return [];
-        }
-        this.commentDirectives = processCommentDirectives(commentContents, this.commentDirectives);
-        if (this.lastVisitIsComment) {
-            this.commentDirectivesStack[this.commentDirectivesStack.length - 1] = this.commentDirectives;
-        }
-        else {
-            this.commentDirectivesStack.push(this.commentDirectives);
-        }
-        this.lastVisitIsComment = true;
-        return [];
-    };
-    visitJx = (node) => {
-        if (node.type === 'JSXText' && !node.value.trim()) {
-            return [];
-        }
-        if (node.type === 'JSXExpressionContainer' && node.expression.type === 'JSXEmptyExpression') { // markup comment
-            return this.visitJSXEmptyExpression(node.expression);
-        }
-        let msgs = [];
-        const commentDirectivesPrev = this.commentDirectives;
-        if (this.lastVisitIsComment) {
-            this.commentDirectives = this.commentDirectivesStack.pop();
-            this.lastVisitIsComment = false;
-        }
-        if (this.commentDirectives.ignoreFile) {
-            return [];
-        }
-        if (this.commentDirectives.forceType !== false) {
-            msgs = this.visit(node);
-        }
-        this.commentDirectives = commentDirectivesPrev;
-        return msgs;
-    };
+    visitJx = (node) => this.visit(node);
     transformJx = (lib) => {
         // jsx vs type casting is not ambiguous in all files except .ts files
-        const [ast, comments] = (this.filename.endsWith('.ts') ? parseScript : parseScriptJSX)(this.content);
+        const [ast, comments] = (this.heuristciDetails.file.endsWith('.ts') ? parseScript : parseScriptJSX)(this.content);
         this.comments = comments;
         this.mstr = new MagicString(this.content);
         this.mixedVisitor = this.initMixedVisitor();
@@ -228,7 +194,7 @@ export class JSXTransformer extends Transformer {
         const msgs = this.visitJx(ast);
         const header = [
             `import ${rtComponent} from "@wuchale/jsx/runtime${lib === 'solidjs' ? '.solid' : ''}.jsx"`,
-            this.initRuntime(this.filename),
+            this.initRuntime(),
         ].join('\n');
         const bodyStart = this.getRealBodyStart(ast.body);
         return this.finalize(msgs, bodyStart, header);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wuchale/jsx",
-    "version": "0.9.7",
+    "version": "0.10.1",
     "description": "Protobuf-like i18n from plain code: JSX adapter",
     "scripts": {
         "dev": "tsc --watch",
@@ -61,7 +61,7 @@
         "@sveltejs/acorn-typescript": "^1.0.8",
         "acorn": "^8.15.0",
         "magic-string": "^0.30.21",
-        "wuchale": "^0.18.8"
+        "wuchale": "^0.19.1"
     },
     "devDependencies": {
         "@types/estree-jsx": "^1.0.5",

package/src/loaders/react.bundle.js

@@ -1,10 +1,14 @@
-import { useState, useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import toRuntime from 'wuchale/runtime'
 import { locales } from '${DATA}'
 
 let locale = locales[0]
 
-const callbacks = new Set([(/** @type {string} */ loc) => {locale = loc}])
+const callbacks = new Set([
+    (/** @type {string} */ loc) => {
+        locale = loc
+    },
+])
 
 /**
  * @param {string} locale
@@ -26,4 +30,5 @@ export const getRuntimeRx = (/** @type {{[locale: string]: import('wuchale/runti
 }
 
 // non-reactive
-export const getRuntime = (/** @type {{[locale: string]: import('wuchale/runtime').CatalogModule }} */ catalogs) => toRuntime(catalogs[locale], locale)
+export const getRuntime = (/** @type {{[locale: string]: import('wuchale/runtime').CatalogModule }} */ catalogs) =>
+    toRuntime(catalogs[locale], locale)

package/src/loaders/react.js

@@ -1,6 +1,6 @@
-import { loadCatalog, loadIDs } from '${PROXY}'
+import { useEffect, useState } from 'react'
 import { registerLoaders } from 'wuchale/load-utils'
-import { useState, useEffect } from 'react'
+import { loadCatalog, loadIDs } from '${PROXY}'
 
 export const key = '${KEY}'
 /** @type {{[loadID: string]: Set<Function>}} */
@@ -14,16 +14,19 @@ const collection = {
     get: getRuntime,
     set: (/** @type {string} */ loadID, /** @type {import('wuchale/runtime').Runtime} */ runtime) => {
         store[loadID] = runtime // for when useEffect hasn't run yet
-        callbacks[loadID]?.forEach(cb => cb(runtime))
-    }
+        callbacks[loadID]?.forEach((cb) => {
+            cb(runtime)
+        })
+    },
 }
 
 registerLoaders(key, loadCatalog, loadIDs, collection)
 
 export const getRuntimeRx = (/** @type {string} */ loadID) => {
-    const [runtime, setRuntime] = useState(getRuntime(loadID))
+    // function to useState because runtime is a function too
+    const [runtime, setRuntime] = useState(() => getRuntime(loadID))
     useEffect(() => {
-        const cb = (/** @type {import('wuchale/runtime').Runtime} */ runtime) => setRuntime(runtime)
+        const cb = (/** @type {import('wuchale/runtime').Runtime} */ runtime) => setRuntime(() => runtime)
         callbacks[loadID] ??= new Set()
         callbacks[loadID].add(cb)
         return () => callbacks[loadID].delete(cb)

package/src/loaders/solidjs.bundle.js

@@ -1,5 +1,5 @@
-import { createSignal } from "solid-js"
-import toRuntime from "wuchale/runtime"
+import { createSignal } from 'solid-js'
+import toRuntime from 'wuchale/runtime'
 
 const [locale, setLocale] = createSignal('en')
 
@@ -8,6 +8,6 @@ export { setLocale }
 /**
  * @param {{ [locale: string]: import('wuchale/runtime').CatalogModule }} catalogs
  */
-export const getRuntimeRx = catalogs => toRuntime(catalogs[locale()], locale())
+export const getRuntimeRx = (catalogs) => toRuntime(catalogs[locale()], locale())
 // same function, because solid-js can use them anywhere
 export const getRuntime = getRuntimeRx

package/src/loaders/solidjs.js

@@ -1,6 +1,6 @@
-import { loadCatalog, loadIDs } from '${PROXY}'
-import { registerLoaders } from 'wuchale/load-utils'
 import { createStore } from 'solid-js/store'
+import { registerLoaders } from 'wuchale/load-utils'
+import { loadCatalog, loadIDs } from '${PROXY}'
 
 const key = '${KEY}'
 
@@ -8,7 +8,7 @@ const [store, setStore] = createStore({})
 
 // two exports. can be the same because solid-js can use them anywhere unlike react
 export const getRuntimeRx = registerLoaders(key, loadCatalog, loadIDs, {
-    get: loadID => store[loadID],
-    set: setStore,
+    get: (loadID) => store[loadID],
+    set: (loadID, runtime) => setStore(loadID, () => runtime),
 })
 export const getRuntime = getRuntimeRx