feat: public private routing

.github/workflows/checks.yml

@@ -122,7 +122,6 @@ jobs:
     defaults:
       run:
         shell: bash
-        working-directory: ./frontend
     env:
       DFX_NETWORK: mainnet
 
@@ -133,26 +132,31 @@ jobs:
       - name: Install dfx
         run: DFX_VERSION="$(jq -r .dfx dfx.json)" sh -ci "$(curl -fsSL https://sdk.dfinity.org/install.sh)"
 
+      - name: Provide a config
+        run: ./config.sh
+
       - name: Install dependencies
         run: npm ci
+        working-directory: ./frontend
 
       - name: Compile typescript
         run: npm run build
+        working-directory: ./frontend
 
       # Temporarily disabled:
       #- name: Run linter
       #  run: npm run check
 
       - name: Test
         run: npm run test
+        working-directory: ./frontend
 
   svelte-lint:
     needs: formatting
     runs-on: ubuntu-20.04
     defaults:
       run:
         shell: bash
-        working-directory: ./frontend
     env:
       DFX_NETWORK: mainnet
 
@@ -163,14 +167,20 @@ jobs:
       - name: Install dfx
         run: DFX_VERSION="$(jq -r .dfx dfx.json)" sh -ci "$(curl -fsSL https://sdk.dfinity.org/install.sh)"
 
+      - name: Provide a config
+        run: ./config.sh
+
       - name: Install dependencies
         run: npm ci
+        working-directory: ./frontend
 
       - name: Compile typescript
         run: npm run build
+        working-directory: ./frontend
 
       - name: Run linter
         run: npm run check
+        working-directory: ./frontend
 
   e2e-lint:
     needs: formatting

frontend/__mocks__/$app/environment.ts

@@ -1 +1,2 @@
 export const browser = false;
+export const prerendering = false;

frontend/__mocks__/$app/navigation.ts

@@ -0,0 +1,28 @@
+import { page } from "./stores";
+
+export const goto = async (
+  url: string | URL,
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+  opts?: {
+    replaceState?: boolean;
+    noscroll?: boolean;
+    keepfocus?: boolean;
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    state?: any;
+  }
+): Promise<void> => {
+  const { search, pathname: routeId } =
+    url instanceof URL ? url : new URL(`http://localhost:8080${url}`);
+
+  const { u: universe, ...rest }: Record<string, string> = Object.fromEntries(
+    new URLSearchParams(search)
+  );
+
+  page.mock({
+    data: {
+      universe,
+      ...rest,
+    },
+    routeId,
+  });
+};

frontend/__mocks__/$app/stores.ts

@@ -0,0 +1,30 @@
+import type { Page } from "@sveltejs/kit";
+import { writable } from "svelte/store";
+import { OWN_CANISTER_ID_TEXT } from "../../src/lib/constants/canister-ids.constants";
+
+const initPageStoreMock = () => {
+  const { subscribe, set } = writable<Partial<Page>>({
+    data: {
+      universe: OWN_CANISTER_ID_TEXT,
+      path: undefined,
+    },
+  });
+
+  return {
+    subscribe,
+
+    mock: ({
+      routeId = undefined,
+      data = { universe: OWN_CANISTER_ID_TEXT },
+    }: {
+      routeId?: string;
+      data?: { universe: string | null } & Record<string, string>;
+    }) =>
+      set({
+        data,
+        routeId: `(app)${routeId}`,
+      }),
+  };
+};
+
+export const page = initPageStoreMock();

frontend/jest-setup.ts

