@solidjs/start 2.0.0-beta.9 → 2.0.0-rc.2

package/dist/server/fetchEvent.js

@@ -22,5 +22,15 @@ export function mergeResponseHeaders(h3Event, headers) {
         h3Event.res.headers.append(key, value);
     }
 }
+/**
+ * Wrap an h3 event handler so Solid's request context is available while it runs.
+ *
+ * @experimental
+ */
 export const decorateHandler = (fn) => (event => provideRequestEvent(getFetchEvent(event), () => fn(event)));
+/**
+ * Wrap h3 middleware so Solid's request context is available while it runs.
+ *
+ * @experimental
+ */
 export const decorateMiddleware = (fn) => ((event, next) => provideRequestEvent(getFetchEvent(event), () => fn(event, next)));

package/dist/server/handler.d.ts

@@ -1,6 +1,6 @@
 import { H3 } from "h3/generic";
 import type { JSX } from "solid-js";
 import type { FetchEvent, HandlerOptions, PageEvent } from "./types.ts";
-export declare function createBaseHandler(createPageEvent: (e: FetchEvent) => Promise<PageEvent>, fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>)): H3;
-export declare function createHandler(fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>)): H3;
+export declare function createBaseHandler(createPageEvent: (e: FetchEvent) => Promise<PageEvent>, fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>), routerLoad?: (event: FetchEvent) => Promise<void>): H3;
+export declare function createHandler(fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions | Promise<HandlerOptions>), routerLoad?: (event: FetchEvent) => Promise<void>): H3;
 export declare function createPageEvent(ctx: FetchEvent): Promise<PageEvent>;

package/dist/server/handler.js

@@ -8,8 +8,10 @@ import { getSsrManifest } from "./manifest/ssr-manifest.js";
 import { matchAPIRoute } from "./routes.js";
 import { handleServerFunction } from "../fns/handler.js";
 import { getExpectedRedirectStatus } from "./util.js";
+import { toWebReadableStream } from "./web-stream.js";
+import { stripPathBase } from "./strip-path-base.js";
 const SERVER_FN_BASE = "/_server";
