underpost 2.7.91 → 2.7.93

package/src/client/ssr/pages/Test.js

@@ -0,0 +1,198 @@
+const s = (el) => document.querySelector(el);
+
+const append = (el, html) => s(el).insertAdjacentHTML('beforeend', html);
+
+const getLang = () =>
+  (localStorage.getItem('lang') || navigator.language || navigator.userLanguage || s('html').lang)
+    .slice(0, 2)
+    .toLowerCase();
+
+const main = () => {
+  const Translate = {
+    Data: {
+      ['back']: {
+        en: 'Back to <br>  homepage',
+        es: 'Volver a  <br> la pagina principal',
+      },
+    },
+    Render: function (id) {
+      return this.Data[id][getLang()] ? this.Data[id][getLang()] : this.Data[id]['en'];
+    },
+  };
+  const icon = html`
+    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 32 32">
+      <g fill="none">
+        <g filter="url(#f2465id5)">
+          <path fill="#A5D9FF" d="m21.066 4.43l6.992 6.992l-16.926 16.926a4.944 4.944 0 1 1-6.992-6.992z" />
+        </g>
+        <g filter="url(#f2465id6)"><path fill="#C6EFFF" d="m23.37 7.524l1.653 1.653L17 17.199l-1.653-1.652z" /></g>
+        <g filter="url(#f2465id7)">
+          <path fill="#D1F884" d="m26.112 13.368l-14.98 14.98a4.944 4.944 0 1 1-6.992-6.992l7.988-7.988z" />
+          <path fill="url(#f2465id0)" d="m26.112 13.368l-14.98 14.98a4.944 4.944 0 1 1-6.992-6.992l7.988-7.988z" />
+        </g>
+        <path fill="url(#f2465id1)" d="M14.761 10.735L13.6 11.897l2.093 2.092a.822.822 0 0 0 1.162-1.162z" />
+        <path fill="url(#f2465id2)" d="m9.097 16.398l1.162-1.162l2.085 2.085a.822.822 0 1 1-1.162 1.162z" />
+        <path fill="url(#f2465id3)" d="m4.589 20.907l1.162-1.162l2.084 2.084a.822.822 0 0 1-1.163 1.162z" />
+        <g filter="url(#f2465id8)">
+          <path
+            fill="#A9D8FF"
+            d="M19.55 2.617a1.47 1.47 0 0 0 0 2.079l8.242 8.242a1.47 1.47 0 0 0 2.078-2.079l-8.242-8.242a1.47 1.47 0 0 0-2.078 0"
+          />
+          <path
+            fill="url(#f2465id4)"
+            d="M19.55 2.617a1.47 1.47 0 0 0 0 2.079l8.242 8.242a1.47 1.47 0 0 0 2.078-2.079l-8.242-8.242a1.47 1.47 0 0 0-2.078 0"
+          />
+        </g>
+        <g filter="url(#f2465id9)"><path fill="#C4ECFF" d="m19.916 4.001l1.11-1.11l8.376 8.374l-1.111 1.111z" /></g>
+        <defs>
+          <linearGradient id="f2465id0" x1="25.761" x2="17.074" y1="13.875" y2="16.875" gradientUnits="userSpaceOnUse">
+            <stop offset=".203" stop-color="#E9EB7E" />
+            <stop offset="1" stop-color="#E9EB7E" stop-opacity="0" />
+          </linearGradient>
+          <linearGradient id="f2465id1" x1="16.761" x2="14.011" y1="14.063" y2="11.469" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#138979" />
+            <stop offset="1" stop-color="#2E7B65" />
+          </linearGradient>
+          <linearGradient id="f2465id2" x1="12.252" x2="9.508" y1="18.557" y2="15.969" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#138979" />
+            <stop offset="1" stop-color="#2E7B65" />
+          </linearGradient>
+          <linearGradient id="f2465id3" x1="7.743" x2="5" y1="23.065" y2="20.477" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#138979" />
+            <stop offset="1" stop-color="#2E7B65" />
+          </linearGradient>
+          <linearGradient id="f2465id4" x1="28.786" x2="28.656" y1="13.521" y2="11.86" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A8C3FF" />
+            <stop offset="1" stop-color="#A8C3FF" stop-opacity="0" />
+          </linearGradient>
+          <filter
+            id="f2465id5"
+            width="25.366"
+            height="25.366"
+            x="2.692"
+            y="4.43"
+            color-interpolation-filters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset />
+            <feGaussianBlur stdDeviation="1" />
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0.745098 0 0 0 0 0.85098 0 0 0 0 0.964706 0 0 0 1 0" />
+            <feBlend in2="shape" result="effect1_innerShadow_18_24902" />
+          </filter>
+          <filter
+            id="f2465id6"
+            width="13.675"
+            height="13.675"
+            x="13.347"
+            y="5.524"
+            color-interpolation-filters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur result="effect1_foregroundBlur_18_24902" stdDeviation="1" />
+          </filter>
+          <filter
+            id="f2465id7"
+            width="26.42"
+            height="17.178"
+            x="2.692"
+            y="12.618"
+            color-interpolation-filters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset dx="4" dy="-.75" />
+            <feGaussianBlur stdDeviation="1.5" />
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0.505882 0 0 0 0 0.811765 0 0 0 0 0.34902 0 0 0 1 0" />
+            <feBlend in2="shape" result="effect1_innerShadow_18_24902" />
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset dy="-.4" />
+            <feGaussianBlur stdDeviation=".5" />
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0.788235 0 0 0 0 0.843137 0 0 0 0 0.898039 0 0 0 1 0" />
+            <feBlend in2="effect1_innerShadow_18_24902" result="effect2_innerShadow_18_24902" />
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset dx=".4" dy="-.4" />
+            <feGaussianBlur stdDeviation=".5" />
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0.67451 0 0 0 0 0.839216 0 0 0 0 0.623529 0 0 0 1 0" />
+            <feBlend in2="effect2_innerShadow_18_24902" result="effect3_innerShadow_18_24902" />
+          </filter>
+          <filter
+            id="f2465id8"
+            width="11.181"
+            height="11.181"
+            x="19.12"
+            y="2.187"
+            color-interpolation-filters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset />
+            <feGaussianBlur stdDeviation=".5" />
+            <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0.658824 0 0 0 0 0.776471 0 0 0 0 0.937255 0 0 0 1 0" />
+            <feBlend in2="shape" result="effect1_innerShadow_18_24902" />
+          </filter>
+          <filter
+            id="f2465id9"
+            width="10.986"
+            height="10.986"
+            x="19.166"
+            y="2.14"
+            color-interpolation-filters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur result="effect1_foregroundBlur_18_24902" stdDeviation=".375" />
+          </filter>
+        </defs>
+      </g>
+    </svg>
+  `;
+  append(
+    'body',
+    html` <style>
+        body {
+          font-family: arial;
+          font-size: 20px;
+          background-color: #d8d8d8;
+          color: #333;
+        }
+        a {
+          color: black;
+        }
+      </style>
+
+      <div class="abs center" style="top: 45%">
+        ${icon}
+        <br />
+        <br />
+        <span class="bold">Test Page</span>
+        <br />
+        <br />
+        <a href="${location.origin}">${Translate.Render('back')}</a>
+      </div>`,
+  );
+};
+
+SrrComponent = () => html`<script>
+  {
+    const s = ${s};
+    const append = ${append};
+    const getLang = ${getLang};
+    const main = ${main};
+    window.onload = main;
+  }
+</script>`;

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

