@place-framework/place-block-image 1.0.0

package/src/webpack-plugin.ts

@@ -0,0 +1,273 @@
+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';
+
+export interface PlaceBlockImagePluginOptions {
+  imagePrefix?: string;
+  imageDir: string;
+  scssPath: string;
+  // Component generation options
+  componentPath?: string;
+  componentType?: 'tsx' | 'jsx' | 'vue';
+  generateComponent?: boolean;
+}
+
+export interface ImageDimensions {
+  width: number;
+  height: number;
+  filename: string;
+  className: string;
+}
+
+export class PlaceBlockImagePlugin {
+  private options: PlaceBlockImagePluginOptions & { imagePrefix: string };
+  private isGenerating: boolean = false;
+  private lastGenerationTime: number = 0;
+
+  constructor(options: PlaceBlockImagePluginOptions) {
+    this.options = {
+      imagePrefix: 'image-',
+      generateComponent: true,
+      componentType: 'tsx',
+      ...options
+    };
+  }
+
+  /**
+   * Generate CSS class name from filename
+   */
+  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}`;
+  }
+
+  /**
+   * Scan directory for images and get their dimensions
+   */
+  private async scanImages(): Promise<ImageDimensions[]> {
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp', 'ico', 'avif'];
+    const pattern = `${this.options.imageDir}/**/*.{${imageExtensions.join(',')}}`;
+    
+    const files = await glob(pattern, { nodir: true });
+    const results: ImageDimensions[] = [];
+    
+    for (const file of files) {
+      try {
+        const dimensions = sizeOf(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
+   */
+  private generateScss(images: ImageDimensions[]): string {
+    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
+   */
+  private async writeScssFile(images: ImageDimensions[]): Promise<void> {
+    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
+   */
+  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
+   */
+  private async shouldRegenerate(): Promise<boolean> {
+    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 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: Compiler): void {
+    // 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();
+      }
+    });
+  }
+
+  private async generateImageStyles(): Promise<void> {
+    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;
+    }
+  }
+}
+
+export default PlaceBlockImagePlugin;

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "lib": ["ES2020"],
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}