@fiyuu/runtime 0.1.0 → 0.1.1

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@fiyuu/runtime",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
-  "main": "./src/index.js",
+  "main": "./src/index.ts",
   "exports": {
-    ".": "./src/index.js",
-    "./cli": "./src/cli.js"
+    ".": "./src/index.ts",
+    "./cli": "./src/cli.ts"
   },
   "dependencies": {
     "@geajs/core": "^1.0.12",
-    "@fiyuu/core": "0.1.0",
+    "@fiyuu/core": "0.1.1",
     "@fiyuu/db": "0.3.0",
     "@fiyuu/realtime": "0.3.0",
     "chokidar": "^4.0.3",

package/src/bundler.ts

@@ -0,0 +1,151 @@
+import { promises as fs, existsSync } from "node:fs";
+import { createHash } from "node:crypto";
+import path from "node:path";
+import { build } from "esbuild";
+import type { FeatureRecord, RenderMode } from "@fiyuu/core";
+
+export interface ClientAsset {
+  route: string;
+  feature: string;
+  render: RenderMode;
+  bundleFile: string;
+  publicPath: string;
+}
+
+const buildCache = new Map<string, { signature: string; asset: ClientAsset }>();
+
+export async function bundleClient(features: FeatureRecord[], outputDirectory: string): Promise<ClientAsset[]> {
+  await fs.mkdir(outputDirectory, { recursive: true });
+
+  const pageFeatures = features.filter((feature) => feature.files["page.tsx"] && feature.render === "csr");
+  const assets = await Promise.all(
+    pageFeatures.map(async (feature) => {
+      const safeFeatureName = feature.feature.length > 0 ? feature.feature.replaceAll("/", "_") : "home";
+      const pageFile = feature.files["page.tsx"]!;
+      const layoutFiles = resolveLayoutFiles(feature, pageFile);
+      const signature = await createBuildSignature([pageFile, ...layoutFiles]);
+      const signatureHash = createHash("sha1").update(signature).digest("hex").slice(0, 10);
+      const bundleName = `${safeFeatureName}.${signatureHash}.js`;
+      const bundleFile = path.join(outputDirectory, bundleName);
+      const cacheKey = feature.route;
+      const publicPath = `/__fiyuu/client/${bundleName}`;
+      const cached = buildCache.get(cacheKey);
+
+      if (cached && cached.signature === signature && existsSync(cached.asset.bundleFile)) {
+        return {
+          ...cached.asset,
+          render: feature.render,
+        } satisfies ClientAsset;
+      }
+
+      await build({
+        stdin: {
+          contents: createClientEntry(pageFile, layoutFiles),
+          resolveDir: path.dirname(pageFile),
+          sourcefile: `${feature.feature}-client.tsx`,
+          loader: "tsx",
+        },
+        bundle: true,
+        format: "esm",
+        jsx: "automatic",
+        jsxImportSource: "@geajs/core",
+        minify: true,
+        outfile: bundleFile,
+        platform: "browser",
+        sourcemap: false,
+        target: ["es2022"],
+      });
+
+      const asset = {
+        route: feature.route,
+        feature: feature.feature,
+        render: feature.render,
+        bundleFile,
+        publicPath,
+      } satisfies ClientAsset;
+
+      if (cached && cached.asset.bundleFile !== asset.bundleFile && existsSync(cached.asset.bundleFile)) {
+        try {
+          await fs.unlink(cached.asset.bundleFile);
+        } catch {
+          // ignore stale artifact cleanup failures
+        }
+      }
+
+      buildCache.set(cacheKey, { signature, asset });
+      return asset;
+    }),
+  );
+
+  return assets;
+}
+
+async function createBuildSignature(filePaths: string[]): Promise<string> {
+  const signatures = await Promise.all(
+    filePaths.map(async (filePath) => {
+      const stats = await fs.stat(filePath);
+      return `${filePath}:${stats.size}:${Math.floor(stats.mtimeMs)}`;
+    }),
+  );
+
+  return signatures.join("|");
+}
+
+function createClientEntry(pageFile: string, layoutFiles: string[]): string {
+  const layoutImports = layoutFiles
+    .map((layoutFile, index) => `import * as LayoutModule${index} from ${JSON.stringify(layoutFile)};`)
+    .join("\n");
+  const layoutWrappers = layoutFiles
+    .map((_, index) => `const Layout${index} = LayoutModule${index}.default; if (Layout${index}) { const wrapped = new Layout${index}({ route, children: String(component) }); component = wrapped; }`)
+    .reverse()
+    .join("\n    ");
+
+  return `
+    import { Component } from "@geajs/core";
+    import Page from ${JSON.stringify(pageFile)};
+    ${layoutImports}
+
+    const data = window.__FIYUU_DATA__ ?? null;
+    const route = window.__FIYUU_ROUTE__ ?? "/";
+    const intent = window.__FIYUU_INTENT__ ?? "";
+    const render = window.__FIYUU_RENDER__ ?? "csr";
+    const rootElement = document.getElementById("app");
+    const pageProps = { data, route, intent, render };
+    if (!(Page && Page.prototype instanceof Component)) {
+      throw new Error("Fiyuu Gea mode expects page default export to extend @geajs/core Component.");
+    }
+    let component = new Page(pageProps);
+    ${layoutWrappers}
+
+    if (rootElement) {
+      rootElement.innerHTML = "";
+      component.render(rootElement);
+
+      // Re-execute any <script> tags injected by the component.
+      // innerHTML assignment does not execute scripts — this is a browser security rule.
+      // We collect all script tags and recreate them so they run normally.
+      const injectedScripts = rootElement.querySelectorAll("script");
+      for (const oldScript of injectedScripts) {
+        const newScript = document.createElement("script");
+        for (const attr of oldScript.attributes) {
+          newScript.setAttribute(attr.name, attr.value);
+        }
+        newScript.textContent = oldScript.textContent;
+        oldScript.parentNode?.replaceChild(newScript, oldScript);
+      }
+    }
+  `;
+}
+
+function resolveLayoutFiles(feature: FeatureRecord, pageFile: string): string[] {
+  const featureParts = feature.feature ? feature.feature.split("/") : [];
+  const featureDirectory = path.dirname(pageFile);
+  const appDirectory = featureParts.length > 0
+    ? path.resolve(featureDirectory, ...Array(featureParts.length).fill(".."))
+    : featureDirectory;
+  const directories = [appDirectory, ...featureParts.map((_, index) => path.join(appDirectory, ...featureParts.slice(0, index + 1)))];
+
+  return directories
+    .map((directory) => path.join(directory, "layout.tsx"))
+    .filter((layoutPath) => existsSync(layoutPath));
+}

package/src/cli.ts

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+import path from "node:path";
+import { existsSync } from "node:fs";
+import { scanApp } from "@fiyuu/core";
+import { bundleClient } from "./bundler.js";
+
+async function main(): Promise<void> {
+  const [, , command, rootDirectory] = process.argv;
+
+  if (command !== "bundle" || !rootDirectory) {
+    throw new Error("Usage: runtime bundle <rootDirectory>");
+  }
+
+  const appDirectory = resolveAppDirectory(rootDirectory);
+  const features = await scanApp(appDirectory);
+  const outputDirectory = path.join(rootDirectory, ".fiyuu", "client");
+  await bundleClient(features, outputDirectory);
+  console.log(`Bundled client assets to ${outputDirectory}`);
+}
+
+function resolveAppDirectory(rootDirectory: string): string {
+  const rootAppDirectory = path.join(rootDirectory, "app");
+  const exampleAppDirectory = path.join(rootDirectory, "examples", "basic-app", "app");
+
+  return existsSync(rootAppDirectory) ? rootAppDirectory : exampleAppDirectory;
+}
+
+main().catch((error: unknown) => {
+  console.error(error instanceof Error ? error.message : "Unknown bundle error");
+  process.exitCode = 1;
+});

package/src/{client-runtime.js → client-runtime.ts}

@@ -12,8 +12,9 @@
  *
  * Everything is accessible via window.fiyuu in page scripts.
  */
-export function buildClientRuntime(websocketPath) {
-    return `(function(){
+
+export function buildClientRuntime(websocketPath: string): string {
+  return `(function(){
 window.fiyuu = {
 
   // ── Theme ──────────────────────────────────────────────────────────────────

package/src/inspector.ts

@@ -0,0 +1,329 @@
+import { promises as fs, existsSync } from "node:fs";
+import path from "node:path";
+import type { FeatureRecord, FiyuuConfig } from "@fiyuu/core";
+
+type InsightCategory = "security" | "performance" | "design" | "architecture";
+type InsightSeverity = "low" | "medium" | "high";
+
+export interface InsightItem {
+  id: string;
+  category: InsightCategory;
+  severity: InsightSeverity;
+  title: string;
+  summary: string;
+  recommendation: string;
+  route?: string;
+  file?: string;
+  fixable: boolean;
+}
+
+export interface InsightsReport {
+  generatedAt: string;
+  summary: {
+    total: number;
+    high: number;
+    medium: number;
+    low: number;
+  };
+  items: InsightItem[];
+  assistant: {
+    mode: "rule-only";
+    status: "ready";
+    details: string;
+    suggestions: string[];
+  };
+}
+
+interface BuildInsightsOptions {
+  rootDirectory: string;
+  appDirectory: string;
+  features: FeatureRecord[];
+  config?: FiyuuConfig;
+}
+
+export async function buildInsightsReport(options: BuildInsightsOptions): Promise<InsightsReport> {
+  const items = await collectInsightItems(options);
+  const assistant = await buildAssistantOutput(options, items);
+
+  const summary = {
+    total: items.length,
+    high: items.filter((item) => item.severity === "high").length,
+    medium: items.filter((item) => item.severity === "medium").length,
+    low: items.filter((item) => item.severity === "low").length,
+  };
+
+  return {
+    generatedAt: new Date().toISOString(),
+    summary,
+    items,
+    assistant,
+  };
+}
+
+async function collectInsightItems(options: BuildInsightsOptions): Promise<InsightItem[]> {
+  const items: InsightItem[] = [];
+
+  for (const feature of options.features) {
+    items.push(...toFeatureStructureInsights(feature));
+
+    const fileEntries = Object.entries(feature.files).filter((entry): entry is [string, string] => Boolean(entry[1]));
+    for (const [, filePath] of fileEntries) {
+      const source = await readFileSafe(filePath);
+      if (!source) {
+        continue;
+      }
+
+      if (/dangerouslySetInnerHTML/.test(source)) {
+        items.push({
+          id: `security-dangerous-html-${filePath}`,
+          category: "security",
+          severity: "high",
+          title: "Potential XSS surface detected",
+          summary: "`dangerouslySetInnerHTML` is used in a route module.",
+          recommendation: "Prefer escaped rendering or sanitize content before passing HTML strings.",
+          route: feature.route,
+          file: filePath,
+          fixable: true,
+        });
+      }
+
+      if (/\beval\s*\(|new\s+Function\s*\(/.test(source)) {
+        items.push({
+          id: `security-dynamic-eval-${filePath}`,
+          category: "security",
+          severity: "high",
+          title: "Dynamic code execution detected",
+          summary: "`eval` or `new Function` appears in application logic.",
+          recommendation: "Replace dynamic execution with explicit, typed control flow.",
+          route: feature.route,
+          file: filePath,
+          fixable: true,
+        });
+      }
+
+      const lineCount = source.split(/\r?\n/).length;
+      if (lineCount > 450) {
+        items.push({
+          id: `performance-large-module-${filePath}`,
+          category: "performance",
+          severity: "medium",
+          title: "Large route module",
+          summary: `Module has ${lineCount} lines and may increase parse and hydration cost.`,
+          recommendation: "Split heavy route logic into smaller server/client helpers.",
+          route: feature.route,
+          file: filePath,
+          fixable: true,
+        });
+      }
+    }
+
+    if (feature.files["meta.ts"]) {
+      const metaSource = await readFileSafe(feature.files["meta.ts"]);
+      if (metaSource) {
+        const seoTitle = extractSeoField(metaSource, "title");
+        const seoDescription = extractSeoField(metaSource, "description");
+
+        if (!seoTitle) {
+          items.push({
+            id: `design-missing-seo-title-${feature.route}`,
+            category: "design",
+            severity: "low",
+            title: "SEO title missing in meta",
+            summary: "`meta.ts` exists but does not define `seo.title`.",
+            recommendation: "Add route-specific `seo.title` to improve previews and search snippets.",
+            route: feature.route,
+            file: feature.files["meta.ts"],
+            fixable: true,
+          });
+        } else if (seoTitle.length > 62) {
+          items.push({
+            id: `design-seo-title-length-${feature.route}`,
+            category: "design",
+            severity: "low",
+            title: "SEO title is longer than recommended",
+            summary: `Current title length is ${seoTitle.length} characters.`,
+            recommendation: "Keep seo titles around 45-60 characters to avoid truncation in SERP previews.",
+            route: feature.route,
+            file: feature.files["meta.ts"],
+            fixable: true,
+          });
+        }
+
+        if (!seoDescription) {
+          items.push({
+            id: `design-missing-seo-description-${feature.route}`,
+            category: "design",
+            severity: "medium",
+            title: "SEO description missing in meta",
+            summary: "`meta.ts` does not define `seo.description`.",
+            recommendation: "Add a concise description (90-160 chars) for better search and social previews.",
+            route: feature.route,
+            file: feature.files["meta.ts"],
+            fixable: true,
+          });
+        } else if (seoDescription.length < 80 || seoDescription.length > 170) {
+          items.push({
+            id: `design-seo-description-length-${feature.route}`,
+            category: "design",
+            severity: "low",
+            title: "SEO description length can be improved",
+            summary: `Current description length is ${seoDescription.length} characters.`,
+            recommendation: "Keep seo descriptions in the 90-160 character range for reliable previews.",
+            route: feature.route,
+            file: feature.files["meta.ts"],
+            fixable: true,
+          });
+        }
+      }
+    }
+  }
+
+  items.push(...(await collectGlobalSecurityInsights(options.appDirectory)));
+  items.push(...collectGlobalRenderInsights(options.features));
+  return dedupeInsights(items);
+}
+
+function toFeatureStructureInsights(feature: FeatureRecord): InsightItem[] {
+  const items: InsightItem[] = [];
+
+  for (const missing of feature.missingRequiredFiles) {
+    items.push({
+      id: `architecture-missing-${feature.route}-${missing}`,
+      category: "architecture",
+      severity: missing === "schema.ts" ? "high" : "medium",
+      title: `Required file missing: ${missing}`,
+      summary: `Feature ${feature.route} is missing ${missing}.`,
+      recommendation: "Complete the feature contract so tooling and AI context stay deterministic.",
+      route: feature.route,
+      file: path.join(feature.directory, missing),
+      fixable: true,
+    });
+  }
+
+  return items;
+}
+
+async function collectGlobalSecurityInsights(appDirectory: string): Promise<InsightItem[]> {
+  const items: InsightItem[] = [];
+  const middlewarePath = path.join(appDirectory, "middleware.ts");
+  if (existsSync(middlewarePath)) {
+    const middlewareSource = await readFileSafe(middlewarePath);
+    if (middlewareSource && /access-control-allow-origin["']?\s*[:,=]\s*["']\*/i.test(middlewareSource)) {
+      items.push({
+        id: "security-open-cors-middleware",
+        category: "security",
+        severity: "high",
+        title: "Wildcard CORS header in middleware",
+        summary: "Middleware appears to allow all origins globally.",
+        recommendation: "Restrict allowed origins by environment and keep credentials disabled for public origins.",
+        file: middlewarePath,
+        fixable: true,
+      });
+    }
+  }
+
+  return items;
+}
+
+function collectGlobalRenderInsights(features: FeatureRecord[]): InsightItem[] {
+  const csrCount = features.filter((feature) => feature.render === "csr").length;
+  if (features.length < 4) {
+    return [];
+  }
+
+  const ratio = csrCount / features.length;
+  if (ratio < 0.6) {
+    return [];
+  }
+
+  return [
+    {
+      id: "performance-csr-heavy",
+      category: "performance",
+      severity: ratio > 0.8 ? "high" : "medium",
+      title: "Project is CSR-heavy",
+      summary: `${csrCount}/${features.length} routes render in CSR mode.`,
+      recommendation: "Move content-driven pages to SSR where possible to reduce blank-first-paint risk.",
+      fixable: true,
+    },
+  ];
+}
+
+async function buildAssistantOutput(options: BuildInsightsOptions, items: InsightItem[]): Promise<InsightsReport["assistant"]> {
+  void options;
+  return {
+    mode: "rule-only",
+    status: "ready",
+    details: "Using deterministic project checks (no integrated model).",
+    suggestions: createRuleBasedSuggestions(items),
+  };
+}
+
+function createRuleBasedSuggestions(items: InsightItem[]): string[] {
+  if (items.length === 0) {
+    return [
+      "Run `fiyuu doctor --fix` after scaffolding new routes to keep contracts deterministic.",
+      "Keep SEO descriptions in 12-28 words and route-specific titles for stable search snippets.",
+      "Add focused tests around auth, middleware, and API routes before release builds.",
+    ];
+  }
+
+  const topItems = items
+    .slice()
+    .sort((left, right) => severityScore(right.severity) - severityScore(left.severity))
+    .slice(0, 4);
+  return [
+    ...topItems.map((item) => `${capitalize(item.category)}: ${item.recommendation}`),
+    "Use `fiyuu doctor --fix` for safe auto-fixes (SEO fields, missing execute(), fallback pages, className->class).",
+  ].slice(0, 6);
+}
+
+function dedupeInsights(items: InsightItem[]): InsightItem[] {
+  const seen = new Set<string>();
+  const output: InsightItem[] = [];
+  for (const item of items) {
+    if (seen.has(item.id)) {
+      continue;
+    }
+    seen.add(item.id);
+    output.push(item);
+  }
+  return output;
+}
+
+async function readFileSafe(filePath: string): Promise<string | null> {
+  try {
+    return await fs.readFile(filePath, "utf8");
+  } catch {
+    return null;
+  }
+}
+
+function severityScore(severity: InsightSeverity): number {
+  if (severity === "high") {
+    return 3;
+  }
+  if (severity === "medium") {
+    return 2;
+  }
+  return 1;
+}
+
+function capitalize(value: string): string {
+  return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+}
+
+function extractSeoField(source: string, field: "title" | "description"): string | null {
+  const seoBlock = source.match(/seo\s*:\s*\{([\s\S]*?)\}/m);
+  if (!seoBlock) {
+    return null;
+  }
+
+  const fieldRegex = new RegExp(`${field}\\s*:\\s*(["'\`])([\\s\\S]*?)\\1`, "m");
+  const match = seoBlock[1].match(fieldRegex);
+  if (!match) {
+    return null;
+  }
+
+  return match[2].trim() || null;
+}

package/src/{server-devtools.js → server-devtools.ts}

@@ -2,8 +2,11 @@
  * Dev-only browser script generators for the Fiyuu runtime.
  * These return inline <script> strings injected into the rendered document.
  */
-export function renderInsightsPanelScript() {
-    return `<script type="module">
+
+import type { RenderMode } from "@fiyuu/core";
+
+export function renderInsightsPanelScript(): string {
+  return `<script type="module">
 const host=document.createElement('div');
 host.style.cssText='position:fixed;left:16px;bottom:16px;z-index:9998;font:12px/1.5 ui-monospace,monospace';
 const toggle=document.createElement('button');
@@ -56,15 +59,23 @@ host.append(toggle,panel);
 document.body.append(host);
 </script>`;
 }
-export function renderUnifiedToolsScript(input) {
-    const metrics = JSON.stringify({
-        route: input.route,
-        render: input.render,
-        renderTimeMs: input.renderTimeMs,
-        warnings: input.warnings,
-        requestId: input.requestId,
-    });
-    return `<script type="module">(function(){
+
+export function renderUnifiedToolsScript(input: {
+  route: string;
+  render: RenderMode;
+  renderTimeMs: number;
+  warnings: string[];
+  requestId: string;
+}): string {
+  const metrics = JSON.stringify({
+    route: input.route,
+    render: input.render,
+    renderTimeMs: input.renderTimeMs,
+    warnings: input.warnings,
+    requestId: input.requestId,
+  });
+
+  return `<script type="module">(function(){
 const metrics=${metrics};
 const removeLegacyPanels=()=>{const old=[...document.querySelectorAll('button')].filter((button)=>button.textContent==='Fiyuu Devtools'||button.textContent==='Fiyuu Insights');for(const button of old){const host=button.closest('div');if(host&&host.parentNode){host.parentNode.removeChild(host);}}};
 removeLegacyPanels();