eddev 2.0.0-beta.89 → 2.0.0-beta.90

package/dist/app/entry/ssr-root-client.js

@@ -1,13 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Suspense, useEffect, useState } from "react";
 import { useSnapshot } from "valtio";
-import { DevUILoader } from "../lib/devtools/loader.js";
 import { BrowserRouter } from "../lib/routing/components/BrowserRouter.js";
 import { clientMetaTags } from "../lib/routing/context.js";
 import { APIProvider } from "../utils/APIProvider.js";
 import { MetaTags } from "./MetaTags.js";
 export function SSRClientRoot(props) {
-    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx(DynamicMetaTags, { tags: props.metaTags }), _jsx(Trackers, { position: "head" }), props.assets] }), _jsxs("body", { children: [_jsx(Trackers, { position: "body" }), _jsx(APIProvider, { children: _jsx(Suspense, { children: _jsx(BrowserRouter, {}) }) }), _jsx(DevUILoader, {}), _jsx(Trackers, { position: "footer" })] })] }));
+    return (_jsx(APIProvider, { children: _jsx(Suspense, { children: _jsx(BrowserRouter, {}) }) }));
 }
 function DynamicMetaTags(props) {
     const dynamicTags = useSnapshot(clientMetaTags).tags;

package/dist/app/entry/ssr-root.js

@@ -1,23 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense } from "react";
 import { SSRRouter } from "../lib/routing/components/SSRRouter.js";
 import { getRouteMeta, normalizeRoute } from "../lib/routing/utils.js";
 import { APIProvider } from "../utils/APIProvider.js";
-import { MetaTags } from "./MetaTags.js";
 export function SSRRoot(props) {
     const loader = props.loader;
     loader.setAppData(props.initialData.appData.data);
     loader.populateRouteData(props.pathname, props.initialData);
-    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx(MetaTags, { tags: props.metaTags }), props.assets] }), _jsx("body", { children: _jsx(APIProvider, { children: _jsx(Suspense, { children: _jsx(SSRRouter, { loader: loader, route: normalizeRoute({
-                                id: "initial",
-                                component: loader.getRouteComponent(props.initialData.view),
-                                key: "",
-                                props: props.initialData.viewData.data,
-                                view: props.initialData.view,
-                                search: "",
-                                pathname: props.pathname,
-                                query: {},
-                                hash: "",
-                                meta: getRouteMeta(props.initialData),
-                            }) }) }) }) })] }));
+    return (_jsx(APIProvider, { children: _jsx(Suspense, { children: _jsx(SSRRouter, { loader: loader, route: normalizeRoute({
+                    id: "initial",
+                    component: loader.getRouteComponent(props.initialData.view),
+                    key: "",
+                    props: props.initialData.viewData.data,
+                    view: props.initialData.view,
+                    search: "",
+                    pathname: props.pathname,
+                    query: {},
+                    hash: "",
+                    meta: getRouteMeta(props.initialData),
+                }) }) }) }));
 }

package/dist/app/lib/dynamic/dynamic.d.ts

@@ -4,5 +4,5 @@ export type DynamicComponent<T extends ComponentType<any>> = T & {
 };
 export declare function dynamic<T extends ComponentType<any>>(factory: () => Promise<{
     default: T;
-}>): DynamicComponent<T>;
+}>, name?: string): DynamicComponent<T>;
 export default dynamic;

package/dist/app/lib/dynamic/dynamic.js

@@ -1,9 +1,13 @@
 import { createElement, forwardRef, lazy, memo, useRef } from "react";