@@ -1,58 +1,27 @@
-import { loggerFactory } from '../components/core/Logger.js';
-
-// https://googlechrome.github.io/samples/service-worker/custom-offline-page/
-
-/*
-Copyright 2015, 2019 Google Inc. All Rights Reserved.
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-*/
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
-// https://web.dev/cache-api-quick-guide/
-// https://developer.mozilla.org/en-US/docs/Web/API
-// https://developer.mozilla.org/es/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push
-// https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification
-// https://github.com/GoogleChrome/samples/blob/9e4b3b77b091268d28e5438bb2fe8829091e9540/service-worker/basic/service-worker.js#L59
-// https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
-
-/*
-
- 4 different ways to store data on client-side without using cookies:
-
-- Local Storage (Session and Local key/value pairs)
-- Web SQL (my favorite, it's a whole SQL Database, and it's NOT obsolete)
-- IndexedDB (another Database with different structure and acceptance)
-- Service Workers (Persistent background processing,
-even while offline, can asynchronously save files and many other things)
-
-*/
-
-const logger = loggerFactory(import.meta);
-
+const PRE_CACHED_RESOURCES = [];
+const CACHE_NAME = 'app-cache';
 const PROXY_PATH = '/';
-
 self.addEventListener('install', (event) => {
   // Activate right away
   self.skipWaiting();
 
   event.waitUntil(
     (async () => {
-      // const cache = await caches.open(CACHE_NAME);
-      // Setting {cache: 'reload'} in the new request will ensure that the response
-      // isn't fulfilled from the HTTP cache; i.e., it will be from the network.
-      // await cache.add(new Request(OFFLINE_URL, { cache: 'reload' }));
       // Open the app's cache.
-      // const cache = await caches.open(CACHE_NAME);
+      const cache = await caches.open(CACHE_NAME);
       // Cache all static resources.
-      // await cache.addAll(PRE_CACHED_RESOURCES);
+      try {
+        await cache.addAll(PRE_CACHED_RESOURCES);
+      } catch (error) {
+        console.error(error);
+      }
+      // for (const cacheKey of PRE_CACHED_RESOURCES) {
+      //   try {
+      //     await cache.add(cacheKey);
+      //   } catch (error) {
+      //     console.error(error, cacheKey);
+      //   }
+      // }
     })(),
   );
 });
