@ofidj/generator-fidj 1.0.9 → 1.1.0

package/generators/app/templates/typescript/app.config.json

@@ -6,6 +6,7 @@
   "localDemo": false,
   "allowAnonymous": true,
   "moduleEntry": "",
+  "moduleMount": null,
   "description": "A space to explore, with an account that puts you in control.",
   "highlights": [],
   "badges": [],

package/generators/app/templates/typescript/src/content.ts

@@ -187,8 +187,13 @@ async function action(task: () => Promise<void>) {
     render();
   }
 }
+// A person moving between screens is making history, so push an entry: Back has
+// to return to the screen before, not to whatever preceded the application.
+// Replacing is right everywhere else in this file — stripping a single-use token
+// out of the address, correcting a route the person did not choose, and clearing
+// the sign-in callback — because none of those is a place they navigated to.
 function navigate(route: string) {
-  window.history.replaceState(null, "", "#/" + route);
+  if (route !== currentRoute()) window.history.pushState(null, "", "#/" + route);
   if (!busy) render();
 }
 function moduleRoute() {
@@ -199,19 +204,60 @@ function moduleRoute() {
     ["signin", "content", "privacy", ...accountRoutes].includes(route)
   )
     return null;
-  const target = new URL(config.moduleEntry, window.location.href);
-  target.hash = window.location.hash;
-  return target.href;
+  return route;
+}
+// The mounted app starts inside this document, at this address. It used to be a
+// second document under /module/, which put a generator word in the address bar
+// and reloaded the page in the middle of signing in. Starting it here costs one
+// insertion and is not undone: the app owns the document from then on, and
+// leaving it (signing out) reloads the shell from its own address.
+let moduleStarted = false;
+function startModule() {
+  if (moduleStarted) return;
+  const mount = config.moduleMount as unknown as {
+    styles: string[];
+    scripts: Array<{ src: string; module: boolean }>;
+    markup: string;
+  } | null;
+  if (!mount) return;
+  moduleStarted = true;
+  document.body.classList.add("has-module");
+  // The app takes the whole document, not a corner of the shell's. A built
+  // single-page app positions itself against the body — Ionic, for one, fixes
+  // the body and scrolls inside its own container — so leaving the shell's
+  // header and <main> wrapper around it produces a page that cannot scroll and
+  // a second header above its own.
+  document.body.replaceChildren(
+    new Range().createContextualFragment(mount.markup),
+  );
+  for (const href of mount.styles) {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+    document.head.appendChild(link);
+  }
+  for (const script of mount.scripts) {
+    const element = document.createElement("script");
+    if (script.module) element.type = "module";
+    element.src = script.src;
+    document.body.appendChild(element);
+  }
 }
 function render() {
   if (!initialized) {
     root.innerHTML = '<p role="status">Loading your session…</p>';
     return;
   }
-  const applicationRoute = moduleRoute();
-  if (applicationRoute) {
-    root.innerHTML = '<p role="status">Opening your app…</p>';
-    window.location.replace(applicationRoute);
+  // Which of its routes need a session is the mounted app's business, not the
+  // shell's: Fidj's own console serves /pub to anyone. So any address the shell
+  // does not own is handed over as it stands.
+  if (moduleRoute()) {
+    startModule();
+    return;
+  }
+  // The mounted app has taken the document; the shell cannot draw over it.
+  if (moduleStarted) {
+    window.location.reload();
     return;
   }
   let route = currentRoute();

package/generators/app/templates/typescript/src/style.css

@@ -474,6 +474,12 @@ body.signin-view main {
   margin: 0;
   padding: 0;
 }
+/* A mounted app takes the document: the shell removes its own chrome rather
+ * than hiding it, so nothing of the shell's layout reaches the app. The class
+ * stays as the hook for anything an app's own stylesheet wants to key on. */
+body.has-module {
+  margin: 0;
+}
 /* The sign-in entry: ink panel carrying the app's identity, paper panel
  * carrying the form. It stacks below 860px, ink first. */
 .signin-shell {

package/lib/app-module.cjs

@@ -54,11 +54,9 @@ function inspectModule(source, entry = "index.html", destination) {
     }
   };
   visit(root);
-  // Address a directory rather than its index file: the generated server and
-  // any static host resolve it, and no index.html shows up in the address bar.
-  const address = file.endsWith("index.html")
-    ? file.slice(0, -"index.html".length)
-    : file;
-  return { root, file, entry: "./module/" + address + url.hash };
+  // The entry is now an address inside the shell, not a second document: the
+  // shell starts the module in place, so what it needs is the hash the module
+  // opens on. Without one there is nothing to hand over to.
+  return { root, file, entry: url.hash || "#/" };
 }
 module.exports = { inspectModule };

package/lib/module-mount.cjs

@@ -0,0 +1,61 @@
+const path = require("node:path");
+
+// A mounted app used to be a second document: the shell sent the browser to
+// /module/index.html and the person read "module" — a generator word — in the
+// address bar of their privacy console, after a full page reload in the middle
+// of signing in. Instead, read what the built app needs in order to start, and
+// let the shell start it inside its own document at its own address.
+//
+// Only the entry HTML is interpreted, and only for the three things a built
+// single-page app puts there: its stylesheets, its scripts, and the element it
+// mounts into. Anything else in that file is the build tool's business.
+function describeMount(html, file) {
+  // Relative URLs in the entry resolve against its own directory, which is where
+  // the module's files are copied. The shell addresses them from the site root.
+  const base = path.posix.join("module", path.posix.dirname(file));
+  const resolve = (url) => {
+    if (/^(?:[a-z]+:|\/\/|\/|#)/i.test(url)) return url;
+    return path.posix.normalize(path.posix.join(base, url));
+  };
+  const attribute = (tag, name) =>
+    (tag.match(new RegExp(`\\b${name}\\s*=\\s*["']([^"']*)["']`, "i")) || [])[1];
+
+  const head = html.slice(0, html.search(/<\/head>/i));
+  const body = html.slice(html.search(/<body\b[^>]*>/i)).replace(/^<body\b[^>]*>/i, "");
+
+  const styles = [];
+  for (const tag of head.match(/<link\b[^>]*>/gi) || []) {
+    const rel = (attribute(tag, "rel") || "").toLowerCase();
+    const href = attribute(tag, "href");
+    if (rel === "stylesheet" && href) styles.push(resolve(href));
+  }
+
+  const scripts = [];
+  for (const tag of html.match(/<script\b[^>]*>/gi) || []) {
+    const src = attribute(tag, "src");
+    if (!src) continue;
+    scripts.push({
+      src: resolve(src),
+      module: (attribute(tag, "type") || "").toLowerCase() === "module",
+    });
+  }
+  if (!scripts.length)
+    throw new Error(
+      "Module entry loads no script; supply a built single-page app.",
+    );
+
+  // Everything the app expects to find in the document, minus the scripts the
+  // shell adds itself once the styles are in place.
+  const markup = body
+    .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "")
+    .replace(/<\/body>[\s\S]*$/i, "")
+    .trim();
+  if (!markup)
+    throw new Error(
+      "Module entry has an empty body; supply a built single-page app.",
+    );
+
+  return { styles, scripts, markup };
+}
+
+module.exports = { describeMount };

package/lib/scaffold.cjs

@@ -1,11 +1,26 @@
 const fs = require("node:fs");
 const path = require("node:path");
 const { inspectModule } = require("./app-module.cjs");
+const { describeMount } = require("./module-mount.cjs");
 const templateRoot = path.join(
   __dirname,
   "../generators/app/templates/typescript",
 );
 
+const escapeHtml = (value) =>
+  String(value ?? "").replace(
+    /[&<>"']/g,
+    (char) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        char
+      ],
+  );
+
+// From the module entry's own directory back up to the site root, so the stub
+// left behind forwards correctly however deep the entry sits.
+const moduleRedirectRoot = (file) =>
+  (path.posix.relative(path.posix.dirname("module/" + file), ".") || ".") + "/";
+
 function scaffold(destination, options) {
   const anonymous = options.anonymous ?? true;
   if (![true, false, "true", "false"].includes(anonymous))
@@ -135,7 +150,12 @@ function scaffold(destination, options) {
     : api.href.replace(/\/$/, "");
   const configuration = {
     appId: options.appId,
-    oidcIssuer: options.oidcIssuer || null,
+    // A local build talks to the loopback API, so it must use that API's own
+    // provider: the client refuses an issuer on a different origin, and keeping
+    // the hosted one would send local sign-ins to production.
+    oidcIssuer: options.oidcIssuer
+      ? new URL("/oidc", localApi).href
+      : null,
     apiEndpoint: localApi,
     dashboardUrl: options.local ? "http://localhost:4200" : "https://fidj.ovh",
     title,
@@ -154,6 +174,7 @@ function scaffold(destination, options) {
     logo: logo ? "./brand/logo" + logo.extension : "./fidj-logo.png",
     favicon: favicon ? "./brand/favicon" + favicon.extension : "./fidj-logo.png",
     moduleEntry: appModule?.entry || "",
+    moduleMount: null,
     domain: options.domain,
   };
   if (logo || favicon) fs.mkdirSync(path.join(dir, "public/brand"), { recursive: true });
@@ -177,23 +198,30 @@ function scaffold(destination, options) {
       recursive: true,
     });
     const entryFile = path.join(dir, "public/module", appModule.file);
-    // Point back at the shell's directory, not at its index file, for the same
-    // reason the module entry does: no index.html in the address bar.
-    const toRoot =
-      path.posix.relative(
-        path.posix.dirname("module/" + appModule.file),
-        ".",
-      ) || ".";
-    const relativeSignin = toRoot + "/#/signin";
     const html = fs.readFileSync(entryFile, "utf8");
     if (!html.includes("</head>"))
       throw new Error("Module entry must have an HTML head.");
+    configuration.moduleMount = describeMount(html, appModule.file);
+    // The module's own document is no longer where the app runs — the shell
+    // starts it in place. Addresses people already have must still work, so what
+    // is left at that path forwards them, hash and all, to the same screen.
+    const toRoot = moduleRedirectRoot(appModule.file);
+    // The generated Content-Security-Policy allows scripts from this origin and
+    // no inline ones, so the forward lives in a file beside the stub rather than
+    // in a <script> block that every browser would refuse to run.
+    fs.writeFileSync(
+      path.join(path.dirname(entryFile), "moved.js"),
+      `var to=${JSON.stringify(toRoot)}+location.hash;` +
+        `var go=document.getElementById("go");if(go)go.href=to;` +
+        `location.replace(to);\n`,
+    );
     fs.writeFileSync(
       entryFile,
-      html.replace(
-        "</head>",
-        `<meta name="fidj-signin" content="${relativeSignin}"></head>`,
-      ),
+      `<!doctype html><html lang="en"><head><meta charset="utf-8">` +
+        `<title>${escapeHtml(configuration.title)}</title>` +
+        `<meta name="robots" content="noindex"></head><body>` +
+        `<p>This address moved. <a id="go" href="${toRoot}">Continue</a></p>` +
+        `<script src="moved.js"></script></body></html>\n`,
     );
   }
   fs.writeFileSync(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ofidj/generator-fidj",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "Generate a TypeScript app with Fidj sign-in, live server-side roles and per-app privacy.",
   "homepage": "https://fidj.ovh",
   "bugs": {