@place-framework/place-block-image 1.0.1 → 1.0.3

package/dist/constants/index.d.ts

@@ -1,8 +1,8 @@
+export declare const IMAGE_PREFIX = "image-";
 export declare const CLASS_NAMES: {
     readonly LAZY: "lazy";
     readonly LOADED: "loaded";
-    readonly IMAGE_WRAPPER: "image-wrapper";
-    readonly IMAGE_BLOCK: "image-block";
+    readonly WRAPPER_SUFFIX: "wrapper";
 };
 export declare const getWrapperClassName: (imagePrefix: string) => string;
 export declare const getImageClassName: (imagePrefix: string, filename: string) => string;

package/dist/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;CAUd,CAAC;AAEX,eAAO,MAAM,mBAAmB,GAAI,aAAa,MAAM,WAA4B,CAAC;AACpF,eAAO,MAAM,iBAAiB,GAAI,aAAa,MAAM,EAAE,UAAU,MAAM,WAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,WAAW,CAAC;AAErC,eAAO,MAAM,WAAW;;;;CAOd,CAAC;AAEX,eAAO,MAAM,mBAAmB,GAAI,aAAa,MAAM,WAA4B,CAAC;AACpF,eAAO,MAAM,iBAAiB,GAAI,aAAa,MAAM,EAAE,UAAU,MAAM,WAAgC,CAAC"}

package/dist/constants/index.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getImageClassName = exports.getWrapperClassName = exports.CLASS_NAMES = void 0;
+exports.getImageClassName = exports.getWrapperClassName = exports.CLASS_NAMES = exports.IMAGE_PREFIX = void 0;
+exports.IMAGE_PREFIX = 'image-';
 exports.CLASS_NAMES = {
     // Lazy loading states
     LAZY: 'lazy',
     LOADED: 'loaded',
-    // Wrapper classes
-    IMAGE_WRAPPER: 'image-wrapper',
-    // Base image class
-    IMAGE_BLOCK: 'image-block'
+    // Suffix appended to imagePrefix to form the wrapper class (e.g. 'image-wrapper')
+    WRAPPER_SUFFIX: 'wrapper',
 };
 const getWrapperClassName = (imagePrefix) => `${imagePrefix}wrapper`;
 exports.getWrapperClassName = getWrapperClassName;

package/dist/constants/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":";;;AAAa,QAAA,WAAW,GAAG;IACzB,sBAAsB;IACtB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAEhB,kBAAkB;IAClB,aAAa,EAAE,eAAe;IAE9B,mBAAmB;IACnB,WAAW,EAAE,aAAa;CAClB,CAAC;AAEJ,MAAM,mBAAmB,GAAG,CAAC,WAAmB,EAAE,EAAE,CAAC,GAAG,WAAW,SAAS,CAAC;AAAvE,QAAA,mBAAmB,uBAAoD;AAC7E,MAAM,iBAAiB,GAAG,CAAC,WAAmB,EAAE,QAAgB,EAAE,EAAE,CAAC,GAAG,WAAW,GAAG,QAAQ,EAAE,CAAC;AAA3F,QAAA,iBAAiB,qBAA0E"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":";;;AAAa,QAAA,YAAY,GAAG,QAAQ,CAAC;AAExB,QAAA,WAAW,GAAG;IACzB,sBAAsB;IACtB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAEhB,kFAAkF;IAClF,cAAc,EAAE,SAAS;CACjB,CAAC;AAEJ,MAAM,mBAAmB,GAAG,CAAC,WAAmB,EAAE,EAAE,CAAC,GAAG,WAAW,SAAS,CAAC;AAAvE,QAAA,mBAAmB,uBAAoD;AAC7E,MAAM,iBAAiB,GAAG,CAAC,WAAmB,EAAE,QAAgB,EAAE,EAAE,CAAC,GAAG,WAAW,GAAG,QAAQ,EAAE,CAAC;AAA3F,QAAA,iBAAiB,qBAA0E"}

