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

@hashrock/ono 0.1.1 → 0.1.2

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 (13) hide show

package/README.md CHANGED Viewed

@@ -1,6 +1,17 @@
 # Ono
-A lightweight JSX library for static site generation with UnoCSS support.
+Minimalist SSG framework with JSX, powered by TypeScript's JSX transformer
+## 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
@@ -11,8 +22,9 @@ A lightweight JSX library for static site generation with UnoCSS support.
 - File watching for automatic rebuilds
 - Support for components and props
 - Integrated UnoCSS for atomic CSS generation
-- Quick project initialization with templates
 - Pages directory support for multi-page sites
+- Content collections with Markdown support
+- Dynamic routes with `[slug].jsx` pattern
 - Uses TypeScript's JSX transform
 ## Installation
@@ -31,62 +43,57 @@ npm install @hashrock/ono
 ## Quick Start
-Initialize a new project:
-```bash
-ono init my-project
-cd my-project
-npm run dev
-```
-This creates a complete project structure with:
-- `pages/` directory with example page
-- `components/` directory with Layout and Hello components
-- `public/` directory for static assets
-- UnoCSS integration pre-configured
-- Development and build scripts
-## Usage
+**Try it online**: [Ono REPL](https://hashrock.github.io/ono/) - Worker-powered JSX playground!
-### CLI Commands
-**Init** - Initialize a new Ono project:
+Or create a simple JSX file and build it:
 ```bash
-ono init
-ono init my-project
-```
+# 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** - Build a JSX file to HTML:
+# Build it
+npx @hashrock/ono build index.jsx
-```bash
-ono build example/index.jsx
+# Or start a dev server
+npx @hashrock/ono dev index.jsx
 ```
-**Build Pages** - Build all pages in a directory:
+## Usage
-```bash
-ono build pages
-```
+### CLI Commands
-**Build with Watch** - Watch for changes and rebuild automatically:
+**Build** - Build JSX files to static HTML:
 ```bash
-ono build pages --watch
+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 files to HTML
-- Watch for changes in `.jsx` files
-- Automatically rebuild when files change
-- No live reload (simple file watching)
+- 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
-ono dev pages
-ono dev example/index.jsx
+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:
@@ -96,12 +103,6 @@ This will:
 - Live reload the browser when files change
 - Generate UnoCSS automatically
-You can specify custom options:
-```bash
-ono dev --port 8080 --output build
-```
 **Help** - Show usage information:
 ```bash
@@ -236,16 +237,57 @@ 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

package/package.json CHANGED Viewed

@@ -1,9 +1,19 @@
 {
   "name": "@hashrock/ono",
-  "version": "0.1.1",
-  "description": "A lightweight JSX library for static site generation with UnoCSS support",
+  "version": "0.1.2",
+  "description": "Minimalist SSG framework with JSX, powered by TypeScript's JSX transformer",
   "type": "module",
   "main": "src/jsx-runtime.js",
+  "exports": {
+    ".": "./src/jsx-runtime.js",
+    "./jsx-runtime": "./src/jsx-runtime.js",
+    "./renderer": "./src/renderer.js",
+    "./transformer": "./src/transformer.js",
+    "./bundler": "./src/bundler.js",
+    "./content": "./src/content.js",
+    "./browser/compiler": "./src/browser/compiler.js",
+    "./browser/unocss": "./src/browser/unocss.js"
+  },
   "bin": {
     "ono": "src/cli.js"
   },
@@ -14,7 +24,10 @@
   ],
   "scripts": {
     "test": "node --test test/**/*.test.js",
-    "test:watch": "node --test --watch 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"
   },
   "keywords": [
     "jsx",
@@ -38,9 +51,10 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "devDependencies": {},
   "dependencies": {
     "@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"

package/src/browser/compiler.js ADDED Viewed

@@ -0,0 +1,253 @@
+/**
+ * Browser compiler utilities shared with the REPL worker.
+ */
+import { transformJSX } from '../transformer.js';
+import { renderToString } from '../renderer.js';
+import { h } from '../jsx-runtime.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);
+      }
+    }
+    return resolved.join('/');
+  }
+  return to;
+}
+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);
+    }
+  }
+  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;
+      }
+      return `'${exportName}': ${localName}`;
+    });
+    const exportsObject = exportEntries.length > 0 ? `{ ${exportEntries.join(', ')} }` : '{}';
+    bundledCode += `
+__modules['${filename}'] = (() => {
+  ${code}
+  return ${exportsObject};
+})();
+`;
+  }
+  bundledCode += `const __entry = __modules['${entryPoint}'];\n`;
+  return bundledCode;
+}
+function extractRenderCandidate(entryModule, entryCode) {
+  if (!entryModule || typeof entryModule !== 'object') {
+    return null;
+  }
+  const defaultExport = entryModule.default;
+  if (typeof defaultExport === 'function') {
+    return defaultExport;
+  }
+  if (defaultExport !== undefined) {
+    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 firstValue = Object.values(entryModule)[0];
+  if (firstValue !== undefined) {
+    return () => firstValue;
+  }
+  return null;
+}
+function evaluateEntryModule(bundledCode) {
+  const getEntryModule = new Function('h', `
+    ${bundledCode}
+    return __entry;
+  `);
+  return getEntryModule(h);
+}
+export async function compileProject(files, entryPoint = 'index.jsx', options = {}) {
+  const bundled = bundleModules(files, entryPoint);
+  const entryModule = evaluateEntryModule(bundled);
+  const entryCode = files[entryPoint] || '';
+  const renderCandidate = extractRenderCandidate(entryModule, entryCode);
+  if (!renderCandidate) {
+    throw new Error('Unable to determine a render function in the entry module.');
+  }
+  const vnode = renderCandidate();
+  const html = renderToString(vnode);
+  let css = '';
+  if (options.enableUno !== false) {
+    const uno = await getUnoGenerator(options.unoConfig);
+    const result = await uno.generate(html, { preflights: true });
+    css = result.css;
+  }
+  return { html, css };
+}

package/src/browser/unocss.js ADDED Viewed

@@ -0,0 +1,29 @@
+/**
+ * Lightweight UnoCSS helpers for browser environments.
+ */
+import { createGenerator } from '@unocss/core';
+import { presetUno } from '@unocss/preset-uno';
+let cachedGeneratorKey = null;
+let cachedGeneratorPromise = null;
+function serializeConfig(config = {}) {
+  try {
+    return JSON.stringify(config);
+  } catch {
+    return '__dynamic__';
+  }
+}
+export async function getUnoGenerator(config = {}) {
+  const key = serializeConfig(config);
+  if (!cachedGeneratorPromise || cachedGeneratorKey !== key) {
+    cachedGeneratorKey = key;
+    cachedGeneratorPromise = createGenerator({
+      presets: [presetUno()],
+      ...config,
+    });
+  }
+  return cachedGeneratorPromise;
+}