Use import.meta.glob to include examples (#61)

Author: tstirrat15

Dockerfile

@@ -36,6 +36,3 @@ COPY ./contrib/docker-entrypoint-wrapper.sh .
 RUN bash ./test-nginx-conf.sh
 
 COPY --from=playground-builder /app/build/ /usr/share/nginx/html/
-
-COPY examples/schemas/ /usr/share/nginx/html/static/schemas
-RUN ls /usr/share/nginx/html/static/schemas > /usr/share/nginx/html/static/schemas/_all

package.json

@@ -22,13 +22,13 @@
     "color-hash": "^2.0.2",
     "d3-scale-chromatic": "^2.0.0",
     "dequal": "^2.0.2",
+    "es-toolkit": "^1.36.0",
     "file-saver": "^2.0.5",
     "file-select-dialog": "^1.5.4",
     "google-protobuf": "^3.21.2",
     "graphql": "16.6.0",
     "install": "^0.13.0",
     "line-column": "^1.0.2",
-    "lodash.throttle": "^4.1.1",
     "markdown-it": "^13.0.1",
     "marked": "^4.0.10",
     "monaco-editor": "~0.40.0",
@@ -88,7 +88,7 @@
   },
   "scripts": {
     "dev": "HTTPS=true vite",
-    "build": "tsc -b && vite build && ./scripts/copy-build.sh",
+    "build": "tsc -b && vite build",
     "test": "vitest",
     "lint": "eslint .",
     "lint-fix": "eslint --fix .",

scripts/copy-build.sh

@@ -1,4 +1,5 @@
 import yaml from "yaml";
+import { sortBy, zip } from "es-toolkit";
 import { ParsedValidation } from "./validationfileformat";
 export interface Example {
   id: string;
@@ -8,37 +9,54 @@ export interface Example {
   data: ParsedValidation;
 }
 
-async function get(path: string): Promise<string> {
-  const result = await fetch(path);
-  return await result.text();
-}
+const readmesImports = import.meta.glob("/examples/schemas/*/README.md", {
+  // Get just the raw text
+  query: "?raw",
+});
+const schemasImports = import.meta.glob(
+  "/examples/schemas/*/schema-and-data.yaml",
+  {
+    // Get just the raw text
+    query: "?raw",
+  },
+);
+
+const isTextImport = (input: unknown): input is { default: string } => {
+  return typeof input === "object" && input !== null && "default" in input;
+};
 
-const prefix = `/static/schemas`;
+const sortAndRealizeImports = async (
+  imports: Record<string, () => Promise<unknown>>,
+) => {
+  const realizedImports = await Promise.all(
+    sortBy(Object.entries(imports), [0]).map(([, importThunk]) =>
+      importThunk(),
+    ),
+  );
+  return realizedImports
+    .filter(isTextImport)
+    .map(({ default: defaultExport }) => defaultExport);
+};
 
 /**
  * LoadExamples loads the examples defined statically and compiled in.
  */
 export async function LoadExamples(): Promise<Example[]> {
-  // NOTE: the format of the file tree here is defined by the Dockerfile for playground-ui/playground
-  // and matches the tree structure found in https://github.com/authzed/examples/tree/main/schemas.
-  // `_all` is added by the Dockerfile at build time.
-  const exampleNames = (await get(`${prefix}/_all`))
-    .split("\n")
-    .filter((n) => !!n && n !== "_all");
-  const examples: Example[] = [];
-  for (const n of exampleNames) {
-    const documentation = await get(`${prefix}/${n}/README.md`);
-    const data = await get(`${prefix}/${n}/schema-and-data.yaml`);
-    const title = documentation.split("\n")[0].trim().substring(1).trim(); // Strip the # for the markdown header
-    const subtitle = documentation.split("\n")[2].trim();
-
-    examples.push({
-      id: n,
-      title: title,
-      subtitle: subtitle,
-      documentation: documentation,
-      data: yaml.parse(data) as ParsedValidation,
-    });
-  }
-  return examples;
+  const names = Object.entries(readmesImports).map(([path]) => path);
+  names.sort();
+  const sortedReadmes = await sortAndRealizeImports(readmesImports);
+  const sortedSchemas = await sortAndRealizeImports(schemasImports);
+  const zippedImports = zip(names, sortedReadmes, sortedSchemas);
+  return zippedImports.map(([name, readme, schema]) => {
+    const lines = readme.split("\n");
+    const title = lines[0].trim().substring(1).trim(); // Strip the # for the markdown header
+    const subtitle = lines[2].trim();
+    return {
+      id: name,
+      title,
+      subtitle,
+      documentation: readme,
+      data: yaml.parse(schema),
+    };
+  });
 }

src/spicedb-common/examples.ts

@@ -2761,6 +2761,11 @@ es-to-primitive@^1.3.0:
     is-date-object "^1.0.5"
     is-symbol "^1.0.4"
 
+es-toolkit@^1.36.0:
+  version "1.36.0"
+  resolved "https://registry.yarnpkg.com/es-toolkit/-/es-toolkit-1.36.0.tgz#98a9ddba346cde1aeca099f9bc27c05838c68b9a"
+  integrity sha512-5lpkRpDELuTSeAL//Rcg5urg+K/yOD1BobJSiNeCc89snMqgrhckmj8jdljqraDbpREiXTNW311RN518eVHBng==
+
 esbuild@^0.21.3:
   version "0.21.5"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"