npm - mono-jsx-dom - Versions diffs - 0.1.1 → 0.1.3 - Mend

mono-jsx-dom 0.1.1 → 0.1.3

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

package/README.md +37 -68
package/bin/build.mjs +337 -0
package/bin/cli +18 -0
package/bin/dev.mjs +213 -0
package/bin/init.mjs +269 -0
package/jsx-runtime.mjs +55 -51
package/package.json +14 -2
package/server/index.mjs +123 -0
package/server/node-fetch-server.mjs +145 -0
package/server/workerd.mjs +76 -0
package/types/html.d.ts +9 -9
package/types/index.d.ts +8 -9
package/types/jsx-runtime.d.ts +1 -10
package/types/jsx.d.ts +30 -19
package/types/server.d.ts +23 -0
package/bin/mono-jsx-dom +0 -12
package/setup.mjs +0 -56

package/README.md CHANGED Viewed

@@ -1,62 +1,31 @@
 # 🔥 mono-jsx-dom
-![`<html>` as a `Response`](./.github/og-image.png)
+![mono-jsx-dom](./.github/og-image.png)
 > [!WARNING]
 > This library is currently under active development. The API may change at any time. Use at your own risk. Please report any issues or feature requests on the issues page.
-`mono-jsx-dom` is a JSX runtime that renders web UI with browser-specific APIs.
+`mono-jsx-dom` is a JSX runtime for building web user interface.
 - ⚡️ Use browser-specific APIs, no virtual DOM
 - 🦋 Lightweight (4KB gzipped), zero dependencies
 - 🚦 Signals as reactive primitives
 - 💡 Complete Web API TypeScript definitions
 - ⏳ Streaming rendering
+- 🔩 Builtin dev/build/deploy toolchain
 Playground: https://val.town/x/ije/mono-jsx-dom
-## Installation
+## Getting Started
-```bash
-npm install mono-jsx
-```
-## Setup JSX Runtime
-To use mono-jsx-dom as your JSX runtime, add the following configuration to your `tsconfig.json` (or `deno.json` for Deno):
-```jsonc
-{
-  "compilerOptions": {
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "jsxImportSource": "mono-jsx-dom"
-  }
-}
-```
-You can also run `mono-jsx-dom setup` to automatically add the configuration to your project:
+You can run the `mono-jsx-dom int` command to initialize a project with mono-jsx-dom boilerplate.
 ```bash
-# Node.js, Cloudflare Workers, or other node-compatible runtimes
-npx mono-jsx-dom setup
-# Deno
-deno run -A npm:mono-jsx-dom setup
+# node
+npx mono-jsx-dom init
-# Bun
-bunx mono-jsx-dom setup
-```
-You can also use the `@jsxImportSource` pragma directive to use `mono-jsx-dom` as your JSX runtime:
-```tsx
-/** @jsxImportSource mono-jsx-dom */
-function App() {
-  return <div>Hello, world!</div>;
-}
+# bun
+bunx --bun mono-jsx-dom init
 ```
 ## Usage