@@ -67,139 +36,47 @@ self.addEventListener('activate', (event) => {
       }
     })(),
   );
-
   // Tell the active service worker to take control of the page immediately.
   self.clients.claim();
-
-  // event message
-  self.addEventListener('message', (event) => {
-    logger.info('Received event message', event.data);
-
-    switch (event.data.status) {
-      case 'skipWaiting':
-        return self.skipWaiting();
-        break;
-
-      default:
-        break;
-    }
-
-    clients.matchAll().then((clientList) => {
-      for (const client of clientList) {
-        logger.info('client', client);
-        client.postMessage({
-          title: 'Hello from SW event message',
-        });
-        // client -> document.visibilityState
-        //           client.visibilityState
-      }
-    });
-  });
-  // broadcast message
-  const channel = new BroadcastChannel('sw-messages');
-  channel.addEventListener('message', (event) => {
-    logger.info('Received broadcast message', event.data);
-    channel.postMessage({ title: 'Hello from SW broadcast message' });
-  });
 });
 
 self.addEventListener('fetch', (event) => {
-  let path;
-
-  if (event.request.url.match(location.origin)) path = event.request.url.slice(location.origin.length);
-  const preload = path && !path.match('/api');
-
-  logger.info(`On fetch`, {
-    mode: event.request.mode,
-    url: event.request.url,
-    referrer: event.request.referrer,
-    method: event.request.method,
-    path,
-    preload,
-  });
-
-  (async () => {
-    // Get the client.
-    const client = await clients.get(event.clientId);
-    if (client)
-      client.postMessage({
-        status: 'loader',
-        path,
-      });
-    else logger.warn('client not found');
-  })();
+  // Cache-First Strategy
+  event.respondWith(
+    (async () => {
+      // First, try to use the navigation preload response if it's supported.
+      try {
+        const preloadResponse = await event.preloadResponse;
+        if (preloadResponse) return preloadResponse;
+        return await fetch(event.request);
+      } catch (error) {
+        console.error('Fetch failed; returning offline page instead.', event.request.url, error);
+        // Fallback to the offline page.
+        const path = PRE_CACHED_RESOURCES.find((path) => event.request.url.match(path.replaceAll('/index.html', '')));
 
-  // We only want to call event.respondWith() if this is a navigation request
-  // for an HTML page.
-  if (path !== undefined || event.request.mode === 'navigate') {
-    event.respondWith(
-      (async () => {
         try {
-          // First, try to use the navigation preload response if it's supported.
-          const preloadResponse = await event.preloadResponse;
-          if (preloadResponse) {
-            return preloadResponse;
-          }
-
-          if (preload) {
-            const preloadCache = await caches.has(path);
-            const cache = await caches.open(path);
-            const cacheResponse = await cache.match(path);
-            if (!preloadCache || !cacheResponse || cacheResponse.status !== 200) {
-              logger.warn('install', path);
-              // await cache.add(new Request(event.request.url, { cache: 'reload' }));
-
-              // Other option:
-              // The resource wasn't found in the cache, so fetch it from the network.
-              const fetchResponse = await fetch(event.request.url);
-
-              if (fetchResponse.status === 200) {
-                // Put the response in cache.
-                await cache.put(event.request.url, fetchResponse.clone());
-                // And return the response.
-                return fetchResponse;
-              } else {
-                await caches.delete(path);
-                throw new Error(await fetchResponse.text());
-              }
-            }
-            // logger.info('cache response', path);
-            return cacheResponse;
-          }
-
-          const networkResponse = await fetch(event.request);
-          logger.warn('fetch response', event.request.url);
-          return networkResponse;
+          const cachedResponse = await caches.match(event.request);
+          if (cachedResponse) return cachedResponse;
+          const cache = await caches.open(CACHE_NAME);
+          const preCachedResponse = await cache.match(path);
+          if (!preCachedResponse) throw new Error(error.message);
+          return preCachedResponse;
         } catch (error) {
-          // catch is only triggered if an exception is thrown, which is likely
-          // due to a network error.
-          // If fetch() returns a valid HTTP response with a response code in
-          // the 4xx or 5xx range, the catch() will NOT be called.
-          if (path) {
-            const preloadCache = await caches.has(path);
-            if (preloadCache) await caches.delete(path);
-          }
-
-          logger.error('Fetch failed; returning offline page instead.', { error, path });
+          console.error('Error opening cache for pre cached page', event.request.url, error);
           try {
-            const cache = await caches.open(`${PROXY_PATH}offline.html`);
-            const cachedResponse = await cache.match(`${PROXY_PATH}offline.html`);
-            return cachedResponse;
+            const cache = await caches.open(CACHE_NAME);
+            const preCachedResponse = await cache.match(`${PROXY_PATH === '/' ? '' : PROXY_PATH}/offline/index.html`);
+            if (!preCachedResponse) throw new Error(error.message);
+            return preCachedResponse;
           } catch (error) {
-            logger.error('Error opening cache for offline page', { error, path });
-            const response = new Response(JSON.stringify({ status: 'error', message: 'offline test response' }));
+            console.error('Error opening cache for offline page', event.request.url, error);
+            const response = new Response(JSON.stringify({ status: 'error', message: error.message }));
             // response.status = 200;
             response.headers.set('Content-Type', 'application/json');
             return response;
           }
         }
-      })(),
-    );
-  }
-
-  // If our if() condition is false, then this fetch handler won't intercept the
-  // request. If there are any other fetch handlers registered, they will get a
-  // chance to call event.respondWith(). If no fetch handlers call
-  // event.respondWith(), the request will be handled by the browser as if there
-  // were no service worker involvement.
+      }
+    })(),
+  );
 });

package/src/mailer/EmailRender.js

@@ -1,5 +1,4 @@
-import { srcFormatted } from '../server/client-formatted.js';
-import fs from 'fs-extra';
+import { ssrFactory } from '../server/client-formatted.js';
 
 const EmailRender = {
   style: {
@@ -58,8 +57,7 @@ const EmailRender = {
     const templates = {};
     for (const templateKey of Object.keys(options.templates)) {
       const ssrEmailComponent = options.templates[templateKey];
-      let SrrComponent;
-      eval(await srcFormatted(fs.readFileSync(`./src/client/ssr/components/email/${ssrEmailComponent}.js`, 'utf8')));
+      const SrrComponent = await ssrFactory(`./src/client/ssr/mailer/${ssrEmailComponent}.js`);
       templates[templateKey] = SrrComponent(this, options);
     }
     return templates;

package/src/mailer/MailerProvider.js

@@ -25,7 +25,10 @@ const MailerProvider = {
       },
       host: '',
       path: '',
-      templates: ['SsrTemplate'],
+      templates: {
+        userVerifyEmail: 'DefaultVerifyEmail',
+        userRecoverEmail: 'DefaultRecoverEmail',
+      },
     },
   ) {
     try {