add packages, utils, and examples

Author: clfhhc

babel.config.js

@@ -10,6 +10,9 @@ module.exports = {
     '@emotion/babel-preset-css-prop',
   ],
   plugins: [
+    'babel-plugin-transform-typescript-metadata',
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-proposal-nullish-coalescing-operator',
   ],

configs/env.mapping.js

@@ -3,6 +3,7 @@ const path = require('path');
 require('dotenv').config({
   path: path.join(__dirname, `../.env/${process.env.NODE_ENV}.env`),
 });
+const packageLockJson = require('../package-lock.json');
 
 // env mapping for exposure to client
 module.exports = {
@@ -14,4 +15,5 @@ module.exports = {
   MANIEFST_PATH: process.env.MANIEFST_PATH,
   ICON_192_PATH: process.env.ICON_192_PATH,
   FAV_ICON_PATH: process.env.FAV_ICON_PATH,
+  SQL_JS_VERSION: packageLockJson.dependencies['sql.js'].version,
 };

next.config.js

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const withPWA = require('next-pwa');
+const withTM = require('next-transpile-modules')(['typeorm/browser']);
+const webpack = require('webpack');
 const defaultCache = require('next-pwa/cache');
 const envMapping = require('./configs/env.mapping');
 
@@ -17,51 +19,69 @@ const encodeUriTransform = async (manifestEntries) => {
 };
 
 module.exports = () =>
-  withPWA({
-    env: envMapping,
-    target: 'serverless',
-    poweredByHeader: false,
-    assetPrefix: LINK_PREFIX,
+  withPWA(
+    withTM({
+      webpack: (config, { isServer }) => {
+        config.plugins.push(
+          new webpack.ProvidePlugin({
+            'window.SQL': 'sql.js/dist/sql-wasm.js',
+          })
+        );
+        if (!isServer) {
+          config.node = {
+            fs: 'empty',
+            net: 'empty',
+            tls: 'empty',
+          };
+        }
+        return config;
+      },
 
-    pwa: {
-      disable: !isProd,
-      subdomainPrefix: LINK_PREFIX,
-      dest: 'public',
-      manifestTransforms: [encodeUriTransform],
-      runtimeCaching: [
-        ...defaultCache,
-        {
-          urlPattern: /^https?.*/,
-          handler: 'NetworkFirst',
-          options: {
-            cacheName: 'offlineCache',
-            networkTimeoutSeconds: 15,
-            expiration: {
-              maxEntries: 150,
-              maxAgeSeconds: 30 * 24 * 60 * 60,
-            },
-            cacheableResponse: {
-              statuses: [0, 200],
+      env: envMapping,
+      target: 'serverless',
+      poweredByHeader: false,
+      assetPrefix: LINK_PREFIX,
+
+      pwa: {
+        disable: !isProd,
+        subdomainPrefix: LINK_PREFIX,
+        dest: 'public',
+        manifestTransforms: [encodeUriTransform],
+        runtimeCaching: [
+          ...defaultCache,
+          {
+            urlPattern: /^https?.*/,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'offlineCache',
+              networkTimeoutSeconds: 15,
+              expiration: {
+                maxEntries: 150,
+                maxAgeSeconds: 30 * 24 * 60 * 60,
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
             },
           },
-        },
-        {
-          urlPattern: ({ event }) => event.request.mode === 'navigate',
-          handler: 'CacheFirst',
-          options: {
-            cacheName: 'offlineCache',
-            expiration: {
-              maxEntries: 150,
-              maxAgeSeconds: 30 * 24 * 60 * 60,
-            },
-            cacheableResponse: {
-              statuses: [0, 200],
+          {
+            urlPattern: ({ event }) => event.request.mode === 'navigate',
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'offlineCache',
+              expiration: {
+                maxEntries: 150,
+                maxAgeSeconds: 30 * 24 * 60 * 60,
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
             },
           },
-        },
-      ],
-      navigationPreload: true,
-      // publicExcludes: [],
-      // exclude: ['**/node_modules/**/*'],
-    },
-  });
+        ],
+        navigationPreload: true,
+        // publicExcludes: [],
+        // exclude: ['**/node_modules/**/*'],
+      },
+    })
+  );