@@ -20,6 +20,7 @@ jest.mock("./src/lib/constants/identity.constants.ts", () => ({
 }));
 
 jest.mock("./src/lib/constants/canister-ids.constants.ts", () => ({
+  OWN_CANISTER_ID_TEXT: "qhbym-qaaaa-aaaaa-aaafq-cai",
   OWN_CANISTER_ID: Principal.fromText("qhbym-qaaaa-aaaaa-aaafq-cai"),
   LEDGER_CANISTER_ID: Principal.fromText("ryjl3-tyaaa-aaaaa-aaaba-cai"),
   GOVERNANCE_CANISTER_ID: Principal.fromText("rrkah-fqaaa-aaaaa-aaaaq-cai"),

frontend/jest.config.cjs

@@ -22,6 +22,8 @@ module.exports = {
   ],
   moduleNameMapper: {
     "^\\$lib(.*)$": "<rootDir>/src/lib$1",
+    "^\\$routes(.*)$": "<rootDir>/src/routes$1",
+    "^\\$mocks(.*)$": "<rootDir>/__mocks__$1",
   },
   setupFiles: ["fake-indexeddb/auto"],
 };

frontend/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build:csp": "node scripts/build.csp.mjs",
     "build:robots": "node scripts/build.robots.mjs",
+    "build:preload": "node scripts/build.preload.mjs",
     "i18n": "node --experimental-json-modules scripts/i18n.types.js",
     "dev": "npm run i18n && vite dev",
     "build": "npm run i18n && vite build && npm run build:robots && npm run build:csp && ./scripts/make-reproducible",
@@ -52,7 +53,7 @@
     "svelte2tsx": "^0.5.19",
     "ts-jest": "^29.0.3",
     "typescript": "^4.6.4",
-    "vite": "^3.1.4"
+    "vite": "^3.1.8"
   },
   "type": "module",
   "dependencies": {

frontend/scripts/build.csp.mjs

@@ -3,14 +3,46 @@
 import { createHash } from "crypto";
 import * as dotenv from "dotenv";
 import { readFileSync, writeFileSync } from "fs";
-import { join } from "path";
+import { dirname, join } from "path";
+import { findHtmlFiles } from "./build.utils.mjs";
 
 dotenv.config();
 
-const buildCsp = () => {
-  const indexHTMLWithoutStartScript = extractStartScript();
-  const indexHTMLWithCSP = updateCSP(indexHTMLWithoutStartScript);
-  writeFileSync("./public/index.html", indexHTMLWithCSP);
+const buildCsp = (htmlFile) => {
+  // 1. We extract the start script parsed by SvelteKit into the html file
+  const indexHTMLWithoutStartScript = extractStartScript(htmlFile);
+  // 2. We add our custom script loader - we inject it at build time because it would throw an error when developing locally if missing
+  const indexHTMLWithScriptLoader = injectScriptLoader(
+    indexHTMLWithoutStartScript
+  );
+  // 3. remove the content-security-policy tag injected by SvelteKit
+  const indexHTMLNoCSP = removeDefaultCspTag(indexHTMLWithScriptLoader);
+  // 4. We calculate the sha256 values for these scripts and update the CSP
+  const indexHTMLWithCSP = updateCSP(indexHTMLNoCSP);
+
+  writeFileSync(htmlFile, indexHTMLWithCSP);
+};
+
+const removeDefaultCspTag = (indexHtml) => {
+  return indexHtml.replace(
+    '<meta http-equiv="content-security-policy" content="">',
+    ""
+  );
+};
+
+/**
+ * We need a script loader to implement a proper Content Security Policy. See `updateCSP` doc for more information.
+ */
+const injectScriptLoader = (indexHtml) => {
+  return indexHtml.replace(
+    "<!-- SCRIPT_LOADER -->",
+    `<script>
+      const loader = document.createElement("script");
+      loader.type = "module";
+      loader.src = "main.js";
+      document.head.appendChild(loader);
+    </script>`
+  );
 };
 
 /**
@@ -22,11 +54,8 @@ const buildCsp = () => {
  * 2. we remove the script content from index.html but, let the script tag as anchor
  * 3. we use our custom script loader to load the main.js script
  */
-const extractStartScript = () => {
-  const indexHtml = readFileSync(
-    join(process.cwd(), "public", "index.html"),
-    "utf-8"
-  );
+const extractStartScript = (htmlFile) => {
+  const indexHtml = readFileSync(htmlFile, "utf-8");
 
   const svelteKitStartScript =
     /(<script type=\"module\" data-sveltekit-hydrate[\s\S]*?>)([\s\S]*?)(<\/script>)/gm;
@@ -36,11 +65,11 @@ const extractStartScript = () => {
     svelteKitStartScript.exec(indexHtml);
   const inlineScript = content.replace(/^\s*/gm, "");
 
-  writeFileSync(
-    join(process.cwd(), "public", "main.js"),
-    inlineScript,
-    "utf-8"
-  );
+  // Each file needs its own main.js because the script that calls the SvelteKit start function contains information dedicated to the route
+  // i.e. the routeId and a particular id for the querySelector use to attach the content
+  const folderPath = dirname(htmlFile);
+
+  writeFileSync(join(folderPath, "main.js"), inlineScript, "utf-8");
 
   // 2. replace SvelteKit script tag content with empty
   return indexHtml.replace(svelteKitStartScript, "$1$3");
@@ -120,4 +149,5 @@ const cspConnectSrc = () => {
     .trim();
 };
 
-buildCsp();
+const htmlFiles = findHtmlFiles();
+htmlFiles.forEach((htmlFile) => buildCsp(htmlFile));

frontend/scripts/build.robots.mjs

@@ -2,23 +2,20 @@
 
 import * as dotenv from "dotenv";
 import { readFileSync, writeFileSync } from "fs";
-import { join } from "path";
+import { findHtmlFiles } from "./build.utils.mjs";
 
 dotenv.config();
 
-const buildRobots = () => {
-  const updatedIndexHTML = updateRobots();
-  writeFileSync("./public/index.html", updatedIndexHTML);
+const buildRobots = (htmlFile) => {
+  const updatedIndexHTML = updateRobots(htmlFile);
+  writeFileSync(htmlFile, updatedIndexHTML);
 };
 
 /**
  * No search engines indexation locally or testnet otherwise remove comments.
  */
-const updateRobots = () => {
-  const content = readFileSync(
-    join(process.cwd(), "public", "index.html"),
-    "utf-8"
-  );
+const updateRobots = (htmlFile) => {
+  const content = readFileSync(htmlFile, "utf-8");
 
   return content.replace(
     "<!-- ROBOTS -->",
@@ -28,4 +25,5 @@ const updateRobots = () => {
   );
 };
 
-buildRobots();
+const htmlFiles = findHtmlFiles();
+htmlFiles.forEach((htmlFile) => buildRobots(htmlFile));

frontend/scripts/build.utils.mjs

@@ -0,0 +1,20 @@
+import { lstatSync, readdirSync } from "fs";
+import { extname, join } from "path";
+
+const findFiles = ({ dir, files }) => {
+  readdirSync(dir).forEach((file) => {
+    const fullPath = join(dir, file);
+    if (lstatSync(fullPath).isDirectory()) {
+      findFiles({ dir: fullPath, files });
+    } else {
+      files.push(fullPath);
+    }
+  });
+};
+
+export const findHtmlFiles = (dir = join(process.cwd(), "public")) => {
+  const files = [];
+  findFiles({ dir, files });
+
+  return files.filter((entry) => [".html"].includes(extname(entry)));
+};

frontend/src/app.html

@@ -107,12 +107,7 @@
       }
     </script>
 
-    <script>
-      const loader = document.createElement("script");
-      loader.type = "module";
-      loader.src = "./main.js";
-      document.head.appendChild(loader);
-    </script>
+    <!-- SCRIPT_LOADER -->
 
     %sveltekit.head%
   </head>