@place-framework/place-block-image 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"webpack-plugin.d.ts","sourceRoot":"","sources":["../src/webpack-plugin.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,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;IAYzB;;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"}

package/dist/webpack-plugin.js

@@ -0,0 +1,259 @@
+"use strict";
+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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaceBlockImagePlugin = void 0;
+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");
+class PlaceBlockImagePlugin {
+    constructor(options) {
+        this.isGenerating = false;
+        this.lastGenerationTime = 0;
+        this.options = {
+            imagePrefix: 'image-',
+            generateComponent: true,
+            componentType: 'tsx',
+            ...options
+        };
+    }
+    /**
+     * Generate CSS class name from filename
+     */
+    generateClassName(filename) {
+        const name = path.basename(filename, path.extname(filename));
+        // Convert to kebab-case and remove special characters
+        const cleanName = name
+            .toLowerCase()
+            .replace(/[^a-z0-9-]/g, '-')
+            .replace(/-+/g, '-')
+            .replace(/^-|-$/g, '');
+        return `${this.options.imagePrefix}${cleanName}`;
+    }
+    /**
+     * Scan directory for images and get their dimensions
+     */
+    async scanImages() {
+        const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp', 'ico', 'avif'];
+        const pattern = `${this.options.imageDir}/**/*.{${imageExtensions.join(',')}}`;
+        const files = await (0, glob_1.glob)(pattern, { nodir: true });
+        const results = [];
+        for (const file of files) {
+            try {
+                const dimensions = (0, image_size_1.default)(file);
+                if (dimensions.width && dimensions.height) {
+                    const relativePath = path.relative(this.options.imageDir, file);
+                    const className = this.generateClassName(relativePath);
+                    results.push({
+                        width: dimensions.width,
+                        height: dimensions.height,
+                        filename: relativePath,
+                        className
+                    });
+                }
+            }
+            catch (error) {
+                console.warn(`⚠️  Could not read dimensions for ${file}:`, error);
+            }
+        }
+        return results;
+    }
+    /**
+     * Generate SCSS with CSS custom properties and base class
+     */
+    generateScss(images) {
+        const wrapperClassName = `${this.options.imagePrefix}wrapper`;
+        const lines = [
+            '// Auto-generated image dimensions',
+            '// This file is generated by place-block-image webpack plugin',
+            '// Do not edit manually - changes will be overwritten',
+            '',
+            '// Base wrapper and image styles',
+            `.${wrapperClassName} {`,
+            '  display: block;',
+            '  aspect-ratio: calc(var(--p-width) / var(--p-height));',
+            '',
+            '  &,',
+            '  img {',
+            '    display: block;',
+            '  }',
+            '',
+            '// Ensure images fill the wrapper and maintain aspect ratio',
+            '  img {',
+            '    width: 100%;',
+            '    height: 100%;',
+            '    object-fit: cover;',
+            '  }',
+            '}',
+            '',
+            '// Image-specific dimensions',
+            ...images.map(img => `.${wrapperClassName}.${img.className} {\n  --p-width: ${img.width}px;\n  --p-height: ${img.height}px;\n}`),
+            ''
+        ];
+        return lines.join('\n');
+    }
+    /**
+     * Write SCSS file
+     */
+    async writeScssFile(images) {
+        const scssContent = this.generateScss(images);
+        const outputDir = path.dirname(this.options.scssPath);
+        // Ensure output directory exists
+        if (!fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir, { recursive: true });
+        }
+        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
+     */
+    async shouldRegenerate() {
+        if (!fs.existsSync(this.options.scssPath)) {
+            return true;
+        }
+        const scssStats = fs.statSync(this.options.scssPath);
+        const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp', 'ico', 'avif'];
+        const pattern = `${this.options.imageDir}/**/*.{${imageExtensions.join(',')}}`;
+        try {
+            const files = await (0, glob_1.glob)(pattern, { nodir: true });
+            for (const file of files) {
+                const fileStats = fs.statSync(file);
+                if (fileStats.mtime > scssStats.mtime) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        catch {
+            return true;
+        }
+    }
+    apply(compiler) {
+        // Use environment hook to run only once at startup
+        compiler.hooks.environment.tap('PlaceBlockImagePlugin', () => {
+            this.generateImageStyles();
+        });
+        // Also run on watchRun for file changes during development
+        compiler.hooks.watchRun.tapAsync('PlaceBlockImagePlugin', async (compiler, callback) => {
+            // Prevent running too frequently
+            const now = Date.now();
+            if (this.isGenerating || (now - this.lastGenerationTime) < 1000) {
+                callback();
+                return;
+            }
+            try {
+                const shouldRegenerate = await this.shouldRegenerate();
+                if (shouldRegenerate) {
+                    await this.generateImageStyles();
+                }
+                callback();
+            }
+            catch (error) {
+                console.error('❌ PlaceBlockImagePlugin error:', error);
+                callback();
+            }
+        });
+    }
+    async generateImageStyles() {
+        if (this.isGenerating) {
+            return;
+        }
+        this.isGenerating = true;
+        this.lastGenerationTime = Date.now();
+        try {
+            console.log('🖼️  PlaceBlockImagePlugin: Generating image styles...');
+            if (!fs.existsSync(this.options.imageDir)) {
+                console.warn(`⚠️  Image directory does not exist: ${this.options.imageDir}`);
+                return;
+            }
+            console.log(`🔍 Scanning images in: ${this.options.imageDir}`);
+            const images = await this.scanImages();
+            if (images.length === 0) {
+                console.log('⚠️  No images found');
+                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
+            if (images.length > 0) {
+                console.log('📋 Generated classes:');
+                images.slice(0, 3).forEach(img => {
+                    console.log(`   .${img.className} { --p-width: ${img.width}; --p-height: ${img.height}; }`);
+                });
+                if (images.length > 3) {
+                    console.log(`   ... and ${images.length - 3} more`);
+                }
+            }
+        }
+        catch (error) {
+            console.error('❌ PlaceBlockImagePlugin error:', error);
+        }
+        finally {
+            this.isGenerating = false;
+        }
+    }
+}
+exports.PlaceBlockImagePlugin = PlaceBlockImagePlugin;
+exports.default = PlaceBlockImagePlugin;
+//# sourceMappingURL=webpack-plugin.js.map

package/dist/webpack-plugin.js.map

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

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@place-framework/place-block-image",
+  "version": "1.0.0",
+  "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",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "generate": "node dist/generate.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "image",
+    "layout-shift",
+    "css",
+    "custom-properties",
+    "react",
+    "vue",
+    "typescript"
+  ],
+  "author": "Brian Kelley",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/glob": "^8.1.0",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "image-size": "^1.0.2",
+    "glob": "^10.0.0"
+  },
+  "peerDependencies": {
+    "webpack": ">=5.0.0",
+    "react": ">=16.8.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": false
+    }
+  }
+}