@@ -73,14 +42,8 @@ function App(this: FC) {
 document.body.mount(<App />);
 ```
-To run the app built with mono-jsx-dom in the browser, you need a TSX transformer to transform the TSX code to JavaScript code. For example, you can use [esbuild](https://esbuild.github.io) to transform the TSX code to JavaScript code:
-```bash
-bunx esbuild --bundle --jsx=automatic --jsx-import-source=mono-jsx-dom --platfrom=browser --format=esm --target=es2022 --outfile=app.js app.tsx
-```
 >[!TIP]
-> `mono-jsx-dom` is designed for client-side rendering, you can use [mono-jsx](https://github.com/ije/mono-jsx) to render the UI on the server side.
+> `mono-jsx-dom` is designed for client-side rendering. You can use [mono-jsx](https://github.com/ije/mono-jsx) to render the UI on the server side.
 ## Using JSX
@@ -108,9 +71,9 @@ mono-jsx-dom allows you to compose the `class` property using arrays of strings,
 />;
 ```
-### Using Pseudo Classes and Media Queries in `style`
+### Using Pseudo-Classes and Media Queries in `style`
-mono-jsx-dom supports [pseudo classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), [pseudo elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements), [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries), and [CSS nesting](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting) in the `style` property:
+mono-jsx-dom supports [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements), [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries), and [CSS nesting](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting) in the `style` property:
 ```tsx
 <a
@@ -161,7 +124,7 @@ function App(this: FC<{ show: boolean }>) {
 }
 ```
-You can also set the `viewTransition` prop a html element which contains signal children.
+You can also set the `viewTransition` prop on an HTML element that contains signal children.
 ```tsx
 function App(this: FC<{ message: string }>) {
@@ -172,7 +135,7 @@ function App(this: FC<{ message: string }>) {
 }
 ```
-You can also set the view transition name in the style property with the `viewTransition` prop set to `true`.
+You can also set the view transition name in the `style` property by setting the `viewTransition` prop to `true`.
 ```tsx
 function App(this: FC<{ message: string }>) {
@@ -278,7 +241,7 @@ function App() {
 ## Async Components
-mono-jsx-dom supports async components that return a `Promise` or an async function. With streaming rendering, async components are rendered asynchronously, allowing you to fetch data or perform other async operations before rendering the component.
+mono-jsx-dom supports async components that return a `Promise` or are declared as async functions. With streaming rendering, async components are rendered asynchronously, allowing you to fetch data or perform other async operations before rendering the component.
 ```tsx
 async function JsonViewer(props: { url: string }) {
@@ -347,7 +310,7 @@ document.body.mount(<App />);
 ## Error Handling
-You can add the `catch` prop when using a function component. This allows you to catch errors in components and display a fallback UI:
+You can add the `catch` prop to a function component. This allows you to catch errors in components and display a fallback UI:
 ```tsx
 async function Hello() {
@@ -369,11 +332,11 @@ The `catch` prop should be a function that gets the caught error as the first ar
 ## Using Signals
-mono-jsx-dom uses signals for updating the view when a signal changes. Signals are similar to React's state, but they are more lightweight and efficient. You can use signals to manage state in your components.
+mono-jsx-dom uses signals to update the view when a signal changes. Signals are similar to React's state, but they are lighter-weight and more efficient. You can use signals to manage state in your components.
 ### Using Component Signals
-You can use the `this` keyword in your components to manage signals. Signals are bound to the component instance, can be updated directly, and the view will automatically re-render when a signal changes:
+You can use the `this` keyword in your components to manage signals. Signals are bound to the component instance, can be updated directly, and automatically re-render the view when they change:
 ```tsx
 function Counter(this: FC<{ count: number }>, props: { initialCount?: number }) {
@@ -396,11 +359,11 @@ function Counter(this: FC<{ count: number }>, props: { initialCount?: number })
 }
 ```
-You can use `this.extend` to create an extended signals object. You can use getters to create derived(computed) signals.
+You can use `this.store` to create a signal store. You can use getters to create derived (computed) signals.
 ```tsx
 function App(this: FC<{ count: number }>) {
-  const counter = this.extend({
+  const counter = this.store({
     value: 0,
     // double is a derived(computed) signal
     get double() {
@@ -420,10 +383,10 @@ function App(this: FC<{ count: number }>) {
 ### Using `atom` and `store`
-mono-jsx-dom provides two functions to allows you to define global shared signals. You can use them to share signals between components.
+mono-jsx-dom provides two functions that allow you to define shared global signals. You can use them to share signals between components.
 - `atom(initValue)`: Creates an atom signal.
-- `store(initValue)`: Creates a signals.
+- `store(initValue)`: Creates a signal store.
 ```ts
 export interface Atom<T> {
@@ -497,7 +460,7 @@ function App(this: FC<{ input: string }>) {
 ### Using Effect
-You can use `this.effect` to perform side effects in components. The effect will run when the component is mounted and automatically collect used signals as dependencies, and re-run when the dependencies change.
+You can use `this.effect` to perform side effects in components. The effect runs when the component is mounted, automatically collects used signals as dependencies, and reruns when those dependencies change.
 ```tsx
 function App(this: FC<{ count: number }>) {
@@ -516,7 +479,7 @@ function App(this: FC<{ count: number }>) {
 }
 ```
-The callback function of `this.effect` can return a cleanup function that gets run once the component element has been removed via `<show>`, `<hidden>` or `<switch>` conditional rendering:
+The callback function of `this.effect` can return a cleanup function that runs once the component's element has been removed through `<show>`, `<hidden>`, or `<switch>` conditional rendering:
 ```tsx
 function Counter(this: FC<{ count: number }>) {
@@ -587,7 +550,7 @@ function App(this: FC<{ hidden: boolean }>) {
 }
 ```
-If you need `if-else` logic in JSX, use `<switch>` element instead:
+If you need `if-else` logic in JSX, use the `<switch>` element instead:
 ```tsx
 function App(this: FC<{ ok: boolean }>) {
@@ -629,7 +592,7 @@ function App(this: FC<{ lang: "en" | "zh" | "🙂" }>) {
 ### Form Input Two-way Binding
-You can use the `$value` prop to bind a signal to the value of a form input element. The `$value` prop is a two-way data binding, which means that when the input value changes, the signal will be updated, and when the signal changes, the input value will be updated.
+You can use the `$value` prop to bind a signal to the value of a form input element. The `$value` prop provides two-way data binding, which means that when the input value changes, the signal is updated, and when the signal changes, the input value is updated.
 ```tsx
 function App(this: FC<{ value: string }>) {
@@ -642,7 +605,7 @@ function App(this: FC<{ value: string }>) {
 }
 ```
-You can also use the `$checked` prop to bind a signal to the checked state of a checkbox or radio input element.
+You can also use the `$checked` prop to bind a signal to the checked state of a checkbox or radio input.
 ```tsx
 function App(this: FC<{ checked: boolean }>) {
@@ -714,20 +677,22 @@ function App(this: FC) {
 ## Using `this` in Components
-mono-jsx-dom binds a scoped signals object to `this` of your component functions. This allows you to access signals, context, and request information directly in your components.
+mono-jsx-dom binds a scoped signals object to `this` in your component functions. This allows you to access signals, context, and request information directly in your components.
 The `this` object has the following built-in properties:
-- `extend(initValue)`: Extends the signals object.
+- `atom(initValue)`: Creates an atom signal.
+- `store(initValue)`: Creates a signal store.
 - `init(initValue)`: Initializes the signals.
 - `refs`: A map of refs defined in the component.
 - `computed(fn)`: A method to create a computed signal.
-- `$(fn)`:  A shortcut for `computed(fn)`.
+- `$(fn)`: A shortcut for `computed(fn)`.
 - `effect(fn)`: A method to create side effects.
 ```ts
 type FC<Signals = {}, Refs = {}> = {
-  extend<T extends Record<string, unknown>>(initValue: T): FC<T>;
+  atom<T>(initValue: T): Atom<T>;
+  store<T extends Record<string, unknown>>(initValue: T): T;
   init(initValue: Signals): void;
   refs: Refs;
   computed<T = unknown>(fn: () => T): T;
@@ -760,3 +725,7 @@ function App(this: WithRefs<FC, { input?: HTMLInputElement }>) {
   )
 }
 ```
+## License
+MIT

package/bin/build.mjs ADDED Viewed

@@ -0,0 +1,337 @@
+// bin/build.ts
+import { cwd } from "node:process";
+import { extname, join, relative } from "node:path";
+import { lstat, readFile, writeFile } from "node:fs/promises";
+import * as esbuild from "esbuild";
+// bin/utils.ts
+import { argv, exit, stdin, stdout } from "node:process";
+import { access, mkdir } from "node:fs/promises";
+import { createInterface } from "node:readline/promises";
+function parseFlags() {
+  const flags = {};
+  const args = argv.slice(2);
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg.startsWith("--")) {
+      if (arg.includes("=")) {
+        const [key, value] = arg.split("=", 2);
+        flags[key] = value;
+      } else {
+        const nextArg = args[i + 1];
+        if (!nextArg || nextArg.startsWith("--")) {
+          flags[arg] = true;
+        } else {
+          flags[arg] = nextArg;
+          i++;
+        }
+      }
+    }
+  }
+  return flags;
+}
+async function resolveModule(filename, exts = [".tsx", ".ts", ".jsx", ".mjs", ".js"]) {
+  for (const ext of exts) {
+    const path = filename + ext;
+    if (await exists(path)) {
+      return path;
+    }
+  }
+  return null;
+}
+async function exists(filename) {
+  try {
+    await access(filename);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function ensureDir(path) {
+  try {
+    await access(path);
+  } catch {
+    await mkdir(path, { recursive: true });
+  }
+}
+// bin/build.ts
+async function run() {
+  const flags = parseFlags();
+  const start = performance.now();
+  const runtime = flags.node ?? "fetch-server";
+  await build({ runtime });
+  console.log("\x1B[32m\u2728 Build completed.\x1B[0m", "\x1B[90m(%d ms)\x1B[0m", performance.now() - start);
+}
+async function build(options) {
+  const workDir = join(cwd(), options?.dir ?? ".");
+  const outdir = join(workDir, options?.outdir ?? "dist");
+  if (!await exists(join(workDir, "index.html"))) {
+    console.error("index.html not found");
+    return;
+  }
+  const indexHTML = await paseIndexHtml(workDir);
+  let twEntryCSS = null;
+  for (const filename of Object.keys(indexHTML.entryPoints)) {
+    if (filename.endsWith(".css")) {
+      const css = await readFile(join(workDir, filename), "utf8");
+      if (css.search(/@import\s+["']tailwindcss["']/) !== -1) {
+        twEntryCSS = filename;
+        break;
+      }
+    }
+  }
+  const devServer = options?.dev;
+  const isDev = !!devServer;
+  const tw = twEntryCSS ? initTailwindBuilder(workDir, twEntryCSS) : void 0;
+  const endListeners = /* @__PURE__ */ new Set();
+  const on = (kind, callback) => {
+    if (kind === "rebuild") {
+      endListeners.add(callback);
+      return () => endListeners.delete(callback);
+    }
+    throw new Error("unknown event: " + kind);
+  };
+  const resolvePlugin = {
+    name: "resolver",
+    setup(b) {
+      b.onResolve({ filter: /\.+/ }, async ({ resolveDir, path }) => {
+        if (isUrl(path) || path.endsWith("?url")) {
+          return { path, external: true };
+        }
+        let { pathname: filename } = new URL(path, "file://" + resolveDir + "/");
+        if (filename.endsWith(".css") && tw && relative(workDir, filename) === tw.entryCSS) {
+          return { path, namespace: "tw", watchFiles: [filename] };
+        }
+        if (extname(filename) === "") {
+          if (await exists(filename) && (await lstat(filename)).isDirectory()) {
+            filename = filename + "/index";
+          }
+          const resolved = await resolveModule(filename);
+          if (resolved) {
+            filename = resolved;
+          }
+        }
+        if (filename.endsWith(".tsx") || filename.endsWith(".jsx")) {
+          await tw?.extractCandidatesFrom(filename);
+        }
+        return {};
+      });
+      b.onLoad({ filter: /\.+/, namespace: "tw" }, () => {
+        return { contents: "", loader: "css" };
+      });
+      if (isDev) {
+        b.onEnd((result) => endListeners.forEach((fn) => fn(result)));
+      }
+    }
+  };
+  const ctx = await esbuild.context({
+    absWorkingDir: workDir,
+    entryPoints: Object.keys(indexHTML.entryPoints),
+    outdir,
+    outbase: workDir,
+    splitting: true,
+    bundle: true,
+    treeShaking: true,
+    minify: true,
+    write: false,
+    sourcemap: isDev ? "linked" : void 0,
+    platform: "browser",
+    format: "esm",
+    target: options?.target ?? "es2022",
+    jsx: "automatic",
+    jsxImportSource: "mono-jsx-dom",
+    jsxDev: isDev,
+    plugins: [resolvePlugin]
+  });
+  const dispose = async () => {
+    await ctx.dispose();
+    await esbuild.stop();
+  };
+  if (isDev) {
+    devServer.signal?.addEventListener("abort", dispose);
+    devServer.onWatch?.({ indexHTML, tw, on });
+    await ctx.watch();
+    return;
+  }
+  const vfs = {};
+  const { outputFiles } = await ctx.rebuild();
+  for (const file of outputFiles) {
+    const contentType = file.path.endsWith(".js") ? "application/javascript" : "text/css";
+    const filename = relative(outdir, file.path);
+    vfs[filename] = await createVFile(indexHTML, filename, file.text, contentType);
+  }
+  if (tw) {
+    const css = await tw.build();
+    vfs[tw.entryCSS] = await createVFile(indexHTML, tw.entryCSS, css, "text/css");
+  }
+  vfs["index.html"] = await createVFile(indexHTML, "index.html", indexHTML.content, "text/html");
+  await ensureDir(outdir);
+  await writeFile(join(outdir, "build.json"), JSON.stringify(vfs, null, 2));
+  const extraJS = [
+    'import server$ from "mono-jsx-dom/server";',
+    'import buildJSON$ from "./build.json" with { type: "json" };',
+    "server$.setVFS(new Map(Object.entries(buildJSON$)));"
+  ].join("");
+  await buildServerJS(workDir, outdir, options?.runtime, extraJS);
+  await dispose();
+}
+async function buildServerJS(workDir, outdir, runtime = "fetch-server", extraJS, watch) {
+  const stdin2 = {
+    sourcefile: join(workDir, "server.js"),
+    contents: 'import server from "mono-jsx-dom/server;export default server;',
+    loader: "js"
+  };
+  for (const loader of ["ts", "tsx", "js", "jsx"]) {
+    const sourcefile = join(workDir, "server." + loader);
+    if (await exists(sourcefile)) {
+      if (runtime === "node") {
+        stdin2.sourcefile = join(workDir, "server-node.mjs");
+        stdin2.resolveDir = workDir;
+        stdin2.contents = [
+          'import { serve$ } from "mono-jsx-dom/server/node-fetch-server";',
+          'import server$ from "./server.' + loader + '";',
+          "serve$(server$);"
+        ].join("\n");
+        stdin2.loader = "js";
+      } else {
+        stdin2.sourcefile = sourcefile;
+        stdin2.contents = await readFile(sourcefile, "utf8");
+        stdin2.loader = loader;
+      }
+      break;
+    }
+  }
+  const esbOptions = {
+    stdin: stdin2,
+    absWorkingDir: workDir,
+    outfile: join(outdir, "server.mjs"),
+    bundle: true,
+    treeShaking: true,
+    minify: true,
+    write: true,
+    platform: "node",
+    format: "esm",
+    target: "es2024",
+    external: ["mono-jsx-dom/server", "mono-jsx-dom/server/node-fetch-server"]
+  };
+  if (extraJS) {
+    esbOptions.banner = { js: extraJS };
+  }
+  if (watch?.onRebuild) {
+    esbOptions.plugins = [{
+      name: "onend",
+      setup(build2) {
+        build2.onEnd((result) => {
+          watch.onRebuild(result);
+        });
+      }
+    }];
+  }
+  const ctx = await esbuild.context(esbOptions);
+  if (watch) {
+    watch.signal?.addEventListener("abort", ctx.dispose.bind(ctx));
+    await ctx.watch();
+  } else {
+    await ctx.rebuild();
+    await ctx.dispose();
+  }
+}
+function initTailwindBuilder(workDir, entryCSS) {
+  const tailwind = import("tailwindcss");
+  const oxide = import("oxide-wasm").then((m) => m.init().then(() => m));
+  const builder = {
+    entryCSS,
+    etag: null,
+    builtCSS: null,
+    files: /* @__PURE__ */ new Map(),
+    candidates: /* @__PURE__ */ new Set(),
+    compiler: null,
+    async build() {
+      if (this.builtCSS !== null) {
+        return this.builtCSS;
+      }
+      const filename = join(workDir, this.entryCSS);
+      const stats = await lstat(filename);
+      const etag = stats.mtime.getTime() + "-" + stats.size;
+      if (!this.compiler || this.etag !== etag) {
+        let entryCSS2 = await readFile(filename, "utf8");
+        this.compiler = await (await tailwind).compile(entryCSS2, {
+          async loadStylesheet(id, base) {
+            if (id === "tailwindcss") {
+              const path = join(workDir, "node_modules/tailwindcss/index.css");
+              const content = await readFile(path, "utf8");
+              return { path, base, content };
+            }
+            throw new Error("not found: " + id);
+          }
+        });
+        this.etag = etag;
+      }
+      return this.builtCSS = this.compiler.build([...this.candidates]);
+    },
+    async extractCandidatesFrom(filename) {
+      const stats = await lstat(filename);
+      const modtime = stats.mtime.getTime();
+      const prev = this.files.get(filename);
+      if (prev === void 0 || prev !== modtime) {
+        const candidates = (await oxide).extract(await readFile(filename, "utf8"));
+        for (const candidate of candidates) {
+          if (!this.candidates.has(candidate)) {
+            this.candidates.add(candidate);
+            this.builtCSS = null;
+          }
+        }
+        this.files.set(filename, modtime);
+      }
+    }
+  };
+  return builder;
+}
+async function paseIndexHtml(workDir) {
+  let content = await readFile(join(workDir, "index.html"), "utf8");
+  let entryPoints = {};
+  content = content.replace(/<link(\s[^>]*?)href="([^"]+\.css)"\s*>/g, (tag, attrs, href) => {
+    if (isUrl(href)) {
+      return tag;
+    }
+    const relativePath = relative(workDir, join(workDir, href));
+    entryPoints[relativePath] = relativePath;
+    return `<link${attrs} href="/${relativePath}">`;
+  });
+  content = content.replace(/<script(\s[^>]*?)src="([^"]+\.(ts|tsx|js|jsx|mjs))"\s*>/g, (tag, attrs, src) => {
+    if (isUrl(src)) {
+      return tag;
+    }
+    const relativePath = relative(workDir, join(workDir, src));
+    const resolvedPath = relativePath.slice(0, relativePath.lastIndexOf(".")) + ".js";
+    entryPoints[relativePath] = resolvedPath;
+    return `<script${attrs} src="/${resolvedPath}">`;
+  });
+  return { content, entryPoints };
+}
+async function createVFile(indexHTML, filename, content, contentType) {
+  const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(content));
+  const contentHash = Array.from(new Uint8Array(hash)).map((b) => b.toString(16).padStart(2, "0")).join("");
+  if (filename !== "index.html") {
+    const ext = extname(filename);
+    if (ext !== ".css" && ext !== ".js") {
+      filename = filename.slice(0, -ext.length) + ".js";
+    }
+    indexHTML.content = indexHTML.content.replace('"/' + filename + '"', '"/' + filename + "?hash=" + hash.slice(0, 8) + '"');
+  }
+  return {
+    content,
+    contentType,
+    contentHash,
+    lastModified: Date.now()
+  };
+}
+function isUrl(url) {
+  return url.startsWith("http://") || url.startsWith("https://") || url.startsWith("//");
+}
+export {
+  build,
+  buildServerJS,
+  run
+};

package/bin/cli ADDED Viewed

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+import { argv, exit } from "node:process";
+switch (argv[2]) {
+  case "init":
+    import("./init.mjs").then(command => command.run())
+    break;
+  case "dev":
+    import("./dev.mjs").then(command => command.run())
+    break;
+  case "build": {
+    import("./build.mjs").then(command => command.run( ))
+    break;
+  }
+  default:
+    exit(0);
+}