@kuratchi/js 0.0.15 → 0.0.17

package/dist/compiler/layout-pipeline.d.ts

@@ -0,0 +1,31 @@
+import { type ParsedFile } from './parser.js';
+import type { ComponentCompiler } from './component-pipeline.js';
+import type { ClientModuleCompiler } from './client-module-pipeline.js';
+export interface LayoutBuildPlan {
+    compiledLayout: string | null;
+    componentNames: Map<string, string>;
+    importParsed: ParsedFile | null;
+}
+export declare function compileLayoutPlan(opts: {
+    renderSource: string;
+    importSource: string;
+    layoutFile: string;
+    isDev: boolean;
+    componentCompiler: ComponentCompiler;
+    clientModuleCompiler?: ClientModuleCompiler;
+    assetsPrefix?: string;
+    clientScopeId?: string;
+}): LayoutBuildPlan;
+export declare function finalizeLayoutPlan(opts: {
+    plan: LayoutBuildPlan;
+    layoutFile: string;
+    projectDir: string;
+    resolveCompiledImportPath: (origPath: string, importerDir: string, outFileDir: string) => string;
+    allocateModuleId: () => string;
+    pushImport: (statement: string) => void;
+    componentCompiler: ComponentCompiler;
+}): {
+    compiledLayout: string | null;
+    compiledLayoutActions: string | null;
+    isLayoutAsync: boolean;
+};

package/dist/compiler/layout-pipeline.js