-export function createBaseHandler(createPageEvent, fn, options = {}) {
+export function createBaseHandler(createPageEvent, fn, options = {}, routerLoad) {
     const handler = defineHandler({
         middleware: middleware.length ? middleware.map(decorateMiddleware) : undefined,
         handler: decorateHandler(async (e) => {
@@ -45,6 +47,8 @@ export function createBaseHandler(createPageEvent, fn, options = {}) {
                         return;
                 }
             }
+            if (routerLoad)
+                await routerLoad(event);
             const context = await createPageEvent(event);
             const resolvedOptions = typeof options === "function" ? await options(context) : { ...options };
             const mode = resolvedOptions.mode || "stream";
@@ -93,22 +97,17 @@ export function createBaseHandler(createPageEvent, fn, options = {}) {
             if (mode === "async")
                 return await stream;
             delete stream.then;
-            // using TransformStream in dev can cause solid-start-dev-server to crash
-            // when stream is cancelled
-            if (globalThis.USING_SOLID_START_DEV_SERVER)
-                return stream;
-            // returning stream directly breaks cloudflare workers
-            const { writable, readable } = new TransformStream();
-            stream.pipeTo(writable);
-            return readable;
+            // h3 expects a standard web ReadableStream across runtimes. The adapter
+            // also tolerates cancellation while Solid finishes outstanding work.
+            return toWebReadableStream(stream);
         }),
     });
     const app = new H3();
     app.use(handler);
     return app;
 }
-export function createHandler(fn, options = {}) {
-    return createBaseHandler(createPageEvent, fn, options);
+export function createHandler(fn, options = {}, routerLoad) {
+    return createBaseHandler(createPageEvent, fn, options, routerLoad);
 }
 export async function createPageEvent(ctx) {
     ctx.response.headers.set("Content-Type", "text/html");
@@ -216,7 +215,6 @@ function produceResponseWithEventHeaders(res) {
     return ret;
 }
 function stripBaseUrl(path) {
-    if (import.meta.env.BASE_URL === "/" || import.meta.env.BASE_URL === "")
-        return path;
-    return path.slice(import.meta.env.BASE_URL.length);
+    const base = import.meta.env.SERVER_BASE_URL || import.meta.env.BASE_URL || "/";
+    return stripPathBase(path, base);
 }

package/dist/server/index.d.ts

@@ -1,6 +1,7 @@
 export { default as lazy } from "../shared/lazy.ts";
 export { getServerFunctionMeta } from "../shared/serverFunction.ts";
 export { StartServer } from "./StartServer.tsx";
+export { decorateHandler, decorateMiddleware } from "./fetchEvent.ts";
 export { createHandler } from "./handler.ts";
 export type { APIEvent, APIHandler, Asset, ContextMatches, DocumentComponentProps, FetchEvent, HandlerOptions, PageEvent, ResponseStub, ServerFunctionMeta, } from "./types.ts";
 /**

package/dist/server/index.jsx

@@ -1,6 +1,7 @@
 export { default as lazy } from "../shared/lazy.js";
 export { getServerFunctionMeta } from "../shared/serverFunction.js";
 export { StartServer } from "./StartServer.jsx";
+export { decorateHandler, decorateMiddleware } from "./fetchEvent.js";
 export { createHandler } from "./handler.js";
 /**
  * Checks if user has set a redirect status in the response.

package/dist/server/spa/StartServer.jsx

@@ -18,7 +18,7 @@ export function StartServer(props) {
       <TopErrorBoundary>
         <props.document scripts={<>
               <PatchVirtualDevStyles nonce={nonce}/>
-              <script type="module" src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY)}/>
+              <script type="module" src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY_URL)}/>
             </>}/>
       </TopErrorBoundary>
     </NoHydration>);

package/dist/server/spa/handler.d.ts

@@ -1,8 +1,8 @@
 import type { H3 } from "h3/generic";
 import type { JSX } from "solid-js";
-import type { HandlerOptions, PageEvent } from "../types.ts";
+import type { FetchEvent, HandlerOptions, PageEvent } from "../types.ts";
 /**
  *
  * Read more: https://docs.solidjs.com/solid-start/reference/server/create-handler
  */
-export declare function createHandler(fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions)): H3;
+export declare function createHandler(fn: (context: PageEvent) => JSX.Element, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions), routerLoad?: (event: FetchEvent) => Promise<void>): H3;

package/dist/server/spa/handler.js

@@ -4,8 +4,8 @@ import { getSsrManifest } from "../manifest/ssr-manifest.js";
  *
  * Read more: https://docs.solidjs.com/solid-start/reference/server/create-handler
  */
-export function createHandler(fn, options) {
-    return createBaseHandler(createPageEvent, fn, options);
+export function createHandler(fn, options, routerLoad) {
+    return createBaseHandler(createPageEvent, fn, options, routerLoad);
 }
 async function createPageEvent(ctx) {
     const manifest = getSsrManifest("ssr");

package/dist/server/strip-path-base.d.ts

@@ -0,0 +1 @@
+export declare function stripPathBase(path: string, base: string): string;

package/dist/server/strip-path-base.js

@@ -0,0 +1,10 @@
+export function stripPathBase(path, base) {
+    if (!base || base === "/")
+        return path;
+    const normalizedBase = base.endsWith("/") ? base.slice(0, -1) : base;
+    if (path === normalizedBase)
+        return "/";
+    if (path.startsWith(`${normalizedBase}/`))
+        return path.slice(normalizedBase.length);
+    return path;
+}

package/dist/server/web-stream.d.ts

@@ -0,0 +1,9 @@
+type PipeableStream = {
+    pipe(writable: {
+        write(payload: string): void;
+        end(): void;
+    }): void;
+};
+/** Convert Solid's streaming SSR result into a cancellation-safe web stream. */
+export declare function toWebReadableStream(stream: PipeableStream): ReadableStream<Uint8Array>;
+export {};

package/dist/server/web-stream.js

@@ -0,0 +1,26 @@
+/** Convert Solid's streaming SSR result into a cancellation-safe web stream. */
+export function toWebReadableStream(stream) {
+    const encoder = new TextEncoder();
+    let active = true;
+    return new ReadableStream({
+        start(controller) {
+            stream.pipe({
+                write(payload) {
+                    if (active)
+                        controller.enqueue(encoder.encode(payload));
+                },
+                end() {
+                    if (!active)
+                        return;
+                    active = false;
+                    controller.close();
+                },
+            });
+        },
+        cancel() {
+            // Solid may still resolve Suspense resources after the response is
+            // cancelled. Ignore those writes and let Solid finish its cleanup.
+            active = false;
+        },
+    });
+}

package/dist/shared/ErrorBoundary.jsx

@@ -1,10 +1,10 @@
 // @refresh skip
-import { ErrorBoundary as DefaultErrorBoundary, catchError } from "solid-js";
+import { catchError, ErrorBoundary as DefaultErrorBoundary } from "solid-js";
 import { isServer } from "solid-js/web";
+import { DevToolbar } from "./dev-toolbar/index.jsx";
 import { HttpStatusCode } from "./HttpStatusCode.js";
-import { DevOverlay } from "./dev-overlay/index.jsx";
 export const ErrorBoundary = import.meta.env.DEV && import.meta.env.START_DEV_OVERLAY
-    ? (props) => <DevOverlay>{props.children}</DevOverlay>
+    ? (props) => <DevToolbar>{props.children}</DevToolbar>
     : (props) => {
         const message = isServer
             ? "500 | Internal Server Error"

package/dist/shared/{dev-overlay → dev-toolbar/error-viewer}/CodeView.jsx

@@ -51,12 +51,12 @@ export function CodeView(props) {
             for (let i = 0, len = lines.length; i < len; i++) {
                 const el = lines[i];
                 if (props.line - minLine() - 1 === i) {
-                    el.dataset.startDevOverlayErrorLine = '';
+                    el.dataset.startErrorViewerErrorLine = '';
                 }
             }
         }
     });
-    return (<div ref={ref} data-start-dev-overlay-code-view style={{
-            "--dev-overlay-code-view-start": minLine() + 1,
+    return (<div ref={ref} data-start-error-viewer-code-view style={{
+            "--error-viewer-code-view-start": minLine() + 1,
         }}/>);
 }

package/dist/shared/dev-toolbar/error-viewer/create-stack-frame.js

@@ -0,0 +1,90 @@
+import { createMemo, createResource } from "solid-js";
+import getSourceMap from "./get-source-map.js";
+const HTTP_URL_REGEX = /^https?:\/\//;
+const LEADING_SLASH_REGEX = /^\/+/;
+// Frames from an SSR error carry filesystem paths (or file:// URLs) rather
+// than the http URL the module is served from. Their positions are already
+// mapped back to the original source by the Vite module runner, unlike
+// client frames whose positions refer to the compiled module.
+function isServerSource(path) {
+    return !HTTP_URL_REGEX.test(path);
+}
+function getActualFileSource(path) {
+    if (path.startsWith("file://")) {
+        return "/@fs/" + path.substring("file://".length).replace(LEADING_SLASH_REGEX, "");
+    }
+    if (isServerSource(path)) {
+        return "/@fs/" + path.replace(LEADING_SLASH_REGEX, "");
+    }
+    return path;
+}
+export function createStackFrame(stackframe, isCompiled) {
+    const [data] = createResource(() => ({
+        fileName: stackframe.fileName,
+        line: stackframe.lineNumber,
+        column: stackframe.columnNumber,
+        functionName: stackframe.functionName,
+    }), async (source) => {
+        if (!source.fileName) {
+            return null;
+        }
+        const url = getActualFileSource(source.fileName);
+        const response = await fetch(url);
+        if (!response.ok) {
+            return null;
+        }
+        const content = await response.text();
+        const sourceMap = await getSourceMap(url, content);
+        return {
+            source,
+            content,
+            sourceMap,
+            isServer: isServerSource(source.fileName),
+        };
+    });
+    const info = createMemo(() => {
+        const current = data();
+        if (!current) {
+            return undefined;
+        }
+        const { source, content, sourceMap, isServer } = current;
+        if (!isCompiled() && source.line && source.column && sourceMap) {
+            if (isServer) {
+                // The position is already original; only the original content needs
+                // to be pulled out of the source map.
+                const originalContent = sourceMap.sources.length
+                    ? sourceMap.sourceContentFor(sourceMap.sources[0], true)
+                    : null;
+                if (originalContent) {
+                    return {
+                        source: source.fileName,
+                        line: source.line,
+                        column: source.column,
+                        name: source.functionName,
+                        content: originalContent,
+                    };
+                }
+            }
+            else {
+                const result = sourceMap.originalPositionFor({
+                    line: source.line,
+                    column: source.column,
+                });
+                if (result.source) {
+                    return {
+                        ...result,
+                        content: sourceMap.sourceContentFor(result.source, true),
+                    };
+                }
+            }
+        }
+        return {
+            source: source.fileName,
+            line: source.line,
+            column: source.column,
+            name: source.functionName,
+            content,
+        };
+    });
+    return info;
+}

package/dist/shared/{dev-overlay/DevOverlayDialog.d.ts → dev-toolbar/error-viewer/index.d.ts}

@@ -1,9 +1,10 @@
 import type { JSX } from "solid-js";
 import "./styles.css";
 export declare function classNames(...classes: (string | boolean | undefined)[]): string;
-interface DevOverlayDialogProps {
+interface ErrorViewerProps {
+    show?: boolean;
     errors: any[];
     resetError: () => void;
 }
-export default function DevOverlayDialog(props: DevOverlayDialogProps): JSX.Element;
+export default function ErrorViewer(props: ErrorViewerProps): JSX.Element;
 export {};

package/dist/shared/{dev-overlay/DevOverlayDialog.jsx → dev-toolbar/error-viewer/index.jsx}

@@ -2,14 +2,12 @@
 import ErrorStackParser from "error-stack-parser";
 import * as htmlToImage from "html-to-image";
 import { createMemo, createSignal, ErrorBoundary, For, Show, Suspense } from "solid-js";
-import { Portal } from "solid-js/web";
-// @ts-ignore - terracotta module resolution issue with NodeNext
-import { Dialog, DialogOverlay, DialogPanel, Select, SelectOption } from "terracotta";
-import info from "../../../package.json" with { type: "json" };
+import IconButton from "../../ui/IconButton.jsx";
+import { Select, SelectOption } from "../../ui/Select.jsx";
+import { ArrowLeftIcon, ArrowRightIcon, CameraIcon, DiscordIcon, GithubIcon, RefreshIcon, ViewCompiledIcon, ViewOriginalIcon, } from "../icons.jsx";
 import { CodeView } from "./CodeView.jsx";
-import { createStackFrame } from "./createStackFrame.js";
+import { createStackFrame } from "./create-stack-frame.js";
 import download from "./download.js";
-import { ArrowLeftIcon, ArrowRightIcon, CameraIcon, DiscordIcon, GithubIcon, RefreshIcon, SolidStartIcon, ViewCompiledIcon, ViewOriginalIcon, } from "./icons.jsx";
 import "./styles.css";
 export function classNames(...classes) {
     return classes.filter(Boolean).join(" ");
@@ -25,9 +23,9 @@ function ErrorInfo(props) {
         }
         return { message: e.toString() };
     });
-    return (<span data-start-dev-overlay-error-info>
-      <span data-start-dev-overlay-error-info-name>{error().name}</span>
-      <span data-start-dev-overlay-error-info-message>{error().message}</span>
+    return (<span data-start-error-viewer-error-info>
+      <span data-start-error-viewer-error-info-name>{error().name}</span>
+      <span data-start-error-viewer-error-info-message>{error().message}</span>
     </span>);
 }
 function getFileName(source) {
@@ -46,23 +44,23 @@ function getFilePath(source) {
     return `${getFileName(source.source)}${line}${column}`;
 }
 function CodeFallback() {
-    return (<div data-start-dev-overlay-stack-frames-code-fallback>
+    return (<div data-start-error-viewer-stack-frames-code-fallback>
       <span>Source not available.</span>
     </div>);
 }
 function StackFramesContent(props) {
     const stackframes = ErrorStackParser.parse(props.error);
     const [selectedFrame, setSelectedFrame] = createSignal(stackframes[0]);
-    return (<div data-start-dev-overlay-stack-frames-content>
-      <div data-start-dev-overlay-stack-frames-code>
+    return (<div data-start-error-viewer-stack-frames-content>
+      <div data-start-error-viewer-stack-frames-code>
         <ErrorBoundary fallback={null}>
           {(() => {
             const data = createStackFrame(selectedFrame(), () => props.isCompiled);
             return (<Suspense fallback={<CodeFallback />}>
                 <Show when={data()} keyed fallback={<CodeFallback />}>
                   {source => (<>
-                      <span data-start-dev-overlay-stack-frames-code-source>{source.source}</span>
-                      <div data-start-dev-overlay-stack-frames-code-container>
+                      <span data-start-error-viewer-stack-frames-code-source>{source.source}</span>
+                      <div data-start-error-viewer-stack-frames-code-container>
                         <CodeView fileName={source.source} line={source.line} content={source.content}/>
                       </div>
                     </>)}
@@ -71,13 +69,13 @@ function StackFramesContent(props) {
         })()}
         </ErrorBoundary>
       </div>
-      <Select data-start-dev-overlay-stack-frames value={selectedFrame()} onChange={setSelectedFrame}>
+      <Select data-start-error-viewer-stack-frames value={selectedFrame()} onChange={setSelectedFrame}>
         <For each={stackframes}>
-          {current => (<ErrorBoundary fallback={<div data-start-dev-overlay-stack-frame>
-                  <span data-start-dev-overlay-stack-frame-function>
+          {current => (<ErrorBoundary fallback={<SelectOption value={current} disabled data-start-error-viewer-stack-frame>
+                  <span data-start-error-viewer-stack-frame-function>
                     {current.functionName ?? "<anonymous>"}
                   </span>
-                  <span data-start-dev-overlay-stack-frame-file>
+                  <span data-start-error-viewer-stack-frame-file>
                     {getFilePath({
                     source: current.getFileName(),
                     content: "",
@@ -86,16 +84,18 @@ function StackFramesContent(props) {
                     name: current.getFunctionName(),
                 })}
                   </span>
-                </div>}>
+                </SelectOption>}>
               {(() => {
                 const data = createStackFrame(current, () => props.isCompiled);
                 return (<Suspense>
                     <Show when={data()} keyed>
-                      {source => (<SelectOption data-start-dev-overlay-stack-frame value={current}>
-                          <span data-start-dev-overlay-stack-frame-function>
+                      {source => (<SelectOption data-start-error-viewer-stack-frame value={current}>
+                          <span data-start-error-viewer-stack-frame-function>
                             {source.name ?? "<anonymous>"}
                           </span>
-                          <span data-start-dev-overlay-stack-frame-file>{getFilePath(source)}</span>
+                          <span data-start-error-viewer-stack-frame-file>
+                            {getFilePath(source)}
+                          </span>
                         </SelectOption>)}
                     </Show>
                   </Suspense>);
@@ -112,7 +112,7 @@ function StackFrames(props) {
 }
 const ISSUE_THREAD = "https://github.com/solidjs/solid-start/issues/new";
 const DISCORD_INVITE = "https://discord.com/invite/solidjs";
-export default function DevOverlayDialog(props) {
+export default function ErrorViewer(props) {
     const [currentPage, setCurrentPage] = createSignal(1);
     const [isCompiled, setIsCompiled] = createSignal(false);
     const length = createMemo(() => props.errors.length);
@@ -164,63 +164,52 @@ export default function DevOverlayDialog(props) {
     function redirectToDiscord() {
         window.open(DISCORD_INVITE, "_blank").focus();
     }
-    return (<Portal>
-      <Dialog data-start-dev-overlay isOpen>
-        <div>
-          <DialogOverlay data-start-dev-overlay-background/>
-          <DialogPanel ref={setPanel} data-start-dev-overlay-panel-container>
-            <div data-start-dev-overlay-panel>
-              <div data-start-dev-overlay-navbar>
-                <div data-start-dev-overlay-navbar-left>
-                  <div data-start-dev-overlay-version>
-                    <div>
-                      <SolidStartIcon title="Solid Start Version"/>
-                    </div>
-                    <span>{info.version}</span>
+    return (<Show when={props.show}>
+      <div data-start-dev-toolbar-panel>
+        <div ref={setPanel} data-start-error-viewer>
+          <div data-start-error-viewer-navbar>
+            <div data-start-error-viewer-navbar-left>
+              <Show when={props.errors.length > 1}>
+                <div data-start-error-viewer-pagination>
+                  <IconButton data-start-error-viewer-button onClick={goPrev} type="button">
+                    <ArrowLeftIcon title="Go Previous"/>
+                  </IconButton>
+                  <div data-start-error-viewer-page-counter>
+                    {`${truncated()} of ${props.errors.length}`}
                   </div>
-                  <Show when={props.errors.length > 1}>
-                    <div data-start-dev-overlay-pagination>
-                      <button data-start-dev-overlay-button onClick={goPrev} type="button">
-                        <ArrowLeftIcon title="Go Previous"/>
-                      </button>
-                      <div data-start-dev-overlay-page-counter>
-                        {`${truncated()} of ${props.errors.length}`}
-                      </div>
-                      <button data-start-dev-overlay-button onClick={goNext} type="button">
-                        <ArrowRightIcon title="Go Next"/>
-                      </button>
-                    </div>
-                  </Show>
-                </div>
-                <div data-start-dev-overlay-controls>
-                  <button data-start-dev-overlay-button onClick={redirectToGithub} type="button">
-                    <GithubIcon title="Create an issue thread on Github"/>
-                  </button>
-                  <button data-start-dev-overlay-button onClick={redirectToDiscord} type="button">
-                    <DiscordIcon title="Join our Discord Channel"/>
-                  </button>
-                  <button data-start-dev-overlay-button onClick={downloadScreenshot} type="button">
-                    <CameraIcon title="Capture Error Overlay"/>
-                  </button>
-                  <button data-start-dev-overlay-button onClick={toggleIsCompiled} type="button">
-                    <Show when={isCompiled()} fallback={<ViewOriginalIcon title="View Original Source"/>}>
-                      <ViewCompiledIcon title="View Compiled Source"/>
-                    </Show>
-                  </button>
-                  <button data-start-dev-overlay-button onClick={props.resetError} type="button">
-                    <RefreshIcon title="Reset Error"/>
-                  </button>
+                  <IconButton data-start-error-viewer-button onClick={goNext} type="button">
+                    <ArrowRightIcon title="Go Next"/>
+                  </IconButton>
                 </div>
-              </div>
-              <Show when={props.errors[truncated() - 1]} keyed>
-                {current => (<div data-start-dev-overlay-content>
-                    <ErrorInfo error={current}/>
-                    <StackFrames error={current} isCompiled={isCompiled()}/>
-                  </div>)}
               </Show>
             </div>
-          </DialogPanel>
+            <div data-start-error-viewer-controls>
+              <IconButton data-start-error-viewer-button onClick={redirectToGithub} type="button">
+                <GithubIcon title="Create an issue thread on Github"/>
+              </IconButton>
+              <IconButton data-start-error-viewer-button onClick={redirectToDiscord} type="button">
+                <DiscordIcon title="Join our Discord Channel"/>
+              </IconButton>
+              <IconButton data-start-error-viewer-button onClick={downloadScreenshot} type="button">
+                <CameraIcon title="Capture Error Overlay"/>
+              </IconButton>
+              <IconButton data-start-error-viewer-button onClick={toggleIsCompiled} type="button">
+                <Show when={isCompiled()} fallback={<ViewOriginalIcon title="View Original Source"/>}>
+                  <ViewCompiledIcon title="View Compiled Source"/>
+                </Show>
+              </IconButton>
+              <IconButton data-start-error-viewer-button onClick={props.resetError} type="button">
+                <RefreshIcon title="Reset Error"/>
+              </IconButton>
+            </div>
+          </div>
+          <Show when={props.errors[truncated() - 1]} keyed>
+            {current => (<div data-start-error-viewer-content>
+                <ErrorInfo error={current}/>
+                <StackFrames error={current} isCompiled={isCompiled()}/>
+              </div>)}
+          </Show>
         </div>
-      </Dialog>
-    </Portal>);
+      </div>
+    </Show>);
 }