@kispace-io/gs-lib 1.1.4 → 1.1.6

package/dist/pwa/sw.js

@@ -95,4 +95,19 @@ const updateName = async (event) => {
 // Hashed filenames from esbuild naturally handle cache invalidation
 // When content changes, esbuild generates a new hash, so the browser automatically fetches the new file
 const manifest = self.__WB_MANIFEST || [];
-workbox.precaching.precacheAndRoute(manifest);
+workbox.precaching.precacheAndRoute(manifest);
+
+// Use NetworkFirst for index.html and manifest.json to always fetch the latest version
+// These files change with each build (index.html references new hashed app.js, manifest.json has new version)
+// NetworkFirst ensures we get the latest versions while still working offline
+workbox.routing.registerRoute(
+    ({ url }) => {
+        const pathname = url.pathname;
+        return pathname === '/' || 
+               pathname.endsWith('/index.html') || 
+               pathname.endsWith('/manifest.json');
+    },
+    new workbox.strategies.NetworkFirst({
+        cacheName: 'html-manifest-cache'
+    })
+);

package/lib/node-map-builder.ts

@@ -59,8 +59,8 @@ export async function createNodeResolvePlugin(projectRoot: string, gsLibPath: st
         name: 'node-resolve',
         setup(build: any) {
             build.onResolve({ filter: /.*/ }, (args: any) => {
-                // Skip external URLs
-                if (args.path.startsWith('http://') || args.path.startsWith('https://')) {
+                // Skip external URLs and data URLs
+                if (args.path.startsWith('http://') || args.path.startsWith('https://') || args.path.startsWith('data:')) {
                     return
                 }
                 
@@ -95,7 +95,16 @@ export async function createNodeResolvePlugin(projectRoot: string, gsLibPath: st
                 try {
                     const contents = await fs.readFile(args.path, 'utf-8')
                     const ext = path.extname(args.path)
-                    const loader = ext === '.ts' ? 'ts' : ext === '.js' ? 'js' : ext === '.json' ? 'json' : 'js'
+                    let loader = 'js'
+                    if (ext === '.ts') {
+                        loader = 'ts'
+                    } else if (ext === '.js') {
+                        loader = 'js'
+                    } else if (ext === '.json') {
+                        loader = 'json'
+                    } else if (ext === '.css') {
+                        loader = 'css'
+                    }
                     return { contents, loader }
                 } catch (error: any) {
                     throw new Error(`Failed to load ${args.path}: ${error.message}`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kispace-io/gs-lib",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "type": "module",
   "license": "EPL-2.0",
   "repository": {

package/public/pwa/sw.js

@@ -95,4 +95,19 @@ const updateName = async (event) => {
 // Hashed filenames from esbuild naturally handle cache invalidation
 // When content changes, esbuild generates a new hash, so the browser automatically fetches the new file
 const manifest = self.__WB_MANIFEST || [];
-workbox.precaching.precacheAndRoute(manifest);
+workbox.precaching.precacheAndRoute(manifest);
+
+// Use NetworkFirst for index.html and manifest.json to always fetch the latest version
+// These files change with each build (index.html references new hashed app.js, manifest.json has new version)
+// NetworkFirst ensures we get the latest versions while still working offline
+workbox.routing.registerRoute(
+    ({ url }) => {
+        const pathname = url.pathname;
+        return pathname === '/' || 
+               pathname.endsWith('/index.html') || 
+               pathname.endsWith('/manifest.json');
+    },
+    new workbox.strategies.NetworkFirst({
+        cacheName: 'html-manifest-cache'
+    })
+);

package/src/base-map-builder.ts

@@ -68,6 +68,7 @@ export function generateAppJs(vars: {
     
     return `
 import {gsLib} from "${vars.gsLibPath}"
+import "./gs-lib/gs-lib.css"
 
 ${scriptImports.join('\n')}
 
@@ -136,21 +137,25 @@ export function processManifest(content: string, title: string, version: string)
 }
 
 /**
- * Process HTML template by replacing title placeholder and app.js reference
+ * Process HTML template by replacing title placeholder, app.js reference, and app.css reference
  */
-export function processHtml(content: string, title: string, appJsFilename?: string): string {
+export function processHtml(content: string, title: string, appJsFilename?: string, appCssFilename?: string): string {
     let processed = content.replace(/\$TITLE/g, title)
     if (appJsFilename) {
         // Replace the app.js import with the hashed filename
         processed = processed.replace(/\.\/app\.js/g, `./${appJsFilename}`)
     }
+    if (appCssFilename) {
+        // Replace the app.css reference with the hashed filename
+        processed = processed.replace(/href=["']app\.css["']/g, `href="${appCssFilename}"`)
+    }
     return processed
 }
 
 /**
  * Bundle the application code using esbuild with hashed filenames
  * @param esbuildInstance - The esbuild instance to use (esbuild-wasm for browser, esbuild for Node.js)
- * @returns The actual output filename with hash
+ * @returns Object with both JS and CSS filenames (CSS may be null if not generated)
  */
 export async function bundleApp(
     entryPointPath: string,
@@ -162,7 +167,7 @@ export async function bundleApp(
     progress?: ProgressCallback,
     currentStep?: { value: number },
     totalSteps?: number
-): Promise<string> {
+): Promise<{ js: string; css: string | null }> {
     const updateProgress = (message: string) => {
         if (progress) {
             if (currentStep !== undefined) {
@@ -197,28 +202,32 @@ export async function bundleApp(
         throw new Error('No output files generated by esbuild')
     }
     
-    // Write all output files and find the main entry file
+    // Write all output files and find the main entry file and CSS file
     let mainOutputFile: string | null = null
+    let cssOutputFile: string | null = null
     
     // Try to use metafile to find the entry point output
     if (result.metafile && result.metafile.outputs) {
         // Find the output file that corresponds to our entry point
         const entryName = 'app' // Our entry point is app.js
         for (const [outputPath, output] of Object.entries(result.metafile.outputs)) {
-            if (output && typeof output === 'object' && 'entryPoint' in output && outputPath.includes(entryName) && outputPath.endsWith('.js')) {
-                mainOutputFile = outputPath
-                break
+            if (output && typeof output === 'object' && 'entryPoint' in output) {
+                if (outputPath.includes(entryName) && outputPath.endsWith('.js')) {
+                    mainOutputFile = outputPath
+                } else if (outputPath.endsWith('.css')) {
+                    cssOutputFile = outputPath
+                }
             }
         }
     }
     
-    // Write output files and find the main entry file (fallback if metafile didn't work)
+    // Write output files and find the main entry file and CSS (fallback if metafile didn't work)
+    const path = await import('path')
     for (const file of result.outputFiles) {
         let filePath = file.path || ''
         
         // esbuild returns paths relative to outdir, but may be absolute
         // Extract just the filename if it's a full path, or use as-is if relative
-        const path = await import('path')
         let relativePath: string
         let filename: string
         
@@ -238,6 +247,10 @@ export async function bundleApp(
         if (!mainOutputFile && filename.includes('app-') && filename.endsWith('.js')) {
             mainOutputFile = filename
         }
+        // CSS file will be named app-[hash].css
+        if (!cssOutputFile && filename.includes('app-') && filename.endsWith('.css')) {
+            cssOutputFile = filename
+        }
     }
     
     if (!mainOutputFile) {
@@ -245,8 +258,15 @@ export async function bundleApp(
     }
     
     // Extract filename from path (handle both / and \ separators)
-    const lastSlash = Math.max(mainOutputFile.lastIndexOf('/'), mainOutputFile.lastIndexOf('\\'))
-    return lastSlash >= 0 ? mainOutputFile.substring(lastSlash + 1) : mainOutputFile
+    const extractFilename = (filePath: string): string => {
+        const lastSlash = Math.max(filePath.lastIndexOf('/'), filePath.lastIndexOf('\\'))
+        return lastSlash >= 0 ? filePath.substring(lastSlash + 1) : filePath
+    }
+    
+    return {
+        js: extractFilename(mainOutputFile),
+        css: cssOutputFile ? extractFilename(cssOutputFile) : null
+    }
 }
 
 /**
@@ -435,7 +455,7 @@ export async function buildMap(
     updateProgress("Copying gs-lib package...")
     await Promise.all([
         gsLibCopier.copyTextFile('dist/index.js', `${buildDir}/gs-lib/index.js`),
-        gsLibCopier.copyTextFile('dist/gs-lib.css', `${outputDir}/app.css`)
+        gsLibCopier.copyTextFile('dist/gs-lib.css', `${buildDir}/gs-lib/gs-lib.css`)
     ])
     
     // Copy and process PWA files
@@ -472,21 +492,23 @@ export async function buildMap(
     
     // Bundle with hashed filenames
     const stepRef = { value: step }
-    const appJsFilename = await bundleApp(`${buildDir}/app.js`, outputDir, buildGsLibPath, fs, resolvePlugin, esbuildInstance, progress, stepRef, totalSteps)
+    const bundleResult = await bundleApp(`${buildDir}/app.js`, outputDir, buildGsLibPath, fs, resolvePlugin, esbuildInstance, progress, stepRef, totalSteps)
     step = stepRef.value
+    const appJsFilename = bundleResult.js
+    const appCssFilename = bundleResult.css
     
-    // Copy and process HTML with hashed app.js filename
+    // Copy and process HTML with hashed app.js and app.css filenames
     updateProgress("Generating HTML file...")
-    await gsLibCopier.copyTextFile('public/index.html', `${outputDir}/index.html`, (content) => processHtml(content, options.title, appJsFilename))
+    await gsLibCopier.copyTextFile('public/index.html', `${outputDir}/index.html`, (content) => processHtml(content, options.title, appJsFilename, appCssFilename || undefined))
     
     // Generate precache manifest after all assets are created
     // Hashed filenames naturally handle cache invalidation, so we can use null revision
     // For non-hashed assets, we can also use null since Workbox will check file content
+    // Note: index.html and manifest.json are NOT precached - they use NetworkFirst strategy
+    // This ensures the browser gets the latest versions that reference the current hashed app.js
     const precacheManifest: Array<{ url: string, revision: string | null }> = [
         { url: `/${appJsFilename}`, revision: null }, // Hashed filename handles versioning
-        { url: '/index.html', revision: null }, // HTML references hashed app.js, so it's versioned
-        { url: '/app.css', revision: null }, // Workbox will check file content
-        { url: '/manifest.json', revision: null }, // Workbox will check file content
+        ...(appCssFilename ? [{ url: `/${appCssFilename}`, revision: null }] : []), // Hashed CSS filename handles versioning
         ...iconFiles.map(icon => ({ url: `/assets/icons/${icon}`, revision: null })) // Workbox will check file content
     ]