feat!: Upgrade bun and refactor routing

.gitattributes

@@ -1 +1,10 @@
+# See https://git-scm.com/docs/gitattributes#_pattern_format for more about `.gitattributes`.
+
+# Normalize EOL for all files that Git considers text files
+* text=auto eol=lf
+
+# Mark lock files as generated to avoid diffing
+bun.lock linguist-generated
+
+# Mark other generated files as generated
 src/crawlers/__tests__/fixtures/chrome-web-store/*.html linguist-generated=true

.github/actions/setup/action.yml

@@ -3,6 +3,8 @@ description: Install Bun and dependencies
 runs:
   using: composite
   steps:
-    - uses: oven-sh/setup-bun@v1
+    - uses: oven-sh/setup-bun@v2
+      with:
+        bun-version-file: package.json
     - run: bun install
       shell: bash

.github/workflows/validate.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: bun generate:types
+      - run: bun gen:types
       - run: bun check
   tests:
     runs-on: ubuntu-22.04

.npmrc

@@ -0,0 +1 @@
+@jsr:registry=https://npm.jsr.io

Dockerfile

@@ -4,4 +4,4 @@ COPY package.json package.json
 COPY bun.lockb bun.lockb
 RUN bun install --production --ignore-scripts
 COPY . .
-ENTRYPOINT ["bun", "src/index.ts"]
+ENTRYPOINT ["bun", "src/main.ts"]

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "wxt-queue",
+  "name": "@wxt-dev/queue",
   "version": "0.3.20",
-  "module": "src/index.ts",
   "type": "module",
-  "packageManager": "bun@1.1.31",
+  "packageManager": "bun@1.2.18",
   "scripts": {
-    "dev": "bun --hot run src/dev.ts",
-    "generate:types": "bun run src/generate-types.ts",
+    "dev": "bun run --watch scripts/dev.ts",
+    "gen": "bun run gen:types",
+    "gen:types": "bun run scripts/generate-types.ts",
     "docker:build": "docker build . -t aklinker1/store-api",
     "docker:run": "docker run -it aklinker1/store-api",
     "docker:build:amd": "bun docker:build --platform linux/amd64",
@@ -15,21 +15,24 @@
     "check": "check"
   },
   "dependencies": {
+    "@aklinker1/zero-ioc": "^1.3.2",
+    "@aklinker1/zeta": "npm:@jsr/aklinker1__zeta@0.2.7",
     "consola": "^3.2.3",
     "dataloader": "^2.2.2",
     "graphql": "^16.8.0",
     "linkedom": "^0.15.3",
     "picocolors": "^1.0.0",
-    "radix3": "^1.1.2"
+    "zod": "^3.25.75"
   },
   "devDependencies": {
-    "@aklinker1/check": "^1.2.0",
-    "bun-types": "latest",
+    "@aklinker1/check": "^2.1.0",
+    "@types/bun": "latest",
     "code-block-writer": "^12.0.0",
     "lint-staged": "^15.2.2",
+    "oxlint": "^1.6.0",
     "prettier": "^3.2.5",
     "simple-git-hooks": "^2.9.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.8.3"
   },
   "simple-git-hooks": {
     "pre-commit": "bun lint-staged"

scripts/dev.ts

@@ -0,0 +1,19 @@
+#!/usr/bin/env bun
+import consola, { LogLevels } from "consola";
+import app from "../src/server";
+import { generateGqlTypes } from "./generate-gql-types";
+import pc from "picocolors";
+import { version } from "../package.json";
+
+const fetch = app.build();
+await generateGqlTypes(fetch);
+
+consola.level = LogLevels.debug;
+const port = Number(process.env.PORT ?? "3000");
+Bun.serve({ port, fetch });
+
+consola.success(
+  `${pc.cyan("@wxt-dev/queue v" + version)} ${pc.dim("server started")}`,
+);
+consola.log(`  ${pc.bold(pc.green("➜"))} http://localhost:${port}`);
+console.log();

scripts/generate-gql-types.ts

@@ -1,6 +1,7 @@
 import CodeBlockWriter from "code-block-writer";
-import type { Server } from "../src/server";
 import { consola } from "consola";
+import type { ServerSideFetch } from "@aklinker1/zeta/types";
+import app from "../src/server";
 
 const typesFile = Bun.file("src/@types/gql.d.ts");
 
@@ -11,12 +12,17 @@ const scalarNameToTs = {
   Float: "number",
 };
 
-export async function generateGqlTypes(server: Server) {
+export async function generateGqlTypes(fetch: ServerSideFetch = app.build()) {
   consola.info("Generating GraphQL types...");
-  const introspection = await server.introspect();
+  const introspection = await introspect(fetch);
 
-  const { queryType, mutationType, subscriptionType, types, directives } =
-    introspection.data.__schema;
+  const {
+    queryType,
+    mutationType,
+    subscriptionType,
+    types,
+    directives: _,
+  } = introspection.data.__schema;
 
   let argTypes: any[] = [];
 
@@ -63,7 +69,7 @@ export async function generateGqlTypes(server: Server) {
 
 function capitalizeFirstLetter(str: string): string {
   if (str.length === 0) return str;
-  return str[0].toUpperCase() + str.substring(1);
+  return str[0]!.toUpperCase() + str.substring(1);
 }
 
 function getTsTypeString(gqlType: any): string {
@@ -120,3 +126,21 @@ function writeScalarType(code: CodeBlockWriter, type: any) {
   }
   code.writeLine(`type ${type.name} = ${typeStr || "unknown"};`);
 }
+
+async function introspect(fetch: ServerSideFetch): Promise<any> {
+  const request = new Request("http://localhost/api", {
+    body: JSON.stringify({
+      operationName: "IntrospectionQuery",
+      query:
+        "query IntrospectionQuery { __schema { queryType { name } mutationType { name } subscriptionType { name } types { ...FullType } directives { name description locations args { ...InputValue } } } } fragment FullType on __Type { kind name description fields(includeDeprecated: true) { name description args { ...InputValue } type { ...TypeRef } isDeprecated deprecationReason } inputFields { ...InputValue } interfaces { ...TypeRef } enumValues(includeDeprecated: true) { name description isDeprecated deprecationReason } possibleTypes { ...TypeRef } } fragment InputValue on __InputValue { name description type { ...TypeRef } defaultValue } fragment TypeRef on __Type { kind name ofType { kind name ofType { kind name ofType { kind name ofType { kind name ofType { kind name ofType { kind name ofType { kind name } } } } } } } } ",
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "POST",
+  });
+  const res = await fetch(request);
+  if (res.ok) return await res.json();
+
+  throw Error("Introspection request failed: " + (await res.text()));
+}

scripts/generate-types.ts

@@ -0,0 +1,3 @@
+import { generateGqlTypes } from "./generate-gql-types";
+
+await generateGqlTypes();

src/@types/modules.d.ts

@@ -3,7 +3,7 @@ declare module "*.gql" {
   export default text;
 }
 
-declare module "*.html" {
-  const text: string;
-  export default text;
+declare module "*.tmpl" {
+  const content: string;
+  export default content;
 }

src/assets/playground.html.tmpl

@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Playground - WXT Queue v{{VERSION}}</title>
+    <style>
+      body {
+        margin: 0;
+      }
+
+      #graphiql {
+        height: 100dvh;
+      }
+
+      .loading {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 4rem;
+      }
+    </style>
+    <link rel="stylesheet" href="https://esm.sh/graphiql/dist/style.css" />
+    <link
+      rel="stylesheet"
+      href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css"
+    />
+    <!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@19.1.0",
+          "react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",
+
+          "react-dom": "https://esm.sh/react-dom@19.1.0",
+          "react-dom/client": "https://esm.sh/react-dom@19.1.0/client",
+
+          "graphiql": "https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql",
+          "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql",
+          "@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql",
+
+          "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
+          "graphql": "https://esm.sh/graphql@16.11.0"
+        }
+      }
+    </script>
+    <script type="module">
+      // Import React and ReactDOM
+      import React from 'react';
+      import ReactDOM from 'react-dom/client';
+      // Import GraphiQL and the Explorer plugin
+      import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
+      import { createGraphiQLFetcher } from '@graphiql/toolkit';
+      import { explorerPlugin } from '@graphiql/plugin-explorer';
+
+      import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
+      import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
+      import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';
+
+      globalThis.MonacoEnvironment = {
+        getWorker(_workerId, label) {
+          console.info('MonacoEnvironment.getWorker', { label });
+          switch (label) {
+            case 'json':
+              return createJSONWorker();
+            case 'graphql':
+              return createGraphQLWorker();
+          }
+          return createEditorWorker();
+        },
+      };
+
+      const fetcher = createGraphiQLFetcher({
+        url: '/api'
+      });
+      const plugins = [HISTORY_PLUGIN, explorerPlugin()];
+
+      function App() {
+        return React.createElement(GraphiQL, {
+          fetcher,
+          plugins,
+          defaultEditorToolsVisibility: true,
+        });
+      }
+
+      const container = document.getElementById('graphiql');
+      const root = ReactDOM.createRoot(container);
+      root.render(React.createElement(App));
+    </script>
+  </head>
+  <body>
+    <div id="graphiql">
+      <div class="loading">Loading…</div>
+    </div>
+  </body>
+</html>

src/dependencies.ts

@@ -0,0 +1,8 @@
+import { createIocContainer } from "@aklinker1/zero-ioc";
+import { createChromeService } from "./utils/chrome/chrome-service";
+import { createFirefoxService } from "./utils/firefox/firefox-service";
+
+export const dependencies = createIocContainer().register({
+  chrome: createChromeService,
+  firefox: createFirefoxService,
+});

src/graphql.ts → src/graphql/index.ts

@@ -1,22 +1,18 @@
 import { buildSchema, graphql } from "graphql";
-import gqlSchema from "./schema.gql";
+import gqlSchema from "../assets/schema.gql";
 import { rootResolver } from "./resolvers";
 import { consola } from "consola";
 import pc from "picocolors";
+import { dependencies } from "../dependencies";
 
-export function createGraphql(ctx: WxtQueueCtx) {
+export function createGraphql() {
   const schema = buildSchema(gqlSchema);
 
   let increment = 0;
 
-  const evaluateQuery = async (req: Request) => {
-    const method = req.method.toUpperCase();
+  const evaluateQuery = async (method: string, body: GraphQLParams) => {
     const id = ++increment;
-    const {
-      operationName = "Unknown",
-      query,
-      variables,
-    } = await req.json<GraphQLParams>();
+    const { operationName = "Unknown", query, variables } = body;
 
     const start = performance.now();
     consola.debug(
@@ -28,7 +24,7 @@ export function createGraphql(ctx: WxtQueueCtx) {
     const response = await graphql({
       schema,
       source: query,
-      contextValue: ctx,
+      contextValue: dependencies.resolveAll(),
       variableValues: variables,
       rootValue: rootResolver,
     });

src/index.ts → src/main.ts

@@ -1,6 +1,8 @@
 #!/usr/bin/env bun
 import consola from "consola";
-import { createServer } from "./server";
+import app from "./server";
+import pc from "picocolors";
+import { version } from "../package.json";
 
 if (process.env.LOG_LEVEL) {
   // silent: Number.NEGATIVE_INFINITY
@@ -20,4 +22,9 @@ if (process.env.LOG_LEVEL) {
   consola.level = Number(process.env.LOG_LEVEL);
 }
 
-createServer();
+const port = Number(process.env.PORT ?? "3000");
+app.listen(port, () => {
+  consola.info(
+    `${pc.cyan("@wxt-dev/queue v" + version)} ${pc.dim("server started")}`,
+  );
+});

src/plugins/context-plugin.ts

@@ -0,0 +1,6 @@
+import { createApp } from "@aklinker1/zeta";
+import { dependencies } from "../dependencies";
+
+export const contextPlugin = createApp()
+  .decorate(dependencies.resolveAll())
+  .export();