feat: implement lazy loading in app (#152)

* feat: implement lazy loading in app

* fix: remove unnecesary x at the end

* fix: move polyfill functions outside validation

* fix: cancel request inmediatly an event ocurrs

* fix: simplify lazy loading approach

* fix: define function type

apps/storefront/index.html

@@ -628,6 +628,6 @@ <h1>Ugly Cornerstone Store Theme with Weird CSS</h1>
 
       Vue.createApp(Headless).mount('#headless-container')
     </script>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

apps/storefront/src/index.d.ts

@@ -10,4 +10,5 @@ declare interface CustomFieldStringItems {
 declare interface Window {
   tipDispatch: DispatchProps
   b3Tipmessage: any
+  b2bStorefrontApp: any
 }

apps/storefront/src/load-functions.ts

@@ -0,0 +1,56 @@
+import globalB3 from '@b3/global-b3'
+
+export const requestIdleCallbackFunction: typeof window.requestIdleCallback = window.requestIdleCallback ? window.requestIdleCallback : (cb: IdleRequestCallback) => {
+  const start = Date.now()
+  return window.setTimeout(() => {
+    cb({
+      didTimeout: false,
+      timeRemaining() {
+        return Math.max(0, 50 - (Date.now() - start))
+      },
+    })
+  }, 1)
+}
+
+window.b2bStorefrontApp = {
+  /* init flag listener */
+  __isInitVariable: false,
+  __isInitListener: () => {},
+  set __isInit(value: boolean) {
+    this.__isInitVariable = value
+    this.__isInitListener(value)
+  },
+  get __isInit() {
+    return this.__isInitVariable
+  },
+  registerIsInitListener(listener: Function) {
+    this.__isInitListener = listener
+  },
+
+  // helper variable to save clicked link
+  clickedLinkElement: undefined,
+}
+
+export const initApp = async () => {
+  if (window.b2bStorefrontApp.__isInit) return
+
+  await import('./react-setup')
+}
+
+const clickLink = async (e: MouseEvent) => {
+  window.b2bStorefrontApp.clickedLinkElement = e.target
+  e.preventDefault()
+  e.stopPropagation()
+  await initApp()
+}
+
+export const bindLinks = () => {
+  const links:NodeListOf<HTMLAnchorElement> = document.querySelectorAll(`${globalB3['dom.registerElement']}, ${globalB3['dom.allOtherElement']}`)
+
+  links.forEach((accessLink) => accessLink.addEventListener('click', clickLink))
+}
+export const unbindLinks = () => {
+  const links:NodeListOf<HTMLAnchorElement> = document.querySelectorAll(`${globalB3['dom.registerElement']}, ${globalB3['dom.allOtherElement']}`)
+
+  links.forEach((accessLink) => accessLink.removeEventListener('click', clickLink))
+}

apps/storefront/src/main.ts

@@ -0,0 +1,19 @@
+import {
+  bindLinks, initApp, requestIdleCallbackFunction, unbindLinks,
+} from './load-functions'
+
+// check if the accesed url contains a hashtag
+if (window.location.hash.startsWith('#/')) {
+  initApp()
+} else {
+  // load the app when the browser is free
+  requestIdleCallbackFunction(initApp)
+  // and bind links to load the app
+  bindLinks()
+  window.addEventListener('beforeunload', unbindLinks)
+  // and observe global flag to simulate click
+  window.b2bStorefrontApp.registerIsInitListener(() => {
+    unbindLinks()
+    setTimeout(() => window.b2bStorefrontApp.clickedLinkElement?.click(), 0)
+  })
+}

packages/hooks/useB3AppOpen.ts

@@ -64,6 +64,7 @@ export const useB3AppOpen = (initOpenState: OpenPageState) => {
         }
         return false
       }
+      window.b2bStorefrontApp.__isInit = true
       window.addEventListener('click', handleTriggerClick, {
         capture: true,
       })