package/src/constants/index.ts

@@ -0,0 +1,14 @@
+export const CLASS_NAMES = {
+  // Lazy loading states
+  LAZY: 'lazy',
+  LOADED: 'loaded',
+  
+  // Wrapper classes
+  IMAGE_WRAPPER: 'image-wrapper',
+  
+  // Base image class
+  IMAGE_BLOCK: 'image-block'
+} as const;
+
+export const getWrapperClassName = (imagePrefix: string) => `${imagePrefix}wrapper`;
+export const getImageClassName = (imagePrefix: string, filename: string) => `${imagePrefix}${filename}`;

package/src/index.ts

@@ -0,0 +1,4 @@
+// Main exports for place-block-image package
+
+export { PlaceBlockImagePlugin } from './webpack-plugin';
+export type { PlaceBlockImagePluginOptions, ImageDimensions } from './webpack-plugin';

package/src/templates/react-jsx.ts

@@ -0,0 +1,27 @@
+import { getSharedReactTemplate } from './shared/react';
+
+export function getReactJsxTemplate(imagePrefix: string): string {
+  const shared = 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}
+`;
+}

package/src/templates/react-tsx.ts

@@ -0,0 +1,33 @@
+import { getSharedReactTemplate } from './shared/react';
+
+export function getReactTsxTemplate(imagePrefix: string): string {
+  const shared = 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}
+`;
+}

package/src/templates/shared/index.ts

@@ -0,0 +1,47 @@
+import { CLASS_NAMES } from '../../constants';
+
+export const getSharedTemplate = (imagePrefix: string) => ({
+  // 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)
+ * - ${CLASS_NAMES.LAZY}/${CLASS_NAMES.LAZY}.${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 }
+    );`
+});

package/src/templates/shared/react.ts

@@ -0,0 +1,51 @@
+import { getSharedTemplate } from './index';
+import { CLASS_NAMES } from '../../constants';
+
+export const getSharedReactTemplate = (imagePrefix: string) => {
+  const shared = 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 ? '${CLASS_NAMES.LAZY} ${CLASS_NAMES.LOADED}' : '${CLASS_NAMES.LAZY}') : '';
+  const imgClassName = \`${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;`
+  };
+};

package/src/templates/vue.ts

@@ -0,0 +1,98 @@
+import { getSharedTemplate } from './shared/';
+import { CLASS_NAMES } from '../constants';
+
+export function getVueTemplate(imagePrefix: string): string {
+  const shared = 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 ? '${CLASS_NAMES.LAZY} ${CLASS_NAMES.LOADED}' : '${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>
+`;
+}

package/src/templates.ts

@@ -0,0 +1,29 @@
+// Main template exports
+import { getReactTsxTemplate as getReactTsx } from './templates/react-tsx';
+import { getReactJsxTemplate as getReactJsx } from './templates/react-jsx';
+import { getVueTemplate as getVue } from './templates/vue';
+
+export function getReactTsxTemplate(imagePrefix: string): string {
+  return getReactTsx(imagePrefix);
+}
+
+export function getReactJsxTemplate(imagePrefix: string): string {
+  return getReactJsx(imagePrefix);
+}
+
+export function getVueTemplate(imagePrefix: string): string {
+  return getVue(imagePrefix);
+}
+
+export function getTemplate(type: 'tsx' | 'jsx' | 'vue', imagePrefix: string): string {
+  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}`);
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,35 @@
+// Shared template utilities
+
+export interface TemplateData {
+  imagePrefix: string;
+  baseClassName: string;
+  wrapperClassName: string;
+}
+
+export function getTemplateData(imagePrefix: string): TemplateData {
+  return {
+    imagePrefix,
+    baseClassName: `${imagePrefix}block`,
+    wrapperClassName: `${imagePrefix}wrapper`
+  };
+}
+
+export function getSharedLogic(imagePrefix: string): string {
+  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}\`;`;
+}