ziex 0.1.0-dev.593 → 0.1.0-dev.606

package/README.md

@@ -81,11 +81,10 @@ const zx = @import("zx");
 ## Feature Checklist
 
 - [x] Server Side Rendering (SSR)
-    - [ ] `on`event handler
     - [x] Streaming
 - [x] Static Site Generation (SSG)
-    - [ ] `getStaticParams`, `getStaticProps`
-- [ ] Client Side Rendering (CSR) via WebAssembly (_WIP_)
+    - [x] `options.static.params`, `options.static.getParams`
+- [ ] Client Side Rendering (CSR) via WebAssembly (_Alpha_)
     - [x] Virtual DOM and diffing
     - [x] Rendering only changed nodes
     - [x] `on`event handler
@@ -128,7 +127,7 @@ const zx = @import("zx");
     - [x] Builtin TailwindCSS and Esbuild
     - [x] Command based plugin system
     - [ ] Source based plugin system
-- [ ] Context (configurable)
+- [x] Context (configurable)
     - [x] App
     - [x] Layout
     - [x] Page
@@ -149,6 +148,7 @@ const zx = @import("zx");
 - [ ] Platform
     - [x] Server
     - [x] Browser
+    - [ ] Edge Runtime (Cloudflare Workers, Vercel Function, etc)
     - [ ] iOS
     - [ ] Android
     - [ ] macOS
