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

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

@@ -0,0 +1,179 @@
+import { createEffect, createSignal, ErrorBoundary, onCleanup, resetErrorBoundaries, Show, } from "solid-js";
+import { createStore } from "solid-js/store";
+import { Portal } from "solid-js/web";
+import { Toolbar } from "terracotta";
+import info from "../../../package.json" with { type: "json" };
+import clientOnly from "../clientOnly.js";
+import { HttpStatusCode } from "../HttpStatusCode.js";
+import IconButton from "../ui/IconButton.jsx";
+import { Text } from "../ui/Text.jsx";
+import { ServerFunctionViewer } from "./functions/index.jsx";
+import { captureServerFunctionCall } from "./functions/tracker.js";
+import { ErrorIcon, FunctionIcon, SolidStartIcon } from "./icons.jsx";
+import "./index.css";
+const ErrorViewer = import.meta.env.PROD
+    ? () => <></>
+    : clientOnly(() => import("./error-viewer/index.jsx"), { lazy: true });
+export function DevToolbar(props) {
+    const [ref, setRef] = createSignal();
+    createEffect(() => {
+        const current = ref();
+        if (current) {
+            let isDown = false;
+            // Offsets of the mouse relatively to the element's position
+            let offsetX = 0;
+            let offsetY = 0;
+            let currentX = 0;
+            let currentY = 0;
+            let centerX = 0;
+            let centerY = 0;
+            const resetPosition = () => {
+                current.style.top = "auto";
+                current.style.left = "auto";
+                current.style.bottom = "auto";
+                current.style.right = "auto";
+            };
+            let isDirty = false;
+            const ac = new AbortController();
+            current.addEventListener("mousedown", e => {
+                isDown = true;
+                const rect = current.getBoundingClientRect();
+                currentX = rect.left;
+                currentY = rect.top;
+                offsetX = e.clientX - currentX;
+                offsetY = e.clientY - currentY;
+                centerX = rect.width / 2;
+                centerY = rect.height / 2;
+                isDirty = true;
+            }, {
+                signal: ac.signal,
+            });
+            window.addEventListener("mouseup", () => {
+                if (isDown && !isDirty) {
+                    const preferredAnchorX = currentX + centerX < window.innerWidth / 2 ? "left" : "right";
+                    const preferredAnchorY = currentY + centerY < window.innerHeight / 2 ? "top" : "bottom";
+                    resetPosition();
+                    current.style[preferredAnchorX] = "0px";
+                    current.style[preferredAnchorY] = "0px";
+                    current.style.flexDirection =
+                        preferredAnchorY === "bottom" ? "column-reverse" : "column";
+                    current.style.alignItems = preferredAnchorX === "left" ? "flex-start" : "flex-end";
+                }
+                isDown = false;
+            }, {
+                signal: ac.signal,
+            });
+            window.addEventListener("mousemove", e => {
+                if (isDown) {
+                    if (isDirty) {
+                        resetPosition();
+                        isDirty = false;
+                    }
+                    currentX = e.clientX - offsetX;
+                    currentY = e.clientY - offsetY;
+                    current.style.left = `${currentX}px`;
+                    current.style.top = `${currentY}px`;
+                }
+            }, {
+                signal: ac.signal,
+                passive: true,
+            });
+            onCleanup(() => {
+                ac.abort();
+            });
+        }
+    });
+    const [content, setContent] = createSignal(undefined);
+    function toggleContent(value) {
+        if (content() === value) {
+            setContent(undefined);
+        }
+        else {
+            setContent(value);
+        }
+    }
+    const [errors, setErrors] = createSignal([]);
+    function resetError() {
+        setErrors([]);
+        resetErrorBoundaries();
+    }
+    function pushError(error) {
+        console.error(error);
+        setErrors(current => [error, ...current]);
+        setContent("err");
+    }
+    createEffect(() => {
+        const onErrorEvent = (error) => {
+            // Browsers dispatch benign ResizeObserver loop notifications as window
+            // "error" events carrying no error object. They aren't app errors.
+            if (!error.error && error.message?.startsWith("ResizeObserver loop")) {
+                return;
+            }
+            pushError(error.error ?? error);
+        };
+        window.addEventListener("error", onErrorEvent);
+        onCleanup(() => {
+            window.removeEventListener("error", onErrorEvent);
+        });
+    });
+    const [store, setStore] = createStore({
+        instances: {},
+    });
+    createEffect(() => {
+        onCleanup(captureServerFunctionCall(call => {
+            if (call.type === "request") {
+                setStore("instances", call.instance, value => {
+                    return {
+                        ...value,
+                        request: call,
+                    };
+                });
+            }
+            else {
+                setStore("instances", call.instance, value => {
+                    return {
+                        ...value,
+                        response: call,
+                    };
+                });
+            }
+        }));
+    });
+    return (<>
+      <Portal>
+        <div data-start-dev-toolbar ref={setRef}>
+          <Toolbar>
+            <div>
+              <IconButton onClick={() => toggleContent("err")} disabled={errors().length === 0}>
+                <ErrorIcon title="View Errors"/>
+              </IconButton>
+              <IconButton onClick={() => toggleContent("fn")}>
+                <FunctionIcon title="View Server Functions"/>
+              </IconButton>
+            </div>
+            <div>
+              <SolidStartIcon title="Solid Start Version"/>
+              <div data-start-dev-toolbar-version>
+                <Text options={{ size: "xs", weight: "semibold", font: "mono", wrap: "nowrap" }}>
+                  {info.version}
+                </Text>
+              </div>
+            </div>
+          </Toolbar>
+          <ErrorViewer show={content() === "err"} errors={errors()} resetError={resetError}/>
+          <ServerFunctionViewer show={content() === "fn"} instances={store.instances} onDeleteInstance={value => {
+            setStore("instances", value, undefined);
+        }}/>
+        </div>
+      </Portal>
+      <ErrorBoundary fallback={error => {
+            pushError(error);
+            return <HttpStatusCode code={500}/>;
+        }}>
+        {props.children}
+      </ErrorBoundary>
+      <Show when={errors().length > 0}>
+        <HttpStatusCode code={500}/>
+      </Show>
+    </>);
+}

