@hashrock/ono 0.1.3 → 0.2.0

package/README.md

@@ -0,0 +1,56 @@
+# @hashrock/ono
+
+ミニマリストなSSGフレームワーク。JSXとTypeScriptのJSXトランスフォーマーを活用。
+
+## インストール
+
+```bash
+npm install @hashrock/ono
+```
+
+## 使い方
+
+```jsx
+export default function App() {
+  return <h1>Hello, Ono!</h1>;
+}
+```
+
+```bash
+npx ono build index.jsx
+npx ono dev index.jsx
+```
+
+## 機能
+
+- JSXから静的HTMLへの変換
+- ライブリロード付き開発サーバー
+- UnoCSS統合
+- コンテンツコレクション（Markdown）
+- 動的ルート（`[slug].jsx`）
+
+## 制限事項
+
+- **React Fragmentは非対応**: `<>...</>` や `<React.Fragment>` はサポートされていません。代わりに配列や親要素でラップしてください。
+
+```jsx
+// NG: React Fragmentは使用不可
+<>
+  <div>Item 1</div>
+  <div>Item 2</div>
+</>
+
+// OK: 配列を使用
+[
+  <div>Item 1</div>,
+  <div>Item 2</div>
+]
+
+// OK: 親要素でラップ
+<div>
+  <div>Item 1</div>
+  <div>Item 2</div>
+</div>
+```
+
+詳細なドキュメントは[ルートのREADME](../../README.md)を参照してください。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashrock/ono",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Minimalist SSG framework with JSX, powered by TypeScript's JSX transformer",
   "type": "module",
   "main": "src/jsx-runtime.js",
@@ -9,8 +9,9 @@
     "./jsx-runtime": "./src/jsx-runtime.js",
     "./renderer": "./src/renderer.js",
     "./transformer": "./src/transformer.js",
+    "./parser": "./src/parser.js",
     "./bundler": "./src/bundler.js",
-    "./content": "./src/content.js",
+    "./barrels": "./src/barrels.js",
     "./browser/compiler": "./src/browser/compiler.js",
     "./browser/unocss": "./src/browser/unocss.js"
   },
@@ -23,11 +24,10 @@
     "LICENSE"
   ],
   "scripts": {
-    "test": "node --test test/**/*.test.js",
-    "test:watch": "node --test --watch test/**/*.test.js",
-    "test:snapshot": "node --test test/**/*.snapshot.test.js",
-    "test:snapshot:update": "UPDATE_SNAPSHOTS=true node --test test/**/*.snapshot.test.js",
-    "test:all": "npm run test && npm run test:snapshot"
+    "typecheck": "tsc --noEmit",
+    "test": "node --test test/*.test.js",
+    "test:watch": "node --test --watch test/*.test.js",
+    "test:update": "node --test --test-update-snapshots test/*.test.js"
   },
   "keywords": [
     "jsx",
@@ -49,14 +49,15 @@
   },
   "homepage": "https://github.com/hashrock/ono#readme",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=22.3.0"
   },
   "dependencies": {
+    "@unocss/core": "^66.5.4",
     "@unocss/preset-uno": "^66.5.4",
-    "h3": "^2.0.1-rc.5",
-    "marked": "^16.4.1",
-    "typescript": "^5.9.3",
-    "unocss": "^66.5.4",
-    "ws": "^8.18.3"
+    "@unocss/reset": "^66.5.4",
+    "typescript": "^5.9.3"
+  },
+  "devDependencies": {
+    "@types/node": "^26.1.1"
   }
 }

package/src/barrels.js

