npm - @hashrock/ono - Versions diffs - 0.1.2 → 0.2.0 - Mend

@hashrock/ono 0.1.2 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/README.md +35 -320
package/package.json +14 -13
package/src/barrels.js +230 -0
package/src/browser/compiler.js +71 -193
package/src/browser/unocss.js +5 -1
package/src/builder.js +110 -232
package/src/bundler.js +215 -64
package/src/cli.js +22 -191
package/src/commands/build.js +141 -0
package/src/commands/dev.js +54 -0
package/src/constants.js +74 -0
package/src/jsx-runtime.js +15 -5
package/src/parser.js +555 -0
package/src/renderer.js +29 -48
package/src/server.js +88 -74
package/src/transformer.js +1 -18
package/src/unocss.js +20 -24
package/src/utils.js +55 -0
package/src/watcher.js +98 -125
package/src/content.js +0 -272
package/src/resolver.js +0 -137

package/README.md CHANGED Viewed

@@ -1,341 +1,56 @@
-# Ono
+# @hashrock/ono
-Minimalist SSG framework with JSX, powered by TypeScript's JSX transformer
+ミニマリストなSSGフレームワーク。JSXとTypeScriptのJSXトランスフォーマーを活用。
-## Why Ono?
-Ono is designed to be a minimal alternative to Astro, leveraging TypeScript's built-in JSX transformation capabilities. The core philosophy is:
-- **Minimal Dependencies**: Uses TypeScript's standard `tsx` transform feature, avoiding complex build toolchains
-- **High Portability**: Designed to be lightweight enough to run in Web Workers or even entirely in the browser
-- **Simple Architecture**: A minimal subset of static site generation features, focusing on what matters most
-- **Future Vision**: Enable browser-based REPL experiences and client-side static site generation
-Unlike heavyweight frameworks, Ono embraces simplicity. It's perfect for developers who want the power of JSX and component-based development without the complexity of a full framework.
-## Features
-- Minimal JSX runtime for building static HTML sites
-- Built-in bundler for JSX files
-- CLI tool for building JSX to HTML
-- Development server with live reload
-- File watching for automatic rebuilds
-- Support for components and props
-- Integrated UnoCSS for atomic CSS generation
-- Pages directory support for multi-page sites
-- Content collections with Markdown support
-- Dynamic routes with `[slug].jsx` pattern
-- Uses TypeScript's JSX transform
-## Installation
-### Global Installation
-```bash
-npm install -g @hashrock/ono
-```
-### Local Installation
+## インストール
 ```bash
 npm install @hashrock/ono
 ```
