eddev 2.0.0-beta.22 → 2.0.0-beta.24

package/dist/app/lib/routing/context.js

@@ -12,6 +12,7 @@ const NOOP_ROUTE = {
     search: "",
     query: {},
     returnState: undefined,
+    meta: {},
 };
 export const RouterContext = createContext({
     loader: new RouteLoader(),
@@ -32,98 +33,3 @@ export const RouterStateContext = createContext({
     blockers: [],
 });
 export const RouteItemContext = createContext(NOOP_ROUTE);
-// type StoreHook<State> = <Slice = State>(
-//   selector?: (state: State) => Slice,
-//   areEqual?: (a: Slice, b: Slice) => boolean,
-// ) => Slice
-// type Store<T> = {
-//   subscribe(sub: (value: T) => void): () => void
-//   value: T
-//   update(next: T): void
-// }
-// function createStore<T>(initial: T): Store<T> {
-//   let value = initial
-//   const subscribers = new Set<(value: T) => void>()
-//   return {
-//     subscribe(sub: (value: T) => void) {
-//       subscribers.add(sub)
-//       return () => {
-//         subscribers.delete(sub)
-//       }
-//     },
-//     get value() {
-//       return value
-//     },
-//     update(nextValue: T) {
-//       value = nextValue
-//       if (subscribers.size) {
-//         console.log("UPDATE", value)
-//         startTransition(() => {
-//           for (let sub of subscribers) {
-//             sub(value)
-//           }
-//         })
-//       }
-//     },
-//   }
-// }
-// export function createStoreHook<T>(store: Store<T>): StoreHook<T> {
-//   const hook = (selector: any) => {
-//     const get = () => (selector ? selector(store.value) : store.value)
-//     return useSyncExternalStore(store.subscribe, get, get)
-//   }
-//   return hook as StoreHook<T>
-// }
-// export function createStoreContextHook<T>(ctx: Context<Store<T>>): StoreHook<T> {
-//   const hook = (selector: any) => {
-//     const store = useContext(ctx)
-//     const get = () => (selector ? selector(store.value) : store.value)
-//     return useSyncExternalStore(store.subscribe, get, get)
-//   }
-//   return hook as StoreHook<T>
-// }
-// export const RouterContext = createContext<Store<RouterAPI>>(null!)
-// export const RouterStateContext = createContext<Store<RouterAPIState>>(null!)
-// export const RouteContext = createContext<Store<RouteState>>(null!)
-// const NOOP_ROUTE: RouteState = {
-//   component: () => null,
-//   id: "initial",
-//   hash: "",
-//   key: "initial",
-//   pathname: "",
-//   props: {},
-//   uri: "",
-//   view: "_unknown",
-//   search: "",
-//   query: {},
-//   returnState: undefined,
-// }
-// export const createRouteItemStore = (initial?: RouteState) => {
-//   return createStore<RouteState>(initial ?? NOOP_ROUTE)
-// }
-// export function createRouterAPIStore(initial?: RouterAPI) {
-//   return createStore<RouterAPI>(
-//     initial ?? {
-//       loader: new RouteLoader(),
-//       async navigate(url) {},
-//       async prefetch(url) {},
-//       async preload(url) {},
-//       subscribe(fn) {
-//         return () => {}
-//       },
-//       replaceHash(hash) {},
-//       replaceQuery(query) {},
-//       handleClickEvent(e, originalHref) {},
-//       emitEvent(event) {},
-//     },
-//   )
-// }
-// export function createRouterStateStore(initial?: RouterAPIState) {
-//   return createStore<RouterAPIState>(
-//     initial ?? {
-//       history: [],
-//       activeRoute: NOOP_ROUTE,
-//       blockers: [],
-//     },
-//   )
-// }

package/dist/app/lib/routing/hooks/useRouteMeta.d.ts

@@ -0,0 +1,5 @@
+import { RouteMeta } from "../types";
+export declare const $routeMetaStore: {
+    data: RouteMeta;
+};
+export declare function useRouteMeta(): RouteMeta;

package/dist/app/lib/routing/hooks/useRouteMeta.js

@@ -0,0 +1,9 @@
+import { proxy, useSnapshot } from "valtio";
+export const $routeMetaStore = proxy({
+    data: {},
+});
+export function useRouteMeta() {
+    return useSnapshot($routeMetaStore, {
+        sync: true,
+    }).data;
+}

package/dist/app/lib/routing/types.d.ts

@@ -1,9 +1,11 @@
 import { FunctionComponent } from "react";
 import type { RouteLoader } from "./loader.js";
 import { LinkHandlerMode, PointerOrMouseEvent } from "./utils.js";
-export type ParsedRouteTags = Record<"title" | "meta" | "script" | "style" | "link", {
-    [key: string]: string;
-}[]>;
+export type RouteMetaTag = {
+    tagName: string;
+    attributes: Record<string, string>;
+    inner?: string;
+};
 export interface RouteData {
     view: string;
     editLink?: string;
@@ -13,8 +15,8 @@ export interface RouteData {
     redirect?: string;
     canonical?: string;
     meta?: {
-        head: ParsedRouteTags;
-        footer: ParsedRouteTags;
+        head: RouteMetaTag[];
+        footer: RouteMetaTag[];
     };
 }
 export type RouteReturnState<T = {}> = {
@@ -131,6 +133,11 @@ export type TypedRouteState<T, TProps> = {
     component: FunctionComponent<TProps>;
     /** The props for this route, to be passed to the component. */
     props: TProps;
+    /** Loaded metadata for this route */
+    meta: RouteMeta;
+};
+export type RouteMeta = {
+    tags?: RouteMetaTag[];
 };
 export type RouteState = {
     [K in keyof ViewProps]: TypedRouteState<K, ViewProps[K]>;

package/dist/app/lib/routing/utils.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from "react";
-import { RouteLink, RouteState } from "./types.js";
+import { RouteData, RouteLink, RouteMeta, RouteState } from "./types.js";
 export declare function isSameOrigin(url: string): boolean;
 export type PointerOrMouseEvent = MouseEvent | PointerEvent | ReactMouseEvent | ReactPointerEvent;
 export type LinkHandlerMode = {
@@ -12,4 +12,5 @@ export declare function normalizeRoute(route: Partialize<RouteState, "uri" | "re
 export declare function stringifyRouteLink(route: RouteLink): string;
 export declare function parseQuery(query: string): Record<string, string | string[]>;
 export declare function stringifyQuery(query: any): string;
+export declare function getRouteMeta(data: RouteData): RouteMeta;
 export {};

package/dist/app/lib/routing/utils.js

@@ -92,3 +92,8 @@ export function stringifyQuery(query) {
         arrayFormat: "brackets",
     });
 }
+export function getRouteMeta(data) {
+    return {
+        tags: data.meta?.head ?? [],
+    };
+}

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

@@ -50,7 +50,7 @@ export async function proxyWpAdmin(event, serverContext) {
         }
         // 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.getManifest("admin");
+            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({

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

@@ -5,14 +5,22 @@ 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.getManifest("client");
+    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)) }), pathname: pathname, initialData: initialData, loader: new RouteLoader() }));
-    const stream = await new Promise(async (resolve) => {
+    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) => {
         const stream = renderToPipeableStream(jsx, {
             onShellReady() {
                 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())}; window._PAGE_DATA = ${JSON.stringify(initialData)}`,
         });

package/dist/app/server/server-context.d.ts

@@ -4,15 +4,18 @@ import { Manifest } from "vinxi/dist/types/types/manifest";
 export type ServerContextArgs = {
     dev: boolean;
     origin: string;
-    getManifest: (name: string) => Manifest;
     replaceUrls?: UrlReplacerConf;
 };
+export type ServerContextRuntime = {
+    getManifest: (name: string) => Manifest;
+};
 export declare class ServerContext {
     dev: boolean;
     origin: string;
-    getManifest: (name: string) => Manifest;
     replaceUrls?: (text: string) => string;
     constructor(conf: ServerContextArgs);
+    get runtime(): ServerContextRuntime;
+    static setRuntime(rt: ServerContextRuntime): void;
     getOriginUrl(url: string): string;
     fetchOrigin(url: string, opts?: RequestInit & {
         replaceUrls?: boolean;
@@ -23,6 +26,9 @@ export declare class ServerContext {
         headers?: RequestHeaders;
         withAppData?: boolean;
     }): Promise<Response>;
+    fetchAppData(req?: {
+        headers?: RequestHeaders;
+    }): Promise<any>;
     extractRequestHeaders(req?: RequestHeaders): Partial<Record<import("vinxi/http").HTTPHeaderName, string | undefined>>;
     fetchNamedQuery(req: {
         name: string;

package/dist/app/server/server-context.js

@@ -12,19 +12,24 @@ const PROXY_REQUEST_HEADERS = [
     "user-agent",
     "authorization",
 ];
+let runtime;
 export class ServerContext {
     dev;
     origin;
-    getManifest;
     replaceUrls;
     constructor(conf) {
         this.dev = conf.dev;
         this.origin = conf.origin;
-        this.getManifest = conf.getManifest;
         if (conf.replaceUrls) {
             this.replaceUrls = createUrlReplacer(conf.replaceUrls);
         }
     }
+    get runtime() {
+        return runtime;
+    }
+    static setRuntime(rt) {
+        runtime = rt;
+    }
     getOriginUrl(url) {
         const parsed = parseURL(url);
         const parsedOrigin = parseURL(this.origin);
@@ -64,7 +69,7 @@ export class ServerContext {
     async fetchRouteData(req) {
         const fetchUrl = withQuery(req.pathname, {
             ...req.query,
-            _props: req.withAppData ? "all" : "1",
+            _props: "1",
             _ssr: "1",
             _debug: this.dev ? "1" : undefined,
         });
@@ -78,6 +83,18 @@ export class ServerContext {
             },
         });
     }
+    async fetchAppData(req) {
+        const response = await this.fetchOrigin("/_appdata", {
+            cache: "no-cache",
+            replaceUrls: true,
+            headers: {
+                "Content-Type": "application/json",
+                Accept: "application/json",
+                ...(req?.headers ? this.extractRequestHeaders(req.headers) : {}),
+            },
+        });
+        return response.json();
+    }
     extractRequestHeaders(req) {
         const headers = {};
         if (req) {

package/dist/node/cli/cli.js

@@ -166,6 +166,7 @@ program
         });
     }
     else {
+        // Generate bootstrap files
         const codegen = createVinxiCodegen({
             mode: "production",
             project: project,
@@ -175,7 +176,7 @@ program
         console.info("Building for SPA WordPress (Frontend and Admin)");
         // Load the compiler
         const admin = new AdminBundler(project, {
-            mode: "development",
+            mode: "production",
         });
         const frontend = new FrontendBundler(project, {
             mode: "production",

package/dist/node/cli/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "2.0.0-beta.22";
+export declare const VERSION = "2.0.0-beta.24";

package/dist/node/cli/version.js

@@ -1 +1 @@
-export const VERSION = "2.0.0-beta.22";
+export const VERSION = "2.0.0-beta.24";

package/dist/node/compiler/vinxi-app.d.ts

@@ -6,5 +6,14 @@ export type AppArgs = {
     origin: string;
     log?: StatefulLog<any>;
     preset?: string;
+    routes?: CustomRoute[];
+};
+type HTTPMethod = "GET" | "POST" | "PUT" | "OPTIONS" | "HEAD";
+type CustomRouteFunction = (req: Request) => Response;
+type CustomRouteModule = Record<HTTPMethod, CustomRouteFunction>;
+type CustomRoute = {
+    pattern: string;
+    handler: () => Promise<CustomRouteModule>;
 };
 export declare function createVinxiApp(args: AppArgs): import("vinxi").App;
+export {};

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

@@ -18,8 +18,27 @@ export function createVinxiApp(args) {
             // },
             preset: args.preset,
             routeRules: {
+                "/wp-content/uploads/**": {
+                    proxy: joinURL(args.origin, "wp-content/uploads/**"),
+                    headers: {
+                        "Cache-Control": "max-age=86400",
+                        "CDN-Cache-Control": "max-age=86400",
+                        "Vercel-CDN-Cache-Control": "max-age=86400",
+                    },
+                },
+                "/wp-content/plugins/**": {
+                    proxy: joinURL(args.origin, "wp-content/plugins/**"),
+                    headers: {
+                        "Cache-Control": "max-age=86400",
+                        "CDN-Cache-Control": "max-age=86400",
+                        "Vercel-CDN-Cache-Control": "max-age=86400",
+                    },
+                },
                 "/wp-content/**": { proxy: joinURL(args.origin, "wp-content/**") },
                 "/wp-includes/**": { proxy: joinURL(args.origin, "wp-includes/**") },
+                "/*": {
+                    isr: 300,
+                },
             },
         },
         routers: [
@@ -105,7 +124,6 @@ export function createVinxiApp(args) {
                 handler: `${folder}/handler.ssr-page.ts`,
                 target: "server",
                 plugins: () => [
-                    // reactRefresh(),
                     ...corePlugins({
                         rootDir: args.rootDir,
                         console: log,

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

@@ -34,10 +34,13 @@ export function createVinxiCodegen(opts) {
           import { ServerContext } from "eddev/server"
           import { getManifest } from "vinxi/manifest"
 
+          ServerContext.setRuntime({
+            getManifest
+          })
+
           export const serverContext = new ServerContext({${Object.entries(args)
                     .map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
-                    .join(",\n")},
-            getManifest
+                    .join(",\n")}
           })
         `.toString();
             },
@@ -54,6 +57,24 @@ export function createVinxiCodegen(opts) {
       `,
         });
     }
+    if (opts.serverless) {
+        // codegen.registerFile({
+        //   name: "manifest/extra-routes.ts",
+        //   generate: code/* tsx */ `
+        //     import { createRouter, eventHandler, getRouterParam, getQuery, getWebRequest, getRequestHeaders } from "vinxi/http"
+        //     import { serverContext } from "./context.js"
+        //     export const routes = [
+        //       {
+        //         pattern: '/test1',
+        //         handler: () => import('../../../test.ts')
+        //       }
+        //     ]
+        //     export default eventHandler((event) => {
+        //       routes
+        //     })
+        //   `,
+        // })
+    }
     codegen.registerFile({
         name: "entry.admin.tsx",
         generate: () => {
@@ -109,14 +130,14 @@ export function createVinxiCodegen(opts) {
             window.$reactRoot ||
             hydrateRoot(
               document,
-              <SSRClientRoot assets={getAssets()} />,
+              <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()} />
+                const app = <SSRClientRoot assets={getAssets()} metaTags={window._PAGE_DATA.meta.head} />
                 window.$reactRoot?.render(app)
               }
             })
@@ -125,6 +146,7 @@ export function createVinxiCodegen(opts) {
           declare global {
             interface Window {
               $reactRoot?: Root
+              _PAGE_DATA: any
             }
           }
 
@@ -219,41 +241,60 @@ export function createVinxiCodegen(opts) {
         codegen.registerFile({
             name: "handler.ssr-page.ts",
             generate: code /* tsx */ `
-      /// <reference types="vinxi/types/server" />
-      import "../../views/index.css"
-      import "./manifest/blocks.js"
-      import "./manifest/styles.js"
-      import "./manifest/views.js"
-
-      import { renderPageToSSRStream, proxyWpAdmin } from "eddev/server"
-      import { eventHandler, setResponseHeader, setResponseStatus, getRequestURL } from "vinxi/http"
-      import { serverContext } from "./context.js"
-      import { getManifest } from "vinxi/manifest"
+        /// <reference types="vinxi/types/server" />
+        import "../../views/index.css"
+        import "./manifest/blocks.js"
+        import "./manifest/styles.js"
+        import "./manifest/views.js"
 
-      export default eventHandler({
-        handler: async (event) => {
-          const url = getRequestURL(event)
+        import { proxyWpAdmin, renderPageToSSRStream } from "eddev/server"
+        import { eventHandler, getRequestURL, setResponseHeader, setResponseStatus } from "vinxi/http"
+        import { serverContext } from "./context.js"
+        import { RouteData } from "eddev/routing"
 
-          if (url.pathname.includes('.')) {
-            return proxyWpAdmin(event, serverContext)
-          }
+        export default eventHandler({
+          handler: async (event) => {
+            const url = getRequestURL(event)
 
-          const response = await serverContext.fetchRouteData({
-            pathname: url.pathname,
-            withAppData: true,
-            headers: {},
-            query: {},
-          })
-          if (response.ok) {
-            setResponseStatus(event, response.status)
-            setResponseHeader(event, "Content-Type", "text/html; charset=utf-8")
-            return renderPageToSSRStream(url.pathname, await response.json(), serverContext)
-          } else {
-            return response
-          }
-        },
-      })
+            if (url.pathname.includes(".")) {
+              return proxyWpAdmin(event, serverContext)
+            }
 
+            try {
+              const [appData, response] = await Promise.all([
+                serverContext.fetchAppData(),
+                serverContext.fetchRouteData({
+                  pathname: url.pathname,
+                  withAppData: true,
+                  headers: {},
+                  query: {},
+                }),
+              ])
+
+              let data: RouteData
+              try {
+                data = await response.json()
+                data.appData = appData
+              } catch (err) {
+                data = {
+                  view: "_error",
+                  viewType: "react",
+                  viewData: {},
+                  appData: appData,
+                }
+                console.error(err)
+                setResponseStatus(event, 500)
+              }
+              setResponseHeader(event, "Content-Type", "text/html; charset=utf-8")
+              return renderPageToSSRStream(url.pathname, data, serverContext)
+            } catch (err) {
+              console.error(err)
+              setResponseStatus(event, 500)
+              setResponseHeader(event, "Content-Type", "text/html; charset=utf-8")
+              return '<!DOCTYPE html><html><head><title>500 Internal Server Error</title></head><body><h1>500 Internal Server Error</h1><p>"'+err.message+'"</p></body></html>'
+            }
+          },
+        })
     `,
         });
     }

package/dist/node/project/favicons.d.ts

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

package/dist/node/project/favicons.js

@@ -1 +1 @@
-export {};
+"use strict";

package/dist/node/types/block-type.d.ts

@@ -49,7 +49,7 @@ export declare const BlockMetaSchema: z.ZodObject<{
     ancestors: string[];
     dynamic: boolean;
     allowMultiple: boolean;
-    frontendMode: "default" | "hidden" | "childrenOnly";
+    frontendMode: "hidden" | "childrenOnly" | "default";
     inserter: boolean;
     description?: string | undefined;
     icon?: string | undefined;
@@ -83,7 +83,7 @@ export declare const BlockMetaSchema: z.ZodObject<{
     postMetaBlock?: {
         fieldName: string;
     } | undefined;
-    frontendMode?: "default" | "hidden" | "childrenOnly" | undefined;
+    frontendMode?: "hidden" | "childrenOnly" | "default" | undefined;
     inserter?: boolean | undefined;
 }>;
 export type BlockMetadata = z.infer<typeof BlockMetaSchema>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "2.0.0-beta.22",
+  "version": "2.0.0-beta.24",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -93,6 +93,7 @@
     "dotenv": "^16.3.1",
     "globby": "^13.2.2",
     "graphql": "^16.8.1",
+    "hono": "^4.6.2",
     "ink": "^5.0.1",
     "ink-spinner": "^5.0.0",
     "ink-text-input": "^6.0.0",
@@ -118,11 +119,11 @@
     "@types/node": "^20.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "typescript": "^5.5.2",
     "@types/wordpress__blocks": "^12.5.13",
     "@types/wordpress__components": "^23.0.11",
     "@types/wordpress__editor": "^13.6.7",
-    "@types/wordpress__hooks": "^2.11.0"
+    "@types/wordpress__hooks": "^2.11.0",
+    "typescript": "^5.5.2"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/tsconfig.app.json

@@ -3,9 +3,9 @@
     "target": "ESNext",
     "lib": ["DOM", "ESNext"],
     "jsx": "react-jsx",
-    "module": "NodeNext",
+    "module": "ESNext",
     "rootDir": "./src/",
-    "moduleResolution": "NodeNext",
+    "moduleResolution": "Bundler",
     "declaration": true,
     "outDir": "./dist",
     "allowJs": true,

package/tsconfig.node.json

@@ -4,8 +4,8 @@
     "lib": ["ESNext"],
     "jsx": "react-jsx",
     "rootDir": "./src/",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "declaration": true,
     "outDir": "./dist",