@place-framework/place-block-image 1.0.0

package/README.md

@@ -0,0 +1,117 @@
+# @place-framework/place-block-image
+
+A webpack plugin that generates CSS custom properties from image dimensions to prevent layout shift and automatically creates components for React and Vue.
+
+## Overview
+
+This package provides a webpack plugin that:
+
+- Scans your project for images
+- Extracts image dimensions automatically
+- Generates CSS custom properties (CSS variables) for width, height, and aspect ratio
+- Creates optimized components for React and Vue frameworks
+- Prevents cumulative layout shift (CLS) by providing image dimensions upfront
+
+## Features
+
+- **Automatic Image Processing**: Automatically detects and processes images in your project
+- **CSS Custom Properties**: Generates CSS variables for image dimensions
+- **Framework Components**: Creates ready-to-use components for React (JSX/TSX) and Vue
+- **Layout Shift Prevention**: Helps maintain stable layouts by providing image dimensions
+- **TypeScript Support**: Full TypeScript support with type definitions
+- **Webpack Integration**: Seamless integration with your webpack build process
+
+## Installation
+
+```bash
+npm install @place-framework/place-block-image
+```
+
+## Usage
+
+### Webpack Configuration
+
+Add the plugin to your webpack configuration:
+
+```javascript
+const PlaceBlockImagePlugin = require('@place-framework/place-block-image');
+
+module.exports = {
+  // ... your webpack config
+  plugins: [
+    new PlaceBlockImagePlugin({
+      // Plugin options
+    })
+  ]
+};
+```
+
+### Generated CSS Variables
+
+The plugin generates CSS custom properties like:
+
+```css
+:root {
+  --image-example-width: 800px;
+  --image-example-height: 600px;
+  --image-example-aspect-ratio: 1.333;
+}
+```
+
+### Generated Components
+
+#### React (JSX/TSX)
+```jsx
+import { ImageExample } from './generated/images';
+
+function MyComponent() {
+  return <ImageExample alt="Example image" />;
+}
+```
+
+#### Vue
+```vue
+<template>
+  <ImageExample alt="Example image" />
+</template>
+
+<script>
+import { ImageExample } from './generated/images';
+
+export default {
+  components: {
+    ImageExample
+  }
+};
+</script>
+```
+
+## Benefits
+
+- **Performance**: Prevents layout shift by providing image dimensions upfront
+- **Developer Experience**: Automatically generates components, reducing boilerplate
+- **Maintainability**: Centralized image dimension management
+- **SEO**: Better Core Web Vitals scores through CLS prevention
+
+## Configuration Options
+
+The plugin accepts various configuration options to customize its behavior:
+
+- Image source directories
+- Output paths for generated files
+- Component template customization
+- CSS variable naming conventions
+
+## Requirements
+
+- **Webpack**: >= 5.0.0
+- **React**: >= 16.8.0 (optional, for React components)
+- **Vue**: >= 3.0.0 (optional, for Vue components)
+
+## License
+
+MIT
+
+## Author
+
+Brian Kelley

package/dist/constants/index.d.ts

@@ -0,0 +1,9 @@
+export declare const CLASS_NAMES: {
+    readonly LAZY: "lazy";
+    readonly LOADED: "loaded";
+    readonly IMAGE_WRAPPER: "image-wrapper";
+    readonly IMAGE_BLOCK: "image-block";
+};
+export declare const getWrapperClassName: (imagePrefix: string) => string;
+export declare const getImageClassName: (imagePrefix: string, filename: string) => string;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/constants/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getImageClassName = exports.getWrapperClassName = exports.CLASS_NAMES = void 0;
+exports.CLASS_NAMES = {
+    // Lazy loading states
+    LAZY: 'lazy',
+    LOADED: 'loaded',
+    // Wrapper classes
+    IMAGE_WRAPPER: 'image-wrapper',
+    // Base image class
+    IMAGE_BLOCK: 'image-block'
+};
+const getWrapperClassName = (imagePrefix) => `${imagePrefix}wrapper`;
+exports.getWrapperClassName = getWrapperClassName;
+const getImageClassName = (imagePrefix, filename) => `${imagePrefix}${filename}`;
+exports.getImageClassName = getImageClassName;
+//# sourceMappingURL=index.js.map

