@stratawp/vite-plugin 0.2.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+GNU GENERAL PUBLIC LICENSE
+Version 3, 29 June 2007
+
+Copyright (C) 2024 Jon Imms
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+---
+
+For the full GPL-3.0 license text, see: https://www.gnu.org/licenses/gpl-3.0.txt

package/README.md

@@ -84,6 +84,7 @@ export default defineConfig({
 ### Block Auto-Discovery
 
 The plugin scans your `src/blocks` directory for `block.json` files and automatically:
+
 1. Discovers all blocks
 2. Generates PHP registration code
 3. Watches for changes during development
@@ -92,6 +93,7 @@ The plugin scans your `src/blocks` directory for `block.json` files and automati
 ### PHP Hot Reload
 
 When you modify PHP template files:
+
 1. Plugin detects the change
 2. Sends reload signal to browser
 3. Page refreshes automatically
@@ -100,6 +102,7 @@ When you modify PHP template files:
 ### Asset Manifest
 
 Generates a WordPress-compatible manifest that includes:
+
 - File paths and hashes
 - CSS dependencies
 - WordPress script dependencies (wp-element, wp-blocks, etc.)

package/dist/index.d.ts

@@ -28,6 +28,20 @@ interface StrataWPPluginOptions {
      * Performance optimization options
      */
     performance?: PerformanceOptions;
+    /**
+     * Update notification options for dev server
+     */
+    updateNotification?: UpdateNotificationOptions;
+}
+/**
+ * Update Notification Options
+ */
+interface UpdateNotificationOptions {
+    /**
+     * Enable update notifications in dev server
+     * @default true
+     */
+    enabled?: boolean;
 }
 /**
  * Block Options
@@ -184,15 +198,10 @@ interface PerformanceOptions {
      */
     criticalCSS?: boolean | CriticalCSSOptions;
     /**
-     * Lazy loading options
-     * @default true
-     */
-    lazyLoading?: boolean | LazyLoadingOptions;
-    /**
-     * Asset preloading options
+     * Build-time image optimization (sharp + webp + svgo)
      * @default true
      */
-    preload?: boolean | PreloadOptions;
+    images?: boolean | ImageOptions;
 }
 /**
  * Critical CSS Options
@@ -262,6 +271,46 @@ interface LazyLoadingOptions {
      */
     placeholder?: 'blur' | 'color' | 'none';
 }
+/**
+ * Image Pipeline Options
+ */
+interface ImageOptions {
+    /**
+     * Enable the build-time image pipeline
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Source images directory (relative to project root)
+     * @default 'src/images'
+     */
+    src?: string;
+    /**
+     * Output directory (relative to project root)
+     * @default 'dist/images'
+     */
+    dest?: string;
+    /**
+     * Emit sibling .webp for jpg/png. Kept for backwards compatibility:
+     * `false` removes 'webp' from `formats`.
+     * @default true
+     */
+    webp?: boolean;
+    /**
+     * Sibling formats emitted next to jpg/png sources.
+     * @default ['avif', 'webp']
+     */
+    formats?: Array<'avif' | 'webp'>;
+    /**
+     * Per-format quality (0-100)
+     */
+    quality?: {
+        jpeg?: number;
+        png?: number;
+        avif?: number;
+        webp?: number;
+    };
+}
 /**
  * Preload Options
  */
@@ -309,6 +358,10 @@ declare function strataWPPhpHmr(options?: PhpHmrOptions): Plugin;
  *
  * Ensures assets are output in WordPress-friendly structure
  * and can be properly enqueued by WordPress.
+ *
+ * Also handles the src/icons/ directory:
+ * - Build: copies to dist/icons/ with CSS url() path normalization
+ * - Dev: watches for changes and triggers full page reload
  */
 declare function strataWPAssets(options?: AssetOptions): Plugin;
 
@@ -322,8 +375,6 @@ declare function strataWPDesignSystem(options?: DesignSystemOptions): Plugin;
 
 /**
  * Performance Orchestrator
- *
- * Combines all performance plugins with unified configuration
  */
 
 declare function strataWPPerformance(options?: PerformanceOptions): Plugin[];
@@ -342,6 +393,59 @@ declare const strataWPTailwindPreset: Partial<any>;
  */
 declare const strataWPUnoPreset: any;
 
