@solidjs/start 0.7.1 → 0.7.2

package/dist/server/handler.js

@@ -0,0 +1,98 @@
+import { sharedConfig } from "solid-js";
+import { renderToStream, renderToString } from "solid-js/web";
+import { provideRequestEvent } from "solid-js/web/storage";
+import { eventHandler, sendRedirect, setHeader, setResponseStatus } from "vinxi/http";
+import { matchAPIRoute } from "../router/routes";
+import { getFetchEvent } from "./fetchEvent";
+import { createPageEvent } from "./pageEvent";
+export function createBaseHandler(fn, createPageEvent, options = {}) {
+    return eventHandler({
+        handler: (e) => {
+            const event = getFetchEvent(e);
+            return provideRequestEvent(event, async () => {
+                // api
+                const match = matchAPIRoute(new URL(event.request.url).pathname, event.request.method);
+                if (match) {
+                    const mod = await match.handler.import();
+                    const fn = mod[event.request.method];
+                    event.params = match.params || {};
+                    // @ts-ignore
+                    sharedConfig.context = { event };
+                    const res = await fn(event);
+                    if (res !== undefined)
+                        return res;
+                    if (event.request.method !== "GET") {
+                        throw new Error(`API handler for ${event.request.method} "${event.request.url}" did not return a response.`);
+                    }
+                }
+                // render
+                const context = await createPageEvent(event);
+                if (typeof options === "function")
+                    options = await options(context);
+                const mode = options.mode || "stream";
+                // @ts-ignore
+                if (options.nonce)
+                    context.nonce = options.nonce;
+                if (mode === "sync" || !import.meta.env.START_SSR) {
+                    const html = renderToString(() => {
+                        sharedConfig.context.event = context;
+                        return fn(context);
+                    }, options);
+                    if (context.response && context.response.headers.get("Location")) {
+                        return sendRedirect(e, context.response.headers.get("Location"));
+                    }
+                    return html;
+                }
+                let cloned = { ...options };
+                if (cloned.onCompleteAll) {
+                    const og = cloned.onCompleteAll;
+                    cloned.onCompleteAll = options => {
+                        handleStreamCompleteRedirect(context)(options);
+                        og(options);
+                    };
+                }
+                else
+                    cloned.onCompleteAll = handleStreamCompleteRedirect(context);
+                if (cloned.onCompleteShell) {
+                    const og = cloned.onCompleteShell;
+                    cloned.onCompleteShell = options => {
+                        handleShellCompleteRedirect(context, e)();
+                        og(options);
+                    };
+                }
+                else
+                    cloned.onCompleteShell = handleShellCompleteRedirect(context, e);
+                const stream = renderToStream(() => {
+                    sharedConfig.context.event = context;
+                    return fn(context);
+                }, cloned);
+                if (context.response && context.response.headers.get("Location")) {
+                    return sendRedirect(e, context.response.headers.get("Location"));
+                }
+                if (mode === "async")
+                    return stream;
+                // fix cloudflare streaming
+                const { writable, readable } = new TransformStream();
+                stream.pipeTo(writable);
+                return readable;
+            });
+        }
+    });
+}
+function handleShellCompleteRedirect(context, e) {
+    return () => {
+        if (context.response && context.response.headers.get("Location")) {
+            setResponseStatus(e, 302);
+            setHeader(e, "Location", context.response.headers.get("Location"));
+        }
+    };
+}
+function handleStreamCompleteRedirect(context) {
+    return ({ write }) => {
+        const to = context.response && context.response.headers.get("Location");
+        to && write(`<script>window.location="${to}"</script>`);
+    };
+}
+export function createHandler(fn, options) {
+    return createBaseHandler(fn, createPageEvent, options);
+}

package/dist/server/index.jsx

@@ -0,0 +1,5 @@
+// @refresh skip
+export { StartServer } from "./StartServer";
+export { createHandler } from "./handler";
+export { getServerFunctionMeta } from "./serverFunction";
+export * from "./types";

package/dist/server/islands/index.d.ts

@@ -0,0 +1,19 @@
+import { type Component } from "solid-js";
+declare module "solid-js" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "solid-island": {
+                "data-props": string;
+                "data-id": string;
+                "data-when": "idle" | "load";
+                children: JSX.Element;
+            };
+            "solid-children": {
+                children: JSX.Element;
+            };
+        }
+    }
+}
+export declare function createIslandReference<T extends Component<any>>(Comp: T | (() => Promise<{
+    default: T;
+}>), id: string, name: string): T;

package/dist/server/islands/index.jsx

