@examplary/cli 1.7.0 → 1.9.0

package/{src → dist}/preview-ui/index.html

@@ -11,10 +11,11 @@
       href="https://fonts.googleapis.com/css2?family=Epunda+Sans:ital,wght@0,300..900;1,300..900&family=Epunda+Slab:ital,wght@0,300..900;1,300..900&family=Inconsolata:wght@200..900&display=swap"
       rel="stylesheet"
     />
+    <script type="module" crossorigin src="/assets/index-NlxMWEJQ.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DcEcr1Zm.css">
   </head>
   <body class="bg-app-bg font-sans">
     <div id="root"></div>
-    <script type="module" src="/main.tsx"></script>
     <link href="/api/stylesheet" rel="stylesheet" />
   </body>
 </html>

package/package.json

@@ -2,23 +2,22 @@
   "name": "@examplary/cli",
   "description": "Command-line tools for building and publishing Examplary question types.",
   "packageManager": "yarn@4.8.1",
-  "version": "1.7.0",
-  "type": "module",
+  "version": "1.9.0",
   "bin": {
-    "exp": "./bin/index.js"
+    "exp": "./dist/index.js"
   },
   "scripts": {
-    "release": "semantic-release -e semantic-release-monorepo"
-  },
-  "installConfig": {
-    "hoistingLimits": "dependencies"
+    "release": "semantic-release -e semantic-release-monorepo",
+    "build:preview-ui": "vite build",
+    "build:js": "tsc --project tsconfig.json",
+    "build": "yarn build:js && yarn build:preview-ui",
+    "dev": "tsx scripts/dev.ts"
   },
   "publishConfig": {
     "access": "public"
   },
   "files": [
-    "bin",
-    "src"
+    "dist"
   ],
   "dependencies": {
     "@examplary/schemas": "*",
@@ -26,30 +25,32 @@
     "@hono/node-server": "^1.19.13",
     "@tailwindcss/postcss": "^4.1.14",
     "@tailwindcss/vite": "^4.2.1",
-    "@vitejs/plugin-react": "^6.0.1",
     "esbuild": "^0.27.1",
-    "hono": "^4.12.16",
-    "i18next": "^25.3.2",
-    "i18next-browser-languagedetector": "^8.2.0",
+    "hono": "^4.12.18",
     "jsonata": "^2.1.0",
     "lucide-react": "^0.535.0",
     "open": "^11.0.0",
-    "postcss": "^8.5.10",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-error-boundary": "^6.0.3",
-    "react-i18next": "^16.0.0",
-    "swr": "^2.3.6",
     "tailwindcss": "^4.2.1",
-    "use-local-storage": "^3.0.0",
-    "vite": "^8.0.5",
     "ws": "^8.18.3",
     "yaml": "^2.8.3",
     "yargs": "^18.0.0"
   },
   "devDependencies": {
     "@types/node": "^24.1.0",
-    "typescript": "^5.9.3"
+    "@types/yargs": "^17.0.35",
+    "@vitejs/plugin-react": "^6.0.1",
+    "i18next": "^26.2.0",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "postcss": "^8.5.10",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-error-boundary": "^6.0.3",
+    "react-i18next": "^17.0.8",
+    "swr": "^2.3.6",
+    "tsx": "^4.22.1",
+    "typescript": "^6.0.3",
+    "use-local-storage": "^3.0.0",
+    "vite": "^8.0.5"
   },
   "homepage": "https://examplary.ai/developers",
   "author": {

package/bin/index.js

@@ -1,37 +0,0 @@
-#! /usr/bin/env node
-import yargs from "yargs";
-import { hideBin } from "yargs/helpers";
-
-import { previewCommand } from "../src/commands/preview.js";
-import { uploadCommand } from "../src/commands/upload.js";
-
-yargs()
-  .usage("examplary <cmd> [args]")
-
-  .command(
-    "upload",
-    "Bundle and upload a question type definition",
-    (yargs) => {
-      yargs
-        .option("key", {
-          type: "string",
-          description:
-            "API key for authentication (uses EXAMPLARY_API_KEY env var if not provided)",
-          default: process.env.EXAMPLARY_API_KEY || "",
-        })
-        .option("host", {
-          type: "string",
-          description: "API host to upload to",
-          default: "https://api.examplary.ai",
-        });
-    },
-    uploadCommand,
-  )
-
-  .command("preview", "Run local development server", previewCommand)
-
-  .help()
-  .recommendCommands()
-  .demandCommand()
-
-  .parse(hideBin(process.argv));

package/src/commands/preview.js

@@ -1,220 +0,0 @@
-#! /usr/bin/env node
-import { watch } from "fs";
-import { readFile } from "fs/promises";
-import { createServer as createHttpServer } from "http";
-import path, { resolve } from "path";
-import { cwd, exit } from "process";
-
-import { serve } from "@hono/node-server";
-import tailwindcss from "@tailwindcss/vite";
-import react from "@vitejs/plugin-react";
-import { Hono } from "hono";
-import open from "open";
-import { createServer } from "vite";
-import { WebSocketServer } from "ws";
-
-import { setApiHost, setApiKey } from "../lib/api.js";
-import { buildComponent } from "../lib/bundle.js";
-import { adaptExpressMiddleware } from "../lib/middleware.js";
-import { readMetaFile } from "../lib/read-meta.js";
-import { buildStyles } from "../lib/styles.js";
-
-export const previewCommand = async (argv) => {
-  setApiHost(argv.host);
-  setApiKey(argv.key);
-
-  const dir = cwd();
-
-  // Verify a question-type file exists (json or yml)
-  try {
-    await readMetaFile();
-  } catch (e) {
-    console.error(`🚫 ${e.message}`);
-    exit(1);
-  }
-
-  // Let's start a Vite server to preview the question type
-  const root = resolve(import.meta.dirname, "..", "preview-ui");
-  const app = new Hono();
-  const vite = await createServer({
-    server: { middlewareMode: true },
-    mode: "development",
-    appType: "custom",
-    root,
-    plugins: [react(), tailwindcss()],
-    resolve: {
-      alias: {
-        react: path.dirname(import.meta.resolve("react")),
-        "react-dom": path.dirname(import.meta.resolve("react-dom")),
-      },
-    },
-  });
-
-  app.get("/api/bundle", async (c) => {
-    const path = c.req.query("path");
-    const sourcemap = c.req.query("sourcemap") === "1";
-    const componentName = c.req.query("componentName");
-
-    try {
-      const componentOutput = await buildComponent(path);
-
-      if (sourcemap) {
-        return c.body(componentOutput.sourcemap, 200, {
-          "Content-Type": "application/json",
-        });
-      } else {
-        const sizeInKb = componentOutput.length / 1000;
-        if (sizeInKb > 100) {
-          console.warn(
-            `⚠️ Component ${componentName} is larger than 100 kB! Consider optimizing it.`,
-          );
-        }
-
-        let output = componentOutput.js;
-        if (componentOutput.sourcemap) {
-          output += `\n//# sourceMappingURL=/api/bundle?componentName=${componentName}&path=${encodeURIComponent(path || "")}&sourcemap=1`;
-        }
-
-        return c.body(output, 200, {
-          "Content-Type": "application/javascript",
-        });
-      }
-    } catch (error) {
-      console.error(
-        `🚫 Error bundling component ${componentName} from ${path}: ${error.message}`,
-      );
-      return c.text(
-        `Error bundling component ${componentName}: ${error.message}`,
-        500,
-      );
-    }
-  });
-  app.get("/api/icon", async (c) => {
-    const path = c.req.query("path") || "";
-    const icon = await readFile(resolve(dir, path), "utf-8");
-
-    return c.body(icon, 200, {
-      "Content-Type": "image/svg+xml",
-    });
-  });
-
-  app.get("/api/stylesheet", async (c) => {
-    const componentName = c.req.query("componentName");
-
-    try {
-      const componentOutput = await buildStyles();
-      return c.body(componentOutput || "", 200, {
-        "Content-Type": "text/css",
-      });
-    } catch (error) {
-      console.error(
-        `🚫 Error building CSS for component ${componentName}: ${error.message}`,
-      );
-      return c.text(
-        `Error building CSS for component ${componentName}: ${error.message}`,
-        500,
-      );
-    }
-  });
-
-  let wsPort; // WebSocket port will be set when server starts
-
-  app.get("/", async (c) => {
-    let questionType;
-    try {
-      ({ definition: questionType } = await readMetaFile());
-      questionType.components = questionType.components
-        ? Object.entries(questionType.components).reduce(
-            (acc, [componentName, componentPath]) => ({
-              ...acc,
-              [componentName]: `/api/bundle?componentName=${componentName}&path=${encodeURIComponent(componentPath)}`,
-            }),
-            {},
-          )
-        : questionType.components;
-    } catch (e) {
-      return c.text(
-        `Error reading question type definition: ${e.message}`,
-        500,
-      );
-    }
-
-    let template = await readFile(resolve(root, "index.html"), "utf-8");
-    template = await vite.transformIndexHtml("/", template);
-
-    // Inject hot reload script
-    const hotReloadScript = `
-      <script>
-        (function() {
-          const wsPort = ${wsPort || "null"};
-          if (wsPort) {
-            const ws = new WebSocket('ws://localhost:' + wsPort);
-            ws.onmessage = function(event) {
-              const data = JSON.parse(event.data);
-              if (data.type === 'reload') {
-                console.log('🔄 Reloading page due to file change...');
-                window.location.reload();
-              }
-            };
-            ws.onopen = function() {
-              console.log('🔗 Hot reload connected');
-            };
-            ws.onclose = function() {
-              console.log('🔌 Hot reload disconnected');
-            };
-            ws.onerror = function(error) {
-              console.log('❌ Hot reload error:', error);
-            };
-          }
-        })();
-      </script>
-    `;
-
-    template =
-      "<script>window._questionType = " +
-      JSON.stringify(questionType) +
-      `;</script>${template}${hotReloadScript}`;
-    return c.html(template);
-  });
-
-  app.use("*", adaptExpressMiddleware(vite.middlewares));
-
-  // Set up file watcher
-  const watchDir = cwd();
-  console.log(`📁 Watching ${watchDir} for changes...`);
-
-  let wss; // Will be initialized after server starts
-
-  const watcher = watch(watchDir, { recursive: true }, (filename) => {
-    if (filename && !filename.startsWith(".")) {
-      // Broadcast reload message to all connected clients
-      if (wss) {
-        wss.clients.forEach((client) => {
-          if (client.readyState === 1) {
-            // WebSocket.OPEN
-            client.send(JSON.stringify({ type: "reload" }));
-          }
-        });
-      }
-    }
-  });
-
-  // Clean up watcher on process exit
-  process.on("SIGINT", () => {
-    watcher.close();
-    process.exit(0);
-  });
-
-  serve({ fetch: app.fetch }, (address) => {
-    const port = address.port;
-    wsPort = port + 1234;
-
-    const wsServer = createHttpServer();
-    wss = new WebSocketServer({ server: wsServer });
-    wsServer.listen(wsPort);
-
-    const url = `http://localhost:${port}`;
-    console.log(`🚀 Preview server running at ${url}`);
-    open(url);
-  });
-};

package/src/commands/upload.js

@@ -1,179 +0,0 @@
-#! /usr/bin/env node
-import { readFile } from "fs/promises";
-import { resolve } from "path";
-import { cwd, exit } from "process";
-
-import { setApiHost, setApiKey, uploadFile } from "../lib/api.js";
-import { buildComponent } from "../lib/bundle.js";
-import { deepCompileJsonata } from "../lib/jsonata.js";
-import { readMetaFile } from "../lib/read-meta.js";
-import { buildStyles } from "../lib/styles.js";
-
-export const uploadCommand = async (argv) => {
-  setApiHost(argv.host);
-  setApiKey(argv.key);
-
-  const dir = cwd();
-  let definition = {};
-  try {
-    ({ definition } = await readMetaFile());
-  } catch (e) {
-    console.error(`🚫 ${e.message}`);
-    exit(1);
-  }
-  console.log(`Uploading question type: ${definition.id}...`);
-  if (!definition.id) {
-    console.error(`🚫 Missing required field: id`);
-    exit(1);
-  }
-  if (!definition.name) {
-    console.error(`🚫 Missing required field: name`);
-    exit(1);
-  }
-
-  // Validate JSONata expressions in the definition
-  if (definition.export?.qti?.interaction?.options) {
-    try {
-      await deepCompileJsonata(definition.export.qti.interaction.options);
-    } catch (e) {
-      console.error(
-        `🚫 Invalid JSONata expression in export.qti.interaction.options: ${e.message}`,
-      );
-      exit(1);
-    }
-  }
-
-  // Bundle and upload components
-  const components = {};
-  const validComponentTypes = [
-    "settings-area",
-    "assessment",
-    "print",
-    "results",
-  ];
-  for (const [componentType, componentPath] of Object.entries(
-    definition.components || {},
-  )) {
-    // Validation
-    if (!validComponentTypes.includes(componentType)) {
-      console.error(`🚫 Invalid component type specified: ${componentType}`);
-      exit(1);
-    }
-    const realPath = resolve(dir, componentPath);
-    if (!realPath) {
-      console.error(`🚫 Missing required file: ${componentPath}`);
-      exit(1);
-    }
-
-    // Bundle component
-    let componentOutput = {};
-    try {
-      componentOutput = await buildComponent(realPath);
-      const sizeInKb = componentOutput.js.length / 1000;
-      const sizeHint = `(${sizeInKb.toFixed(2)} kB)`;
-      console.log(
-        `• Bundled component ${componentType} from ${componentPath} ${sizeHint}`,
-      );
-
-      if (sizeInKb > 100) {
-        console.warn(
-          `  ⚠️ Component ${componentType} is larger than 100 kB! Consider optimizing it.`,
-        );
-        if (process.env.GITHUB_ACTIONS) {
-          console.log(
-            `::warning file=${realPath},title=Large component size::Component ${
-              componentType
-            } is larger than 100 kB ${sizeHint}! Consider optimizing it.`,
-          );
-        }
-      }
-    } catch (error) {
-      console.error(
-        `🚫 Error bundling component ${componentType} from ${componentPath}: ${error.message}`,
-      );
-      exit(1);
-    }
-
-    // Upload source map first if it exists
-    let sourceMapStatement = "";
-    if (componentOutput.sourcemap) {
-      const url = await uploadFile(
-        `component-${componentType}.js.map`,
-        componentOutput.sourcemap,
-        "application/json",
-      );
-
-      sourceMapStatement = `\n//# sourceMappingURL=${url}`;
-    }
-
-    // Upload component
-    components[componentType] = await uploadFile(
-      `component-${componentType}.js`,
-      componentOutput.js + sourceMapStatement,
-      "application/javascript",
-    );
-
-    console.log(`• Uploaded component ${componentType}`);
-  }
-  definition.components = components;
-
-  // Upload styles if present
-  if (Object.keys(definition.components).length) {
-    const styles = await buildStyles();
-    if (styles) {
-      definition.stylesheet = await uploadFile(
-        "styles.css",
-        styles,
-        "text/css",
-      );
-      const sizeInKb = styles.length / 1000;
-      const sizeHint = `(${sizeInKb.toFixed(2)} kB)`;
-      console.log(`• Uploaded styles ${sizeHint}`);
-    }
-  }
-
-  // Upload icon if specified
-  if (definition.icon) {
-    const iconPath = resolve(dir, definition.icon);
-    let iconContents;
-    try {
-      iconContents = await readFile(iconPath, "utf-8");
-    } catch (error) {
-      console.error(`🚫 Error reading icon file: ${error.message}`);
-      exit(1);
-    }
-    if (!iconContents) {
-      console.error(`🚫 Icon file is empty: ${iconPath}`);
-      exit(1);
-    }
-    definition.icon = await uploadFile(
-      "icon.svg",
-      iconContents,
-      "image/svg+xml",
-    );
-    console.log(`• Uploaded icon`);
-  }
-
-  // Upload the main question type definition
-  const res = await fetch(`${argv.host}/question-types`, {
-    headers: {
-      Authorization: `Bearer ${argv.key}`,
-      "Content-Type": "application/json",
-    },
-    method: "POST",
-    body: JSON.stringify(definition),
-  });
-
-  if (!res.ok) {
-    console.error(`🚫 Uploading question type failed`);
-    try {
-      const errorResponse = await res.json();
-      console.log(errorResponse);
-    } catch (e) {
-      console.log(e);
-    }
-    exit(1);
-  }
-
-  console.log(`• Finished uploading definition\n`);
-};

package/src/lib/api.js

@@ -1,53 +0,0 @@
-import { basename } from "path";
-import { exit } from "process";
-
-// These get overwritten by the CLI options
-export let API_HOST = "https://api.examplary.ai";
-export let API_KEY = process.env.EXAMPLARY_API_KEY || "";
-
-export const setApiKey = (key) => {
-  if (!key) return;
-  API_KEY = key;
-};
-export const setApiHost = (host) => {
-  if (!host) return;
-  API_HOST = host;
-};
-
-export const uploadFile = async (fileName, fileContents, contentType) => {
-  const params = new URLSearchParams();
-  params.append("filename", basename(fileName));
-  params.append("contentType", contentType);
-  params.append("type", "question-type");
-
-  // Request the upload URL
-  const res = await fetch(`${API_HOST}/media/upload?${params.toString()}`, {
-    headers: {
-      Authorization: `Bearer ${API_KEY}`,
-    },
-  });
-
-  if (!res.ok) {
-    const errorText = await res.text();
-    console.error(`🚫 Upload failed: ${errorText}`);
-    exit(1);
-  }
-
-  // Actually upload the file
-  const { uploadUrl, publicUrl } = await res.json();
-  const uploadRes = await fetch(uploadUrl, {
-    method: "PUT",
-    headers: {
-      "Content-Type": contentType,
-    },
-    body: fileContents,
-  });
-
-  if (!uploadRes.ok) {
-    const errorText = await uploadRes.text();
-    console.error(`🚫 Upload failed: ${errorText}`);
-    exit(1);
-  }
-
-  return publicUrl;
-};

package/src/lib/bundle.js

@@ -1,35 +0,0 @@
-import { build } from "esbuild";
-
-export const buildComponent = async (file) => {
-  const res = await build({
-    entryPoints: [file],
-    bundle: true,
-    write: false,
-    minify: true,
-    sourcemap: "inline",
-    platform: "browser",
-    format: "cjs",
-    external: [
-      "@examplary/ui",
-      "react",
-      "react-dom",
-      "react/jsx-runtime",
-      "react-dom/client",
-    ],
-  });
-
-  let js = res.outputFiles[0].text;
-  let sourcemap = "";
-
-  const sourceMapStatement =
-    "\n//# sourceMappingURL=data:application/json;base64,";
-  if (js.includes(sourceMapStatement)) {
-    sourcemap = Buffer.from(
-      js.split(sourceMapStatement)[1].trim(),
-      "base64",
-    ).toString("utf-8");
-    js = js.split(sourceMapStatement)[0].trim();
-  }
-
-  return { js, sourcemap };
-};

package/src/lib/jsonata.js

@@ -1,31 +0,0 @@
-import jsonata from "jsonata";
-
-export const deepCompileJsonata = async (expression) => {
-  if (typeof expression === "string" && expression.startsWith("=")) {
-    try {
-      jsonata(expression.substring(1));
-    } catch (error) {
-      throw new Error(
-        `JSONata evaluation failed for "${expression}": ${error.message}`,
-      );
-    }
-  }
-
-  if (Array.isArray(expression)) {
-    const output = [];
-    for (const o of expression) {
-      output.push(await deepCompileJsonata(o));
-    }
-    return output;
-  }
-
-  if (typeof expression === "object" && expression !== null) {
-    const result = {};
-    for (const [key, value] of Object.entries(expression)) {
-      result[key] = await deepCompileJsonata(value);
-    }
-    return result;
-  }
-
-  return expression;
-};

package/src/lib/middleware.js

@@ -1,16 +0,0 @@
-import { createMiddleware } from "hono/factory";
-
-export const adaptExpressMiddleware = (middleware) =>
-  createMiddleware(async (c, next) => {
-    const req = c.env.incoming;
-    const res = c.env.outgoing;
-
-    await new Promise((resolve, reject) => {
-      middleware(req, res, (err) => {
-        if (err) reject(err);
-        else resolve(c.res);
-      });
-    });
-
-    await next();
-  });