feat: Initial work on shell. (#1334)

Author: jsantell

deno.json

@@ -6,6 +6,7 @@
     "./packages/cli",
     "./packages/deno-vite-plugin",
     "./packages/deno-web-test",
+    "./packages/felt",
     "./packages/html",
     "./packages/identity",
     "./packages/iframe-sandbox",
@@ -16,6 +17,7 @@
     "./packages/memory",
     "./packages/runner",
     "./packages/seeder",
+    "./packages/shell",
     "./packages/static",
     "./packages/toolshed",
     "./packages/ui",
@@ -39,7 +41,8 @@
     ],
     "types": [
       "./packages/jumble/src/global.d.ts"
-    ]
+    ],
+    "experimentalDecorators": true
   },
   "exclude": [
     "packages/jumble/.vite/deps/",
@@ -121,4 +124,4 @@
     "zod-to-json-schema": "npm:zod-to-json-schema@^3.24.1",
     "zod": "npm:zod@^3.24.1"
   }
-}
+}

deno.lock

@@ -1,18 +1,18 @@
 import { describe, it } from "@std/testing/bdd";
 import { expect } from "@std/expect";
-import { bytesToLines, ct } from "./utils.ts";
+import { bytesToLines, checkStderr, ct } from "./utils.ts";
 
 describe("cli dev", () => {
   it("Executes a package", async () => {
     const { code, stdout, stderr } = await ct("dev fixtures/pow-5.tsx");
-    expect(stderr.length).toBe(1); // deno run etc.
+    checkStderr(stderr);
     expect(stdout[stdout.length - 1]).toBe("25");
     expect(code).toBe(0);
   });
 
   it("Runs a recipe with commontools+3P modules", async () => {
     const { code, stdout, stderr } = await ct("dev fixtures/3p-modules.tsx");
-    expect(stderr.length).toBe(1); // deno run etc.
+    checkStderr(stderr);
     expect(JSON.parse(stdout.join("\n")).argumentSchema).toBeTruthy();
     expect(code).toBe(0);
   });
@@ -22,7 +22,7 @@ describe("cli dev", () => {
     const { code, stdout, stderr } = await ct(
       `dev fixtures/recipe.tsx --no-run --filename test-file.js --output ${temp}`,
     );
-    expect(stderr.length).toBe(1); // deno run etc.
+    checkStderr(stderr);
     expect(stdout.length).toBe(0);
     expect(code).toBe(0);
     const rendered = bytesToLines(await Deno.readFile(temp));

packages/cli/test/dev.test.ts

@@ -1,7 +1,7 @@
 import { describe, it } from "@std/testing/bdd";
 import { expect } from "@std/expect";
 import { encode } from "@commontools/utils/encoding";
-import { ct } from "./utils.ts";
+import { checkStderr, ct } from "./utils.ts";
 import { Identity } from "@commontools/identity";
 
 const PKCS8_KEY = `-----BEGIN PRIVATE KEY-----
@@ -20,7 +20,7 @@ describe("cli id", () => {
     const keyBuffer = encode(stdout.join("\n"));
     await Identity.fromPkcs8(keyBuffer);
     expect(code).toBe(0);
-    expect(stderr.length).toBe(1); // deno run etc.
+    checkStderr(stderr);
   });
 
   it("Reads DID from key", async () => {
@@ -30,7 +30,7 @@ describe("cli id", () => {
     const did = stdout.join("\n");
     expect(did).toBe(PKCS8_KEY_DID);
     expect(code).toBe(0);
-    expect(stderr.length).toBe(1); // deno run etc.
+    checkStderr(stderr);
   });
 
   it("Reads DID from key", async () => {
@@ -39,6 +39,6 @@ describe("cli id", () => {
     const identity = await Identity.fromPkcs8(keyBuffer);
     expect(identity.did()).toBe(COMMON_USER_DID);
     expect(code).toBe(0);
-    expect(stderr.length).toBe(1); // deno run etc.
+    checkStderr(stderr);
   });
 });

packages/cli/test/id.test.ts

@@ -2,7 +2,7 @@ import { describe, it } from "@std/testing/bdd";
 import { expect } from "@std/expect";
 import { join } from "@std/path";
 import { exists } from "@std/fs/exists";
-import { ct } from "./utils.ts";
+import { checkStderr, ct } from "./utils.ts";
 
 describe("cli init", () => {
   it("Initializes workspace", async () => {
@@ -14,7 +14,7 @@ describe("cli init", () => {
 
     try {
       const { code, stdout, stderr } = await ct("init");
-      expect(stderr.length).toBe(1); // deno run etc.
+      checkStderr(stderr);
       expect(stdout.length).toBe(0);
       expect(code).toBe(0);
 

packages/cli/test/init.test.ts

@@ -1,11 +1,18 @@
 import { decode } from "@commontools/utils/encoding";
 import { join } from "@std/path";
+import { expect } from "@std/expect/expect";
 
 // Decodes a `Uint8Array` into an array of strings for each line.
 export function bytesToLines(stream: Uint8Array): string[] {
   return decode(stream).split("\n").filter(Boolean);
 }
 
+export function checkStderr(stderr: string[]) {
+  expect(stderr.length).toBe(2);
+  expect(stderr[0]).toMatch(/deno run /);
+  expect(stderr[1]).toMatch(/experimentalDecorators compiler option/);
+}
+
 // Executes the `ct` command via CLI
 // `const { stdout, stderr, code } = ct("dev --no-run ./recipe.tsx")`
 export async function ct(

packages/cli/test/utils.ts

@@ -20,6 +20,7 @@ Deno.test("smoke test", async function () {
   assert(/add-async ... ok/.test(stdoutText), "test output ok");
   assert(/ok | 2 passed | 0 failed/.test(stdoutText), "test output ok");
   assert(/deno run/.test(stderrText), "stderr has deno task run");
-  assert(stderrText.split("\n").length === 2, "stderr has no other messages");
-  assert(stderrText.split("\n")[1] === "", "stderr has no other messages");
+  assert(/experimentalDecorators/.test(stderrText), "stderr has compiler options warning");
+  assert(stderrText.split("\n").length === 3, "stderr has no other messages");
+  assert(stderrText.split("\n")[2] === "", "stderr has no other messages");
 });

packages/deno-web-test/test/base.test.ts

@@ -15,6 +15,7 @@ Deno.test("config is applied", async function () {
   assert(/LOG FROM TEST/.test(stdoutText), "console output propagated");
 
   assert(/deno run/.test(stderrText), "stderr has deno task run");
-  assert(stderrText.split("\n").length === 2, "stderr has no other messages");
-  assert(stderrText.split("\n")[1] === "", "stderr has no other messages");
+  assert(/experimentalDecorators/.test(stderrText), "stderr has compiler options warning");
+  assert(stderrText.split("\n").length === 3, "stderr has no other messages");
+  assert(stderrText.split("\n")[2] === "", "stderr has no other messages");
 });

packages/deno-web-test/test/config.test.ts

@@ -0,0 +1,39 @@
+# @commontools/felt
+
+**F**ront**e**nd **L**ightweight **T**ooling
+
+A lightweight frontend build tool.
+
+## Config
+
+Configuration can be stored in a project root's `felt.config.ts` file. Only
+`entry` and `out` are required.
+
+```ts
+// felt.config.ts
+export default {
+  entry: "src/index.ts",
+  out: "public/scripts/index.js",
+  hostname: "127.0.0.1",
+  port: 5173,
+  publicDir: "public",
+  watchDir: "src",
+  esbuild: {
+    sourcemap: true,
+    minify: false,
+    // https://esbuild.github.io/api/#external
+    external: ["some-package-that-cant-be-resolved"],
+    // Global variables to be replaced with static values.
+    define: {
+      "$DEBUG": Deno.env.get("DEBUG"),
+    },
+  },
+};
+```
+
+## Commands
+
+- `felt build .`: Build current project.
+- `felt serve .`: Serve current project.
+- `felt dev .`: Serves current project, rebuilding and reloading on source
+  change.

packages/felt/README.md

@@ -0,0 +1,70 @@
+import * as esbuild from "esbuild";
+import { denoPlugins } from "@luca/esbuild-deno-loader";
+import { debounce } from "@std/async/debounce";
+import { ResolvedConfig } from "./interface.ts";
+
+export class Builder extends EventTarget {
+  constructor(public manifest: ResolvedConfig) {
+    super();
+  }
+
+  async watch(watchRoot: string, debounceTimeout: number = 200) {
+    const fn = debounce(this.build.bind(this), debounceTimeout);
+    const watcher = Deno.watchFs(watchRoot);
+    for await (const _ of watcher) {
+      await fn();
+    }
+  }
+
+  async build() {
+    console.log("Building...");
+
+    const config: Partial<Parameters<typeof esbuild.build>[0]> = {
+      define: resolveDefines(this.manifest),
+      sourcemap: this.manifest.esbuild.sourcemap,
+      minify: this.manifest.esbuild.minify,
+      plugins: [...denoPlugins()],
+      platform: "browser",
+      entryPoints: [this.manifest.entry],
+      outfile: this.manifest.out,
+      external: this.manifest.esbuild.external,
+      bundle: true,
+      format: "esm",
+      // Explicitly compile decorators, as this what Jumble->Vite
+      // does, and no browsers currently support (any form of) decorators,
+      // and if we're bundling, we're probably running in a browser.
+      tsconfigRaw: {
+        compilerOptions: {
+          experimentalDecorators: true,
+        },
+      },
+    };
+
+    if (this.manifest.esbuild.metafile) {
+      config.metafile = true;
+    }
+
+    const result = await esbuild.build(config);
+    esbuild.stop();
+
+    if (this.manifest.esbuild.metafile && result.metafile) {
+      await Deno.writeTextFile(
+        this.manifest.esbuild.metafile,
+        JSON.stringify(result.metafile),
+      );
+
+      console.log(await esbuild.analyzeMetafile(result.metafile));
+    }
+    this.dispatchEvent(new CustomEvent("build"));
+  }
+}
+
+function resolveDefines(
+  manifest: ResolvedConfig,
+): Record<string, string> {
+  return Object.keys(manifest.esbuild.define).reduce((defines, envName) => {
+    const value = manifest.esbuild.define[envName];
+    defines[envName] = typeof value === "string" ? `"${value}"` : `undefined`;
+    return defines;
+  }, {} as Record<string, string>);
+}