@@ -0,0 +1,62 @@
+// @refresh skip
+import { lazy, sharedConfig } from "solid-js";
+import { Hydration, NoHydration, getRequestEvent } from "solid-js/web";
+// import { IslandManifest } from "./types";
+import { splitProps } from "./utils";
+export function createIslandReference(Comp, id, name) {
+    let Component = Comp;
+    if (!import.meta.env.START_ISLANDS) {
+        // TODO: have some sane semantics for islands used in non-island mode
+        return lazy(Comp);
+    }
+    function IslandComponent(props) {
+        return (<Component {...props}>
+        <NoHydration>{props.children}</NoHydration>
+      </Component>);
+    }
+    return ((compProps) => {
+        if (import.meta.env.SSR) {
+            const context = getRequestEvent();
+            const [, props] = splitProps(compProps, ["children"]);
+            const [, spreadProps] = splitProps(compProps, []);
+            let fpath;
+            let styles = [];
+            // if (import.meta.env.PROD) {
+            //   let x = context.env.manifest?.[path] as IslandManifest;
+            //   context.$islands.add(path);
+            //   if (x) {
+            //     fpath = x.script.href;
+            //     styles = x.assets.filter(v => v.type == "style").map(v => v.href);
+            //   }
+            // } else {
+            fpath = id + "#" + name;
+            // }
+            const serialize = (props) => {
+                let offset = 0;
+                let el = JSON.stringify(props, (key, value) => {
+                    if (value && value.t) {
+                        offset++;
+                        return undefined;
+                    }
+                    return value;
+                });
+                return {
+                    "data-props": el,
+                    "data-offset": offset
+                };
+            };
+            // @ts-expect-error
+            if (!sharedConfig.context?.noHydrate) {
+                return <Component {...compProps}/>;
+            }
+            return (<Hydration>
+          <solid-island data-id={fpath} data-when={props["client:idle"] ? "idle" : "load"} data-css={JSON.stringify(styles)} {...serialize(props)}>
+            <IslandComponent {...spreadProps}/>
+          </solid-island>
+        </Hydration>);
+        }
+        else {
+            return <Component {...compProps}/>;
+        }
+    });
+}

package/dist/server/islands/utils.d.ts

@@ -0,0 +1 @@
+export declare function splitProps<T>(props: T, ...keys: (keyof T)[]): [T, T];

package/dist/server/islands/utils.jsx

@@ -0,0 +1,85 @@
+// @refresh skip
+// TODO rename to utils.ts?
+// @ts-nocheck
+import { $PROXY } from "solid-js";
+function trueFn() {
+    return true;
+}
+const propTraps = {
+    get(_, property, receiver) {
+        if (property === $PROXY)
+            return receiver;
+        return _.get(property);
+    },
+    has(_, property) {
+        return _.has(property);
+    },
+    set: trueFn,
+    deleteProperty: trueFn,
+    getOwnPropertyDescriptor(_, property) {
+        return {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return _.get(property);
+            },
+            set: trueFn,
+            deleteProperty: trueFn
+        };
+    },
+    ownKeys(_) {
+        return _.keys();
+    }
+};
+export function splitProps(props, ...keys) {
+    const blocked = new Set(keys.flat());
+    const descriptors = Object.getOwnPropertyDescriptors(props);
+    const isProxy = $PROXY in props;
+    if (!isProxy)
+        keys.push(Object.keys(descriptors).filter(k => !blocked.has(k)));
+    const res = keys.map(k => {
+        const clone = {};
+        for (let i = 0; i < k.length; i++) {
+            const key = k[i];
+            let cache;
+            Object.defineProperty(clone, key, {
+                enumerable: descriptors[key]?.enumerable ?? false,
+                configurable: true,
+                get() {
+                    if (cache) {
+                        return cache;
+                    }
+                    let val = props[key];
+                    if (val?.t) {
+                        val.t = `<solid-children>${val.t}</solid-children>`;
+                    }
+                    else if (Array.isArray(val) && val.every(v => v?.t)) {
+                        val = {
+                            t: `<solid-children>${val.map(v => `${v.t}`).join("\n")}</solid-children>`
+                        };
+                    }
+                    cache = val;
+                    return val;
+                },
+                set() {
+                    return true;
+                }
+            });
+        }
+        return clone;
+    });
+    if (isProxy) {
+        res.push(new Proxy({
+            get(property) {
+                return blocked.has(property) ? undefined : props[property];
+            },
+            has(property) {
+                return blocked.has(property) ? false : property in props;
+            },
+            keys() {
+                return Object.keys(props).filter(k => !blocked.has(k));
+            }
+        }, propTraps));
+    }
+    return res;
+}

