Feat/esm webpack

build.config.js → build.config.mjs

@@ -1,4 +1,6 @@
-process.env.ENV_FILE !== null && require('dotenv').config({ path: process.env.ENV_FILE });
+import dotenv from 'dotenv'
+
+process.env.ENV_FILE !== null && dotenv.config({ path: process.env.ENV_FILE });
 
 const __API_SERVER_PORT__ = process.env.GRAPHQL_URL
     ? new URL(process.env.GRAPHQL_URL).port
@@ -27,4 +29,4 @@ const config = {
     __BACKEND_URL__: process.env.BACKEND_URL || `${__SERVER_PROTOCOL__}://${__SERVER_HOST__}:${__WEB_SERVER_PORT__}`,
 };
 
-module.exports = config;
+export default config

package.json

@@ -234,6 +234,7 @@
     "envalid": "~7.3.1",
     "enzyme": "^3.11.0",
     "esbuild": "^0.15.13",
+    "esbuild-loader": "^2.19.0",
     "eslint": "^8.27.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",

packages-modules/counter/browser/package.json

@@ -5,6 +5,7 @@
   "license": "ISC",
   "author": "CDMBase LLC",
   "main": "lib/index.js",
+  "type": "module",
   "typings": "lib/index.d.ts",
   "scripts": {
     "build": "yarn build:clean && yarn build:lib",

servers/frontend-server/build.config.js → servers/frontend-server/build.config.mjs

@@ -1,5 +1,6 @@
+import buildConfig from "../../build.config.mjs"
 const config = {
-    ...require('../../build.config'),
+    ...buildConfig,
     __CLIENT__: true,
     __SERVER__: false,
     __DEV__: process.env.NODE_ENV !== 'production',
@@ -10,4 +11,4 @@ const config = {
     __FRONTEND_BUILD_DIR__: process.env.FRONTEND_BUILD_DIR || './dist/web',
 };
 
-module.exports = config;
+export default config

servers/frontend-server/package.json

@@ -14,9 +14,10 @@
   "license": "MIT",
   "author": "CDMBase LLC",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "prebuild": "yarn build:clean",
-    "build": "cross-env NODE_ENV=production webpack",
+    "build": "cross-env NODE_ENV=production webpack -c webpack.config.mjs",
     "build:clean": "rimraf dist .awcache",
     "build:debug": "cross-env DEBUGGING=true NODE_ENV=production webpack",
     "build:debug:verbose": "yarn build:debug -- -v",
@@ -54,6 +55,7 @@
     "@apollo/client": "~3.3.21",
     "@apollo/react-components": "^4.0.0",
     "@apollo/react-hoc": "^4.0.0",
+    "@babel/runtime": "^7.20.1",
     "@cdm-logger/client": "^7.0.12",
     "@cdm-logger/server": "^7.0.12",
     "@common-stack/client-core": "0.2.16",

servers/frontend-server/src/backend/app.ts

@@ -4,29 +4,30 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable jest/require-hook */
 // tslint:disable-next-line:no-unused-expression
-process.env.ENV_FILE !== null && require('dotenv').config({ path: process.env.ENV_FILE });
+// import dotenv from 'dotenv';
+// process.env.ENV_FILE !== null && dotenv.config({ path: process.env.ENV_FILE });
 
 import { logger } from '@cdm-logger/server';
 
 import './server';
 
-process.on('uncaughtException', (ex) => {
-    logger.error(ex);
-    process.exit(1);
-});
+// process.on('uncaughtException', (ex) => {
+//     logger.error(ex);
+//     process.exit(1);
+// });
 
-process.on('unhandledRejection', (reason) => {
-    logger.error(reason);
-});
+// process.on('unhandledRejection', (reason) => {
+//     logger.error(reason);
+// });
 
-if ((module as any).hot) {
-    (module as any).hot.status((event) => {
-        if (event === 'abort' || event === 'fail') {
-            logger.error(`HMR error status: ${event}`);
-            // Signal webpack.run.js to do full-reload of the back-end
-            process.exit(250);
-        }
-    });
+// if ((module as any).hot) {
+//     (module as any).hot.status((event) => {
+//         if (event === 'abort' || event === 'fail') {
+//             logger.error(`HMR error status: ${event}`);
+//             // Signal webpack.run.js to do full-reload of the back-end
+//             process.exit(250);
+//         }
+//     });
 
-    (module as any).hot.accept();
-}
+//     (module as any).hot.accept();
+// }

servers/frontend-server/src/backend/server.ts

@@ -14,7 +14,7 @@ import { errorMiddleware } from './middlewares/error';
 import { config } from '../config';
 import modules from './modules';
 
-const cookiesMiddleware = require('universal-cookie-express');
+// const cookiesMiddleware = require('universal-cookie-express'); // TODO
 
 let server;
 
@@ -27,16 +27,16 @@ for (const applyBeforeware of modules.beforewares) {
     applyBeforeware(app);
 }
 
-app.use(cookiesMiddleware());
+// app.use(cookiesMiddleware());
 
 // By default it uses backend_url port, which may conflict with graphql server.
 const { port: serverPort } = url.parse(config.LOCAL_BACKEND_URL);
 
 // Don't rate limit heroku
 app.enable('trust proxy');
-if (!__DEV__) {
-    app.use(compression());
-}
+// if (!__DEV__) {
+//     app.use(compression());
+// }
 
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.json());
@@ -68,21 +68,21 @@ server.on('close', () => {
     server = undefined;
 });
 
-if ((module as any).hot) {
-    (module as any).hot.dispose(() => {
-        try {
-            if (server) {
-                server.close();
-            }
-        } catch (error) {
-            logger.error(error.stack);
-        }
-    });
-    (module as any).hot.accept(['./website'], () => {
-        logger.debug('...reloading middleware');
-    });
-
-    (module as any).hot.accept();
-}
+// if ((module as any).hot) {
+//     (module as any).hot.dispose(() => {
+//         try {
+//             if (server) {
+//                 server.close();
+//             }
+//         } catch (error) {
+//             logger.error(error.stack);
+//         }
+//     });
+//     (module as any).hot.accept(['./website'], () => {
+//         logger.debug('...reloading middleware');
+//     });
+
+//     (module as any).hot.accept();
+// }
 
 export default server;

servers/frontend-server/src/config/base-apollo-client.ts

@@ -151,10 +151,10 @@ export const createApolloClient = ({
     const links = [errorLink, retrylink, ...(clientState.preLinks || []), link];
 
     // Add apollo logger during development only
-    if (isBrowser && (isDev || isDebug)) {
-        const apolloLogger = require('apollo-link-logger');
-        links.unshift(apolloLogger.default);
-    }
+    // if (isBrowser && (isDev || isDebug)) {
+    //     const apolloLogger = require('apollo-link-logger');
+    //     links.unshift(apolloLogger.default);
+    // }
 
     const params: ApolloClientOptions<any> = {
         queryDeduplication: true,

servers/frontend-server/src/config/base-redux-config.ts

@@ -63,16 +63,16 @@ export const createReduxStore = ({
         middlewares.unshift(...preMiddleware);
     }
     // Add redux logger during development only
-    if ((isDev || isDebug) && isBrowser) {
-        const { createLogger } = require('redux-logger');
+    // if ((isDev || isDebug) && isBrowser) {
+    //     const { createLogger } = require('redux-logger');
 
-        middlewares.push(
-            createLogger({
-                level: 'info',
-                collapsed: true,
-            }),
-        );
-    }
+    //     middlewares.push(
+    //         createLogger({
+    //             level: 'info',
+    //             collapsed: true,
+    //         }),
+    //     );
+    // }
 
     if (middleware) {
         middlewares.push(...middleware);

servers/frontend-server/src/config/public-config.ts

@@ -17,7 +17,7 @@ const publicEnv = [
 const isBrowser = typeof window !== 'undefined';
 
 if (!isBrowser) {
-    process.env.ENV_FILE !== null && require('dotenv').config({ path: process.env.ENV_FILE });
+    // process.env.ENV_FILE !== null && require('dotenv').config({ path: process.env.ENV_FILE });
 }
 const base = (isBrowser ? ( window.__ENV__ || __ENV__) : process.env) || {};
 const env: any = {};

servers/frontend-server/src/config/redux-config.ts

@@ -2,9 +2,9 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable global-require */
-import storage from 'redux-persist/lib/storage';
+// import storage from 'redux-persist/es/storage/index.mjs';
 import { combineReducers } from 'redux';
-import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
+// import autoMergeLevel2 from 'redux-persist/es/stateReconciler/autoMergeLevel2.mjs';
 import { createEpicMiddleware } from 'redux-observable';
 import { connectRouter, routerMiddleware } from 'connected-react-router';
 import { persistReducer } from 'redux-persist';
@@ -29,8 +29,8 @@ export const epicMiddleware = createEpicMiddleware({
 
 export const persistConfig = {
     key: REDUX_PERSIST_KEY,
-    storage,
-    stateReconciler: autoMergeLevel2,
+    // storage,
+    // stateReconciler: autoMergeLevel2,
     transforms: modules.reduxPersistStateTransformers,
 };
 
@@ -92,11 +92,11 @@ export const createReduxStore = (history) => {
         (module as any).hot.accept('../config/epic-config', () => {
             // we may need to reload epic always as we don't
             // know whether it is updated using our `modules`
-            const nextRootEpic = require('./epic-config').rootEpic;
-            // First kill any running epics
-            store.dispatch({ type: 'EPIC_END' });
-            // Now setup the new one
-            epic$.next(nextRootEpic);
+            // const nextRootEpic = require('./epic-config').rootEpic;
+            // // First kill any running epics
+            // store.dispatch({ type: 'EPIC_END' });
+            // // Now setup the new one
+            // epic$.next(nextRootEpic);
         });
     }
     container.bind('ReduxStore').toConstantValue(store);

servers/frontend-server/src/webpack-index.js

@@ -0,0 +1,6 @@
+
+import dotenv from 'dotenv';
+function util() {
+    return "I'm a util!";
+}
+export default util;

servers/frontend-server/src/webpack-test.js

@@ -0,0 +1,8 @@
+// import { logger } from '@cdm-logger/client';
+import module from '@sample-stack/counter-module-browser';
+// import util from './webpack-index';
+// import { Schemas } from '@vscode-alt/monaco-editor/esm/vs/base/common/network';
+
+// console.log(util());
+// logger.info('---UUUU', module);
+console.log('----Modules)')

servers/frontend-server/tsconfig.json

@@ -5,6 +5,9 @@
     "esModuleInterop": true,
     "sourceMap": true,
     "declaration": false,
+    "lib": ["es2021"],
+    "module": "commonjs",
+    "target": "es2021",
     "jsx": "react",
     "outDir": "./dist",
     "rootDir": "./src",