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

package/dist/utils/index.js

@@ -1,49 +1,117 @@
 "use strict";
-// Shared template utilities
+// Shared utilities
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTemplateData = getTemplateData;
+exports.cleanImagePath = void 0;
 exports.generateImageClassName = generateImageClassName;
-exports.getSharedLogic = getSharedLogic;
-function getTemplateData(imagePrefix) {
-    return {
-        imagePrefix,
-        baseClassName: `${imagePrefix}block`,
-        wrapperClassName: `${imagePrefix}wrapper`
-    };
+exports.resolveAssetPath = resolveAssetPath;
+exports.getImageClass = getImageClass;
+exports.getWrapperClass = getWrapperClass;
+exports.getLazyClass = getLazyClass;
+exports.createLazyObserver = createLazyObserver;
+const index_1 = require("../constants/index");
+/**
+ * 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.
+ */
+const cleanImagePath = (src) => src
+    .replace(/^https?:\/\/[^/]+/, '') // Strip protocol + domain
+    .replace(/^[/\\]+/, '') // Strip leading slashes
+    .replace(/\.[^/.]+$/, '') // Remove file extension
+    .toLowerCase()
+    .replace(/[^a-z0-9/-]/g, '-') // Special chars → hyphens (keep / and -)
+    .replace(/\//g, '-') // Path separators → hyphens
+    .replace(/-+/g, '-') // Collapse duplicate hyphens
+    .replace(/^-|-$/g, ''); // Trim leading/trailing hyphens
+exports.cleanImagePath = cleanImagePath;
+/**
+ * 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")
+ */
+function generateImageClassName(filePath, imagePrefix, outputPrefix = '') {
+    const fullPath = outputPrefix
+        ? `${outputPrefix.replace(/\/$/, '')}/${filePath}`
+        : filePath;
+    return `${imagePrefix}${(0, exports.cleanImagePath)(fullPath)}`;
 }
 /**
- * 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
+ * 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)
  */
-function generateImageClassName(filePath, imagePrefix) {
-    // Remove file extension and convert to kebab-case
-    const cleanName = filePath
-        .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}${cleanName}`;
+function resolveAssetPath(src, assetPath) {
+    if (!assetPath)
+        return src;
+    return src.replace(new RegExp(`^${assetPath.replace(/\//g, '\\/')}\\/?`), '');
 }
-function getSharedLogic(imagePrefix) {
-    return `
-  // Extract filename from src to generate class name
-  const getImageClassName = (imageSrc) => {
-    // 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}\`;
-  };
-
-  const imageClassName = getImageClassName(src);
-  const wrapperClassName = \`${imagePrefix}wrapper \${imageClassName}\`;`;
+/**
+ * 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)
+ */
+function getImageClass(src, imagePrefix, assetPath) {
+    if (!src)
+        return '';
+    return `${imagePrefix}${(0, exports.cleanImagePath)(resolveAssetPath(src, assetPath))}`;
+}
+/**
+ * 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)
+ */
+function getWrapperClass(src, imagePrefix, assetPath, extraClass = '') {
+    const parts = [
+        `${imagePrefix}${index_1.CLASS_NAMES.WRAPPER_SUFFIX}`,
+        getImageClass(src, imagePrefix, assetPath),
+        extraClass,
+    ].filter(Boolean);
+    return parts.join(' ');
+}
+/**
+ * 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)
+ */
+function getLazyClass(lazy, isLoaded) {
+    if (!lazy)
+        return '';
+    return isLoaded ? `${index_1.CLASS_NAMES.LAZY} ${index_1.CLASS_NAMES.LOADED}` : index_1.CLASS_NAMES.LAZY;
+}
+/**
+ * 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)
+ */
+function createLazyObserver(element, onIntersect, threshold = 0.1) {
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                onIntersect();
+                observer.unobserve(entry.target);
+            }
+        });
+    }, { threshold });
+    observer.observe(element);
+    return observer;
 }
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";AAAA,4BAA4B;;AAQ5B,0CAMC;AAQD,wDAUC;AAED,wCAkBC;AA5CD,SAAgB,eAAe,CAAC,WAAmB;IACjD,OAAO;QACL,WAAW;QACX,aAAa,EAAE,GAAG,WAAW,OAAO;QACpC,gBAAgB,EAAE,GAAG,WAAW,SAAS;KAC1C,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAgB,sBAAsB,CAAC,QAAgB,EAAE,WAAmB;IAC1E,kDAAkD;IAClD,MAAM,SAAS,GAAG,QAAQ;SACvB,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,wBAAwB;SACjD,WAAW,EAAE;SACb,OAAO,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,mCAAmC;SAC/D,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,2BAA2B;SAC/C,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,kCAAkC;IAE5D,OAAO,GAAG,WAAW,GAAG,SAAS,EAAE,CAAC;AACtC,CAAC;AAED,SAAgB,cAAc,CAAC,WAAmB;IAChD,OAAO;;;;;;;;;;;;eAYM,WAAW;;;;+BAIK,WAAW,+BAA+B,CAAC;AAC1E,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}