package/dist/server/pageEvent.d.ts

@@ -0,0 +1,2 @@
+import { FetchEvent, PageEvent } from "./types";
+export declare function createPageEvent(ctx: FetchEvent): Promise<PageEvent>;

package/dist/server/pageEvent.js

@@ -0,0 +1,43 @@
+import { getCookie, setCookie } from "vinxi/http";
+import { createRoutes } from "../router/FileRoutes";
+function initFromFlash(ctx) {
+    const flash = getCookie(ctx.nativeEvent, "flash");
+    if (!flash)
+        return;
+    let param = JSON.parse(flash);
+    if (!param || !param.result)
+        return;
+    const input = [...param.input.slice(0, -1), new Map(param.input[param.input.length - 1])];
+    setCookie(ctx.nativeEvent, "flash", "", { maxAge: 0 });
+    return {
+        input,
+        url: param.url,
+        pending: false,
+        result: param.error ? new Error(param.result) : param.result,
+    };
+}
+export async function createPageEvent(ctx) {
+    const clientManifest = import.meta.env.MANIFEST["client"];
+    const serverManifest = import.meta.env.MANIFEST["ssr"];
+    ctx.response.headers.set("Content-Type", "text/html");
+    // const prevPath = ctx.request.headers.get("x-solid-referrer");
+    // const mutation = ctx.request.headers.get("x-solid-mutation") === "true";
+    const pageEvent = Object.assign(ctx, {
+        manifest: await clientManifest.json(),
+        assets: [
+            ...(await clientManifest.inputs[clientManifest.handler].assets()),
+            ...(import.meta.env.START_ISLANDS
+                ? (await serverManifest.inputs[serverManifest.handler].assets()).filter(s => s.attrs.rel !== "modulepreload")
+                : [])
+        ],
+        router: {
+            submission: initFromFlash(ctx)
+        },
+        routes: createRoutes(),
+        // prevUrl: prevPath || "",
+        // mutation: mutation,
+        // $type: FETCH_EVENT,
+        $islands: new Set()
+    });
+    return pageEvent;
+}

package/dist/server/renderAsset.d.ts

@@ -0,0 +1,2 @@
+import type { Asset } from "./types";
+export declare function renderAsset(asset: Asset): any;

package/dist/server/renderAsset.jsx

@@ -0,0 +1,13 @@
+const assetMap = {
+    style: (props) => (<style {...props.attrs}>{props.children}</style>),
+    link: (props) => <link {...props.attrs}/>,
+    script: (props) => {
+        return props.attrs.src ? (<script {...props.attrs} id={props.key}>
+        {" "}
+      </script>) : null;
+    }
+};
+export function renderAsset(asset) {
+    let { tag, attrs: { key, ...attrs } = { key: undefined }, children } = asset;
+    return assetMap[tag]({ attrs, key, children });
+}

package/dist/server/serverFunction.d.ts

@@ -0,0 +1,2 @@
+import type { ServerFunctionMeta } from "./types";
+export declare function getServerFunctionMeta(): ServerFunctionMeta | undefined;

package/dist/server/serverFunction.jsx

@@ -0,0 +1,4 @@
+import { getRequestEvent } from "solid-js/web";
+export function getServerFunctionMeta() {
+    return getRequestEvent()?.locals.serverFunctionMeta;
+}

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

@@ -0,0 +1,5 @@
+import type { Component } from "solid-js";
+import type { DocumentComponentProps } from "../types";
+export declare function StartServer(props: {
+    document: Component<DocumentComponentProps>;
+}): import("solid-js").JSX.Element;

package/dist/server/spa/StartServer.jsx

@@ -0,0 +1,18 @@
+import { NoHydration, getRequestEvent, ssr } from "solid-js/web";
+import { renderAsset } from "../renderAsset";
+const docType = ssr("<!DOCTYPE html>");
+export function StartServer(props) {
+    const context = getRequestEvent();
+    // @ts-ignore
+    const nonce = context.nonce;
+    return (<NoHydration>
+      {docType}
+      <props.document assets={<>{context.assets.map((m) => renderAsset(m))}</>} scripts={nonce ? (<>
+              <script nonce={nonce} innerHTML={`window.manifest = ${JSON.stringify(context.manifest)}`}/>
+              <script type="module" src={import.meta.env.MANIFEST["client"].inputs[import.meta.env.MANIFEST["client"].handler].output.path}/>
+            </>) : (<>
+              <script innerHTML={`window.manifest = ${JSON.stringify(context.manifest)}`}/>
+              <script type="module" src={import.meta.env.MANIFEST["client"].inputs[import.meta.env.MANIFEST["client"].handler].output.path}/>
+            </>)}/>
+    </NoHydration>);
+}

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

