@monkeyplus/flow 6.0.8 → 6.0.10

package/modules/images/module.mjs

@@ -10,13 +10,17 @@ import { resetFlowImageRuntimeState } from "./runtime/server.mjs";
 function withoutTrailingSlash(value) {
   return value.replace(/\/+$/, "");
 }
-function resolveStrapiDomains(flowConfig, dirImages) {
+function resolveStrapiUrl(flowConfig) {
   const strapi = flowConfig.strapi;
-  if (!strapi || typeof strapi.url !== "string" || !strapi.url) {
+  return typeof strapi?.url === "string" && strapi.url ? withoutTrailingSlash(strapi.url) : void 0;
+}
+function resolveStrapiDomains(flowConfig, dirImages) {
+  const strapiUrl = resolveStrapiUrl(flowConfig);
+  if (!strapiUrl) {
     return {};
   }
   try {
-    const url = new URL(strapi.url);
+    const url = new URL(strapiUrl);
     const target = dirImages;
     const values = /* @__PURE__ */ new Set([
       withoutTrailingSlash(url.origin),
@@ -79,6 +83,7 @@ export default defineFlowModule({
     presets: {}
   },
   setup(options, context) {
+    const strapiURL = resolveStrapiUrl(context.flowConfig);
     const resolvedDomains = {
       ...resolveStrapiDomains(context.flowConfig, options.dirImages),
       ...options.domains || {}
@@ -97,6 +102,7 @@ export default defineFlowModule({
       dirRenames: renameDir,
       dirFiles: options.dirFiles,
       buildBatchSize: options.buildBatchSize,
+      strapiURL,
       publicDir,
       outputDir: resolve(context.projectRoot, ".output/public"),
       generatedManifestPath,

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

@@ -1,6 +1,7 @@
 import type { FlowImageOptions, FlowImagesState, GeneratedImageEntry, GetImageFunction } from './types.ts';
 export declare function createImageResolver(imagesOptions: FlowImageOptions, stateImages: FlowImagesState, runtime?: {
     generateOutput?: boolean;
+    strapiURL?: string;
     onGenerate?: (image: GeneratedImageEntry) => void;
 }): {
     getImage: GetImageFunction;

package/modules/images/runtime/image.mjs

@@ -1,5 +1,6 @@
 import { encodeParam, encodePath, joinURL } from "ufo";
 import { getNormalName, getPreset, guessExt, parseSize } from "./helpers.mjs";
+const STRAPI_SOURCE_PREFIX = "strapi:";
 const modifierKeyMap = {
   background: "b",
   fit: "fit",
@@ -30,6 +31,18 @@ function resolveIpxUrl(src, modifiers = {}, baseURL = "/_ipx") {
 function isRemoteUrl(value) {
   return value.startsWith("http://") || value.startsWith("https://");
 }
+function isStrapiSource(value) {
+  return value.startsWith(STRAPI_SOURCE_PREFIX);
+}
+function withLeadingSlash(value) {
+  return value.startsWith("/") ? value : `/${value}`;
+}
+function withoutTrailingSlash(value) {
+  return value.replace(/\/+$/, "");
+}
+function getStrapiSourcePath(value) {
+  return withLeadingSlash(value.slice(STRAPI_SOURCE_PREFIX.length));
+}
 function normalizeDirImages(dirImages) {
   return dirImages.replace(/^\/+/, "").split("/")[0] || "images";
 }
@@ -123,8 +136,14 @@ export function createImageResolver(imagesOptions, stateImages, runtime = {}) {
         url: input
       };
     }
-    if (!input.startsWith("/") && !input.startsWith("https://") && !input.startsWith("http://")) {
-      input = joinURL(imagesOptions.dirImages, input);
+    const isStrapi = isStrapiSource(input);
+    const logicalInput = isStrapi ? getStrapiSourcePath(input) : input;
+    let sourceInput = logicalInput;
+    if (isStrapi && runtime.strapiURL) {
+      sourceInput = `${withoutTrailingSlash(runtime.strapiURL)}${logicalInput}`;
+    }
+    if (!isStrapi && !sourceInput.startsWith("/") && !sourceInput.startsWith("https://") && !sourceInput.startsWith("http://")) {
+      sourceInput = joinURL(imagesOptions.dirImages, sourceInput);
     }
     const expectedFormat = resolvedOptions.modifiers?.format;
     if (resolvedOptions.modifiers?.width) {
@@ -133,18 +152,19 @@ export function createImageResolver(imagesOptions, stateImages, runtime = {}) {
     if (resolvedOptions.modifiers?.height) {
       resolvedOptions.modifiers.height = parseSize(resolvedOptions.modifiers.height);
     }
-    const image = resolveIpxUrl(input, resolvedOptions.modifiers || {}, imagesOptions.baseURL || "/_ipx");
+    const image = resolveIpxUrl(sourceInput, resolvedOptions.modifiers || {}, imagesOptions.baseURL || "/_ipx");
     image.format = image.format || expectedFormat || "";
-    image.src = input;
-    image.ext = image.format && `.${image.format}` || guessExt(input);
-    let baseDir = getBaseDir(input, imagesOptions.dirImages);
-    const originalExt = guessExt(input);
-    let renamedImage = stateImages.all[input]?.rename;
+    image.src = sourceInput;
+    image.ext = image.format && `.${image.format}` || guessExt(logicalInput);
+    let baseDir = isStrapi ? normalizeDirImages(imagesOptions.dirImages) : getBaseDir(sourceInput, imagesOptions.dirImages);
+    const originalExt = guessExt(logicalInput);
+    let renamedImage = stateImages.all[logicalInput]?.rename;
     if (!renamedImage && imagesOptions.domains) {
-      renamedImage = resolveRemoteRename(input, imagesOptions.domains);
+      renamedImage = resolveRemoteRename(sourceInput, imagesOptions.domains);
     }
-    const replacedPath = decodeURIComponent(resolveRenamePath(renamedImage || input, resolvedOptions.rename));
-    if (isRemoteUrl(input) && replacedPath.startsWith("/")) {
+    const resolvedPathInput = renamedImage || (isStrapi ? joinURL(imagesOptions.dirImages, logicalInput.replace(/^\/+/, "")) : logicalInput);
+    const replacedPath = decodeURIComponent(resolveRenamePath(resolvedPathInput, resolvedOptions.rename));
+    if (!isStrapi && isRemoteUrl(sourceInput) && replacedPath.startsWith("/")) {
       baseDir = getBaseDir(replacedPath, imagesOptions.dirImages);
     }
     const modifierSegment = getModifierSegment(image.modifiers);
@@ -166,7 +186,7 @@ export function createImageResolver(imagesOptions, stateImages, runtime = {}) {
     }
     const src = runtime.generateOutput && image.generate ? image.generate : image.url;
     if (resolvedOptions._meta) {
-      const meta = { ...stateImages.all[input] || { name: input, alt: void 0, title: void 0 } };
+      const meta = { ...stateImages.all[logicalInput] || { name: logicalInput, alt: void 0, title: void 0 } };
       if (!meta.alt) {
         meta.alt = getNormalName(meta.name);
       }

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;
@@ -44,6 +55,7 @@ export function getFlowImageRuntimeUtils(config = getFlowImagesRuntimeConfig())
   };
   const resolver = createImageResolver(config.options, images, {
     generateOutput: config.generate,
+    strapiURL: config.strapiURL,
     onGenerate(image) {
       if (!config.generatedManifestPath) {
         return;

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

@@ -63,6 +63,7 @@ export interface FlowImagesRuntimeConfig {
     dirRenames: string;
     dirFiles: string[];
     buildBatchSize?: number;
+    strapiURL?: string;
     publicDir: string;
     outputDir: string;
     generatedManifestPath: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monkeyplus/flow",
-  "version": "6.0.8",
+  "version": "6.0.10",
   "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

@@ -7,6 +7,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     eWidth: (StringConstructor | NumberConstructor)[];
     eHeight: (StringConstructor | NumberConstructor)[];
     sync: BooleanConstructor;
+    strappi: BooleanConstructor;
     thumb: (StringConstructor | BooleanConstructor)[];
     thumbnail: {
         type: (StringConstructor | BooleanConstructor)[];
@@ -91,6 +92,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     eWidth: (StringConstructor | NumberConstructor)[];
     eHeight: (StringConstructor | NumberConstructor)[];
     sync: BooleanConstructor;
+    strappi: BooleanConstructor;
     thumb: (StringConstructor | BooleanConstructor)[];
     thumbnail: {
         type: (StringConstructor | BooleanConstructor)[];
@@ -173,16 +175,17 @@ 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;
+    strappi: boolean;
     alt: string;
     referrerpolicy: string;
     usemap: string;
     longdesc: string;
     ismap: boolean;
     loading: string;
-    quality: string | number;
-    background: string;
-    title: string;
     sync: boolean;
     thumbnail: string | boolean;
+    title: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/src/runtime/components/MkImage.mjs

@@ -32,6 +32,7 @@ export default defineComponent({
     eWidth: [String, Number],
     eHeight: [String, Number],
     sync: Boolean,
+    strappi: Boolean,
     thumb: [Boolean, String],
     thumbnail: { type: [Boolean, String], default: void 0 },
     format: { type: String, default: void 0 },
@@ -59,7 +60,7 @@ export default defineComponent({
     loading: { type: String, default: void 0 }
   },
   setup(props, { attrs }) {
-    const { imageUtils, image, nImgAttrs, nModifiers, nOption } = useImage(props);
+    const { imageUtils, image, resolvedSrc, nImgAttrs, nModifiers, nOption } = useImage(props);
     const options = computed(() => imageUtils.getImageOptions?.() || {
       lazy: true,
       screens: {},
@@ -72,7 +73,7 @@ export default defineComponent({
       if (!props.sizes || !imageUtils.getImage?.getSizes) {
         return void 0;
       }
-      return imageUtils.getImage.getSizes(props.src, {
+      return imageUtils.getImage.getSizes(resolvedSrc.value, {
         ...nOption.value,
         sizes: props.sizes,
         modifiers: {
@@ -97,13 +98,13 @@ export default defineComponent({
     });
     const nSrc = computed(() => {
       const normal = nSizes.value?.src || resolveImageSource(
-        imageUtils.getImage?.(props.src, nModifiers.value, nOption.value),
-        props.src
+        imageUtils.getImage?.(resolvedSrc.value, nModifiers.value, nOption.value),
+        resolvedSrc.value
       );
       const thumb = resolveThumbnailValue(props.thumbnail, props.thumb);
       const thumbnail = typeof thumb === "string" ? thumb : thumb ? resolveImageSource(
-        imageUtils.getImage?.(props.src, { quality: 10, width: 60 }, nOption.value),
-        props.src
+        imageUtils.getImage?.(resolvedSrc.value, { quality: 10, width: 60 }, nOption.value),
+        resolvedSrc.value
       ) : void 0;
       return {
         normal,
@@ -116,7 +117,7 @@ export default defineComponent({
       return h("img", {
         ...attrs,
         ...nAttrs.value,
-        "src": isRuntimeLambda() ? props.src : compatibilityThumb || nSrc.value.normal,
+        "src": isRuntimeLambda() ? resolvedSrc.value : compatibilityThumb || nSrc.value.normal,
         "data-src": compatibilityThumb ? nSrc.value.normal : void 0,
         "data-thumb": compatibilityThumb,
         "alt": props.alt || image.value.alt,
@@ -124,7 +125,7 @@ export default defineComponent({
         "class": compatibilityThumb ? [attrs.class, "lazyload"] : attrs.class,
         "width": props.eWidth || nAttrs.value.width,
         "height": props.eHeight || nAttrs.value.height,
-        "x-src": getLocalSource(props.src)
+        "x-src": getLocalSource(resolvedSrc.value)
       });
     };
   }

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

@@ -4,6 +4,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
     };
     rename: StringConstructor;
+    strappi: BooleanConstructor;
     thumb: (StringConstructor | BooleanConstructor)[];
     thumbnail: {
         type: (StringConstructor | BooleanConstructor)[];
@@ -93,6 +94,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
     };
     rename: StringConstructor;
+    strappi: BooleanConstructor;
     thumb: (StringConstructor | BooleanConstructor)[];
     thumbnail: {
         type: (StringConstructor | BooleanConstructor)[];
@@ -183,17 +185,18 @@ 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;
+    strappi: boolean;
     alt: string;
     referrerpolicy: string;
     usemap: string;
     longdesc: string;
     ismap: boolean;
     loading: string;
-    quality: string | number;
-    background: string;
-    title: string;
     sync: boolean;
     thumbnail: string | boolean;
+    title: string;
     legacyFormat: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/src/runtime/components/MkPicture.mjs

@@ -20,6 +20,7 @@ export default defineComponent({
       required: true
     },
     rename: String,
+    strappi: Boolean,
     thumb: [Boolean, String],
     thumbnail: { type: [Boolean, String], default: void 0 },
     classImg: String,
@@ -52,7 +53,7 @@ export default defineComponent({
     legacyFormat: { type: String, default: null }
   },
   setup(props, { attrs }) {
-    const { imageUtils, image, nImgAttrs, nModifiers, nOption } = useImage(props);
+    const { imageUtils, image, resolvedSrc, nImgAttrs, nModifiers, nOption } = useImage(props);
     const options = computed(() => imageUtils.getImageOptions?.() || {
       lazy: true,
       screens: {},
@@ -61,7 +62,7 @@ export default defineComponent({
       baseURL: "/_ipx",
       dirImages: "/images"
     });
-    const originalFormat = () => getFileExtension(props.src);
+    const originalFormat = () => getFileExtension(resolvedSrc.value);
     const isTransparent = () => ["png", "webp", "gif"].includes(originalFormat());
     const nFormat = () => {
       if (props.format) {
@@ -84,11 +85,11 @@ export default defineComponent({
     };
     const nSources = computed(() => {
       if (nFormat() === "svg" || !imageUtils.getImage?.getSizes) {
-        return [{ src: props.src, srcset: props.src }];
+        return [{ src: resolvedSrc.value, srcset: resolvedSrc.value }];
       }
       const formats = nLegacyFormat() !== nFormat() ? [nLegacyFormat(), nFormat()] : [nFormat()];
       return formats.map((format) => {
-        const result = imageUtils.getImage.getSizes(props.src, {
+        const result = imageUtils.getImage.getSizes(resolvedSrc.value, {
           ...nOption.value,
           modifiers: {
             ...nModifiers.value,
@@ -112,11 +113,11 @@ export default defineComponent({
       if (!thumb) {
         return void 0;
       }
-      const thumbnail = imageUtils.getImage?.(props.src, {
+      const thumbnail = imageUtils.getImage?.(resolvedSrc.value, {
         quality: 10,
         width: 60
       }, nOption.value);
-      return typeof thumbnail === "string" ? thumbnail : props.src;
+      return typeof thumbnail === "string" ? thumbnail : resolvedSrc.value;
     });
     useLazySizes(() => !isRuntimeLambda() && !!nThumbnail.value);
     return () => {
@@ -124,15 +125,15 @@ export default defineComponent({
         return h("img", {
           ...attrs,
           ...nImgAttrs.value,
-          "src": props.src,
+          "src": resolvedSrc.value,
           "alt": props.alt || image.value.alt,
           "title": props.title || image.value.title,
           "width": props.eWidth || nImgAttrs.value.width,
           "height": props.eHeight || nImgAttrs.value.height,
-          "x-src": getLocalSource(props.src)
+          "x-src": getLocalSource(resolvedSrc.value)
         });
       }
-      const primarySource = nSources.value[0] || { src: props.src, srcset: props.src };
+      const primarySource = nSources.value[0] || { src: resolvedSrc.value, srcset: resolvedSrc.value };
       const fallbackSource = nSources.value[1];
       const compatibilityThumb = nThumbnail.value;
       const sourceSrcsetProp = compatibilityThumb ? "data-srcset" : "srcset";
@@ -152,7 +153,7 @@ export default defineComponent({
         "width": props.eWidth || nImgAttrs.value.width,
         "height": props.eHeight || nImgAttrs.value.height,
         "class": compatibilityThumb ? [attrs.class, "lazyload", props.classImg] : [attrs.class, props.classImg],
-        "x-src": getLocalSource(props.src)
+        "x-src": getLocalSource(resolvedSrc.value)
       };
       if (options.value.lazy && !props.sync && !imgAttrs.loading) {
         imgAttrs.loading = "lazy";

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,9 +7,11 @@ 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>;
+    resolvedSrc: import("vue").ComputedRef<string>;
     nImgAttrs: import("vue").ComputedRef<{
         width: number | undefined;
         height: number | undefined;

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,8 +20,43 @@ export function useLazySizes(enabled) {
     void loadLazySizes();
   });
 }
+function isAbsoluteImageUrl(value) {
+  return /^https?:\/\//i.test(value) || value.startsWith("data:");
+}
+function withLeadingSlash(value) {
+  return value.startsWith("/") ? value : `/${value}`;
+}
+function resolveStrapiImageSrc(src, strappi) {
+  if (!strappi || !src || isAbsoluteImageUrl(src)) {
+    return src;
+  }
+  return `strapi:${withLeadingSlash(src)}`;
+}
+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 resolvedSrc = computed(() => resolveStrapiImageSrc(props.src, props.strappi));
   const nImgAttrs = computed(() => ({
     width: parseSize(props.width),
     height: parseSize(props.height),
@@ -48,7 +83,7 @@ export function useImage(props) {
   }));
   const image = computed(() => {
     const meta = {
-      ...imageUtils.getImageMeta?.(props.src) || { name: props.src }
+      ...imageUtils.getImageMeta?.(resolvedSrc.value) || { name: resolvedSrc.value }
     };
     if (!meta.alt) {
       meta.alt = getNormalName(meta.name);
@@ -61,6 +96,7 @@ export function useImage(props) {
   return {
     imageUtils,
     image,
+    resolvedSrc,
     nImgAttrs,
     nModifiers,
     nOption

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";