package/dist/constants/index.js.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { PlaceBlockImagePlugin } from './webpack-plugin';
+export type { PlaceBlockImagePluginOptions, ImageDimensions } from './webpack-plugin';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzD,YAAY,EAAE,4BAA4B,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+"use strict";
+// Main exports for place-block-image package
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaceBlockImagePlugin = void 0;
+var webpack_plugin_1 = require("./webpack-plugin");
+Object.defineProperty(exports, "PlaceBlockImagePlugin", { enumerable: true, get: function () { return webpack_plugin_1.PlaceBlockImagePlugin; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,6CAA6C;;;AAE7C,mDAAyD;AAAhD,uHAAA,qBAAqB,OAAA"}

package/dist/templates/react-jsx.d.ts

@@ -0,0 +1,2 @@
+export declare function getReactJsxTemplate(imagePrefix: string): string;
+//# sourceMappingURL=react-jsx.d.ts.map

package/dist/templates/react-jsx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-jsx.d.ts","sourceRoot":"","sources":["../../src/templates/react-jsx.ts"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAwB/D"}

package/dist/templates/react-jsx.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReactJsxTemplate = getReactJsxTemplate;
+const react_1 = require("./shared/react");
+function getReactJsxTemplate(imagePrefix) {
+    const shared = (0, react_1.getSharedReactTemplate)(imagePrefix);
+    return `${shared.imports}
+
+${shared.comment}
+export const PlaceBlockImage = ({
+  src,
+  alt,
+  lazy = false,
+  className = '',
+  ...props
+}) => {
+${shared.hooks}
+
+${shared.getImageClassName}
+
+${shared.classNames}
+
+${shared.jsx}
+};
+
+${shared.export}
+`;
+}
+//# sourceMappingURL=react-jsx.js.map

package/dist/templates/react-jsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-jsx.js","sourceRoot":"","sources":["../../src/templates/react-jsx.ts"],"names":[],"mappings":";;AAEA,kDAwBC;AA1BD,0CAAwD;AAExD,SAAgB,mBAAmB,CAAC,WAAmB;IACrD,MAAM,MAAM,GAAG,IAAA,8BAAsB,EAAC,WAAW,CAAC,CAAC;IAEnD,OAAO,GAAG,MAAM,CAAC,OAAO;;EAExB,MAAM,CAAC,OAAO;;;;;;;;EAQd,MAAM,CAAC,KAAK;;EAEZ,MAAM,CAAC,iBAAiB;;EAExB,MAAM,CAAC,UAAU;;EAEjB,MAAM,CAAC,GAAG;;;EAGV,MAAM,CAAC,MAAM;CACd,CAAC;AACF,CAAC"}

package/dist/templates/react-tsx.d.ts

@@ -0,0 +1,2 @@
+export declare function getReactTsxTemplate(imagePrefix: string): string;
+//# sourceMappingURL=react-tsx.d.ts.map

package/dist/templates/react-tsx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-tsx.d.ts","sourceRoot":"","sources":["../../src/templates/react-tsx.ts"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA8B/D"}

package/dist/templates/react-tsx.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReactTsxTemplate = getReactTsxTemplate;
+const react_1 = require("./shared/react");
+function getReactTsxTemplate(imagePrefix) {
+    const shared = (0, react_1.getSharedReactTemplate)(imagePrefix);
+    return `${shared.imports}
+
+interface PlaceBlockImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  alt: string;
+  lazy?: boolean;
+}
+
+${shared.comment}
+export const PlaceBlockImage: React.FC<PlaceBlockImageProps> = ({
+  src,
+  alt,
+  lazy = false,
+  className = '',
+  ...props
+}) => {
+${shared.hooks}
+
+${shared.getImageClassName}
+
+${shared.classNames}
+
+${shared.jsx}
+};
+
+${shared.export}
+`;
+}
+//# sourceMappingURL=react-tsx.js.map

package/dist/templates/react-tsx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-tsx.js","sourceRoot":"","sources":["../../src/templates/react-tsx.ts"],"names":[],"mappings":";;AAEA,kDA8BC;AAhCD,0CAAwD;AAExD,SAAgB,mBAAmB,CAAC,WAAmB;IACrD,MAAM,MAAM,GAAG,IAAA,8BAAsB,EAAC,WAAW,CAAC,CAAC;IAEnD,OAAO,GAAG,MAAM,CAAC,OAAO;;;;;;;;EAQxB,MAAM,CAAC,OAAO;;;;;;;;EAQd,MAAM,CAAC,KAAK;;EAEZ,MAAM,CAAC,iBAAiB;;EAExB,MAAM,CAAC,UAAU;;EAEjB,MAAM,CAAC,GAAG;;;EAGV,MAAM,CAAC,MAAM;CACd,CAAC;AACF,CAAC"}

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

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

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

@@ -0,0 +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"}

package/dist/templates/shared/index.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSharedTemplate = void 0;
+const constants_1 = require("../../constants");
+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}\`;
+  };`,
+    // Common intersection observer logic
+    intersectionObserverTemplate: `const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setImageSrc(src);
+            setIsLoaded(true);
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );`
+});
+exports.getSharedTemplate = getSharedTemplate;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,10 @@
+export declare const getSharedReactTemplate: (imagePrefix: string) => {
+    imports: string;
+    comment: string;
+    hooks: string;
+    getImageClassName: string;
+    classNames: string;
+    jsx: string;
+    export: string;
+};
+//# sourceMappingURL=react.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/templates/shared/react.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,sBAAsB,GAAI,aAAa,MAAM;;;;;;;;CA+CzD,CAAC"}

