@monkeyplus/flow 6.0.8 → 6.0.9

package/modules/images/runtime/server.d.ts

@@ -1,3 +1,5 @@
+import type { FlowImageBootPayload } from '../../../src/runtime/boot.ts';
 import type { FlowImageRuntimeUtils, FlowImagesRuntimeConfig } from './types.ts';
+export declare function getFlowImageBootPayload(config?: FlowImagesRuntimeConfig | undefined): FlowImageBootPayload | undefined;
 export declare function getFlowImageRuntimeUtils(config?: FlowImagesRuntimeConfig | undefined): FlowImageRuntimeUtils | undefined;
 export declare function resetFlowImageRuntimeState(): void;

package/modules/images/runtime/server.mjs

@@ -28,6 +28,17 @@ function getFlowImagesRuntimeConfig() {
     return getEnvFlowImagesRuntimeConfig();
   }
 }
+export function getFlowImageBootPayload(config = getFlowImagesRuntimeConfig()) {
+  if (!config) {
+    return void 0;
+  }
+  const renameSources = [config.dirRenames, config.publicDir].filter(Boolean);
+  return {
+    all: loadImageRenames(renameSources),
+    options: { ...config.options },
+    generateOutput: !!config.generate
+  };
+}
 export function getFlowImageRuntimeUtils(config = getFlowImagesRuntimeConfig()) {
   if (!config) {
     return void 0;

package/package.json

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

package/server/lib/render.mjs

@@ -5,7 +5,7 @@ import bases from "virtual:flow/bases";
 import layouts from "virtual:flow/layouts";
 import templates from "virtual:flow/templates";
 import { createSSRApp, defineComponent, h } from "vue";
-import { getFlowImageRuntimeUtils } from "../../modules/images/runtime/server.mjs";
+import { getFlowImageBootPayload, getFlowImageRuntimeUtils } from "../../modules/images/runtime/server.mjs";
 import { installFlowVuePlugins } from "../../src/runtime/vue";
 import { getUrl, getUrls } from "./pages.mjs";
 function escapeHtml(value) {
@@ -152,7 +152,8 @@ export async function renderDocument(page, clientAssets) {
     template: page.definition.view.template,
     title: fallbackTitle,
     locale: page.locale,
-    mode
+    mode,
+    images: getFlowImageBootPayload()
   };
   const rendered = await renderBody(page);
   const body = stripVueFragmentMarkers(rendered.body);

package/src/runtime/boot.d.ts

@@ -1,4 +1,10 @@
+import type { FlowImageMeta, FlowImageOptions } from '../../modules/images/runtime/types.ts';
 import type { FlowHydrationMode, FlowLocale } from './pages';
+export interface FlowImageBootPayload {
+    all: Record<string, FlowImageMeta>;
+    options: FlowImageOptions;
+    generateOutput: boolean;
+}
 export interface FlowBootPayload {
     path: string;
     bundle: string;
@@ -6,4 +12,5 @@ export interface FlowBootPayload {
     title: string;
     locale: FlowLocale;
     mode: FlowHydrationMode;
+    images?: FlowImageBootPayload;
 }

package/src/runtime/components/MkImage.d.ts

@@ -173,14 +173,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     preset: string;
     modifiers: Record<string, any>;
     sizes: string | Record<string, any>;
+    background: string;
+    quality: string | number;
     alt: string;
     referrerpolicy: string;
     usemap: string;
     longdesc: string;
     ismap: boolean;
     loading: string;
-    quality: string | number;
-    background: string;
     title: string;
     sync: boolean;
     thumbnail: string | boolean;

package/src/runtime/components/MkPicture.d.ts

@@ -183,14 +183,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     preset: string;
     modifiers: Record<string, any>;
     sizes: string | Record<string, any>;
+    background: string;
+    quality: string | number;
     alt: string;
     referrerpolicy: string;
     usemap: string;
     longdesc: string;
     ismap: boolean;
     loading: string;
-    quality: string | number;
-    background: string;
     title: string;
     sync: boolean;
     thumbnail: string | boolean;

package/src/runtime/components/image-shared.d.ts

@@ -1,4 +1,5 @@
 import type { FlowImageMeta, FlowImageOptions, GetImageFunction } from '../../../modules/images/runtime/types.ts';
+import type { FlowBootPayload } from '../boot.ts';
 export interface InjectedImageUtils {
     getImage?: GetImageFunction;
     getImageMeta?: (src: string) => FlowImageMeta | undefined;
@@ -6,6 +7,7 @@ export interface InjectedImageUtils {
 }
 export declare function useInjectedImageUtils(): InjectedImageUtils;
 export declare function useLazySizes(enabled: () => unknown): void;
+export declare function createBootImageUtils(boot?: FlowBootPayload): InjectedImageUtils;
 export declare function useImage(props: Record<string, any>): {
     imageUtils: InjectedImageUtils;
     image: import("vue").ComputedRef<FlowImageMeta>;

package/src/runtime/components/image-shared.mjs

@@ -1,6 +1,6 @@
-import { computed, inject } from "vue";
-import { watchEffect } from "vue";
+import { computed, inject, watchEffect } from "vue";
 import { getNormalName, parseSize } from "../../../modules/images/runtime/helpers.mjs";
+import { createImageResolver } from "../../../modules/images/runtime/image.mjs";
 let lazySizesLoadPromise;
 function loadLazySizes() {
   if (lazySizesLoadPromise) {
@@ -20,6 +20,28 @@ export function useLazySizes(enabled) {
     void loadLazySizes();
   });
 }
+export function createBootImageUtils(boot) {
+  const snapshot = boot?.images;
+  if (!snapshot) {
+    return {};
+  }
+  const stateImages = {
+    all: snapshot.all || {},
+    generate: {}
+  };
+  const resolver = createImageResolver(snapshot.options, stateImages, {
+    generateOutput: snapshot.generateOutput
+  });
+  return {
+    getImage: resolver.getImage,
+    getImageMeta(src) {
+      return stateImages.all[src];
+    },
+    getImageOptions() {
+      return { ...snapshot.options };
+    }
+  };
+}
 export function useImage(props) {
   const imageUtils = useInjectedImageUtils();
   const nImgAttrs = computed(() => ({

package/src/runtime/islands.mjs

@@ -1,5 +1,6 @@
 import islands from "virtual:flow/islands";
 import { createSSRApp } from "vue";
+import { createBootImageUtils } from "./components/image-shared.mjs";
 import { getClientHead } from "./head.mjs";
 import { installFlowVuePlugins } from "./vue.mjs";
 function parseIslandProps(value) {
@@ -39,7 +40,9 @@ async function hydrateIsland(element, boot) {
     return;
   }
   const app = createSSRApp(mod.default, props);
+  const imageUtils = createBootImageUtils(boot);
   app.use(getClientHead());
+  app.provide("utils", imageUtils);
   installFlowVuePlugins(app);
   app.mount(element);
   element.dataset.flowIslandHydrated = "true";