@solidjs/start 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/server/manifest/dev-client-manifest.js

@@ -0,0 +1,24 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+import { join } from "pathe";
+export function getClientDevManifest() {
+    return {
+        import(id) {
+            return import(__rewriteRelativeImportExtension(/* @vite-ignore */ join("/", id), true));
+        },
+        async getAssets(id) {
+            const assetsPath = `/@manifest/client/${Date.now()}/assets?id=${id}`;
+            const assets = (await import(__rewriteRelativeImportExtension(/* @vite-ignore */ assetsPath, true))).default;
+            return await Promise.all(assets.map(async (v) => ({
+                ...v,
+                children: await v.children(),
+            })));
+        },
+    };
+}

package/dist/server/manifest/dev-ssr-manifest.d.ts

@@ -0,0 +1,5 @@
+export declare function getSsrDevManifest(environment: "client" | "ssr"): {
+    path: (id: string) => string;
+    getAssets(id: string): Promise<any[]>;
+};
+export { getSsrDevManifest as getSsrManifest };

package/dist/server/manifest/dev-ssr-manifest.js

@@ -0,0 +1,23 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+import { join, normalize } from "pathe";
+export function getSsrDevManifest(environment) {
+    return {
+        path: (id) => normalize(join(import.meta.env.BASE_URL, id)),
+        async getAssets(id) {
+            const assetsPath = `/@manifest/${environment}/${Date.now()}/assets?id=${id}`;
+            const assets = (await import(__rewriteRelativeImportExtension(/* @vite-ignore */ assetsPath, true))).default;
+            return await Promise.all(assets.map(async (v) => ({
+                ...v,
+                children: await v.children(),
+            })));
+        },
+    };
+}
+export { getSsrDevManifest as getSsrManifest };

package/dist/server/manifest/prod-client-manifest.d.ts

@@ -0,0 +1,5 @@
+export declare function getClientProdManifest(): {
+    import(id: string): Promise<any>;
+    getAssets(id: string): Promise<any>;
+    json(): Promise<any>;
+};

package/dist/server/manifest/prod-client-manifest.js

@@ -0,0 +1,26 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+export function getClientProdManifest() {
+    return {
+        import(id) {
+            // @ts-ignore
+            return import(__rewriteRelativeImportExtension(/* @vite-ignore */ window.manifest[id].output, true));
+        },
+        async getAssets(id) {
+            if (id.startsWith("./"))
+                id = id.slice(2);
+            // @ts-ignore
+            return window.manifest[id]?.assets ?? [];
+        },
+        async json() {
+            // @ts-ignore
+            return window.manifest;
+        },
+    };
+}

package/dist/server/manifest/prod-ssr-manifest.d.ts

@@ -0,0 +1,6 @@
+import type { Asset } from "../assets/render.tsx";
+export declare function getSsrProdManifest(): {
+    path(id: string): string;
+    getAssets(id: string): Promise<Asset[]>;
+    json(): Promise<Record<string, any>>;
+};

package/dist/server/manifest/prod-ssr-manifest.js