@@ -0,0 +1,3 @@
+import { FetchEvent, HandlerOptions, PageEvent } from "../types";
+export declare function createHandler(fn: (context: PageEvent) => unknown, options?: HandlerOptions | ((context: PageEvent) => HandlerOptions)): import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<any>>;
+export declare function createPageEvent(ctx: FetchEvent): Promise<PageEvent>;

package/dist/server/spa/handler.js

@@ -0,0 +1,17 @@
+import { createBaseHandler } from "../handler";
+export function createHandler(fn, options) {
+    return createBaseHandler(fn, createPageEvent, options);
+}
+export async function createPageEvent(ctx) {
+    const clientManifest = import.meta.env.MANIFEST["client"];
+    const pageEvent = Object.assign(ctx, {
+        manifest: await clientManifest.json(),
+        assets: [...(await clientManifest.inputs[clientManifest.handler].assets())],
+        routes: [],
+        // prevUrl: "",
+        // mutation: false,
+        // $type: FETCH_EVENT,
+        $islands: new Set()
+    });
+    return pageEvent;
+}

package/{server/spa/index.tsx → dist/server/spa/index.d.ts}

@@ -1,4 +1,3 @@
 export * from "../types";
 export { StartServer } from "./StartServer";
 export { createHandler } from "./handler";
-

package/dist/server/spa/index.jsx

@@ -0,0 +1,4 @@
+// @refresh skip
+export * from "../types";
+export { StartServer } from "./StartServer";
+export { createHandler } from "./handler";

package/dist/server/types.d.ts

@@ -0,0 +1,79 @@
+import type { JSX } from "solid-js";
+import { RequestEvent } from "solid-js/web";
+import { HTTPEvent } from "vinxi/http";
+export type DocumentComponentProps = {
+    assets: JSX.Element;
+    scripts: JSX.Element;
+    children?: JSX.Element;
+};
+export type Asset = {
+    tag: "style";
+    attrs: JSX.StyleHTMLAttributes<HTMLStyleElement> & {
+        key?: string;
+    };
+    children?: JSX.Element;
+} | {
+    tag: "script";
+    attrs: JSX.ScriptHTMLAttributes<HTMLScriptElement> & {
+        key?: string;
+    };
+} | {
+    tag: "link";
+    attrs: JSX.LinkHTMLAttributes<HTMLLinkElement> & {
+        key?: string;
+    };
+};
+export type HandlerOptions = {
+    mode?: "sync" | "async" | "stream";
+    nonce?: string;
+    renderId?: string;
+    onCompleteAll?: (options: {
+        write: (v: any) => void;
+    }) => void;
+    onCompleteShell?: (options: {
+        write: (v: any) => void;
+    }) => void;
+};
+export type ContextMatches = {
+    originalPath: string;
+    pattern: string;
+    path: string;
+    params: unknown;
+};
+export interface ResponseStub {
+    status?: number;
+    statusText?: string;
+    headers: Headers;
+}
+export interface FetchEvent {
+    request: Request;
+    response: ResponseStub;
+    clientAddress?: string;
+    locals: RequestEventLocals;
+    nativeEvent: HTTPEvent;
+}
+export interface RequestEventLocals {
+    [key: string | symbol]: any;
+}
+export interface PageEvent extends RequestEvent {
+    manifest: any;
+    assets: any;
+    routes: any[];
+    $islands: Set<string>;
+}
+export interface APIEvent extends FetchEvent {
+    params: {
+        [key: string]: string;
+    };
+}
+export interface APIHandler {
+    (event: APIEvent): Promise<any>;
+}
+export interface ServerFunctionMeta {
+    id: string;
+}
+declare module "solid-js/web" {
+    interface RequestEvent extends FetchEvent {
+        serverOnly?: boolean;
+    }
+}

package/dist/server/types.js

@@ -0,0 +1 @@
+export {};

package/dist/shared/ErrorBoundary.d.ts

@@ -0,0 +1,2 @@
+import { type ParentProps } from "solid-js";
+export declare const ErrorBoundary: (props: ParentProps) => import("solid-js").JSX.Element;

package/dist/shared/ErrorBoundary.jsx