package/dist/templates/shared/react.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSharedReactTemplate = void 0;
+const index_1 = require("./index");
+const constants_1 = require("../../constants");
+const getSharedReactTemplate = (imagePrefix) => {
+    const shared = (0, index_1.getSharedTemplate)(imagePrefix);
+    return {
+        imports: `import React, { useRef, useEffect, useState } from 'react';`,
+        comment: shared.comment,
+        hooks: `  const imgRef = useRef(null);
+  const [imageSrc, setImageSrc] = useState(lazy ? '' : src);
+  const [isLoaded, setIsLoaded] = useState(!lazy);
+
+  useEffect(() => {
+    if (!lazy || isLoaded) return;
+
+    ${shared.intersectionObserverTemplate}
+
+    if (imgRef.current) {
+      observer.observe(imgRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [src, lazy, isLoaded]);`,
+        getImageClassName: shared.getImageClassNameTemplate,
+        classNames: `  const imageClassName = getImageClassName(src);
+  const wrapperClassName = \`${imagePrefix}wrapper \${imageClassName} \${className || ''}\`.trim();
+  
+  // Build img className with lazy states
+  const lazyClass = lazy ? (isLoaded ? '${constants_1.CLASS_NAMES.LAZY} ${constants_1.CLASS_NAMES.LOADED}' : '${constants_1.CLASS_NAMES.LAZY}') : '';
+  const imgClassName = \`${constants_1.CLASS_NAMES.IMAGE_BLOCK} \${lazyClass}\`.trim();`,
+        jsx: `  return (
+    <picture className={wrapperClassName}>
+      <img
+        ref={imgRef}
+        src={imageSrc}
+        alt={alt}
+        className={imgClassName}
+        {...props}
+      />
+    </picture>
+  );`,
+        export: `export default PlaceBlockImage;`
+    };
+};
+exports.getSharedReactTemplate = getSharedReactTemplate;
+//# sourceMappingURL=react.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/templates/shared/react.ts"],"names":[],"mappings":";;;AAAA,mCAA4C;AAC5C,+CAA8C;AAEvC,MAAM,sBAAsB,GAAG,CAAC,WAAmB,EAAE,EAAE;IAC5D,MAAM,MAAM,GAAG,IAAA,yBAAiB,EAAC,WAAW,CAAC,CAAC;IAE9C,OAAO;QACL,OAAO,EAAE,6DAA6D;QAEtE,OAAO,EAAE,MAAM,CAAC,OAAO;QAEvB,KAAK,EAAE;;;;;;;MAOL,MAAM,CAAC,4BAA4B;;;;;;;6BAOZ;QAEzB,iBAAiB,EAAE,MAAM,CAAC,yBAAyB;QAEnD,UAAU,EAAE;+BACe,WAAW;;;0CAGA,uBAAW,CAAC,IAAI,IAAI,uBAAW,CAAC,MAAM,QAAQ,uBAAW,CAAC,IAAI;2BAC7E,uBAAW,CAAC,WAAW,0BAA0B;QAExE,GAAG,EAAE;;;;;;;;;;KAUJ;QAED,MAAM,EAAE,iCAAiC;KAC1C,CAAC;AACJ,CAAC,CAAC;AA/CW,QAAA,sBAAsB,0BA+CjC"}