@@ -0,0 +1,85 @@
+import { clientViteManifest } from "solid-start:client-vite-manifest";
+import { join } from "pathe";
+// Only reads from client manifest atm, might need server support for islands
+export function getSsrProdManifest() {
+    const viteManifest = clientViteManifest;
+    return {
+        path(id) {
+            if (id.startsWith("./"))
+                id = id.slice(2);
+            const viteManifestEntry = clientViteManifest[id /*import.meta.env.START_CLIENT_ENTRY*/];
+            if (!viteManifestEntry)
+                throw new Error(`No entry found in vite manifest for '${id}'`);
+            return join("/", viteManifestEntry.file);
+        },
+        async getAssets(id) {
+            if (id.startsWith("./"))
+                id = id.slice(2);
+            return createHtmlTagsForAssets(findAssetsInViteManifest(clientViteManifest, id));
+        },
+        async json() {
+            const json = {};
+            const entryKeys = Object.keys(viteManifest)
+                .filter(id => viteManifest[id]?.isEntry || viteManifest[id]?.isDynamicEntry)
+                .map(id => id);
+            for (const entryKey of entryKeys) {
+                json[entryKey] = {
+                    output: join("/", viteManifest[entryKey].file),
+                    assets: await this.getAssets(entryKey),
+                };
+            }
+            return json;
+        },
+    };
+}
+function createHtmlTagsForAssets(assets) {
+    return assets
+        .filter(asset => asset.endsWith(".css") ||
+        asset.endsWith(".js") ||
+        asset.endsWith(".ts") ||
+        asset.endsWith(".mjs"))
+        .map(asset => ({
+        tag: "link",
+        attrs: {
+            href: "/" + asset,
+            key: asset,
+            ...(asset.endsWith(".css") ? { rel: "stylesheet" } : { rel: "modulepreload" }),
+        },
+    }));
+}
+const entryId = import.meta.env.START_CLIENT_ENTRY.slice(2);
+let entryImports = undefined;
+function findAssetsInViteManifest(manifest, id, assetMap = new Map(), stack = []) {
+    if (stack.includes(id)) {
+        return [];
+    }
+    const cached = assetMap.get(id);
+    if (cached) {
+        return cached;
+    }
+    const chunk = manifest[id];
+    if (!chunk) {
+        return [];
+    }
+    if (!entryImports) {
+        entryImports = [entryId, ...(manifest[entryId]?.imports ?? [])];
+    }
+    // Only include entry imports, if we are specifically crawling the entry
+    // Chunks (e.g. routes) that import something from entry, should not render entry css redundantly
+    const excludeEntryImports = id !== entryId;
+    const assets = chunk.css?.filter(Boolean) || [];
+    if (chunk.imports) {
+        stack.push(id);
+        for (let i = 0, l = chunk.imports.length; i < l; i++) {
+            const importId = chunk.imports[i];
+            if (!importId || (excludeEntryImports && entryImports.includes(importId)))
+                continue;
+            assets.push(...findAssetsInViteManifest(manifest, importId, assetMap, stack));
+        }
+        stack.pop();
+    }
+    assets.push(chunk.file);
+    const all = Array.from(new Set(assets));
+    assetMap.set(id, all);
+    return all;
+}

package/dist/server/manifest/ssr-manifest.d.ts

@@ -0,0 +1,4 @@
+import { getSsrDevManifest } from "./dev-ssr-manifest.ts";
+import { getSsrProdManifest } from "./prod-ssr-manifest.ts";
+export declare function getSsrManifest(target: "client" | "ssr"): ReturnType<typeof getSsrDevManifest> | ReturnType<typeof getSsrProdManifest>;
+export { getSsrManifest as getManifest };

package/dist/server/manifest/ssr-manifest.js

@@ -0,0 +1,6 @@
+import { getSsrDevManifest } from "./dev-ssr-manifest.js";
+import { getSsrProdManifest } from "./prod-ssr-manifest.js";
+export function getSsrManifest(target) {
+    return import.meta.env.DEV ? getSsrDevManifest(target) : getSsrProdManifest();
+}
+export { getSsrManifest as getManifest };

package/dist/server/routes.d.ts

@@ -0,0 +1,23 @@
+import type { FetchEvent } from "./types.ts";
+interface Route {
+    path: string;
+    id: string;
+    children?: Route[];
+    page?: boolean;
+    $component?: any;
+    $HEAD?: any;
+    $GET?: any;
+    $POST?: any;
+    $PUT?: any;
+    $PATCH?: any;
+    $DELETE?: any;
+}
+export declare const pageRoutes: Route[];
+export declare function matchAPIRoute(path: string, method: string): {
+    params?: Record<string, any>;
+    handler: {
+        import: () => Promise<Record<string, (e: FetchEvent) => Promise<any>>>;
+    };
+    isPage: boolean;
+} | undefined;
+export {};

package/dist/server/routes.js

