eddev 2.0.0-beta.38 → 2.0.0-beta.39

package/dist/app/lib/legacy-stitches/createStitches.js

@@ -0,0 +1,439 @@
+import { createStitches as createBaseStitches, } from "../../../../stitches-archive/index.js";
+const typeKeyMap = {
+    fontSize: "fontSizes",
+    fontFamily: "fonts",
+    lineHeight: "lineHeights",
+    letterSpacing: "letterSpacings",
+    fontWeight: "fontWeights",
+};
+export function parseBreakpoints(names, medias) {
+    const breakpoints = [];
+    // Add an initial breakpoint
+    breakpoints.push({ key: "initial", min: "0px", max: null });
+    // Parse each breakpoint
+    for (const key in medias) {
+        if (!names.includes(key))
+            continue;
+        const media = medias[key];
+        const minMatch = media.match(/min-width: ([0-9]+[a-z]+)/);
+        const maxMatch = media.match(/max-width: ([0-9]+[a-z]+)/);
+        if (!minMatch && !maxMatch)
+            continue;
+        breakpoints.push({
+            key,
+            min: minMatch ? minMatch[1] : null,
+            max: maxMatch ? maxMatch[1] : null,
+        });
+    }
+    // Ensure each breakpoint has a min/max value (except for first and last)
+    for (let i = 0; i < breakpoints.length; i++) {
+        const bp = breakpoints[i];
+        const prev = breakpoints[i - 1];
+        const next = breakpoints[i + 1];
+        if (bp.min === null && prev && prev.max) {
+            bp.min = prev.max;
+        }
+        if (bp.max === null && next && next.min) {
+            bp.max = next.min;
+        }
+    }
+    return breakpoints;
+}
+const unitless = (value) => parseFloat(value);
+function parseTypography(theme, breakpoints, typography) {
+    const globals = {};
+    const typeVariants = {};
+    breakpoints.forEach((bp) => (globals["@" + bp.key] = {}));
+    globals["@editor"] = {};
+    const resolveValue = (scale, value) => {
+        if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/)) {
+            // Single scale
+            return theme[scale][value.replace("$", "")];
+        }
+        else {
+            return value;
+        }
+    };
+    const resolveThemeVar = (scale, value) => {
+        if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/)) {
+            // Single scale
+            return "$" + scale + value;
+        }
+        else {
+            return value;
+        }
+    };
+    for (const name in typography) {
+        const style = typography[name];
+        const variant = {};
+        typeVariants[name] = variant;
+        for (const key in style) {
+            const value = style[key];
+            const varName = `--type-${name}-${key}`;
+            variant[key] = `var(${varName})`;
+            const tokenPrefix = typeKeyMap[key];
+            if (typeof value === "string" || typeof value === "number") {
+                // A simple string or number value is used
+                globals["@initial"][varName] = resolveThemeVar(tokenPrefix, value);
+            }
+            else if (value && typeof value === "object") {
+                // A responsive object value
+                const unit = key === "lineHeight" ? "%" : "px";
+                const [tokenGlobals, initial] = getResponsiveObjectStyles(breakpoints, value, varName, unit);
+                for (const key in tokenGlobals) {
+                    globals[key] = { ...globals[key], ...tokenGlobals[key] };
+                }
+                // const entries = Object.entries(value)
+                // entries.forEach(([bpName, responsiveValue], i) => {
+                //   if (Array.isArray(responsiveValue)) {
+                //     responsiveValue = responsiveValue[0]
+                //     // An array in the format [value] signifies font locking between the current breakpoint and the next defined one
+                //     const minSize = breakpoints.find((bp) => "@" + bp.key === bpName)?.min
+                //     const nextBreakpoint = breakpoints.find((bp) => "@" + bp.key === entries[i + 1]?.[0])
+                //     if (!nextBreakpoint)
+                //       throw new Error(
+                //         `Cannot create responsive '${key}' for '${name}' at breakpoint '${bpName}', since it is the last-defined breakpoint. Your last size should be a string/number/token.`
+                //       )
+                //     const maxSize = nextBreakpoint.min
+                //     let responsiveValue2 = (value as any)["@" + nextBreakpoint.key]
+                //     if (Array.isArray(responsiveValue2)) responsiveValue2 = responsiveValue2[0]
+                //     let size1 = resolveValue(tokenPrefix, responsiveValue)
+                //     let size2 = resolveValue(tokenPrefix, responsiveValue2)
+                //     responsiveValue = `calc(${size1} + (100vw - ${minSize}) / (${unitless(maxSize)} - ${unitless(
+                //       minSize
+                //     )}) * (${unitless(size2)} - ${unitless(size1)}))`
+                //   }
+                //   globals[bpName][varName] = responsiveValue
+                // })
+            }
+        }
+    }
+    return { globalTypography: globals, typeVariants };
+}
+function parseGrid(theme, media, grid) {
+    const globalGrid = {};
+    const resolveThemeVar = (scale, value) => {
+        if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/)) {
+            // Single scale
+            return "$" + scale + value;
+        }
+        else {
+            return value;
+        }
+    };
+    for (let [bpName, breakpoint] of Object.entries(grid.breakpoints)) {
+        globalGrid[bpName] = {
+            "--grid-columns": grid.columns,
+            "--grid-outer-width": breakpoint.container,
+            "--grid-inner-width": `calc(${breakpoint.container} - ${resolveThemeVar("spaces", breakpoint.margin)} * 2)`,
+            "--grid-gutter": breakpoint.gutter,
+            "--grid-margin": breakpoint.margin,
+            "--grid-col-width": `calc((var(--grid-inner-width) - (${grid.columns - 1} * var(--grid-gutter))) / ${grid.columns})`,
+        };
+    }
+    return { gridVariants: {}, globalGrid };
+}
+function parseResponsiveValue(val) {
+    if (Array.isArray(val)) {
+        return {
+            ...parseResponsiveValue(val[0]),
+            lerpStart: true,
+        };
+    }
+    else if (typeof val === "string") {
+        if (val.match(/^x[0-9\.]+$/)) {
+            return {
+                lerpStart: false,
+                type: "multiplier",
+                value: parseFloat(val.replace(/^x/, "")),
+            };
+        }
+        else if (val.match(/^[0-9\.]+%$/)) {
+            return {
+                lerpStart: false,
+                type: "percent",
+                value: parseFloat(val.replace(/^x/, "")),
+            };
+        }
+        else if (val.match(/^[0-9\.]+px$/)) {
+            return {
+                lerpStart: false,
+                type: "px",
+                value: parseFloat(val.replace(/px$/, "")),
+            };
+        }
+    }
+    else if (typeof val === "number") {
+        return {
+            lerpStart: false,
+            type: "number",
+            value: val,
+        };
+    }
+    else if (val === undefined || val === null) {
+        return {
+            lerpStart: false,
+            type: "undefined",
+        };
+    }
+    return {
+        lerpStart: false,
+        type: "unknown",
+        value: val,
+    };
+}
+export function parseResponsiveObject(breakpoints, object) {
+    // Breakpoint hash
+    const breakpointHash = {};
+    for (let bp of breakpoints) {
+        breakpointHash[bp.key] = {
+            min: bp.min ? parseFloat(bp.min) : null,
+            max: bp.max ? parseFloat(bp.max) : null,
+        };
+    }
+    const result = [];
+    let lerpStart = "initial";
+    let lastDefined = "initial";
+    let concreteValues = {};
+    for (let bp of breakpoints) {
+        const value = parseResponsiveValue(object["@" + bp.key]);
+        const defined = value.type !== "undefined";
+        let base = !defined || value.type === "multiplier" ? lastDefined : bp.key;
+        lerpStart = value.lerpStart ? bp.key : lerpStart && !defined ? lerpStart : null;
+        if (value.type === "px" || value.type === "number") {
+            concreteValues[bp.key] = value.value;
+        }
+        else if (value.type === "multiplier") {
+            concreteValues[bp.key] = value.value * concreteValues[base];
+        }
+        else if (value.type === "percent") {
+            concreteValues[bp.key] = value.value;
+        }
+        result.push({
+            ...value,
+            defined: defined,
+            breakpoint: bp.key,
+            lastBreakpoint: lastDefined,
+            baseBreakpoint: base,
+            lerping: lerpStart
+                ? {
+                    fromBP: lerpStart,
+                    toBP: null,
+                    minMedia: 0,
+                    maxMedia: 0,
+                    minValue: 0,
+                    maxValue: 0,
+                }
+                : undefined,
+            concreteValue: concreteValues[bp.key],
+        });
+        if (defined) {
+            lastDefined = bp.key;
+        }
+    }
+    let nextBreakpoints = [];
+    let lastBreakpoint = null;
+    for (let i = breakpoints.length - 1; i >= 0; i--) {
+        const bp = breakpoints[i];
+        nextBreakpoints[i] = lastBreakpoint;
+        if (result[i].defined) {
+            lastBreakpoint = bp.key;
+        }
+    }
+    result.forEach((item, i) => {
+        if (item.lerping) {
+            item.lerping.toBP = nextBreakpoints[i];
+        }
+    });
+    result.forEach((item, i) => {
+        const lerp = item.lerping;
+        if (lerp) {
+            const fromBP = lerp.fromBP ? breakpointHash[lerp.fromBP] : null;
+            const toBP = lerp.toBP ? breakpointHash[lerp.toBP] : null;
+            if (!fromBP || fromBP.min === null) {
+                throw new Error(`Cannot create responsive style for first breakpoint`);
+            }
+            if (!toBP || toBP.min === null) {
+                throw new Error(`Cannot create responsive style for last breakpoint`);
+            }
+            lerp.minMedia = fromBP.min;
+            lerp.maxMedia = toBP.min;
+            lerp.minValue = item.concreteValue;
+            lerp.maxValue = result.find((o) => o.breakpoint === lerp.toBP).concreteValue;
+        }
+    });
+    return result;
+}
+export function getResponsiveObjectStyles(breakpoints, object, varName, unit = "px") {
+    // Prescale object
+    object = { ...object };
+    const parsed = parseResponsiveObject(breakpoints, object);
+    const globals = {};
+    for (let atom of parsed) {
+        if (atom.lerpStart && atom.lerping) {
+            const lerp = atom.lerping;
+            globals["@" + atom.breakpoint] = {
+                [varName]: `calc(${lerp.minValue}${unit} + (100vw - ${lerp.minMedia}${unit}) / (${lerp.maxMedia} - ${lerp.minMedia}) * (${lerp.maxValue} - ${lerp.minValue}))`,
+            };
+        }
+        else if (atom.concreteValue) {
+            globals["@" + atom.breakpoint] = {
+                [varName]: atom.concreteValue + unit,
+            };
+        }
+        else if (atom.defined) {
+            globals["@" + atom.breakpoint] = {
+                [varName]: atom.value,
+            };
+        }
+    }
+    return [globals, globals["@initial"]?.[varName]];
+}
+// parseResponsiveTokens({'@initial': blah, '@desktop': blah}, breakpoints, )
+export function parseResponsiveTokens(theme, breakpoints) {
+    const globalResponsive = {
+        "@initial": {},
+    };
+    const initialResponsive = {};
+    for (const scale in theme) {
+        const initials = {};
+        initialResponsive[scale] = initials;
+        for (const key in theme[scale]) {
+            const val = theme[scale][key];
+            if (val && typeof val === "object") {
+                const [tokenGlobals, initial] = getResponsiveObjectStyles(breakpoints, val, "--" + scale + "-" + key);
+                for (const bp in tokenGlobals) {
+                    globalResponsive[bp] = {
+                        ...globalResponsive[bp],
+                        ...tokenGlobals[bp],
+                    };
+                }
+                initials[key] = initial;
+            }
+            else {
+                initials[key] = val;
+            }
+        }
+    }
+    return { initialResponsive, globalResponsive };
+}
+export function createStitches(config) {
+    const breakpoints = parseBreakpoints(config.breakpoints, config.media);
+    const { typeVariants, globalTypography } = parseTypography(config.theme, breakpoints, config.typography);
+    const { gridVariants, globalGrid } = parseGrid(config.theme, config.media, config.grid);
+    const { initialResponsive, globalResponsive } = parseResponsiveTokens(config.responsive, breakpoints);
+    const stitches = createBaseStitches({
+        // prefix: config.prefix,
+        media: {
+            initial: "",
+            ...config.media,
+        },
+        theme: { ...config.theme, ...initialResponsive },
+        themeMap: config.themeMap,
+        utils: {
+            ...(config.utils || {}),
+            typography: (key) => typeVariants[key],
+            m: (value) => ({
+                margin: value,
+            }),
+            mt: (value) => ({
+                marginTop: value,
+            }),
+            mr: (value) => ({
+                marginRight: value,
+            }),
+            mb: (value) => ({
+                marginBottom: value,
+            }),
+            ml: (value) => ({
+                marginLeft: value,
+            }),
+            mx: (value) => ({
+                marginLeft: value,
+                marginRight: value,
+            }),
+            my: (value) => ({
+                marginTop: value,
+                marginBottom: value,
+            }),
+            p: (value) => ({
+                padding: value,
+            }),
+            pt: (value) => ({
+                paddingTop: value,
+            }),
+            pr: (value) => ({
+                paddingRight: value,
+            }),
+            pb: (value) => ({
+                paddingBottom: value,
+            }),
+            pl: (value) => ({
+                paddingLeft: value,
+            }),
+            px: (value) => ({
+                paddingLeft: value,
+                paddingRight: value,
+            }),
+            py: (value) => ({
+                paddingTop: value,
+                paddingBottom: value,
+            }),
+            cols: (value) => ({
+                gridColumn: `auto / span ${value}`,
+                "--grid-columns": value,
+            }),
+        },
+    });
+    // Typography globals
+    const typeGlobals = {};
+    Object.entries(globalTypography).forEach(([key, styles]) => {
+        if (key === "@initial") {
+            typeGlobals[":root"] = styles;
+        }
+        else if (key === "@editor") {
+            typeGlobals[":root body.block-editor-page"] = styles;
+        }
+        else {
+            typeGlobals[key] = { ":root": styles };
+        }
+    });
+    stitches.globalCss(typeGlobals)();
+    // Grid globals
+    const gridGlobals = {};
+    Object.entries(globalGrid).forEach(([key, styles]) => {
+        if (key === "@initial") {
+            gridGlobals[":root"] = styles;
+        }
+        else if (key === "@editor") {
+            gridGlobals[":root body.block-editor-page"] = styles;
+        }
+        else {
+            gridGlobals[key] = { ":root": styles };
+        }
+    });
+    stitches.globalCss(gridGlobals)();
+    const responsiveGlobals = {};
+    Object.entries(globalResponsive).forEach(([key, styles]) => {
+        if (key === "@initial") {
+            responsiveGlobals[":root"] = styles;
+        }
+        else if (key === "@editor") {
+            responsiveGlobals[":root body.block-editor-page"] = styles;
+        }
+        else {
+            responsiveGlobals[key] = { ":root": styles };
+        }
+    });
+    stitches.globalCss(responsiveGlobals)();
+    const responsiveTokens = {};
+    return {
+        ...stitches,
+        originalConfig: config,
+        breakpoints,
+        typeVariants,
+        gridVariants,
+        responsiveTokens,
+        responsiveGlobals,
+    };
+}

