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

package/src/vue/PlaceBlockImage.vue

@@ -0,0 +1,98 @@
+<template>
+  <picture :class="[wrapperClassName, attrs.class]">
+    <img
+      ref="imgRef"
+      :src="imageSrc"
+      :alt="alt"
+      :class="imgClassName"
+      v-bind="imgAttrs"
+    />
+  </picture>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted, watch, useAttrs } from 'vue';
+import { getWrapperClass, getLazyClass, createLazyObserver } from '../utils/index';
+import { IMAGE_PREFIX } from '../constants/index';
+
+declare const __PLUGIN_ASSET_PATH__: string;
+
+defineOptions({ inheritAttrs: false });
+
+/**
+ * PlaceBlockImage — prevents layout shift using CSS custom properties.
+ * Import: import PlaceBlockImage from '@place-framework/place-block-image/vue'
+ *
+ * Usage:
+ *   <PlaceBlockImage src="/assets/logo.png" alt="Logo" />
+ *   <PlaceBlockImage src="/assets/hero.jpg" alt="Hero" :lazy="true" />
+ */
+
+const attrs = useAttrs();
+
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, required: true },
+  imagePrefix: { type: String, default: () => IMAGE_PREFIX },
+  lazy: { type: Boolean, default: false }
+});
+
+// All attrs except class go to the <img>
+const imgAttrs = computed(() => {
+  const { class: _, ...rest } = attrs;
+  return rest;
+});
+
+const imgRef = ref(null);
+const imageSrc = ref(props.lazy ? '' : props.src);
+const isLoaded = ref(!props.lazy);
+let observer: IntersectionObserver | null = null;
+
+const assetPath: string = typeof __PLUGIN_ASSET_PATH__ !== 'undefined' ? __PLUGIN_ASSET_PATH__ : '';
+
+const wrapperClassName = computed(() =>
+  getWrapperClass(props.src, props.imagePrefix, assetPath)
+);
+
+const imgClassName = computed(() => getLazyClass(props.lazy, isLoaded.value));
+
+const setupLazyLoading = () => {
+  if (!props.lazy || isLoaded.value || !imgRef.value) return;
+
+  observer = createLazyObserver(imgRef.value, () => {
+    imageSrc.value = props.src;
+    isLoaded.value = true;
+  });
+};
+
+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/vue/index.ts

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

package/src/webpack-plugin.ts

@@ -2,17 +2,33 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { glob } from 'glob';
 import sizeOf from 'image-size';
-import { Compiler } from 'webpack';
-import { getTemplate } from './templates';
+import { Compiler, DefinePlugin } from 'webpack';
+import { generateImageClassName } from './utils';
 
 export interface PlaceBlockImagePluginOptions {
   imagePrefix?: string;
   imageDir: string;
   scssPath: string;
-  // Component generation options
-  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 {
@@ -30,25 +46,22 @@ export class PlaceBlockImagePlugin {
   constructor(options: PlaceBlockImagePluginOptions) {
     this.options = {
       imagePrefix: 'image-',
-      generateComponent: true,
-      componentType: 'tsx',
+      outputPathPrefix: '',
+      assetPath: `/${path.basename(options.imageDir)}`,
       ...options
     };
   }
 
   /**
-   * Generate CSS class name from filename
+   * Generate CSS class name from filename - uses shared logic
    */
   private generateClassName(filename: string): string {
-    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}`;
+    // 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 generateImageClassName(name, this.options.imagePrefix, this.options.outputPathPrefix);
   }
 
   /**
@@ -137,35 +150,6 @@ export class PlaceBlockImagePlugin {
     fs.writeFileSync(this.options.scssPath, scssContent);
   }
 
-  /**
-   * Generate and write component file
-   */
-  private async writeComponentFile(): Promise<void> {
-    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 = 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
    */
@@ -195,6 +179,21 @@ export class PlaceBlockImagePlugin {
   }
 
   apply(compiler: Compiler): void {
+    // 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 as Record<string, string>) || {}),
+      '@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 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();
@@ -247,8 +246,7 @@ export class PlaceBlockImagePlugin {
       }
 
       await this.writeScssFile(images);
-      await this.writeComponentFile();
-      
+
       console.log(`✅ Generated CSS custom properties for ${images.length} images`);
       console.log(`📝 Output: ${this.options.scssPath}`);
       

package/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "module": "commonjs",
-    "lib": ["ES2020"],
+    "lib": ["ES2020", "DOM"],
     "outDir": "./dist",
     "rootDir": "./src",
     "strict": true,
@@ -13,8 +13,13 @@
     "declarationMap": true,
     "sourceMap": true,
     "moduleResolution": "node",
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "jsx": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@place-block-image/*": ["./src/*"]
+    }
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "src/vue"]
 }

package/vite.config.mts

@@ -0,0 +1,27 @@
+import { defineConfig, build, Plugin } from 'vite';
+import { vueConfig } from './vite.vue.config.mts';
+import { reactConfig } from './vite.react.config.mts';
+
+// Runs the React build once after the Vue build completes.
+// The instance-level flag prevents closeBundle from re-firing
+// when the spawned React build itself reaches closeBundle.
+function buildReact(): Plugin {
+  let done = false;
+  return {
+    name: 'build-react',
+    apply: 'build',
+    async closeBundle() {
+      if (done) return;
+      done = true;
+      await build({ configFile: false, ...reactConfig });
+    },
+  };
+}
+
+// Builds:
+//   src/vue/PlaceBlockImage.vue   → dist/vue/PlaceBlockImage.{js,cjs}   (via vite.vue.config.mts)
+//   src/react/PlaceBlockImage.tsx → dist/react/PlaceBlockImage.{js,cjs} (via vite.react.config.mts)
+export default defineConfig({
+  ...vueConfig,
+  plugins: [...(vueConfig.plugins as Plugin[]), buildReact()],
+});

package/vite.react.config.mts

@@ -0,0 +1,25 @@
+import { resolve } from 'path';
+import type { UserConfig } from 'vite';
+
+
+// Builds src/react/PlaceBlockImage.tsx → dist/react/PlaceBlockImage.{js,cjs}
+// React and its runtime are kept external — consumers supply their own.
+export const reactConfig: UserConfig = {
+  build: {
+    outDir: 'dist/react',
+    emptyOutDir: true,
+    lib: {
+      entry: resolve(__dirname, 'src/react/PlaceBlockImage.tsx'),
+      name: 'PlaceBlockImage',
+      fileName: (format: string, name: string) => (format === 'es' ? `${name}.js` : `${name}.cjs`),
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: ['react', 'react/jsx-runtime'],
+      output: {
+        globals: { react: 'React' },
+        exports: 'named',
+      },
+    },
+  },
+};

package/vite.vue.config.mts

@@ -0,0 +1,26 @@
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+import type { UserConfig } from 'vite';
+
+
+// Builds src/vue/PlaceBlockImage.vue → dist/vue/PlaceBlockImage.{js,cjs}
+// Vue and its runtime are kept external — consumers supply their own.
+export const vueConfig: UserConfig = {
+  plugins: [vue()],
+  build: {
+    outDir: 'dist/vue',
+    emptyOutDir: true,
+    lib: {
+      entry: resolve(__dirname, 'src/vue/PlaceBlockImage.vue'),
+      name: 'PlaceBlockImage',
+      fileName: (format: string, name: string) => (format === 'es' ? `${name}.js` : `${name}.cjs`),
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: { vue: 'Vue' },
+      },
+    },
+  },
+};

package/src/templates/react-jsx.ts

@@ -1,27 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,29 +0,0 @@
-// 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}`);
-  }
-}