@@ -191,10 +191,10 @@ const zx = @import("zx");
 ## Related Projects
 
 * [Codeberg Mirror](https://codeberg.org/nurulhudaapon/zx) - ZX repository mirror on Codeberg
-* [zx-vscode](https://github.com/nurulhudaapon/zx-vscode) - Official VSCode/Cursor extension with syntax highlighting, LSP support, and auto-formatting
 * [ziex.dev](https://github.com/nurulhudaapon/zx/tree/main/site) - Official documentation site of ZX made using ZX.
 * [zx-example-portfolio](https://github.com/nurulhudaapon/zx-example-portfolio) - Demo portfolio web application built with ZX
 * [thegates.dev](https://github.com/nurulhudaapon/thegates.dev) - Example clone demonstrating ZX capabilities
+* [zx-numbers-game](https://github.com/Andrew-Velox/zx-numbers-game) - ZX numbers game
 
 ## Contributing
 

package/index.js

@@ -1,7 +1,7 @@
 // src/index.ts
 var zx = {
   name: "zx",
-  version: "0.1.0-dev.593",
+  version: "0.1.0-dev.606",
   description: "ZX is a framework for building web applications with Zig.",
   repository: "https://github.com/nurulhudaapon/zx",
   fingerprint: 14616285862371232000,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziex",
-  "version": "0.1.0-dev.593",
+  "version": "0.1.0-dev.606",
   "description": "ZX is a framework for building web applications with Zig.",
   "main": "index.js",
   "type": "module",

package/wasm/index.d.ts

@@ -61,6 +61,11 @@ export declare function init(options?: InitOptions): Promise<{
     source: WebAssembly.WebAssemblyInstantiatedSource;
     bridge: ZxBridge;
 }>;
+/** Initialize WASM with the ZX Bridge */
+export declare function edge(options?: InitOptions): Promise<{
+    source: WebAssembly.WebAssemblyInstantiatedSource;
+    bridge: ZxBridge;
+}>;
 declare global {
     interface HTMLElement {
         __zx_ref?: number;

package/wasm/index.js

@@ -435,11 +435,215 @@ class ZxBridge {
         },
         _wsClose: (wsId, code, reasonPtr, reasonLen) => {
           bridgeRef.current?.wsClose(wsId, code, reasonPtr, reasonLen);
+        },
+        _ce: (id) => {
+          const el = document.createElement(TAG_NAMES[id]);
+          return storeValueGetRef(el);
         }
       }
     };
   }
 }
+var TAG_NAMES = [
+  "aside",
+  "fragment",
+  "iframe",
+  "slot",
+  "img",
+  "html",
+  "base",
+  "head",
+  "link",
+  "meta",
+  "script",
+  "style",
+  "title",
+  "address",
+  "article",
+  "body",
+  "h1",
+  "h6",
+  "footer",
+  "header",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "hgroup",
+  "nav",
+  "section",
+  "dd",
+  "dl",
+  "dt",
+  "div",
+  "figcaption",
+  "figure",
+  "hr",
+  "li",
+  "ol",
+  "ul",
+  "menu",
+  "main",
+  "p",
+  "pre",
+  "a",
+  "abbr",
+  "b",
+  "bdi",
+  "bdo",
+  "br",
+  "cite",
+  "code",
+  "data",
+  "time",
+  "dfn",
+  "em",
+  "i",
+  "kbd",
+  "mark",
+  "q",
+  "blockquote",
+  "rp",
+  "ruby",
+  "rt",
+  "rtc",
+  "rb",
+  "s",
+  "del",
+  "ins",
+  "samp",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "u",
+  "var",
+  "wbr",
+  "area",
+  "map",
+  "audio",
+  "source",
+  "track",
+  "video",
+  "embed",
+  "object",
+  "param",
+  "canvas",
+  "noscript",
+  "caption",
+  "table",
+  "col",
+  "colgroup",
+  "tbody",
+  "tr",
+  "thead",
+  "tfoot",
+  "td",
+  "th",
+  "button",
+  "datalist",
+  "option",
+  "fieldset",
+  "label",
+  "form",
+  "input",
+  "keygen",
+  "legend",
+  "meter",
+  "optgroup",
+  "select",
+  "output",
+  "progress",
+  "textarea",
+  "details",
+  "dialog",
+  "menuitem",
+  "summary",
+  "content",
+  "element",
+  "shadow",
+  "template",
+  "acronym",
+  "applet",
+  "basefont",
+  "font",
+  "big",
+  "blink",
+  "center",
+  "command",
+  "dir",
+  "frame",
+  "frameset",
+  "isindex",
+  "listing",
+  "marquee",
+  "noembed",
+  "plaintext",
+  "spacer",
+  "strike",
+  "tt",
+  "xmp",
+  "animate",
+  "animateMotion",
+  "animateTransform",
+  "circle",
+  "clipPath",
+  "defs",
+  "desc",
+  "ellipse",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feDropShadow",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  "filter",
+  "foreignObject",
+  "g",
+  "image",
+  "line",
+  "linearGradient",
+  "marker",
+  "mask",
+  "metadata",
+  "mpath",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "set",
+  "stop",
+  "svg",
+  "switch",
+  "symbol",
+  "text",
+  "textPath",
+  "tspan",
+  "use",
+  "view"
+];
 var DELEGATED_EVENTS = [
   "click",
   "dblclick",
@@ -516,11 +720,27 @@ async function init(options = {}) {
     main();
   return { source, bridge };
 }
+async function edge(options = {}) {
+  const url = options.url ?? DEFAULT_URL;
+  const bridgeRef = { current: null };
+  const importObject = Object.assign({}, ZxBridge.createImportObject(bridgeRef), options.importObject);
+  const source = await WebAssembly.instantiateStreaming(fetch(url), importObject);
+  const { instance } = source;
+  jsz.memory = instance.exports.memory;
+  const bridge = new ZxBridge(instance.exports);
+  bridgeRef.current = bridge;
+  initEventDelegation(bridge, options.eventDelegationRoot ?? "body");
+  const main = instance.exports.main;
+  if (typeof main === "function")
+    main();
+  return { source, bridge };
+}
 export {
   storeValueGetRef,
   jsz,
   initEventDelegation,
   init,
+  edge,
   ZxBridge,
   CallbackType
 };

package/wasm/init.js

@@ -435,11 +435,215 @@ class ZxBridge {
         },
         _wsClose: (wsId, code, reasonPtr, reasonLen) => {
           bridgeRef.current?.wsClose(wsId, code, reasonPtr, reasonLen);
+        },
+        _ce: (id) => {
+          const el = document.createElement(TAG_NAMES[id]);
+          return storeValueGetRef(el);
         }
       }
     };
   }
 }
+var TAG_NAMES = [
+  "aside",
+  "fragment",
+  "iframe",
+  "slot",
+  "img",
+  "html",
+  "base",
+  "head",
+  "link",
+  "meta",
+  "script",
+  "style",
+  "title",
+  "address",
+  "article",
+  "body",
+  "h1",
+  "h6",
+  "footer",
+  "header",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "hgroup",
+  "nav",
+  "section",
+  "dd",
+  "dl",
+  "dt",
+  "div",
+  "figcaption",
+  "figure",
+  "hr",
+  "li",
+  "ol",
+  "ul",
+  "menu",
+  "main",
+  "p",
+  "pre",
+  "a",
+  "abbr",
+  "b",
+  "bdi",
+  "bdo",
+  "br",
+  "cite",
+  "code",
+  "data",
+  "time",
+  "dfn",
+  "em",
+  "i",
+  "kbd",
+  "mark",
+  "q",
+  "blockquote",
+  "rp",
+  "ruby",
+  "rt",
+  "rtc",
+  "rb",
+  "s",
+  "del",
+  "ins",
+  "samp",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "u",
+  "var",
+  "wbr",
+  "area",
+  "map",
+  "audio",
+  "source",
+  "track",
+  "video",
+  "embed",
+  "object",
+  "param",
+  "canvas",
+  "noscript",
+  "caption",
+  "table",
+  "col",
+  "colgroup",
+  "tbody",
+  "tr",
+  "thead",
+  "tfoot",
+  "td",
+  "th",
+  "button",
+  "datalist",
+  "option",
+  "fieldset",
+  "label",
+  "form",
+  "input",
+  "keygen",
+  "legend",
+  "meter",
+  "optgroup",
+  "select",
+  "output",
+  "progress",
+  "textarea",
+  "details",
+  "dialog",
+  "menuitem",
+  "summary",
+  "content",
+  "element",
+  "shadow",
+  "template",
+  "acronym",
+  "applet",
+  "basefont",
+  "font",
+  "big",
+  "blink",
+  "center",
+  "command",
+  "dir",
+  "frame",
+  "frameset",
+  "isindex",
+  "listing",
+  "marquee",
+  "noembed",
+  "plaintext",
+  "spacer",
+  "strike",
+  "tt",
+  "xmp",
+  "animate",
+  "animateMotion",
+  "animateTransform",
+  "circle",
+  "clipPath",
+  "defs",
+  "desc",
+  "ellipse",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feDropShadow",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  "filter",
+  "foreignObject",
+  "g",
+  "image",
+  "line",
+  "linearGradient",
+  "marker",
+  "mask",
+  "metadata",
+  "mpath",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "set",
+  "stop",
+  "svg",
+  "switch",
+  "symbol",
+  "text",
+  "textPath",
+  "tspan",
+  "use",
+  "view"
+];
 var DELEGATED_EVENTS = [
   "click",
   "dblclick",