@opendatacapture/serve-instrument 0.0.1

package/.turbo/turbo-lint.log

@@ -0,0 +1,5 @@
+
+
+> @opendatacapture/serve-instrument@0.0.0 lint /Users/joshua/Developer/DouglasNeuroinformatics/OpenDataCapture/packages/serve-instrument
+> tsc && eslint --fix src
+

package/dist/cli.js

@@ -0,0 +1 @@
+"use strict";import*as s from"node:fs";import*as a from"node:path";import{bundle as l,BUNDLER_FILE_EXT_REGEX as u,inferLoader as f}from"@opendatacapture/instrument-bundler";import{encodeUnicodeToBase64 as h}from"@opendatacapture/runtime-internal";import w from"@opendatacapture/vite-plugin-runtime";import v from"@tailwindcss/vite";import{Command as y,InvalidArgumentError as p}from"commander";import{createServer as b}from"vite";import{name as E,version as B}from"../package.json";const r=new y;r.name(E),r.version(B),r.allowExcessArguments(!1),r.argument("<target>","the directory containing the instrument",e=>{if(e=a.resolve(e),s.existsSync(e)){if(!s.lstatSync(e).isDirectory())throw new p("Not a directory")}else throw new p("Directory does not exist");return e}),r.option("-f --force","force dependency reoptimization"),r.option("-p --port <number>","the port to run the dev server on",e=>{const i=parseInt(e,10);if(Number.isNaN(i))throw new p(`Not a number: ${e}`);return i},3e3),r.action(async e=>{const{force:i,port:c}=r.opts(),d=async()=>{const t=[],m=await s.promises.readdir(e,"utf-8").then(o=>o.filter(n=>u.test(n))).then(o=>o.map(n=>a.resolve(e,n)));for(const o of m){const n=f(o);t.push({content:await s.promises.readFile(o,n==="dataurl"?null:"utf-8"),name:a.basename(o)})}return h(await l({inputs:t}))};await(await b({forceOptimizeDeps:i,plugins:[{configureServer:t=>{t.watcher.add(e)},async handleHotUpdate({file:t,server:m}){t.startsWith(e)&&m.ws.send({data:{encodedBundle:await d()},event:"update-bundle",type:"custom"})},name:"serve-instrument",async transformIndexHtml(t){return t.replace("{{BUNDLE}}",await d())}},w(),v()],root:a.join(import.meta.dirname,"client"),server:{open:!1,port:c}})).listen(),console.log(`Listening on http://localhost:${c}`)}),r.parse();

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@opendatacapture/serve-instrument",
+  "type": "module",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "bin": {
+    "serve-instrument": "./dist/cli.js"
+  },
+  "scripts": {
+    "build": "node scripts/build.js",
+    "format": "prettier --write src",
+    "lint": "tsc && eslint --fix src"
+  },
+  "devDependencies": {
+    "@douglasneuroinformatics/libui": "catalog:",
+    "@opendatacapture/instrument-bundler": "workspace:",
+    "@opendatacapture/react-core": "workspace:*",
+    "@opendatacapture/runtime-internal": "workspace:*",
+    "@opendatacapture/runtime-v1": "workspace:*",
+    "@opendatacapture/vite-plugin-runtime": "workspace:*",
+    "@tailwindcss/vite": "catalog:",
+    "commander": "^12.1.0",
+    "esbuild": "catalog:",
+    "react": "workspace:react__19.x@*",
+    "react-dom": "workspace:react-dom__19.x@*",
+    "tailwindcss": "catalog:",
+    "vite": "catalog:",
+    "zod": "workspace:zod__3.x@*"
+  }
+}

package/scripts/build.js

@@ -0,0 +1,14 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+import * as esbuild from 'esbuild';
+
+const outdir = path.resolve(import.meta.dirname, '../dist');
+
+await fs.promises.rm(outdir, { force: true, recursive: true });
+
+await esbuild.build({
+  entryPoints: [path.resolve(import.meta.dirname, '../src/cli.ts')],
+  minify: true,
+  outdir
+});

package/src/cli.ts