package/dist/app/lib/legacy-stitches/index.d.ts

@@ -0,0 +1 @@
+export * from "./createStitches.js";

package/dist/app/lib/legacy-stitches/index.js

@@ -0,0 +1 @@
+export * from "./createStitches.js";

package/dist/app/lib/routing/components/SSRRouter.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react";
+import { RouteLoader } from "../loader.js";
+import { RouteState } from "../types.js";
+type Props = PropsWithChildren<{
+    route: RouteState;
+    loader: RouteLoader;
+}>;
+export declare function SSRRouter(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/app/lib/routing/components/SSRRouter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RouterContext, RouterStateContext } from "../context.js";
+import { useRouter } from "../hooks/useRouter.js";
+import { useRouterState } from "../hooks/useRouterState.js";
+import { AppRenderer } from "./RouteRenderer.js";
+export function SSRRouter(props) {
+    const router = useRouter();
+    const routerState = useRouterState();
+    router.loader = props.loader;
+    routerState.history = [props.route];
+    routerState.activeRoute = props.route;
+    return (_jsx(RouterContext.Provider, { value: router, children: _jsx(RouterStateContext.Provider, { value: routerState, children: _jsx(AppRenderer, {}) }) }));
+}

package/dist/app/lib/views/defineView.d.ts

