@monkeyplus/flow 6.0.14 → 6.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monkeyplus/flow",
-  "version": "6.0.14",
+  "version": "6.0.15",
   "description": "@monkeyplus/flow package-first runtime with Vite, Nitro, Vue and a workspace playground.",
   "license": "MIT",
   "publishConfig": {

package/src/main.d.ts

@@ -1 +1 @@
-export {};
+import 'virtual:flow/server-styles';

package/src/main.mjs

@@ -1,5 +1,6 @@
-import { hydrateIslands } from "./runtime/islands.mjs";
 import bundles from "virtual:flow/client-pages";
+import { hydrateIslands } from "./runtime/islands.mjs";
+import "virtual:flow/server-styles";
 function readBoot() {
   const element = document.getElementById("flow-boot");
   if (!element?.textContent) {

package/src/public/vite.mjs

@@ -17,6 +17,7 @@ import {
   createVirtualLayoutContextsModule,
   createVirtualLayoutsModule,
   createVirtualPagesModule,
+  createVirtualServerStylesModule,
   createVirtualTemplatesModule
 } from "../runtime/virtual-pages.mjs";
 const flowRestartPatterns = [
@@ -55,6 +56,9 @@ function getVirtualModuleIdsForPath(projectPath) {
   if (projectPath === "flow.config.ts" || projectPath.startsWith("pages/")) {
     ids.add("virtual:flow/pages");
   }
+  if (projectPath.startsWith("views/")) {
+    ids.add("virtual:flow/server-styles");
+  }
   if (projectPath.startsWith("views/templates/")) {
     ids.add("virtual:flow/templates");
   }
@@ -141,7 +145,7 @@ function createFlowHotReload(projectRoot, extraWatchPaths = []) {
       });
     }, 0);
   }
-  async function handleServerChange(server, filePath, event) {
+  async function handleServerChange(server, filePath, event, hmrModules) {
     const projectPath = toProjectPath(filePath);
     invalidateFileModules(server, filePath, event);
     invalidateVirtualModules(server, projectPath);
@@ -153,11 +157,21 @@ function createFlowHotReload(projectRoot, extraWatchPaths = []) {
     if (!shouldReload) {
       return false;
     }
-    server.ws.send({ type: "full-reload", path: "*" });
+    if (event === "change" && projectPath.endsWith(".vue") && hmrModules) {
+      const validModules = hmrModules.filter((m) => m && m.id);
+      const isStyleOnly = validModules.length > 0 && validModules.every((m) => m.id.includes("type=style"));
+      if (isStyleOnly) {
+        return false;
+      }
+    }
+    setTimeout(() => {
+      server.ws.send({ type: "full-reload", path: "*" });
+    }, 50);
     return true;
   }
   return {
     name: "flow:hot-reload",
+    enforce: "post",
     configureServer(server) {
       if (extraWatchPaths.length) {
         server.watcher.add(extraWatchPaths);
@@ -170,9 +184,7 @@ function createFlowHotReload(projectRoot, extraWatchPaths = []) {
       });
     },
     async handleHotUpdate(ctx) {
-      if (await handleServerChange(ctx.server, ctx.file, "change")) {
-        return [];
-      }
+      await handleServerChange(ctx.server, ctx.file, "change", ctx.modules);
     }
   };
 }
@@ -184,7 +196,8 @@ function createFlowVirtualServerModules(projectRoot, flowConfig) {
     ["virtual:flow/templates", () => createVirtualTemplatesModule(projectRoot)],
     ["virtual:flow/layouts", () => createVirtualLayoutsModule(projectRoot)],
     ["virtual:flow/layout-contexts", () => createVirtualLayoutContextsModule(projectRoot)],
-    ["virtual:flow/bases", () => createVirtualBaseTemplatesModule(projectRoot)]
+    ["virtual:flow/bases", () => createVirtualBaseTemplatesModule(projectRoot)],
+    ["virtual:flow/server-styles", () => createVirtualServerStylesModule(projectRoot)]
   ]);
   return {
     name: "flow:server-virtuals",

package/src/runtime/virtual-pages.d.ts

@@ -7,3 +7,4 @@ export declare function createVirtualBaseTemplatesModule(projectRoot: string): s
 export declare function createVirtualIslandsModule(projectRoot: string): string;
 export declare function createVirtualClientPagesModule(projectRoot: string): string;
 export declare function createVirtualClientPageAssetsModule(projectRoot: string): string;
+export declare function createVirtualServerStylesModule(projectRoot: string): string;

package/src/runtime/virtual-pages.mjs

@@ -1,3 +1,4 @@
+import { parse } from "vue/compiler-sfc";
 import { existsSync, readFileSync, readdirSync } from "node:fs";
 import { basename, extname, resolve } from "node:path";
 function collectFiles(rootDir, extensions, currentDir = rootDir) {
@@ -170,3 +171,20 @@ export function createVirtualClientPageAssetsModule(projectRoot) {
     ""
   ].join("\n");
 }
+export function createVirtualServerStylesModule(projectRoot) {
+  const viewsDir = resolve(projectRoot, "views");
+  const files = existsSync(viewsDir) ? collectFiles(viewsDir, [".vue"]) : [];
+  const imports = files.flatMap((filePath) => {
+    const code = readFileSync(filePath, "utf8");
+    const { descriptor } = parse(code);
+    return descriptor.styles.map((style, i) => {
+      return `import "${toAbsoluteImport(filePath)}?vue&type=style&index=${i}&lang.${style.lang || "css"}";`;
+    });
+  });
+  return [
+    ...imports,
+    "",
+    "export default {};",
+    ""
+  ].join("\n");
+}