@solidjs/start 1.2.1 → 2.0.0-alpha.1

package/dist/shared/dev-overlay/CodeView.jsx

@@ -1,56 +1,45 @@
 // @refresh skip
-import { getSingletonHighlighter } from 'shiki';
-import { loadWasm } from 'shiki/engine/oniguruma';
-import { createEffect, createResource } from 'solid-js';
-import url from 'shiki/onig.wasm?url';
-import langJS from 'shiki/langs/javascript.mjs';
-import langJSX from 'shiki/langs/jsx.mjs';
-import langTSX from 'shiki/langs/tsx.mjs';
-import langTS from 'shiki/langs/typescript.mjs';
-import darkPlus from 'shiki/themes/dark-plus.mjs';
+import { getSingletonHighlighter } from "shiki";
+import { loadWasm } from "shiki/engine/oniguruma";
+import { createEffect, createResource } from "solid-js";
+import url from "shiki/onig.wasm?url";
+import langJS from "shiki/langs/javascript.mjs";
+import langJSX from "shiki/langs/jsx.mjs";
+import langTSX from "shiki/langs/tsx.mjs";
+import langTS from "shiki/langs/typescript.mjs";
+import darkPlus from "shiki/themes/dark-plus.mjs";
 let HIGHLIGHTER;
 async function loadHighlighter() {
     if (!HIGHLIGHTER) {
         await loadWasm(await fetch(url));
         HIGHLIGHTER = await getSingletonHighlighter({
-            themes: [
-                darkPlus,
-            ],
-            langs: [
-                langJS,
-                langJSX,
-                langTS,
-                langTSX,
-            ],
+            themes: [darkPlus],
+            langs: [langJS, langJSX, langTS, langTSX],
         });
     }
     return HIGHLIGHTER;
 }
 const RANGE = 8;
 export function CodeView(props) {
-    const lines = () => props.content.split('\n').map((item, index) => ({
+    const lines = () => props.content.split("\n").map((item, index) => ({
         index: index + 1,
         line: item,
     }));
     const minLine = () => Math.max(props.line - (1 + RANGE), 0);
     const maxLine = () => Math.min(props.line + RANGE, lines().length - 1);
     let ref;
-    const [data] = createResource(() => (lines()
+    const [data] = createResource(() => lines()
         .slice(minLine(), maxLine())
         .map(item => item.line)
-        .join('\n')), async (value) => {
+        .join("\n"), async (value) => {
         const highlighter = await loadHighlighter();
-        const fileExtension = props.fileName
-            .split(/[#?]/)[0]
-            .split('.')
-            .pop()
-            ?.trim();
+        const fileExtension = props.fileName.split(/[#?]/)[0].split(".").pop()?.trim();
         let lang = fileExtension;
-        if (fileExtension === 'mjs' || fileExtension === 'cjs') {
-            lang = 'js';
+        if (fileExtension === "mjs" || fileExtension === "cjs") {
+            lang = "js";
         }
         return highlighter.codeToHtml(value, {
-            theme: 'dark-plus',
+            theme: "dark-plus",
             lang,
         });
     });
@@ -61,13 +50,13 @@ export function CodeView(props) {
             const lines = ref.querySelectorAll('span[class="line"]');
             for (let i = 0, len = lines.length; i < len; i++) {
                 const el = lines[i];
-                if ((props.line - minLine() - 1) === i) {
-                    el.classList.add('dev-overlay-error-line');
+                if (props.line - minLine() - 1 === i) {
+                    el.classList.add("dev-overlay-error-line");
                 }
             }
         }
     });
-    return <div ref={ref} class="dev-overlay-code-view" style={{
-            '--dev-overlay-code-view-start': minLine() + 1,
-        }}/>;
+    return (<div ref={ref} class="dev-overlay-code-view" style={{
+            "--dev-overlay-code-view-start": minLine() + 1,
+        }}/>);
 }

package/dist/shared/dev-overlay/DevOverlayDialog.d.ts

@@ -1,5 +1,5 @@
-import type { JSX } from 'solid-js';
-import './styles.css';
+import type { JSX } from "solid-js";
+import "./styles.css";
 export declare function classNames(...classes: (string | boolean | undefined)[]): string;
 interface DevOverlayDialogProps {
     errors: any[];

package/dist/shared/dev-overlay/DevOverlayDialog.jsx

@@ -1,17 +1,18 @@
 // @refresh skip
-import ErrorStackParser from 'error-stack-parser';
-import * as htmlToImage from 'html-to-image';
-import { ErrorBoundary, For, Show, Suspense, createMemo, createSignal } from 'solid-js';
-import { Portal } from 'solid-js/web';
-import { Dialog, DialogOverlay, DialogPanel, Select, SelectOption } from 'terracotta';
-import info from '../../../package.json';
-import { CodeView } from './CodeView';
-import { createStackFrame } from './createStackFrame';
-import download from './download';
-import { ArrowLeftIcon, ArrowRightIcon, CameraIcon, DiscordIcon, GithubIcon, RefreshIcon, SolidStartIcon, ViewCompiledIcon, ViewOriginalIcon } from './icons';
-import './styles.css';
+import ErrorStackParser from "error-stack-parser";
+import * as htmlToImage from "html-to-image";
+import { ErrorBoundary, For, Show, Suspense, createMemo, createSignal } 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 { CodeView } from "./CodeView.jsx";
+import { createStackFrame } from "./createStackFrame.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(' ');
+    return classes.filter(Boolean).join(" ");
 }
 function ErrorInfo(props) {
     const error = createMemo(() => {
@@ -31,8 +32,8 @@ function ErrorInfo(props) {
 }
 function getFileName(source) {
     try {
-        const path = source.startsWith('/') ? new URL(source, 'file://') : new URL(source);
-        const paths = path.pathname.split('/');
+        const path = source.startsWith("/") ? new URL(source, "file://") : new URL(source);
+        const paths = path.pathname.split("/");
         return paths[paths.length - 1];
     }
     catch (error) {
@@ -40,71 +41,77 @@ function getFileName(source) {
     }
 }
 function getFilePath(source) {
-    const line = source.line ? `:${source.line}` : '';
-    const column = source.column ? `:${source.column}` : '';
+    const line = source.line ? `:${source.line}` : "";
+    const column = source.column ? `:${source.column}` : "";
     return `${getFileName(source.source)}${line}${column}`;
 }
 function CodeFallback() {
-    return <div class="dev-overlay-stack-frames-code-fallback">
-    <span>Source not available.</span>
-  </div>;
+    return (<div class="dev-overlay-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 class="dev-overlay-stack-frames-content">
-        <div class="dev-overlay-stack-frames-code">
-            <ErrorBoundary fallback={null}>
-              {(() => {
+      <div class="dev-overlay-stack-frames-code">
+        <ErrorBoundary fallback={null}>
+          {(() => {
             const data = createStackFrame(selectedFrame(), () => props.isCompiled);
             return (<Suspense fallback={<CodeFallback />}>
-                    <Show when={data()} keyed fallback={<CodeFallback />}>
-                      {(source) => (<>
-                          <span class="dev-overlay-stack-frames-code-source">{source.source}</span>
-                          <div class="dev-overlay-stack-frames-code-container">
-                            <CodeView fileName={source.source} line={source.line} content={source.content}/>
-                          </div>
-                        </>)}
-                    </Show>
-                  </Suspense>);
+                <Show when={data()} keyed fallback={<CodeFallback />}>
+                  {source => (<>
+                      <span class="dev-overlay-stack-frames-code-source">{source.source}</span>
+                      <div class="dev-overlay-stack-frames-code-container">
+                        <CodeView fileName={source.source} line={source.line} content={source.content}/>
+                      </div>
+                    </>)}
+                </Show>
+              </Suspense>);
         })()}
-            </ErrorBoundary>
-        </div>
-        <Select class="dev-overlay-stack-frames" value={selectedFrame()} onChange={setSelectedFrame}>
-          <For each={stackframes}>
-            {(current) => (<ErrorBoundary fallback={(<div class="dev-overlay-stack-frame">
-                <span class="dev-overlay-stack-frame-function">{current.functionName ?? '<anonymous>'}</span>
-                <span class="dev-overlay-stack-frame-file">{getFilePath({
+        </ErrorBoundary>
+      </div>
+      <Select class="dev-overlay-stack-frames" value={selectedFrame()} onChange={setSelectedFrame}>
+        <For each={stackframes}>
+          {current => (<ErrorBoundary fallback={<div class="dev-overlay-stack-frame">
+                  <span class="dev-overlay-stack-frame-function">
+                    {current.functionName ?? "<anonymous>"}
+                  </span>
+                  <span class="dev-overlay-stack-frame-file">
+                    {getFilePath({
                     source: current.getFileName(),
-                    content: '',
+                    content: "",
                     line: current.getLineNumber(),
                     column: current.getColumnNumber(),
                     name: current.getFunctionName(),
-                })}</span>
-              </div>)}>
+                })}
+                  </span>
+                </div>}>
               {(() => {
                 const data = createStackFrame(current, () => props.isCompiled);
                 return (<Suspense>
                     <Show when={data()} keyed>
-                      {(source) => (<SelectOption class="dev-overlay-stack-frame" value={current}>
-                          <span class="dev-overlay-stack-frame-function">{source.name ?? '<anonymous>'}</span>
+                      {source => (<SelectOption class="dev-overlay-stack-frame" value={current}>
+                          <span class="dev-overlay-stack-frame-function">
+                            {source.name ?? "<anonymous>"}
+                          </span>
                           <span class="dev-overlay-stack-frame-file">{getFilePath(source)}</span>
                         </SelectOption>)}
                     </Show>
                   </Suspense>);
             })()}
             </ErrorBoundary>)}
-          </For>
-        </Select>
-      </div>);
+        </For>
+      </Select>
+    </div>);
 }
 function StackFrames(props) {
     return (<Show when={props.error instanceof Error && props.error} keyed>
-      {(current) => (<StackFramesContent error={current} isCompiled={props.isCompiled}/>)}
+      {current => <StackFramesContent error={current} isCompiled={props.isCompiled}/>}
     </Show>);
 }
-const ISSUE_THREAD = 'https://github.com/solidjs/solid-start/issues/new';
-const DISCORD_INVITE = 'https://discord.com/invite/solidjs';
+const ISSUE_THREAD = "https://github.com/solidjs/solid-start/issues/new";
+const DISCORD_INVITE = "https://discord.com/invite/solidjs";
 export default function DevOverlayDialog(props) {
     const [currentPage, setCurrentPage] = createSignal(1);
     const [isCompiled, setIsCompiled] = createSignal(false);
@@ -113,7 +120,7 @@ export default function DevOverlayDialog(props) {
         return Math.min(currentPage(), length());
     });
     function goPrev() {
-        setCurrentPage((c) => {
+        setCurrentPage(c => {
             if (c > 1) {
                 return c - 1;
             }
@@ -121,7 +128,7 @@ export default function DevOverlayDialog(props) {
         });
     }
     function goNext() {
-        setCurrentPage((c) => {
+        setCurrentPage(c => {
             if (c < length()) {
                 return c + 1;
             }
@@ -129,31 +136,33 @@ export default function DevOverlayDialog(props) {
         });
     }
     function toggleIsCompiled() {
-        setIsCompiled((c) => !c);
+        setIsCompiled(c => !c);
     }
     const [panel, setPanel] = createSignal();
     function downloadScreenshot() {
         const current = panel();
         if (current) {
-            htmlToImage.toPng(current, {
+            htmlToImage
+                .toPng(current, {
                 style: {
-                    transform: 'scale(0.75)',
+                    transform: "scale(0.75)",
                 },
-            }).then((url) => {
-                download(url, 'start-screenshot.png');
+            })
+                .then(url => {
+                download(url, "start-screenshot.png");
             });
         }
     }
     function redirectToGithub() {
         const url = new URL(ISSUE_THREAD);
-        url.searchParams.append('labels', 'bug');
-        url.searchParams.append('labels', 'needs+triage');
-        url.searchParams.append('template', 'bug.yml');
-        url.searchParams.append('title', `[Bug?]:` + props.errors[truncated() - 1].toString());
-        window.open(url, '_blank').focus();
+        url.searchParams.append("labels", "bug");
+        url.searchParams.append("labels", "needs+triage");
+        url.searchParams.append("template", "bug.yml");
+        url.searchParams.append("title", `[Bug?]:` + props.errors[truncated() - 1].toString());
+        window.open(url, "_blank").focus();
     }
     function redirectToDiscord() {
-        window.open(DISCORD_INVITE, '_blank').focus();
+        window.open(DISCORD_INVITE, "_blank").focus();
     }
     return (<Portal>
       <Dialog class="dev-overlay" isOpen>
@@ -194,7 +203,7 @@ export default function DevOverlayDialog(props) {
                     <CameraIcon title="Capture Error Overlay"/>
                   </button>
                   <button class="dev-overlay-button" onClick={toggleIsCompiled} type="button">
-                    <Show when={isCompiled()} fallback={(<ViewOriginalIcon title="View Original Source"/>)}>
+                    <Show when={isCompiled()} fallback={<ViewOriginalIcon title="View Original Source"/>}>
                       <ViewCompiledIcon title="View Compiled Source"/>
                     </Show>
                   </button>
@@ -204,7 +213,7 @@ export default function DevOverlayDialog(props) {
                 </div>
               </div>
               <Show when={props.errors[truncated() - 1]} keyed>
-                {(current) => (<div class="dev-overlay-content">
+                {current => (<div class="dev-overlay-content">
                     <ErrorInfo error={current}/>
                     <StackFrames error={current} isCompiled={isCompiled()}/>
                   </div>)}

package/dist/shared/dev-overlay/createStackFrame.js

@@ -1,8 +1,8 @@
 import { createMemo, createResource } from "solid-js";
-import getSourceMap from "./get-source-map";
+import getSourceMap from "./get-source-map.js";
 function getActualFileSource(path) {
-    if (path.startsWith('file://')) {
-        return '/_build/@fs' + path.substring('file://'.length);
+    if (path.startsWith("file://")) {
+        return "/_build/@fs" + path.substring("file://".length);
     }
     return path;
 }

package/dist/shared/dev-overlay/get-source-map.d.ts

@@ -1,2 +1,2 @@
-import { SourceMapConsumer } from 'source-map-js';
+import { SourceMapConsumer } from "source-map-js";
 export default function getSourceMap(url: string, content: string): Promise<SourceMapConsumer | null>;

package/dist/shared/dev-overlay/get-source-map.js

@@ -1,8 +1,8 @@
-import { SourceMapConsumer } from 'source-map-js';
+import { SourceMapConsumer } from "source-map-js";
 const INLINE_SOURCEMAP_REGEX = /^data:application\/json[^,]+base64,/;
 const SOURCEMAP_REGEX = /(?:\/\/[@#][ \t]+sourceMappingURL=([^\s'"]+?)[ \t]*$)|(?:\/\*[@#][ \t]+sourceMappingURL=([^*]+?)[ \t]*(?:\*\/)[ \t]*$)/;
 export default async function getSourceMap(url, content) {
-    const lines = content.split('\n');
+    const lines = content.split("\n");
     let sourceMapUrl;
     for (let i = lines.length - 1; i >= 0 && !sourceMapUrl; i--) {
         const result = lines[i].match(SOURCEMAP_REGEX);
@@ -13,11 +13,11 @@ export default async function getSourceMap(url, content) {
     if (!sourceMapUrl) {
         return null;
     }
-    if (!(INLINE_SOURCEMAP_REGEX.test(sourceMapUrl) || sourceMapUrl.startsWith('/'))) {
+    if (!(INLINE_SOURCEMAP_REGEX.test(sourceMapUrl) || sourceMapUrl.startsWith("/"))) {
         // Resolve path if it's a relative access
-        const parsedURL = url.split('/');
+        const parsedURL = url.split("/");
         parsedURL[parsedURL.length - 1] = sourceMapUrl;
-        sourceMapUrl = parsedURL.join('/');
+        sourceMapUrl = parsedURL.join("/");
     }
     const response = await fetch(sourceMapUrl);
     const rawSourceMap = await response.json();

package/dist/shared/dev-overlay/icons.d.ts

@@ -1,28 +1,28 @@
-import type { JSX } from 'solid-js';
-export declare function ArrowRightIcon(props: JSX.IntrinsicElements['svg'] & {
+import type { JSX } from "solid-js";
+export declare function ArrowRightIcon(props: JSX.IntrinsicElements["svg"] & {
     title: string;
 }): JSX.Element;
-export declare function ArrowLeftIcon(props: JSX.IntrinsicElements['svg'] & {
+export declare function ArrowLeftIcon(props: JSX.IntrinsicElements["svg"] & {
     title: string;
 }): JSX.Element;
-export declare function RefreshIcon(props: JSX.IntrinsicElements['svg'] & {
+export declare function RefreshIcon(props: JSX.IntrinsicElements["svg"] & {
     title: string;
 }): JSX.Element;
-export declare function ViewCompiledIcon(props: JSX.IntrinsicElements['svg'] & {
+export declare function ViewCompiledIcon(props: JSX.IntrinsicElements["svg"] & {
     title: string;
 }): JSX.Element;
-export declare function ViewOriginalIcon(props: JSX.IntrinsicElements['svg'] & {
+export declare function ViewOriginalIcon(props: JSX.IntrinsicElements["svg"] & {
     title: string;
 }): JSX.Element;
-export declare function CameraIcon(props: JSX.IntrinsicElements['svg'] & {
+export declare function CameraIcon(props: JSX.IntrinsicElements["svg"] & {
     title: string;
 }): JSX.Element;
-export declare function DiscordIcon(props: JSX.IntrinsicElements['svg'] & {
+export declare function DiscordIcon(props: JSX.IntrinsicElements["svg"] & {
     title: string;
 }): JSX.Element;
-export declare function GithubIcon(props: JSX.IntrinsicElements['svg'] & {
+export declare function GithubIcon(props: JSX.IntrinsicElements["svg"] & {
     title: string;
 }): JSX.Element;
-export declare function SolidStartIcon(props: JSX.IntrinsicElements['svg'] & {
+export declare function SolidStartIcon(props: JSX.IntrinsicElements["svg"] & {
     title: string;
 }): JSX.Element;