ezfw-core 1.0.97 → 1.0.99

package/components/icon/icons.ts

@@ -1,9 +1,18 @@
 /**
  * Icon utilities
- * Imports icons from the app configuration
+ * Uses a registry pattern - icons are registered by the project's icons.config
  */
 
-import { ICONS } from '../../../app/config/icons.config.js';
+// Icon registry - populated by registerIcons()
+let ICONS: Record<string, string> = {};
+
+/**
+ * Register icons from project's icons.config.ts
+ * Called automatically by the framework entry point
+ */
+export function registerIcons(icons: Record<string, string>): void {
+    ICONS = { ...ICONS, ...icons };
+}
 
 /**
  * Get icon SVG content by name

package/core/ezEntryPlugin.js

@@ -38,11 +38,15 @@ function generateIndexCode(config, mode) {
         ? `import './ez/core/ez.js';
 import './ez-base.css';
 import './ez/themes/ez-theme.scss';
-import './ez/themes/ez-theme-slate.scss';`
+import './ez/themes/ez-theme-slate.scss';
+import { registerIcons } from './ez/components/icon/icons.js';
+import { ICONS } from './app/config/icons.config.js';`
         : `import 'ezfw-core';
 import 'ezfw-core/ez-base.css';
 import 'ezfw-core/themes/ez-theme.scss';
-import 'ezfw-core/themes/ez-theme-slate.scss';`;
+import 'ezfw-core/themes/ez-theme-slate.scss';
+import { registerIcons } from 'ezfw-core/components/icon/icons.js';
+import { ICONS } from './app/config/icons.config.js';`;
 
     // Framework module globs differ based on mode
     const fwModulesGlob = mode === 'local'
@@ -87,6 +91,7 @@ ${i18nCode}
 
 // Framework internals
 ez.defineStyles(stylesConfig);
+registerIcons(ICONS);
 
 ${fwModulesGlob}
 
@@ -151,11 +156,15 @@ function generateHydrateCode(config, mode) {
         ? `import './ez/core/ez.js';
 import './ez-base.css';
 import './ez/themes/ez-theme.scss';
-import './ez/themes/ez-theme-slate.scss';`
+import './ez/themes/ez-theme-slate.scss';
+import { registerIcons } from './ez/components/icon/icons.js';
+import { ICONS } from './app/config/icons.config.js';`
         : `import 'ezfw-core';
 import 'ezfw-core/ez-base.css';
 import 'ezfw-core/themes/ez-theme.scss';
-import 'ezfw-core/themes/ez-theme-slate.scss';`;
+import 'ezfw-core/themes/ez-theme-slate.scss';
+import { registerIcons } from 'ezfw-core/components/icon/icons.js';
+import { ICONS } from './app/config/icons.config.js';`;
 
     // Framework module globs differ based on mode
     const fwModulesGlob = mode === 'local'
@@ -200,6 +209,7 @@ ${i18nCode}
 
 // Framework internals
 ez.defineStyles(stylesConfig);
+registerIcons(ICONS);
 
 ${fwModulesGlob}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezfw-core",
-  "version": "1.0.97",
+  "version": "1.0.99",
   "description": "Ez Framework - A declarative component framework for building modern web applications",
   "type": "module",
   "main": "./core/ez.ts",

package/template/vite.config.ts

@@ -1,20 +1,38 @@
-// vite.config.ts - Ez Framework with unified routing
+// vite.config.ts - Ez Framework
 import { defineConfig, Plugin } from 'vite';
-import { ezIslands } from './ez/islands/ViteIslandsPlugin';
+import { ezEntry, ezIslands, ezJsx } from 'ezfw-core/vite';
 import * as fs from 'fs';
 import * as path from 'path';
 
-// Plugin to make non-critical CSS non-render-blocking
+// Plugin to inline critical CSS and make other CSS non-render-blocking
 function asyncCssPlugin(): Plugin {
     return {
         name: 'async-css',
         enforce: 'post',
         transformIndexHtml(html) {
-            // Transform CSS links for non-critical stylesheets to load async
-            return html.replace(
+            // Read and inline global.css (critical reset styles)
+            const globalCssPath = path.resolve(__dirname, 'public/global.css');
+            if (fs.existsSync(globalCssPath)) {
+                const globalCss = fs.readFileSync(globalCssPath, 'utf-8')
+                    .replace(/\/\*[\s\S]*?\*\//g, '')
+                    .replace(/\s+/g, ' ')
+                    .trim();
+                html = html.replace(
+                    /<!-- INLINE_GLOBAL_CSS -->/,
+                    `<style>${globalCss}</style>`
+                );
+            }
+            // Make main CSS async (ez.styles bundle)
+            html = html.replace(
+                /<link rel="stylesheet" crossorigin href="(\/assets\/ez\.styles[^"]+\.css)">/g,
+                '<link rel="stylesheet" href="$1" media="print" onload="this.media=\'all\'" crossorigin><noscript><link rel="stylesheet" href="$1" crossorigin></noscript>'
+            );
+            // Transform CSS links for non-critical component stylesheets
+            html = html.replace(
                 /<link rel="stylesheet" crossorigin href="(\/assets\/(EzToast|EzMask|EzTooltip|EzDialog|EzDrawer)[^"]+\.css)">/g,
                 '<link rel="stylesheet" href="$1" media="print" onload="this.media=\'all\'">'
             );
+            return html;
         }
     };
 }
@@ -26,16 +44,12 @@ function ssrPreviewPlugin(): Plugin {
         configurePreviewServer(server) {
             server.middlewares.use((req, res, next) => {
                 const url = req.url || '/';
-                // Skip assets and files with extensions
                 if (url.startsWith('/assets/') || url.includes('.')) {
                     return next();
                 }
 
-                // Try to find index.html in the subdirectory
                 const distPath = path.resolve(__dirname, 'dist');
                 let htmlPath = path.join(distPath, url, 'index.html');
-
-                // Normalize path for Windows
                 htmlPath = path.normalize(htmlPath);
 
                 if (fs.existsSync(htmlPath)) {
@@ -56,15 +70,21 @@ export default defineConfig({
     root: '.',
     appType: 'mpa',
     resolve: {
-        extensions: ['.ts', '.js', '.mjs', '.json']
+        extensions: ['.tsx', '.ts', '.jsx', '.js', '.mjs', '.json']
     },
     css: {
         modules: {
-            // Don't hash class names - SSR needs predictable names
             generateScopedName: '[local]'
+        },
+        preprocessorOptions: {
+            scss: {
+                api: 'modern-compiler'
+            }
         }
     },
     plugins: [
+        ezEntry(),
+        ezJsx(),
         asyncCssPlugin(),
         ssrPreviewPlugin(),
         ezIslands({
@@ -77,15 +97,15 @@ export default defineConfig({
         target: 'esnext',
         minify: 'esbuild',
         cssMinify: true,
+        outDir: 'dist',
         rollupOptions: {
             input: {
                 main: '/index.html',
                 hydrate: '/hydrate.js',
-                'islands-runtime': '/ez/islands/runtime.ts'
+                'islands-runtime': 'ezfw-core/islands/runtime'
             },
             output: {
                 entryFileNames: (chunkInfo) => {
-                    // Keep hydrate and islands-runtime without hash for SSR pages
                     if (chunkInfo.name === 'hydrate' || chunkInfo.name === 'islands-runtime') {
                         return `assets/${chunkInfo.name}.js`;
                     }
@@ -97,29 +117,16 @@ export default defineConfig({
     preview: {
         headers: {
             'Cache-Control': 'no-store',
-            // Security headers for Best Practices
             'X-Frame-Options': 'SAMEORIGIN',
             'X-Content-Type-Options': 'nosniff',
             'Referrer-Policy': 'strict-origin-when-cross-origin',
             'Cross-Origin-Opener-Policy': 'same-origin-allow-popups',
             'Cross-Origin-Embedder-Policy': 'credentialless',
-            'Permissions-Policy': 'geolocation=(), microphone=(), camera=()',
-            'Content-Security-Policy': [
-                "default-src 'self'",
-                "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://apis.google.com https://*.firebaseapp.com https://*.googleapis.com",
-                "style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com",
-                "font-src 'self' https://cdnjs.cloudflare.com https://fonts.gstatic.com",
-                "img-src 'self' data: https: blob:",
-                "connect-src 'self' https://*.googleapis.com https://*.firebaseio.com https://*.firebaseapp.com wss://*.firebaseio.com https://identitytoolkit.googleapis.com https://securetoken.googleapis.com",
-                "frame-src 'self' https://*.firebaseapp.com https://accounts.google.com",
-                "object-src 'none'",
-                "base-uri 'self'"
-            ].join('; ')
+            'Permissions-Policy': 'geolocation=(), microphone=(), camera=()'
         }
     },
     server: {
         headers: {
-            // Same headers for dev server
             'X-Frame-Options': 'SAMEORIGIN',
             'X-Content-Type-Options': 'nosniff',
             'Referrer-Policy': 'strict-origin-when-cross-origin',
@@ -127,7 +134,3 @@ export default defineConfig({
         }
     }
 });
-
-
-
-