package/dist/shared/ui/Badge.css

@@ -0,0 +1,33 @@
+[data-start-badge] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+
+  border-radius: 0.375rem;
+  padding: 0.125rem 0.25rem;
+
+  background-color: var(--background);
+  border: 1px var(--foreground) solid;
+  color: var(--foreground);
+}
+
+[data-start-badge="success"] {
+  --background: oklch(98.2% 0.018 155.826);
+  --foreground: oklch(52.7% 0.154 150.069);
+}
+
+[data-start-badge="failure"] {
+  --background: oklch(97.1% 0.013 17.38);
+  --foreground: oklch(50.5% 0.213 27.518);
+}
+
+[data-start-badge="warning"] {
+  --background: oklch(98.7% 0.026 102.212);
+  --foreground: oklch(47.6% 0.114 61.907);
+}
+
+[data-start-badge="info"] {
+  --background: oklch(97% 0.014 254.604);
+  --foreground: oklch(48.8% 0.243 264.376);
+}

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

@@ -0,0 +1,7 @@
+import type { JSX } from "solid-js";
+import "./Badge.css";
+export interface BadgeProps {
+    type: "info" | "success" | "failure" | "warning";
+    children: JSX.Element;
+}
+export declare function Badge(props: BadgeProps): JSX.Element;

package/dist/shared/ui/Badge.jsx

@@ -0,0 +1,7 @@
+import "./Badge.css";
+import { Text } from "./Text.jsx";
+export function Badge(props) {
+    return (<Text options={{ size: "xs", wrap: "nowrap", weight: "semibold" }} data-start-badge={props.type}>
+      {props.children}
+    </Text>);
+}

package/dist/shared/ui/Button.css

