underpost 2.8.531 → 2.8.611

package/src/cli/test.js

@@ -36,10 +36,10 @@ class UnderpostTest {
         options.podStatus &&
         typeof options.podStatus === 'string'
       )
-        return await UnderpostTest.API.podStatusMonitor(options.podName, options.podStatus);
+        return await UnderpostTest.API.statusMonitor(options.podName, options.podStatus, options.kindType);
 
       if (options.sh === true || options.logs === true) {
-        const [pod] = UnderpostDeploy.API.getPods(deployList);
+        const [pod] = UnderpostDeploy.API.get(deployList);
         if (pod) {
           if (options.sh) return pbcopy(`sudo kubectl exec -it ${pod.NAME} -- sh`);
           if (options.logs) return shellExec(`sudo kubectl logs -f ${pod.NAME}`);
@@ -73,7 +73,7 @@ class UnderpostTest {
                 break;
             }
           else {
-            const pods = UnderpostDeploy.API.getPods(deployId);
+            const pods = UnderpostDeploy.API.get(deployId);
             if (pods.length > 0)
               for (const deployData of pods) {
                 const { NAME } = deployData;
@@ -86,16 +86,27 @@ class UnderpostTest {
         }
       } else return UnderpostTest.API.run();
     },
-    podStatusMonitor(podName, status = 'Running', deltaMs = 1000) {
+    statusMonitor(podName, status = 'Running', kindType = '', deltaMs = 1000, maxAttempts = 60 * 5) {
+      if (!(kindType && typeof kindType === 'string')) kindType = 'pods';
       return new Promise(async (resolve) => {
         let index = 0;
-        logger.info(`Loading ${podName} instance`, { status, deltaMs });
+        logger.info(`Loading instance`, { podName, status, kindType, deltaMs, maxAttempts });
         const _monitor = async () => {
           await timer(deltaMs);
-          const result = UnderpostDeploy.API.getPods(podName).find((p) => p.STATUS === status);
-          logger.info(`Testing pod ${podName}... ${result ? 1 : 0}/1 - elapsed time ${deltaMs * (index + 1)}ms`);
-          if (result) return resolve();
+          const pods = UnderpostDeploy.API.get(podName, kindType);
+          const result = pods.find((p) => p.STATUS === status);
+          logger.info(
+            `Testing pod ${podName}... ${result ? 1 : 0}/1 - elapsed time ${deltaMs * (index + 1)}s - attempt ${
+              index + 1
+            }/${maxAttempts}`,
+            pods[0] ? pods[0].STATUS : 'Not found kind object',
+          );
+          if (result) return resolve(true);
           index++;
+          if (index === maxAttempts) {
+            logger.error(`Failed to test pod ${podName} within ${maxAttempts} attempts`);
+            return resolve(false);
+          }
           return _monitor();
         };
         await _monitor();

package/src/client/components/core/CalendarCore.js

@@ -404,7 +404,15 @@ const CalendarCore = {
         <div class="in" style="margin-bottom: 100px"></div>`;
     };
 
+    let delayBlock = false;
     this.Data[options.idModal].updatePanel = async () => {
+      if (delayBlock) return;
+      else {
+        delayBlock = true;
+        setTimeout(() => {
+          delayBlock = false;
+        }, 500);
+      }
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
       if (s(`.main-body-calendar-${options.idModal}`)) {
@@ -426,7 +434,10 @@ const CalendarCore = {
         },
       });
 
-    if (options.route === 'home') setTimeout(CalendarCore.Data[options.idModal].updatePanel);
+    // if (options.route === 'home')
+    setTimeout(() => {
+      CalendarCore.Data[options.idModal].updatePanel();
+    });
 
     return html`
       <style>

package/src/client/components/core/CommonJs.js

@@ -890,8 +890,58 @@ const commitData = {
   },
 };
 
-const userRoleEnum = ['admin', 'moderator', 'user', 'guest'];
+const emotionsData = [
+  {
+    name: 'like',
+    ad_display: {
+      es: 'Me gusta',
+      en: 'Like',
+    },
+    emoji: '👍',
+  },
+  {
+    name: 'love',
+    ad_display: {
+      es: 'Me encanta',
+      en: 'Love',
+    },
+    emoji: '❤️',
+  },
+  {
+    name: 'haha',
+    ad_display: {
+      es: 'Me divierte',
+      en: 'Haha',
+    },
+    emoji: '😂',
+  },
+  {
+    name: 'wow',
+    ad_display: {
+      es: 'Me asombra',
+      en: 'Wow',
+    },
+    emoji: '😮',
+  },
+  {
+    name: 'sad',
+    ad_display: {
+      es: 'Me entristece',
+      en: 'Sad',
+    },
+    emoji: '😢',
+  },
+  {
+    name: 'angry',
+    ad_display: {
+      es: 'Me enoja',
+      en: 'Angry',
+    },
+    emoji: '😠',
+  },
+];
 
+const userRoleEnum = ['admin', 'moderator', 'user', 'guest'];
 const commonAdminGuard = (role) => userRoleEnum.indexOf(role) === userRoleEnum.indexOf('admin');
 const commonModeratorGuard = (role) => userRoleEnum.indexOf(role) <= userRoleEnum.indexOf('moderator');
 
@@ -954,4 +1004,5 @@ export {
   getCurrentTrace,
   userRoleEnum,
   commitData,
+  emotionsData,
 };

package/src/client/components/core/CssCore.js

@@ -396,8 +396,7 @@ const CssCoreDark = {
           text-align: center;
           background: #1a1a1a;
           font-size: 17px;
-          padding-top: 7px;
-          padding-bottom: 6px;
+          height: 35px;
         }
         ::placeholder {
           color: #c6c4c4;
@@ -701,8 +700,7 @@ const CssCoreLight = {
           text-align: center;
           background: #eaeaea;
           font-size: 17px;
-          padding-top: 7px;
-          padding-bottom: 6px;
+          height: 35px;
         }
         ::placeholder {
           color: #333;

package/src/client/components/core/Docs.js

@@ -1,4 +1,3 @@
-import { _VERSION, CoreService } from '../../services/core/core.service.js';
 import { Badge } from './Badge.js';
 import { BtnIcon } from './BtnIcon.js';
 import { rgbToHex } from './CommonJs.js';
@@ -80,7 +79,7 @@ const Docs = {
       icon: html`<i class="fa-brands fa-osi"></i>`,
       text: 'Source Docs',
       url: function () {
-        return `${getProxyPath()}docs/engine/${_VERSION}`;
+        return `${getProxyPath()}docs/engine/${window.renderPayload.version}`;
       },
     },
     {

package/src/client/components/core/Input.js

@@ -88,8 +88,10 @@ const Input = {
               <div class="fl input-row-${id}">
                 <div class="in fll" style="width: 80%;">${inputElement}</div>
                 <div class="in fll btn-eye-password btn-eye-${id}" style="width: 20%;">
-                  <i class="fas fa-eye fa-eye-${id} eye-password"></i>
-                  <i class="fas fa-eye-slash fa-eye-slash-${id} eye-password" style="display: none"></i>
+                  <div class="abs center">
+                    <i class="fas fa-eye fa-eye-${id} eye-password"></i>
+                    <i class="fas fa-eye-slash fa-eye-slash-${id} eye-password" style="display: none"></i>
+                  </div>
                 </div>
               </div>
             `

package/src/client/components/core/LoadingAnimation.js

@@ -75,12 +75,17 @@ const LoadingAnimation = {
       const style = {
         'text-align': 'center',
       };
-
       if (s(container).classList) {
         const classes = Array.from(s(container).classList);
         if (classes.find((e) => e.match('management-table-btn-mini'))) {
           style.top = '-2px';
           style.left = '-2px';
+        } else if (classes.find((e) => e.match('-btn-tool'))) {
+          style.top = '-26px';
+          style.left = '-10px';
+        } else if (classes.find((e) => e.match('main-btn-')) && !classes.find((e) => e.match('main-btn-square-menu'))) {
+          style.top = '-8px';
+          style.left = '-10px';
         } else if (classes.find((e) => e.match('action-bar-box'))) {
           style.top = '-30px';
           style.left = '-12px';
@@ -145,6 +150,8 @@ const LoadingAnimation = {
         s(backgroundContainer).style.opacity = 0;
         setTimeout(async () => {
           s(backgroundContainer).style.display = 'none';
+          if (s(`.modal-menu`)) s(`.modal-menu`).classList.remove('hide');
+          if (s(`.main-body-btn-container`)) s(`.main-body-btn-container`).classList.remove('hide');
           if (callBack) callBack();
         }, 300);
       });

package/src/client/components/core/Modal.js

@@ -49,6 +49,7 @@ const Modal = {
       mode: '' /* slide-menu */,
       RouterInstance: {},
       disableTools: [],
+      observer: false,
     },
   ) {
     if (options.heightBottomBar === undefined) options.heightBottomBar = 50;
@@ -76,6 +77,8 @@ const Modal = {
       options,
       onCloseListener: {},
       onMenuListener: {},
+      onCollapseMenuListener: {},
+      onExtendMenuListener: {},
       onDragEndListener: {},
       onObserverListener: {},
       onClickListener: {},
@@ -156,7 +159,8 @@ const Modal = {
             };
             options.mode === 'slide-menu-right' ? (options.style.right = '0px') : (options.style.left = '0px');
             const contentIconClass = 'abs center';
-
+            if (options.class) options.class += ' hide';
+            else options.class = 'hide';
             options.dragDisabled = true;
             options.titleClass = 'hide';
             top = '0px';
@@ -238,7 +242,7 @@ const Modal = {
                 'body',
                 html`
                   <div
-                    class="abs main-body-btn-container"
+                    class="abs main-body-btn-container hide"
                     style="top: ${options.heightTopBar + 50}px; z-index: 9; ${true ||
                     (options.mode && options.mode.match('right'))
                       ? 'right'
@@ -1383,6 +1387,9 @@ const Modal = {
             if (options.onCollapseMenu) options.onCollapseMenu();
             s(`.sub-menu-title-container-${'modal-menu'}`).classList.add('hide');
             s(`.nav-path-container-${'modal-menu'}`).classList.add('hide');
+            Object.keys(this.Data[idModal].onCollapseMenuListener).map((keyListener) =>
+              this.Data[idModal].onCollapseMenuListener[keyListener](),
+            );
           } else {
             slideMenuWidth = originSlideMenuWidth;
             setTimeout(() => {
@@ -1403,6 +1410,9 @@ const Modal = {
             if (options.onExtendMenu) options.onExtendMenu();
             s(`.sub-menu-title-container-${'modal-menu'}`).classList.remove('hide');
             s(`.nav-path-container-${'modal-menu'}`).classList.remove('hide');
+            Object.keys(this.Data[idModal].onExtendMenuListener).map((keyListener) =>
+              this.Data[idModal].onExtendMenuListener[keyListener](),
+            );
           }
           // btn-bar-center-icon-menu
           this.actionBtnCenter();
@@ -1781,20 +1791,34 @@ const renderMenuLabel = ({ img, text, icon }) => {
     <div class="abs center main-btn-menu-text">${text}</div>`;
 };
 
-const renderViewTitle = (options = { icon: '', img: '', text: '', assetFolder: '', 'ui-icons': '', dim, top }) => {
-  if (options.dim === undefined) options.dim = 60;
+const renderViewTitle = (
+  options = { icon: '', img: '', text: '', assetFolder: '', 'ui-icons': '', dim, top, topText: '' },
+) => {
+  if (options.dim === undefined) options.dim = 30;
   const { img, text, icon, dim, top } = options;
   if (!img && !options['ui-icon']) return html`<span class="view-title-icon">${icon}</span> ${text}`;
   return html`<img
       class="abs img-btn-square-view-title"
       style="${renderCssAttr({
-        style: { width: `${dim}px`, height: `${dim}px`, top: top !== undefined ? `${top}px` : `-${dim / 2}px` },
+        style: {
+          width: `${dim}px`,
+          height: `${dim}px`,
+          top: top !== undefined ? `${top}px !important` : undefined,
+        },
       })}"
       src="${options['ui-icon']
         ? `${getProxyPath()}assets/${options.assetFolder ? options.assetFolder : 'ui-icons'}/${options['ui-icon']}`
         : img}"
     />
-    <div class="in text-btn-square-view-title" style="${renderCssAttr({ style: { 'padding-left': `${dim}px` } })}">
+    <div
+      class="in text-btn-square-view-title"
+      style="${renderCssAttr({
+        style: {
+          // 'padding-left': `${20 + dim}px`,
+          ...(options.topText !== undefined ? { top: options.topText + 'px !important' } : {}),
+        },
+      })}"
+    >
       ${text}
     </div>`;
 };

package/src/client/components/core/Panel.js

@@ -26,6 +26,7 @@ const Panel = {
       idPanel: '',
       parentIdModal: '',
       scrollClassContainer: '',
+      htmlFormHeader: async () => '',
       formData: [],
       data: [],
       originData: () => [],
@@ -244,12 +245,13 @@ const Panel = {
 
     let render = '';
     let renderForm = html` <div class="in modal stq" style="top: 0px; z-index: 1; padding-bottom: 5px">
-      ${await BtnIcon.Render({
-        class: `section-mp btn-custom btn-${idPanel}-close`,
-        label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
-        type: 'button',
-      })}
-    </div>`;
+        ${await BtnIcon.Render({
+          class: `section-mp btn-custom btn-${idPanel}-close`,
+          label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
+          type: 'button',
+        })}
+      </div>
+      ${options?.htmlFormHeader ? await options.htmlFormHeader() : ''}`;
 
     for (const modelData of formData) {
       if (modelData.disableRender) continue;

package/src/client/components/core/PanelForm.js

@@ -29,6 +29,8 @@ const PanelForm = {
       Elements: {},
       parentIdModal: undefined,
       route: 'home',
+      htmlFormHeader: async () => '',
+      firsUpdateEvent: async () => {},
     },
   ) {
     const { idPanel, heightTopBar, heightBottomBar, defaultUrlImage, Elements } = options;
@@ -99,6 +101,7 @@ const PanelForm = {
         heightTopBar,
         heightBottomBar,
         data,
+        htmlFormHeader: options.htmlFormHeader,
         parentIdModal: options.parentIdModal,
         originData: () => PanelForm.Data[idPanel].originData,
         filesData: () => PanelForm.Data[idPanel].filesData,
@@ -421,8 +424,16 @@ const PanelForm = {
           ssr: true,
         })),
       });
-
+    let delayBlock = false;
+    let firsUpdateEvent = false;
     this.Data[idPanel].updatePanel = async () => {
+      if (delayBlock) return;
+      else {
+        delayBlock = true;
+        setTimeout(() => {
+          delayBlock = false;
+        }, 500);
+      }
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
       htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
@@ -431,23 +442,28 @@ const PanelForm = {
         `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`,
         await panelRender({ data: this.Data[idPanel].data }),
       );
+      if (!firsUpdateEvent && options.firsUpdateEvent) {
+        firsUpdateEvent = true;
+        await options.firsUpdateEvent();
+      }
     };
     if (options.route)
       listenQueryPathInstance({
         id: options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body',
         routeId: options.route,
         event: async (path) => {
-          if (!PanelForm.Data[idPanel].sessionIn) await this.Data[idPanel].updatePanel();
+          // if (!PanelForm.Data[idPanel].sessionIn)
+          await this.Data[idPanel].updatePanel();
         },
       });
 
     // if (options.route === 'home') setTimeout(this.Data[idPanel].updatePanel);
     setTimeout(() => {
-      if (
-        options.route !== 'home' &&
-        (!PanelForm.Data[idPanel].originData || PanelForm.Data[idPanel].originData.length === 0)
-      )
-        this.Data[idPanel].updatePanel();
+      // if (
+      //   options.route !== 'home' &&
+      //   (!PanelForm.Data[idPanel].originData || PanelForm.Data[idPanel].originData.length === 0)
+      // )
+      this.Data[idPanel].updatePanel();
     });
 
     if (options.parentIdModal) {

package/src/client/services/core/core.service.js

@@ -4,13 +4,24 @@ import { getProxyPath } from '../../components/core/VanillaJs.js';
 
 const logger = loggerFactory(import.meta);
 
+logger.info('Load service');
+
+const endpoint = 'core';
+
 // https://developer.mozilla.org/en-US/docs/Web/API/AbortController
-const getBaseHost = () => location.host;
+const getBaseHost = () => (window.renderPayload?.apiBaseHost ? window.renderPayload.apiBaseHost : location.host);
 
-const getApiBasePath = () => `${getProxyPath()}api/`;
+const getApiBasePath = (options) =>
+  `${
+    options?.proxyPath
+      ? `/${options.proxyPath}/`
+      : window.renderPayload?.apiBaseProxyPath
+      ? window.renderPayload.apiBaseProxyPath
+      : getProxyPath()
+  }${window.renderPayload?.apiBasePath ? window.renderPayload.apiBasePath : 'api'}/`;
 
-const getApiBaseUrl = (options = { id: '', endpoint: '' }) =>
-  `${location.protocol}//${getBaseHost()}${getApiBasePath()}${options?.endpoint ? options.endpoint : ''}${
+const getApiBaseUrl = (options = { id: '', endpoint: '', proxyPath: '' }) =>
+  `${location.protocol}//${getBaseHost()}${getApiBasePath(options)}${options?.endpoint ? options.endpoint : ''}${
     options?.id ? `/${options.id}` : ''
   }`;
 
@@ -38,11 +49,6 @@ const payloadFactory = (body) => {
   return JSON.stringify(body);
 };
 
-logger.info('Load service');
-
-const endpoint = 'core';
-const _VERSION = window._VERSION;
-
 const CoreService = {
   getRaw: (options = { url: '' }) =>
     new Promise((resolve, reject) =>
@@ -159,7 +165,6 @@ const CoreService = {
 const ApiBase = getApiBaseUrl;
 
 export {
-  _VERSION,
   CoreService,
   headersFactory,
   payloadFactory,

package/src/client/ssr/Render.js

@@ -1,4 +1,4 @@
-SrrComponent = ({ title, ssrPath, buildId, ssrHeadComponents, ssrBodyComponents }) => html`
+SrrComponent = ({ title, ssrPath, buildId, ssrHeadComponents, ssrBodyComponents, renderPayload, renderApi }) => html`
   <!DOCTYPE html>
   <html dir="ltr" lang="en">
     <head>
@@ -6,6 +6,9 @@ SrrComponent = ({ title, ssrPath, buildId, ssrHeadComponents, ssrBodyComponents
       <link rel="icon" type="image/x-icon" href="${ssrPath}favicon.ico" />
       <meta charset="UTF-8" />
       <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+      <script>
+        window.renderPayload = ${renderApi.JSONweb(renderPayload)};
+      </script>
       ${ssrHeadComponents}
     </head>
     <body>

package/src/client/ssr/body/CacheControl.js

@@ -70,7 +70,7 @@ const CacheControl = function ({ ttiLoadTimeLimit }) {
   setTimeout(window.cacheControlCallBack, ttiLoadTimeLimit); // 70s limit);
 };
 
-SrrComponent = ({ ttiLoadTimeLimit }) => {
+SrrComponent = ({ ttiLoadTimeLimit, version }) => {
   const borderChar = (px, color, selectors) => {
     if (selectors) {
       return selectors
@@ -106,10 +106,9 @@ SrrComponent = ({ ttiLoadTimeLimit }) => {
     </style>
     ${borderChar(1, 'black', ['.clean-cache-container'])}
     <script>
-      window._VERSION = '${npm_package_version}';
       const CacheControl = ${CacheControl};
       CacheControl({ ttiLoadTimeLimit: ${ttiLoadTimeLimit ? ttiLoadTimeLimit : 1000 * 70 * 1} });
     </script>
-    <div class="clean-cache-container">${npm_package_version}</div>
+    <div class="clean-cache-container">${version}</div>
   `;
 };

package/src/client/sw/default.sw.js

@@ -1,6 +1,6 @@
-const PRE_CACHED_RESOURCES = [];
-const CACHE_NAME = 'app-cache';
-const PROXY_PATH = '/';
+const PRE_CACHED_RESOURCES = self.renderPayload?.PRE_CACHED_RESOURCES ? self.renderPayload.PRE_CACHED_RESOURCES : [];
+const CACHE_NAME = self.renderPayload?.CACHE_NAME ? self.renderPayload.CACHE_NAME : 'app-cache';
+const PROXY_PATH = self.renderPayload?.PROXY_PATH ? self.renderPayload.PROXY_PATH : '/';
 self.addEventListener('install', (event) => {
   // Activate right away
   self.skipWaiting();

package/src/index.js

@@ -9,6 +9,7 @@ import UnderpostCron from './cli/cron.js';
 import UnderpostDB from './cli/db.js';
 import UnderpostDeploy from './cli/deploy.js';
 import UnderpostRootEnv from './cli/env.js';
+import UnderpostFileStorage from './cli/fs.js';
 import UnderpostImage from './cli/image.js';
 import UnderpostRepository from './cli/repository.js';
 import UnderpostScript from './cli/script.js';
@@ -27,7 +28,7 @@ class Underpost {
    * @type {String}
    * @memberof Underpost
    */
-  static version = 'v2.8.531';
+  static version = 'v2.8.611';
   /**
    * Repository cli API
    * @static
@@ -98,6 +99,13 @@ class Underpost {
    * @memberof Underpost
    */
   static cron = UnderpostCron.API;
+  /**
+   * File Storage cli API
+   * @static
+   * @type {UnderpostFileStorage.API}
+   * @memberof UnderpostFileStorage
+   */
+  static fs = UnderpostFileStorage.API;
 }
 
 const up = Underpost;

package/src/server/backup.js

@@ -9,7 +9,7 @@ dotenv.config();
 const logger = loggerFactory(import.meta);
 
 class BackUp {
-  static callback = async function (deployList, options = { itc: false }) {
+  static callback = async function (deployList, options = { itc: false, git: false }) {
     if ((!deployList || deployList === 'dd') && fs.existsSync(`./engine-private/deploy/dd.router`))
       deployList = fs.readFileSync(`./engine-private/deploy/dd.router`, 'utf8');
 
@@ -26,7 +26,7 @@ class BackUp {
       if (!deployId) continue;
 
       if (!(options.itc === true)) {
-        shellExec(`underpost db --export ${deployId}`);
+        shellExec(`node bin db ${options.git ? '--git ' : ''}--export ${deployId}`);
         continue;
       }
 

package/src/server/client-build.js

@@ -21,6 +21,7 @@ import swaggerAutoGen from 'swagger-autogen';
 import { SitemapStream, streamToPromise } from 'sitemap';
 import { Readable } from 'stream';
 import { buildIcons, buildTextImg, getBufferPngText } from './client-icons.js';
+import Underpost from '../index.js';
 
 dotenv.config();
 
@@ -250,20 +251,6 @@ const buildClient = async (options = { liveClientBuildPaths: [], instances: [] }
               'services',
               baseHost,
             );
-            if (module === 'core' && (process.env.NODE_ENV === 'production' || process.argv.includes('static'))) {
-              if (apiBaseHost)
-                jsSrc = jsSrc.replace(
-                  'const getBaseHost = () => location.host;',
-                  `const getBaseHost = () => '${apiBaseHost}';`,
-                );
-              if (apiBaseProxyPath) {
-                jsSrc = jsSrc.replace('${getProxyPath()}api/', `${apiBaseProxyPath}${process.env.BASE_API}/`);
-                jsSrc = jsSrc.replace(
-                  "const getWsBasePath = () => (getProxyPath() !== '/' ? `${getProxyPath()}socket.io/` : undefined);",
-                  `const getWsBasePath = () => '${apiBaseProxyPath}socket.io/';`,
-                );
-              }
-            }
             fs.writeFileSync(
               jsPublicPath,
               minifyBuild || process.env.NODE_ENV === 'production' ? UglifyJS.minify(jsSrc).code : jsSrc,
@@ -487,7 +474,13 @@ const buildClient = async (options = { liveClientBuildPaths: [], instances: [] }
                   }
 
                   default:
-                    ssrBodyComponents += SrrComponent({ ssrPath, host, path, ttiLoadTimeLimit });
+                    ssrBodyComponents += SrrComponent({
+                      ssrPath,
+                      host,
+                      path,
+                      ttiLoadTimeLimit,
+                      version: Underpost.version,
+                    });
                     break;
                 }
               }
@@ -507,6 +500,15 @@ const buildClient = async (options = { liveClientBuildPaths: [], instances: [] }
               ssrPath,
               ssrHeadComponents,
               ssrBodyComponents,
+              renderPayload: {
+                apiBaseProxyPath,
+                apiBaseHost,
+                apiBasePath: process.env.BASE_API,
+                version: Underpost.version,
+              },
+              renderApi: {
+                JSONweb,
+              },
             });
 
             fs.writeFileSync(
@@ -707,6 +709,15 @@ root file where the route starts, such as index.js, app.js, routes.js, etc ... *
                 ssrPath,
                 ssrHeadComponents: '',
                 ssrBodyComponents: SsrComponent(),
+                renderPayload: {
+                  apiBaseProxyPath,
+                  apiBaseHost,
+                  apiBasePath: process.env.BASE_API,
+                  version: Underpost.version,
+                },
+                renderApi: {
+                  JSONweb,
+                },
               });
 
               const buildPath = `${
@@ -739,16 +750,14 @@ root file where the route starts, such as index.js, app.js, routes.js, etc ... *
         }
 
         {
-          const PRE_CACHED_JSON = `PRE_CACHED_RESOURCES = ${JSONweb(uniqueArray(PRE_CACHED_RESOURCES))}`;
-          const PROXY_PATH = `PROXY_PATH = '${path}'`;
+          const renderPayload = {
+            PRE_CACHED_RESOURCES: uniqueArray(PRE_CACHED_RESOURCES),
+            PROXY_PATH: path,
+          };
           fs.writeFileSync(
             `${rootClientPath}/sw.js`,
-            fs
-              .readFileSync(`${rootClientPath}/sw.js`, 'utf8')
-              .replaceAll(`PRE_CACHED_RESOURCES = []`, PRE_CACHED_JSON)
-              .replaceAll(`PRE_CACHED_RESOURCES=[]`, PRE_CACHED_JSON)
-              .replaceAll(`PROXY_PATH = '/'`, PROXY_PATH)
-              .replaceAll(`PROXY_PATH='/'`, PROXY_PATH),
+            `self.renderPayload = ${JSONweb(renderPayload)};
+${fs.readFileSync(`${rootClientPath}/sw.js`, 'utf8')}`,
             'utf8',
           );
         }