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

package/dist/shared/ui/Text.css

@@ -0,0 +1,69 @@
+[data-start-text-size="xs"] {
+  font-size: 0.75rem;
+  line-height: calc(1 / 0.75);
+}
+[data-start-text-size="sm"] {
+  font-size: 0.875rem;
+  line-height: calc(1.25 / 0.875);
+}
+[data-start-text-size="base"] {
+  font-size: 1rem;
+  line-height: 1.5;
+}
+[data-start-text-size="lg"] {
+  font-size: 1.125rem;
+  line-height: calc(1.75 / 1.125);
+}
+[data-start-text-size="xl"] {
+  font-size: 1.25rem;
+  line-height: calc(1.75 / 1.25);
+}
+[data-start-text-size="2xl"] {
+  font-size: 1.5rem;
+  line-height: calc(2 / 1.5);
+}
+
+[data-start-text-font="sans"] {
+  font-family: system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+[data-start-text-font="serif"] {
+  font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+}
+[data-start-text-font="mono"] {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+[data-start-text-weight="thin"] {
+  font-weight: 100;
+}
+[data-start-text-weight="extralight"] {
+  font-weight: 200;
+}
+[data-start-text-weight="light"] {
+  font-weight: 300;
+}
+[data-start-text-weight="normal"] {
+  font-weight: 400;
+}
+[data-start-text-weight="medium"] {
+  font-weight: 500;
+}
+[data-start-text-weight="semibold"] {
+  font-weight: 600;
+}
+[data-start-text-weight="bold"] {
+  font-weight: 700;
+}
+[data-start-text-weight="extrabold"] {
+  font-weight: 800;
+}
+[data-start-text-weight="black"] {
+  font-weight: 900;
+}
+
+[data-start-text-wrap="wrap"] {
+  white-space: wrap;
+}
+[data-start-text-wrap="nowrap"] {
+  white-space: nowrap;
+}

package/dist/shared/ui/Text.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps, type JSX } from 'solid-js';
+import './Text.css';
+export type TextProps<T extends keyof JSX.IntrinsicElements = 'span'> = ComponentProps<T> & {
+    options?: {
+        as?: T;
+        size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl';
+        font?: 'sans' | 'serif' | 'mono';
+        weight?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
+        wrap?: 'wrap' | 'nowrap';
+    };
+};
+export declare function Text<T extends keyof JSX.IntrinsicElements = 'span'>(props: TextProps<T>): JSX.Element;

package/dist/shared/ui/Text.jsx

@@ -0,0 +1,17 @@
+import { createMemo, splitProps } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import './Text.css';
+export function Text(props) {
+    const [current, rest] = splitProps(props, ['options']);
+    const customization = createMemo(() => {
+        const options = Object.assign({}, {
+            size: 'base',
+            font: 'mono',
+            weight: 'normal',
+            wrap: 'wrap',
+        }, current.options);
+        const entries = Object.entries(options);
+        return Object.fromEntries(entries.map(([key, value]) => [`data-start-text-${key}`, value]));
+    });
+    return (<Dynamic component={(current.options?.as || 'span')} {...rest} {...customization()}/>);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0-rc.2",
   "type": "module",
   "files": [
     "dist",
@@ -52,8 +52,8 @@
     "shiki": "^1.29.2",
     "solid-js": "^1.9.11",
     "source-map-js": "^1.2.1",
-    "srvx": "^0.11.22",
-    "terracotta": "^1.1.0",
+    "srvx": "^0.12.0",
+    "terracotta": "^1.1.1",
     "vite-plugin-solid": "^2.11.11"
   },
   "engines": {

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

@@ -1,56 +0,0 @@
-import { createMemo, createResource } from "solid-js";
-import getSourceMap from "./get-source-map.js";
-function getActualFileSource(path) {
-    if (path.startsWith("file://")) {
-        return "/_build/@fs" + path.substring("file://".length);
-    }
-    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 response = await fetch(getActualFileSource(source.fileName));
-        if (!response.ok) {
-            return null;
-        }
-        const content = await response.text();
-        const sourceMap = await getSourceMap(source.fileName, content);
-        return {
-            source,
-            content,
-            sourceMap,
-        };
-    });
-    const info = createMemo(() => {
-        const current = data();
-        if (!current) {
-            return undefined;
-        }
-        const { source, content, sourceMap } = current;
-        if (!isCompiled() && source.line && source.column && sourceMap) {
-            const result = sourceMap.originalPositionFor({
-                line: source.line,
-                column: source.column,
-            });
-            return {
-                ...result,
-                content: sourceMap.sourceContentFor(result.source),
-            };
-        }
-        return {
-            source: source.fileName,
-            line: source.line,
-            column: source.column,
-            name: source.functionName,
-            content,
-        };
-    });
-    return info;
-}

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

@@ -1,5 +0,0 @@
-import { type JSX } from "solid-js";
-export interface DevOverlayProps {
-    children?: JSX.Element;
-}
-export declare function DevOverlay(props: DevOverlayProps): JSX.Element;

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

@@ -1,39 +0,0 @@
-// @refresh skip
-import { createEffect, createSignal, ErrorBoundary, onCleanup, resetErrorBoundaries, Show, } from "solid-js";
-import clientOnly from "../clientOnly.js";
-import { HttpStatusCode } from "../HttpStatusCode.js";
-const DevOverlayDialog = import.meta.env.PROD
-    ? () => <></>
-    : clientOnly(() => import("./DevOverlayDialog"), { lazy: true });
-export function DevOverlay(props) {
-    const [errors, setErrors] = createSignal([]);
-    function resetError() {
-        setErrors([]);
-        resetErrorBoundaries();
-    }
-    function pushError(error) {
-        console.error(error);
-        setErrors(current => [error, ...current]);
-    }
-    createEffect(() => {
-        const onErrorEvent = (error) => {
-            pushError(error.error ?? error);
-        };
-        window.addEventListener("error", onErrorEvent);
-        onCleanup(() => {
-            window.removeEventListener("error", onErrorEvent);
-        });
-    });
-    return (<>
-      <ErrorBoundary fallback={error => {
-            pushError(error);
-            return <HttpStatusCode code={500}/>;
-        }}>
-        {props.children}
-      </ErrorBoundary>
-      <Show when={errors().length}>
-        <HttpStatusCode code={500}/>
-        <DevOverlayDialog errors={errors()} resetError={resetError}/>
-      </Show>
-    </>);
-}

package/dist/shared/dev-overlay/styles.css

@@ -1,292 +0,0 @@
-[data-start-dev-overlay] {
-  position: fixed;
-  inset: 0px;
-  z-index: 50;
-  overflow-y: auto;
-}
-
-[data-start-dev-overlay]>div {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-}
-
-[data-start-dev-overlay-background] {
-  position: absolute;
-  inset: 0px;
-  background-color: rgb(17 24 39 / 0.5);
-}
-
-[data-start-dev-overlay-panel] {
-  display: flex;
-  flex-direction: column;
-  width: 75vw;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-  gap: 0.5rem;
-  color: rgb(17 24 39);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
-
-[data-start-dev-overlay-panel-container] {
-  margin: 2rem;
-  z-index: 10;
-}
-
-[data-start-dev-overlay-navbar] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-[data-start-dev-overlay-pagination] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  border-radius: 9999px;
-  background-color: rgb(249 250 251);
-  padding: 0.25rem;
-}
-
-[data-start-dev-overlay-button] {
-  display: flex;
-  padding: 0.125rem;
-  border-radius: 9999px;
-  border-width: 0px;
-  align-items: center;
-  justify-content: center;
-  background-color: rgb(249 250 251);
-  color: rgb(17 24 39);
-  transition-property: color, background-color, border-color, box-shadow;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-[data-start-dev-overlay-button]:hover {
-  background-color: rgb(229 231 235);
-  color: rgb(55 65 81);
-}
-
-[data-start-dev-overlay-button]:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px
-}
-
-[data-start-dev-overlay-button]:focus-visible {
-  box-shadow: 0 0 0 calc(3px) rgb(17 24 39 / 0.75);
-}
-
-[data-start-dev-overlay-button]:active {
-  background-color: rgb(243 244 246);
-  color: rgb(31 41 55);
-}
-
-[data-start-dev-overlay-button]>svg {
-  height: 1.5rem;
-  width: 1.5rem;
-}
-
-[data-start-dev-overlay-page-counter] {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 600;
-}
-
-[data-start-dev-overlay-navbar-left] {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-}
-
-
-[data-start-dev-overlay-controls] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  border-radius: 9999px;
-  background-color: rgb(249 250 251);
-  padding: 0.25rem;
-}
-
-[data-start-dev-overlay-version] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  border-radius: 9999px;
-  background-color: rgb(249 250 251);
-  padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 600;
-}
-
-[data-start-dev-overlay-version]>div {
-  height: 1.5rem;
-  width: 1.5rem;
-}
-
-[data-start-dev-overlay-version]>div>svg {
-  height: 1.5rem;
-  width: 1.5rem;
-}
-
-[data-start-dev-overlay-content] {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  border-radius: 1.5rem;
-  background-color: rgb(249 250 251);
-  padding: 1rem;
-}
-
-[data-start-dev-overlay-error-info] {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-[data-start-dev-overlay-error-info-name] {
-  font-weight: 700;
-}
-
-[data-start-dev-overlay-error-info-message] {
-  font-size: 1.5rem;
-  line-height: 2rem;
-  color: rgb(239 68 68);
-  font-weight: 700;
-}
-
-[data-start-dev-overlay-stack-frames-content] {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-[data-start-dev-overlay-stack-frames] {
-  flex: 1 1 0%;
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  margin-block: 0;
-  list-style-type: none;
-  padding-inline: 0;
-  max-height: 16rem;
-  overflow-y: auto;
-  border-radius: 0.5rem;
-}
-
-[data-start-dev-overlay-stack-frame] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  color: rgb(17 24 39);
-  cursor: default;
-  user-select: none;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  outline: none;
-}
-
-[data-start-dev-overlay-stack-frame][tc-active],
-[data-start-dev-overlay-stack-frame][tc-selected],
-[data-start-dev-overlay-stack-frame]:focus {
-  background-color: rgb(219 234 254);
-  color: rgb(30 58 138);
-}
-
-[data-start-dev-overlay-stack-frame-function] {
-  font-weight: 700;
-}
-
-[data-start-dev-overlay-stack-frame-file] {
-  white-space: nowrap;
-  font-size: 0.75rem;
-  /* 12px */
-  line-height: 1rem;
-  /* 16px */
-}
-
-[data-start-dev-overlay-stack-frames-code] {
-  padding: 0.5rem 1rem;
-  gap: 0.25rem;
-  flex: 1 1 0%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.5rem;
-  background-color: rgb(17 24 39);
-}
-
-[data-start-dev-overlay-stack-frames-code-fallback] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: rgb(249 250 251);
-  min-height: 16rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-[data-start-dev-overlay-stack-frames-code-source] {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  color: rgb(249 250 251);
-}
-
-[data-start-dev-overlay-stack-frames-code-container] {
-  width: 100%;
-  overflow: hidden;
-  min-width: 100%;
-  min-height: 16rem;
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: rgb(249 250 251);
-}
-
-[data-start-dev-overlay-code-view] {
-  overflow: auto;
-  min-width: 100%;
-  min-height: 16rem;
-}
-
-[data-start-dev-overlay-code-view]>.shiki {
-  float: left;
-  min-width: 100%;
-  overflow-x: auto;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  counter-reset: step;
-  counter-increment: step calc(var(--dev-overlay-code-view-start, 1) - 1);
-  background-color: transparent !important;
-}
-
-[data-start-dev-overlay-code-view]>.shiki .line::before {
-  content: counter(step);
-  counter-increment: step;
-  width: 1rem;
-  margin-right: 1.5rem;
-  display: inline-block;
-  text-align: right;
-  color: rgba(115, 138, 148, .4)
-}
-
-[data-start-dev-overlay-error-line] {
-  background-color: rgba(239, 68, 68, .4);
-}