From a36e04566aa81d47df42bbf0a3382bad7276d251 Mon Sep 17 00:00:00 2001
From: James Edmonds <james@deckchairlabs.com>
Date: Sat, 1 Jul 2023 02:34:47 +0000
Subject: [PATCH 1/8] feat: support @/ special prefix

---
 examples/basic/deno.json                 |  2 +-
 examples/basic/importMap.json            |  3 ++-
 examples/basic/server.tsx                |  4 +---
 examples/basic/src/app.tsx               |  2 ++
 examples/basic/src/components/Button.tsx | 10 ++++++++++
 lib/stream.ts                            |  6 +++++-
 6 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 examples/basic/src/components/Button.tsx

diff --git a/examples/basic/deno.json b/examples/basic/deno.json
index 8080d9f1..7e153f62 100644
--- a/examples/basic/deno.json
+++ b/examples/basic/deno.json
@@ -1,6 +1,6 @@
 {
   "tasks": {
-    "dev": "deno run -A --no-check --watch ./server.tsx",
+    "dev": "ULTRA_MODE=development deno run -A --no-check --watch ./server.tsx",
     "test": "deno test --allow-all",
     "build": "deno run -A ./build.ts",
     "start": "ULTRA_MODE=production deno run -A --no-remote ./server.js"
diff --git a/examples/basic/importMap.json b/examples/basic/importMap.json
index 8e37d5da..11f56a23 100644
--- a/examples/basic/importMap.json
+++ b/examples/basic/importMap.json
@@ -6,6 +6,7 @@
     "react-dom/server": "https://esm.sh/v122/react-dom@18.2.0/server?dev",
     "react-dom/client": "https://esm.sh/v122/react-dom@18.2.0/client?dev",
     "ultra/": "https://deno.land/x/ultra@v2.2.4/",
-    "@ultra/qrcode/": "https://deno.land/x/qrcode@v2.0.0/"
+    "@ultra/qrcode/": "https://deno.land/x/qrcode@v2.0.0/",
+    "@/": "./src/"
   }
 }
diff --git a/examples/basic/server.tsx b/examples/basic/server.tsx
index ee138397..9404e94f 100644
--- a/examples/basic/server.tsx
+++ b/examples/basic/server.tsx
@@ -3,9 +3,7 @@ import { createServer } from "ultra/server.ts";
 import App from "./src/app.tsx";
 
 const server = await createServer({
-  importMapPath: Deno.env.get("ULTRA_MODE") === "development"
-    ? import.meta.resolve("./importMap.dev.json")
-    : import.meta.resolve("./importMap.json"),
+  importMapPath: import.meta.resolve("./importMap.json"),
   browserEntrypoint: import.meta.resolve("./client.tsx"),
 });
 
diff --git a/examples/basic/src/app.tsx b/examples/basic/src/app.tsx
index 39333fdb..9b7ade63 100644
--- a/examples/basic/src/app.tsx
+++ b/examples/basic/src/app.tsx
@@ -1,5 +1,6 @@
 import useAsset from "ultra/hooks/use-asset.js";
 import useEnv from "ultra/hooks/use-env.js";