package/dist/vue/PlaceBlockImage.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),d="image-",i={LAZY:"lazy",LOADED:"loaded",WRAPPER_SUFFIX:"wrapper"},A=r=>r.replace(/^https?:\/\/[^/]+/,"").replace(/^[/\\]+/,"").replace(/\.[^/.]+$/,"").toLowerCase().replace(/[^a-z0-9/-]/g,"-").replace(/\//g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"");function y(r,a){return a?r.replace(new RegExp(`^${a.replace(/\//g,"\\/")}\\/?`),""):r}function L(r,a,t){return r?`${a}${A(y(r,t))}`:""}function P(r,a,t,s=""){return[`${a}${i.WRAPPER_SUFFIX}`,L(r,a,t),s].filter(Boolean).join(" ")}function E(r,a){return r?a?`${i.LAZY} ${i.LOADED}`:i.LAZY:""}function S(r,a,t=.1){const s=new IntersectionObserver(l=>{l.forEach(n=>{n.isIntersecting&&(a(),s.unobserve(n.target))})},{threshold:t});return s.observe(r),s}const z=["src","alt"],I=e.defineComponent({inheritAttrs:!1,__name:"PlaceBlockImage",props:{src:{type:String,required:!0},alt:{type:String,required:!0},imagePrefix:{type:String,default:()=>d},lazy:{type:Boolean,default:!1}},setup(r){const a=e.useAttrs(),t=r,s=e.computed(()=>{const{class:o,...g}=a;return g}),l=e.ref(null),n=e.ref(t.lazy?"":t.src),c=e.ref(!t.lazy);let u=null;const m=typeof __PLUGIN_ASSET_PATH__<"u"?__PLUGIN_ASSET_PATH__:"",_=e.computed(()=>P(t.src,t.imagePrefix,m)),v=e.computed(()=>E(t.lazy,c.value)),f=()=>{!t.lazy||c.value||!l.value||(u=S(l.value,()=>{n.value=t.src,c.value=!0}))},p=()=>{u&&(u.disconnect(),u=null)};return e.onMounted(()=>{f()}),e.onUnmounted(()=>{p()}),e.watch(()=>t.src,o=>{t.lazy?c.value||(p(),f()):n.value=o}),e.watch(c,o=>{o&&(n.value=t.src,p())}),(o,g)=>(e.openBlock(),e.createElementBlock("picture",{class:e.normalizeClass([_.value,e.unref(a).class])},[e.createElementVNode("img",e.mergeProps({ref_key:"imgRef",ref:l,src:n.value,alt:r.alt,class:v.value},s.value),null,16,z)],2))}});module.exports=I;

package/dist/vue/PlaceBlockImage.js

@@ -0,0 +1,83 @@
+import { defineComponent as y, useAttrs as L, computed as p, ref as f, onMounted as P, onUnmounted as E, watch as _, openBlock as S, createElementBlock as z, normalizeClass as I, unref as C, createElementVNode as $, mergeProps as h } from "vue";
+const R = "image-", u = {
+  // Lazy loading states
+  LAZY: "lazy",
+  LOADED: "loaded",
+  // Suffix appended to imagePrefix to form the wrapper class (e.g. 'image-wrapper')
+  WRAPPER_SUFFIX: "wrapper"
+}, b = (t) => t.replace(/^https?:\/\/[^/]+/, "").replace(/^[/\\]+/, "").replace(/\.[^/.]+$/, "").toLowerCase().replace(/[^a-z0-9/-]/g, "-").replace(/\//g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+function w(t, r) {
+  return r ? t.replace(new RegExp(`^${r.replace(/\//g, "\\/")}\\/?`), "") : t;
+}
+function N(t, r, e) {
+  return t ? `${r}${b(w(t, e))}` : "";
+}
+function B(t, r, e, a = "") {
+  return [
+    `${r}${u.WRAPPER_SUFFIX}`,
+    N(t, r, e),
+    a
+  ].filter(Boolean).join(" ");
+}
+function F(t, r) {
+  return t ? r ? `${u.LAZY} ${u.LOADED}` : u.LAZY : "";
+}
+function O(t, r, e = 0.1) {
+  const a = new IntersectionObserver(
+    (s) => {
+      s.forEach((n) => {
+        n.isIntersecting && (r(), a.unobserve(n.target));
+      });
+    },
+    { threshold: e }
+  );
+  return a.observe(t), a;
+}
+const U = ["src", "alt"], x = /* @__PURE__ */ y({
+  inheritAttrs: !1,
+  __name: "PlaceBlockImage",
+  props: {
+    src: { type: String, required: !0 },
+    alt: { type: String, required: !0 },
+    imagePrefix: { type: String, default: () => R },
+    lazy: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const r = L(), e = t, a = p(() => {
+      const { class: c, ...m } = r;
+      return m;
+    }), s = f(null), n = f(e.lazy ? "" : e.src), l = f(!e.lazy);
+    let o = null;
+    const v = typeof __PLUGIN_ASSET_PATH__ < "u" ? __PLUGIN_ASSET_PATH__ : "", d = p(
+      () => B(e.src, e.imagePrefix, v)
+    ), A = p(() => F(e.lazy, l.value)), g = () => {
+      !e.lazy || l.value || !s.value || (o = O(s.value, () => {
+        n.value = e.src, l.value = !0;
+      }));
+    }, i = () => {
+      o && (o.disconnect(), o = null);
+    };
+    return P(() => {
+      g();
+    }), E(() => {
+      i();
+    }), _(() => e.src, (c) => {
+      e.lazy ? l.value || (i(), g()) : n.value = c;
+    }), _(l, (c) => {
+      c && (n.value = e.src, i());
+    }), (c, m) => (S(), z("picture", {
+      class: I([d.value, C(r).class])
+    }, [
+      $("img", h({
+        ref_key: "imgRef",
+        ref: s,
+        src: n.value,
+        alt: t.alt,
+        class: A.value
+      }, a.value), null, 16, U)
+    ], 2));
+  }
+});
+export {
+  x as default
+};

package/dist/webpack-plugin.d.ts

@@ -3,9 +3,26 @@ export interface PlaceBlockImagePluginOptions {
     imagePrefix?: string;
     imageDir: string;
     scssPath: string;
-    componentPath?: string;
-    componentType?: 'tsx' | 'jsx' | 'vue';
-    generateComponent?: boolean;
+    /**
+     * The URL path at which images are served (e.g. '/images').
+     * Used by the webpack plugin to inject a __PLACE_ASSET_PATH__ constant
+     * that the React/Vue components use to strip the prefix from src before
+     * generating the CSS class name — ensuring it matches what the plugin
+     * generates from the file path relative to imageDir.
+     *
+     * Defaults to the basename of imageDir prefixed with '/' (e.g. '/images').
+     */
+    assetPath?: string;
+    /**
+     * Output path prefix prepended to the relative image path when generating
+     * CSS class names — must match the prefix used in assetModuleFilename so
+     * the class name the plugin writes into the SCSS matches what the component
+     * derives from the served URL at runtime.
+     *
+     * e.g. if assetModuleFilename outputs "images/story/foo.png" (served as
+     * "/images/story/foo.png"), set outputPathPrefix: 'images'
+     */
+    outputPathPrefix?: string;
 }
 export interface ImageDimensions {
     width: number;
@@ -34,10 +51,6 @@ export declare class PlaceBlockImagePlugin {
      * Write SCSS file
      */
     private writeScssFile;
-    /**
-     * Generate and write component file
-     */
-    private writeComponentFile;
     /**
      * Check if images have changed since last generation
      */

package/dist/webpack-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webpack-plugin.d.ts","sourceRoot":"","sources":["../src/webpack-plugin.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAInC,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IAEjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,qBAAa,qBAAqB;IAChC,OAAO,CAAC,OAAO,CAAyD;IACxE,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,kBAAkB,CAAa;gBAE3B,OAAO,EAAE,4BAA4B;IASjD;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAIzB;;OAEG;YACW,UAAU;IA8BxB;;OAEG;IACH,OAAO,CAAC,YAAY;IAmCpB;;OAEG;YACW,aAAa;IAY3B;;OAEG;YACW,kBAAkB;IA0BhC;;OAEG;YACW,gBAAgB;IAyB9B,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;YA4BjB,mBAAmB;CA8ClC;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"webpack-plugin.d.ts","sourceRoot":"","sources":["../src/webpack-plugin.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAgB,MAAM,SAAS,CAAC;AAGjD,MAAM,WAAW,4BAA4B;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;OAQG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,qBAAa,qBAAqB;IAChC,OAAO,CAAC,OAAO,CAAyD;IACxE,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,kBAAkB,CAAa;gBAE3B,OAAO,EAAE,4BAA4B;IASjD;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;OAEG;YACW,UAAU;IA8BxB;;OAEG;IACH,OAAO,CAAC,YAAY;IAmCpB;;OAEG;YACW,aAAa;IAY3B;;OAEG;YACW,gBAAgB;IAyB9B,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;YA2CjB,mBAAmB;CA6ClC;AAED,eAAe,qBAAqB,CAAC"}

package/dist/webpack-plugin.js

@@ -41,7 +41,7 @@ const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const glob_1 = require("glob");
 const image_size_1 = __importDefault(require("image-size"));
-const templates_1 = require("./templates");
+const webpack_1 = require("webpack");
 const utils_1 = require("./utils");
 class PlaceBlockImagePlugin {
     constructor(options) {
@@ -49,8 +49,8 @@ class PlaceBlockImagePlugin {
         this.lastGenerationTime = 0;
         this.options = {
             imagePrefix: 'image-',
-            generateComponent: true,
-            componentType: 'tsx',
+            outputPathPrefix: '',
+            assetPath: `/${path.basename(options.imageDir)}`,
             ...options
         };
     }
@@ -58,7 +58,12 @@ class PlaceBlockImagePlugin {
      * Generate CSS class name from filename - uses shared logic
      */
     generateClassName(filename) {
-        return (0, utils_1.generateImageClassName)(filename, this.options.imagePrefix);
+        // When outputPathPrefix is set the asset output is flat (just basename),
+        // so use only the basename to mirror the served URL: /assets/accent-orchid.png
+        const name = this.options.outputPathPrefix
+            ? path.basename(filename)
+            : filename;
+        return (0, utils_1.generateImageClassName)(name, this.options.imagePrefix, this.options.outputPathPrefix);
     }
     /**
      * Scan directory for images and get their dimensions
@@ -134,29 +139,6 @@ class PlaceBlockImagePlugin {
         }
         fs.writeFileSync(this.options.scssPath, scssContent);
     }
-    /**
-     * Generate and write component file
-     */
-    async writeComponentFile() {
-        if (!this.options.generateComponent || !this.options.componentPath || !this.options.componentType) {
-            return;
-        }
-        const componentFileName = `PlaceBlockImage.${this.options.componentType}`;
-        const componentFilePath = path.resolve(this.options.componentPath, componentFileName);
-        // Check if component already exists
-        if (fs.existsSync(componentFilePath)) {
-            console.log(`📦 Component already exists, skipping: ${componentFilePath}`);
-            return;
-        }
-        const componentContent = (0, templates_1.getTemplate)(this.options.componentType, this.options.imagePrefix);
-        const outputDir = path.dirname(componentFilePath);
-        // Ensure output directory exists
-        if (!fs.existsSync(outputDir)) {
-            fs.mkdirSync(outputDir, { recursive: true });
-        }
-        fs.writeFileSync(componentFilePath, componentContent);
-        console.log(`📦 Generated component: ${componentFilePath}`);
-    }
     /**
      * Check if images have changed since last generation
      */
@@ -182,6 +164,19 @@ class PlaceBlockImagePlugin {
         }
     }
     apply(compiler) {
+        // Inject @place-block-image alias so the Vue/React source components can
+        // resolve their shared utils/constants imports without requiring the
+        // consuming app to configure anything manually.
+        const pkgSrc = path.resolve(__dirname, '../src');
+        compiler.options.resolve.alias = {
+            ...(compiler.options.resolve.alias || {}),
+            '@place-block-image': pkgSrc,
+        };
+        // Inject __PLUGIN_ASSET_PATH__ so the React/Vue components can strip the
+        // served URL prefix from src before generating the CSS class name.
+        new webpack_1.DefinePlugin({
+            __PLUGIN_ASSET_PATH__: JSON.stringify(this.options.assetPath),
+        }).apply(compiler);
         // Use environment hook to run only once at startup
         compiler.hooks.environment.tap('PlaceBlockImagePlugin', () => {
             this.generateImageStyles();
@@ -226,7 +221,6 @@ class PlaceBlockImagePlugin {
                 return;
             }
             await this.writeScssFile(images);
-            await this.writeComponentFile();
             console.log(`✅ Generated CSS custom properties for ${images.length} images`);
             console.log(`📝 Output: ${this.options.scssPath}`);
             // Log some examples

package/dist/webpack-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"webpack-plugin.js","sourceRoot":"","sources":["../src/webpack-plugin.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"webpack-plugin.js","sourceRoot":"","sources":["../src/webpack-plugin.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,13 +1,36 @@
 {
   "name": "@place-framework/place-block-image",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A utility package for generating CSS custom properties from image dimensions to prevent layout shift",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./utils": {
+      "require": "./dist/utils/index.js",
+      "types": "./dist/utils/index.d.ts"
+    },
+    "./constants": {
+      "require": "./dist/constants/index.js",
+      "types": "./dist/constants/index.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/vue/PlaceBlockImage.js",
+      "require": "./dist/vue/PlaceBlockImage.cjs",
+      "types": "./dist/vue/PlaceBlockImage.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react/PlaceBlockImage.js",
+      "require": "./dist/react/PlaceBlockImage.cjs",
+      "types": "./dist/react/PlaceBlockImage.d.ts"
+    }
+  },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && vite build",
     "dev": "tsc --watch",
-    "generate": "node dist/generate.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -22,18 +45,21 @@
   "author": "Brian Kelley",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^20.0.0",
     "@types/glob": "^8.1.0",
-    "typescript": "^5.0.0"
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "typescript": "^5.0.0",
+    "vite": "^5.4.21"
   },
   "dependencies": {
-    "image-size": "^1.0.2",
-    "glob": "^10.0.0"
+    "glob": "^10.0.0",
+    "image-size": "^1.0.2"
   },
   "peerDependencies": {
-    "webpack": ">=5.0.0",
     "react": ">=16.8.0",
-    "vue": ">=3.0.0"
+    "vue": ">=3.0.0",
+    "webpack": ">=5.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -46,4 +72,4 @@
       "optional": false
     }
   }
-}
+}

package/src/constants/index.ts

@@ -1,13 +1,12 @@
+export const IMAGE_PREFIX = 'image-';
+
 export const 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',
 } as const;
 
 export const getWrapperClassName = (imagePrefix: string) => `${imagePrefix}wrapper`;

package/src/react/PlaceBlockImage.tsx

@@ -0,0 +1,63 @@
+declare const __PLUGIN_ASSET_PATH__: string;
+
+import React, { useRef, useEffect, useState } from 'react';
+import { getWrapperClass, getLazyClass, createLazyObserver } from '../utils/index';
+import { IMAGE_PREFIX } from '../constants/index';
+
+interface PlaceBlockImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  alt: string;
+  imagePrefix?: string;
+  lazy?: boolean;
+}
+
+/**
+ * PlaceBlockImage — prevents layout shift using CSS custom properties.
+ * Import: import PlaceBlockImage from '@place-framework/place-block-image/react'
+ *
+ * Usage:
+ *   <PlaceBlockImage src="/assets/logo.png" alt="Logo" />
+ *   <PlaceBlockImage src="/assets/hero.jpg" alt="Hero" lazy={true} />
+ */
+export const PlaceBlockImage: React.FC<PlaceBlockImageProps> = ({
+  src,
+  alt,
+  imagePrefix = IMAGE_PREFIX,
+  lazy = false,
+  className = '',
+  ...props
+}) => {
+  const imgRef = useRef<HTMLImageElement>(null);
+  const [imageSrc, setImageSrc] = useState(lazy ? '' : src);
+  const [isLoaded, setIsLoaded] = useState(!lazy);
+
+  const assetPath: string = typeof __PLUGIN_ASSET_PATH__ !== 'undefined' ? __PLUGIN_ASSET_PATH__ : '';
+
+  useEffect(() => {
+    if (!lazy || isLoaded || !imgRef.current) return;
+
+    const observer = createLazyObserver(imgRef.current, () => {
+      setImageSrc(src);
+      setIsLoaded(true);
+    });
+
+    return () => observer.disconnect();
+  }, [src, lazy, isLoaded]);
+
+  const wrapperClassName = getWrapperClass(src, imagePrefix, assetPath, className);
+  const imgClassName = getLazyClass(lazy, isLoaded);
+
+  return (
+    <picture className={wrapperClassName}>
+      <img
+        ref={imgRef}
+        src={imageSrc}
+        alt={alt}
+        className={imgClassName}
+        {...props}
+      />
+    </picture>
+  );
+};
+
+export default PlaceBlockImage;

package/src/react/index.ts

@@ -0,0 +1 @@
+export { PlaceBlockImage, default } from './PlaceBlockImage';