package/dist/templates/vue.d.ts

@@ -0,0 +1,2 @@
+export declare function getVueTemplate(imagePrefix: string): string;
+//# sourceMappingURL=vue.d.ts.map

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

@@ -0,0 +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"}

package/dist/templates/vue.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVueTemplate = getVueTemplate;
+const shared_1 = require("./shared/");
+const constants_1 = require("../constants");
+function getVueTemplate(imagePrefix) {
+    const shared = (0, shared_1.getSharedTemplate)(imagePrefix);
+    return `<template>
+  <picture :class="wrapperClassName">
+    <img
+      ref="imgRef"
+      :src="imageSrc"
+      :alt="alt"
+      :class="imgClassName"
+      v-bind="$attrs"
+    />
+  </picture>
+</template>
+
+<script setup lang="ts">
+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: ''
+});
+
+${shared.comment}
+
+const imgRef = ref<HTMLImageElement | null>(null);
+const imageSrc = ref(props.lazy ? '' : props.src);
+const isLoaded = ref(!props.lazy);
+let observer: IntersectionObserver | null = null;
+
+${shared.getImageClassNameTemplate}
+
+const imageClassName = computed(() => getImageClassName(props.src));
+const wrapperClassName = computed(() => 
+  \`${imagePrefix}wrapper \${imageClassName.value}\`
+);
+
+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(() => 
+  \`\${props.class} \${lazyClass.value}\`.trim()
+);
+
+const setupLazyLoading = () => {
+  if (!props.lazy || isLoaded.value) return;
+
+  ${shared.intersectionObserverTemplate}
+
+  if (imgRef.value) {
+    observer.observe(imgRef.value);
+  }
+};
+
+const cleanupObserver = () => {
+  if (observer) {
+    observer.disconnect();
+    observer = null;
+  }
+};
+
+onMounted(() => {
+  setupLazyLoading();
+});
+
+onUnmounted(() => {
+  cleanupObserver();
+});
+
+watch(() => props.src, (newSrc) => {
+  if (!props.lazy) {
+    imageSrc.value = newSrc;
+  } else if (!isLoaded.value) {
+    cleanupObserver();
+    setupLazyLoading();
+  }
+});
+
+watch(isLoaded, (loaded) => {
+  if (loaded) {
+    imageSrc.value = props.src;
+    cleanupObserver();
+  }
+});
+</script>
+`;
+}
+//# sourceMappingURL=vue.js.map

package/dist/templates/vue.js.map

@@ -0,0 +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"}

package/dist/templates.d.ts

@@ -0,0 +1,5 @@
+export declare function getReactTsxTemplate(imagePrefix: string): string;
+export declare function getReactJsxTemplate(imagePrefix: string): string;
+export declare function getVueTemplate(imagePrefix: string): string;
+export declare function getTemplate(type: 'tsx' | 'jsx' | 'vue', imagePrefix: string): string;
+//# sourceMappingURL=templates.d.ts.map

package/dist/templates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAKA,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAE/D;AAED,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAE/D;AAED,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAE1D;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAWpF"}

package/dist/templates.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReactTsxTemplate = getReactTsxTemplate;
+exports.getReactJsxTemplate = getReactJsxTemplate;
+exports.getVueTemplate = getVueTemplate;
+exports.getTemplate = getTemplate;
+// Main template exports
+const react_tsx_1 = require("./templates/react-tsx");
+const react_jsx_1 = require("./templates/react-jsx");
+const vue_1 = require("./templates/vue");
+function getReactTsxTemplate(imagePrefix) {
+    return (0, react_tsx_1.getReactTsxTemplate)(imagePrefix);
+}
+function getReactJsxTemplate(imagePrefix) {
+    return (0, react_jsx_1.getReactJsxTemplate)(imagePrefix);
+}
+function getVueTemplate(imagePrefix) {
+    return (0, vue_1.getVueTemplate)(imagePrefix);
+}
+function getTemplate(type, imagePrefix) {
+    switch (type) {
+        case 'tsx':
+            return getReactTsxTemplate(imagePrefix);
+        case 'jsx':
+            return getReactJsxTemplate(imagePrefix);
+        case 'vue':
+            return getVueTemplate(imagePrefix);
+        default:
+            throw new Error(`Unsupported component type: ${type}`);
+    }
+}
+//# sourceMappingURL=templates.js.map