@@ -0,0 +1,4 @@
+import { ComponentType, PropsWithChildren, ReactNode } from "react";
+type ExtendedViewProps<TName extends keyof ViewProps> = TName extends "_app" ? PropsWithChildren<ViewProps[TName]> : ViewProps[TName];
+export declare function defineView<Name extends keyof ViewProps>(name: Name, component: (props: ExtendedViewProps<Name>) => ReactNode): ComponentType<ExtendedViewProps<Name>>;
+export {};

package/dist/app/lib/views/defineView.js

@@ -0,0 +1,3 @@
+export function defineView(name, component) {
+    return component;
+}

package/dist/app/lib/views/index.d.ts

@@ -0,0 +1 @@
+export * from "./defineView.js";

package/dist/app/lib/views/index.js

@@ -0,0 +1 @@
+export * from "./defineView.js";

package/dist/app/server/defineRouter.d.ts

@@ -0,0 +1,2 @@
+import { Hono } from "hono";
+export declare function defineRouter(): Hono;

package/dist/app/server/defineRouter.js

@@ -0,0 +1,4 @@
+import { Hono } from "hono";
+export function defineRouter() {
+    return new Hono();
+}

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

@@ -0,0 +1,4 @@
+export * from "./render-ssr-page.js";
+export * from "./server-context.js";
+export * from "./proxy-wp-admin.js";
+export * from "./defineRouter.js";

