@solidjs/start 2.0.0-alpha.1 → 2.0.0-alpha.3

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

@@ -1,11 +1,11 @@
-.dev-overlay {
+[data-start-dev-overlay] {
   position: fixed;
   inset: 0px;
   z-index: 50;
   overflow-y: auto;
 }
 
-.dev-overlay>div {
+[data-start-dev-overlay]>div {
   position: relative;
   display: flex;
   align-items: center;
@@ -13,13 +13,13 @@
   min-height: 100vh;
 }
 
-.dev-overlay-background {
+[data-start-dev-overlay-background] {
   position: absolute;
   inset: 0px;
   background-color: rgb(17 24 39 / 0.5);
 }
 
-.dev-overlay-panel {
+[data-start-dev-overlay-panel] {
   display: flex;
   flex-direction: column;
   width: 75vw;
@@ -30,12 +30,12 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-.dev-overlay-panel-container {
+[data-start-dev-overlay-panel-container] {
   margin: 2rem;
   z-index: 10;
 }
 
-.dev-overlay-navbar {
+[data-start-dev-overlay-navbar] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -43,7 +43,7 @@
   gap: 0.5rem;
 }
 
-.dev-overlay-pagination {
+[data-start-dev-overlay-pagination] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -54,7 +54,7 @@
   padding: 0.25rem;
 }
 
-.dev-overlay-button {
+[data-start-dev-overlay-button] {
   display: flex;
   padding: 0.125rem;
   border-radius: 9999px;
@@ -68,44 +68,44 @@
   transition-duration: 150ms;
 }
 
-.dev-overlay-button:hover {
+[data-start-dev-overlay-button]:hover {
   background-color: rgb(229 231 235);
   color: rgb(55 65 81);
 }
 
-.dev-overlay-button:focus {
+[data-start-dev-overlay-button]:focus {
   outline: 2px solid transparent;
   outline-offset: 2px
 }
 
-.dev-overlay-button:focus-visible {
+[data-start-dev-overlay-button]:focus-visible {
   box-shadow: 0 0 0 calc(3px) rgb(17 24 39 / 0.75);
 }
 
-.dev-overlay-button:active {
+[data-start-dev-overlay-button]:active {
   background-color: rgb(243 244 246);
   color: rgb(31 41 55);
 }
 
-.dev-overlay-button>svg {
+[data-start-dev-overlay-button]>svg {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.dev-overlay-page-counter {
+[data-start-dev-overlay-page-counter] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 600;
 }
 
-.dev-overlay-navbar-left {
+[data-start-dev-overlay-navbar-left] {
   display: flex;
   flex-direction: row;
   gap: 0.5rem;
 }
 
 
-.dev-overlay-controls {
+[data-start-dev-overlay-controls] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -116,7 +116,7 @@
   padding: 0.25rem;
 }
 
-.dev-overlay-version {
+[data-start-dev-overlay-version] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -130,17 +130,17 @@
   font-weight: 600;
 }
 
-.dev-overlay-version>div {
+[data-start-dev-overlay-version]>div {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.dev-overlay-version>div>svg {
+[data-start-dev-overlay-version]>div>svg {
   height: 1.5rem;
   width: 1.5rem;
 }
 
-.dev-overlay-content {
+[data-start-dev-overlay-content] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -149,30 +149,30 @@
   padding: 1rem;
 }
 
-.dev-overlay-error-info {
+[data-start-dev-overlay-error-info] {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
 
-.dev-overlay-error-info-name {
+[data-start-dev-overlay-error-info-name] {
   font-weight: 700;
 }
 
-.dev-overlay-error-info-message {
+[data-start-dev-overlay-error-info-message] {
   font-size: 1.5rem;
   line-height: 2rem;
   color: rgb(239 68 68);
   font-weight: 700;
 }
 
-.dev-overlay-stack-frames-content {
+[data-start-dev-overlay-stack-frames-content] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 
-.dev-overlay-stack-frames {
+[data-start-dev-overlay-stack-frames] {
   flex: 1 1 0%;
   display: flex;
   flex-direction: column;
@@ -185,7 +185,7 @@
   border-radius: 0.5rem;
 }
 
-.dev-overlay-stack-frame {
+[data-start-dev-overlay-stack-frame] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -203,18 +203,18 @@
   outline: none;
 }
 
-.dev-overlay-stack-frame[tc-active],
-.dev-overlay-stack-frame[tc-selected],
-.dev-overlay-stack-frame:focus {
+[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);
 }
 
-.dev-overlay-stack-frame-function {
+[data-start-dev-overlay-stack-frame-function] {
   font-weight: 700;
 }
 
-.dev-overlay-stack-frame-file {
+[data-start-dev-overlay-stack-frame-file] {
   white-space: nowrap;
   font-size: 0.75rem;
   /* 12px */
@@ -222,7 +222,7 @@
   /* 16px */
 }
 
-.dev-overlay-stack-frames-code {
+[data-start-dev-overlay-stack-frames-code] {
   padding: 0.5rem 1rem;
   gap: 0.25rem;
   flex: 1 1 0%;
@@ -234,7 +234,7 @@
   background-color: rgb(17 24 39);
 }
 
-.dev-overlay-stack-frames-code-fallback {
+[data-start-dev-overlay-stack-frames-code-fallback] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -244,13 +244,13 @@
   line-height: 1.25rem;
 }
 
-.dev-overlay-stack-frames-code-source {
+[data-start-dev-overlay-stack-frames-code-source] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: rgb(249 250 251);
 }
 
-.dev-overlay-stack-frames-code-container {
+[data-start-dev-overlay-stack-frames-code-container] {
   width: 100%;
   overflow: hidden;
   min-width: 100%;
@@ -260,13 +260,13 @@
   border-top-color: rgb(249 250 251);
 }
 
-.dev-overlay-code-view {
+[data-start-dev-overlay-code-view] {
   overflow: auto;
   min-width: 100%;
   min-height: 16rem;
 }
 
-.dev-overlay-code-view>.shiki {
+[data-start-dev-overlay-code-view]>.shiki {
   float: left;
   min-width: 100%;
   overflow-x: auto;
@@ -277,7 +277,7 @@
   background-color: transparent !important;
 }
 
-.dev-overlay-code-view>.shiki .line::before {
+[data-start-dev-overlay-code-view]>.shiki .line::before {
   content: counter(step);
   counter-increment: step;
   width: 1rem;
@@ -287,6 +287,6 @@
   color: rgba(115, 138, 148, .4)
 }
 
-.dev-overlay-error-line {
+[data-start-dev-overlay-error-line] {
   background-color: rgba(239, 68, 68, .4);
-}
+}

package/tsconfig.json

@@ -20,4 +20,5 @@
     "rootDir": "./src",
   },
   "include": ["env.d.ts", "./src", "./src/env.d.ts"],
+  "exclude": ["**/*.spec.ts"]
 }

package/dist/server/fetchEvent.spec.js

@@ -1,65 +0,0 @@
-import * as h3 from "h3";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { createFetchEvent, getFetchEvent, mergeResponseHeaders } from "./fetchEvent.js";
-vi.mock(import("h3"), async (mod) => {
-    return {
-        ...(await mod()),
-        getRequestIP: vi.fn(),
-    };
-});
-const mockedH3 = vi.mocked(h3);
-const createMockH3Event = () => {
-    const event = new h3.H3Event(new Request("http://localhost/test"));
-    event.res.status = 200;
-    event.res.statusText = "OK";
-    return event;
-};
-describe("fetchEvent", () => {
-    let mockH3Event;
-    beforeEach(() => {
-        mockH3Event = createMockH3Event();
-        vi.clearAllMocks();
-        mockedH3.getRequestIP.mockReturnValue("127.0.0.1");
-    });
-    describe("createFetchEvent", () => {
-        it("should create a FetchEvent from H3Event", () => {
-            const fetchEvent = createFetchEvent(mockH3Event);
-            expect(fetchEvent).toEqual({
-                request: mockH3Event.req,
-                response: expect.any(Object),
-                clientAddress: "127.0.0.1",
-                locals: {},
-                nativeEvent: mockH3Event,
-            });
-        });
-        it("should create response stub with correct properties", () => {
-            const fetchEvent = createFetchEvent(mockH3Event);
-            expect(fetchEvent.response).toHaveProperty("status");
-            expect(fetchEvent.response).toHaveProperty("statusText");
-            expect(fetchEvent.response).toHaveProperty("headers");
-        });
-    });
-    describe("getFetchEvent", () => {
-        it("should create and cache FetchEvent on first call", () => {
-            const fetchEvent = getFetchEvent(mockH3Event);
-            expect(mockH3Event.context.solidFetchEvent).toBe(fetchEvent);
-            expect(fetchEvent.nativeEvent).toBe(mockH3Event);
-        });
-        it("should return cached FetchEvent on subsequent calls", () => {
-            const firstCall = getFetchEvent(mockH3Event);
-            const secondCall = getFetchEvent(mockH3Event);
-            expect(firstCall).toBe(secondCall);
-        });
-    });
-    describe("mergeResponseHeaders", () => {
-        it("should merge headers from Headers object to H3Event", () => {
-            const headers = new Headers({
-                "content-type": "application/json",
-                "x-custom": "value",
-            });
-            mergeResponseHeaders(mockH3Event, headers);
-            expect(headers.get("content-type")).toBe("application/json");
-            expect(headers.get("x-custom")).toBe("value");
-        });
-    });
-});

package/dist/server/server-fns-runtime.d.ts

@@ -1 +0,0 @@
-export declare function createServerReference(fn: Function, id: string): Function;

package/dist/server/server-functions-handler.d.ts

@@ -1,2 +0,0 @@
-import { type H3Event } from "h3";
-export declare function handleServerFunction(h3Event: H3Event): Promise<unknown>;

package/dist/server/server-runtime.js

@@ -1,194 +0,0 @@
-import { deserialize, toJSONAsync } from "seroval";
-import { CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLPlugin, URLSearchParamsPlugin, } from "seroval-plugins/web";
-class SerovalChunkReader {
-    reader;
-    buffer;
-    done;
-    constructor(stream) {
-        this.reader = stream.getReader();
-        this.buffer = new Uint8Array(0);
-        this.done = false;
-    }
-    async readChunk() {
-        // if there's no chunk, read again
-        const chunk = await this.reader.read();
-        if (!chunk.done) {
-            // repopulate the buffer
-            let newBuffer = new Uint8Array(this.buffer.length + chunk.value.length);
-            newBuffer.set(this.buffer);
-            newBuffer.set(chunk.value, this.buffer.length);
-            this.buffer = newBuffer;
-        }
-        else {
-            this.done = true;
-        }
-    }
-    async next() {
-        // Check if the buffer is empty
-        if (this.buffer.length === 0) {
-            // if we are already done...
-            if (this.done) {
-                return {
-                    done: true,
-                    value: undefined,
-                };
-            }
-            // Otherwise, read a new chunk
-            await this.readChunk();
-            return await this.next();
-        }
-        // Read the "byte header"
-        // The byte header tells us how big the expected data is
-        // so we know how much data we should wait before we
-        // deserialize the data
-        const head = new TextDecoder().decode(this.buffer.subarray(1, 11));
-        const bytes = Number.parseInt(head, 16); // ;0x00000000;
-        // Check if the buffer has enough bytes to be parsed
-        while (bytes > this.buffer.length - 12) {
-            // If it's not enough, and the reader is done
-            // then the chunk is invalid.
-            if (this.done) {
-                throw new Error("Malformed server function stream.");
-            }
-            // Otherwise, we read more chunks
-            await this.readChunk();
-        }
-        // Extract the exact chunk as defined by the byte header
-        const partial = new TextDecoder().decode(this.buffer.subarray(12, 12 + bytes));
-        // The rest goes to the buffer
-        this.buffer = this.buffer.subarray(12 + bytes);
-        // Deserialize the chunk
-        return {
-            done: false,
-            value: deserialize(partial),
-        };
-    }
-    async drain() {
-        while (true) {
-            const result = await this.next();
-            if (result.done) {
-                break;
-            }
-        }
-    }
-}
-async function deserializeStream(id, response) {
-    if (!response.body) {
-        throw new Error("missing body");
-    }
-    const reader = new SerovalChunkReader(response.body);
-    const result = await reader.next();
-    if (!result.done) {
-        reader.drain().then(() => {
-            // @ts-ignore
-            delete $R[id];
-        }, () => {
-            // no-op
-        });
-    }
-    return result.value;
-}
-let INSTANCE = 0;
-function createRequest(base, id, instance, options) {
-    return fetch(base, {
-        method: "POST",
-        ...options,
-        headers: {
-            ...options.headers,
-            "X-Server-Id": id,
-            "X-Server-Instance": instance,
-        },
-    });
-}
-const plugins = [
-    CustomEventPlugin,
-    DOMExceptionPlugin,
-    EventPlugin,
-    FormDataPlugin,
-    HeadersPlugin,
-    ReadableStreamPlugin,
-    RequestPlugin,
-    ResponsePlugin,
-    URLSearchParamsPlugin,
-    URLPlugin,
-];
-async function fetchServerFunction(base, id, options, args) {
-    const instance = `server-fn:${INSTANCE++}`;
-    const response = await (args.length === 0
-        ? createRequest(base, id, instance, options)
-        : args.length === 1 && args[0] instanceof FormData
-            ? createRequest(base, id, instance, { ...options, body: args[0] })
-            : args.length === 1 && args[0] instanceof URLSearchParams
-                ? createRequest(base, id, instance, {
-                    ...options,
-                    body: args[0],
-                    headers: { ...options.headers, "Content-Type": "application/x-www-form-urlencoded" },
-                })
-                : createRequest(base, id, instance, {
-                    ...options,
-                    body: JSON.stringify(await Promise.resolve(toJSONAsync(args, { plugins }))),
-                    headers: { ...options.headers, "Content-Type": "application/json" },
-                }));
-    if (response.headers.has("Location") ||
-        response.headers.has("X-Revalidate") ||
-        response.headers.has("X-Single-Flight")) {
-        if (response.body) {
-            /* @ts-ignore-next-line */
-            response.customBody = () => {
-                return deserializeStream(instance, response);
-            };
-        }
-        return response;
-    }
-    const contentType = response.headers.get("Content-Type");
-    let result;
-    if (contentType && contentType.startsWith("text/plain")) {
-        result = await response.text();
-    }
-    else if (contentType && contentType.startsWith("application/json")) {
-        result = await response.json();
-    }
-    else {
-        result = await deserializeStream(instance, response);
-    }
-    if (response.headers.has("X-Error")) {
-        throw result;
-    }
-    return result;
-}
-export function createServerReference(id) {
-    let baseURL = import.meta.env.BASE_URL ?? "/";
-    if (!baseURL.endsWith("/"))
-        baseURL += "/";
-    const fn = (...args) => fetchServerFunction(`${baseURL}_server`, id, {}, args);
-    return new Proxy(fn, {
-        get(target, prop, receiver) {
-            if (prop === "url") {
-                return `${baseURL}_server?id=${encodeURIComponent(id)}`;
-            }
-            if (prop === "GET") {
-                return receiver.withOptions({ method: "GET" });
-            }
-            if (prop === "withOptions") {
-                const url = `${baseURL}_server?id=${encodeURIComponent(id)}`;
-                return (options) => {
-                    const fn = async (...args) => {
-                        const encodeArgs = options.method && options.method.toUpperCase() === "GET";
-                        return fetchServerFunction(encodeArgs
-                            ? url +
-                                (args.length
-                                    ? `&args=${encodeURIComponent(JSON.stringify(await Promise.resolve(toJSONAsync(args, { plugins }))))}`
-                                    : "")
-                            : `${baseURL}_server`, id, options, encodeArgs ? [] : args);
-                    };
-                    fn.url = url;
-                    return fn;
-                };
-            }
-            return target[prop];
-        },
-    });
-}
-export function createClientReference(Component, id) {
-    return Component;
-}