wuchale 0.14.6 → 0.15.0

package/dist/adapter-utils/index.d.ts

@@ -1,8 +1,10 @@
-export { MixedVisitor, type MixedScope } from './mixed-visitor.js';
-export declare const runtimeVars: {
+export { MixedVisitor } from './mixed-visitor.js';
+export declare const varNames: {
+    rt: string;
     hmrUpdate: string;
     rtWrap: string;
-    rtConst: string;
+};
+export declare function runtimeVars(wrapFunc: (expr: string) => string): {
     rtTrans: string;
     rtTPlural: string;
     rtPlural: string;
@@ -11,5 +13,6 @@ export declare const runtimeVars: {
     /** for when nesting, used in adapters with elements */
     nestCtx: string;
 };
+export type RuntimeVars = ReturnType<typeof runtimeVars>;
 export declare function nonWhitespaceText(msgStr: string): [number, string, number];
 export declare function getDependencies(): Promise<Set<string>>;

package/dist/adapter-utils/index.js

@@ -1,19 +1,21 @@
 import { readFile } from "node:fs/promises";
 export { MixedVisitor } from './mixed-visitor.js';
-// for runtime
-const rtConst = '_w_runtime_';
-export const runtimeVars = {
+export const varNames = {
+    rt: '_w_runtime_',
     hmrUpdate: '_w_hmrUpdate_',
     rtWrap: '_w_to_rt_',
-    rtConst,
-    rtTrans: `${rtConst}.t`,
-    rtTPlural: `${rtConst}.tp`,
-    rtPlural: `${rtConst}._.p`,
-    rtCtx: `${rtConst}.cx`,
-    rtTransCtx: `${rtConst}.tx`,
-    /** for when nesting, used in adapters with elements */
-    nestCtx: '_w_ctx_',
 };
+export function runtimeVars(wrapFunc) {
+    return {
+        rtTrans: `${wrapFunc(varNames.rt)}.t`,
+        rtTPlural: `${wrapFunc(varNames.rt)}.tp`,
+        rtPlural: `${wrapFunc(varNames.rt)}._.p`,
+        rtCtx: `${wrapFunc(varNames.rt)}.cx`,
+        rtTransCtx: `${wrapFunc(varNames.rt)}.tx`,
+        /** for when nesting, used in adapters with elements */
+        nestCtx: '_w_ctx_',
+    };
+}
 export function nonWhitespaceText(msgStr) {
     let trimmedS = msgStr.trimStart();
     const startWh = msgStr.length - trimmedS.length;

package/dist/adapter-utils/mixed-visitor.d.ts

@@ -1,7 +1,9 @@
 import type MagicString from "magic-string";
 import { IndexTracker, Message, type CommentDirectives, type HeuristicDetailsBase, type HeuristicFunc } from "../adapters.js";
+import { type RuntimeVars } from "./index.js";
 type NestedRanges = [number, number, boolean][];
 type InitProps<NodeT> = {
+    vars: () => RuntimeVars;
     mstr: MagicString;
     getRange: (node: NodeT) => {
         start: number;

package/dist/adapter-utils/mixed-visitor.js

@@ -1,6 +1,6 @@
 // Shared logic between adapters for handling nested / mixed elements within elements / fragments
 import { IndexTracker, Message } from "../adapters.js";
-import { nonWhitespaceText, runtimeVars } from "./index.js";
+import { nonWhitespaceText } from "./index.js";
 export class MixedVisitor {
     constructor(props) {
         Object.assign(this, props);
@@ -149,10 +149,10 @@ export class MixedVisitor {
             let begin = '{';
             let end = ')}';
             if (props.inCompoundText) {
-                begin += `${runtimeVars.rtTransCtx}(${runtimeVars.nestCtx}`;
+                begin += `${this.vars().rtTransCtx}(${this.vars().nestCtx}`;
             }
             else {
-                begin += `${runtimeVars.rtTrans}(${this.index.get(msgInfo.toKey())}`;
+                begin += `${this.vars().rtTrans}(${this.index.get(msgInfo.toKey())}`;
             }
             if (iArg > 0) {
                 begin += ', [';

package/dist/adapter-vanilla/index.d.ts

@@ -1,5 +1,5 @@
 import type { AdapterArgs, Adapter } from "../adapters.js";
 import { Transformer } from "./transformer.js";
 export { Transformer };
-export { parseScript, scriptParseOptions, scriptParseOptionsWithComments, initRuntimeStmt } from './transformer.js';
+export { parseScript, scriptParseOptions, scriptParseOptionsWithComments } from './transformer.js';
 export declare const adapter: (args?: AdapterArgs) => Adapter;

package/dist/adapter-vanilla/index.js

@@ -1,10 +1,10 @@
 // $$ cd .. && npm run test
 import { defaultGenerateLoadID, defaultHeuristicFuncOnly } from '../adapters.js';
 import { deepMergeObjects } from "../config.js";
-import { initRuntimeStmt, Transformer } from "./transformer.js";
+import { Transformer } from "./transformer.js";
 import { getDependencies } from '../adapter-utils/index.js';
 export { Transformer };
-export { parseScript, scriptParseOptions, scriptParseOptionsWithComments, initRuntimeStmt } from './transformer.js';
+export { parseScript, scriptParseOptions, scriptParseOptionsWithComments } from './transformer.js';
 const defaultArgs = {
     files: { include: 'src/**/*.{js,ts}', ignore: '**/*.d.ts' },
     catalog: './src/locales/{locale}',
@@ -14,11 +14,22 @@ const defaultArgs = {
     bundleLoad: false,
     generateLoadID: defaultGenerateLoadID,
     writeFiles: {},
+    runtime: {
+        useReactive: () => ({
+            init: false,
+            use: false
+        }),
+        plain: {
+            importName: 'default',
+            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 }) => new Transformer(content, filename, index, heuristic, pluralsFunc, initRuntimeStmt(header.expr)).transform(header.head),
+        transform: ({ content, filename, index, header }) => new Transformer(content, filename, index, heuristic, pluralsFunc, header.expr, runtime).transform(header.head),
         loaderExts: ['.js', '.ts'],
         defaultLoaders: async () => {
             if (rest.bundleLoad) {
@@ -34,6 +45,7 @@ export const adapter = (args = defaultArgs) => {
         defaultLoaderPath: (loader) => {
             return new URL(`../../src/adapter-vanilla/loaders/${loader}.js`, import.meta.url).pathname;
         },
+        runtime,
         ...rest,
         docsUrl: 'https://wuchale.dev/adapters/vanilla'
     };

package/dist/adapter-vanilla/transformer.d.ts

@@ -1,12 +1,12 @@
 import MagicString from "magic-string";
-import type Estree from 'estree';
-import type { Program, Options as ParserOptions } from "acorn";
+import type * as Estree from "acorn";
 import { Message } from '../adapters.js';
-import type { CommentDirectives, HeuristicDetailsBase, HeuristicFunc, IndexTracker, ScriptDeclType, TransformOutput } from "../adapters.js";
-export declare const scriptParseOptions: ParserOptions;
-export declare function scriptParseOptionsWithComments(): [ParserOptions, Estree.Comment[][]];
-export declare function parseScript(content: string): [Program, Estree.Comment[][]];
-export declare function initRuntimeStmt(catalogExpr: string): string;
+import type { CommentDirectives, HeuristicDetailsBase, HeuristicFunc, IndexTracker, ScriptDeclType, TransformOutput, RuntimeConf, CatalogExpr } from "../adapters.js";
+import { type RuntimeVars } from "../adapter-utils/index.js";
+export declare const scriptParseOptions: Estree.Options;
+export declare function scriptParseOptionsWithComments(): [Estree.Options, Estree.Comment[][]];
+export declare function parseScript(content: string): [Estree.Program, Estree.Comment[][]];
+declare function initRuntimeStmt(rtConf: RuntimeConf, expr: CatalogExpr): (file: string, funcName: string, parentFunc: string, additional: object) => string;
 export declare class Transformer {
     index: IndexTracker;
     heuristic: HeuristicFunc;
@@ -15,14 +15,18 @@ export declare class Transformer {
     filename: string;
     mstr: MagicString;
     pluralFunc: string;
-    initRuntime: string | null;
+    initRuntime: ReturnType<typeof initRuntimeStmt>;
+    vars: () => RuntimeVars;
     commentDirectives: CommentDirectives;
     insideProgram: boolean;
     declaring: ScriptDeclType;
+    currentFuncNested: boolean;
     currentFuncDef: string | null;
     currentCall: string;
     currentTopLevelCall: string;
-    constructor(content: string, filename: string, index: IndexTracker, heuristic: HeuristicFunc, pluralsFunc: string, initRuntime: string | null);
+    /** for subclasses. right now for svelte, if in <script module> */
+    additionalState: object;
+    constructor(content: string, filename: string, index: IndexTracker, heuristic: HeuristicFunc, pluralsFunc: string, catalogExpr: CatalogExpr, rtConf: RuntimeConf);
     checkHeuristicBool: HeuristicFunc<HeuristicDetailsBase>;
     checkHeuristic: (msgStr: string, detailsBase: HeuristicDetailsBase) => [boolean, Message];
     visitLiteral: (node: Estree.Literal & {
@@ -55,6 +59,7 @@ export declare class Transformer {
     visitVariableDeclaration: (node: Estree.VariableDeclaration) => Message[];
     visitExportNamedDeclaration: (node: Estree.ExportNamedDeclaration) => Message[];
     visitExportDefaultDeclaration: (node: Estree.ExportNamedDeclaration) => Message[];
+    getRealBodyStart: (nodes: (Estree.Statement | Estree.ModuleDeclaration)[]) => number;
     visitFunctionBody: (node: Estree.BlockStatement | Estree.Expression, name: string | null) => Message[];
     visitFunctionDeclaration: (node: Estree.FunctionDeclaration) => Message[];
     visitArrowFunctionExpression: (node: Estree.ArrowFunctionExpression) => Message[];
@@ -65,7 +70,8 @@ export declare class Transformer {
     visitTemplateLiteral: (node: Estree.TemplateLiteral) => Message[];
     visitProgram: (node: Estree.Program) => Message[];
     processCommentDirectives: (data: string) => CommentDirectives;
-    visit: (node: Estree.BaseNode) => Message[];
+    visit: (node: Estree.AnyNode) => Message[];
     finalize: (msgs: Message[], hmrHeaderIndex: number) => TransformOutput;
     transform: (headerHead: string) => TransformOutput;
 }
+export {};

package/dist/adapter-vanilla/transformer.js

@@ -3,7 +3,7 @@ import MagicString from "magic-string";
 import { Parser } from 'acorn';
 import { tsPlugin } from '@sveltejs/acorn-typescript';
 import { defaultHeuristicFuncOnly, Message } from '../adapters.js';
-import { runtimeVars } from "../adapter-utils/index.js";
+import { runtimeVars, varNames } from "../adapter-utils/index.js";
 export const scriptParseOptions = {
     sourceType: 'module',
     ecmaVersion: 'latest',
@@ -27,6 +27,8 @@ export function scriptParseOptionsWithComments() {
                 accumulateComments.push({
                     type: block ? 'Block' : 'Line',
                     value: comment,
+                    start: null,
+                    end: null,
                 });
             }
         },
@@ -37,8 +39,17 @@ export function parseScript(content) {
     const [opts, comments] = scriptParseOptionsWithComments();
     return [ScriptParser.parse(content, opts), comments];
 }
-export function initRuntimeStmt(catalogExpr) {
-    return `const ${runtimeVars.rtConst} = ${runtimeVars.rtWrap}(${catalogExpr})`;
+function initRuntimeStmt(rtConf, expr) {
+    return (file, funcName, parentFunc, additional) => {
+        const useReactive = rtConf.useReactive({ funcName, nested: parentFunc != null, file, additional });
+        if (useReactive.init == null) {
+            return;
+        }
+        const wrapInit = useReactive.init ? rtConf.reactive.wrapInit : rtConf.plain.wrapInit;
+        const catalogExpr = useReactive.init ? expr.reactive : expr.plain;
+        const runtimeExpr = `${varNames.rtWrap}(${catalogExpr})`;
+        return `\nconst ${varNames.rt} = ${wrapInit(runtimeExpr)}\n`;
+    };
 }
 export class Transformer {
     index;
@@ -49,22 +60,42 @@ export class Transformer {
     filename;
     mstr;
     pluralFunc;
-    // null possible because subclasses may disable init inside functions
     initRuntime;
+    vars;
     // state
     commentDirectives = {};
     insideProgram = false;
     declaring = null;
+    currentFuncNested = false;
     currentFuncDef = null;
     currentCall;
     currentTopLevelCall;
-    constructor(content, filename, index, heuristic, pluralsFunc, initRuntime) {
+    /** for subclasses. right now for svelte, if in <script module> */
+    additionalState = {};
+    constructor(content, filename, index, heuristic, pluralsFunc, catalogExpr, rtConf) {
         this.index = index;
         this.heuristic = heuristic;
         this.pluralFunc = pluralsFunc;
         this.content = content;
         this.filename = filename;
-        this.initRuntime = initRuntime;
+        this.initRuntime = initRuntimeStmt(rtConf, catalogExpr);
+        const topLevelUseReactive = rtConf.useReactive({
+            funcName: null,
+            nested: false,
+            file: filename,
+            additional: this.additionalState,
+        });
+        const reactiveVars = rtConf.reactive?.wrapUse && runtimeVars(rtConf.reactive.wrapUse);
+        const plainVars = rtConf.plain?.wrapUse && runtimeVars(rtConf.plain.wrapUse);
+        this.vars = () => {
+            const useReactive = rtConf.useReactive({
+                funcName: this.currentFuncDef,
+                nested: this.currentFuncNested,
+                file: filename,
+                additional: this.additionalState,
+            }) ?? topLevelUseReactive;
+            return useReactive.use ? reactiveVars : plainVars;
+        };
     }
     checkHeuristicBool = (msgStr, detailsBase) => {
         if (!msgStr) {
@@ -105,7 +136,7 @@ export class Transformer {
         if (!pass) {
             return [];
         }
-        this.mstr.update(start, end, `${runtimeVars.rtTrans}(${this.index.get(msgInfo.toKey())})`);
+        this.mstr.update(start, end, `${this.vars().rtTrans}(${this.index.get(msgInfo.toKey())})`);
         return [msgInfo];
     };
     visitArrayExpression = (node) => node.elements.map(this.visit).flat();
@@ -115,9 +146,7 @@ export class Transformer {
     visitProperty = (node) => {
         const msgs = this.visit(node.key);
         if (msgs.length && node.key.type === 'Literal' && typeof node.key.value === 'string' && !node.computed) {
-            // @ts-expect-error
             this.mstr.appendRight(node.key.start, '[');
-            // @ts-expect-error
             this.mstr.appendLeft(node.key.end, ']');
         }
         msgs.push(...this.visit(node.value));
@@ -158,7 +187,7 @@ export class Transformer {
         const msgInfo = new Message(candidates, 'script', this.commentDirectives.context);
         msgInfo.plural = true;
         const index = this.index.get(msgInfo.toKey());
-        const pluralUpdate = `${runtimeVars.rtTPlural}(${index}), ${runtimeVars.rtPlural}`;
+        const pluralUpdate = `${this.vars().rtTPlural}(${index}), ${this.vars().rtPlural}`;
         // @ts-ignore
         this.mstr.update(secondArg.start, node.end - 1, pluralUpdate);
         return [msgInfo];
@@ -266,23 +295,34 @@ export class Transformer {
     };
     visitExportNamedDeclaration = (node) => node.declaration ? this.visit(node.declaration) : [];
     visitExportDefaultDeclaration = this.visitExportNamedDeclaration;
+    getRealBodyStart = (nodes) => {
+        for (const node of nodes) {
+            if (node.type === 'ExpressionStatement') {
+                continue;
+            }
+            return node.start;
+        }
+        return nodes[0].start;
+    };
     visitFunctionBody = (node, name) => {
         const prevFuncDef = this.currentFuncDef;
-        this.currentFuncDef = node.type === 'BlockStatement' ? name : prevFuncDef;
+        const prevFuncNested = this.currentFuncNested;
+        const isBlock = node.type === 'BlockStatement';
+        this.currentFuncDef = isBlock ? name : prevFuncDef;
+        this.currentFuncNested = isBlock && name != null && prevFuncDef != null;
         const msgs = this.visit(node);
-        let initRuntimeHere = prevFuncDef == null && this.currentFuncDef != null;
-        if (msgs.length > 0 && initRuntimeHere && node.type === 'BlockStatement') {
-            this.initRuntime && this.mstr.prependLeft(
-            // @ts-expect-error
-            node.start + 1, `\n${this.initRuntime}\n`);
+        if (msgs.length > 0 && isBlock) {
+            const initRuntime = this.initRuntime(this.filename, this.currentFuncDef, prevFuncDef, this.additionalState);
+            initRuntime && this.mstr.prependLeft(this.getRealBodyStart(node.body), initRuntime);
         }
+        this.currentFuncNested = prevFuncNested;
         this.currentFuncDef = prevFuncDef;
         return msgs;
     };
     visitFunctionDeclaration = (node) => {
         const declaring = this.declaring;
         this.declaring = 'function';
-        const msgs = this.visitFunctionBody(node.body, node.id?.name ?? null);
+        const msgs = this.visitFunctionBody(node.body, node.id?.name ?? '');
         this.declaring = declaring;
         return msgs;
     };
@@ -329,7 +369,7 @@ export class Transformer {
             this.mstr.update(end, end + 2, ', ');
         }
         const msgInfo = new Message(msgStr, 'script', this.commentDirectives.context);
-        let begin = `${runtimeVars.rtTrans}(${this.index.get(msgInfo.toKey())}`;
+        let begin = `${this.vars().rtTrans}(${this.index.get(msgInfo.toKey())}`;
         let end = ')';
         if (node.expressions.length) {
             begin += ', [';
@@ -370,8 +410,8 @@ export class Transformer {
     visit = (node) => {
         // for estree
         const commentDirectives = { ...this.commentDirectives };
-        // @ts-expect-error
         const comments = this.comments[node.start];
+        // @ts-expect-error
         for (const comment of node.leadingComments ?? comments ?? []) {
             this.commentDirectives = this.processCommentDirectives(comment.value.trim());
         }
@@ -394,7 +434,7 @@ export class Transformer {
                 return {};
             }
             if (hmrData) {
-                this.mstr.prependRight(hmrHeaderIndex, `\nconst ${runtimeVars.hmrUpdate} = ${JSON.stringify(hmrData)}\n`);
+                this.mstr.prependRight(hmrHeaderIndex, `\nconst ${varNames.hmrUpdate} = ${JSON.stringify(hmrData)}\n`);
             }
             return {
                 code: this.mstr.toString(),
@@ -408,7 +448,7 @@ export class Transformer {
         this.mstr = new MagicString(this.content);
         const msgs = this.visit(ast);
         if (msgs.length) {
-            this.mstr.appendRight(0, headerHead + '\n');
+            this.mstr.appendRight(this.getRealBodyStart(ast.body), headerHead + '\n');
         }
         return this.finalize(msgs, 0);
     };

package/dist/adapters.d.ts

@@ -38,9 +38,13 @@ export type GlobConf = string | string[] | {
     include: string | string[];
     ignore: string | string[];
 };
+export type CatalogExpr = {
+    plain: string;
+    reactive: string;
+};
 export type TransformHeader = {
     head: string;
-    expr: string;
+    expr: CatalogExpr;
 };
 type TransformCtx = {
     content: string;
@@ -61,19 +65,45 @@ export type TransformOutput = {
     msgs: Message[];
 };
 export type TransformFunc = (ctx: TransformCtx) => TransformOutput;
+export type WrapFunc = (expr: string) => string;
+export type UseReactiveFunc = (details: {
+    funcName?: string;
+    nested: boolean;
+    file: string;
+    additional: object;
+}) => {
+    /** null to disable initializing */
+    init: boolean | null;
+    use: boolean;
+};
+type RuntimeConfDetails = {
+    wrapInit: WrapFunc;
+    wrapUse: WrapFunc;
+    importName: 'default' | string;
+};
+export type RuntimeConf = {
+    useReactive: UseReactiveFunc;
+    plain: RuntimeConfDetails;
+    reactive: RuntimeConfDetails;
+};
+export type LoaderPath = {
+    client: string;
+    ssr: string;
+};
 export type AdapterPassThruOpts = {
     files: GlobConf;
     catalog: string;
     granularLoad: boolean;
     bundleLoad: boolean;
     generateLoadID: (filename: string) => string;
-    loaderPath?: string;
+    loaderPath?: string | LoaderPath;
     writeFiles: {
         compiled?: boolean;
         proxy?: boolean;
         transformed?: boolean;
         outDir?: string;
     };
+    runtime: Partial<RuntimeConf>;
 };
 export type Adapter = AdapterPassThruOpts & {
     transform: TransformFunc;
@@ -81,7 +111,7 @@ export type Adapter = AdapterPassThruOpts & {
     loaderExts: string[];
     /** available loader names, can do auto detection logic to sort, dependencies given */
     defaultLoaders: () => string[] | Promise<string[]>;
-    defaultLoaderPath: (loaderName: string) => string;
+    defaultLoaderPath: (loaderName: string) => LoaderPath | string;
     docsUrl: string;
 };
 export type AdapterArgs = Partial<AdapterPassThruOpts> & {

package/dist/cli/init.js

@@ -19,7 +19,7 @@ export async function init(config, locales, logger) {
         const loaders = await adapter.defaultLoaders();
         let existing = false;
         if (loaderPath) {
-            if (!empty) {
+            if (!Object.values(empty).some(side => side)) { // all non empty
                 loaders.unshift('existing');
                 existing = true;
             }
@@ -27,8 +27,7 @@ export async function init(config, locales, logger) {
         else {
             loaderPath = handler.getLoaderPaths()[0];
         }
-        logger.log(`${existing ? 'Edit' : 'Create'} loader for ${adapterName} at ${color.cyan(loaderPath)}`);
-        await mkdir(dirname(loaderPath), { recursive: true });
+        logger.log(`${existing ? 'Edit' : 'Create'} loader for ${adapterName}`);
         let loader = loaders[0];
         if (loaders.length > 1) {
             loader = await ask(loaders, `Select default loader for adapter: ${adapterName}`, logger);
@@ -37,19 +36,18 @@ export async function init(config, locales, logger) {
             logger.log('Keep existing loader');
             continue;
         }
-        await copyFile(adapter.defaultLoaderPath(loader), loaderPath);
+        const defaultLoader = adapter.defaultLoaderPath(loader);
+        const defaultPaths = typeof defaultLoader === 'string' ? {
+            client: defaultLoader,
+            ssr: defaultLoader,
+        } : defaultLoader;
+        for (const [side, path] of Object.entries(defaultPaths)) {
+            await mkdir(dirname(path), { recursive: true });
+            await copyFile(path, loaderPath[side]);
+            keysByLoaderPath[path] = key;
+        }
         logger.log(`Initial extract for ${adapterName}`);
         await extractAdap(handler, sharedState, adapter.files, locales, false, logger);
-        if (handler.loaderPath in keysByLoaderPath) {
-            throw new Error([
-                'While catalogs can be shared, the same loader cannot be used by multiple adapters',
-                `Conflicting: ${adapterName} and ${color.cyan(keysByLoaderPath[handler.loaderPath])}`,
-                'Specify a different loaderPath for one of them.'
-            ].join('\n'));
-        }
-        else {
-            keysByLoaderPath[handler.loaderPath] = key;
-        }
         extractedNew = true;
         logger.log(`\n${adapterName}: Read more at ${color.cyan(adapter.docsUrl)}.`);
     }

package/dist/cli/status.js

@@ -36,17 +36,17 @@ export async function status(config, locales, logger) {
             const { total, obsolete, untranslated } = stats;
             const locName = getLanguageName(locale);
             logger.log([
-                `  ${locName}: ${color.cyan(`total: ${total} `)}`,
-                color.yellow(`untranslated: ${untranslated} `),
+                `  ${locName}: ${color.cyan(`total: ${total}`)}`,
+                color.yellow(`untranslated: ${untranslated}`),
                 color.grey(`obsolete: ${obsolete}`),
-            ].join(' '));
-        }
-        if (loaderPath && !empty) {
-            logger.log(`  Loader file: ${color.cyan(loaderPath)}`);
-            continue;
+            ].join(', '));
         }
         if (loaderPath) {
-            logger.warn(`  Loader file empty at ${color.cyan(loaderPath)}`);
+            logger.log(`  Loader files:`);
+            for (const [side, path] of Object.entries(loaderPath)) {
+                logger.log(`    ${color.cyan(side)}: ${color.cyan(path)}${empty[side] ? color.yellow(' (empty)') : ''}`);
+            }
+            continue;
         }
         else {
             logger.warn('  No loader file found.');

package/dist/handler.d.ts

@@ -1,5 +1,5 @@
 import { IndexTracker } from "./adapters.js";
-import type { Adapter, GlobConf } from "./adapters.js";
+import type { Adapter, GlobConf, LoaderPath } from "./adapters.js";
 import { type CompiledElement } from "./compile.js";
 import { type ItemType } from "./gemini.js";
 import { type Matcher } from 'picomatch';
@@ -35,10 +35,13 @@ type GranularState = {
     compiled: CompiledCatalogs;
     indexTracker: IndexTracker;
 };
+type LoaderPathEmpty = {
+    [K in keyof LoaderPath]: boolean;
+};
 export declare class AdapterHandler {
     #private;
     key: string;
-    loaderPath: string;
+    loaderPath: LoaderPath;
     proxyPath: string;
     outDir: string;
     compiledHead: Record<string, string>;
@@ -47,11 +50,11 @@ export declare class AdapterHandler {
     granularStateByFile: Record<string, GranularState>;
     granularStateByID: Record<string, GranularState>;
     catalogPathsToLocales: Record<string, string>;
-    constructor(adapter: Adapter, key: string | number, config: ConfigPartial, mode: Mode, virtualPrefix: string, projectRoot: string, log: Logger);
-    getLoaderPaths(): string[];
+    constructor(adapter: Adapter, key: string, config: ConfigPartial, mode: Mode, virtualPrefix: string, projectRoot: string, log: Logger);
+    getLoaderPaths(): LoaderPath[];
     getLoaderPath(): Promise<{
-        path: string | null;
-        empty: boolean;
+        path: LoaderPath | null;
+        empty: LoaderPathEmpty;
     }>;
     /** Get both catalog virtual module names AND HMR event names */
     virtModEvent: (locale: string, loadID: string | null) => string;
@@ -70,7 +73,7 @@ export declare class AdapterHandler {
         ignore: string[];
     }];
     savePoAndCompile: (loc: string) => Promise<void>;
-    transform: (content: string, filename: string, hmrVersion?: number) => Promise<{
+    transform: (content: string, filename: string, hmrVersion?: number, ssr?: boolean) => Promise<{
         code?: string;
         map?: any;
     }>;

package/dist/handler.js

@@ -10,7 +10,7 @@ import { normalize } from "node:path";
 import { getLanguageName } from "./config.js";
 import { color } from './log.js';
 import { catalogVarName } from './runtime.js';
-import { runtimeVars } from './adapter-utils/index.js';
+import { varNames } from './adapter-utils/index.js';
 const defaultPluralRule = {
     nplurals: 2,
     plural: 'n == 1 ? 0 : 1',
@@ -96,37 +96,53 @@ export class AdapterHandler {
     }
     getLoaderPaths() {
         if (this.#adapter.loaderPath != null) {
+            if (typeof this.#adapter.loaderPath === 'string') {
+                return [{
+                        client: this.#adapter.loaderPath,
+                        ssr: this.#adapter.loaderPath,
+                    }];
+            }
             return [this.#adapter.loaderPath];
         }
         const catalogToLoader = this.#adapter.catalog.replace('{locale}', 'loader');
         const paths = [];
         for (const ext of this.#adapter.loaderExts) {
-            let path = catalogToLoader + ext;
+            let path = catalogToLoader;
             if (path.startsWith('./')) {
                 path = path.slice(2);
             }
-            paths.push(path);
+            const pathClient = path + ext;
+            paths.push({ client: pathClient, ssr: path + '.ssr' + ext }, { client: pathClient, ssr: pathClient });
         }
         return paths;
     }
     async getLoaderPath() {
+        const empty = { client: true, ssr: true };
         for (const path of this.getLoaderPaths()) {
-            try {
-                const contents = await readFile(path);
-                return { path, empty: contents.toString().trim() === '' };
-            }
-            catch (err) {
-                if (err.code !== 'ENOENT') {
-                    throw err;
+            let bothExist = true;
+            for (const side in empty) {
+                try {
+                    const contents = await readFile(path[side]);
+                    empty[side] = contents.toString().trim() === '';
+                }
+                catch (err) {
+                    if (err.code !== 'ENOENT') {
+                        throw err;
+                    }
+                    bothExist = false;
+                    break;
                 }
+            }
+            if (!bothExist) {
                 continue;
             }
+            return { path, empty };
         }
-        return { path: null, empty: true };
+        return { path: null, empty };
     }
     async #initPaths() {
         const { path: loaderPath, empty } = await this.getLoaderPath();
-        if (!loaderPath || empty) {
+        if (!loaderPath || Object.values(empty).some(side => side)) {
             throw new Error('No valid loader file found.');
         }
         this.loaderPath = loaderPath;
@@ -366,7 +382,7 @@ export class AdapterHandler {
     globConfToArgs = (conf) => {
         let patterns = [];
         // ignore generated files
-        const options = { ignore: [this.loaderPath] };
+        const options = { ignore: [this.loaderPath.client, this.loaderPath.ssr] };
         if (this.#adapter.writeFiles.proxy) {
             options.ignore.push(this.proxyPath);
         }
@@ -430,36 +446,67 @@ export class AdapterHandler {
             await this.compile(loc);
         }
     };
-    #prepareHeader = (filename, loadID, hasHmr) => {
+    #putImportSpec = (varName, alias, importsFuncs) => {
+        if (!varName) {
+            return;
+        }
+        if (varName === 'default') {
+            importsFuncs.unshift(alias); // default imports are first
+        }
+        else {
+            importsFuncs.push(`{${varName} as ${alias}}`);
+        }
+    };
+    #hmrUpdateFunc = (getFuncName, getFuncNameHmr) => {
+        const catalogVar = '_w_catalog_';
+        return `
+            function ${getFuncName}(loadID) {
+                const ${catalogVar} = ${getFuncNameHmr}(loadID)
+                ${catalogVar}?.update?.(${varNames.hmrUpdate})
+                return ${catalogVar}
+            }
+        `;
+    };
+    #prepareHeader = (filename, loadID, hasHmr, ssr) => {
         let loaderRelTo = filename;
         if (this.#adapter.writeFiles.transformed) {
             loaderRelTo = resolve(this.outDir + '/' + filename);
         }
-        let loaderPath = relative(dirname(loaderRelTo), this.loaderPath);
+        let loaderPath = relative(dirname(loaderRelTo), ssr ? this.loaderPath.ssr : this.loaderPath.client);
         if (!loaderPath.startsWith('.')) {
             loaderPath = `./${loaderPath}`;
         }
-        const getFuncName = '_w_load_';
-        let head = `import ${runtimeVars.rtWrap} from 'wuchale/runtime'\n`;
+        const importsFuncs = [];
+        const runtimeConf = this.#adapter.runtime;
+        let getFuncPlain = '_w_load_';
+        let getFuncReactive = getFuncPlain + 'rx_';
+        let head = [];
         if (hasHmr) {
-            const getFuncHmr = `_w_load_hmr_`;
-            const catalogVar = '_w_catalog_';
-            head += `
-                import ${getFuncHmr} from "${loaderPath}"
-                function ${getFuncName}(loadID) {
-                    const ${catalogVar} = ${getFuncHmr}(loadID)
-                    ${catalogVar}?.update?.(${runtimeVars.hmrUpdate})
-                    return ${catalogVar}
-                }
-            `;
-        }
-        else {
-            head += `import ${getFuncName} from "${loaderPath}"`;
+            const getFuncPlainHmr = getFuncPlain;
+            const getFuncReactiveHmr = getFuncReactive;
+            getFuncPlain += 'hmr_';
+            getFuncReactive += 'hmr_';
+            if (runtimeConf.plain?.importName) {
+                head.push(this.#hmrUpdateFunc(getFuncPlainHmr, getFuncPlain));
+            }
+            if (runtimeConf.reactive?.importName) {
+                head.push(this.#hmrUpdateFunc(getFuncReactiveHmr, getFuncReactive));
+            }
         }
+        this.#putImportSpec(runtimeConf.plain?.importName, getFuncPlain, importsFuncs);
+        this.#putImportSpec(runtimeConf.reactive?.importName, getFuncReactive, importsFuncs);
+        head = [
+            `import ${varNames.rtWrap} from 'wuchale/runtime'`,
+            `import ${importsFuncs.join(',')} from "${loaderPath}"`,
+            ...head,
+        ];
         if (!this.#adapter.bundleLoad) {
             return {
-                head,
-                expr: `${getFuncName}('${loadID}')`,
+                head: head.join('\n'),
+                expr: {
+                    plain: `${getFuncPlain}('${loadID}')`,
+                    reactive: `${getFuncReactive}('${loadID}')`,
+                }
             };
         }
         const imports = [];
@@ -472,14 +519,17 @@ export class AdapterHandler {
         const catalogsVarName = '_w_catalogs_';
         return {
             head: [
-                head,
                 ...imports,
+                ...head,
                 `const ${catalogsVarName} = {${objElms.join(',')}}`
             ].join('\n'),
-            expr: `${getFuncName}(${catalogsVarName})`,
+            expr: {
+                plain: `${getFuncPlain}(${catalogsVarName})`,
+                reactive: `${getFuncReactive}(${catalogsVarName})`,
+            }
         };
     };
-    transform = async (content, filename, hmrVersion = -1) => {
+    transform = async (content, filename, hmrVersion = -1, ssr = false) => {
         let indexTracker = this.sharedState.indexTracker;
         let loadID = this.key;
         let compiled = this.sharedState.compiled;
@@ -493,7 +543,7 @@ export class AdapterHandler {
             content,
             filename,
             index: indexTracker,
-            header: this.#prepareHeader(filename, loadID, hmrVersion >= 0),
+            header: this.#prepareHeader(filename, loadID, hmrVersion >= 0, ssr),
         });
         const hmrKeys = {};
         for (const loc of this.#locales) {

package/dist/index.d.ts

@@ -4,4 +4,4 @@ export { AdapterHandler } from './handler.js';
 export type { Mode, SharedStates } from './handler.js';
 export { Logger } from './log.js';
 export { Message, IndexTracker, defaultGenerateLoadID, defaultHeuristic, } from './adapters.js';
-export type { Adapter, AdapterArgs, AdapterPassThruOpts, HeuristicFunc, TransformOutput, TransformHeader, CommentDirectives, } from './adapters.js';
+export type { Adapter, AdapterArgs, AdapterPassThruOpts, RuntimeConf, CatalogExpr, HeuristicFunc, TransformOutput, TransformHeader, CommentDirectives, UseReactiveFunc, } from './adapters.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "wuchale",
-    "version": "0.14.6",
+    "version": "0.15.0",
     "description": "Protobuf-like i18n from plain code",
     "scripts": {
         "dev": "tsc --watch",