@wuchale/jsx 0.8.2 → 0.9.0

package/dist/index.d.ts

@@ -1,8 +1,14 @@
-import type { HeuristicFunc, Adapter, AdapterArgs } from 'wuchale';
+import type { HeuristicFunc, Adapter, AdapterArgs, LoaderChoice, CreateHeuristicOpts } from 'wuchale';
 import { type JSXLib } from "./transformer.js";
+export declare function createJsxHeuristic(opts: CreateHeuristicOpts): HeuristicFunc;
 export declare const jsxDefaultHeuristic: HeuristicFunc;
-type JSXArgs = AdapterArgs & {
+type LoadersAvailable = 'default' | 'react' | 'solidjs';
+type JSXArgs = AdapterArgs<LoadersAvailable> & {
     variant?: JSXLib;
 };
+export declare function getDefaultLoaderPath(loader: LoaderChoice<LoadersAvailable>, bundle: boolean): string | {
+    client: string;
+    server: string;
+};
 export declare const adapter: (args?: JSXArgs) => Adapter;
 export {};

package/dist/index.js

@@ -1,19 +1,24 @@
-import { defaultGenerateLoadID, defaultHeuristic, deepMergeObjects } from 'wuchale';
-import { pluralPattern, adapter as vanillaAdapter } from 'wuchale/adapter-vanilla';
+import { defaultGenerateLoadID, deepMergeObjects, createHeuristic, defaultHeuristicOpts } from 'wuchale';
+import { pluralPattern, getDefaultLoaderPath as getDefaultLoaderPathVanilla } from 'wuchale/adapter-vanilla';
 import { JSXTransformer } from "./transformer.js";
-import { getDependencies, loaderPathResolver } from 'wuchale/adapter-utils';
-export const jsxDefaultHeuristic = msg => {
-    if (!defaultHeuristic(msg)) {
-        return false;
-    }
-    if (msg.details.scope !== 'script') {
-        return true;
-    }
-    if (msg.details.declaring === 'variable') {
-        return false;
-    }
-    return true;
-};
+import { loaderPathResolver } from 'wuchale/adapter-utils';
+export function createJsxHeuristic(opts) {
+    const defaultHeuristic = createHeuristic(opts);
+    return msg => {
+        const defRes = defaultHeuristic(msg);
+        if (!defRes) {
+            return false;
+        }
+        if (msg.details.scope !== 'script') {
+            return defRes;
+        }
+        if (msg.details.declaring === 'variable') {
+            return false;
+        }
+        return defRes;
+    };
+}
+export const jsxDefaultHeuristic = createJsxHeuristic(defaultHeuristicOpts);
 const defaultRuntime = {
     useReactive: ({ funcName, nested }) => {
         const inTopLevel = funcName == null;
@@ -24,12 +29,10 @@ const defaultRuntime = {
         };
     },
     reactive: {
-        importName: 'default',
         wrapInit: expr => expr,
         wrapUse: expr => expr,
     },
     plain: {
-        importName: 'get',
         wrapInit: expr => expr,
         wrapUse: expr => expr,
     },
@@ -44,56 +47,44 @@ const defaultRuntimeSolid = {
         };
     },
     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}',
+    localesDir: './src/locales',
     patterns: [pluralPattern],
     heuristic: jsxDefaultHeuristic,
     granularLoad: false,
     bundleLoad: false,
+    loader: 'default',
     generateLoadID: defaultGenerateLoadID,
-    writeFiles: {},
     runtime: defaultRuntime,
     variant: 'default',
 };
 const resolveLoaderPath = loaderPathResolver(import.meta.url, '../src/loaders', 'js');