+import Button from "@/components/Button.tsx";
 
 export default function App() {
   // Read our environment variable from '.env' or the host environment
@@ -37,6 +38,7 @@ export default function App() {
             customise your routing, data fetching, and styling with popular
             libraries.
           </p>
+          <Button>Button</Button>
         </main>
       </body>
     </html>
diff --git a/examples/basic/src/components/Button.tsx b/examples/basic/src/components/Button.tsx
new file mode 100644
index 00000000..52f77275
--- /dev/null
+++ b/examples/basic/src/components/Button.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+type ButtonProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+export default function Button(props: ButtonProps) {
+  return <button className="btn" {...props} />;
+}
diff --git a/lib/stream.ts b/lib/stream.ts
index 758aa266..975d7be6 100644
--- a/lib/stream.ts
+++ b/lib/stream.ts
@@ -160,13 +160,17 @@ export function createImportMapInjectionStream(
   log.debug("Stream inject importMap");
   let injected = false;
 
+  function isSpecialPrefix(specifier: string) {
+    return specifier.startsWith("@ultra/") || specifier.startsWith("@/");
+  }
+
   return createHeadInsertionTransformStream(() => {
     if (injected) return Promise.resolve("");
 
     if (mode === "development") {
       importMap.imports = Object.fromEntries(
         Object.entries(importMap.imports).map(([key, value]) => {
-          if (key.startsWith("@ultra/")) {
+          if (isSpecialPrefix(key)) {
             value = value.endsWith("/") ? value.slice(0, -1) : value;
             value = `/_ultra/compiler/${encodeURIComponent(value)}/`;
           }

From 9bb3383dd8d51dc2a03fe471629d451a4391f30b Mon Sep 17 00:00:00 2001
From: James Edmonds <james@deckchairlabs.com>
Date: Sat, 1 Jul 2023 02:43:31 +0000
Subject: [PATCH 2/8] wip

---
 lib/middleware/compiler.ts | 5 +++--
 lib/stream.ts              | 7 ++++---
 lib/utils/compiler.ts      | 6 ++++++
 3 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 lib/utils/compiler.ts

diff --git a/lib/middleware/compiler.ts b/lib/middleware/compiler.ts
index 79e2bb55..b922a6cd 100644
--- a/lib/middleware/compiler.ts
+++ b/lib/middleware/compiler.ts
@@ -3,6 +3,7 @@ import { ULTRA_COMPILER_PATH } from "../constants.ts";
 import { extname, join, sprintf, toFileUrl } from "../deps.ts";
 import { log } from "../logger.ts";
 import type { CompilerOptions, Context, Next } from "../types.ts";
+import { isCompilerTarget } from "../utils/compiler.ts";
 
 const { transform } = await createCompiler();
 
@@ -26,9 +27,9 @@ export const compiler = (options: CompilerOptions) => {
     const path = !isRemoteSource ? join(root, pathname) : pathname;
     const url = !isRemoteSource ? toFileUrl(path) : new URL(pathname);
 
-    const isCompilerTarget = [".ts", ".tsx", ".js", ".jsx"].includes(extension);
+    const shouldCompile = isCompilerTarget(pathname);
 
-    if (method === "GET" && isCompilerTarget) {
+    if (method === "GET" && shouldCompile) {
       const bytes = await fetch(url).then((response) => response.arrayBuffer());
       let source = new TextDecoder().decode(bytes);
 
diff --git a/lib/stream.ts b/lib/stream.ts
index 975d7be6..a675331f 100644
--- a/lib/stream.ts
+++ b/lib/stream.ts
@@ -6,10 +6,11 @@
  */
 import type { ReactElement } from "react";
 import * as ReactDOMServer from "react-dom/server";
+import { readableStreamFromReader, StringReader } from "./deps.ts";
+import { log } from "./logger.ts";
 import { ImportMap, Mode, RenderedReadableStream } from "./types.ts";
+import { isCompilerTarget } from "./utils/compiler.ts";
 import { nonNullable } from "./utils/non-nullable.ts";
-import { log } from "./logger.ts";
-import { readableStreamFromReader, StringReader } from "./deps.ts";
 
 export function encodeText(input: string) {
   return new TextEncoder().encode(input);
@@ -170,7 +171,7 @@ export function createImportMapInjectionStream(
     if (mode === "development") {
       importMap.imports = Object.fromEntries(
         Object.entries(importMap.imports).map(([key, value]) => {
-          if (isSpecialPrefix(key)) {
+          if (isSpecialPrefix(key) || isCompilerTarget(value)) {
             value = value.endsWith("/") ? value.slice(0, -1) : value;
             value = `/_ultra/compiler/${encodeURIComponent(value)}/`;
           }
diff --git a/lib/utils/compiler.ts b/lib/utils/compiler.ts
new file mode 100644
index 00000000..ae72c0a6
--- /dev/null
+++ b/lib/utils/compiler.ts
@@ -0,0 +1,6 @@
+import { extname } from "../deps.ts";
+
+export function isCompilerTarget(path: string) {
+  const extension = extname(path);
+  return [".ts", ".tsx", ".js", ".jsx"].includes(extension);
+}

From d9cf8d326c4d84ab118671c2d36b40aa610960a7 Mon Sep 17 00:00:00 2001
From: James Edmonds <james@deckchairlabs.com>
Date: Sun, 2 Jul 2023 03:31:22 +0000
Subject: [PATCH 3/8] fix: update fixture test to @twind/core

---
 test/fixture/client.tsx              | 13 +++++------
 test/fixture/deno.json               |  4 +---
 test/fixture/importMap.json          |  5 +++--
 test/fixture/server.tsx              | 24 ++++++++++++++-------
 test/fixture/src/components/Post.tsx |  3 +--
 test/fixture/src/context/twind.tsx   | 32 ----------------------------
 test/fixture/src/hooks/useTw.ts      |  9 --------
 test/fixture/src/twind.config.js     | 12 +++++++++++
 test/fixture/src/twind.ts            | 30 ++++++++++++++++++++++++++
 test/fixture/theme.ts                |  7 ------
 10 files changed, 70 insertions(+), 69 deletions(-)
 delete mode 100644 test/fixture/src/context/twind.tsx
 delete mode 100644 test/fixture/src/hooks/useTw.ts
 create mode 100644 test/fixture/src/twind.config.js
 create mode 100644 test/fixture/src/twind.ts
 delete mode 100644 test/fixture/theme.ts

diff --git a/test/fixture/client.tsx b/test/fixture/client.tsx
index 48175448..a9775550 100644
--- a/test/fixture/client.tsx
+++ b/test/fixture/client.tsx
@@ -1,15 +1,16 @@
-import { cssomSheet } from "twind";
+import { setup } from "@twind/core";
 import hydrate from "ultra/hydrate.js";
 import App from "./src/app.tsx";
-import { TWProvider } from "./src/context/twind.tsx";
 import { TRPCClientProvider } from "./src/trpc/client.tsx";
-import { theme } from "./theme.ts";
+import { sheet } from "./src/twind.ts";
+import config from "./src/twind.config.js";
+
+//@ts-ignore twind types issue
+setup(config, sheet);
 
 hydrate(
   document,
   <TRPCClientProvider>
-    <TWProvider sheet={cssomSheet()} theme={theme}>
-      <App />
-    </TWProvider>
+    <App />
   </TRPCClientProvider>,
 );
diff --git a/test/fixture/deno.json b/test/fixture/deno.json
index aa7eac9f..860f8614 100644
--- a/test/fixture/deno.json
+++ b/test/fixture/deno.json
@@ -1,9 +1,7 @@
 {
   "lock": false,
   "test": {
-    "files": {
-      "exclude": [".ultra/"]
-    }
+    "exclude": [".ultra/"]
   },
   "tasks": {
     "dev": "deno run -A --no-check --watch ./server.tsx",
diff --git a/test/fixture/importMap.json b/test/fixture/importMap.json
index 45ff082a..0eca3dc1 100644
--- a/test/fixture/importMap.json
+++ b/test/fixture/importMap.json
@@ -12,8 +12,9 @@
     "@trpc/client/": "https://esm.sh/*@trpc/client@10.0.0-rc.1/",
     "@trpc/react-query": "https://esm.sh/*@trpc/react-query@10.0.0-rc.1",
     "zod": "https://deno.land/x/zod@v3.19.1/mod.ts",
-    "twind": "https://esm.sh/twind@0.16.17",
-    "twind/sheets": "https://esm.sh/twind@0.16.17/sheets",
+    "@twind/core": "https://esm.sh/v122/@twind/core@1.0.1",
+    "@twind/preset-autoprefix": "https://esm.sh/v122/@twind/preset-autoprefix@1.0.1",
+    "@twind/preset-tailwind": "https://esm.sh/v122/*@twind/preset-tailwind@1.0.1",
     "ultra/": "https://denopkg.com/exhibitionist-digital/ultra@main/",
     "@ultra/qrcode/": "https://deno.land/x/qrcode@v2.0.0/"
   }
diff --git a/test/fixture/server.tsx b/test/fixture/server.tsx
index a1dfa9e3..8aaf77e6 100644
--- a/test/fixture/server.tsx
+++ b/test/fixture/server.tsx
@@ -1,12 +1,12 @@
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import { serve } from "https://deno.land/std@0.176.0/http/server.ts";
 import { createServer } from "ultra/server.ts";
+import { createHeadInsertionTransformStream } from "ultra/stream.ts";
 import App from "./src/app.tsx";
 import { queryClient } from "./src/query-client.tsx";
-import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import { appRouter } from "./src/server/router.ts";
 import { TRPCServerProvider } from "./src/trpc/server.tsx";
-import { serverSheet, TWProvider } from "./src/context/twind.tsx";
-import { theme } from "./theme.ts";
+import { stringify, tw } from "./src/twind.ts";
 
 const server = await createServer({
   importMapPath: import.meta.resolve("./importMap.json"),
@@ -23,7 +23,6 @@ server.all("/api/trpc/:path", (context) => {
 });
 
 server.get("*", async (context) => {
-  const sheet = serverSheet();
   // clear query cache
   queryClient.clear();
 
@@ -32,13 +31,22 @@ server.get("*", async (context) => {
    */
   const result = await server.render(
     <TRPCServerProvider>
-      <TWProvider sheet={sheet} theme={theme}>
-        <App />
-      </TWProvider>
+      <App />
     </TRPCServerProvider>,
   );
 
-  return context.body(result, 200, {
+  // Inject the style tag into the head of the streamed response
+  const stylesInject = createHeadInsertionTransformStream(() => {
+    if (Array.isArray(tw.target)) {
+      return Promise.resolve(stringify(tw.target));
+    }
+
+    throw new Error("Expected tw.target to be an instance of an Array");
+  });
+
+  const transformed = result.pipeThrough(stylesInject);
+
+  return context.body(transformed, 200, {
     "content-type": "text/html; charset=utf-8",
   });
 });
diff --git a/test/fixture/src/components/Post.tsx b/test/fixture/src/components/Post.tsx
index 0ecf2669..2019ad41 100644
--- a/test/fixture/src/components/Post.tsx
+++ b/test/fixture/src/components/Post.tsx
@@ -1,9 +1,8 @@
 import { trpc } from "../trpc/trpc.ts";
-import { useTw } from "../hooks/useTw.ts";
+import { tw } from "../twind.ts";
 
 export default function Post({ id }: { id: number }) {
   const { data } = trpc.post.get.useQuery({ id });
-  const tw = useTw();
   return (
     <div>
       <div className={tw("p-3")}>{data?.title}</div>
diff --git a/test/fixture/src/context/twind.tsx b/test/fixture/src/context/twind.tsx
deleted file mode 100644
index 57575e94..00000000
--- a/test/fixture/src/context/twind.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { type ReactNode } from "react";
-import { create, type Sheet, ThemeConfiguration, type TW } from "twind";
-
-const TWContext = React.createContext<TW | null>(null);
-
-type TWProviderProps = {
-  sheet: Sheet;
-  theme?: ThemeConfiguration;
-  children?: ReactNode;
-};
-
-export function TWProvider({ sheet, theme, children }: TWProviderProps) {
-  const { tw } = create({ sheet, theme, preflight: false });
-  return <TWContext.Provider value={tw}>{children}</TWContext.Provider>;
-}
-
-export function useTwContext() {
-  const context = React.useContext(TWContext);
-  if (!context) {
-    throw new Error("No TWProvider found");
-  }
-  return context;
-}
-
-export const serverSheet = (target = new Set<string>()) => {
-  return {
-    target,
-    insert: (rule: string) => {
-      target.add(rule);
-    },
-  };
-};
diff --git a/test/fixture/src/hooks/useTw.ts b/test/fixture/src/hooks/useTw.ts
deleted file mode 100644
index 16bf6427..00000000
--- a/test/fixture/src/hooks/useTw.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { type Token } from "twind";
-import { useTwContext } from "../context/twind.tsx";
-
-export function useTw() {
-  const context = useTwContext();
-  return function tw(tokens?: Token | Token[]) {
-    return context(tokens);
-  };
-}
diff --git a/test/fixture/src/twind.config.js b/test/fixture/src/twind.config.js
new file mode 100644
index 00000000..30ed4946
--- /dev/null
+++ b/test/fixture/src/twind.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from "@twind/core";
+import presetAutoprefix from "@twind/preset-autoprefix";
+import presetTailwind from "@twind/preset-tailwind";
+
+export default defineConfig({
+  theme: {
+    fontFamily: {
+      sans: ["monospace"],
+    },
+  },
+  presets: [presetAutoprefix(), presetTailwind()],
+});
diff --git a/test/fixture/src/twind.ts b/test/fixture/src/twind.ts
new file mode 100644
index 00000000..79898b4d
--- /dev/null
+++ b/test/fixture/src/twind.ts
@@ -0,0 +1,30 @@
+// @see https://twind.style/library-mode
+import {
+  cssom,
+  injectGlobal as injectGlobal$,
+  keyframes as keyframes$,
+  stringify as stringify$,
+  twind,
+  tx as tx$,
+  virtual,
+} from "@twind/core";
+import config from "./twind.config.js";
+
+const styleElementId = "__twind";
+
+export const sheet = typeof Deno === "undefined"
+  ? cssom(`style#${styleElementId}`)
+  : virtual();
+
+export const stringify = (target: unknown) =>
+  `<style id="${styleElementId}">${stringify$(target)}</style>`;
+
+//@ts-ignore twind type issue
+export const tw = twind(
+  config,
+  sheet,
+);
+
+export const tx = tx$.bind(tw);
+export const injectGlobal = injectGlobal$.bind(tw);
+export const keyframes = keyframes$.bind(tw);
diff --git a/test/fixture/theme.ts b/test/fixture/theme.ts
deleted file mode 100644
index d3879b39..00000000
--- a/test/fixture/theme.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ThemeConfiguration } from "twind";
-
-export const theme: ThemeConfiguration = {
-  fontFamily: {
-    sans: ["monospace"],
-  },
-};

From 98f9f9e355a84493a6c8635a4db3a4b3e040fd77 Mon Sep 17 00:00:00 2001
From: James Edmonds <james@deckchairlabs.com>
Date: Sun, 2 Jul 2023 03:36:33 +0000
Subject: [PATCH 4/8] fix: no browser fixture

---
 test/fixture/build.test.ts         |  8 ++++----
 test/fixture/server.no-browser.tsx | 26 ++++++++++++++++++--------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/test/fixture/build.test.ts b/test/fixture/build.test.ts
index 1617d934..40c9832c 100644
--- a/test/fixture/build.test.ts
+++ b/test/fixture/build.test.ts
@@ -27,7 +27,7 @@ Deno.test(
 
     assertEquals(ignoredOutput.size, 0);
     assertEquals(result.outputSources.size > 0, true);
-    assertEquals(result.dynamicImports.size, 2);
+    assertEquals(result.dynamicImports.size, 1);
 
     // Test that the built output starts correctly
     const command = new Deno.Command(Deno.execPath(), {
@@ -62,7 +62,7 @@ Deno.test(
     const result = await builder.build();
 
     assertEquals(result.outputSources.size > 0, true);
-    assertEquals(result.dynamicImports.size, 2);
+    assertEquals(result.dynamicImports.size, 1);
 
     // Test that the built output starts correctly
     const command = new Deno.Command(Deno.execPath(), {
@@ -99,7 +99,7 @@ Deno.test(
     const result = await builder.build();
 
     assertEquals(result.outputSources.size > 0, true);
-    assertEquals(result.dynamicImports.size, 2);
+    assertEquals(result.dynamicImports.size, 1);
 
     // Test that the built output starts correctly
     const command = new Deno.Command(Deno.execPath(), {
@@ -136,7 +136,7 @@ Deno.test(
     const result = await builder.build();
 
     assertEquals(result.outputSources.size > 0, true);
-    assertEquals(result.dynamicImports.size, 2);
+    assertEquals(result.dynamicImports.size, 1);
 
     // Test that the built output starts correctly
     const command = new Deno.Command(Deno.execPath(), {
diff --git a/test/fixture/server.no-browser.tsx b/test/fixture/server.no-browser.tsx
index 83f25c61..791cb2a8 100644
--- a/test/fixture/server.no-browser.tsx
+++ b/test/fixture/server.no-browser.tsx
@@ -1,12 +1,12 @@
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import { serve } from "https://deno.land/std@0.176.0/http/server.ts";
 import { createServer } from "ultra/server.ts";
+import { createHeadInsertionTransformStream } from "ultra/stream.ts";
 import App from "./src/app.tsx";
 import { queryClient } from "./src/query-client.tsx";
-import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import { appRouter } from "./src/server/router.ts";
 import { TRPCServerProvider } from "./src/trpc/server.tsx";
-import { serverSheet, TWProvider } from "./src/context/twind.tsx";
-import { theme } from "./theme.ts";
+import { stringify, tw } from "./src/twind.ts";
 
 const server = await createServer();
 
@@ -20,7 +20,6 @@ server.all("/api/trpc/:path", (context) => {
 });
 
 server.get("*", async (context) => {
-  const sheet = serverSheet();
   // clear query cache
   queryClient.clear();
 
@@ -29,13 +28,22 @@ server.get("*", async (context) => {
    */
   const result = await server.render(
     <TRPCServerProvider>
-      <TWProvider sheet={sheet} theme={theme}>
-        <App />
-      </TWProvider>
+      <App />
     </TRPCServerProvider>,
   );
 
-  return context.body(result, 200, {
+  // Inject the style tag into the head of the streamed response
+  const stylesInject = createHeadInsertionTransformStream(() => {
+    if (Array.isArray(tw.target)) {
+      return Promise.resolve(stringify(tw.target));
+    }
+
+    throw new Error("Expected tw.target to be an instance of an Array");
+  });
+
+  const transformed = result.pipeThrough(stylesInject);
+
+  return context.body(transformed, 200, {
     "content-type": "text/html; charset=utf-8",
   });
 });
@@ -43,6 +51,8 @@ server.get("*", async (context) => {
 if (import.meta.main) {
   serve(server.fetch, {
     onListen() {
+      // We exit onListen so we know the server started successfully
+      // in our tests
       Deno.exit(0);
     },
   });

From 1e0eb00d0a94e854d2d0921f2a961c2f83909cc8 Mon Sep 17 00:00:00 2001
From: James Edmonds <james@deckchairlabs.com>
Date: Sun, 2 Jul 2023 03:44:06 +0000
Subject: [PATCH 5/8] fix: update test fixture

---
 test/fixture/client.tsx     |  8 ++++----
 test/fixture/importMap.json |  3 ++-
 test/fixture/server.tsx     | 10 +++++-----
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/test/fixture/client.tsx b/test/fixture/client.tsx
index a9775550..e7fe6af8 100644
--- a/test/fixture/client.tsx
+++ b/test/fixture/client.tsx
@@ -1,9 +1,9 @@
 import { setup } from "@twind/core";
 import hydrate from "ultra/hydrate.js";
-import App from "./src/app.tsx";
-import { TRPCClientProvider } from "./src/trpc/client.tsx";
-import { sheet } from "./src/twind.ts";
-import config from "./src/twind.config.js";
+import App from "@/app.tsx";
+import { TRPCClientProvider } from "@/trpc/client.tsx";
+import { sheet } from "@/twind.ts";
+import config from "@/twind.config.js";
 
 //@ts-ignore twind types issue
 setup(config, sheet);
diff --git a/test/fixture/importMap.json b/test/fixture/importMap.json
index 0eca3dc1..75718a39 100644
--- a/test/fixture/importMap.json
+++ b/test/fixture/importMap.json
@@ -16,6 +16,7 @@
     "@twind/preset-autoprefix": "https://esm.sh/v122/@twind/preset-autoprefix@1.0.1",
     "@twind/preset-tailwind": "https://esm.sh/v122/*@twind/preset-tailwind@1.0.1",
     "ultra/": "https://denopkg.com/exhibitionist-digital/ultra@main/",
-    "@ultra/qrcode/": "https://deno.land/x/qrcode@v2.0.0/"
+    "@ultra/qrcode/": "https://deno.land/x/qrcode@v2.0.0/",
+    "@/": "./src/"
   }
 }
diff --git a/test/fixture/server.tsx b/test/fixture/server.tsx
index 8aaf77e6..c0a60abc 100644
--- a/test/fixture/server.tsx
+++ b/test/fixture/server.tsx
@@ -1,12 +1,12 @@
+import App from "@/app.tsx";
+import { queryClient } from "@/query-client.tsx";
+import { appRouter } from "@/server/router.ts";
+import { TRPCServerProvider } from "@/trpc/server.tsx";
+import { stringify, tw } from "@/twind.ts";
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 import { serve } from "https://deno.land/std@0.176.0/http/server.ts";
 import { createServer } from "ultra/server.ts";
 import { createHeadInsertionTransformStream } from "ultra/stream.ts";
-import App from "./src/app.tsx";
-import { queryClient } from "./src/query-client.tsx";
-import { appRouter } from "./src/server/router.ts";
-import { TRPCServerProvider } from "./src/trpc/server.tsx";
-import { stringify, tw } from "./src/twind.ts";
 
 const server = await createServer({
   importMapPath: import.meta.resolve("./importMap.json"),

From c4105f5a919a235c2237fb10c8e7bf96b276ce86 Mon Sep 17 00:00:00 2001
From: James Edmonds <james@deckchairlabs.com>
Date: Sun, 2 Jul 2023 03:46:51 +0000
Subject: [PATCH 6/8] fix: don't proxy importMap values already proxied

---
 lib/stream.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/stream.ts b/lib/stream.ts
index a675331f..b4619fed 100644
--- a/lib/stream.ts
+++ b/lib/stream.ts
@@ -171,7 +171,10 @@ export function createImportMapInjectionStream(
     if (mode === "development") {
       importMap.imports = Object.fromEntries(
         Object.entries(importMap.imports).map(([key, value]) => {
-          if (isSpecialPrefix(key) || isCompilerTarget(value)) {
+          if (
+            value.startsWith("/_ultra/compiler/") === false &&
+            (isSpecialPrefix(key) || isCompilerTarget(value))
+          ) {
             value = value.endsWith("/") ? value.slice(0, -1) : value;
             value = `/_ultra/compiler/${encodeURIComponent(value)}/`;
           }

From 26c109e255e0208e1b70800019b6379b3bd4a07a Mon Sep 17 00:00:00 2001
From: James Edmonds <james@deckchairlabs.com>
Date: Sun, 2 Jul 2023 03:47:24 +0000
Subject: [PATCH 7/8] fix: update basic example to use `@/` prefix

---
 examples/basic/client.tsx | 2 +-
 examples/basic/server.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/basic/client.tsx b/examples/basic/client.tsx
index a682b603..8918fe24 100644
--- a/examples/basic/client.tsx
+++ b/examples/basic/client.tsx
@@ -1,4 +1,4 @@
 import hydrate from "ultra/hydrate.js";
-import App from "./src/app.tsx";
+import App from "@/app.tsx";
 
 hydrate(document, <App />);
diff --git a/examples/basic/server.tsx b/examples/basic/server.tsx
index 9404e94f..e190749a 100644
--- a/examples/basic/server.tsx
+++ b/examples/basic/server.tsx
@@ -1,6 +1,6 @@
 import { serve } from "https://deno.land/std@0.176.0/http/server.ts";
 import { createServer } from "ultra/server.ts";
-import App from "./src/app.tsx";
+import App from "@/app.tsx";
 
 const server = await createServer({
   importMapPath: import.meta.resolve("./importMap.json"),

From e032491a8656b977eac3ed5bb88a547de25b4bcd Mon Sep 17 00:00:00 2001
From: James Edmonds <james@deckchairlabs.com>
Date: Sun, 2 Jul 2023 03:53:01 +0000
Subject: [PATCH 8/8] wip

---
 test/fixture/importMap.json | 28 ++++++++++++++--------------
 test/fixture/src/app.tsx    |  4 ++--
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/test/fixture/importMap.json b/test/fixture/importMap.json
index 75718a39..2a0b319e 100644
--- a/test/fixture/importMap.json
+++ b/test/fixture/importMap.json
@@ -1,20 +1,20 @@
 {
   "imports": {
-    "react": "https://esm.sh/react@18.2.0?dev",
-    "react/": "https://esm.sh/react@18.2.0&dev/",
-    "react-dom": "https://esm.sh/react-dom@18.2.0?dev",
-    "react-dom/": "https://esm.sh/react-dom@18.2.0&dev/",
-    "@tanstack/react-query": "https://esm.sh/@tanstack/react-query@4.13.0?external=react",
-    "@tanstack/react-query-devtools": "https://esm.sh/@tanstack/react-query-devtools@4.13.0?external=react,@tanstack/react-query&dev",
-    "@trpc/server": "https://esm.sh/@trpc/server@10.0.0-rc.1",
-    "@trpc/server/": "https://esm.sh/@trpc/server@10.0.0-rc.1/",
-    "@trpc/client": "https://esm.sh/*@trpc/client@10.0.0-rc.1",
-    "@trpc/client/": "https://esm.sh/*@trpc/client@10.0.0-rc.1/",
-    "@trpc/react-query": "https://esm.sh/*@trpc/react-query@10.0.0-rc.1",
+    "react": "https://esm.sh/v125/react@18.2.0?dev",
+    "react/": "https://esm.sh/v125/react@18.2.0&dev/",
+    "react-dom": "https://esm.sh/v125/react-dom@18.2.0?dev",
+    "react-dom/": "https://esm.sh/v125/react-dom@18.2.0&dev/",
+    "@tanstack/react-query": "https://esm.sh/v125/@tanstack/react-query@4.13.0?external=react",
+    "@tanstack/react-query-devtools": "https://esm.sh/v125/@tanstack/react-query-devtools@4.13.0?external=react,@tanstack/react-query&dev",
+    "@trpc/server": "https://esm.sh/v125/@trpc/server@10.0.0-rc.1",
+    "@trpc/server/": "https://esm.sh/v125/@trpc/server@10.0.0-rc.1/",
+    "@trpc/client": "https://esm.sh/v125/*@trpc/client@10.0.0-rc.1",
+    "@trpc/client/": "https://esm.sh/v125/*@trpc/client@10.0.0-rc.1/",
+    "@trpc/react-query": "https://esm.sh/v125/*@trpc/react-query@10.0.0-rc.1",
     "zod": "https://deno.land/x/zod@v3.19.1/mod.ts",
-    "@twind/core": "https://esm.sh/v122/@twind/core@1.0.1",
-    "@twind/preset-autoprefix": "https://esm.sh/v122/@twind/preset-autoprefix@1.0.1",
-    "@twind/preset-tailwind": "https://esm.sh/v122/*@twind/preset-tailwind@1.0.1",
+    "@twind/core": "https://esm.sh/v125/@twind/core@1.0.1",
+    "@twind/preset-autoprefix": "https://esm.sh/v125/@twind/preset-autoprefix@1.0.1",
+    "@twind/preset-tailwind": "https://esm.sh/v125/*@twind/preset-tailwind@1.0.1",
     "ultra/": "https://denopkg.com/exhibitionist-digital/ultra@main/",
     "@ultra/qrcode/": "https://deno.land/x/qrcode@v2.0.0/",
     "@/": "./src/"
diff --git a/test/fixture/src/app.tsx b/test/fixture/src/app.tsx
index 27a0a13f..e7106f9a 100644
--- a/test/fixture/src/app.tsx
+++ b/test/fixture/src/app.tsx
@@ -1,8 +1,8 @@
 import { lazy, Suspense } from "react";
 import useAsset from "ultra/hooks/use-asset.js";
-import Post from "./components/Post.tsx";
+import Post from "@/components/Post.tsx";
 
-const LazyPost = lazy(() => import("./components/Post.tsx"));
+const LazyPost = lazy(() => import("@/components/Post.tsx"));
 
 export default function App() {
   return (