@@ -0,0 +1,32 @@
+[data-start-button] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+
+  border-radius: 0.5rem;
+
+  color: oklch(97% 0.014 254.604);
+
+  background-color: rgb(17 24 39);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border: none;
+  outline: none;
+
+  transition-property: color, background-color, border-color, box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  white-space: nowrap;
+}
+
+[data-start-button][tc-active],
+[data-start-button][tc-selected],
+[data-start-button]:hover,
+[data-start-button]:focus {
+  color: rgb(219 234 254);
+  background-color: rgb(30 58 138);
+}

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

@@ -0,0 +1,4 @@
+import { Button as BaseButton } from "terracotta";
+import "./Button.css";
+declare const Button: typeof BaseButton;
+export default Button;

package/dist/shared/ui/Button.jsx

@@ -0,0 +1,4 @@
+import { Button as BaseButton } from "terracotta";
+import "./Button.css";
+const Button = props => (<BaseButton type="button" data-start-button {...props}/>);
+export default Button;

package/dist/shared/ui/Cascade.css

@@ -0,0 +1,29 @@
+[data-start-cascade] {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  margin-block: 0;
+  list-style-type: none;
+  padding-inline: 0;
+}
+
+[data-start-cascade-option] {
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline: none;
+  cursor: pointer;
+
+  transition-property: color, background-color, border-color, box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  white-space: nowrap;
+}
+
+[data-start-cascade-option][tc-active],
+[data-start-cascade-option][tc-selected],
+[data-start-cascade-option]:focus {
+  background-color: rgb(219 234 254);
+  color: rgb(30 58 138);
+}

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

@@ -0,0 +1,4 @@
+import { Select as BaseSelect, SelectOption as BaseSelectOption } from "terracotta";
+import "./Cascade.css";
+export declare const Cascade: typeof BaseSelect;
+export declare const CascadeOption: typeof BaseSelectOption;

package/dist/shared/ui/Cascade.jsx

@@ -0,0 +1,4 @@
+import { Select as BaseSelect, SelectOption as BaseSelectOption } from "terracotta";
+import "./Cascade.css";
+export const Cascade = props => <BaseSelect data-start-cascade {...props}/>;
+export const CascadeOption = props => (<BaseSelectOption data-start-cascade-option {...props}/>);

package/dist/shared/ui/Dialog.css

@@ -0,0 +1,25 @@
+[data-start-dialog] {
+  position: fixed;
+  inset: 0px;
+  z-index: 50;
+  overflow-y: auto;
+}
+
+[data-start-dialog] > div {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+[data-start-dialog-overlay] {
+  position: absolute;
+  inset: 0px;
+  background-color: rgb(17 24 39 / 0.5);
+}
+
+[data-start-dialog-panel] {
+  margin: 2rem;
+  z-index: 10;
+}

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

@@ -0,0 +1,5 @@
+import { Dialog as BaseDialog, DialogOverlay as BaseDialogOverlay, DialogPanel as BaseDialogPanel } from "terracotta";
+import "./Dialog.css";
+export declare const Dialog: typeof BaseDialog;
+export declare const DialogOverlay: typeof BaseDialogOverlay;
+export declare const DialogPanel: typeof BaseDialogPanel;

package/dist/shared/ui/Dialog.jsx

@@ -0,0 +1,5 @@
+import { Dialog as BaseDialog, DialogOverlay as BaseDialogOverlay, DialogPanel as BaseDialogPanel, } from "terracotta";
+import "./Dialog.css";
+export const Dialog = props => <BaseDialog data-start-dialog {...props}/>;
+export const DialogOverlay = props => (<BaseDialogOverlay data-start-dialog-overlay {...props}/>);
+export const DialogPanel = props => (<BaseDialogPanel data-start-dialog-panel {...props}/>);

package/dist/shared/ui/IconButton.css

@@ -0,0 +1,39 @@
+[data-start-icon-button] {
+  display: flex;
+  padding: 0.25rem;
+  border-radius: 9999px;
+  border-width: 0px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: rgb(249 250 251);
+  background: none;
+  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-icon-button]:hover {
+  color: rgb(229 231 235);
+  background-color: rgb(55 65 81);
+}
+
+[data-start-icon-button]:focus {
+  outline: 2px solid transparent;
+  outline-color: rgb(249 250 251);
+  outline-offset: 2px;
+}
+
+[data-start-icon-button]:focus-visible {
+  box-shadow: 0 0 0 calc(3px) rgb(17 24 39 / 0.75);
+}
+
+[data-start-icon-button]:active {
+  color: rgb(243 244 246);
+  background-color: rgb(31 41 55);
+}
+
+[data-start-icon-button] > svg {
+  height: 1.25rem;
+  width: 1.25rem;
+}

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

@@ -0,0 +1,4 @@
+import { Button as BaseButton } from "terracotta";
+import "./IconButton.css";
+declare const IconButton: typeof BaseButton;
+export default IconButton;

package/dist/shared/ui/IconButton.jsx

@@ -0,0 +1,4 @@
+import { Button as BaseButton } from "terracotta";
+import "./IconButton.css";
+const IconButton = props => (<BaseButton type="button" data-start-icon-button {...props}/>);
+export default IconButton;

package/dist/shared/ui/Placeholder.css

@@ -0,0 +1,12 @@
+[data-start-placeholder] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+}
+
+[data-start-placeholder] > span {
+  text-align: center;
+}

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