@@ -0,0 +1,155 @@
+import * as path from 'node:path';
+import { parseFile, stripTopLevelImports } from './parser.js';
+import { compileTemplate } from './template.js';
+import { parseImportStatement, parseNamedImportBindings } from './import-linking.js';
+import { buildDevAliasDeclarations, rewriteImportedFunctionCalls } from './script-transform.js';
+const HEAD_MARKER = '<!--__KURATCHI_HEAD__-->';
+function injectLayoutHeadPlaceholder(source, marker) {
+    const lower = source.toLowerCase();
+    const idx = lower.lastIndexOf('</head>');
+    if (idx !== -1) {
+        return source.slice(0, idx) + `${marker}\n` + source.slice(idx);
+    }
+    return `${marker}\n${source}`;
+}
+function buildLayoutBrowserImportEntries(importParsed, layoutFile) {
+    const importerDir = path.dirname(layoutFile);
+    const entries = new Map();
+    const addEntry = (line) => {
+        if (!entries.has(line)) {
+            entries.set(line, { line, importerDir });
+        }
+    };
+    for (const line of importParsed.routeClientImports) {
+        addEntry(line);
+    }
+    for (const line of importParsed.serverImports) {
+        const parsed = parseImportStatement(line);
+        if (parsed.moduleSpecifier?.startsWith('$shared/')) {
+            addEntry(line);
+        }
+    }
+    return Array.from(entries.values());
+}
+export function compileLayoutPlan(opts) {
+    const importParsed = parseFile(opts.importSource, { kind: 'layout', filePath: opts.layoutFile });
+    let renderTemplateSource = opts.renderSource;
+    const importScriptMatch = opts.importSource.match(/^(\s*)<script(\s[^>]*)?\s*>([\s\S]*?)<\/script>/);
+    if (importScriptMatch) {
+        const body = importScriptMatch[3].trim();
+        const isServerScript = !/\$\s*:/.test(body);
+        if (isServerScript) {
+            renderTemplateSource = opts.renderSource.replace(importScriptMatch[0], '').trim();
+        }
+    }
+    const componentNames = opts.componentCompiler.collectComponentMap(importParsed.componentImports);
+    const browserImportEntries = opts.clientModuleCompiler
+        ? buildLayoutBrowserImportEntries(importParsed, opts.layoutFile)
+        : [];
+    const clientRouteRegistry = opts.clientModuleCompiler && opts.clientScopeId && browserImportEntries.length > 0
+        ? opts.clientModuleCompiler.createRegistry(opts.clientScopeId, browserImportEntries)
+        : null;
+    const hasClientBindings = !!clientRouteRegistry?.hasBindings();
+    const hasLayoutScript = !!(importParsed.script && (componentNames.size > 0 || importParsed.hasLoad));
+    if (hasLayoutScript || hasClientBindings) {
+        let layoutTemplate = injectLayoutHeadPlaceholder(renderTemplateSource, '{@raw __layoutHead}');
+        layoutTemplate = layoutTemplate.replace(/<slot\s*><\/slot>/g, '{@raw __content}');
+        layoutTemplate = layoutTemplate.replace(/<slot\s*\/>/g, '{@raw __content}');
+        const layoutActionNames = new Set(importParsed.actionFunctions);
+        for (const fnName of opts.componentCompiler.resolveActionProps(importParsed.template, componentNames)) {
+            layoutActionNames.add(fnName);
+        }
+        const layoutRenderBody = compileTemplate(layoutTemplate, componentNames, layoutActionNames, undefined, { clientRouteRegistry: clientRouteRegistry ?? undefined });
+        const layoutComponentStyles = opts.componentCompiler.collectStyles(componentNames);
+        let finalLayoutBody = layoutRenderBody;
+        if (layoutComponentStyles.length > 0) {
+            const lines = layoutRenderBody.split('\n');
+            const styleLines = layoutComponentStyles.map((css) => `__parts.push(\`${css}\\n\`);`);
+            finalLayoutBody = [lines[0], ...styleLines, ...lines.slice(1)].join('\n');
+        }
+        let layoutScriptBody = importParsed.script
+            ? stripTopLevelImports(importParsed.script)
+            : '';
+        const layoutDevDecls = buildDevAliasDeclarations(importParsed.devAliases, opts.isDev);
+        layoutScriptBody = [layoutDevDecls, layoutScriptBody].filter(Boolean).join('\n');
+        const clientEntryAsset = clientRouteRegistry?.buildEntryAsset() ?? null;
+        const clientModuleHref = clientEntryAsset && opts.assetsPrefix
+            ? `${opts.assetsPrefix}${clientEntryAsset.assetName}`
+            : null;
+        const layoutHeadAssignment = clientModuleHref
+            ? `const __layoutHead = __head + ${JSON.stringify(`<script type="module" src="${clientModuleHref}"></script>\n`)};`
+            : `const __layoutHead = __head;`;
+        return {
+            compiledLayout: `function __layout(__content, __head = '') {
+  const __esc = (v) => { if (v == null) return ''; return String(v).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;'); };
+  ${layoutHeadAssignment}
+  ${layoutScriptBody ? layoutScriptBody + '\n  ' : ''}${finalLayoutBody}
+  return __html;
+}`,
+            componentNames,
+            importParsed,
+        };
+    }
+    const slotMarker = '<slot></slot>';
+    const layoutSource = injectLayoutHeadPlaceholder(renderTemplateSource, HEAD_MARKER);
+    const slotIdx = layoutSource.indexOf(slotMarker);
+    if (slotIdx === -1) {
+        throw new Error('layout.html must contain <slot></slot>');
+    }
+    const escLayout = (source) => source.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, () => '\\$');
+    const before = escLayout(layoutSource.slice(0, slotIdx));
+    const after = escLayout(layoutSource.slice(slotIdx + slotMarker.length));
+    return {
+        compiledLayout: `const __layoutBefore = \`${before}\`;\nconst __layoutAfter = \`${after}\`;\nfunction __layout(content, head = '') {\n  return (__layoutBefore + content + __layoutAfter).replace(${JSON.stringify(HEAD_MARKER)}, head);\n}`,
+        componentNames,
+        importParsed,
+    };
+}
+export function finalizeLayoutPlan(opts) {
+    let compiledLayout = opts.plan.compiledLayout;
+    let compiledLayoutActions = null;
+    if (compiledLayout && opts.plan.importParsed && opts.plan.importParsed.serverImports.length > 0) {
+        const layoutFileDir = path.dirname(opts.layoutFile);
+        const outFileDir = path.join(opts.projectDir, '.kuratchi');
+        const layoutFnToModule = {};
+        for (const imp of opts.plan.importParsed.serverImports) {
+            const pathMatch = imp.match(/from\s+['"]([^'"]+)['"]/);
+            if (!pathMatch)
+                continue;
+            const origPath = pathMatch[1];
+            const importPath = opts.resolveCompiledImportPath(origPath, layoutFileDir, outFileDir);
+            const moduleId = opts.allocateModuleId();
+            opts.pushImport(`import * as ${moduleId} from '${importPath}';`);
+            for (const binding of parseNamedImportBindings(imp)) {
+                layoutFnToModule[binding.local] = moduleId;
+            }
+            const starMatch = imp.match(/import\s*\*\s*as\s+(\w+)/);
+            if (starMatch) {
+                layoutFnToModule[starMatch[1]] = moduleId;
+            }
+        }
+        compiledLayout = rewriteImportedFunctionCalls(compiledLayout, layoutFnToModule);
+        const layoutActionNames = new Set(opts.plan.importParsed.actionFunctions);
+        for (const fnName of opts.componentCompiler.resolveActionProps(opts.plan.importParsed.template, opts.plan.componentNames)) {
+            layoutActionNames.add(fnName);
+        }
+        if (layoutActionNames.size > 0) {
+            const actionEntries = Array.from(layoutActionNames)
+                .filter((fnName) => fnName in layoutFnToModule)
+                .map((fnName) => `'${fnName}': ${layoutFnToModule[fnName]}.${fnName}`)
+                .join(', ');
+            if (actionEntries) {
+                compiledLayoutActions = `{ ${actionEntries} }`;
+            }
+        }
+    }
+    const isLayoutAsync = !!(compiledLayout && /\bawait\b/.test(compiledLayout));
+    if (compiledLayout && isLayoutAsync) {
+        compiledLayout = compiledLayout.replace(/^function __layout\(/, 'async function __layout(');
+    }
+    return {
+        compiledLayout,
+        compiledLayoutActions,
+        isLayoutAsync,
+    };
+}

package/dist/compiler/page-route-pipeline.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentCompiler } from './component-pipeline.js';
+import type { ClientModuleCompiler } from './client-module-pipeline.js';
+import type { RouteStatePlan } from './route-state-pipeline.js';
+export declare function compilePageRoute(opts: {
+    pattern: string;
+    routeIndex: number;
+    projectDir: string;
+    isDev: boolean;
+    routeState: RouteStatePlan;
+    componentCompiler: ComponentCompiler;
+    clientModuleCompiler: ClientModuleCompiler;
+    assetsPrefix: string;
+    resolveCompiledImportPath: (origPath: string, importerDir: string, outFileDir: string) => string;
+    allocateModuleId: () => string;
+    pushImport: (statement: string) => void;
+}): string;