@@ -0,0 +1,74 @@
+// @ts-expect-error
+import fileRoutes from "solid-start:routes";
+import { createRouter } from "radix3";
+export const pageRoutes = defineRoutes(fileRoutes.filter(o => o.page));
+function defineRoutes(fileRoutes) {
+    function processRoute(routes, route, id, full) {
+        const parentRoute = Object.values(routes).find(o => {
+            return id.startsWith(o.id + "/");
+        });
+        if (!parentRoute) {
+            routes.push({
+                ...route,
+                id,
+                path: id.replace(/\([^)/]+\)/g, "").replace(/\/+/g, "/"),
+            });
+            return routes;
+        }
+        processRoute(parentRoute.children || (parentRoute.children = []), route, id.slice(parentRoute.id.length), full);
+        return routes;
+    }
+    return fileRoutes
+        .sort((a, b) => a.path.length - b.path.length)
+        .reduce((prevRoutes, route) => {
+        return processRoute(prevRoutes, route, route.path, route.path);
+    }, []);
+}
+const router = createRouter({
+    routes: fileRoutes.reduce((memo, route) => {
+        if (!containsHTTP(route))
+            return memo;
+        const path = route.path
+            .replace(/\([^)/]+\)/g, "")
+            .replace(/\/+/g, "/")
+            .replace(/\*([^/]*)/g, (_, m) => `**:${m}`)
+            .split("/")
+            .map(s => (s.startsWith(":") || s.startsWith("*") ? s : encodeURIComponent(s)))
+            .join("/");
+        if (/:[^/]*\?/g.test(path)) {
+            throw new Error(`Optional parameters are not supported in API routes: ${path}`);
+        }
+        if (memo[path]) {
+            throw new Error(`Duplicate API routes for "${path}" found at "${memo[path].route.path}" and "${route.path}"`);
+        }
+        memo[path] = { route };
+        return memo;
+    }, {}),
+});
+function containsHTTP(route) {
+    return (route["$HEAD"] ||
+        route["$GET"] ||
+        route["$POST"] ||
+        route["$PUT"] ||
+        route["$PATCH"] ||
+        route["$DELETE"]);
+}
+export function matchAPIRoute(path, method) {
+    const match = router.lookup(path);
+    if (match && match.route) {
+        const route = match.route;
+        // Find the appropriate handler for the HTTP method
+        const handler = method === "HEAD" ? route.$HEAD || route.$GET : route[`$${method}`];
+        if (handler === undefined)
+            return;
+        // Check if this is a page route
+        const isPage = route.page === true && route.$component !== undefined;
+        // Return comprehensive route information
+        return {
+            handler,
+            params: match.params,
+            isPage,
+        };
+    }
+    return undefined;
+}

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

@@ -0,0 +1,9 @@
+import type { Component } from "solid-js";
+import type { DocumentComponentProps } from "../types.ts";
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/start-server
+ */
+export declare function StartServer(props: {
+    document: Component<DocumentComponentProps>;
+}): import("solid-js").JSX.Element;

package/dist/server/spa/StartServer.jsx

@@ -0,0 +1,25 @@
+import { NoHydration, getRequestEvent, ssr } from "solid-js/web";
+import { getSsrManifest } from "../manifest/ssr-manifest.js";
+import { TopErrorBoundary } from "../../shared/ErrorBoundary.jsx";
+import { useAssets } from "../assets/index.js";
+import PatchVirtualDevStyles from "../assets/PatchVirtualDevStyles.jsx";
+const docType = ssr("<!DOCTYPE html>");
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/start-server
+ */
+export function StartServer(props) {
+    const context = getRequestEvent();
+    // @ts-ignore
+    const nonce = context.nonce;
+    useAssets(context.assets, nonce);
+    return (<NoHydration>
+      {docType}
+      <TopErrorBoundary>
+        <props.document scripts={<>
+              <PatchVirtualDevStyles nonce={nonce}/>
+              <script type="module" src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY_URL)}/>
+            </>}/>
+      </TopErrorBoundary>
+    </NoHydration>);
+}

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

@@ -0,0 +1,8 @@
+import type { H3 } from "h3/generic";
+import type { JSX } from "solid-js";
+import type { 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;

package/dist/server/spa/handler.js

@@ -0,0 +1,20 @@
+import { createBaseHandler } from "../handler.js";
+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);
+}
+async function createPageEvent(ctx) {
+    const manifest = getSsrManifest("ssr");
+    const pageEvent = Object.assign(ctx, {
+        manifest: "json" in manifest ? await manifest.json() : {},
+        assets: await manifest.getAssets(import.meta.env.START_CLIENT_ENTRY),
+        routes: [],
+        complete: false,
+        $islands: new Set(),
+    });
+    return pageEvent;
+}

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

@@ -1,4 +1,3 @@
-// @refresh skip
 export { default as lazy } from "../../shared/lazy.ts";
 export * from "../types.ts";
 export { StartServer } from "./StartServer.tsx";

package/dist/server/spa/index.jsx

@@ -0,0 +1,5 @@
+// @refresh skip
+export { default as lazy } from "../../shared/lazy.js";
+export * from "../types.js";
+export { StartServer } from "./StartServer.jsx";
+export { createHandler } from "./handler.js";

package/dist/server/types.d.ts