@@ -0,0 +1,6 @@
+import type { JSX } from "solid-js";
+import "./Placeholder.css";
+export interface PlaceholderProps {
+    children?: JSX.Element;
+}
+export default function Placeholder(props: PlaceholderProps): JSX.Element;

package/dist/shared/ui/Placeholder.jsx

@@ -0,0 +1,4 @@
+import "./Placeholder.css";
+export default function Placeholder(props) {
+    return <div data-start-placeholder>{props.children}</div>;
+}

package/dist/shared/ui/Section.css

@@ -0,0 +1,18 @@
+[data-start-section] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-start-section-title] {
+  text-transform: uppercase;
+}
+
+[data-start-section-content] {
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  border-left: 1px oklch(87% 0.065 274.039) solid;
+
+  width: calc(100% - 2rem);
+
+  overflow: auto;
+}

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

@@ -0,0 +1,9 @@
+import type { JSX } from "solid-js";
+import { type TextProps } from "./Text.tsx";
+import "./Section.css";
+export interface SectionProps {
+    title: string;
+    options?: TextProps<"span">["options"];
+    children: JSX.Element;
+}
+export declare function Section(props: SectionProps): JSX.Element;

package/dist/shared/ui/Section.jsx

@@ -0,0 +1,10 @@
+import { Text } from "./Text.jsx";
+import "./Section.css";
+export function Section(props) {
+    return (<div data-start-section>
+      <Text data-start-section-title options={{ weight: "bold", font: "sans", ...props.options }}>
+        {props.title}
+      </Text>
+      <div data-start-section-content>{props.children}</div>
+    </div>);
+}

package/dist/shared/ui/Select.css

@@ -0,0 +1,37 @@
+[data-start-select] {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  margin-block: 0;
+  list-style-type: none;
+  padding-inline: 0;
+}
+
+[data-start-select] > * + * {
+  border-top: 1px oklch(87% 0.065 274.039) solid;
+}
+
+[data-start-select-option] {
+  color: rgb(249 250 251);
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline: none;
+  cursor: pointer;
+
+  transition-property: color, background-color, border-color, box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  white-space: nowrap;
+}
+
+[data-start-select-option][tc-active],
+[data-start-select-option][tc-selected],
+[data-start-select-option]:focus {
+  color: rgb(229 231 235);
+  background-color: rgb(55 65 81);
+}

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

@@ -0,0 +1,4 @@
+import { Select as BaseSelect, SelectOption as BaseSelectOption } from "terracotta";
+import "./Select.css";
+export declare const Select: typeof BaseSelect;
+export declare const SelectOption: typeof BaseSelectOption;

