npm - nodality - Versions diffs - 1.0.165 → 1.0.167 - Mend

nodality 1.0.165 → 1.0.167

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

package/bin/nodality.js +279 -8
package/dist/bundle.umd.js +1 -1
package/dist/finalresult.esm.js +1 -1
package/dist/index.cjs.js +1 -1
package/dist/index.esm.js +1 -1
package/layout/animator.js +1 -1
package/layout/audio.js +1 -1
package/layout/audionew.js +1 -1
package/layout/base-2.js +1 -1
package/layout/base.js +1 -1
package/layout/beta-desktop-bar.js +1 -1
package/layout/beta-mobile-bar.js +1 -1
package/layout/box.js +1 -1
package/layout/button.js +1 -1
package/layout/cards.js +1 -1
package/layout/center.js +1 -1
package/layout/checkbox.js +1 -1
package/layout/circle.js +1 -1
package/layout/clean-row.js +1 -1
package/layout/code.js +1 -1
package/layout/container.js +1 -1
package/layout/custom.js +1 -1
package/layout/div-image.js +1 -1
package/layout/dropdown-2025.js +1 -1
package/layout/dropdown.js +1 -1
package/layout/empty-element.js +1 -1
package/layout/external-stylesheet.js +1 -1
package/layout/flex-card.js +1 -1
package/layout/flex-grid.js +1 -1
package/layout/flex-row.js +1 -1
package/layout/footer.js +1 -1
package/layout/form-components/custom.js +1 -1
package/layout/form-components/data-list.js +1 -1
package/layout/form-components/floating-input.js +1 -1
package/layout/form-components/form-all.js +1 -1
package/layout/form-components/form.js +1 -1
package/layout/form-components/image-picker.js +1 -1
package/layout/form-components/picker.js +1 -1
package/layout/form-components/radio.js +1 -1
package/layout/form-components/radiogroup.js +1 -1
package/layout/form-components/range.js +1 -1
package/layout/free.js +1 -1
package/layout/grid-new.js +1 -1
package/layout/grid-switcher.js +1 -1
package/layout/grid.js +1 -1
package/layout/group.js +1 -1
package/layout/header.js +1 -1
package/layout/horizontal-scroller.js +1 -1
package/layout/image-old.js +1 -1
package/layout/image.js +1 -1
package/layout/index.js +14 -2
package/layout/label.js +1 -1
package/layout/link.js +1 -1
package/layout/list-OLD.js +1 -1
package/layout/list.js +1 -1
package/layout/meta-adder.js +1 -1
package/layout/modal-2025.js +1 -1
package/layout/modernwrap.js +1 -1
package/layout/multiswitcher.js +1 -1
package/layout/multiswitcherBeta.js +1 -1
package/layout/nav-bar.js +1 -1
package/layout/nav-factor/custom-div.js +1 -1
package/layout/navBar-OLD.js +1 -1
package/layout/new-flat-adder.js +1 -1
package/layout/new-nav-bar.js +1 -1
package/layout/offset-container.js +1 -1
package/layout/polygon.js +1 -1
package/layout/prerender-site.js +1 -1
package/layout/prerender.js +1 -1
package/layout/progress.js +1 -1
package/layout/row.js +1 -1
package/layout/saved-new-nav-bar.js +1 -1
package/layout/scroll-video.js +1 -1
package/layout/side-bar.js +1 -1
package/layout/side-nav-bar.js +1 -1
package/layout/simple-bar.js +1 -1
package/layout/slider-2025.js +1 -1
package/layout/spacer.js +1 -1
package/layout/stack.js +1 -1
package/layout/styler.js +1 -1
package/layout/svg.js +1 -1
package/layout/switcher.js +1 -1
package/layout/table.js +1 -1
package/layout/text-field.js +1 -1
package/layout/text.js +1 -1
package/layout/ulist.js +1 -1
package/layout/video.js +1 -1
package/layout/without-new.js +1 -1
package/layout/wrap.js +1 -1
package/layout/zoom-card.js +1 -1
package/lib/card-getter.js +1 -1
package/lib/designer.js +1 -1
package/lib/element-mapper.js +1 -1
package/lib/keyframe-animation.js +1 -1
package/lib/link-getter.js +1 -1
package/lib/scroll-video.js +1 -1
package/lib/stacker.js +1 -1
package/lib/theme.js +1 -1
package/lib/transform-anim.js +1 -1
package/package.json +1 -1

package/bin/nodality.js CHANGED Viewed

