Chunked bundling and lazy loading of components (#1001)

* Working chunked bundle * Refactor of bundle copy * Reverting accidental vscode changes * Removing example chunked bundle from bundle demo * explicit render example re introduced * Lowered bundle size * Fixing race condition with script loading * linting fix * npm run test:all fails due to exit 1 on client-exmaple-server * linting * Linting config * package lock bump? * removing stats.html * Removing new prettier config * New tsconfig changes * Potential working linting config * linting for root package.json
prosopo · Jan 29, 2024 · 652d6f1 · 652d6f1
1 parent 4542e9c
commit 652d6f1
Show file tree

Hide file tree

Showing 21 changed files with 1,619 additions and 25,562 deletions.
diff --git a/demos/client-bundle-example/src/index.html b/demos/client-bundle-example/src/index.html
@@ -3,7 +3,7 @@
     <head>
         <link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
         <title>Procaptcha demo: Simple page</title>
-        <script id="procaptchaScript" src="procaptcha.bundle.js" async defer></script>
+        <script id="procaptchaScript" type="module" src="procaptcha.bundle.js" async defer></script>
     </head>
     <body>
         <div class="mui-container">
@@ -27,20 +27,20 @@
                 <input type="submit" class="mui-btn mui-btn--raised" />
             </form>
         </div>
-        <script>
-            // A function that will call the render Procaptcha function when the procaptcha script has loaded
-            document.getElementById('procaptchaScript').addEventListener('load', function () {
-                // Define a callback function to be called when the CAPTCHA is verified
-                window.onCaptchaVerified = function (output) {
-                    console.log('Captcha verified, output: ' + JSON.stringify(output))
-                }
+        <script type="module">
+            // Pattern to avoid race condition between Procaptcha script loading and Procaptcha render function call
+            import { render } from './procaptcha.bundle.js'
 
-                // Render the CAPTCHA explicitly on a container with id "procaptcha-container"
-                window.procaptcha.render('procaptcha-container', {
-                    siteKey: '5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw',
-                    theme: 'dark',
-                    callback: 'onCaptchaVerified',
-                })
+            // Define a callback function to be called when the CAPTCHA is verified
+            window.onCaptchaVerified = function (output) {
+                console.log('Captcha verified, output: ' + JSON.stringify(output))
+            }
+
+            // Render the CAPTCHA explicitly on a container with id "procaptcha-container"
+            render('procaptcha-container', {
+                siteKey: '5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw',
+                theme: 'dark',
+                callback: 'onCaptchaVerified',
             })
         </script>
     </body>

diff --git a/demos/client-example-server/package.json b/demos/client-example-server/package.json
@@ -16,7 +16,6 @@
         "bundle:prod": "vite build --mode=production --config ./vite.config.ts",
         "bundle:dev": "vite build --mode=development --config ./vite.config.ts",
         "clean": "tsc --build --clean",
-        "test": "echo \"Error: no test specified\" && exit 1",
         "eslint": "npx eslint . --no-error-on-unmatched-pattern --ignore-path ../../.eslintignore",
         "eslint:fix": "npm run eslint -- --fix",
         "prettier": "npx prettier . --check --no-error-on-unmatched-pattern --ignore-path ../../.eslintignore",

diff --git a/dev/config/src/vite/vite-plugin-close-and-copy.ts b/dev/config/src/vite/vite-plugin-close-and-copy.ts
@@ -2,12 +2,14 @@ import { Plugin } from 'vite'
 import { getLogger } from '@prosopo/common'
 import fs from 'node:fs'
 import path from 'path'
-const log = getLogger(`Info`, `config.vite.vite-plugin-close.js`)
+
 export interface ClosePluginOptions {
     srcDir: string
     destDir: string
-    bundleName: string
 }
+
+const log = getLogger(`Info`, `config.vite.vite-plugin-close.js`)
+
 /**
  *   description: Closes Vite after the bundle has been build. Optionally copies the bundle to a different directory.
  *   @param { ClosePluginOptions } options - The options object
@@ -28,17 +30,32 @@ export default function VitePluginCloseAndCopy(options?: ClosePluginOptions): Pl
         },
         closeBundle() {
             if (options) {
-                for (const file of fs.readdirSync(path.resolve(__dirname, options.srcDir))) {
-                    if (file.startsWith(options.bundleName) && file.endsWith('js')) {
-                        const src = path.resolve(__dirname, options.srcDir, file)
-                        const dest = path.resolve(__dirname, options.destDir, file)
-                        fs.copyFileSync(src, dest)
-                        log.info(`Copied ${src} to ${dest}`)
-                    }
-                }
+                clearOutputDirJS(__dirname, options)
+                log.info(`Bundle cleared from ${options.destDir}`)
+                copyBundle(__dirname, options)
+                log.info(`Bundle copied to ${options.destDir}`)
             }
             log.info('Bundle closed')
             process.exit(0)
         },
     }
 }
+
+const clearOutputDirJS = (__dirname: string, options: ClosePluginOptions) =>
+    fs
+        .readdirSync(path.resolve(__dirname, options.destDir))
+        .filter((file) => file.endsWith('js'))
+        .map((file) => {
+            fs.rmSync(path.resolve(__dirname, options.destDir, file))
+        })
+
+const copyBundle = (__dirname: string, options: ClosePluginOptions) =>
+    fs
+        .readdirSync(path.resolve(__dirname, options.srcDir))
+        .filter((file) => file.endsWith('js'))
+        .map((file) => {
+            fs.copyFileSync(
+                path.resolve(__dirname, options.srcDir, file),
+                path.resolve(__dirname, options.destDir, file)
+            )
+        })
diff --git a/dev/config/src/vite/vite.frontend.config.ts b/dev/config/src/vite/vite.frontend.config.ts
@@ -107,9 +107,8 @@ export default async function (
             lib: {
                 entry: path.resolve(dir, entry),
                 name: bundleName,
-                // sets the bundle to an Instantly Invoked Function Expression (IIFE)
                 fileName: `${bundleName}.bundle.js`,
-                formats: ['iife'],
+                formats: ['es'],
             },
             modulePreload: { polyfill: true },
             commonjsOptions: {