From 446ce59d3d07acf827884c7e198cdff5f899646b Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Mon, 30 Oct 2023 17:53:39 -0700
Subject: [PATCH 1/4] feat: playground

---
 app/routes/_marketing.playground.tsx | 308 +++++++++++++++++++++++++++
 app/ui/header.tsx                    |   1 +
 package-lock.json                    |  42 ++++
 package.json                         |   2 +
 4 files changed, 353 insertions(+)
 create mode 100644 app/routes/_marketing.playground.tsx

diff --git a/app/routes/_marketing.playground.tsx b/app/routes/_marketing.playground.tsx
new file mode 100644
index 00000000..ecbe6638
--- /dev/null
+++ b/app/routes/_marketing.playground.tsx
@@ -0,0 +1,308 @@
+import * as React from "react";
+import { type HeadersFunction } from "@remix-run/node";
+import { Await } from "@remix-run/react";
+import ManacoEditor from "@monaco-editor/react";
+import type * as wc from "@webcontainer/api";
+
+export default function Playground() {
+  return (
+    <div className="flex flex-1 m-auto w-[90rem] max-w-full px-4 sm:px-6 lg:px-8">
+      <div className="flex flex-1">
+        <section className="flex flex-1">
+          <style
+            dangerouslySetInnerHTML={{
+              __html: ".playground { height: 100%; }",
+            }}
+          />
+          <Editor />
+        </section>
+        <section className="flex-1">
+          <Preview />
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export const headers: HeadersFunction = () => {
+  const headers = new Headers();
+  headers.set("Cross-Origin-Embedder-Policy", "require-corp");
+  headers.set("Cross-Origin-Opener-Policy", "same-origin");
+  return headers;
+};
+
+function Preview() {
+  const state = useWebContainer();
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const loadingState = (
+    <div className="w-full h-full flex items-center justify-center">
+      {state?.status
+        ? state.status === "ready"
+          ? "waiting for server..."
+          : `${state.status}...`
+        : "booting..."}
+    </div>
+  );
+
+  console.log({ mounted, state });
+  if (!mounted || !state?.urlPromise) {
+    return loadingState;
+  }
+
+  return (
+    <React.Suspense fallback={loadingState}>
+      <Await resolve={state.urlPromise}>
+        {(url) => (
+          <iframe className="bg-white w-full h-full border" src={url} />
+        )}
+      </Await>
+    </React.Suspense>
+  );
+}
+
+function Editor() {
+  const [localContainer, setLocalContainer] =
+    React.useState<wc.WebContainer | null>(null);
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const state = useWebContainer();
+  const containerOrPromise =
+    state?.container ?? state?.containerPromise ?? null;
+
+  const loadingState = (
+    <div className="w-full h-full flex items-center justify-center">
+      {state?.status ? `${state.status}...` : "booting..."}
+    </div>
+  );
+
+  if (!mounted) {
+    return loadingState;
+  }
+
+  const editor = (
+    <ManacoEditor
+      key="playground-editor"
+      className="playground"
+      loading={loadingState}
+      wrapperProps={{
+        className: "flex-1",
+        style: { height: "unset" },
+      }}
+      defaultLanguage="javascript"
+      defaultValue={DEFAULT_ROUTE}
+      theme="vs-dark"
+      onChange={(value) => {
+        if (!localContainer) return;
+        localContainer.fs.writeFile(
+          "/app/routes/_index.tsx",
+          value || "",
+          "utf8",
+        );
+      }}
+    />
+  );
+  return (
+    <React.Suspense fallback={loadingState}>
+      <Await resolve={containerOrPromise}>
+        {(container) => {
+          if (localContainer !== container) {
+            setTimeout(() => {
+              setLocalContainer(container);
+            }, 0);
+          }
+          return editor;
+        }}
+      </Await>
+    </React.Suspense>
+  );
+}
+
+interface WebContainerStore {
+  state: {
+    container?: wc.WebContainer;
+    containerPromise?: Promise<wc.WebContainer>;
+    urlPromise?: Promise<string>;
+    status:
+      | "idle"
+      | "booting"
+      | "initializing"
+      | "installing"
+      | "ready"
+      | "error";
+  };
+  subscribe: (onStoreChange: () => void) => () => void;
+  getSnapshot: () => (typeof webContainerStore)["state"];
+  getServerSnapshot: () => (typeof webContainerStore)["state"];
+  update: (newState: Partial<(typeof webContainerStore)["state"]>) => void;
+}
+
+declare global {
+  interface Window {
+    webContainerStore?: WebContainerStore;
+  }
+}
+
+const onChangeHandlers = new Set<() => void>();
+let webContainerStore: WebContainerStore = {
+  state: {
+    status: "idle",
+  },
+  subscribe: (onChange) => {
+    onChangeHandlers.add(onChange);
+    return () => {
+      onChangeHandlers.delete(onChange);
+    };
+  },
+  getSnapshot: () => webContainerStore.state,
+  getServerSnapshot: () => webContainerStore.state,
+  update: (newState) => {
+    webContainerStore.state = Object.assign(
+      {},
+      webContainerStore.state,
+      newState,
+    );
+    onChangeHandlers.forEach((onChange) => onChange());
+  },
+};
+if (typeof document !== "undefined") {
+  if (window.webContainerStore) {
+    webContainerStore = window.webContainerStore;
+  } else {
+    window.webContainerStore = webContainerStore;
+  }
+}
+
+function useWebContainer() {
+  const store = React.useSyncExternalStore(
+    webContainerStore.subscribe,
+    webContainerStore.getSnapshot,
+    webContainerStore.getServerSnapshot,
+  );
+
+  if (typeof document === "undefined") {
+    return null;
+  }
+
+  if (!store.container && !store.containerPromise) {
+    const deferredURL = new Deferred<string>();
+    webContainerStore.update({
+      status: "booting",
+      urlPromise: deferredURL.promise,
+      containerPromise: import("@webcontainer/api")
+        .then(({ WebContainer }) => WebContainer.boot())
+        .then(async (container) => {
+          webContainerStore.update({ status: "initializing" });
+
+          // npx -y create-remix@latest . -y --no-color --no-motion --no-install --no-git-init
+          const process = await container.spawn("npx", [
+            "-y",
+            "create-remix@latest",
+            ".",
+            "-y",
+            "--no-color",
+            "--no-motion",
+            "--no-install",
+            "--no-git-init",
+          ]);
+          if ((await process.exit) !== 0) {
+            throw new Error("Failed to create remix app");
+          }
+
+          container.fs.writeFile(
+            "/app/routes/_index.tsx",
+            DEFAULT_ROUTE,
+            "utf8",
+          );
+
+          return container;
+        })
+        .then(async (container) => {
+          webContainerStore.update({ status: "installing" });
+          const process = await container.spawn("npm", ["install"]);
+          if ((await process.exit) !== 0) {
+            throw new Error("Failed to install dependencies");
+          }
+
+          return container;
+        })
+        .then((container) => {
+          webContainerStore.update({
+            status: "ready",
+            container,
+            containerPromise: undefined,
+          });
+
+          container.on("server-ready", (port, url) => {
+            if (port === 3000) {
+              deferredURL.resolve(url);
+            }
+          });
+
+          container
+            .spawn("npm", ["run", "dev"])
+            .then(async (process) => {
+              return process.exit;
+            })
+            .catch((reason) => {
+              deferredURL.reject(reason);
+            });
+
+          return container;
+        })
+        .catch((reason) => {
+          deferredURL.reject(reason);
+          throw reason;
+        }),
+    });
+  }
+
+  return store;
+}
+
+class Deferred<T> {
+  promise: Promise<T>;
+  resolve!: (value: T) => void;
+  reject!: (reason?: any) => void;
+  constructor() {
+    this.promise = new Promise<T>((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+    });
+  }
+}
+
+const js = String.raw;
+const DEFAULT_ROUTE = js`
+import { Form, useActionData } from "@remix-run/react";
+
+export async function action({ request }) {
+  const formData = new URLSearchParams(await request.text());
+  return {
+    message: "Hello, " + (formData.get("name") || "World") + "!",
+  };
+}
+
+export default function Route() {
+  const actionData = useActionData();
+
+  return (
+    <main>
+      <h1>Hello, World!</h1>
+      <Form method="post">
+        <label>
+          What's your name?
+          <input name="name" />
+        </label>
+        <button type="submit">Submit</button>
+      </Form>
+      {actionData && <p>{actionData.message}</p>}
+    </main>
+  );
+}
+`.trim();
diff --git a/app/ui/header.tsx b/app/ui/header.tsx
index 664ddd31..a9f3e794 100644
--- a/app/ui/header.tsx
+++ b/app/ui/header.tsx
@@ -41,6 +41,7 @@ export function Header({
         <HeaderLink to="/blog">Blog</HeaderLink>
         <HeaderLink to="/showcase">Showcase</HeaderLink>
         <HeaderLink to="/resources">Resources</HeaderLink>
+        <HeaderLink to="/playground">Playground</HeaderLink>
       </nav>
 
       <HeaderMenuMobile className="md:hidden" />
diff --git a/package-lock.json b/package-lock.json
index 78540d08..22e438e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,11 +10,13 @@
       "dependencies": {
         "@docsearch/css": "^3.5.2",
         "@docsearch/react": "^3.5.2",
+        "@monaco-editor/react": "^4.6.0",
         "@remix-run/express": "2.6.0",
         "@remix-run/node": "2.6.0",
         "@remix-run/react": "2.6.0",
         "@remix-run/v1-meta": "0.1.3",
         "@tailwindcss/aspect-ratio": "^0.4.2",
+        "@webcontainer/api": "^1.1.8",
         "cheerio": "^1.0.0-rc.12",
         "clsx": "^2.1.0",
         "compression": "^1.7.4",
@@ -2378,6 +2380,30 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -4808,6 +4834,11 @@
       "resolved": "https://registry.npmjs.org/@web3-storage/multipart-parser/-/multipart-parser-1.0.0.tgz",
       "integrity": "sha512-BEO6al7BYqcnfX15W2cnGR+Q566ACXAT9UQykORCWW80lmkpWsnEob6zJS1ZVBKsSJC8+7vJkHwlp+lXG1UCdw=="
     },
+    "node_modules/@webcontainer/api": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@webcontainer/api/-/api-1.1.8.tgz",
+      "integrity": "sha512-m9WRj38oCoFPrqZOTeJcncPjnZ00FZUMq9YHEXxdhAoYhhQ69Rz4qK5p444cIPaMy2j8H7HcNLcAIwMGWnpMpw=="
+    },
     "node_modules/@zxing/text-encoding": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
@@ -15517,6 +15548,12 @@
       "integrity": "sha512-yoe+JbhTClckZ67b2itRtistFKf8yPYelHLc7e5xAwtNAXxM6wJTUx2C7QeVSJFDzKT7bCIFyBVybPMKvmB9AA==",
       "dev": true
     },
+    "node_modules/monaco-editor": {
+      "version": "0.44.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.44.0.tgz",
+      "integrity": "sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==",
+      "peer": true
+    },
     "node_modules/morgan": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
@@ -19030,6 +19067,11 @@
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
       "dev": true
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
diff --git a/package.json b/package.json
index 57220969..3f11667d 100644
--- a/package.json
+++ b/package.json
@@ -22,11 +22,13 @@
   "dependencies": {
     "@docsearch/css": "^3.5.2",
     "@docsearch/react": "^3.5.2",
+    "@monaco-editor/react": "^4.6.0",
     "@remix-run/express": "2.6.0",
     "@remix-run/node": "2.6.0",
     "@remix-run/react": "2.6.0",
     "@remix-run/v1-meta": "0.1.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@webcontainer/api": "^1.1.8",
     "cheerio": "^1.0.0-rc.12",
     "clsx": "^2.1.0",
     "compression": "^1.7.4",

From 9b49533a5981766f806c853c2f74ee34adcf8769 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Tue, 31 Oct 2023 11:44:57 -0700
Subject: [PATCH 2/4] cleanup loading states a little and give the appearance
 of a faster boot

---
 app/routes/_marketing.playground.tsx | 134 ++++++++++++++-------------
 1 file changed, 72 insertions(+), 62 deletions(-)

diff --git a/app/routes/_marketing.playground.tsx b/app/routes/_marketing.playground.tsx
index ecbe6638..b05f6677 100644
--- a/app/routes/_marketing.playground.tsx
+++ b/app/routes/_marketing.playground.tsx
@@ -5,23 +5,43 @@ import ManacoEditor from "@monaco-editor/react";
 import type * as wc from "@webcontainer/api";
 
 export default function Playground() {
-  return (
-    <div className="flex flex-1 m-auto w-[90rem] max-w-full px-4 sm:px-6 lg:px-8">
-      <div className="flex flex-1">
-        <section className="flex flex-1">
-          <style
-            dangerouslySetInnerHTML={{
-              __html: ".playground { height: 100%; }",
-            }}
-          />
-          <Editor />
-        </section>
-        <section className="flex-1">
-          <Preview />
-        </section>
-      </div>
+  const state = useWebContainer();
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const loadingState = (
+    <div className="w-full h-full flex items-center justify-center">
+      {state?.status ? `${state.status}...` : "booting..."}
     </div>
   );
+
+  if (!mounted || (!state?.containerPromise && !state?.container)) {
+    return loadingState;
+  }
+
+  return (
+    <Await resolve={state.containerPromise}>
+      {() => (
+        <div className="flex flex-1 m-auto w-[90rem] max-w-full px-4 sm:px-6 lg:px-8">
+          <div className="flex flex-1">
+            <section className="flex flex-1">
+              <style
+                dangerouslySetInnerHTML={{
+                  __html: ".playground { height: 100%; }",
+                }}
+              />
+              <Editor />
+            </section>
+            <section className="flex-1">
+              <Preview />
+            </section>
+          </div>
+        </div>
+      )}
+    </Await>
+  );
 }
 
 export const headers: HeadersFunction = () => {
@@ -48,7 +68,6 @@ function Preview() {
     </div>
   );
 
-  console.log({ mounted, state });
   if (!mounted || !state?.urlPromise) {
     return loadingState;
   }
@@ -67,29 +86,15 @@ function Preview() {
 function Editor() {
   const [localContainer, setLocalContainer] =
     React.useState<wc.WebContainer | null>(null);
-  const [mounted, setMounted] = React.useState(false);
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
   const state = useWebContainer();
   const containerOrPromise =
     state?.container ?? state?.containerPromise ?? null;
 
-  const loadingState = (
-    <div className="w-full h-full flex items-center justify-center">
-      {state?.status ? `${state.status}...` : "booting..."}
-    </div>
-  );
-
-  if (!mounted) {
-    return loadingState;
-  }
-
   const editor = (
     <ManacoEditor
       key="playground-editor"
       className="playground"
-      loading={loadingState}
+      loading={"loading editor..."}
       wrapperProps={{
         className: "flex-1",
         style: { height: "unset" },
@@ -108,7 +113,7 @@ function Editor() {
     />
   );
   return (
-    <React.Suspense fallback={loadingState}>
+    <React.Suspense fallback={editor}>
       <Await resolve={containerOrPromise}>
         {(container) => {
           if (localContainer !== container) {
@@ -130,9 +135,9 @@ interface WebContainerStore {
     urlPromise?: Promise<string>;
     status:
       | "idle"
-      | "booting"
-      | "initializing"
-      | "installing"
+      | "booting container"
+      | "initializing template"
+      | "installing dependencies"
       | "ready"
       | "error";
   };
@@ -192,14 +197,13 @@ function useWebContainer() {
   if (!store.container && !store.containerPromise) {
     const deferredURL = new Deferred<string>();
     webContainerStore.update({
-      status: "booting",
+      status: "booting container",
       urlPromise: deferredURL.promise,
       containerPromise: import("@webcontainer/api")
         .then(({ WebContainer }) => WebContainer.boot())
         .then(async (container) => {
-          webContainerStore.update({ status: "initializing" });
+          webContainerStore.update({ status: "initializing template" });
 
-          // npx -y create-remix@latest . -y --no-color --no-motion --no-install --no-git-init
           const process = await container.spawn("npx", [
             "-y",
             "create-remix@latest",
@@ -209,6 +213,8 @@ function useWebContainer() {
             "--no-motion",
             "--no-install",
             "--no-git-init",
+            "--template",
+            "https://github.com/remix-run/remix/tree/main/templates/unstable-vite",
           ]);
           if ((await process.exit) !== 0) {
             throw new Error("Failed to create remix app");
@@ -222,37 +228,41 @@ function useWebContainer() {
 
           return container;
         })
-        .then(async (container) => {
-          webContainerStore.update({ status: "installing" });
-          const process = await container.spawn("npm", ["install"]);
-          if ((await process.exit) !== 0) {
-            throw new Error("Failed to install dependencies");
-          }
-
-          return container;
-        })
         .then((container) => {
-          webContainerStore.update({
-            status: "ready",
-            container,
-            containerPromise: undefined,
-          });
+          webContainerStore.update({ status: "installing dependencies" });
+          container
+            .spawn("npm", ["install"])
+            .then((process) => process.exit)
+            .then((exit) => {
+              if (exit !== 0) {
+                throw new Error("Failed to install dependencies");
+              }
+            })
+            .then(() => {
+              webContainerStore.update({
+                status: "ready",
+                container,
+                containerPromise: undefined,
+              });
 
-          container.on("server-ready", (port, url) => {
-            if (port === 3000) {
-              deferredURL.resolve(url);
-            }
-          });
+              container.on("server-ready", (port, url) => {
+                if (port === 5173) {
+                  deferredURL.resolve(url);
+                }
+              });
 
-          container
-            .spawn("npm", ["run", "dev"])
-            .then(async (process) => {
-              return process.exit;
+              return container
+                .spawn("npm", ["run", "dev"])
+                .then(async (process) => {
+                  return process.exit;
+                });
+            })
+            .then(() => {
+              throw new Error("Dev server exited unexpectedly");
             })
             .catch((reason) => {
               deferredURL.reject(reason);
             });
-
           return container;
         })
         .catch((reason) => {

From 3afc9b8ad5cb4856c575012adf8f36d4a95dc5be Mon Sep 17 00:00:00 2001
From: Brooks Lybrand <brookslybrand@gmail.com>
Date: Thu, 15 Feb 2024 10:13:18 -0600
Subject: [PATCH 3/4] Update packages

---
 app/routes/_marketing.playground.tsx | 12 ++++++++----
 package-lock.json                    |  8 ++++----
 package.json                         |  2 +-
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/app/routes/_marketing.playground.tsx b/app/routes/_marketing.playground.tsx
index b05f6677..14273608 100644
--- a/app/routes/_marketing.playground.tsx
+++ b/app/routes/_marketing.playground.tsx
@@ -12,7 +12,7 @@ export default function Playground() {
   }, []);
 
   const loadingState = (
-    <div className="w-full h-full flex items-center justify-center">
+    <div className="flex h-full w-full items-center justify-center">
       {state?.status ? `${state.status}...` : "booting..."}
     </div>
   );
@@ -24,7 +24,7 @@ export default function Playground() {
   return (
     <Await resolve={state.containerPromise}>
       {() => (
-        <div className="flex flex-1 m-auto w-[90rem] max-w-full px-4 sm:px-6 lg:px-8">
+        <div className="m-auto flex w-[90rem] max-w-full flex-1 px-4 sm:px-6 lg:px-8">
           <div className="flex flex-1">
             <section className="flex flex-1">
               <style
@@ -59,7 +59,7 @@ function Preview() {
   }, []);
 
   const loadingState = (
-    <div className="w-full h-full flex items-center justify-center">
+    <div className="flex h-full w-full items-center justify-center">
       {state?.status
         ? state.status === "ready"
           ? "waiting for server..."
@@ -76,7 +76,11 @@ function Preview() {
     <React.Suspense fallback={loadingState}>
       <Await resolve={state.urlPromise}>
         {(url) => (
-          <iframe className="bg-white w-full h-full border" src={url} />
+          <iframe
+            className="h-full w-full border bg-white"
+            src={url}
+            title="Remix preview"
+          />
         )}
       </Await>
     </React.Suspense>
diff --git a/package-lock.json b/package-lock.json
index 22e438e1..cd4e8d47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@remix-run/react": "2.6.0",
         "@remix-run/v1-meta": "0.1.3",
         "@tailwindcss/aspect-ratio": "^0.4.2",
-        "@webcontainer/api": "^1.1.8",
+        "@webcontainer/api": "^1.1.9",
         "cheerio": "^1.0.0-rc.12",
         "clsx": "^2.1.0",
         "compression": "^1.7.4",
@@ -4835,9 +4835,9 @@
       "integrity": "sha512-BEO6al7BYqcnfX15W2cnGR+Q566ACXAT9UQykORCWW80lmkpWsnEob6zJS1ZVBKsSJC8+7vJkHwlp+lXG1UCdw=="
     },
     "node_modules/@webcontainer/api": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/@webcontainer/api/-/api-1.1.8.tgz",
-      "integrity": "sha512-m9WRj38oCoFPrqZOTeJcncPjnZ00FZUMq9YHEXxdhAoYhhQ69Rz4qK5p444cIPaMy2j8H7HcNLcAIwMGWnpMpw=="
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@webcontainer/api/-/api-1.1.9.tgz",
+      "integrity": "sha512-Sp6PV0K9D/3f8fSbCubqhfmBFH8XbngZCBOCF+aExyGqnz2etmw+KYvbQ/JxYvYX5KPaSxM+asFQwoP2RHl5cg=="
     },
     "node_modules/@zxing/text-encoding": {
       "version": "0.9.0",
diff --git a/package.json b/package.json
index 3f11667d..300a0130 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "@remix-run/react": "2.6.0",
     "@remix-run/v1-meta": "0.1.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@webcontainer/api": "^1.1.8",
+    "@webcontainer/api": "^1.1.9",
     "cheerio": "^1.0.0-rc.12",
     "clsx": "^2.1.0",
     "compression": "^1.7.4",

From 6c35471cfeaeb8dbe89199338ed4ed16651766b6 Mon Sep 17 00:00:00 2001
From: Brooks Lybrand <brookslybrand@gmail.com>
Date: Fri, 23 Feb 2024 15:05:06 -0600
Subject: [PATCH 4/4] Fix template url

---
 app/routes/_marketing.playground.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/routes/_marketing.playground.tsx b/app/routes/_marketing.playground.tsx
index 14273608..b17f68cb 100644
--- a/app/routes/_marketing.playground.tsx
+++ b/app/routes/_marketing.playground.tsx
@@ -218,7 +218,7 @@ function useWebContainer() {
             "--no-install",
             "--no-git-init",
             "--template",
-            "https://github.com/remix-run/remix/tree/main/templates/unstable-vite",
+            "https://github.com/remix-run/remix/tree/main/templates/vite",
           ]);
           if ((await process.exit) !== 0) {
             throw new Error("Failed to create remix app");