@@ -40,6 +40,9 @@ function showUsage() {
   console.log(`Usage:
   nodality prerender [flags]                  # SSG: render upload/*.html in place
   nodality compile [src/<file>.js] [flags]    # Emit Designer output as a companion file
+  nodality fanout                             # Generate per-item pages from JSON (reads
+                                              # the \`fanout\` block in nodality.config.json;
+                                              # runs automatically before \`prerender\`)
   nodality help
 Compile flags:
@@ -162,6 +165,218 @@ function loadConfigFile(cwd) {
   }
 }
+// ─── Fanout (data-driven page expansion) ────────────────────────
+/**
+ * Generate one HTML + entry-script pair per item in a JSON dataset.
+ * The classic use case is a "detail" template that takes a query
+ * parameter at runtime (`/detail.html?id=helix`) and the SEO problem
+ * that crawlers see an empty mount for every product. Fanout reads
+ * the data once at build time, walks an array within it, and writes
+ * a per-item static page that the prerender step then turns into
+ * fully populated HTML.
+ *
+ * Configured in `nodality.config.json`:
+ *
+ *   "fanout": [
+ *     {
+ *       "template": "detail.html",
+ *       "data":     "products.json",
+ *       "items":    "categories[].products",  // dot path with [] for flatMap
+ *       "id":       "id",                     // field on each item
+ *       "title":    "SLS3 — {name}",          // {name} = item.name, {id} etc.
+ *       "entry":    "pages/detail.js",        // exported renderDetailPage(id)
+ *       "bodyAttr": "data-product-id"         // attr on <body> for the id
+ *     }
+ *   ]
+ *
+ * Output:
+ *   • `upload/<basename>-<id>.html` — clone of the template, with
+ *     `<title>` substituted and `<body data-...="<id>">`.
+ *   • `upload/pages/<basename>-<id>.js` — thin wrapper that imports
+ *     the entry's exported renderer and invokes it with this id.
+ *
+ * Stale outputs from a previous run (orphaned products etc.) are
+ * cleaned up before regenerating. The expansion runs once at the
+ * start of `nodality prerender` whenever the config has a `fanout`
+ * block; you can also invoke it standalone via `nodality fanout`.
+ */
+function runFanout(cwd, uploadDir, fanoutConfig) {
+  if (!Array.isArray(fanoutConfig) || fanoutConfig.length === 0) return 0;
+  let totalWrote = 0;
+  for (const spec of fanoutConfig) {
+    const { template, data, items, id = "id", title, entry, bodyAttr = "data-product-id" } = spec;
+    if (!template || !data) {
+      console.warn(`[nodality] fanout: skipping spec without template/data`);
+      continue;
+    }
+    const tplPath = path.join(uploadDir, template);
+    const dataPath = path.join(uploadDir, data);
+    if (!fs.existsSync(tplPath)) {
+      console.error(`[nodality] fanout: template missing: ${template}`);
+      process.exit(1);
+    }
+    if (!fs.existsSync(dataPath)) {
+      console.error(`[nodality] fanout: data missing: ${data}`);
+      process.exit(1);
+    }
+    const json = JSON.parse(fs.readFileSync(dataPath, "utf8"));
+    const list = resolveItemsPath(json, items ?? "");
+    if (!Array.isArray(list) || list.length === 0) {
+      console.warn(`[nodality] fanout: ${data} produced no items at path "${items}"`);
+      continue;
+    }
+    const templateHtml = fs.readFileSync(tplPath, "utf8");
+    const base = path.basename(template, ".html");
+    const pagesDir = path.join(uploadDir, "pages");
+    fs.mkdirSync(pagesDir, { recursive: true });
+    // Clean stale outputs from a previous run so removing an item
+    // also removes its page. Match by prefix; original template
+    // (e.g. `detail.html` itself) is never touched.
+    for (const f of fs.readdirSync(uploadDir)) {
+      if (new RegExp(`^${escapeRegex(base)}-.+\\.html$`).test(f)) {
+        fs.unlinkSync(path.join(uploadDir, f));
+      }
+    }
+    for (const f of fs.readdirSync(pagesDir)) {
+      if (new RegExp(`^${escapeRegex(base)}-.+\\.js$`).test(f)) {
+        fs.unlinkSync(path.join(pagesDir, f));
+      }
+    }
+    // Discover the entry file to mirror per-item if not given.
+    const entryRel = entry ?? `pages/${base}.js`;
+    const entryFull = path.join(uploadDir, entryRel);
+    if (!fs.existsSync(entryFull)) {
+      console.error(`[nodality] fanout: entry script missing: ${entryRel}`);
+      process.exit(1);
+    }
+    const entryBase = path.basename(entryRel, ".js");
+    const entryDir = path.dirname(entryRel);
+    let wrote = 0;
+    for (const item of list) {
+      const itemId = item?.[id];
+      if (!itemId || !/^[A-Za-z0-9][A-Za-z0-9-_]*$/.test(String(itemId))) {
+        console.warn(`[nodality] fanout: skipping item with bad ${id}: ${JSON.stringify(itemId)}`);
+        continue;
+      }
+      // HTML: rewrite <title>, inject body data-attr, point script src
+      // at the per-item entry.
+      const resolvedTitle = title
+        ? interpolate(title, item)
+        : String(item?.name ?? itemId);
+      const escTitle = escapeHtml(resolvedTitle);
+      let html = templateHtml
+        .replace(/<title>[^<]*<\/title>/i, `<title>${escTitle}</title>`)
+        .replace(/<body(\s[^>]*)?>/i, (_, attrs = "") => {
+          const cleaned = (attrs ?? "").replace(
+            new RegExp(`\\s+${escapeRegex(bodyAttr)}="[^"]*"`),
+            "",
+          );
+          return `<body${cleaned} ${bodyAttr}="${itemId}">`;
+        });
+      // Rewrite the original `<script src=".../pages/<entryBase>.js">`
+      // to point at the per-item wrapper.
+      const srcRx = new RegExp(
+        `(<script[^>]*src=")([^"]*\\/?)${escapeRegex(entryBase)}\\.js("[^>]*>)`,
+        "i",
+      );
+      html = html.replace(srcRx, `$1$2${entryBase}-${itemId}.js$3`);
+      fs.writeFileSync(path.join(uploadDir, `${base}-${itemId}.html`), html);
+      // JS wrapper. The user's entry must export an async function
+      // named `renderDetailPage` (or, generically, the camelCase
+      // form of the basename + "Page"). We call it with the id.
+      const fnName = entryBase
+        .split(/[-_]/)
+        .map((p, i) => (i === 0 ? p : p[0].toUpperCase() + p.slice(1)))
+        .join("") + "Page"; // detail → renderDetailPage? No — detailPage
+      // To minimise convention surprises, default to the underscored
+      // `render<Pascal>Page` form too. Try both: the wrapper imports
+      // whichever the entry exports.
+      const pascal = entryBase
+        .split(/[-_]/)
+        .map((p) => p[0].toUpperCase() + p.slice(1))
+        .join("");
+      const wrapperBody = `// Auto-generated by \`nodality fanout\`.
+// Per-item entry — invokes the renderer in ${entryRel}
+// with this item's id baked in.
+import * as mod from "./${path.basename(entryRel)}";
+const fn = mod.render${pascal}Page ?? mod.${fnName} ?? mod.default;
+if (typeof fn !== "function") {
+  throw new Error(
+    "[fanout] ${entryRel} must export render${pascal}Page(id) " +
+      "(or a default async function). nodality fanout could not find one.",
+  );
+}
+await fn(${JSON.stringify(String(itemId))});
+`;
+      fs.writeFileSync(
+        path.join(pagesDir, `${entryBase}-${itemId}.js`),
+        wrapperBody,
+      );
+      wrote++;
+    }
+    console.log(`[nodality] fanout: ${template} × ${data} → ${wrote} page(s)`);
+    totalWrote += wrote;
+  }
+  return totalWrote;
+}
+/** Resolve a dot-path with `[]` segments to an array of items. */
+function resolveItemsPath(data, path) {
+  if (!path) return Array.isArray(data) ? data : [];
+  const tokens = path.split(/\.|(\[\])/).filter(Boolean);
+  let acc = data;
+  for (const tok of tokens) {
+    if (tok === "[]") {
+      if (!Array.isArray(acc)) return [];
+      continue;
+    }
+    if (Array.isArray(acc)) {
+      acc = acc.flatMap((x) => (x != null ? [x[tok]] : [])).filter((x) => x != null);
+      // After accessing a field through an array, the result is an
+      // array of values (possibly nested). Don't auto-flatten — the
+      // user can put another `[]` after if they want.
+    } else if (acc != null) {
+      acc = acc[tok];
+    } else {
+      return [];
+    }
+  }
+  return Array.isArray(acc) ? acc.flat(Infinity).filter((x) => x != null) : [];
+}
+/** Replace `{field}` in a template with item[field]. */
+function interpolate(template, item) {
+  return template.replace(/\{([^}]+)\}/g, (_, key) => {
+    const v = key.split(".").reduce((acc, k) => (acc == null ? acc : acc[k]), item);
+    return v == null ? "" : String(v);
+  });
+}
+function escapeRegex(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function escapeHtml(s) {
+  return String(s).replace(/[<>&"']/g, (c) =>
+    c === "<" ? "&lt;" : c === ">" ? "&gt;" : c === "&" ? "&amp;" : c === '"' ? "&quot;" : "&#39;",
+  );
+}
 // ─── Page auto-discovery ────────────────────────────────────────
 /**
@@ -258,6 +473,16 @@ async function runPrerender(rawArgs) {
     );
   }
+  // Data-driven page fanout. When the config declares a `fanout`
+  // block (per-product detail pages, per-article blog entries, etc.),
+  // expand it BEFORE auto-discovery so the generated HTMLs are picked
+  // up alongside the hand-written ones. Subprocess child renders skip
+  // fanout — the parent already wrote the files and re-running inside
+  // each locale would just thrash them.
+  if (!process.env.NODALITY_SSG_LOCALE && Array.isArray(fileConfig.fanout)) {
+    runFanout(cwd, uploadDir, fileConfig.fanout);
+  }
   // Explicit `pages` from config wins over auto-discovery. The
   // discovery rules (pages/<base>.js, <base>.js) can't infer
   // irregular pairs like h7-nodality's `index.html → app.js`; for
@@ -386,6 +611,34 @@ async function runCompile(rawArgs) {
     .map((line) => `${line};`)
     .join("\n\n");
+  // Derive the import list from the actual class names used in the
+  // emitted statements rather than dumping a hardcoded superset.
+  // nodality only exports a known subset of class names; importing a
+  // non-exported name (e.g. `Form`, `Polygon`) trips ESM's named-export
+  // verification at parse time and breaks the file.
+  const NODALITY_EXPORTS = new Set([
+    "ElementMapper", "Animator",
+    "Text", "Image", "Link", "FlexRow", "UINavBar",
+    "Free", "NAudio", "Progress", "Center", "Code",
+    "Stack", "Wrapper", "Svg", "MetaAdder", "Table",
+    "Dropdown", "Modal", "TextField", "Card", "Wrap",
+    "FlexGrid", "ZoomCard", "CustomDivRenderer", "SideBar",
+    "SideNav", "SimpleBar", "DesktopBar", "MobileBar",
+    "Switcher", "Spacer", "HScroller", "Checkbox", "Base",
+    "FilePickera", "Picker", "Range", "RadioGroup", "DataList",
+    "Button", "Des", "LinkStyler", "CardGen", "KeyframeAnim",
+    "TransformAnim", "Stacker", "ScrollVideo", "Theme",
+    "AreaSwitcher", "Video", "UList", "Slider",
+    "Polygon", "Circle", "FloatingInput", "Form",
+  ]);
+  const used = new Set();
+  for (const line of emitted) {
+    for (const m of line.matchAll(/\bnew\s+([A-Z]\w*)/g)) {
+      if (NODALITY_EXPORTS.has(m[1])) used.add(m[1]);
+    }
+  }
+  const importList = [...used].sort().join(", ") || "Text";
   const out = `// Auto-emitted by \`nodality compile\` from ${srcRel}.
 // This is the imperative form the Designer would have shown in the
 // \`code: true\` panel. It is a throwaway artifact — diff it against
@@ -393,14 +646,7 @@ async function runCompile(rawArgs) {
 // then refine by hand. Re-run \`nodality compile\` whenever you
 // sketch new pieces in ${srcRel}.
-import {
-  Text, Image, Link, FlexRow, FlexGrid, Wrapper, Center, Stack,
-  Card, ZoomCard, Switcher, MobileBar, DesktopBar, SideNav, UINavBar,
-  Dropdown, Modal, Table, Spacer, HScroller, Polygon, Circle, UList,
-  Free, Audio, Progress, Code, MetaAdder, TextField,
-  FloatingInput, Range, RadioGroup, Picker, FilePickera, DataList,
-  Base, Form, Button, Slider, Video, Checkbox,
-} from "nodality";
+import { ${importList} } from "nodality";
 ${body}
 `;
@@ -420,6 +666,29 @@ ${body}
   }
 }
+// ─── fanout subcommand (standalone) ────────────────────────────
+/**
+ * Run the fanout expansion standalone (without prerender) — useful
+ * for debugging the generated files before kicking off a full SSG.
+ * Reads the `fanout` block from nodality.config.json.
+ */
+async function runFanoutStandalone(rawArgs) {
+  const cwd = process.cwd();
+  const flags = parseFlags(rawArgs);
+  const fileConfig = loadConfigFile(cwd);
+  const uploadDir = path.resolve(cwd, flags.upload || fileConfig.uploadDir || "upload");
+  if (!Array.isArray(fileConfig.fanout) || fileConfig.fanout.length === 0) {
+    console.error(`[nodality] fanout: no \`fanout\` block in nodality.config.json`);
+    process.exit(1);
+  }
+  const wrote = runFanout(cwd, uploadDir, fileConfig.fanout);
+  if (wrote === 0) {
+    console.warn(`[nodality] fanout: 0 page(s) generated — check config & data`);
+  }
+}
 // ─── Dispatch ──────────────────────────────────────────────────
 async function main() {
@@ -441,6 +710,8 @@ async function main() {
     await runPrerender(rest);
   } else if (command === "compile") {
     await runCompile(rest);
+  } else if (command === "fanout") {
+    await runFanoutStandalone(rest);
   } else {
     console.error(`[nodality] Unknown command: ${command}`);
     showUsage();