@@ -0,0 +1,100 @@
+/* eslint-disable no-console */
+
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+import { bundle, BUNDLER_FILE_EXT_REGEX, inferLoader } from '@opendatacapture/instrument-bundler';
+import type { BundlerInput } from '@opendatacapture/instrument-bundler';
+import { encodeUnicodeToBase64 } from '@opendatacapture/runtime-internal';
+import runtime from '@opendatacapture/vite-plugin-runtime';
+import tailwindcss from '@tailwindcss/vite';
+import { Command, InvalidArgumentError } from 'commander';
+import { createServer } from 'vite';
+
+import { name, version } from '../package.json';
+
+const program = new Command();
+program.name(name);
+program.version(version);
+program.allowExcessArguments(false);
+program.argument('<target>', 'the directory containing the instrument', (target: string) => {
+  target = path.resolve(target);
+  if (!fs.existsSync(target)) {
+    throw new InvalidArgumentError('Directory does not exist');
+  } else if (!fs.lstatSync(target).isDirectory()) {
+    throw new InvalidArgumentError('Not a directory');
+  }
+  return target;
+});
+
+program.option('-f --force', 'force dependency reoptimization');
+
+program.option(
+  '-p --port <number>',
+  'the port to run the dev server on',
+  (value) => {
+    const port = parseInt(value, 10);
+    if (Number.isNaN(port)) {
+      throw new InvalidArgumentError(`Not a number: ${value}`);
+    }
+    return port;
+  },
+  3000
+);
+
+program.action(async (target: string) => {
+  const { force, port } = program.opts<{ force?: boolean; port: number }>();
+
+  const getEncodedBundle = async () => {
+    const inputs: BundlerInput[] = [];
+    const filepaths = await fs.promises
+      .readdir(target, 'utf-8')
+      .then((filenames) => filenames.filter((filename) => BUNDLER_FILE_EXT_REGEX.test(filename)))
+      .then((filenames) => filenames.map((filename) => path.resolve(target, filename)));
+    for (const filepath of filepaths) {
+      const loader = inferLoader(filepath);
+      inputs.push({
+        content: await fs.promises.readFile(filepath, loader === 'dataurl' ? null : 'utf-8'),
+        name: path.basename(filepath)
+      });
+    }
+    return encodeUnicodeToBase64(await bundle({ inputs }));
+  };
+
+  const server = await createServer({
+    forceOptimizeDeps: force,
+    plugins: [
+      {
+        configureServer: (server): void => {
+          server.watcher.add(target);
+        },
+        async handleHotUpdate({ file, server }) {
+          if (file.startsWith(target)) {
+            server.ws.send({
+              data: {
+                encodedBundle: await getEncodedBundle()
+              },
+              event: 'update-bundle',
+              type: 'custom'
+            });
+          }
+        },
+        name: 'serve-instrument',
+        async transformIndexHtml(html) {
+          return html.replace('{{BUNDLE}}', await getEncodedBundle());
+        }
+      },
+      runtime(),
+      tailwindcss()
+    ],
+    root: path.join(import.meta.dirname, 'client'),
+    server: {
+      open: false,
+      port
+    }
+  });
+  await server.listen();
+  console.log(`Listening on http://localhost:${port}`);
+});
+
+program.parse();

package/src/client/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Open Data Capture</title>
+  </head>
+  <body>
+    <div data-initial-bundle="{{BUNDLE}}" id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/src/client/main.tsx

@@ -0,0 +1,43 @@
+import { StrictMode, useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { i18n } from '@douglasneuroinformatics/libui/i18n';
+import { ScalarInstrumentRenderer } from '@opendatacapture/react-core';
+import { decodeBase64ToUnicode } from '@opendatacapture/runtime-internal';
+
+import '@opendatacapture/react-core/globals.css';
+
+const container = document.getElementById('root')!;
+const initialBundle = container.getAttribute('data-initial-bundle')!;
+const root = createRoot(container);
+
+i18n.init({ translations: {} });
+
+const App = () => {
+  const [encodedBundle, setEncodedBundle] = useState(initialBundle);
+
+  useEffect(() => {
+    import.meta.hot!.on('update-bundle', (data: { encodedBundle: string }) => {
+      setEncodedBundle(data.encodedBundle);
+    });
+  }, []);
+
+  return (
+    <div className="container h-screen py-16">
+      <ScalarInstrumentRenderer
+        key={encodedBundle}
+        target={{ bundle: decodeBase64ToUnicode(encodedBundle), id: null! }}
+        onSubmit={({ data }) => {
+          // eslint-disable-next-line no-alert
+          alert(JSON.stringify({ _message: 'The following data will be submitted', data }, null, 2));
+        }}
+      />
+    </div>
+  );
+};
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "paths": {
+      "/runtime/v1/*": ["../../runtime/v1/dist/*"]
+    },
+    "types": ["vite/client"]
+  },
+  "include": ["scripts/*", "src/**/*"]
+}