-## Quick Start
-**Try it online**: [Ono REPL](https://hashrock.github.io/ono/) - Worker-powered JSX playground!
-Or create a simple JSX file and build it:
-```bash
-# Create a JSX file
-echo '/** @jsxImportSource @hashrock/ono */
-export default function App() {
-  return (
-    <html>
-      <head><title>Hello Ono</title></head>
-      <body>
-        <h1>Hello, Ono!</h1>
-      </body>
-    </html>
-  );
-}' > index.jsx
-# Build it
-npx @hashrock/ono build index.jsx
-# Or start a dev server
-npx @hashrock/ono dev index.jsx
-```
-## Usage
-### CLI Commands
-**Build** - Build JSX files to static HTML:
-```bash
-ono build                  # Build all pages in pages/ directory
-ono build pages            # Build all pages in pages/ directory
-ono build example/index.jsx # Build a single file
-ono build --output dist    # Specify output directory
-```
-This will:
-- Build your JSX file(s) to HTML
-- Copy files from `public/` directory
-- Generate UnoCSS automatically
-**Dev Server** - Start a development server with live reload:
-```bash
-ono dev                    # Start dev server for pages/ directory
-ono dev pages              # Start dev server for pages/ directory
-ono dev example/index.jsx  # Start dev server for a single file
-ono dev --port 8080        # Start dev server on custom port
-ono dev --output build     # Use custom output directory
-```
-This will:
-- Build your JSX file(s) to HTML
-- Start an HTTP server (default: http://localhost:3000)
-- Watch for changes and rebuild automatically
-- Live reload the browser when files change
-- Generate UnoCSS automatically
-**Help** - Show usage information:
-```bash
-ono --help
-```
-### JSX Example
-Create a JSX file with components:
+## 使い方
 ```jsx
-// example/index.jsx
 export default function App() {
-  return (
-    <html>
-      <head>
-        <title>My Site</title>
-      </head>
-      <body>
-        <Header title="Welcome" />
-        <main>
-          <p>Hello, Ono!</p>
-        </main>
-      </body>
-    </html>
-  );
-}
-function Header({ title }) {
-  return (
-    <header>
-      <h1>{title}</h1>
-    </header>
-  );
+  return <h1>Hello, Ono!</h1>;
 }
 ```
-Build it:
 ```bash
-ono build example/index.jsx
-```
-This generates `dist/index.html`:
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>My Site</title>
-  </head>
-  <body>
-    <header>
-      <h1>Welcome</h1>
-    </header>
-    <main>
-      <p>Hello, Ono!</p>
-    </main>
-  </body>
-</html>
-```
-### UnoCSS Integration
-Ono automatically integrates with UnoCSS. Simply use utility classes in your JSX:
-```jsx
-export default function App() {
-  return (
-    <div class="max-w-800px mx-auto p-8">
-      <h1 class="text-3xl font-bold text-blue-600">
-        Welcome to Ono
-      </h1>
-      <p class="mt-4 text-gray-700">
-        UnoCSS utilities are automatically generated!
-      </p>
-    </div>
-  );
-}
+npx ono build index.jsx
+npx ono dev index.jsx
 ```
-The CSS will be automatically generated to `dist/uno.css` and included in your HTML.
-### Custom UnoCSS Configuration
+## 機能
-Create a `uno.config.js` file in your project root:
+- JSXから静的HTMLへの変換
+- ライブリロード付き開発サーバー
+- UnoCSS統合
+- コンテンツコレクション（Markdown）
+- 動的ルート（`[slug].jsx`）
-```javascript
-import { presetUno } from "unocss";
-export default {
-  presets: [presetUno()],
-  theme: {
-    colors: {
-      primary: "#0070f3",
-    },
-  },
-  shortcuts: {
-    "btn": "px-4 py-2 rounded bg-primary text-white",
-  },
-};
-```
+## 制限事項
-## Configuration
-### TypeScript/JSX Setup
-Add to your `tsconfig.json`:
-```json
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "@hashrock/ono"
-  }
-}
-```
-Or use JSDoc comments in your `.jsx` files:
+- **React Fragmentは非対応**: `<>...</>` や `<React.Fragment>` はサポートされていません。代わりに配列や親要素でラップしてください。
 ```jsx
-/** @jsxImportSource @hashrock/ono */
-```
-## Development
-### Install Dependencies
-```bash
-npm install
-```
-### Run Tests
-Run all unit tests:
-```bash
-npm test
-```
-Run snapshot tests:
-```bash
-npm run test:snapshot
-```
-Run all tests (unit + snapshot):
-```bash
-npm run test:all
-```
-Update snapshots after intentional changes:
-```bash
-npm run test:snapshot:update
-```
-### Watch Mode
-```bash
-npm run test:watch
-```
-### Testing Strategy
-This project uses a comprehensive testing approach:
-- **Unit Tests**: Traditional assertion-based tests for core functionality
-- **Snapshot Tests**: Capture and verify output consistency for HTML rendering, JSX transformation, and CLI commands
-- **Integration Tests**: End-to-end testing of build processes and content collections
-For more details about snapshot testing, see [SNAPSHOT_TESTING.md](./SNAPSHOT_TESTING.md).
-### Continuous Integration
-This project uses GitHub Actions for automated testing. The CI pipeline:
-- Tests on Node.js 22.x with Ubuntu
-- Runs comprehensive unit and snapshot tests
-- Validates CLI commands and build processes
-- Ensures output consistency across environments
-See `.github/workflows/ci.yml` for the full configuration
-### Link for Local Development
-```bash
-npm link
-```
-This allows you to use the `ono` command globally while developing.
-## API
-### JSX Runtime
-```javascript
-import { createElement } from '@hashrock/ono/jsx-runtime';
-```
-The JSX runtime automatically handles JSX transformation when using TypeScript or Babel.
-### Renderer
-```javascript
-import { renderToString } from '@hashrock/ono';
-const html = renderToString(<div>Hello</div>);
-```
-### Bundler
-```javascript
-import { bundle } from '@hashrock/ono';
-const code = await bundle('./path/to/file.jsx');
-```
-## Pages Mode
-Ono supports building multi-page sites by placing JSX files in a `pages/` directory:
-```
-pages/
-├── index.jsx          → dist/index.html
-├── about.jsx          → dist/about.html
-└── blog/
-    └── first-post.jsx → dist/blog/first-post.html
-```
-Each file should export a default function that returns a complete HTML document. Use the Layout component pattern for shared structure across pages.
-## License
-MIT
+// 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hashrock/ono",
-  "version": "0.1.2",
+  "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 ADDED Viewed

@@ -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;
+  }
+}