package/dist/templates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"templates.js","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":";;AAKA,kDAEC;AAED,kDAEC;AAED,wCAEC;AAED,kCAWC;AA5BD,wBAAwB;AACxB,qDAA2E;AAC3E,qDAA2E;AAC3E,yCAA2D;AAE3D,SAAgB,mBAAmB,CAAC,WAAmB;IACrD,OAAO,IAAA,+BAAW,EAAC,WAAW,CAAC,CAAC;AAClC,CAAC;AAED,SAAgB,mBAAmB,CAAC,WAAmB;IACrD,OAAO,IAAA,+BAAW,EAAC,WAAW,CAAC,CAAC;AAClC,CAAC;AAED,SAAgB,cAAc,CAAC,WAAmB;IAChD,OAAO,IAAA,oBAAM,EAAC,WAAW,CAAC,CAAC;AAC7B,CAAC;AAED,SAAgB,WAAW,CAAC,IAA2B,EAAE,WAAmB;IAC1E,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,KAAK;YACR,OAAO,mBAAmB,CAAC,WAAW,CAAC,CAAC;QAC1C,KAAK,KAAK;YACR,OAAO,mBAAmB,CAAC,WAAW,CAAC,CAAC;QAC1C,KAAK,KAAK;YACR,OAAO,cAAc,CAAC,WAAW,CAAC,CAAC;QACrC;YACE,MAAM,IAAI,KAAK,CAAC,+BAA+B,IAAI,EAAE,CAAC,CAAC;IAC3D,CAAC;AACH,CAAC"}

package/dist/utils/index.d.ts

@@ -0,0 +1,8 @@
+export interface TemplateData {
+    imagePrefix: string;
+    baseClassName: string;
+    wrapperClassName: string;
+}
+export declare function getTemplateData(imagePrefix: string): TemplateData;
+export declare function getSharedLogic(imagePrefix: string): string;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAkB1D"}

package/dist/utils/index.js

@@ -0,0 +1,32 @@
+"use strict";
+// Shared template utilities
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTemplateData = getTemplateData;
+exports.getSharedLogic = getSharedLogic;
+function getTemplateData(imagePrefix) {
+    return {
+        imagePrefix,
+        baseClassName: `${imagePrefix}block`,
+        wrapperClassName: `${imagePrefix}wrapper`
+    };
+}
+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}\`;`;
+}
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";AAAA,4BAA4B;;AAQ5B,0CAMC;AAED,wCAkBC;AA1BD,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,SAAgB,cAAc,CAAC,WAAmB;IAChD,OAAO;;;;;;;;;;;;eAYM,WAAW;;;;+BAIK,WAAW,+BAA+B,CAAC;AAC1E,CAAC"}

package/dist/webpack-plugin.d.ts

@@ -0,0 +1,49 @@
+import { Compiler } from 'webpack';
+export interface PlaceBlockImagePluginOptions {
+    imagePrefix?: string;
+    imageDir: string;
+    scssPath: string;
+    componentPath?: string;
+    componentType?: 'tsx' | 'jsx' | 'vue';
+    generateComponent?: boolean;
+}
+export interface ImageDimensions {
+    width: number;
+    height: number;
+    filename: string;
+    className: string;
+}
+export declare class PlaceBlockImagePlugin {
+    private options;
+    private isGenerating;
+    private lastGenerationTime;
+    constructor(options: PlaceBlockImagePluginOptions);
+    /**
+     * Generate CSS class name from filename
+     */
+    private generateClassName;
+    /**
+     * Scan directory for images and get their dimensions
+     */
+    private scanImages;
+    /**
+     * Generate SCSS with CSS custom properties and base class
+     */
+    private generateScss;
+    /**
+     * Write SCSS file
+     */
+    private writeScssFile;
+    /**
+     * Generate and write component file
+     */
+    private writeComponentFile;
+    /**
+     * Check if images have changed since last generation
+     */
+    private shouldRegenerate;
+    apply(compiler: Compiler): void;
+    private generateImageStyles;
+}
+export default PlaceBlockImagePlugin;
+//# sourceMappingURL=webpack-plugin.d.ts.map