@@ -0,0 +1,75 @@
+import type { H3Event } from "h3";
+import type { JSX } from "solid-js";
+import type { RequestEvent } from "solid-js/web";
+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: App.RequestEventLocals;
+    nativeEvent: H3Event;
+}
+export interface PageEvent extends RequestEvent {
+    assets: any[];
+    routes: any[];
+    $islands: Set<string>;
+    complete: boolean;
+    nonce?: string;
+}
+export interface APIEvent extends FetchEvent {
+    params: {
+        [key: string]: string;
+    };
+}
+export type APIHandler = (event: APIEvent) => 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/server/util.d.ts

@@ -0,0 +1,2 @@
+import type { ResponseStub } from "./types.ts";
+export declare function getExpectedRedirectStatus(response: ResponseStub): number;

package/dist/server/util.js

@@ -0,0 +1,8 @@
+// according to https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#redirection_messages
+const validRedirectStatuses = new Set([301, 302, 303, 307, 308]);
+export function getExpectedRedirectStatus(response) {
+    if (response.status && validRedirectStatuses.has(response.status)) {
+        return response.status;
+    }
+    return 302;
+}

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.d.ts

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

package/dist/shared/ErrorBoundary.jsx

@@ -0,0 +1,36 @@
+// @refresh skip
+import { ErrorBoundary as DefaultErrorBoundary, catchError } from "solid-js";
+import { isServer } from "solid-js/web";
+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) => {
+        const message = isServer
+            ? "500 | Internal Server Error"
+            : "Error | Uncaught Client Exception";
+        return (<DefaultErrorBoundary fallback={error => {
+                console.error(error);
+                return (<>
+                  <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>);
+    };
+export const TopErrorBoundary = (props) => {
+    let isError = false;
+    const res = catchError(() => props.children, err => {
+        console.error(err);
+        isError = !!err;
+    });
+    return isError ? (<>
+      <span style="font-size:1.5em;text-align:center;position:fixed;left:0px;bottom:55%;width:100%;">
+        500 | Internal Server Error
+      </span>
+      <HttpStatusCode code={500}/>
+    </>) : (res);
+};

package/dist/shared/GET.d.ts

@@ -0,0 +1,5 @@
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/get
+ */
+export declare function GET<T extends (...args: any[]) => any>(fn: T): (...args: Parameters<T>) => ReturnType<T>;

package/dist/shared/GET.js

@@ -0,0 +1,8 @@
+// @refresh skip
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/get
+ */
+export function GET(fn) {
+    return fn.GET;
+}

package/dist/shared/HttpHeader.d.ts

@@ -0,0 +1,10 @@
+export interface HttpHeaderProps {
+    name: string;
+    value: string;
+    append?: boolean;
+}
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/http-header
+ */
+export declare const HttpHeader: (props: HttpHeaderProps) => null;

package/dist/shared/HttpHeader.jsx

@@ -0,0 +1,38 @@
+// @refresh skip
+import { onCleanup } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
+import { appendHeader, setHeader } from "../http/http.js";
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/http-header
+ */
+export const HttpHeader = isServer
+    ? (props) => {
+        const event = getRequestEvent();
+        if (props.append)
+            appendHeader(props.name, props.value);
+        else
+            setHeader(props.name, props.value);
+        onCleanup(() => {
+            // @ts-expect-error
+            if (event.nativeEvent.handled || event.complete)
+                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,9 @@
+export interface HttpStatusCodeProps {
+    code: number;
+    text?: string;
+}
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/http-status-code
+ */
+export declare const HttpStatusCode: (props: HttpStatusCodeProps) => null;

package/dist/shared/HttpStatusCode.js

@@ -0,0 +1,18 @@
+// @refresh skip
+import { onCleanup } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/server/http-status-code
+ */
+export const HttpStatusCode = isServer
+    ? (props) => {
+        const event = getRequestEvent();
+        event.response.status = props.code;
+        event.response.statusText = props.text;
+        onCleanup(() => 
+        // !event.nativeEvent.handled &&
+        !event.complete && (event.response.status = 200));
+        return null;
+    }
+    : (_props) => null;

package/dist/shared/clientOnly.d.ts

@@ -0,0 +1,12 @@
+import type { Component, ComponentProps, JSX } from "solid-js";
+/**
+ *
+ * Read more: https://docs.solidjs.com/solid-start/reference/client/client-only
+ */
+export default function clientOnly<T extends Component<any>>(fn: () => Promise<{
+    default: T;
+}>, options?: {
+    lazy?: boolean;
+}): (props: ComponentProps<T> & {
+    fallback?: JSX.Element;
+}) => any;