package/dist/app/server/index.js

@@ -0,0 +1,4 @@
+export * from "./render-ssr-page.js";
+export * from "./server-context.js";
+export * from "./proxy-wp-admin.js";
+export * from "./defineRouter.js";

package/dist/app/server/proxy-wp-admin.d.ts

@@ -0,0 +1,3 @@
+import { EventHandlerRequest, H3Event } from "vinxi/http";
+import { ServerContext } from "./server-context.js";
+export declare function proxyWpAdmin(event: H3Event<EventHandlerRequest>, serverContext: ServerContext): Promise<Response>;

package/dist/app/server/proxy-wp-admin.js

@@ -0,0 +1,105 @@
+/// <reference types="vinxi/types/server" />
+import { splitSetCookieString } from "cookie-es";
+import { getProxyRequestHeaders, getRequestURL, getWebRequest } from "vinxi/http";
+export async function proxyWpAdmin(event, serverContext) {
+    const replaceUrls = serverContext.replaceUrls;
+    const req = getWebRequest(event);
+    const proxyUrl = serverContext.getOriginUrl(getRequestURL(event).href);
+    // Prepare request headers to be sent to the origin server
+    const proxyHeaders = getProxyRequestHeaders(event);
+    proxyHeaders["X-ED-Dev-Proxy"] = "true";
+    // Forward the request to the origin server
+    const response = await fetch(proxyUrl, {
+        method: req.method,
+        referrer: req.referrer,
+        referrerPolicy: req.referrerPolicy,
+        headers: proxyHeaders,
+        body: req.method.match(/get|head|options/i) ? undefined : await req.blob(),
+        redirect: "manual",
+        cache: "no-cache",
+    });
+    const contentType = response.headers.get("content-type");
+    let body;
+    let res = { status: response.status, statusText: response.statusText, headers: new Headers() };
+    const cookies = [];
+    response.headers.forEach((value, key) => {
+        if (key === "content-encoding" || key === "content-length" || key === "transfer-encoding") {
+            return;
+        }
+        if (key === "set-cookie") {
+            cookies.push(...splitSetCookieString(value));
+            return;
+        }
+        if (key === "location" && replaceUrls) {
+            value = replaceUrls(value);
+        }
+        res.headers.set(key, value);
+    });
+    // Set cookies in the response headers
+    // TODO: May need to rewrite cookie domain here before setting.
+    if (cookies.length > 0) {
+        for (const cookie of cookies) {
+            res.headers.append("set-cookie", cookie);
+        }
+    }
+    // Replace URLs pointing to the origin server from the response itself
+    // This is only done for text-based content types, like application/json, text/plain, text/html etc
+    if (contentType?.match(/(application|text)\//)) {
+        if (replaceUrls) {
+            body = replaceUrls((await response.text()) ?? "");
+        }
+        // If the content type is text/html, inject the Vite assets into the response — assuming the placeholder comments are found
+        if (contentType.startsWith("text/html")) {
+            const clientManifest = serverContext.runtime.getManifest("admin");
+            const assets = await clientManifest.inputs[clientManifest.handler].assets();
+            body = body.replace("<!---VITE_HEADER--->", () => assets.map((asset) => renderAsset(asset)).join("\n"));
+            body = body.replace("<!---VITE_FOOTER--->", () => renderAsset({
+                tag: "script",
+                attrs: {
+                    type: "module",
+                    src: clientManifest.inputs[clientManifest.handler].output.path,
+                },
+                children: "",
+            }));
+        }
+    }
+    else {
+        // Otherwise just stream the response as is
+        body = response.body;
+    }
+    return new Response(body, res);
+}
+function printElement(element, props, innerText) {
+    if (typeof innerText === "string") {
+        return `<${element}${Object.entries(props)
+            .map(([key, value]) => ` ${key}="${value}"`)
+            .join("")}>${innerText}</${element}>`;
+    }
+    else {
+        return `<${element}${Object.entries(props)
+            .map(([key, value]) => ` ${key}="${value}"`)
+            .join("")} />`;
+    }
+}
+function renderAsset({ tag, attrs: { key, ...attrs } = {}, children, }) {
+    switch (tag) {
+        case "script":
+            if (attrs.src) {
+                return printElement("script", { ...attrs, key: attrs.src }, "");
+            }
+            else {
+                return printElement("script", {
+                    ...attrs,
+                    key: key,
+                }, children ?? "");
+            }
+        case "link":
+            return printElement("link", { ...attrs, key: key });
+        case "style":
+            return printElement("style", {
+                ...attrs,
+                key: key,
+            }, children ?? "");
+    }
+    return "";
+}

package/dist/app/server/render-ssr-page.d.ts

@@ -0,0 +1,5 @@
+import type { RouteData, TrackerTags } from "../lib/routing/types.js";
+import { ServerContext } from "./server-context.js";
+export declare function renderPageToSSRStream(pathname: string, initialData: RouteData & {
+    trackers?: TrackerTags;
+}, serverContext: ServerContext): Promise<unknown>;

package/dist/app/server/render-ssr-page.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderAsset } from "@vinxi/react";
+import { Suspense } from "react";
+import { renderToPipeableStream } from "react-dom/server";
+import { SSRRoot } from "../entry/ssr-root.js";
+import { RouteLoader } from "../lib/routing/loader.js";
+export async function renderPageToSSRStream(pathname, initialData, serverContext) {
+    const clientManifest = serverContext.runtime.getManifest("client");
+    const assets = await clientManifest.inputs[clientManifest.handler].assets();
+    const jsx = (_jsx(SSRRoot, { assets: _jsx(Suspense, { children: assets.map((m) => renderAsset(m)) }), metaTags: initialData?.meta?.head || [], pathname: pathname, initialData: initialData, loader: new RouteLoader() }));
+    const stream = await new Promise(async (resolve, reject) => {
+        // console.log("Rendering to pipable")
+        const stream = renderToPipeableStream(jsx, {
+            onShellReady() {
+                // console.log("Shell ready")
+                resolve(stream);
+            },
+            onShellError(err) {
+                console.log("onShellError", err);
+                resolve("An error occurred");
+            },
+            onError(err, errInfo) {
+                console.log("Error occurred after shell ready", err, errInfo);
+                console.error(err);
+            },
+            bootstrapModules: [clientManifest.inputs[clientManifest.handler].output.path],
+            bootstrapScriptContent: `window.manifest = ${JSON.stringify(await clientManifest.json())};\nwindow._PAGE_DATA = ${JSON.stringify(initialData)};`,
+        });
+    });
+    return stream;
+}