package/dist/generate-components.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Generates Vue and React component source files from templates.
+ *
+ * Usage:
+ *   node dist/generate-components.js [imagePrefix]
+ *
+ * imagePrefix defaults to 'image-' if not provided.
+ * The webpack plugin calls this automatically with the configured imagePrefix.
+ *
+ * Generated files are written to src/vue/ and src/react/ so they are
+ * shipped as source and consumers can import directly:
+ *   import { PlaceBlockImage } from '@place-framework/place-block-image/vue'
+ *   import { PlaceBlockImage } from '@place-framework/place-block-image/react'
+ */
+export {};
+//# sourceMappingURL=generate-components.d.ts.map

package/dist/generate-components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-components.d.ts","sourceRoot":"","sources":["../src/generate-components.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG"}

package/dist/generate-components.js

@@ -0,0 +1,93 @@
+"use strict";
+/**
+ * Generates Vue and React component source files from templates.
+ *
+ * Usage:
+ *   node dist/generate-components.js [imagePrefix]
+ *
+ * imagePrefix defaults to 'image-' if not provided.
+ * The webpack plugin calls this automatically with the configured imagePrefix.
+ *
+ * Generated files are written to src/vue/ and src/react/ so they are
+ * shipped as source and consumers can import directly:
+ *   import { PlaceBlockImage } from '@place-framework/place-block-image/vue'
+ *   import { PlaceBlockImage } from '@place-framework/place-block-image/react'
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const vue_1 = require("./templates/vue");
+const react_tsx_1 = require("./templates/react-tsx");
+const imagePrefix = process.argv[2] || 'image-';
+const frameworks = [
+    {
+        name: 'vue',
+        dir: path.resolve(__dirname, '../src/vue'),
+        files: [
+            {
+                filename: 'PlaceBlockImage.vue',
+                content: () => (0, vue_1.getVueTemplate)(imagePrefix),
+            },
+            {
+                filename: 'index.ts',
+                content: () => `export { default as PlaceBlockImage } from './PlaceBlockImage.vue';\n`,
+            },
+        ],
+    },
+    {
+        name: 'react',
+        dir: path.resolve(__dirname, '../src/react'),
+        files: [
+            {
+                filename: 'PlaceBlockImage.tsx',
+                content: () => (0, react_tsx_1.getReactTsxTemplate)(imagePrefix),
+            },
+            {
+                filename: 'index.ts',
+                content: () => `export { PlaceBlockImage, default } from './PlaceBlockImage';\n`,
+            },
+        ],
+    },
+];
+for (const framework of frameworks) {
+    fs.mkdirSync(framework.dir, { recursive: true });
+    for (const file of framework.files) {
+        const filePath = path.join(framework.dir, file.filename);
+        fs.writeFileSync(filePath, file.content(), 'utf-8');
+        console.log(`✅ Generated src/${framework.name}/${file.filename}`);
+    }
+}
+//# sourceMappingURL=generate-components.js.map

package/dist/generate-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-components.js","sourceRoot":"","sources":["../src/generate-components.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;GAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,uCAAyB;AACzB,2CAA6B;AAC7B,yCAAiD;AACjD,qDAA4D;AAE5D,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC;AAEhD,MAAM,UAAU,GAAG;IACjB;QACE,IAAI,EAAE,KAAK;QACX,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,YAAY,CAAC;QAC1C,KAAK,EAAE;YACL;gBACE,QAAQ,EAAE,qBAAqB;gBAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAA,oBAAc,EAAC,WAAW,CAAC;aAC3C;YACD;gBACE,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,GAAG,EAAE,CAAC,uEAAuE;aACvF;SACF;KACF;IACD;QACE,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,cAAc,CAAC;QAC5C,KAAK,EAAE;YACL;gBACE,QAAQ,EAAE,qBAAqB;gBAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAA,+BAAmB,EAAC,WAAW,CAAC;aAChD;YACD;gBACE,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,GAAG,EAAE,CAAC,iEAAiE;aACjF;SACF;KACF;CACF,CAAC;AAEF,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;IACnC,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAEjD,KAAK,MAAM,IAAI,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;QACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzD,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,OAAO,CAAC,CAAC;QACpD,OAAO,CAAC,GAAG,CAAC,mBAAmB,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpE,CAAC;AACH,CAAC"}

package/dist/react/PlaceBlockImage.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),E="image-",o={LAZY:"lazy",LOADED:"loaded",WRAPPER_SUFFIX:"wrapper"},I=e=>e.replace(/^https?:\/\/[^/]+/,"").replace(/^[/\\]+/,"").replace(/\.[^/.]+$/,"").toLowerCase().replace(/[^a-z0-9/-]/g,"-").replace(/\//g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"");function d(e,t){return t?e.replace(new RegExp(`^${t.replace(/\//g,"\\/")}\\/?`),""):e}function L(e,t,n){return e?`${t}${I(d(e,n))}`:""}function P(e,t,n,r=""){return[`${t}${o.WRAPPER_SUFFIX}`,L(e,t,n),r].filter(Boolean).join(" ")}function v(e,t){return e?t?`${o.LAZY} ${o.LOADED}`:o.LAZY:""}function R(e,t,n=.1){const r=new IntersectionObserver(s=>{s.forEach(c=>{c.isIntersecting&&(t(),r.unobserve(c.target))})},{threshold:n});return r.observe(e),r}const i=({src:e,alt:t,imagePrefix:n=E,lazy:r=!1,className:s="",...c})=>{const u=a.useRef(null),[g,p]=a.useState(r?"":e),[l,f]=a.useState(!r),_=typeof __PLUGIN_ASSET_PATH__<"u"?__PLUGIN_ASSET_PATH__:"";a.useEffect(()=>{if(!r||l||!u.current)return;const S=R(u.current,()=>{p(e),f(!0)});return()=>S.disconnect()},[e,r,l]);const m=P(e,n,_,s),A=v(r,l);return a.createElement("picture",{className:m},a.createElement("img",{ref:u,src:g,alt:t,className:A,...c}))};exports.PlaceBlockImage=i;exports.default=i;

package/dist/react/PlaceBlockImage.js

@@ -0,0 +1,67 @@
+import l, { useRef as I, useState as i, useEffect as L } from "react";
+const S = "image-", c = {
+  // Lazy loading states
+  LAZY: "lazy",
+  LOADED: "loaded",
+  // Suffix appended to imagePrefix to form the wrapper class (e.g. 'image-wrapper')
+  WRAPPER_SUFFIX: "wrapper"
+}, P = (e) => e.replace(/^https?:\/\/[^/]+/, "").replace(/^[/\\]+/, "").replace(/\.[^/.]+$/, "").toLowerCase().replace(/[^a-z0-9/-]/g, "-").replace(/\//g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+function d(e, t) {
+  return t ? e.replace(new RegExp(`^${t.replace(/\//g, "\\/")}\\/?`), "") : e;
+}
+function R(e, t, n) {
+  return e ? `${t}${P(d(e, n))}` : "";
+}
+function $(e, t, n, r = "") {
+  return [
+    `${t}${c.WRAPPER_SUFFIX}`,
+    R(e, t, n),
+    r
+  ].filter(Boolean).join(" ");
+}
+function v(e, t) {
+  return e ? t ? `${c.LAZY} ${c.LOADED}` : c.LAZY : "";
+}
+function C(e, t, n = 0.1) {
+  const r = new IntersectionObserver(
+    (a) => {
+      a.forEach((s) => {
+        s.isIntersecting && (t(), r.unobserve(s.target));
+      });
+    },
+    { threshold: n }
+  );
+  return r.observe(e), r;
+}
+const b = ({
+  src: e,
+  alt: t,
+  imagePrefix: n = S,
+  lazy: r = !1,
+  className: a = "",
+  ...s
+}) => {
+  const o = I(null), [p, f] = i(r ? "" : e), [u, g] = i(!r), m = typeof __PLUGIN_ASSET_PATH__ < "u" ? __PLUGIN_ASSET_PATH__ : "";
+  L(() => {
+    if (!r || u || !o.current) return;
+    const E = C(o.current, () => {
+      f(e), g(!0);
+    });
+    return () => E.disconnect();
+  }, [e, r, u]);
+  const _ = $(e, n, m, a), A = v(r, u);
+  return /* @__PURE__ */ l.createElement("picture", { className: _ }, /* @__PURE__ */ l.createElement(
+    "img",
+    {
+      ref: o,
+      src: p,
+      alt: t,
+      className: A,
+      ...s
+    }
+  ));
+};
+export {
+  b as PlaceBlockImage,
+  b as default
+};