+/**
+ * block.json -> TypeScript attribute-type codegen.
+ *
+ * Given a parsed block.json, emits a deterministic `block-attributes.ts` file
+ * exporting an interface that describes the block's attributes. The block's
+ * `edit.tsx` consumes this interface so the editor props stay in lockstep with
+ * block.json, and a drift gate (`scripts/check-types-drift.mjs`) diffs the
+ * committed output to keep them in sync.
+ *
+ * JSON -> TS type map:
+ *   string            -> string
+ *   number | integer  -> number
+ *   boolean           -> boolean
+ *   array             -> unknown[]
+ *   object            -> Record<string, unknown>
+ *   (missing/unknown) -> unknown
+ *
+ * Optionality: an attribute with a `default` is REQUIRED; an attribute without
+ * a `default` is optional (`?`).
+ */
+/**
+ * A parsed block.json (only the fields the codegen needs).
+ *
+ * `attributes` is intentionally `Record<string, unknown>` so the scanned
+ * `BlockMetadata` (which types attributes loosely) is assignable; each entry is
+ * narrowed to {@link BlockAttributeSchema} internally.
+ */
+interface BlockJsonInput {
+    name?: string;
+    attributes?: Record<string, unknown>;
+}
+/** A single attribute schema entry from block.json's `attributes` map. */
+interface BlockAttributeSchema {
+    type?: string;
+    default?: unknown;
+    [key: string]: unknown;
+}
+/** The result of generating a block's attribute types. */
+interface GeneratedBlockTypes {
+    /** Always `block-attributes.ts` — written next to the block's block.json. */
+    fileName: string;
+    /** Hand-emitted TypeScript source for the attribute interface. */
+    content: string;
+}
+/**
+ * Generate the `block-attributes.ts` source for a single block.
+ *
+ * The output is hand-emitted to be byte-identical to the repo prettier config
+ * (no semicolons, single quotes, 2-space indent, LF line endings, trailing
+ * newline) without a runtime prettier dependency.
+ */
+declare function generateBlockAttributeTypes(blockJson: BlockJsonInput): GeneratedBlockTypes;
+
 /**
  * StrataWP Vite Plugin
  *
@@ -353,4 +457,4 @@ declare const strataWPUnoPreset: any;
  */
 declare function strataWP(options?: StrataWPPluginOptions): Plugin[];
 
-export { type AssetOptions, type BlockMetadata, type BlockOptions, type CriticalCSSOptions, type DesignSystemOptions, type LazyLoadingOptions, type ManifestEntry, type ManifestOptions, type PerformanceOptions, type PhpHmrOptions, type PreloadOptions, type StrataWPPluginOptions, type WordPressManifest, strataWP, strataWPAssets, strataWPBlocks, strataWPDesignSystem, strataWPManifest, strataWPPerformance, strataWPPhpHmr, strataWPTailwindPreset, strataWPUnoPreset };
+export { type AssetOptions, type BlockAttributeSchema, type BlockJsonInput, type BlockMetadata, type BlockOptions, type CriticalCSSOptions, type DesignSystemOptions, type GeneratedBlockTypes, type ImageOptions, type LazyLoadingOptions, type ManifestEntry, type ManifestOptions, type PerformanceOptions, type PhpHmrOptions, type PreloadOptions, type StrataWPPluginOptions, type UpdateNotificationOptions, type WordPressManifest, generateBlockAttributeTypes, strataWP, strataWPAssets, strataWPBlocks, strataWPDesignSystem, strataWPManifest, strataWPPerformance, strataWPPhpHmr, strataWPTailwindPreset, strataWPUnoPreset };

package/dist/index.js

@@ -10,6 +10,58 @@ import fg from "fast-glob";
 import { readFile, writeFile } from "fs/promises";
 import { join, dirname, relative } from "path";
 import pc from "picocolors";