-export function dynamic(factory) {
+import { useAssetCapture } from "../../utils/asset-capture";
+export function dynamic(factory, name) {
     const ReactLazyComponent = lazy(factory);
     let PreloadedComponent;
     let factoryPromise;
     const Component = memo(forwardRef(function LazyWithPreload(props, ref) {
+        if (env.serverless && !env.client && name) {
+            useAssetCapture()?.add(name);
+        }
         // Once one of these is chosen, we must ensure that it continues to be
         // used for all subsequent renders, otherwise it can cause the
         // underlying component to be unmounted and remounted.

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

@@ -1,15 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { renderAsset } from "@vinxi/react";
 import { Suspense } from "react";
-import { renderToPipeableStream } from "react-dom/server";
+import { renderToPipeableStream, renderToString } from "react-dom/server";
 import { SSRRoot } from "../entry/ssr-root.js";
 import { RouteLoader } from "../lib/routing/loader.js";
 import { ServerContext } from "./server-context.js";
 import { Writable } from "stream";
+import { MetaTags } from "../entry/MetaTags.js";
+import { AssetCaptureContext } from "../utils/asset-capture.js";
 export async function getSsrStream(args) {
     const clientManifest = ServerContext.main.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: args.initialData?.meta?.head || [], pathname: args.pathname, initialData: args.initialData, loader: new RouteLoader() }));
+    // console.log(
+    //   "M",
+    //   assets.filter((f) => (f as any).tag === "script"),
+    //   clientManifest.inputs[clientManifest.handler],
+    // )
+    // for (let k in clientManifest.chunks) {
+    //   console.log(k)
+    // }
+    const dynamicAssets = new Set([]);
+    const jsx = (_jsx(AssetCaptureContext.Provider, { value: dynamicAssets, children: _jsx(SSRRoot, { assets: _jsx(Suspense, { children: assets.map((m) => renderAsset(m)) }), metaTags: args.initialData?.meta?.head || [], pathname: args.pathname, initialData: args.initialData, loader: new RouteLoader() }) }));
     const stream = await new Promise(async (resolve, reject) => {
         // console.log("Rendering to pipable")
         const stream = renderToPipeableStream(jsx, {
@@ -29,20 +40,45 @@ export async function getSsrStream(args) {
             bootstrapScriptContent: `window.manifest = ${JSON.stringify(await clientManifest.json())};\nwindow._PAGE_DATA = ${JSON.stringify(args.initialData)};\nwindow._TRACKERS = ${JSON.stringify(args.initialData.trackers)};`,
         });
     });
+    const [initial, middle, end] = renderToString(_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx(MetaTags, { tags: args.initialData.meta?.head ?? [] }), _jsx(MetaTags, { tags: args.initialData.trackers?.head ?? [] }), assets.map((m) => renderAsset(m)), "%%%%"] }), _jsxs("body", { children: [_jsx(MetaTags, { tags: args.initialData.trackers?.body ?? [] }), _jsx("div", { id: "_root", children: "%%%%" }), _jsx(MetaTags, { tags: args.initialData.trackers?.footer ?? [] })] })] })).split("%%%%");
     return new ReadableStream({
         async start(controller) {
-            const writableStream = new Writable({
-                emitClose: true,
-                write(chunk, encoding, callback) {
-                    controller.enqueue(chunk);
-                    callback();
-                },
-                final(callback) {
-                    controller.close();
-                    callback();
-                },
+            controller.enqueue(new TextEncoder().encode(initial));
+            const inner = await new Promise((resolve, reject) => {
+                let buffer = [];
+                const writableStream = new Writable({
+                    emitClose: true,
+                    write(chunk, encoding, callback) {
+                        buffer.push(chunk);
+                        // controller.enqueue(chunk)
+                        callback();
+                    },
+                    final(callback) {
+                        resolve(buffer);
+                        // controller.close()
+                        callback();
+                    },
+                });
+                stream.pipe(writableStream);
             });
-            stream.pipe(writableStream);
+            console.log(clientManifest.json());
+            for (const asset of dynamicAssets) {
+                const assets = await clientManifest.inputs["/" + asset].assets();
+                // console.log(assets)
+                // console.log("A", assets.output, (await assets.assets())?.[0])
+                // const assets = await clientManifest.inputs[assets.output.path!]?.assets()
+                // console.log("F?", inputs)
+                controller.enqueue(new TextEncoder().encode(`\n<!-- for ${asset} -->`));
+                controller.enqueue(new TextEncoder().encode(renderToString(_jsx(_Fragment, { children: assets.map((a) => renderAsset(asset)) }))));
+            }
+            // console.log("ASSETS", await clientManifest)
+            controller.enqueue(new TextEncoder().encode(middle));
+            for (const chunk of inner) {
+                controller.enqueue(chunk);
+            }
+            controller.enqueue(new TextEncoder().encode(end));
+            // console.log("Assets", dynamicAssets)
+            controller.close();
         },
     });
 }

package/dist/app/utils/asset-capture.d.ts

@@ -0,0 +1,2 @@
+export declare const AssetCaptureContext: import("react").Context<Set<string>>;
+export declare const useAssetCapture: () => Set<string>;

package/dist/app/utils/asset-capture.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+export const AssetCaptureContext = createContext(new Set());
+export const useAssetCapture = () => {
+    return useContext(AssetCaptureContext);
+};

package/dist/node/cli/cli.js

@@ -218,7 +218,7 @@ program
     .option("--host", "Hostname to serve the application", "127.0.0.1")
     .option("--port", "Port to serve the application", "3000")
     .action(async (options) => {
-    // process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0"
+    process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
     process.env["NODE_ENV"] = "production";
     process.env["HOST"] = options.host;
     process.env["PORT"] = options.port;

package/dist/node/compiler/vinxi-codegen.js

@@ -132,14 +132,13 @@ export function createVinxiCodegen(opts) {
           window.$reactRoot =
             window.$reactRoot ||
             hydrateRoot(
-              document,
+              document.getElementById('_root')!,
               <SSRClientRoot assets={getAssets()} metaTags={window._PAGE_DATA.meta.head} />,
             )
 
           if (import.meta.hot) {
             import.meta.hot.accept((mod) => {
               if (mod) {
-                const Assets = createAssets(getManifest("client").handler, getManifest("client"))
                 const app = <SSRClientRoot assets={getAssets()} metaTags={window._PAGE_DATA.meta.head} />
                 window.$reactRoot?.render(app)
               }
@@ -397,7 +396,7 @@ export function createVinxiCodegen(opts) {
           ${Object.entries(blockManifest.blocks)
                 .filter(([name]) => !name.match(/^_[a-z]+$/i))
                 .map(([name, block]) => {
-                const importStatement = `dynamic(() => import(${JSON.stringify("../../../" + block.fileName)}))`;
+                const importStatement = `dynamic(() => import(${JSON.stringify("../../../" + block.fileName)}), ${JSON.stringify(block.fileName)})`;
                 return JSON.stringify(block.acfName) + ": " + importStatement;
             })
                 .join(",\n")},
@@ -488,7 +487,7 @@ export function createVinxiCodegen(opts) {
                     importStatement = imp(name + "=" + src);
                 }
                 else {
-                    importStatement = code `dynamic(() => import(${JSON.stringify(src)}))`;
+                    importStatement = code `dynamic(() => import(${JSON.stringify(src)}), ${JSON.stringify(view.fileName)})`;
                 }
                 return code `${JSON.stringify(view.slug)}: ${importStatement},\n`;
             })}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "2.0.0-beta.89",
+  "version": "2.0.0-beta.90",
   "description": "",
   "main": "index.js",
   "type": "module",