package/dist/compiler/page-route-pipeline.js

@@ -0,0 +1,62 @@
+import * as path from 'node:path';
+import { compileTemplate, splitTemplateRenderSections } from './template.js';
+import { analyzeRouteBuild, emitRouteObject } from './route-pipeline.js';
+import { linkRouteServerImports } from './import-linking.js';
+export function compilePageRoute(opts) {
+    const outFileDir = path.join(opts.projectDir, '.kuratchi');
+    const routeModuleLinkPlan = linkRouteServerImports({
+        routeServerImportEntries: opts.routeState.routeServerImportEntries,
+        routeClientImportEntries: opts.routeState.routeClientImportEntries,
+        actionFunctions: opts.routeState.mergedParsed.actionFunctions,
+        pollFunctions: opts.routeState.mergedParsed.pollFunctions,
+        dataGetQueries: opts.routeState.mergedParsed.dataGetQueries,
+        routeScriptReferenceSource: opts.routeState.routeScriptReferenceSource,
+        resolveCompiledImportPath: opts.resolveCompiledImportPath,
+        outFileDir,
+        allocateModuleId: opts.allocateModuleId,
+    });
+    for (const statement of routeModuleLinkPlan.importStatements) {
+        opts.pushImport(statement);
+    }
+    opts.routeState.routeImportDecls.push(...routeModuleLinkPlan.routeImportDecls);
+    const fnToModule = routeModuleLinkPlan.fnToModule;
+    const routeComponentNames = opts.componentCompiler.collectComponentMap(opts.routeState.mergedParsed.componentImports);
+    for (const routeFnName of opts.componentCompiler.resolveActionProps(opts.routeState.effectiveTemplate, routeComponentNames, (fnName) => fnName in fnToModule)) {
+        if (!opts.routeState.mergedParsed.actionFunctions.includes(routeFnName)) {
+            opts.routeState.mergedParsed.actionFunctions.push(routeFnName);
+        }
+    }
+    const dataVarsSet = new Set(opts.routeState.mergedParsed.dataVars);
+    const actionNames = new Set(opts.routeState.mergedParsed.actionFunctions.filter((fnName) => fnName in fnToModule || dataVarsSet.has(fnName)));
+    const rpcNameMap = new Map();
+    let rpcCounter = 0;
+    for (const fnName of opts.routeState.mergedParsed.pollFunctions) {
+        if (!rpcNameMap.has(fnName)) {
+            rpcNameMap.set(fnName, `rpc_${opts.routeIndex}_${rpcCounter++}`);
+        }
+    }
+    for (const query of opts.routeState.mergedParsed.dataGetQueries) {
+        if (!rpcNameMap.has(query.fnName)) {
+            rpcNameMap.set(query.fnName, `rpc_${opts.routeIndex}_${rpcCounter++}`);
+        }
+        query.rpcId = rpcNameMap.get(query.fnName);
+    }
+    const clientRouteRegistry = opts.clientModuleCompiler.createRouteRegistry(opts.routeIndex, opts.routeState.routeBrowserImportEntries);
+    const renderSections = splitTemplateRenderSections(opts.routeState.effectiveTemplate);
+    const renderBody = compileTemplate(renderSections.bodyTemplate, routeComponentNames, actionNames, rpcNameMap, { emitCall: '__emit', enableFragmentManifest: true, clientRouteRegistry });
+    const renderHeadBody = compileTemplate(renderSections.headTemplate, routeComponentNames, actionNames, rpcNameMap, { clientRouteRegistry });
+    const clientEntryAsset = clientRouteRegistry.buildEntryAsset();
+    const clientModuleHref = clientEntryAsset ? `${opts.assetsPrefix}${clientEntryAsset.assetName}` : null;
+    const routePlan = analyzeRouteBuild({
+        pattern: opts.pattern,
+        renderBody,
+        renderHeadBody,
+        isDev: opts.isDev,
+        parsed: opts.routeState.mergedParsed,
+        fnToModule,
+        rpcNameMap,
+        componentStyles: opts.componentCompiler.collectStyles(routeComponentNames),
+        clientModuleHref,
+    });
+    return emitRouteObject(routePlan);
+}

package/dist/compiler/parser.d.ts

@@ -36,6 +36,10 @@ export interface ParsedFile {
     }>;
     /** Imports found in a top-level client script block */
     clientImports: string[];
+    /** Top-level route/layout imports from $client/* */
+    routeClientImports: string[];
+    /** Local binding names introduced by top-level $client/* imports */
+    routeClientImportBindings: string[];
     /** Top-level names returned from explicit load() */
     loadReturnVars: string[];
     /** Local aliases for Cloudflare Workers env imported from cloudflare:workers */