@zyrab/domo-ssg 0.5.4 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zyrab/domo-ssg",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "A Static Site Generator (SSG) for Domo-based projects.",
   "main": "src/index.js",
   "type": "module",
@@ -17,16 +17,21 @@
   "author": "Zyrab",
   "license": "MIT",
   "peerDependencies": {
-    "@zyrab/domo": "^1.3.0",
-    "@zyrab/domo-og": "0.2.0",
+    "@zyrab/domo": "^1.4.0",
+    "@zyrab/domo-og": "0.2.1",
     "@zyrab/domo-router": "^0.3.1"
   },
+  "devDependencies": {
+    "esbuild": "^0.20.0",
+    "@zyrab/domo": "^1.4.0"
+  },
   "publishConfig": {
     "access": "public"
   },
   "files": [
     "src/",
-    "README"
+    "templates",
+    "README.md"
   ],
   "scripts": {
     "build": "node src/index.js",

package/src/event-extraction.js

@@ -0,0 +1,107 @@
+/**
+ * @file event_extraction.js
+ * @description Logic for extracting events, state, and references for SSG/SPA bundling.
+ */
+
+import { createHash } from "crypto";
+
+/**
+ * Normalizes a function for the client.
+ * Handlers will use 'state' and 'target' identifiers which are
+ * consistently minified by esbuild alongside the listener scope.
+ */
+function transformHandler(handlerInfo) {
+  const { type, selector, handler, name } = handlerInfo;
+  let body = "";
+  let fnSource = handler.toString();
+
+  const isExternal = handlerInfo.path !== null;
+
+  if (isExternal) {
+    // If it's a named function from an external file, we just call it.
+    body = `${name}(e${type !== "direct" ? ", target" : ""});`;
+  } else {
+    // Extract body from anonymous/inline function
+    const match =
+      fnSource.match(/^(?:async\s+)?(?:\([^)]*\)|[a-zA-Z0-9_$]+)\s*=>\s*\{?([\s\S]*?)\}?$/) ||
+      fnSource.match(/^(?:async\s+)?function\s*[^(]*\([^)]*\)\s*\{([\s\S]*)\}$/);
+    body = match ? match[1].trim() : fnSource;
+  }
+
+  // Wrap in blocks to isolate 'target'.
+  if (type === "closest") {
+    return `{\n    const target = e.target.closest("${selector}");\n    if (target) {\n      ${body}\n    }\n  }`;
+  }
+
+  if (type === "match") {
+    return `{\n    if (e.target.matches("${selector}")) {\n      const target = e.target;\n      ${body}\n    }\n  }`;
+  }
+
+  return body;
+}
+function transformRef(refInfo) {
+  const { handler, name } = refInfo;
+  let fnSource = handler.toString();
+
+  // Extract the body of the ref callback
+  const match =
+    fnSource.match(/^(?:async\s+)?(?:\([^)]*\)|[a-zA-Z0-9_$]+)\s*=>\s*\{?([\s\S]*?)\}?$/) ||
+    fnSource.match(/^(?:async\s+)?function\s*[^(]*\([^)]*\)\s*\{([\s\S]*)\}$/);
+  const body = match ? match[1].trim() : fnSource;
+
+  return `{\n    const el = document.getElementById("${refInfo.id}");\n    if (el) {\n      const callback = (el) => { ${body} };\n      callback(el);\n    }\n  }`;
+}
+
+/**
+ * Generates the ESM content for a specific element's events.
+ */
+export function generateElementScript(id, events, states, refs) {
+  const imports = new Map();
+  const listeners = [];
+  const refLogics = [];
+
+  events.forEach(({ event, handlers }) => {
+    const logicBlocks = handlers
+      .map((h) => {
+        if (h.path) {
+          if (!imports.has(h.path)) imports.set(h.path, new Set());
+          imports.get(h.path).add(h.name);
+        }
+        return transformHandler(h);
+      })
+      .join("\n    ");
+
+    // We inject the state declaration as a plain string at the top of the listener.
+    // Because esbuild parses this whole block, it will minify the identifier 'state'
+    // to the same name used in the 'logicBlocks' (e.g., const n = ...; n.toggled = ...).
+    const stateInclusion =
+      states && Object.keys(states).length
+        ? Object.entries(states)
+            .map(([key, val]) => `let ${key} = ${JSON.stringify(val)};`)
+            .join("\n")
+        : "";
+
+    listeners.push(
+      `${stateInclusion}\n  document.getElementById("${id}").addEventListener("${event}", async (e) => {${logicBlocks}\n  });`,
+    );
+  });
+  refs.forEach((r) => {
+    refLogics.push(transformRef({ ...r, id }));
+  });
+
+  let importStr = "";
+
+  for (const [path, names] of imports) {
+    importStr += `import { ${[...names].join(", ")} } from "${path}";\n`;
+  }
+  const combinedLogic = [...refLogics, ...listeners].join("\n");
+
+  return `${importStr}\n(function() {\n${combinedLogic}\n})();`;
+}
+
+/**
+ * Hash helper for caching
+ */
+export function getHash(content) {
+  return createHash("sha1").update(content).digest("hex").slice(0, 8);
+}