package/dist/templates/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/shared/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAI,aAAa,MAAM;;;;CA4CnD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/shared/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,GAAI,aAAa,MAAM;;;;CAmCnD,CAAC"}

package/dist/templates/shared/index.js

@@ -2,35 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSharedTemplate = void 0;
 const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
 const getSharedTemplate = (imagePrefix) => ({
     // Common comment block
     comment: `/**
  * PlaceBlockImage component that prevents layout shift using CSS custom properties
  * Generated by place-block-image webpack plugin
- * 
+ *
  * Usage:
  * <PlaceBlockImage src="/images/logo.svg" alt="Logo" />
  * <PlaceBlockImage src="/images/hero.jpg" alt="Hero" lazy={true} />
- * 
+ *
  * This will automatically apply:
  * - .${imagePrefix}wrapper class on picture (for dimensions)
  * - .${imagePrefix}logo class on picture (specific dimensions via CSS custom properties)
  * - ${constants_1.CLASS_NAMES.LAZY}/${constants_1.CLASS_NAMES.LAZY}.${constants_1.CLASS_NAMES.LOADED} classes for lazy loading states
  */`,
-    // Common filename extraction logic (as string for interpolation)
-    getImageClassNameTemplate: `// Extract filename from src to generate class name
-  const getImageClassName = (imageSrc: string): string => {
-    // Remove /images/ prefix and file extension, convert to kebab-case
-    const filename = imageSrc
-      .replace(/^.*\\/images\\//, '') // Remove path up to /images/
-      .replace(/\\.[^/.]+$/, '') // Remove file extension
-      .toLowerCase()
-      .replace(/[^a-z0-9-]/g, '-') // Convert special chars to hyphens
-      .replace(/-+/g, '-') // Remove duplicate hyphens
-      .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
-    
-    return \`${imagePrefix}\${filename}\`;
-  };`,
+    // Serialises cleanImagePath from utils so the generated component uses the
+    // exact same function — single source of truth, no duplicated regex.
+    getImageClassNameTemplate: `// Serialised from cleanImagePath in utils/index.ts — single source of truth.
+  const cleanImagePath = ${utils_1.cleanImagePath.toString()};
+  const getImageClassName = (imageSrc) => imageSrc ? \`${imagePrefix}\${cleanImagePath(imageSrc)}\` : '';`,
     // Common intersection observer logic
     intersectionObserverTemplate: `const observer = new IntersectionObserver(
       (entries) => {

package/dist/templates/shared/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/shared/index.ts"],"names":[],"mappings":";;;AAAA,+CAA8C;AAEvC,MAAM,iBAAiB,GAAG,CAAC,WAAmB,EAAE,EAAE,CAAC,CAAC;IACzD,uBAAuB;IACvB,OAAO,EAAE;;;;;;;;;QASH,WAAW;QACX,WAAW;OACZ,uBAAW,CAAC,IAAI,IAAI,uBAAW,CAAC,IAAI,IAAI,uBAAW,CAAC,MAAM;IAC7D;IAEF,iEAAiE;IACjE,yBAAyB,EAAE;;;;;;;;;;;eAWd,WAAW;KACrB;IAEH,qCAAqC;IACrC,4BAA4B,EAAE;;;;;;;;;;;OAWzB;CACN,CAAC,CAAC;AA5CU,QAAA,iBAAiB,qBA4C3B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/templates/shared/index.ts"],"names":[],"mappings":";;;AAAA,+CAA8C;AAC9C,uCAA6C;AAEtC,MAAM,iBAAiB,GAAG,CAAC,WAAmB,EAAE,EAAE,CAAC,CAAC;IACzD,uBAAuB;IACvB,OAAO,EAAE;;;;;;;;;QASH,WAAW;QACX,WAAW;OACZ,uBAAW,CAAC,IAAI,IAAI,uBAAW,CAAC,IAAI,IAAI,uBAAW,CAAC,MAAM;IAC7D;IAEF,2EAA2E;IAC3E,qEAAqE;IACrE,yBAAyB,EAAE;2BACF,sBAAc,CAAC,QAAQ,EAAE;yDACK,WAAW,sCAAsC;IAExG,qCAAqC;IACrC,4BAA4B,EAAE;;;;;;;;;;;OAWzB;CACN,CAAC,CAAC;AAnCU,QAAA,iBAAiB,qBAmC3B"}

package/dist/templates/shared/vue.d.ts

@@ -0,0 +1,6 @@
+export declare const getSharedVueTemplate: (imagePrefix: string) => {
+    comment: string;
+    getImageClassName: string;
+    intersectionObserverTemplate: string;
+};
+//# sourceMappingURL=vue.d.ts.map

package/dist/templates/shared/vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../../src/templates/shared/vue.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,GAAI,aAAa,MAAM;;;;CAsBvD,CAAC"}

package/dist/templates/shared/vue.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSharedVueTemplate = void 0;
+const index_1 = require("./index");
+const getSharedVueTemplate = (imagePrefix) => {
+    const shared = (0, index_1.getSharedTemplate)(imagePrefix);
+    return {
+        comment: shared.comment,
+        getImageClassName: shared.getImageClassNameTemplate,
+        // Vue Composition API intersection observer - uses refs instead of React state setters
+        intersectionObserverTemplate: `observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            imageSrc.value = props.src;
+            isLoaded.value = true;
+            observer?.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );`,
+    };
+};
+exports.getSharedVueTemplate = getSharedVueTemplate;
+//# sourceMappingURL=vue.js.map

package/dist/templates/shared/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.js","sourceRoot":"","sources":["../../../src/templates/shared/vue.ts"],"names":[],"mappings":";;;AAAA,mCAA4C;AAErC,MAAM,oBAAoB,GAAG,CAAC,WAAmB,EAAE,EAAE;IAC1D,MAAM,MAAM,GAAG,IAAA,yBAAiB,EAAC,WAAW,CAAC,CAAC;IAE9C,OAAO;QACL,OAAO,EAAE,MAAM,CAAC,OAAO;QAEvB,iBAAiB,EAAE,MAAM,CAAC,yBAAyB;QAEnD,uFAAuF;QACvF,4BAA4B,EAAE;;;;;;;;;;;OAW3B;KACJ,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,oBAAoB,wBAsB/B"}

package/dist/templates/vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/templates/vue.ts"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA8F1D"}
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/templates/vue.ts"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAyF1D"}

package/dist/templates/vue.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getVueTemplate = getVueTemplate;
-const shared_1 = require("./shared/");
+const vue_1 = require("./shared/vue");
 const constants_1 = require("../constants");
 function getVueTemplate(imagePrefix) {
-    const shared = (0, shared_1.getSharedTemplate)(imagePrefix);
+    const shared = (0, vue_1.getSharedVueTemplate)(imagePrefix);
     return `<template>
   <picture :class="wrapperClassName">
     <img
@@ -17,40 +17,35 @@ function getVueTemplate(imagePrefix) {
   </picture>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
 
-interface Props {
-  src: string;
-  alt: string;
-  lazy?: boolean;
-  class?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  lazy: false,
-  class: ''
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, required: true },
+  lazy: { type: Boolean, default: false },
+  class: { type: String, default: '' }
 });
 
 ${shared.comment}
 