@@ -0,0 +1,230 @@
+/**
+ * Barrels - Auto-generated barrel files with type inference
+ */
+import { readdir, writeFile } from "node:fs/promises";
+import { join, basename, relative } from "node:path";
+import { importJSXModule } from "./builder.js";
+import { isJSXFile } from "./utils.js";
+
+/**
+ * Convert kebab-case or snake_case to camelCase
+ * @param {string} str - String to convert
+ * @returns {string} camelCase string
+ */
+function toCamelCase(str) {
+  return str.replace(/[-_]([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+/**
+ * Infer TypeScript type from a JavaScript value
+ * @param {unknown} value
+ * @returns {string}
+ */
+function inferType(value) {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "unknown[]";
+    // Infer from first element
+    return `${inferType(value[0])}[]`;
+  }
+  if (value instanceof Date) return "Date";
+  if (typeof value === "object") {
+    // For nested objects, use Record type
+    return "Record<string, unknown>";
+  }
+  return typeof value; // 'string' | 'number' | 'boolean'
+}
+
+/**
+ * Generate Meta type definition from collected metas
+ * @param {Array<Record<string, unknown> | null>} metas
+ */
+function generateMetaType(metas) {
+  if (metas.length === 0) return "export type Meta = Record<string, never>;";
+
+  // Collect all keys and their occurrence count
+  /** @type {Record<string, number>} */
+  const keyCounts = {};
+  /** @type {Record<string, string>} */
+  const keyTypes = {};
+
+  for (const meta of metas) {
+    if (!meta) continue;
+    for (const [key, value] of Object.entries(meta)) {
+      keyCounts[key] = (keyCounts[key] || 0) + 1;
+      // Store the first non-undefined value's type
+      if (!keyTypes[key] && value !== undefined) {
+        keyTypes[key] = inferType(value);
+      }
+    }
+  }
+
+  // Generate type fields
+  const fields = Object.entries(keyCounts)
+    .map(([key, count]) => {
+      const type = keyTypes[key] || "unknown";
+      const optional = count < metas.length;
+      return `  ${key}${optional ? "?" : ""}: ${type};`;
+    })
+    .join("\n");
+
+  return `export type Meta = {\n${fields}\n};`;
+}
+
+/**
+ * Get all entry files from a barrel directory
+ * @param {string} barrelDir - Directory to scan for barrel entries
+ * @returns {Promise<Array<{id: string, file: string, path: string}>>}
+ */
+async function getBarrelEntries(barrelDir) {
+  const entries = [];
+
+  try {
+    const files = await readdir(barrelDir, { withFileTypes: true });
+
+    for (const file of files) {
+      if (file.isFile() && isJSXFile(file.name)) {
+        const ext = file.name.endsWith(".tsx") ? ".tsx" : ".jsx";
+        const id = basename(file.name, ext);
+        entries.push({
+          id,
+          file: file.name,
+          path: join(barrelDir, file.name),
+        });
+      }
+    }
+  } catch (error) {
+    if (error.code !== "ENOENT") throw error;
+  }
+
+  return entries.sort((a, b) => a.id.localeCompare(b.id));
+}
+
+/**
+ * Load meta from an entry file by compiling and evaluating it
+ * @param {string} entryPath - Path to the entry file
+ * @returns {Promise<Record<string, unknown> | null>} Meta object or null
+ */
+async function loadMeta(entryPath) {
+  try {
+    const module = await importJSXModule(entryPath);
+    return module.meta || null;
+  } catch (error) {
+    console.warn(`Warning: Could not load meta from ${entryPath}:`, error.message);
+    return null;
+  }
+}
+
+/**
+ * Generate a barrel file for a directory
+ * @param {string} barrelDir
+ * @param {{ silent?: boolean }} [options]
+ */
+export async function generateBarrel(barrelDir, options = {}) {
+  const { silent = false } = options;
+
+  const entries = await getBarrelEntries(barrelDir);
+
+  if (entries.length === 0) {
+    return null;
+  }
+
+  // Load all metas
+  const metas = await Promise.all(
+    entries.map((entry) => loadMeta(entry.path))
+  );
+
+  // Generate type definition
+  const metaType = generateMetaType(metas);
+
+  // Generate imports with camelCase identifiers.
+  // Import first, then export the local bindings — a plain
+  // `export ... from` would not bring the names into scope for `posts`.
+  const imports = entries
+    .map((entry, idx) => {
+      const camelId = toCamelCase(entry.id);
+      const from = `'./${basename(barrelDir)}/${entry.file}'`;
+      if (metas[idx] !== null) {
+        return `import ${camelId}, { meta as ${camelId}Meta } from ${from};\nexport { ${camelId}, ${camelId}Meta };`;
+      }
+      return `import ${camelId} from ${from};\nexport { ${camelId} };`;
+    })
+    .join("\n");
+
+  // Generate entries array (keep original IDs for URL paths)
+  const entriesArray = `export const entries = [${entries.map((e) => `'${e.id}'`).join(", ")}] as const;`;
+
+  // Generate ID to component mapping
+  const mapping = entries
+    .map((entry, idx) => {
+      const camelId = toCamelCase(entry.id);
+      const hasExportedMeta = metas[idx] !== null;
+      if (hasExportedMeta) {
+        return `  '${entry.id}': { component: ${camelId}, meta: ${camelId}Meta }`;
+      }
+      return `  '${entry.id}': { component: ${camelId}, meta: null }`;
+    })
+    .join(",\n");
+  const mappingExport = `export const posts = {\n${mapping}\n};`;
+  const entryIdType = "export type EntryId = typeof entries[number];";
+
+  // Generate barrel content
+  const barrelContent = `// Auto-generated barrel file - DO NOT EDIT
+// Generated by Ono SSG
+
+${metaType}
+
+${imports}
+
+${entriesArray}
+${entryIdType}
+
+${mappingExport}
+`;
+
+  // Write barrel file
+  const barrelPath = `${barrelDir}.ts`;
+  await writeFile(barrelPath, barrelContent);
+
+  if (!silent) {
+    console.log(`  Generated: ${relative(process.cwd(), barrelPath)}`);
+  }
+
+  return barrelPath;
+}
+
+/**
+ * Generate all barrel files in a directory
+ * @param {string} barrelsRoot
+ * @param {{ silent?: boolean }} [options]
+ */
+export async function generateBarrels(barrelsRoot, options = {}) {
+  const { silent = false } = options;
+
+  try {
+    const entries = await readdir(barrelsRoot, { withFileTypes: true });
+    const results = [];
+
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        const barrelDir = join(barrelsRoot, entry.name);
+        const result = await generateBarrel(barrelDir, { silent: true });
+        if (result) {
+          results.push(result);
+        }
+      }
+    }
+
+    if (!silent && results.length > 0) {
+      console.log(`Generated ${results.length} barrel file(s)`);
+    }
+
+    return results;
+  } catch (error) {
+    if (error.code === "ENOENT") {
+      return [];
+    }
+    throw error;
+  }
+}

package/src/browser/compiler.js

@@ -1,188 +1,83 @@
 /**
- * Browser compiler utilities shared with the REPL worker.
+ * Browser compiler - shared with the REPL worker.
+ *
+ * Uses the same mini bundler as the Node build (bundler.js/parser.js).
+ * Package imports are rejected — the browser has no module resolution —
+ * and the bundle is evaluated with new Function, with the JSX runtime
+ * passed in as parameters.
  */
 
 import { transformJSX } from '../transformer.js';
 import { renderToString } from '../renderer.js';
-import { h } from '../jsx-runtime.js';
+import { h, Fragment } from '../jsx-runtime.js';
+import { bundle } from '../bundler.js';
 import { getUnoGenerator } from './unocss.js';
 
-function resolveImport(from, to) {
-  if (to.startsWith('./') || to.startsWith('../')) {
-    const fromParts = from.split('/').slice(0, -1);
-    const targetParts = to.split('/');
-    const resolved = [...fromParts];
-
-    for (const part of targetParts) {
-      if (!part || part === '.') continue;
-      if (part === '..') {
-        resolved.pop();
-      } else {
-        resolved.push(part);
-      }
+/**
+ * Join a relative specifier against the importing file's virtual path
+ * @param {string} fromId
+ * @param {string} specifier
+ */
+function resolveImport(fromId, specifier) {
+  const fromParts = fromId.split('/').slice(0, -1);
+  const targetParts = specifier.split('/');
+  const resolved = [...fromParts];
+
+  for (const part of targetParts) {
+    if (!part || part === '.') continue;
+    if (part === '..') {
+      resolved.pop();
+    } else {
+      resolved.push(part);
     }
-
-    return resolved.join('/');
   }
 
-  return to;
+  return resolved.join('/');
 }
 
-function topoSortModules(files, entryPoint) {
-  const filenames = Object.keys(files);
-  const dependencyMap = new Map();
-  const importPattern = /import\s+(?:[\s\S]+?)?from\s+['"]([^'"]+)['"]/g;
-
-  for (const filename of filenames) {
-    const source = files[filename] || '';
-    const deps = [];
-    source.replace(importPattern, (match, specifier) => {
-      const resolved = resolveImport(filename, specifier);
-      if (files[resolved]) {
-        deps.push(resolved);
-      }
-      return match;
-    });
-    dependencyMap.set(filename, deps);
-  }
-
-  const visited = new Set();
-  const order = [];
-
-  const visit = (file) => {
-    if (!files[file] || visited.has(file)) return;
-    visited.add(file);
-    const deps = dependencyMap.get(file) || [];
-    for (const dep of deps) {
-      visit(dep);
-    }
-    order.push(file);
-  };
-
-  if (entryPoint) {
-    visit(entryPoint);
-  }
-
-  for (const filename of filenames) {
-    if (!visited.has(filename)) {
-      visit(filename);
-    }
+/**
+ * @param {Record<string, string>} files
+ * @param {string} entryPoint
+ */
+async function bundleProject(files, entryPoint) {
+  if (!(entryPoint in files)) {
+    throw new Error(`Entry point '${entryPoint}' not found`);
   }
 
-  return order;
-}
-
-function bundleModules(files, entryPoint) {
-  const order = topoSortModules(files, entryPoint);
-  let bundledCode = 'const __modules = {};\n';
-
-  for (const filename of order) {
-    const transformedCode = transformJSX(files[filename], filename);
-    let code = transformedCode;
-    const exportMappings = new Map();
-
-    const addExport = (exportName, localName = exportName) => {
-      if (!exportName || exportMappings.has(exportName)) return;
-      exportMappings.set(exportName, localName);
-    };
-
-    code = code.replace(/import\s+{([^}]+)}\s+from\s+['"]([^'"]+)['"]/g, (match, imports, path) => {
-      const resolvedPath = resolveImport(filename, path);
-      const importNames = imports.split(',').map(part => part.trim()).filter(Boolean);
-
-      return importNames
-        .map(name => {
-          const [local, alias] = name.split(/\s+as\s+/).map(token => token && token.trim());
-          const localName = alias || local;
-          const exportName = local;
-          return `const ${localName} = __modules['${resolvedPath}']['${exportName}'];`;
-        })
-        .join('\n');
-    });
-
-    code = code.replace(/import\s+(\w+)\s+from\s+['"]([^'"]+)['"]/g, (match, localName, path) => {
-      const resolvedPath = resolveImport(filename, path);
-      return `const ${localName} = __modules['${resolvedPath}']['default'];`;
-    });
-
-    code = code.replace(/import\s+\*\s+as\s+(\w+)\s+from\s+['"]([^'"]+)['"]/g, (match, localName, path) => {
-      const resolvedPath = resolveImport(filename, path);
-      return `const ${localName} = __modules['${resolvedPath}'];`;
-    });
-
-    code = code.replace(/export\s+default\s+function\s+([A-Za-z_$][\w$]*)/g, (match, name) => {
-      addExport('default', name);
-      return `function ${name}`;
-    });
-
-    code = code.replace(/export\s+default\s+([A-Za-z_$][\w$]*)/g, (match, name) => {
-      addExport('default', name);
-      return `${name}`;
-    });
-
-    code = code.replace(/export\s+(const|let|var)\s+([A-Za-z_$][\w$]*)/g, (match, kind, name) => {
-      addExport(name);
-      return `${kind} ${name}`;
-    });
-
-    code = code.replace(/export\s+function\s+([A-Za-z_$][\w$]*)/g, (match, name) => {
-      addExport(name);
-      return `function ${name}`;
-    });
-
-    code = code.replace(/export\s+class\s+([A-Za-z_$][\w$]*)/g, (match, name) => {
-      addExport(name);
-      return `class ${name}`;
-    });
-
-    code = code.replace(/export\s*{\s*([^}]+)\s*};?/g, (match, names) => {
-      names
-        .split(',')
-        .map(part => part.trim())
-        .filter(Boolean)
-        .forEach(part => {
-          const [local, alias] = part.split(/\s+as\s+/).map(token => token && token.trim());
-          addExport(alias || local, local);
-        });
-      return '';
-    });
-
-    code = code.replace(/export\s*{\s*};?/g, '');
-
-    if (filename === entryPoint) {
-      const functionMatches = code.matchAll(/function\s+([A-Za-z_$][\w$]*)/g);
-      for (const match of functionMatches) {
-        const name = match[1];
-        addExport(name);
-      }
-    }
-
-    const exportEntries = Array.from(exportMappings.entries()).map(([exportName, localName]) => {
-      if (exportName === 'default') {
-        return `'default': ${localName}`;
-      }
-      if (exportName === localName) {
-        return exportName;
+  const { code } = await bundle({
+    entry: entryPoint,
+    resolve: (specifier, fromId) => {
+      const resolved = resolveImport(fromId, specifier);
+      if (!(resolved in files)) {
+        throw new Error(`Cannot find module '${specifier}' imported from '${fromId}'`);
       }
-      return `'${exportName}': ${localName}`;
-    });
-
-    const exportsObject = exportEntries.length > 0 ? `{ ${exportEntries.join(', ')} }` : '{}';
-
-    bundledCode += `
-__modules['${filename}'] = (() => {
-  ${code}
-  return ${exportsObject};
-})();
-`;
-  }
+      return resolved;
+    },
+    load: (id) => transformJSX(files[id], id),
+    onExternal: 'error',
+    exposeEntryFunctions: true,
+  });
+
+  return code;
+}
 
-  bundledCode += `const __entry = __modules['${entryPoint}'];\n`;
+/** @param {string} bundledCode */
+function evaluateEntryModule(bundledCode) {
+  const getEntryModule = new Function('h', 'Fragment', `
+    ${bundledCode}
+    return __ono_entry;
+  `);
 
-  return bundledCode;
+  return getEntryModule(h, Fragment);
 }
 
-function extractRenderCandidate(entryModule, entryCode) {
+/**
+ * Pick what to render from the entry module: the default export if there
+ * is one, otherwise the last exported function (REPL snippets usually
+ * define components and finish with an App function), otherwise any value.
+ * @param {any} entryModule
+ */
+function extractRenderCandidate(entryModule) {
   if (!entryModule || typeof entryModule !== 'object') {
     return null;
   }
@@ -195,21 +90,9 @@ function extractRenderCandidate(entryModule, entryCode) {
     return () => defaultExport;
   }
 
-  const lastCallMatch = entryCode.match(/([A-Za-z_$][\w$]*)\s*\([^)]*\)\s*$/m);
-  if (lastCallMatch) {
-    const lastCallName = lastCallMatch[1];
-    const candidate = entryModule[lastCallName];
-    if (typeof candidate === 'function') {
-      return candidate;
-    }
-    if (candidate !== undefined) {
-      return () => candidate;
-    }
-  }
-
-  const fallbackFunction = Object.values(entryModule).find(value => typeof value === 'function');
-  if (fallbackFunction) {
-    return fallbackFunction;
+  const functions = Object.values(entryModule).filter((value) => typeof value === 'function');
+  if (functions.length > 0) {
+    return functions[functions.length - 1];
   }
 
   const firstValue = Object.values(entryModule)[0];
@@ -220,20 +103,15 @@ function extractRenderCandidate(entryModule, entryCode) {
   return null;
 }
 
-function evaluateEntryModule(bundledCode) {
-  const getEntryModule = new Function('h', `
-    ${bundledCode}
-    return __entry;
-  `);
-
-  return getEntryModule(h);
-}
-
+/**
+ * @param {Record<string, string>} files
+ * @param {string} entryPoint
+ * @param {{ enableUno?: boolean, unoConfig?: any }} [options]
+ */
 export async function compileProject(files, entryPoint = 'index.jsx', options = {}) {
-  const bundled = bundleModules(files, entryPoint);
+  const bundled = await bundleProject(files, entryPoint);
   const entryModule = evaluateEntryModule(bundled);
-  const entryCode = files[entryPoint] || '';
-  const renderCandidate = extractRenderCandidate(entryModule, entryCode);
+  const renderCandidate = extractRenderCandidate(entryModule);
 
   if (!renderCandidate) {
     throw new Error('Unable to determine a render function in the entry module.');

package/src/browser/unocss.js

@@ -5,9 +5,12 @@
 import { createGenerator } from '@unocss/core';
 import { presetUno } from '@unocss/preset-uno';
 
+/** @type {string | null} */
 let cachedGeneratorKey = null;
+/** @type {Promise<any> | null} */
 let cachedGeneratorPromise = null;
 
+/** @param {object} [config] */
 function serializeConfig(config = {}) {
   try {
     return JSON.stringify(config);
@@ -16,12 +19,13 @@ function serializeConfig(config = {}) {
   }
 }
 
+/** @param {object} [config] */
 export async function getUnoGenerator(config = {}) {
   const key = serializeConfig(config);
   if (!cachedGeneratorPromise || cachedGeneratorKey !== key) {
     cachedGeneratorKey = key;
     cachedGeneratorPromise = createGenerator({
-      presets: [presetUno()],
+      presets: [/** @type {any} */ (presetUno())],
       ...config,
     });
   }