npm - @hashrock/ono - Versions diffs - 0.1.0 - Mend

@hashrock/ono 0.1.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 (10) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2025 hashrock
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,299 @@
+# Ono
+A lightweight JSX library for static site generation with UnoCSS support.
+## 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
+- Quick project initialization with templates
+- Pages directory support for multi-page sites
+- Uses TypeScript's JSX transform
+## Installation
+### Global Installation
+```bash
+npm install -g @hashrock/ono
+```
+### Local Installation
+```bash
+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
+### CLI Commands
+**Init** - Initialize a new Ono project:
+```bash
+ono init
+ono init my-project
+```
+**Build** - Build a JSX file to HTML:
+```bash
+ono build example/index.jsx
+```
+**Build Pages** - Build all pages in a directory:
+```bash
+ono build pages
+```
+**Build with Watch** - Watch for changes and rebuild automatically:
+```bash
+ono build pages --watch
+```
+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)
+**Dev Server** - Start a development server with live reload:
+```bash
+ono dev
+ono dev pages
+ono dev example/index.jsx
+```
+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
+You can specify custom options:
+```bash
+ono dev --port 8080 --output build
+```
+**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>
+  );
+}
+```
+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>
+  );
+}
+```
+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:
+```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:
+```jsx
+/** @jsxImportSource @hashrock/ono */
+```
+## Development
+### Install Dependencies
+```bash
+npm install
+```
+### Run Tests
+```bash
+npm test
+```
+### Watch Mode
+```bash
+npm run test:watch
+```
+### 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

package/package.json ADDED Viewed

@@ -0,0 +1,49 @@
+{
+  "name": "@hashrock/ono",
+  "version": "0.1.0",
+  "description": "A lightweight JSX library for static site generation with UnoCSS support",
+  "type": "module",
+  "main": "src/jsx-runtime.js",
+  "bin": {
+    "ono": "src/cli.js"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "node --test test/**/*.test.js",
+    "test:watch": "node --test --watch test/**/*.test.js"
+  },
+  "keywords": [
+    "jsx",
+    "ssg",
+    "static-site-generator",
+    "unocss",
+    "atomic-css",
+    "ono",
+    "lightweight"
+  ],
+  "author": "hashrock",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hashrock/ono.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hashrock/ono/issues"
+  },
+  "homepage": "https://github.com/hashrock/ono#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@unocss/preset-uno": "^66.5.4",
+    "unocss": "^66.5.4",
+    "ws": "^8.18.3"
+  }
+}

package/src/bundler.js ADDED Viewed

@@ -0,0 +1,73 @@
+/**
+ * Bundler - Bundle JSX files into a single executable module
+ */
+import fs from "node:fs/promises";
+import { collectDependencies } from "./resolver.js";
+import { transformJSX } from "./transformer.js";
+/**
+ * Bundle a JSX file and all its dependencies
+ * @param {string} entryFile - Absolute path to entry file
+ * @returns {Promise<string>} Bundled JavaScript code
+ */
+export async function bundle(entryFile) {
+  // Collect all dependencies
+  const { order } = await collectDependencies(entryFile);
+  const modules = [];
+  // Process each module in dependency order
+  for (let i = 0; i < order.length; i++) {
+    const filePath = order[i];
+    const isEntry = i === order.length - 1; // Last file is entry
+    // Read the file
+    const source = await fs.readFile(filePath, "utf-8");
+    // Transform JSX to JS
+    const transformed = transformJSX(source, filePath);
+    // Remove import statements (they're already resolved)
+    const withoutImports = removeImports(transformed);
+    // Remove export default from non-entry files
+    const withoutExports = isEntry ? withoutImports : removeExportDefault(withoutImports);
+    modules.push({
+      path: filePath,
+      code: withoutExports,
+      isEntry
+    });
+  }
+  // Combine all modules into one
+  const bundledCode = modules.map(m => m.code).join("\n\n");
+  return bundledCode;
+}
+/**
+ * Remove import statements from code
+ * @param {string} code - JavaScript code
+ * @returns {string} Code without imports
+ */
+function removeImports(code) {
+  // Remove import statements
+  const lines = code.split("\n");
+  const filteredLines = lines.filter(line => {
+    const trimmed = line.trim();
+    return !trimmed.startsWith("import ") && trimmed !== "import";
+  });
+  return filteredLines.join("\n");
+}
+/**
+ * Remove export default from code
+ * @param {string} code - JavaScript code
+ * @returns {string} Code without export default
+ */
+function removeExportDefault(code) {
+  return code.replace(/export\s+default\s+/g, "");
+}