+export function getDefaultLoaderPath(loader, bundle) {
+    if (loader === 'default') {
+        return getDefaultLoaderPathVanilla('bundle', bundle);
+    }
+    if (bundle) {
+        loader += '.bundle';
+    }
+    return resolveLoaderPath(loader);
+}
 export const adapter = (args = defaultArgs) => {
-    let { heuristic, patterns, variant, runtime, ...rest } = deepMergeObjects(args, defaultArgs);
+    let { heuristic, patterns, variant, runtime, loader, ...rest } = deepMergeObjects(args, defaultArgs);
     if (variant === 'solidjs' && args.runtime == null) {
         runtime = defaultRuntimeSolid;
     }
     return {
-        transform: ({ content, filename, index, expr }) => {
-            return new JSXTransformer(content, filename, index, heuristic, patterns, expr, runtime).transformJx(variant);
+        transform: ({ content, filename, index, expr, matchUrl }) => {
+            return new JSXTransformer(content, filename, index, heuristic, patterns, expr, runtime, matchUrl).transformJx(variant);
         },
         loaderExts: ['.js', '.ts'],
-        defaultLoaders: async () => {
-            const deps = await getDependencies();
-            const loaders = ['default'];
-            if (deps.has('react') || deps.has('preact')) {
-                loaders.unshift('react');
-            }
-            if (deps.has('solid-js')) {
-                loaders.unshift('solidjs');
-            }
-            return loaders;
-        },
-        defaultLoaderPath: (loader) => {
-            if (loader === 'default') {
-                return vanillaAdapter({ bundleLoad: rest.bundleLoad }).defaultLoaderPath('vite');
-            }
-            if (rest.bundleLoad) {
-                loader += '.bundle';
-            }
-            return resolveLoaderPath(loader);
-        },
+        defaultLoaderPath: getDefaultLoaderPath(loader, rest.bundleLoad),
         runtime,
         ...rest,
-        docsUrl: 'https://wuchale.dev/adapters/jsx'
     };
 };

package/dist/transformer.d.ts

@@ -2,7 +2,7 @@ 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, RuntimeConf, CatalogExpr, CodePattern } from 'wuchale';
+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;
@@ -14,7 +14,7 @@ export declare class JSXTransformer extends Transformer {
     lastVisitIsComment: boolean;
     currentJsxKey?: number;
     mixedVisitor: MixedVisitor<MixedNodesTypes>;
-    constructor(content: string, filename: string, index: IndexTracker, heuristic: HeuristicFunc, patterns: CodePattern[], catalogExpr: CatalogExpr, rtConf: RuntimeConf);
+    constructor(content: string, filename: string, index: IndexTracker, heuristic: HeuristicFunc, patterns: CodePattern[], catalogExpr: CatalogExpr, rtConf: RuntimeConf, matchUrl: UrlMatcher);
     initMixedVisitor: () => MixedVisitor<MixedNodesTypes>;
     visitChildrenJ: (node: JX.JSXElement | JX.JSXFragment) => Message[];
     visitNameJSXNamespacedName: (node: JX.JSXNamespacedName) => string;

package/dist/transformer.js

@@ -19,8 +19,8 @@ export class JSXTransformer extends Transformer {
     lastVisitIsComment = false;
     currentJsxKey;
     mixedVisitor;
-    constructor(content, filename, index, heuristic, patterns, catalogExpr, rtConf) {
-        super(content, filename, index, heuristic, patterns, catalogExpr, rtConf);
+    constructor(content, filename, index, heuristic, patterns, catalogExpr, rtConf, matchUrl) {
+        super(content, filename, index, heuristic, patterns, catalogExpr, rtConf, matchUrl);
     }
     initMixedVisitor = () => new MixedVisitor({
         mstr: this.mstr,
@@ -50,7 +50,7 @@ export class JSXTransformer extends Transformer {
         },
         visitExpressionTag: this.visitJSXExpressionContainer,
         fullHeuristicDetails: this.fullHeuristicDetails,
-        checkHeuristic: this.checkHeuristicBool,
+        checkHeuristic: this.getHeuristicMessageType,
         index: this.index,
         wrapNested: (msgInfo, hasExprs, nestedRanges, lastChildEnd) => {
             let begin = `<${rtComponent}`;
@@ -152,13 +152,6 @@ export class JSXTransformer extends Transformer {
         if (node.value == null) {
             return [];
         }
-        if (node.value.type !== 'Literal') {
-            return this.visitJx(node.value);
-        }
-        if (typeof node.value.value !== 'string') {
-            return [];
-        }
-        const value = node.value;
         let name;
         if (node.name.type === 'JSXIdentifier') {
             name = node.name.name;
@@ -166,11 +159,29 @@ export class JSXTransformer extends Transformer {
         else {
             name = node.name.name.name;
         }
-        const [pass, msgInfo] = this.checkHeuristic(node.value.value, {
-            scope: 'attribute',
+        const heurBase = {
+            scope: 'script',
             element: this.currentElement,
             attribute: name,
-        });
+        };
+        if (node.value.type !== 'Literal') {
+            if (node.value.type === 'JSXExpressionContainer') {
+                if (node.value.expression.type === 'Literal' && typeof node.value.expression.value === 'string') {
+                    const expr = node.value.expression;
+                    return this.visitWithCommentDirectives(expr, () => this.visitLiteral(expr, heurBase));
+                }
+                if (node.value.expression.type === 'TemplateLiteral') {
+                    const expr = node.value.expression;
+                    return this.visitWithCommentDirectives(expr, () => this.visitTemplateLiteral(expr, heurBase));
+                }
+            }
+            return this.visitJx(node.value);
+        }
+        if (typeof node.value.value !== 'string') {
+            return [];
+        }
+        const value = node.value;
+        const [pass, msgInfo] = this.checkHeuristic(node.value.value, heurBase);
         if (!pass) {
             return [];
         }
@@ -213,7 +224,7 @@ export class JSXTransformer extends Transformer {
         if (this.commentDirectives.ignoreFile) {
             return [];
         }
-        if (this.commentDirectives.forceInclude !== false) {
+        if (this.commentDirectives.forceType !== false) {
             msgs = this.visit(node);
         }
         this.commentDirectives = commentDirectivesPrev;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wuchale/jsx",
-    "version": "0.8.2",
+    "version": "0.9.0",
     "description": "Protobuf-like i18n from plain code: JSX adapter",
     "scripts": {
         "dev": "tsc --watch",
@@ -71,7 +71,7 @@
     "dependencies": {
         "@sveltejs/acorn-typescript": "^1.0.6",
         "acorn": "^8.15.0",
-        "wuchale": "^0.17.4"
+        "wuchale": "^0.18.0"
     },
     "devDependencies": {
         "@types/estree-jsx": "^1.0.5",

package/src/loaders/react.bundle.js

@@ -1,9 +1,8 @@
 // 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 { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
+import toRuntime from 'wuchale/runtime'
 
 let locale = 'en'
 
@@ -18,15 +17,15 @@ export function setLocale(locale) {
     }
 }
 
-export default (/** @type {{[locale: string]: import('wuchale/runtime').CatalogModule }} */ catalogs) => {
+export const getRuntimeRx = (/** @type {{[locale: string]: import('wuchale/runtime').CatalogModule }} */ catalogs) => {
     const [locale, setLocale] = useState('en')
     useEffect(() => {
         const cb = (/** @type {string} */ locale) => setLocale(locale)
         callbacks.add(cb)
         return () => callbacks.delete(cb)
-    })
-    return catalogs[locale]
+    }, [catalogs])
+    return useMemo(() => toRuntime(catalogs[locale], locale), [locale, catalogs])
 }
 
 // non-reactive
-export const get = (/** @type {{[locale: string]: import('wuchale/runtime').CatalogModule }} */ catalogs) => catalogs[locale]
+export const getRuntime = (/** @type {{[locale: string]: import('wuchale/runtime').CatalogModule }} */ catalogs) => toRuntime(catalogs[locale], locale)

package/src/loaders/react.js

@@ -1,33 +1,32 @@
 // 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 { loadCatalog, loadIDs } from '${PROXY}'
 import { registerLoaders } from 'wuchale/load-utils'
 import { useState, useEffect } from 'react'
 
+export const key = '${KEY}'
 const callbacks = {}
 const store = {}
 
 // non-reactive
-export const get = (/** @type {string} */ loadID) => store[loadID]
+export const getRuntime = (/** @type {string} */ loadID) => store[loadID]
 
 const collection = {
-    get,
-    set: (/** @type {string} */ loadID, /** @type {import('wuchale/runtime').CatalogModule} */ catalog) => {
-        store[loadID] = catalog // for when useEffect hasn't run yet
-        callbacks[loadID]?.(catalog)
+    get: getRuntime,
+    set: (/** @type {string} */ loadID, /** @type {import('wuchale/runtime').Runtime} */ runtime) => {
+        store[loadID] = runtime // for when useEffect hasn't run yet
+        callbacks[loadID]?.(runtime)
     }
 }
 
 registerLoaders(key, loadCatalog, loadIDs, collection)
 
-export default (/** @type {string} */ loadID) => {
-    const [catalog, setCatalog] = useState(collection.get(loadID))
+export const getRuntimeRx = (/** @type {string} */ loadID) => {
+    const [runtime, setRuntime] = useState(collection.get(loadID))
     useEffect(() => {
-        callbacks[loadID] = (/** @type {import('wuchale/runtime').CatalogModule} */ catalog) => setCatalog(catalog)
+        callbacks[loadID] = (/** @type {import('wuchale/runtime').Runtime} */ runtime) => setRuntime(runtime)
         return () => delete callbacks[loadID]
-    })
-    return catalog
+    }, [loadID])
+    return runtime
 }

package/src/loaders/solidjs.bundle.js

@@ -3,6 +3,7 @@
 // The content is this way because you have enabled bundleLoad in the config.
 
 import { createSignal } from "solid-js"
+import toRuntime from "wuchale/runtime"
 
 const [locale, setLocale] = createSignal('en')
 
@@ -11,6 +12,6 @@ export { setLocale }
 /**
  * @param {{ [locale: string]: import('wuchale/runtime').CatalogModule }} catalogs
  */
-export const get = catalogs => catalogs[locale()]
+export const getRuntimeRx = catalogs => toRuntime(catalogs[locale()], locale())
 // same function, because solid-js can use them anywhere
-export default get
+export const getRuntime = getRuntimeRx

package/src/loaders/solidjs.js

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