@@ -0,0 +1,16 @@
+// @refresh skip
+import { ErrorBoundary as DefaultErrorBoundary } from "solid-js";
+import { isServer } from "solid-js/web";
+import { HttpStatusCode } from "./HttpStatusCode";
+import { DevOverlay } from "./dev-overlay";
+export const ErrorBoundary = import.meta.env.DEV && import.meta.env.START_DEV_OVERLAY
+    ? (props) => <DevOverlay>{props.children}</DevOverlay>
+    : (props) => {
+        const message = isServer ? "500 | Internal Server Error" : "Error | Uncaught Client Exception";
+        return (<DefaultErrorBoundary fallback={<>
+            <span style="font-size:1.5em;text-align:center;position:fixed;left:0px;bottom:55%;width:100%;">{message}</span>
+            <HttpStatusCode code={500}/>
+          </>}>
+        {props.children}
+      </DefaultErrorBoundary>);
+    };

package/dist/shared/GET.d.ts

@@ -0,0 +1 @@
+export declare function GET<T extends (...args: any[]) => any>(fn: T): (...args: Parameters<T>) => ReturnType<T>;

package/dist/shared/GET.js

@@ -0,0 +1,5 @@
+export function GET(fn) {
+    return (...args) => {
+        return fn.GET(...args);
+    };
+}

package/dist/shared/HttpHeader.d.ts

@@ -0,0 +1,6 @@
+export interface HttpHeaderProps {
+    name: string;
+    value: string;
+    append?: boolean;
+}
+export declare const HttpHeader: (props: HttpHeaderProps) => null;

package/dist/shared/HttpHeader.jsx

@@ -0,0 +1,32 @@
+// @refresh skip
+import { onCleanup } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
+export const HttpHeader = isServer
+    ? (props) => {
+        const event = getRequestEvent();
+        if (props.append)
+            event.response.headers.append(props.name, props.value);
+        else
+            event.response.headers.set(props.name, props.value);
+        onCleanup(() => {
+            if (event.nativeEvent.handled)
+                return;
+            const value = event.response.headers.get(props.name);
+            if (!value)
+                return;
+            if (!value.includes(", ")) {
+                if (value === props.value)
+                    event.response.headers.delete(props.name);
+                return;
+            }
+            const values = value.split(", ");
+            const index = values.indexOf(props.value);
+            index !== -1 && values.splice(index, 1);
+            if (values.length)
+                event.response.headers.set(props.name, values.join(","));
+            else
+                event.response.headers.delete(props.name);
+        });
+        return null;
+    }
+    : (_props) => null;

package/dist/shared/HttpStatusCode.d.ts

@@ -0,0 +1,5 @@
+export interface HttpStatusCodeProps {
+    code: number;
+    text?: string;
+}
+export declare const HttpStatusCode: (props: HttpStatusCodeProps) => null;

package/dist/shared/HttpStatusCode.jsx

@@ -0,0 +1,12 @@
+// @refresh skip
+import { onCleanup } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
+export const HttpStatusCode = isServer
+    ? (props) => {
+        const event = getRequestEvent();
+        event.response.status = props.code;
+        event.response.statusText = props.text;
+        onCleanup(() => !event.nativeEvent.handled && (event.response.status = 200));
+        return null;
+    }
+    : (_props) => null;

package/dist/shared/clientOnly.d.ts

@@ -0,0 +1,6 @@
+import type { Component, ComponentProps, JSX } from "solid-js";
+export default function clientOnly<T extends Component<any>>(fn: () => Promise<{
+    default: T;
+}>): (props: ComponentProps<T> & {
+    fallback?: JSX.Element;
+}) => any;

package/dist/shared/clientOnly.jsx

@@ -0,0 +1,19 @@
+import { createMemo, createSignal, onMount, sharedConfig, splitProps, untrack } from "solid-js";
+import { isServer } from "solid-js/web";
+// not using Suspense
+export default function clientOnly(fn) {
+    if (isServer)
+        return (props) => props.fallback;
+    const [comp, setComp] = createSignal();
+    fn().then(m => setComp(() => m.default));
+    return (props) => {
+        let Comp;
+        let m;
+        const [, rest] = splitProps(props, ["fallback"]);
+        if ((Comp = comp()) && !sharedConfig.context)
+            return Comp(rest);
+        const [mounted, setMounted] = createSignal(!sharedConfig.context);
+        onMount(() => setMounted(true));
+        return createMemo(() => ((Comp = comp()), (m = mounted()), untrack(() => (Comp && m ? Comp(rest) : props.fallback))));
+    };
+}

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

@@ -0,0 +1,7 @@
+import { type JSX } from 'solid-js';
+export interface CodeViewProps {
+    fileName: string;
+    content: string;
+    line: number;
+}
+export declare function CodeView(props: CodeViewProps): JSX.Element | null;