package/src/event-utils.js

@@ -1,177 +1,208 @@
-// src/event-utils.js
-
-import { writeFileSync, mkdirSync, existsSync } from "fs";
-import { join } from "path";
-import { createHash } from "crypto";
-
-export function generateScriptContent(events) {
-  return events
-    .map(({ id, event, handlers }) => {
-      const varSet = new Set();
-      const logicLines = [];
-      const closureFunctions = [];
-      let matchCounter = 0;
-
-      for (const { type, selector, handler } of handlers) {
-        const fnSource = handler.toString();
-        const { name, body } = destructureFunction(fnSource);
-        const vars = extractExposedVariables(body);
-        vars.forEach((v) => varSet.add(v));
-
-        if (type === "closest") {
-          const matchVar = `match${++matchCounter}`;
-          logicLines.push(`const ${matchVar} = e.target.closest("${selector}");`);
-
-          if (name) {
-            logicLines.push(`if (${matchVar}) ${name}(e, ${matchVar});`);
-            closureFunctions.push(fnSource);
-          } else {
-            const adjustedBody = body.replace(/\btarget\b/g, matchVar);
-            logicLines.push(`if (${matchVar}) {\n${indent(adjustedBody, 2)}\n}`);
-          }
-        } else if (type === "match") {
-          const matchExpr = `e.target.matches("${selector}")`;
-
-          if (name) {
-            logicLines.push(`if (${matchExpr}) ${name}(e, e.target);`);
-            closureFunctions.push(fnSource);
-          } else {
-            const adjustedBody = body.replace(/\btarget\b/g, "e.target");
-            logicLines.push(`if (${matchExpr}) {\n${indent(adjustedBody, 2)}\n}`);
-          }
-        } else if (type === "direct") {
-          logicLines.push(body);
-        }
-      }
-
-      const varsStr = [...varSet].join("\n");
-      const handlerBody = `function(e) {\n${indent(logicLines.join("\n"), 1)}\n}`;
-      const closures = closureFunctions.length ? `\n\n${closureFunctions.join("\n\n")}` : "";
-
-      return `${
-        varsStr ? varsStr + "\n\n" : ""
-      }document.getElementById("${id}").addEventListener("${event}", ${handlerBody});${closures}`;
-    })
-    .join("\n\n\n");
+import { writeFileSync, mkdirSync, existsSync, rmSync, readFileSync } from "fs";
+import { join, dirname, relative } from "path";
+import { fileURLToPath, pathToFileURL } from "url";
+import { build } from "esbuild";
+import { generateElementScript, getHash } from "./event-extraction.js";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+
+const DOMO_CLIENT_PACKAGE = "@zyrab/domo/client";
+let DOMO_CLIENT_SOURCE;
+
+try {
+  // This works across different package managers
+  DOMO_CLIENT_SOURCE = require.resolve(DOMO_CLIENT_PACKAGE);
+} catch (e) {
+  // Fallback for local dev if not linked
+  DOMO_CLIENT_SOURCE = join(__dirname, "../../domo/src/client/domo.client.js");
 }
-
-export function collectEvents(node, out = []) {
+const cache = {
+  runtime: null,
+  events: new Map(), // hash -> file
+  islands: new Map(), // hash -> file
+};
+
+/**
+ * Plugin to convert imports of 'domo' into the global 'Domo' variable
+ */
+const makeDomoExternalPlugin = {
+  name: "domo-external",
+  setup(build) {
+    // Intercept any import relating to domo
+    build.onResolve({ filter: /^domo$|^@zyrab\/domo/ }, (args) => {
+      return { path: args.path, external: true };
+    });
+  },
+};
+
+/**
+ * Traverses the Domo tree to find all elements with events or islands.
+ */
+export function collectMetadata(node, out = { events: [], islands: [] }) {
   if (!node || typeof node !== "object") return out;
+
   const el = node.element;
-  if (Array.isArray(el._events) && el._events.length > 0) {
-    out.push(...el._events);
+
+  if ((el?._events?.length > 0 || el?._refs?.length > 0) && !el?._island) {
+    out.events.push({
+      id: el._attr["data-domo-id"] || el._attr["id"],
+      events: el._events || [],
+      states: el._state || {},
+      refs: el._refs || [],
+    });
   }
 
-  if (Array.isArray(el._child)) {
+  if (el?._island) {
+    out.islands.push({
+      id: el._attr["data-domo-id"] || el._attr["id"],
+      path: el.__file,
+    });
+  }
+
+  if (Array.isArray(el?._child)) {
     for (const child of el._child) {
-      collectEvents(child, out);
+      collectMetadata(child, out);
     }
   }
 
   return out;
 }
 
-function extractExposedVariables(source) {
-  const lines = source.split("\n");
-  const injected = [];
+/**
+ * Bundle runtime (once)
+ */
+async function bundleRuntime(outputDir) {
+  if (cache.runtime) return cache.runtime;
+
+  const file = "domo.runtime.js";
+  const out = join(outputDir, "js", file);
+
+  await build({
+    entryPoints: [DOMO_CLIENT_SOURCE],
+    bundle: true,
+    minify: false,
+    format: "iife",
+    globalName: "Domo",
+    outfile: out,
+    platform: "browser",
+  });
+
+  cache.runtime = file;
+  return file;
+}
 
-  for (const line of lines) {
-    const trimmed = line.trim();
+/**
+ * Bundle event logic
+ */
+async function bundleEvents(metadata, jsDir, tempDir) {
+  if (metadata.events.length === 0) return null;
 
-    if (trimmed === "") continue;
+  const raw = metadata.events
+    .map(({ id, events, states, refs }) => generateElementScript(id, events, states, refs))
+    .join("\n\n");
 
-    if (trimmed.startsWith("// @ssg-let")) {
-      const decl = trimmed.replace("// @ssg-let", "").replace(/;$/, "").trim();
-      injected.push(`let ${decl};`);
-    } else if (trimmed.startsWith("// @ssg-const")) {
-      const decl = trimmed.replace("// @ssg-const", "").replace(/;$/, "").trim();
-      injected.push(`const ${decl};`);
-    } else if (!trimmed.startsWith("//")) {
-      break; // stop at first non-comment code line
-    }
-  }
+  const hash = getHash(raw);
+  if (cache.events.has(hash)) return cache.events.get(hash);
 
-  return injected;
-}
+  const file = `${hash}.events.js`;
+  const entry = join(tempDir, `${hash}.entry.js`);
 
-function destructureFunction(fnSource) {
-  const funcMatch = fnSource.match(/^function\s*([a-zA-Z0-9_$]*)\s*\([^)]*\)\s*\{([\s\S]*)\}$/);
-  if (funcMatch) {
-    const [, name, body] = funcMatch;
-    return { name: name.trim(), body: body.trim() };
-  }
+  writeFileSync(entry, raw, "utf8");
 
-  const arrowMatch = fnSource.match(/^\(?[a-zA-Z0-9_,\s]*\)?\s*=>\s*\{([\s\S]*)\}$/);
-  if (arrowMatch) {
-    return { name: "", body: arrowMatch[1].trim() };
-  }
+  await build({
+    entryPoints: [entry],
+    bundle: true,
+    minify: false,
+    format: "iife",
+    outfile: join(jsDir, file),
+    platform: "browser",
+  });
 
-  return { name: "", body: "" };
-}
+  rmSync(entry);
 
-function indent(str, level = 1) {
-  const pad = "  ".repeat(level);
-  return str
-    .split("\n")
-    .map((line) => pad + line)
-    .join("\n");
+  cache.events.set(hash, file);
+  return file;
 }
 
-function normalizeEventLogic(events) {
-  const blocks = [];
-
-  for (const { handlers } of events) {
-    for (const { handler } of handlers) {
-      const fnSource = handler.toString();
-      const { body } = destructureFunction(fnSource);
-      const injected = extractExposedVariables(body);
+/**
+ * Bundle islands (deduped by CONTENT, not path)
+ */
+async function bundleIslands(metadata, jsDir, tempDir) {
+  const results = [];
+  const islandsToBundle = metadata.islands.filter((i) => i.path);
+
+  await Promise.all(
+    islandsToBundle.map(async (island) => {
+      const { path: filePath, id } = island;
+      const content = readFileSync(filePath, "utf8");
+      const hash = getHash(content);
+
+      if (cache.islands.has(hash)) {
+        results.push({ path: filePath, file: cache.islands.get(hash) });
+        return;
+      }
 
-      blocks.push({
-        injected: injected.join("\n"),
-        body: normalizeCode(body),
+      const file = `${hash}.island.js`;
+      const entryPath = join(tempDir, `${hash}.island.entry.js`);
+
+      // wrapper: hydrate island at the correct element
+      const wrapper = `
+            import Island from "${filePath.replace(/\\/g, "/")}";
+
+            (function() {
+              const el = document.querySelector('[data-domo-id="${id}"]');
+              if (el) {
+                const instance = Island();
+                if (instance && instance._isDomo) {
+                  const built = instance.build();
+                  el.replaceWith(built);
+                }
+              }
+            })();
+            `;
+
+      writeFileSync(entryPath, wrapper, "utf8");
+
+      await build({
+        entryPoints: [entryPath],
+        bundle: true,
+        minify: false,
+        format: "iife",
+        outfile: join(jsDir, file),
+        platform: "browser",
+        plugins: [makeDomoExternalPlugin],
       });
-    }
-  }
 
-  // Sort to make sure logic is order-independent
-  blocks.sort((a, b) => (a.body + a.injected).localeCompare(b.body + b.injected));
+      rmSync(entryPath);
+      cache.islands.set(hash, file);
+      results.push({ path: filePath, file });
+    }),
+  );
 
-  return blocks.map(({ injected, body }) => `${injected}\n${body}`).join("\n");
+  return results;
 }
+/**
+ * Main orchestrator
+ */
+export async function writeJs(content, outputDir) {
+  const metadata = collectMetadata(content);
 
-function normalizeCode(code) {
-  return code
-    .split("\n")
-    .map((line) => line.trim())
-    .filter((line) => line && !line.startsWith("//"))
-    .join("\n");
-}
+  const hasInteractivity = metadata.events.length > 0 || metadata.islands.length > 0;
 
-function hashContent(content) {
-  return createHash("sha1").update(content).digest("hex").slice(0, 8); // short hash like '2fa4b1ab'
-}
+  if (!hasInteractivity) return null;
 
-const generatedCache = new Map(); // hash → filename
+  const jsDir = join(outputDir, "js");
+  const tempDir = join(outputDir, ".domo_temp");
 
-export function writeJs(constent, outputDir) {
-  const events = collectEvents(constent);
-  if (events.length <= 0) return;
+  if (!existsSync(jsDir)) mkdirSync(jsDir, { recursive: true });
+  if (!existsSync(tempDir)) mkdirSync(tempDir, { recursive: true });
 
-  const jsDir = join(outputDir, "js");
-  if (!existsSync(jsDir)) mkdirSync(jsDir);
-
-  const normalized = normalizeEventLogic(events);
-  const hash = hashContent(normalized);
-
-  let fileName;
-  if (generatedCache.has(hash)) {
-    fileName = generatedCache.get(hash);
-  } else {
-    fileName = `${hash}.js`;
-    const jsContent = generateScriptContent(events);
-    writeFileSync(join(jsDir, fileName), jsContent, "utf8");
-    generatedCache.set(hash, fileName);
-  }
+  const [runtime, events, islands] = await Promise.all([
+    bundleRuntime(outputDir),
+    bundleEvents(metadata, jsDir, tempDir),
+    bundleIslands(metadata, jsDir, tempDir),
+  ]);
 
-  return join(fileName);
+  return [runtime, events, ...islands.map((i) => i.file)].filter(Boolean);
 }

package/src/route-handler.js

@@ -39,13 +39,12 @@ export async function handleRoute(params, renderLayout) {
     // Render the component content
     const content = await component(props);
 
-    const embededScript = writeJs(content, outDir, path);
-
+    const bundlePath = await writeJs(content, outDir);
     const ogImage = await tryGenerateOgImage(meta, outDir, path);
 
     const fontPaths = normalizeAssets([fonts, assets.fonts]);
     const stylePaths = normalizeAssets([styles, assets.styles]);
-    const scriptPaths = normalizeAssets([embededScript, scripts, assets.scripts]);
+    const scriptPaths = normalizeAssets([bundlePath, scripts, assets.scripts]);
 
     const html = await renderLayout(content, {
       scripts: scriptPaths,

package/templates/domo.config.js

@@ -0,0 +1,17 @@
+// domo.config.js
+export default {
+  outDir: "./dist",
+  routesFile: "./routes.js",
+  layout: "./layout.js",
+  author: "Domo SSG",
+  baseUrl: "https://www.domo.zyrab.dev",
+  lang: "en",
+  theme: "auto",
+  exclude: ["js", "css", "app-ads.txt", "assets", "data"],
+  assets: {
+    scripts: ["test.js", "global.js", { href: "theme-toggle.js", preload: true }],
+    styles: [{ href: "main.css", prefetch: false }, "hoora.css"],
+    fonts: [{ href: "wohaha.woff2", preload: true }, "yasWemadeIt.woff2"],
+    favicon: "path/to/fivicon.ico",
+  },
+};

package/templates/layout.js

@@ -0,0 +1,110 @@
+import Router from "../../../packages/domo-router/src/core.js";
+import createHeader from "./header.js";
+export async function renderLayout(content, data) {
+  const {
+    title,
+    description,
+    descriptionOG,
+    scripts,
+    styles,
+    fonts,
+    favicon,
+    baseUrl,
+    canonical,
+    lang,
+    author,
+    type,
+    ogImage,
+    theme,
+  } = data;
+
+  const canonicalUrl = baseUrl + (canonical || Router.path());
+
+  const scriptTags = scripts
+    .map((file) =>
+      file.preload
+        ? `<link rel="preload" as="script" href="/js/${file.href}">
+          <script defer src="/js/${file.href}"></script>`
+        : `<script defer src="/js/${file.href || file}"></script>`
+    )
+    .join("\n");
+
+  const styleTags = styles
+    .map((style) =>
+      style.preload
+        ? `<link rel="preload" href="/css/${style.href}" as="style" onload="this.rel='stylesheet'">`
+        : `<link rel="stylesheet" href="/css/${style.href || style}">`
+    )
+    .join("\n");
+
+  const fontTags = fonts
+    .map((font) =>
+      font.preload
+        ? `<link rel="preload" href="/assets/fonts/${font.href}" as="font" type="font/woff2" crossorigin="anonymous">`
+        : `<link rel="stylesheet" href="assets/fonts/${font.href || font}">`
+    )
+    .join("\n");
+
+  const themeColor =
+    theme === "auto" || theme === "toggle"
+      ? ` <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+          <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
+          <meta name="color-scheme" content="light dark">`
+      : ` <meta name="theme-color" content="${theme === "dark" ? "#000000" : "#ffffff"}">
+          <meta name="color-scheme" content="${theme}">`;
+
+  return `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+  <meta name="description" content="${description}">
+  <meta name="author" content="${author}">
+  <meta name="robots" content="index, follow">
+  
+  <!-- Canonical -->
+  <link rel="canonical" href="${canonicalUrl}">
+
+  <!-- Social: OpenGraph -->
+  <meta property="og:title" content="${title}">
+  <meta property="og:description" content="${descriptionOG || description}">
+  <meta property="og:image" content="${ogImage}">
+  <meta property="og:url" content="${baseUrl}${Router.path()}">
+  <meta property="og:type" content="${type || "website"}">
+
+  <!-- Social: Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="${title}">
+  <meta name="twitter:description" content="${descriptionOG || description}">
+  <meta name="twitter:image" content="${ogImage}">
+
+  <!-- Favicon and Touch Icon -->
+  <link rel="icon" href="/assets/${favicon}" type="image/x-icon">
+  <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
+
+  <!-- Theme Colors -->
+  ${themeColor}
+
+  <!-- Performance -->
+  ${fontTags}
+  ${styleTags}
+
+  <!-- Privacy & Security -->
+  <meta name="referrer" content="strict-origin-when-cross-origin">
+  <meta http-equiv="Permissions-Policy" content="interest-cohort=()">
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self'">
+
+  
+  <!-- Scripts: preload or noraml injection -->
+  ${scriptTags}
+  
+</head>
+<body>
+  ${createHeader()}
+  <main>
+    ${content.build()}
+  </main>
+</body>
+</html>`;
+}

package/templates/routes.js

@@ -0,0 +1,45 @@
+import Home from "./pages/home.js";
+import About from "./pages/about.js";
+import Contacts from "./pages/contacts.js";
+import createProjects from "./pages/projects.js";
+import createProjectPage from "./components/project-page.js";
+import Error from "./pages/errot.js";
+import { loadJson } from "./load-json.js";
+
+export const routes = {
+  "/": {
+    component: Home,
+    meta: { title: "Home" },
+  },
+  "/about": {
+    component: About,
+    script: ["test.js", { href: "js-with-props.js", preload: true }],
+    style: ["test.css", { href: "css-with-props.css", preload: true }],
+    font: ["test.woff2", { href: "font-with-props.woff2", preload: true }],
+    meta: { title: "About" },
+  },
+  "/contacts": {
+    component: Contacts,
+    meta: {
+      title: "contacts",
+      description: "page description",
+      descriptionOG: "Learn more about our mission and values.",
+      canonical: "/test/canonical", //u will need this if u have highly duplicated pages. good for SEO,
+      ogImage: "/test/image.png",
+      type: "product", // this is for twitter cards to define what type of content is on page, default is webste
+    },
+  },
+  "/projects": {
+    component: createProjects,
+    meta: { title: "contacts" },
+    "/:id": {
+      routeParams: async (parentRouteName) => await loadJson(parentRouteName), // parentRouteName = projects, this is usfull in deeply nested dinmic routs
+      component: createProjectPage,
+      meta: { title: "test page" },
+    },
+  },
+  "*": {
+    component: Error,
+    meta: { title: "error" },
+  },
+};