-const imgRef = ref<HTMLImageElement | null>(null);
+const imgRef = ref(null);
 const imageSrc = ref(props.lazy ? '' : props.src);
 const isLoaded = ref(!props.lazy);
-let observer: IntersectionObserver | null = null;
+let observer = null;
 
-${shared.getImageClassNameTemplate}
+${shared.getImageClassName}
 
 const imageClassName = computed(() => getImageClassName(props.src));
-const wrapperClassName = computed(() => 
+const wrapperClassName = computed(() =>
   \`${imagePrefix}wrapper \${imageClassName.value}\`
 );
 
-const lazyClass = computed(() => 
+const lazyClass = computed(() =>
   props.lazy ? (isLoaded.value ? '${constants_1.CLASS_NAMES.LAZY} ${constants_1.CLASS_NAMES.LOADED}' : '${constants_1.CLASS_NAMES.LAZY}') : ''
 );
 
-const imgClassName = computed(() => 
+const imgClassName = computed(() =>
   \`\${props.class} \${lazyClass.value}\`.trim()
 );
 

package/dist/templates/vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue.js","sourceRoot":"","sources":["../../src/templates/vue.ts"],"names":[],"mappings":";;AAGA,wCA8FC;AAjGD,sCAA8C;AAC9C,4CAA2C;AAE3C,SAAgB,cAAc,CAAC,WAAmB;IAChD,MAAM,MAAM,GAAG,IAAA,0BAAiB,EAAC,WAAW,CAAC,CAAC;IAE9C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BP,MAAM,CAAC,OAAO;;;;;;;EAOd,MAAM,CAAC,yBAAyB;;;;MAI5B,WAAW;;;;oCAImB,uBAAW,CAAC,IAAI,IAAI,uBAAW,CAAC,MAAM,QAAQ,uBAAW,CAAC,IAAI;;;;;;;;;;IAU9F,MAAM,CAAC,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCtC,CAAC;AACF,CAAC"}
+{"version":3,"file":"vue.js","sourceRoot":"","sources":["../../src/templates/vue.ts"],"names":[],"mappings":";;AAGA,wCAyFC;AA5FD,sCAAoD;AACpD,4CAA2C;AAE3C,SAAgB,cAAc,CAAC,WAAmB;IAChD,MAAM,MAAM,GAAG,IAAA,0BAAoB,EAAC,WAAW,CAAC,CAAC;IAEjD,OAAO;;;;;;;;;;;;;;;;;;;;;;EAsBP,MAAM,CAAC,OAAO;;;;;;;EAOd,MAAM,CAAC,iBAAiB;;;;MAIpB,WAAW;;;;oCAImB,uBAAW,CAAC,IAAI,IAAI,uBAAW,CAAC,MAAM,QAAQ,uBAAW,CAAC,IAAI;;;;;;;;;;IAU9F,MAAM,CAAC,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCtC,CAAC;AACF,CAAC"}

package/dist/utils/index.d.ts

@@ -1,15 +1,62 @@
-export interface TemplateData {
-    imagePrefix: string;
-    baseClassName: string;
-    wrapperClassName: string;
-}
-export declare function getTemplateData(imagePrefix: string): TemplateData;
-/**
- * Generate CSS class name from file path - shared logic for both webpack plugin and templates
- * @param filePath - The file path (can be relative path from images dir or full path)
- * @param imagePrefix - The prefix to add to the class name
- * @returns The generated CSS class name
- */
-export declare function generateImageClassName(filePath: string, imagePrefix: string): string;
-export declare function getSharedLogic(imagePrefix: string): string;
+/**
+ * Converts any image URL or path into a CSS-safe kebab-case string.
+ * Used at build time by generateImageClassName() and at runtime by
+ * the Vue/React components to derive the CSS class from the src prop.
+ */
+export declare const cleanImagePath: (src: string) => string;
+/**
+ * Generate CSS class name from a file path — path-agnostic, works with any URL format.
+ * Matches the runtime getImageClassName logic emitted by getSharedLogic().
+ *
+ * @param filePath     - Relative path from imageDir (e.g. "story/accent-orchid.png")
+ * @param imagePrefix  - The prefix to add to the class name (e.g. "image-")
+ * @param outputPrefix - Optional output path prefix prepended before filePath to mirror
+ *                       the served URL (e.g. "images/" when assetModuleFilename outputs
+ *                       to "images/…" so the browser requests "/images/story/…")
+ * @returns The generated CSS class name (e.g. "image-images-story-accent-orchid")
+ */
+export declare function generateImageClassName(filePath: string, imagePrefix: string, outputPrefix?: string): string;
+/**
+ * Strips the Vite/webpack plugin's injected asset-path prefix from a src string
+ * so the remaining path matches what the plugin used when generating CSS classes.
+ *
+ * @param src       - The raw src value (may include the asset path prefix)
+ * @param assetPath - The value of __PLUGIN_ASSET_PATH__ (empty string if undefined)
+ */
+export declare function resolveAssetPath(src: string, assetPath: string): string;
+/**
+ * Derives the per-image CSS class from a src URL, stripping the asset-path
+ * prefix first so the class matches what the plugin generated at build time.
+ *
+ * @param src         - Raw src prop value
+ * @param imagePrefix - e.g. "image-"
+ * @param assetPath   - Value of __PLUGIN_ASSET_PATH__ (pass '' if not defined)
+ */
+export declare function getImageClass(src: string, imagePrefix: string, assetPath: string): string;
+/**
+ * Builds the full className string for the <picture> wrapper element.
+ *
+ * @param src         - Raw src prop value
+ * @param imagePrefix - e.g. "image-"
+ * @param assetPath   - Value of __PLUGIN_ASSET_PATH__ (pass '' if not defined)
+ * @param extraClass  - Any additional class(es) passed by the consumer (e.g. className prop)
+ */
+export declare function getWrapperClass(src: string, imagePrefix: string, assetPath: string, extraClass?: string): string;
+/**
+ * Returns the CSS class string for the <img> element based on lazy-load state.
+ *
+ * @param lazy     - Whether lazy loading is enabled
+ * @param isLoaded - Whether the image has been loaded (intersected)
+ */
+export declare function getLazyClass(lazy: boolean, isLoaded: boolean): string;
+/**
+ * Creates an IntersectionObserver that fires `onIntersect` once when the given
+ * element enters the viewport, then automatically stops observing.
+ *
+ * @param element      - The DOM element to observe
+ * @param onIntersect  - Callback invoked when the element intersects
+ * @param threshold    - Intersection threshold (default 0.1)
+ * @returns The created IntersectionObserver (call .disconnect() to clean up early)
+ */
+export declare function createLazyObserver(element: Element, onIntersect: () => void, threshold?: number): IntersectionObserver;
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,YAAY,CAMjE;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAUpF;AAED,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAkB1D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MASnB,CAAC;AAE3B;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,YAAY,GAAE,MAAW,GACxB,MAAM,CAMR;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAGvE;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAGzF;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM,EACjB,UAAU,GAAE,MAAW,GACtB,MAAM,CAOR;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,CAGrE;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,MAAM,IAAI,EACvB,SAAS,GAAE,MAAY,GACtB,oBAAoB,CActB"}