Add dynamic loader to compiled autocomplete specs (#360)

Author: grant0417

.husky/pre-commit

@@ -1,4 +1,2 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 pnpm pre-commit

cli/publish-spec/package.json

@@ -47,7 +47,7 @@
   "homepage": "https://github.com/withfig/autocomplete-tools#readme",
   "dependencies": {
     "commander": "^11.1.0",
-    "esbuild": "^0.23.1",
+    "esbuild": "^0.24.2",
     "node-fetch": "^3.3.2",
     "prettier": "^3.3.3",
     "prompts": "^2.4.2"

cli/tools-cli/.eslintrc.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    "import/no-unresolved": "off",
+  },
+};

cli/tools-cli/README.md

@@ -1,84 +1,3 @@
-<p align="center">
-    <img width="300" src="https://github.com/withfig/fig/blob/main/static/FigBanner.png?raw=true"/>
-</p>
+# `@withfig/autocomplete-tools`
 
----
-
-![os](https://img.shields.io/badge/os-%20macOS-light)
-[![Signup](https://img.shields.io/badge/signup-private%20beta-blueviolet)](https://fig.io?ref=github_autocomplete)
-[![Documentation](https://img.shields.io/badge/documentation-black)](https://fig.io/docs/)
-[![Discord](https://img.shields.io/discord/837809111248535583?color=768ad4&label=discord)](https://fig.io/community)
-[![Twitter](https://img.shields.io/twitter/follow/fig.svg?style=social&label=Follow)](https://twitter.com/intent/follow?screen_name=fig)
-
-
-# Fig Autocomplete Boilerplate Repo
-
-Looking to build [Fig](https://fig.io) autocomplete for private CLI tools, scripts, or NPM packages? This npx module makes it easy to **build** [Fig autocomplete specs](https://fig.io/docs) and **share** them specs with your team.
-
-This repo is similar to a minimal version of our public specs repo,
-[withfig/autocomplete](https://github.com/withfig/autocomplete), except with an empty `src/` folder.
-
-
-
-## Usage
-
-### Init the .fig folder
-
-Go to the directory that contains your CLI tool, script, or NPM package and run the following
-
-```bash
-npx @withfig/autocomplete-tools init
-```
-This will create initialise a `.fig/` folder in your current working directory like the following
-```bash
-cli/
-├── .fig/
-│   └── autocomplete/
-│       ├── src/                # where you edit your completion specs
-│       ├── build/              # where your specs compile to
-│       ├── .eslintrc.js
-│       ├── README.md
-│       ├── package-lock.json
-│       ├── package.json
-│       └── tsconfig.json
-├── node_mod/
-└── my_cli_tool.sh
-```
-
-### Create, test, and compile specs
-
-`cd` into the `.fig/autocomplete/` folder and run the remaining commands as package.json scripts
-
-```bash
-# Make a new empty completion spec object in src/ 
-npm run create-spec
-
-# Start dev mode to see live updates to your spec in your terminal as you edit.
-npm run dev
-
-# Compile your specs from the src/ folder to build/
-npm run build
-```
-
-### Push Specs to Fig's Cloud
-Coming soon
-
-## Documentation
-
-- [Building your first autocomplete spec](https://fig.io/docs/)
-- [Personal shortcut autocomplete](https://fig.io/docs/tutorials/visual-shortcuts)
-- [Autocomplete for teams / internal CLI tools](https://fig.io/docs/tutorials/building-internal-clis)
-- [Autocomplete for local scripts](https://fig.io/docs/tutorials/autocomplete-for-internal-scripts)
-
-
-## 😊 Need Help?
-
-Email [[email protected]](mailto:[email protected])
-
-<p align="center">
-    Join our community
-<br/>
-<a href="https://fig.io/community">
-    <img src="http://fig.io/icons/discord-logo-square.png" width="80px" height="80px" /> 
-</a>
-</p>
+The `@withfig/autocomplete-tools` is a CLI used to build and manage the withfig/autocomplete repo.

cli/tools-cli/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@withfig/autocomplete-tools",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Command line tools for working with fig autocomplete specs",
   "author": "The Fig Team",
   "scripts": {
     "build": "rm -rf build/ && pnpm run build:bin && pnpm run build:lib",
-    "build:bin": "esbuild src/bin.ts --bundle --platform=node --packages=external --outdir=build --minify",
+    "build:bin": "esbuild src/bin.ts --bundle --platform=node --packages=external --outdir=build --minify --format=esm",
     "build:lib": "tsc",
     "test": "tsx test/index.ts",
     "test:overwrite": "OVERWRITE=true pnpm test",
     "prepack": "pnpm build",
     "generate-spec": "tsx generate-spec.ts generate-fig-spec"
   },
   "license": "MIT",
+  "type": "module",
   "bin": "./build/bin.js",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
@@ -24,11 +25,11 @@
     "@fig/autocomplete-helpers": "workspace:^",
     "@fig/autocomplete-merge": "workspace:^",
     "@types/semver": "^7.5.8",
-    "chalk": "^4.1.2",
+    "chalk": "^5.4.1",
     "chokidar": "^4.0.1",
-    "commander": "^11.1.0",
+    "commander": "^13.0.0",
     "create-completion-spec": "workspace:^",
-    "esbuild": "^0.23.1",
+    "esbuild": "^0.24.2",
     "fast-glob": "^3.3.2",
     "module-from-string": "^3.3.1",
     "prettier": "^3.3.3",

cli/tools-cli/src/scripts/compile.ts

@@ -1,10 +1,11 @@
+import fs from "node:fs/promises";
+import fsSync from "node:fs";
+import path from "node:path";
 import { build } from "esbuild";
 import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
 import chokidar from "chokidar";
 import { Command } from "commander";
 import glob from "fast-glob";
-import fs from "node:fs/promises";
-import path from "node:path";
 import SpecLogger, { Level } from "./log";
 import { setSetting } from "./settings";
 
@@ -33,33 +34,55 @@ async function generateIndex(outdir: string, files: string[]) {
     .concat(diffVersionedSpecNames);
   specNames.sort();
 
-  await fs.mkdir(outdir, { recursive: true });
+  const modules = files
+    .filter((p) => fsSync.statSync(p).isFile())
+    .map(path.parse)
+    .map((p) => `${p.dir}/${p.name}`.replace(/^src\//, ""));
 
-  Promise.all([
-    // index.js
-    await fs.writeFile(
-      path.join(outdir, "index.js"),
-      `var e=${JSON.stringify(specNames)},diffVersionedCompletions=${JSON.stringify(
-        diffVersionedSpecNames
-      )};export{e as default,diffVersionedCompletions};`
-    ),
-    // index.json
-    fs.writeFile(
-      path.join(outdir, "index.json"),
-      JSON.stringify({
-        completions: specNames,
-        diffVersionedCompletions: diffVersionedSpecNames,
-      })
-    ),
-    // index.d.ts
-    fs.writeFile(
-      path.join(outdir, "index.d.ts"),
-      `declare const completions: string[]
+  await fs.mkdir(outdir, { recursive: true });
+  await fs.mkdir(path.join(outdir, "dynamic"), { recursive: true });
+
+  // index.js
+  await fs.writeFile(
+    path.join(outdir, "index.js"),
+    `var e=${JSON.stringify(specNames)},diffVersionedCompletions=${JSON.stringify(
+      diffVersionedSpecNames
+    )};export{e as default,diffVersionedCompletions};`
+  );
+  // index.json
+  await fs.writeFile(
+    path.join(outdir, "index.json"),
+    JSON.stringify({
+      completions: specNames,
+      diffVersionedCompletions: diffVersionedSpecNames,
+    })
+  );
+  // index.d.ts
+  await fs.writeFile(
+    path.join(outdir, "index.d.ts"),
+    `declare const completions: string[]
 declare const diffVersionedCompletions: string[]
 export { completions as default, diffVersionedCompletions }
-  `
-    ),
-  ]);
+`
+  );
+  // dynamic/index.js
+  await fs.writeFile(
+    path.join(outdir, "dynamic/index.js"),
+    `var e={${modules
+      .map((mod) => `${JSON.stringify(mod)}:()=>import(${JSON.stringify(`../${mod}.js`)})`)
+      .join(",")}};export{e as default};`
+  );
+  // dynamic/index.d.ts
+  await fs.writeFile(
+    path.join(outdir, "dynamic/index.d.ts"),
+    `declare const completions: {
+    [key: string]: () => Promise<{
+        default: any;
+    }>
+}
+export { completions as default }
+`
+  );
 }
 
 /**

cli/tools-cli/src/scripts/create-spec.ts

@@ -1,7 +1,7 @@
+import path from "node:path";
+import readline from "node:readline";
 import { createCompletionSpec } from "create-completion-spec";
 import { Command } from "commander";
-import readline from "readline";
-import path from "path";
 import chalk from "chalk";
 
 const program = new Command("create-spec")

cli/tools-cli/src/scripts/dev.ts

@@ -1,6 +1,6 @@
-import os from "os";
-import fs from "fs";
-import path from "path";
+import os from "node:os";
+import fs from "node:fs";
+import path from "node:path";
 import chalk from "chalk";
 import { Command } from "commander";
 import { runCompiler } from "./compile";

cli/tools-cli/src/scripts/merge.ts

@@ -1,4 +1,4 @@
-import fs from "fs";
+import fs from "node:fs";
 import { Command, Option } from "commander";
 import { merge, presets, PresetName } from "@fig/autocomplete-merge";
 

cli/tools-cli/src/scripts/version.ts

@@ -1,12 +1,12 @@
+import fs from "node:fs";
+import path from "node:path";
 import { Command } from "commander";
 import semver from "semver";
 import { applySpecDiff, diffSpecs } from "@fig/autocomplete-helpers";
 import { importFromStringSync } from "module-from-string";
 import prettier from "prettier";
-import fs from "fs";
 import ts from "typescript";
 import { build } from "esbuild";
-import path from "path";
 
 export const copyDirectorySync = (oldPath: string, newPath: string) => {
   if (!fs.existsSync(newPath)) {