evolit 0.1.0-alpha.5 → 0.1.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evolit",
-  "version": "0.1.0-alpha.5",
+  "version": "0.1.0-alpha.7",
   "description": "A convention-driven application framework for LitSX and web components.",
   "type": "module",
   "packageManager": "yarn@4.10.3",
@@ -55,7 +55,8 @@
     "lit": "^3.3.3",
     "magic-string": "^1.1.0",
     "rollup": "^4.46.1",
-    "typescript": "^6.0.0"
+    "typescript": "^6.0.0",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "vite": "^8.1.5"

package/src/build.js

@@ -15,6 +15,7 @@ import {
   emitBundledClientAssets,
   emitHashedClientAssets,
   normalizeHydrationDataForClient,
+  resolveRouteClientImports,
   resolveSharedVendorModuleUrl,
   rewriteHydrationDataScript,
   rewriteServerAssetPlaceholders,
@@ -241,8 +242,11 @@ export async function buildProject(projectRoot) {
   );
   const ssrAdapter = createSsrAdapter({
     assetResolver,
-    async resolveAdditionalHead({ result }) {
-      const clientImports = Array.isArray(result.clientImports) ? result.clientImports : [];
+    async resolveAdditionalHead({ routeResult, result }) {
+      const clientImports = [
+        ...(Array.isArray(result.clientImports) ? result.clientImports : []),
+        ...resolveRouteClientImports(routeResult, projectRoot, clientAssets),
+      ];
       const urls = collectTransitiveAssetPreloads(clientImports, clientAssets);
       const styleUrls = collectTransitiveStyleUrls(clientImports, clientAssets);
 

package/src/client-assets.js

@@ -1776,6 +1776,28 @@ export function collectTransitiveAssetPreloads(publicUrls, assetManifest) {
   return discovered;
 }
 
+export function resolveRouteClientImports(routeResult, projectRoot, assetManifest) {
+  const normalizedManifest = normalizeClientAssetManifest(assetManifest);
+  if (!normalizedManifest) {
+    return [];
+  }
+
+  const routeModules = [
+    routeResult?.route?.page,
+    ...(routeResult?.route?.layouts ?? []),
+    routeResult?.boundaryModule,
+  ].filter((modulePath) => typeof modulePath === "string");
+
+  return [...new Set(routeModules.map((modulePath) => {
+    const relativePath = path.relative(projectRoot, modulePath).split(path.sep).join("/");
+    const extension = path.extname(relativePath);
+    const clientModule = extension
+      ? `${relativePath.slice(0, -extension.length)}.mjs`
+      : `${relativePath}.mjs`;
+    return normalizedManifest.byClientModule[clientModule] ?? null;
+  }).filter((publicUrl) => typeof publicUrl === "string"))];
+}
+
 export function collectTransitiveStyleUrls(publicUrls, assetManifest) {
   const normalizedManifest = normalizeClientAssetManifest(assetManifest);
   if (!normalizedManifest) {

package/src/deployment-runtime.js

@@ -12,6 +12,7 @@ import {
   getSharedOutputRoot,
   normalizeHydrationDataForClient,
   normalizeClientAssetManifest,
+  resolveRouteClientImports,
   resolveSharedVendorModuleUrl,
   resolveBrowserPackageAssetFilePath,
   rewriteHydrationDataScript,
@@ -233,8 +234,11 @@ export async function createRequestRenderer({ projectRoot, mode, assetManifest,
     assetResolver(moduleId) {
       return currentAssetResolver(moduleId);
     },
-    async resolveAdditionalHead({ result }) {
-      const clientImports = Array.isArray(result.clientImports) ? result.clientImports : [];
+    async resolveAdditionalHead({ routeResult, result }) {
+      const clientImports = [
+        ...(Array.isArray(result.clientImports) ? result.clientImports : []),
+        ...resolveRouteClientImports(routeResult, projectRoot, currentAssetManifest),
+      ];
       const urls = currentAssetManifest
         ? collectTransitiveAssetPreloads(clientImports, currentAssetManifest)
         : [];

package/src/server.js

@@ -2,6 +2,7 @@ import http from "node:http";
 import { watch } from "node:fs";
 import fs from "node:fs/promises";
 import path from "node:path";
+import { WebSocketServer, WebSocket } from "ws";
 import { loadEvolitConfig } from "./config.js";
 import { createDeploymentRuntime } from "./deployment-runtime.js";
 import { APP_DIRECTORY, BUILD_DIRECTORY, INTERNAL_DIRECTORY, MANIFEST_FILENAME } from "./constants.js";
@@ -36,7 +37,6 @@ async function writeResponseBody(response, body) {
 }
 
 const LIVE_RELOAD_PATHNAME = "/_evolit/live-reload";
-const LIVE_RELOAD_SNIPPET = `<script data-evolit-live-reload>if (typeof EventSource !== "undefined") { const source = new EventSource(${JSON.stringify(LIVE_RELOAD_PATHNAME)}); source.addEventListener("reload", () => window.location.reload()); }</script>`;
 
 function getResponseHeader(headers, name) {
   if (headers?.get) {
@@ -57,11 +57,15 @@ function injectLiveReloadSnippet(response) {
   return {
     ...response,
     body: response.body.includes("</body>")
-      ? response.body.replace("</body>", `${LIVE_RELOAD_SNIPPET}</body>`)
-      : `${response.body}${LIVE_RELOAD_SNIPPET}`,
+      ? response.body.replace("</body>", `${createLiveReloadSnippet()}</body>`)
+      : `${response.body}${createLiveReloadSnippet()}`,
   };
 }
 
+function createLiveReloadSnippet() {
+  return `<script data-evolit-live-reload>const evolitProtocol=window.location.protocol==="https:"?"wss:":"ws:";const evolitSocket=new WebSocket(evolitProtocol+"//"+window.location.host+${JSON.stringify(LIVE_RELOAD_PATHNAME)});evolitSocket.addEventListener("message",({data})=>{if(data==="reload")window.location.reload()});</script>`;
+}
+
 async function createRecursiveDirectoryWatcher(rootDirectory, onChange) {
   const watchers = new Map();
   let closed = false;
@@ -149,7 +153,14 @@ async function createServer(projectRoot, mode, explicitPort, options = {}) {
     responseCacheRuntime,
   });
   const port = getPort(explicitPort);
-  const liveReloadConnections = new Set();
+  const liveReloadServer = mode === "development" ? new WebSocketServer({ noServer: true }) : null;
+  const liveReloadSockets = new Set();
+  liveReloadServer?.on("connection", (socket) => {
+    liveReloadSockets.add(socket);
+    socket.on("close", () => {
+      liveReloadSockets.delete(socket);
+    });
+  });
   let invalidationTimer = null;
   let pendingInvalidation = null;
   let resolvePendingInvalidation = null;
@@ -176,8 +187,10 @@ async function createServer(projectRoot, mode, explicitPort, options = {}) {
         .then(() => deploymentRuntime.invalidateDevelopmentState());
       invalidationPromise.then(
         () => {
-          for (const connection of liveReloadConnections) {
-            connection.write("event: reload\\ndata: update\\n\\n");
+          for (const socket of liveReloadSockets) {
+            if (socket.readyState === WebSocket.OPEN) {
+              socket.send("reload");
+            }
           }
           resolve();
         },
@@ -197,20 +210,6 @@ async function createServer(projectRoot, mode, explicitPort, options = {}) {
     try {
       const origin = `http://${req.headers.host ?? `localhost:${port}`}`;
       const pathname = new URL(req.url ?? "/", origin).pathname;
-      if (mode === "development" && pathname === LIVE_RELOAD_PATHNAME) {
-        res.writeHead(200, {
-          "cache-control": "no-cache, no-transform",
-          connection: "keep-alive",
-          "content-type": "text/event-stream",
-        });
-        res.write("retry: 1000\\n\\n");
-        liveReloadConnections.add(res);
-        res.on("close", () => {
-          liveReloadConnections.delete(res);
-        });
-        return;
-      }
-
       await pendingInvalidation;
       await invalidationPromise;
       const method = req.method ?? "GET";
@@ -220,7 +219,9 @@ async function createServer(projectRoot, mode, explicitPort, options = {}) {
         ...(method === "GET" || method === "HEAD" ? {} : { body: req, duplex: "half" }),
       });
       const response = await deploymentRuntime.handle(request);
-      const servedResponse = mode === "development" ? injectLiveReloadSnippet(response) : response;
+      const servedResponse = mode === "development"
+        ? injectLiveReloadSnippet(response)
+        : response;
 
       res.writeHead(servedResponse.status, servedResponse.headers);
       await writeResponseBody(res, servedResponse.body);
@@ -230,6 +231,19 @@ async function createServer(projectRoot, mode, explicitPort, options = {}) {
     }
   });
 
+  server.on("upgrade", (request, socket, head) => {
+    const origin = `http://${request.headers.host ?? `localhost:${port}`}`;
+    const pathname = new URL(request.url ?? "/", origin).pathname;
+    if (!liveReloadServer || pathname !== LIVE_RELOAD_PATHNAME) {
+      socket.destroy();
+      return;
+    }
+
+    liveReloadServer.handleUpgrade(request, socket, head, (webSocket) => {
+      liveReloadServer.emit("connection", webSocket, request);
+    });
+  });
+
   return {
     port,
     deploymentRuntime,
@@ -244,10 +258,14 @@ async function createServer(projectRoot, mode, explicitPort, options = {}) {
         clearTimeout(invalidationTimer);
       }
       watcher?.close();
-      for (const connection of liveReloadConnections) {
-        connection.end();
+      for (const socket of liveReloadSockets) {
+        socket.close();
+      }
+      if (liveReloadServer) {
+        await new Promise((resolve) => {
+          liveReloadServer.close(resolve);
+        });
       }
-      liveReloadConnections.clear();
       await new Promise((resolve, reject) => {
         server.close((error) => {
           if (error) {