+
+// src/plugins/block-types.ts
+function mapJsonTypeToTs(jsonType) {
+  switch (jsonType) {
+    case "string":
+      return "string";
+    case "number":
+    case "integer":
+      return "number";
+    case "boolean":
+      return "boolean";
+    case "array":
+      return "unknown[]";
+    case "object":
+      return "Record<string, unknown>";
+    default:
+      return "unknown";
+  }
+}
+function pascalCaseFromBlockName(blockName) {
+  const slug = blockName.includes("/") ? blockName.split("/").pop() : blockName;
+  return slug.split(/[^a-zA-Z0-9]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function generateBlockAttributeTypes(blockJson) {
+  const blockName = blockJson.name ?? "block";
+  const interfaceName = `${pascalCaseFromBlockName(blockName)}Attributes`;
+  const attributes = blockJson.attributes ?? {};
+  const sortedKeys = Object.keys(attributes).sort();
+  const members = sortedKeys.map((key) => {
+    const schema = attributes[key] ?? {};
+    const tsType = mapJsonTypeToTs(typeof schema.type === "string" ? schema.type : void 0);
+    const optional = Object.prototype.hasOwnProperty.call(schema, "default") ? "" : "?";
+    return `  ${key}${optional}: ${tsType}`;
+  });
+  const body = members.length > 0 ? `{
+${members.join("\n")}
+}` : "{}";
+  const content = `/**
+ * AUTO-GENERATED by @stratawp/vite-plugin from block.json \u2014 do not edit.
+ *
+ * Regenerate by building the theme (\`pnpm build\`). The committed copy is
+ * verified by the \`contracts:types:check\` drift gate.
+ *
+ * Block: ${blockName}
+ */
+
+export interface ${interfaceName} ${body}
+`;
+  return { fileName: "block-attributes.ts", content };
+}
+
+// src/plugins/blocks.ts
 function strataWPBlocks(options = {}) {
   const {
     dir = "src/blocks",
@@ -29,6 +81,7 @@ function strataWPBlocks(options = {}) {
         cwd: rootDir,
         absolute: true
       });
+      blockJsonFiles.sort();
       blocks = [];
       for (const blockJsonPath of blockJsonFiles) {
         try {
@@ -59,6 +112,29 @@ function strataWPBlocks(options = {}) {
       const outputPath = join(rootDir, "inc/blocks-generated.php");
       await writeFile(outputPath, phpCode, "utf-8");
       console.log(pc.green(`  \u2713 Generated block registration: inc/blocks-generated.php`));
+      let typesWritten = 0;
+      for (const block of blocks) {
+        const blockData = block;
+        try {
+          const { fileName, content } = generateBlockAttributeTypes(block);
+          const typesPath = join(rootDir, blockData._dir, fileName);
+          let existing = null;
+          try {
+            existing = await readFile(typesPath, "utf-8");
+          } catch {
+            existing = null;
+          }
+          if (existing !== content) {
+            await writeFile(typesPath, content, "utf-8");
+            typesWritten++;
+          }
+        } catch {
+          this.warn(`Failed to generate attribute types for ${block.name}`);
+        }
+      }
+      if (typesWritten > 0) {
+        console.log(pc.green(`  \u2713 Generated block attribute types: ${typesWritten} file(s)`));
+      }
     },
     // Hot reload blocks during development
     configureServer(server) {
@@ -105,11 +181,7 @@ import { writeFile as writeFile2 } from "fs/promises";
 import { join as join2, dirname as dirname2 } from "path";
 import { mkdir } from "fs/promises";
 function strataWPManifest(options = {}) {
-  const {
-    enabled = true,
-    output = "dist/.vite/manifest.json",
-    wordpress = true
-  } = options;
+  const { enabled = true, output = "dist/.vite/manifest.json", wordpress = true } = options;
   let rootDir;
   return {
     name: "stratawp:manifest",
@@ -173,11 +245,7 @@ function extractWordPressDependencies(code) {
 import { watch } from "chokidar";
 import pc2 from "picocolors";
 function strataWPPhpHmr(options = {}) {
-  const {
-    enabled = true,
-    watch: patterns = ["**/*.php", "theme.json"],
-    debounce = 100
-  } = options;
+  const { enabled = true, watch: patterns = ["**/*.php", "theme.json"], debounce = 100 } = options;
   let server;
   let watcher = null;
   let timeout = null;
@@ -191,11 +259,11 @@ function strataWPPhpHmr(options = {}) {
         persistent: true,
         ignoreInitial: true
       });
-      watcher.on("change", (path5) => {
+      watcher.on("change", (path6) => {
         if (timeout) clearTimeout(timeout);
         timeout = setTimeout(() => {
           console.log(pc2.cyan(`
-  \u2692\uFE0F  PHP file changed: ${pc2.dim(path5)}`));
+  \u2692\uFE0F  PHP file changed: ${pc2.dim(path6)}`));
           console.log(pc2.cyan("  Reloading page...\n"));
           server.ws.send({
             type: "full-reload",
@@ -203,14 +271,14 @@ function strataWPPhpHmr(options = {}) {
           });
         }, debounce);
       });
-      watcher.on("add", (path5) => {
+      watcher.on("add", (path6) => {
         console.log(pc2.green(`
-  \u2692\uFE0F  New PHP file: ${pc2.dim(path5)}
+  \u2692\uFE0F  New PHP file: ${pc2.dim(path6)}
 `));
       });
-      watcher.on("unlink", (path5) => {
+      watcher.on("unlink", (path6) => {
         console.log(pc2.yellow(`
-  \u2692\uFE0F  PHP file removed: ${pc2.dim(path5)}
+  \u2692\uFE0F  PHP file removed: ${pc2.dim(path6)}
 `));
       });
       server.httpServer?.once("listening", () => {
@@ -233,11 +301,28 @@ function strataWPPhpHmr(options = {}) {
 }
 
 // src/plugins/assets.ts
+import fs from "fs";
+import path from "path";
+function copyIconsDir(srcDir, destDir) {
+  fs.mkdirSync(destDir, { recursive: true });
+  const entries = fs.readdirSync(srcDir, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path.join(srcDir, entry.name);
+    const destPath = path.join(destDir, entry.name);
+    if (entry.isDirectory()) {
+      copyIconsDir(srcPath, destPath);
+    } else if (entry.name.endsWith(".css")) {
+      let content = fs.readFileSync(srcPath, "utf-8");
+      content = content.replace(/url\(\s*['"]?\.\.\/fonts\//g, "url(./fonts/");
+      fs.writeFileSync(destPath, content, "utf-8");
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
 function strataWPAssets(options = {}) {
-  const {
-    publicDir = "dist",
-    baseUrl
-  } = options;
+  const { publicDir = "dist", baseUrl } = options;
+  let rootDir;
   return {
     name: "stratawp:assets",
     config() {
@@ -257,19 +342,43 @@ function strataWPAssets(options = {}) {
           sourcemap: true
         }
       };
+    },
+    configResolved(resolvedConfig) {
+      rootDir = resolvedConfig.root;
+    },
+    writeBundle() {
+      const iconsSrc = path.resolve(rootDir, "src/icons");
+      const iconsDest = path.resolve(rootDir, publicDir, "icons");
+      if (!fs.existsSync(iconsSrc)) {
+        return;
+      }
+      copyIconsDir(iconsSrc, iconsDest);
+    },
+    configureServer(server) {
+      const iconsSrc = path.resolve(rootDir, "src/icons");
+      if (!fs.existsSync(iconsSrc)) {
+        return;
+      }
+      server.watcher.add(iconsSrc);
+      server.watcher.on("change", (filePath) => {
+        if (filePath.startsWith(iconsSrc)) {
+          server.ws.send({ type: "full-reload", path: "*" });
+        }
+      });
+      server.watcher.on("add", (filePath) => {
+        if (filePath.startsWith(iconsSrc)) {
+          server.ws.send({ type: "full-reload", path: "*" });
+        }
+      });
     }
   };
 }
 
 // src/plugins/design-system.ts
-import path from "path";
-import fs from "fs";
+import path2 from "path";
+import fs2 from "fs";
 function strataWPDesignSystem(options = {}) {
-  const {
-    enabled = false,
-    framework = "none",
-    wordpressPresets = true
-  } = options;
+  const { enabled = false, framework = "none", wordpressPresets = true } = options;
   if (!enabled || framework === "none") {
     return {
       name: "stratawp:design-system",
@@ -284,11 +393,11 @@ function strataWPDesignSystem(options = {}) {
     },
     async config() {
       const root = process.cwd();
-      const tailwindConfig = path.join(root, "tailwind.config.js");
-      const tailwindConfigTs = path.join(root, "tailwind.config.ts");
-      const unoConfig = path.join(root, "uno.config.ts");
-      const hasTailwindConfig = fs.existsSync(tailwindConfig) || fs.existsSync(tailwindConfigTs);
-      const hasUnoConfig = fs.existsSync(unoConfig);
+      const tailwindConfig = path2.join(root, "tailwind.config.js");
+      const tailwindConfigTs = path2.join(root, "tailwind.config.ts");
+      const unoConfig = path2.join(root, "uno.config.ts");
+      const hasTailwindConfig = fs2.existsSync(tailwindConfig) || fs2.existsSync(tailwindConfigTs);
+      const hasUnoConfig = fs2.existsSync(unoConfig);
       if (framework === "tailwind" && !hasTailwindConfig) {
         console.warn(
           "\u26A0\uFE0F  Tailwind CSS enabled but no config file found. Run: stratawp design-system:setup tailwind"
@@ -336,10 +445,10 @@ function strataWPDesignSystem(options = {}) {
     },
     async transform(code, id) {
       if (wordpressPresets && id.endsWith(".css") && (framework === "tailwind" || framework === "unocss")) {
-        const themeJsonPath = path.join(process.cwd(), "theme.json");
-        if (fs.existsSync(themeJsonPath)) {
+        const themeJsonPath = path2.join(process.cwd(), "theme.json");
+        if (fs2.existsSync(themeJsonPath)) {
           try {
-            const themeJson = JSON.parse(fs.readFileSync(themeJsonPath, "utf-8"));
+            const themeJson = JSON.parse(fs2.readFileSync(themeJsonPath, "utf-8"));
             if (themeJson.settings?.color?.palette) {
               let injectedVars = "\n/* WordPress Color Variables */\n:root {\n";
               themeJson.settings.color.palette.forEach((color) => {
@@ -359,8 +468,8 @@ function strataWPDesignSystem(options = {}) {
 }
 
 // src/plugins/critical-css.ts
-import path2 from "path";
-import fs2 from "fs";
+import path3 from "path";
+import fs3 from "fs";
 function strataWPCriticalCSS(options = {}) {
   const {
     enabled = true,
@@ -381,9 +490,9 @@ function strataWPCriticalCSS(options = {}) {
     apply: "build",
     async closeBundle() {
       const root = process.cwd();
-      const distDir = path2.join(root, "dist");
-      const templatesDir = path2.join(root, "templates");
-      const outputDir = path2.join(root, output);
+      const distDir = path3.join(root, "dist");
+      const templatesDir = path3.join(root, "templates");
+      const outputDir = path3.join(root, output);
       let critical;
       try {
         critical = __require("critical");
@@ -393,11 +502,11 @@ function strataWPCriticalCSS(options = {}) {
         );
         return;
       }
-      if (!fs2.existsSync(outputDir)) {
-        fs2.mkdirSync(outputDir, { recursive: true });
+      if (!fs3.existsSync(outputDir)) {
+        fs3.mkdirSync(outputDir, { recursive: true });
       }
       console.log("\u{1F4E6} Extracting critical CSS...");
-      const cssFiles = fs2.readdirSync(path2.join(distDir, "css")).filter((f) => f.endsWith(".css")).map((f) => path2.join(distDir, "css", f));
+      const cssFiles = fs3.readdirSync(path3.join(distDir, "css")).filter((f) => f.endsWith(".css")).map((f) => path3.join(distDir, "css", f));
       if (cssFiles.length === 0) {
         console.warn("  No CSS files found to extract critical CSS from");
         return;
@@ -405,8 +514,8 @@ function strataWPCriticalCSS(options = {}) {
       const mainCss = cssFiles[0];
       const criticalResults = {};
       for (const template of templates) {
-        const templatePath = path2.join(templatesDir, `${template}.html`);
-        if (!fs2.existsSync(templatePath)) {
+        const templatePath = path3.join(templatesDir, `${template}.html`);
+        if (!fs3.existsSync(templatePath)) {
           console.warn(`  Template ${template}.html not found, skipping`);
           continue;
         }
@@ -422,8 +531,8 @@ function strataWPCriticalCSS(options = {}) {
           });
           if (result.css && result.css.length > minSize) {
             criticalResults[template] = result.css;
-            const criticalPath = path2.join(outputDir, `${template}-critical.css`);
-            fs2.writeFileSync(criticalPath, result.css);
+            const criticalPath = path3.join(outputDir, `${template}-critical.css`);
+            fs3.writeFileSync(criticalPath, result.css);
             console.log(`  \u2713 ${template}: ${(result.css.length / 1024).toFixed(2)}KB`);
           }
         } catch (error) {
@@ -435,9 +544,9 @@ function strataWPCriticalCSS(options = {}) {
   };
 }
 async function generatePHPLoader(root, criticalResults, inline) {
-  const incDir = path2.join(root, "inc");
-  if (!fs2.existsSync(incDir)) {
-    fs2.mkdirSync(incDir, { recursive: true });
+  const incDir = path3.join(root, "inc");
+  if (!fs3.existsSync(incDir)) {
+    fs3.mkdirSync(incDir, { recursive: true });
   }
   let phpContent = `<?php
 /**
@@ -496,308 +605,247 @@ function load_critical_css(): void {
 // Hook into wp_head with high priority
 add_action('wp_head', __NAMESPACE__ . '\\load_critical_css', 1);
 `;
-  fs2.writeFileSync(path2.join(incDir, "critical-css-generated.php"), phpContent);
+  fs3.writeFileSync(path3.join(incDir, "critical-css-generated.php"), phpContent);
   console.log("  \u2713 Generated inc/critical-css-generated.php");
 }
 
-// src/plugins/lazy-loading.ts
-import path3 from "path";
-import fs3 from "fs";
-function strataWPLazyLoading(options = {}) {
+// src/plugins/images.ts
+import path4 from "path";
+import { stat, mkdir as mkdir2, readFile as readFile2, writeFile as writeFile3, copyFile } from "fs/promises";
+import fg2 from "fast-glob";
+import sharp from "sharp";
+import { optimize as svgoOptimize } from "svgo";
+function strataWPImages(options = {}) {
   const {
     enabled = true,
-    images = "native",
-    css = true,
-    chunks = true
+    src = "src/images",
+    dest = "dist/images",
+    webp = true,
+    quality = {}
   } = options;
-  if (!enabled) {
-    return {
-      name: "stratawp:lazy-loading",
-      apply: () => false
-    };
-  }
+  const formats = (options.formats ?? ["avif", "webp"]).filter(
+    (format) => !(format === "webp" && webp === false)
+  );
+  const jpegQuality = quality.jpeg ?? 75;
+  const pngQuality = quality.png ?? 80;
+  const siblingQuality = { avif: quality.avif ?? 50, webp: quality.webp ?? 75 };
+  let root = process.cwd();
   return {
-    name: "stratawp:lazy-loading",
+    name: "stratawp:images",
     apply: "build",
-    config() {
-      if (chunks) {
-        return {
-          build: {
-            rollupOptions: {
-              output: {
-                manualChunks: (id) => {
-                  if (id.includes("node_modules")) {
-                    return "vendor";
-                  }
-                  if (id.includes("@wordpress/")) {
-                    return "wordpress";
-                  }
-                }
-              }
+    configResolved(config) {
+      root = config.root;
+    },
+    async closeBundle() {
+      if (!enabled) {
+        return;
+      }
+      const srcRoot = path4.resolve(root, src);
+      const destRoot = path4.resolve(root, dest);
+      const files = await fg2("**/*.{jpg,jpeg,png,gif,svg}", {
+        cwd: srcRoot,
+        caseSensitiveMatch: false,
+        onlyFiles: true
+      });
+      for (const rel of files) {
+        const srcFile = path4.join(srcRoot, rel);
+        const destFile = path4.join(destRoot, rel);
+        const ext = path4.extname(rel).toLowerCase();
+        await mkdir2(path4.dirname(destFile), { recursive: true });
+        if (await isNewer(srcFile, destFile)) {
+          try {
+            if (ext === ".svg") {
+              const code = await readFile2(srcFile, "utf8");
+              const result = svgoOptimize(code, {
+                multipass: true,
+                plugins: [
+                  { name: "preset-default", params: { overrides: { removeViewBox: false } } }
+                ]
+              });
+              await writeFile3(destFile, result.data, "utf8");
+            } else if (ext === ".jpg" || ext === ".jpeg") {
+              await sharp(srcFile, { sequentialRead: true }).rotate().jpeg({ quality: jpegQuality, mozjpeg: true, progressive: true }).toFile(destFile);
+            } else if (ext === ".png") {
+              await sharp(srcFile, { sequentialRead: true }).rotate().png({ quality: pngQuality, compressionLevel: 9, adaptiveFiltering: true }).toFile(destFile);
+            } else {
+              await copyFile(srcFile, destFile);
             }
+          } catch {
+            await copyFile(srcFile, destFile);
           }
-        };
+        }
+        if (ext === ".jpg" || ext === ".jpeg" || ext === ".png") {
+          for (const format of formats) {
+            const siblingFile = destFile.replace(/\.[^.]+$/i, `.${format}`);
+            if (!await isNewer(srcFile, siblingFile)) {
+              continue;
+            }
+            try {
+              const pipeline = sharp(srcFile, { sequentialRead: true });
+              const buffer = await (format === "avif" ? pipeline.avif({ quality: siblingQuality.avif }) : pipeline.webp({ quality: siblingQuality.webp })).toBuffer();
+              await writeFile3(siblingFile, buffer);
+            } catch (error) {
+              console.warn(
+                `[stratawp:images] skipped ${format} for ${rel}: ${error instanceof Error ? error.message : String(error)}`
+              );
+            }
+          }
+        }
       }
-      return {};
-    },
-    async closeBundle() {
-      const root = process.cwd();
-      await generatePHPUtilities(root, images, css);
     }
   };
 }
-async function generatePHPUtilities(root, images, css) {
-  const incDir = path3.join(root, "inc");
-  if (!fs3.existsSync(incDir)) {
-    fs3.mkdirSync(incDir, { recursive: true });
+async function isNewer(src, dest) {
+  try {
+    const [s, d] = await Promise.all([stat(src), stat(dest)]);
+    return s.mtimeMs > d.mtimeMs;
+  } catch {
+    return true;
   }
-  let phpContent = `<?php
-/**
- * Lazy Loading Utilities
- *
- * Auto-generated by StrataWP
- * DO NOT EDIT MANUALLY
- */
-
-namespace StrataWP;
-
-`;
-  if (images !== "none") {
-    phpContent += `/**
- * Add loading="lazy" to images
- */
-function add_lazy_loading_to_images( $content ) {
-    if ( is_admin() || is_feed() ) {
-        return $content;
-    }
-
-    // Add loading="lazy" to img tags that don't have it
-    $content = preg_replace(
-        '/<img(?![^>]*loading=)([^>]*)>/i',
-        '<img loading="lazy"$1>',
-        $content
-    );
-
-    return $content;
 }
 
-add_filter( 'the_content', __NAMESPACE__ . '\\add_lazy_loading_to_images', 20 );
-add_filter( 'post_thumbnail_html', __NAMESPACE__ . '\\add_lazy_loading_to_images', 20 );
-
-`;
+// src/plugins/performance.ts
+function strataWPPerformance(options = {}) {
+  const plugins = [];
+  if (options.criticalCSS === true || typeof options.criticalCSS === "object") {
+    const criticalOptions = typeof options.criticalCSS === "object" ? options.criticalCSS : { enabled: true };
+    plugins.push(strataWPCriticalCSS(criticalOptions));
   }
-  if (css) {
-    phpContent += `/**
- * Lazy load non-critical CSS
- */
-function lazy_load_css( $html, $handle, $href, $media ) {
-    // Skip critical CSS
-    if ( strpos( $handle, 'critical' ) !== false ) {
-        return $html;
-    }
-
-    // Change media to "print" and add onload to switch to "all"
-    $html = str_replace(
-        "media='{$media}'",
-        "media='print' onload=\\"this.media='all'; this.onload=null;\\"",
-        $html
-    );
-
-    // Add noscript fallback
-    $noscript = sprintf(
-        '<noscript><link rel="stylesheet" href="%s" media="%s"></noscript>',
-        esc_url( $href ),
-        esc_attr( $media )
-    );
-
-    return $html . $noscript;
-}
-
-// Uncomment to enable CSS lazy loading
-// add_filter( 'style_loader_tag', __NAMESPACE__ . '\\lazy_load_css', 10, 4 );
-
-`;
+  if (options.images !== false) {
+    const imageOptions = typeof options.images === "object" ? options.images : {};
+    plugins.push(strataWPImages(imageOptions));
   }
-  phpContent += `/**
- * Preconnect to external domains
- */
-function add_resource_hints( $urls, $relation_type ) {
-    if ( 'preconnect' === $relation_type ) {
-        $urls[] = array(
-            'href' => 'https://fonts.googleapis.com',
-            'crossorigin',
-        );
-        $urls[] = array(
-            'href' => 'https://fonts.gstatic.com',
-            'crossorigin',
-        );
-    }
-
-    return $urls;
-}
-
-add_filter( 'wp_resource_hints', __NAMESPACE__ . '\\add_resource_hints', 10, 2 );
-`;
-  fs3.writeFileSync(path3.join(incDir, "lazy-loading-generated.php"), phpContent);
-  console.log("  \u2713 Generated inc/lazy-loading-generated.php");
+  return plugins;
 }
 
-// src/plugins/preload.ts
-import path4 from "path";
+// src/utils/update-checker.ts
 import fs4 from "fs";
-function strataWPPreload(options = {}) {
-  const {
-    enabled = true,
-    assets = ["fonts", "critical-css"],
-    strategy = "link-tag"
-  } = options;
-  if (!enabled) {
-    return {
-      name: "stratawp:preload",
-      apply: () => false
-    };
-  }
-  return {
-    name: "stratawp:preload",
-    apply: "build",
-    async closeBundle() {
-      const root = process.cwd();
-      await generatePHPPreloader(root, assets, strategy);
+import path5 from "path";
+import os from "os";
+import semver from "semver";
+var CACHE_TTL_MS = 60 * 60 * 1e3;
+var STRATAWP_SCOPE = "@stratawp/";
+var REGISTRY_URL = "https://registry.npmjs.org";
+function getCachePath() {
+  return path5.join(os.homedir(), ".stratawp", "update-cache.json");
+}
+function loadCache() {
+  try {
+    const cachePath = getCachePath();
+    if (!fs4.existsSync(cachePath)) {
+      return null;
     }
-  };
+    const cacheContent = fs4.readFileSync(cachePath, "utf-8");
+    return JSON.parse(cacheContent);
+  } catch {
+    return null;
+  }
 }
-async function generatePHPPreloader(root, assets, strategy) {
-  const incDir = path4.join(root, "inc");
-  if (!fs4.existsSync(incDir)) {
-    fs4.mkdirSync(incDir, { recursive: true });
+function saveCache(cache) {
+  try {
+    const cachePath = getCachePath();
+    const cacheDir = path5.dirname(cachePath);
+    if (!fs4.existsSync(cacheDir)) {
+      fs4.mkdirSync(cacheDir, { recursive: true });
+    }
+    fs4.writeFileSync(cachePath, JSON.stringify(cache, null, 2));
+  } catch {
   }
-  let phpContent = `<?php
-/**
- * Asset Preloader
- *
- * Auto-generated by StrataWP
- * DO NOT EDIT MANUALLY
- */
-
-namespace StrataWP;
-
-/**
- * Preload critical assets
- */
-function preload_assets(): void {
-    $preloads = array();
-
-`;
-  if (assets.includes("fonts")) {
-    phpContent += `    // Preload fonts
-    $font_dir = get_template_directory() . '/dist/fonts';
-    $font_url = get_template_directory_uri() . '/dist/fonts';
-
-    if ( is_dir( $font_dir ) ) {
-        $fonts = glob( $font_dir . '/*.{woff2,woff}', GLOB_BRACE );
-        foreach ( $fonts as $font ) {
-            $font_name = basename( $font );
-            $preloads[] = sprintf(
-                '<link rel="preload" href="%s/%s" as="font" type="font/%s" crossorigin>',
-                esc_url( $font_url ),
-                esc_attr( $font_name ),
-                esc_attr( pathinfo( $font, PATHINFO_EXTENSION ) )
-            );
-        }
+}
+async function fetchLatestVersion(packageName) {
+  try {
+    const encodedName = packageName.replace("/", "%2F");
+    const url = `${REGISTRY_URL}/${encodedName}`;
+    const response = await fetch(url, {
+      headers: {
+        Accept: "application/json"
+      }
+    });
+    if (!response.ok) {
+      return null;
     }
-
-`;
+    const data = await response.json();
+    return data["dist-tags"]?.latest || null;
+  } catch {
+    return null;
   }
-  if (assets.includes("critical-css")) {
-    phpContent += `    // Preload critical CSS
-    $critical_dir = get_template_directory() . '/dist/critical';
-    $critical_url = get_template_directory_uri() . '/dist/critical';
-
-    if ( is_dir( $critical_dir ) ) {
-        $template_name = is_singular() ? 'single' : 'index';
-        $critical_file = $critical_dir . '/' . $template_name . '-critical.css';
-
-        if ( file_exists( $critical_file ) ) {
-            $preloads[] = sprintf(
-                '<link rel="preload" href="%s/%s-critical.css" as="style">',
-                esc_url( $critical_url ),
-                esc_attr( $template_name )
-            );
+}
+function readInstalledPackages(packageJsonPath) {
+  if (!fs4.existsSync(packageJsonPath)) {
+    return {};
+  }
+  try {
+    const packageJson = JSON.parse(fs4.readFileSync(packageJsonPath, "utf-8"));
+    const installed = {};
+    if (packageJson.dependencies) {
+      for (const [name, version] of Object.entries(packageJson.dependencies)) {
+        if (name.startsWith(STRATAWP_SCOPE) && typeof version === "string") {
+          installed[name] = version.replace(/^[\^~>=<]+/, "");
         }
+      }
     }
-
-`;
-  }
-  if (assets.includes("critical-js")) {
-    phpContent += `    // Preload critical JavaScript
-    $manifest_file = get_template_directory() . '/dist/.vite/manifest.json';
-
-    if ( file_exists( $manifest_file ) ) {
-        $manifest = json_decode( file_get_contents( $manifest_file ), true );
-
-        foreach ( $manifest as $entry ) {
-            if ( isset( $entry['isEntry'] ) && $entry['isEntry'] ) {
-                $preloads[] = sprintf(
-                    '<link rel="modulepreload" href="%s/%s">',
-                    esc_url( get_template_directory_uri() . '/dist' ),
-                    esc_attr( $entry['file'] )
-                );
-                break; // Only preload main entry
-            }
+    if (packageJson.devDependencies) {
+      for (const [name, version] of Object.entries(packageJson.devDependencies)) {
+        if (name.startsWith(STRATAWP_SCOPE) && typeof version === "string") {
+          installed[name] = version.replace(/^[\^~>=<]+/, "");
         }
+      }
     }
-
-`;
+    return installed;
+  } catch {
+    return {};
   }
-  phpContent += `    // Output preload tags
-    foreach ( $preloads as $preload ) {
-        echo $preload . "
-";
-    }
-}
-
-add_action( 'wp_head', __NAMESPACE__ . '\\preload_assets', 2 );
-
-/**
- * DNS prefetch for external resources
- */
-function dns_prefetch(): void {
-    $domains = array(
-        '//fonts.googleapis.com',
-        '//fonts.gstatic.com',
-    );
-
-    foreach ( $domains as $domain ) {
-        printf(
-            '<link rel="dns-prefetch" href="%s">' . "
-",
-            esc_url( $domain )
-        );
-    }
 }
-
-add_action( 'wp_head', __NAMESPACE__ . '\\dns_prefetch', 1 );
-`;
-  fs4.writeFileSync(path4.join(incDir, "preload-generated.php"), phpContent);
-  console.log("  \u2713 Generated inc/preload-generated.php");
-}
-
-// src/plugins/performance.ts
-function strataWPPerformance(options = {}) {
-  const plugins = [];
-  if (options.criticalCSS !== false) {
-    const criticalOptions = typeof options.criticalCSS === "object" ? options.criticalCSS : { enabled: true };
-    plugins.push(strataWPCriticalCSS(criticalOptions));
-  }
-  if (options.lazyLoading !== false) {
-    const lazyOptions = typeof options.lazyLoading === "object" ? options.lazyLoading : { enabled: true };
-    plugins.push(strataWPLazyLoading(lazyOptions));
-  }
-  if (options.preload !== false) {
-    const preloadOptions = typeof options.preload === "object" ? options.preload : { enabled: true };
-    plugins.push(strataWPPreload(preloadOptions));
+async function checkForUpdates(root) {
+  const packageJsonPath = path5.join(root, "package.json");
+  const installedPackages = readInstalledPackages(packageJsonPath);
+  const packageNames = Object.keys(installedPackages);
+  if (packageNames.length === 0) {
+    return null;
   }
-  return plugins;
+  const cache = loadCache();
+  const newCache = {
+    packages: cache?.packages || {},
+    lastCheck: Date.now()
+  };
+  const updates = [];
+  await Promise.all(
+    packageNames.map(async (name) => {
+      const current = installedPackages[name];
+      let latest = null;
+      const cached = cache?.packages[name];
+      if (cached && Date.now() - cached.fetchedAt < CACHE_TTL_MS) {
+        latest = cached.version;
+      } else {
+        latest = await fetchLatestVersion(name);
+        if (latest) {
+          newCache.packages[name] = {
+            version: latest,
+            fetchedAt: Date.now()
+          };
+        }
+      }
+      if (latest && semver.lt(current, latest)) {
+        updates.push({ name, current, latest });
+      }
+    })
+  );
+  saveCache(newCache);
+  return updates.length > 0 ? updates : null;
+}
+function checkForUpdatesAsync(logger, root) {
+  checkForUpdates(root).then((updates) => {
+    if (updates && updates.length > 0) {
+      logger.info("");
+      logger.info("  \x1B[33m\u{1F4E6} Updates available:\x1B[0m");
+      for (const update of updates) {
+        logger.info(`     ${update.name}: ${update.current} -> \x1B[32m${update.latest}\x1B[0m`);
+      }
+      logger.info("     Run `stratawp update` to update");
+      logger.info("");
+    }
+  }).catch(() => {
+  });
 }
 
 // src/integrations/tailwind-preset.ts
@@ -986,9 +1034,8 @@ function strataWP(options = {}) {
       framework: "none"
     },
     performance = {
-      criticalCSS: true,
-      lazyLoading: true,
-      preload: true
+      criticalCSS: false,
+      images: true
     }
   } = options;
   const plugins = [
@@ -1029,6 +1076,14 @@ function strataWPCore(_options) {
                   return "fonts/[name].[hash][extname]";
                 }
                 return "assets/[name].[hash][extname]";
+              },
+              manualChunks: (id) => {
+                if (id.includes("@wordpress/")) {
+                  return "wordpress";
+                }
+                if (id.includes("node_modules")) {
+                  return "vendor";
+                }
               }
             }
           }
@@ -1052,17 +1107,21 @@ function strataWPCore(_options) {
     configureServer(server) {
       server.httpServer?.once("listening", () => {
         setTimeout(() => {
-          const { logger } = config;
+          const { logger, root } = config;
           logger.info("\n  \u26A1 StrataWP Dev Server Ready!\n");
           logger.info("  WordPress integration active");
           logger.info("  Block auto-discovery enabled");
           logger.info("  PHP HMR watching for changes\n");
+          if (_options.updateNotification?.enabled !== false) {
+            checkForUpdatesAsync(logger, root);
+          }
         }, 100);
       });
     }
   };
 }
 export {
+  generateBlockAttributeTypes,
   strataWP,
   strataWPAssets,
   strataWPBlocks,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stratawp/vite-plugin",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Vite plugin for WordPress theme development with StrataWP",
   "author": "Jon Imms",
   "license": "GPL-3.0-or-later",
@@ -33,26 +33,32 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
-    "test": "vitest",
-    "lint": "eslint src",
-    "clean": "rm -rf dist"
-  },
   "dependencies": {
     "chokidar": "^3.5.3",
     "fast-glob": "^3.3.2",
     "picocolors": "^1.0.0",
+    "semver": "^7.5.4",
+    "sharp": "^0.33.5",
+    "svgo": "^3.3.2",
     "vite": "^5.0.10"
   },
   "devDependencies": {
     "@types/node": "^20.10.5",
+    "@types/semver": "^7.5.8",
+    "@vitest/coverage-v8": "^1.0.4",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
     "vitest": "^1.0.4"
   },
   "peerDependencies": {
     "vite": "^5.0.0"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "clean": "rm -rf dist"
   }
-}
+}