package/dist/shared/ui/Select.jsx

@@ -0,0 +1,4 @@
+import { Select as BaseSelect, SelectOption as BaseSelectOption } from "terracotta";
+import "./Select.css";
+export const Select = props => <BaseSelect data-start-select {...props}/>;
+export const SelectOption = props => (<BaseSelectOption data-start-select-option {...props}/>);

package/dist/shared/ui/Table.css

@@ -0,0 +1,22 @@
+[data-start-table] {
+  border: 1px oklch(70.7% 0.165 254.624) solid;
+}
+
+[data-start-table-header] {
+  display: flex;
+  flex-direction: row;
+  background-color: oklch(93.2% 0.032 255.585);
+  font-weight: 600;
+}
+
+[data-start-table-row] {
+  display: flex;
+  flex-direction: row;
+  border-top: 1px oklch(70.7% 0.165 254.624) solid;
+}
+
+[data-start-table-cell] {
+  flex: 1;
+  padding: 0.5rem 1rem;
+  overflow: auto;
+}

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

@@ -0,0 +1,11 @@
+import type { ComponentProps, JSX } from "solid-js";
+import "./Table.css";
+type TableProps = ComponentProps<"div">;
+export declare function Table(props: TableProps): JSX.Element;
+type TableHeaderProps = ComponentProps<"div">;
+export declare function TableHeader(props: TableHeaderProps): JSX.Element;
+type TableRowProps = ComponentProps<"div">;
+export declare function TableRow(props: TableRowProps): JSX.Element;
+type TableCellProps = ComponentProps<"div">;
+export declare function TableCell(props: TableCellProps): JSX.Element;
+export {};

package/dist/shared/ui/Table.jsx

@@ -0,0 +1,13 @@
+import "./Table.css";
+export function Table(props) {
+    return <div data-start-table {...props}/>;
+}
+export function TableHeader(props) {
+    return <div data-start-table-header {...props}/>;
+}
+export function TableRow(props) {
+    return <div data-start-table-row {...props}/>;
+}
+export function TableCell(props) {
+    return <div data-start-table-cell {...props}/>;
+}

package/dist/shared/ui/Tabs.css

@@ -0,0 +1,51 @@
+[data-start-tab] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 0.5rem;
+  cursor: pointer;
+
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border: none;
+  outline: none;
+
+  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-tab][tc-active],
+[data-start-tab][tc-selected],
+[data-start-tab]:hover,
+[data-start-tab]:focus {
+  color: rgb(229 231 235);
+  background-color: rgb(55 65 81);
+}
+
+[data-start-tab-group] {
+}
+
+[data-start-tab-list] {
+  display: flex;
+  gap: 0.5rem;
+  margin: 0.5rem;
+}
+
+[data-start-tab-panel] {
+  height: 100%;
+
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem;
+
+  border-top: oklch(87% 0.065 274.039) 1px solid;
+}

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

@@ -0,0 +1,6 @@
+import { Tab as BaseTab, TabGroup as BaseTabGroup, TabList as BaseTabList, TabPanel as BaseTabPanel } from "terracotta";
+import "./Tabs.css";
+export declare const Tab: typeof BaseTab;
+export declare const TabGroup: typeof BaseTabGroup;
+export declare const TabPanel: typeof BaseTabPanel;
+export declare const TabList: typeof BaseTabList;

package/dist/shared/ui/Tabs.jsx

@@ -0,0 +1,6 @@
+import { Tab as BaseTab, TabGroup as BaseTabGroup, TabList as BaseTabList, TabPanel as BaseTabPanel, } from "terracotta";
+import "./Tabs.css";
+export const Tab = props => <BaseTab data-start-tab {...props}/>;
+export const TabGroup = props => (<BaseTabGroup data-start-tab-group {...props}/>);
+export const TabPanel = props => (<BaseTabPanel data-start-tab-panel {...props}/>);
+export const TabList = props => <BaseTabList data-start-tab-list {...props}/>;