Merge pull request #7 from FirstWhack/NX

NX, not sure if this is gonna go to GH pages correctly

.github/workflows/build-deploy.yml

@@ -46,5 +46,5 @@ jobs:
         uses: JamesIves/[email protected]
         with:
           branch: gh-pages
-          folder: packages/game/dist
+          folder: projects/game/dist
           target-folder: game

.gitignore

@@ -1,6 +1,6 @@
 node_modules
 .vscode
-packages/**/dist
+**/dist
 .yarn/cache
 .yarn/install-state.gz
 types/*

.yarnrc.yml

@@ -1,7 +1,3 @@
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
-
 yarnPath: .yarn/releases/yarn-3.1.1.cjs

nx.json

@@ -0,0 +1,29 @@
+{
+  "tasksRunnerOptions": {
+    "default": {
+      "runner": "nx/tasks-runners/default",
+      "options": {
+        "cacheableOperations": ["build"],
+        "parallel": 10
+      }
+    }
+  },
+  "namedInputs": {
+    "production": ["!{projectRoot}/**/*.spec.tsx"]
+  },
+  "targetDefaults": {
+    "serve": {
+      "dependsOn": ["build"],
+      "outputs": ["{projectRoot}/dist"]
+    },
+    "build": {
+      "inputs": ["production"],
+      "outputs": ["{projectRoot}/dist"]
+    }
+  },
+  "defaultBase": "main",
+  "workspaceLayout": {
+    "appsDir": "projects",
+    "libsDir": "packages"
+  }
+}

package.json

@@ -2,7 +2,8 @@
   "private": true,
   "workspaces": {
     "packages": [
-      "packages/**"
+      "packages/**",
+      "projects/**"
     ]
   },
   "homepage": "https://firstwhack.github.io/a-game-of-micro-frontends",
@@ -11,9 +12,9 @@
     "url": "https://github.com/FirstWhack/a-game-of-micro-frontends"
   },
   "scripts": {
-    "start:sandbox": "yarn install && yarn start",
-    "start": "yarn workspaces foreach -piv run start",
-    "build": "yarn workspaces foreach -pivt run build",
+    "start:sandbox": "yarn install && nx start-game @micro-snake/game --output-style=stream",
+    "start": "nx start-game @micro-snake/game --output-style=stream",
+    "build": "nx run-many --target=build --output-style=stream",
     "postinstall": "husky install",
     "pretty-quick": "pretty-quick"
   },
@@ -22,8 +23,13 @@
   "description": "",
   "packageManager": "[email protected]",
   "devDependencies": {
+    "@nrwl/cli": "^15.3.3",
+    "@nrwl/workspace": "^15.3.3",
     "husky": "^7.0.0",
+    "nx": "15.3.3",
     "prettier": "^2.6.0",
-    "pretty-quick": "^3.1.3"
+    "webpack": "5.75.0",
+    "webpack-cli": "4.9.0",
+    "webpack-dev-server": "3.11.2"
   }
 }

packages/fruit/package.json

@@ -11,12 +11,9 @@
     "@types/react-dom": "^17.0.11",
     "babel-loader": "8.2.2",
     "html-webpack-plugin": "5.3.1",
-    "serve": "11.3.2",
+    "serve": "14.1.2",
     "ts-loader": "^9.2.6",
-    "typescript": "^4.5.5",
-    "webpack": "5.37.1",
-    "webpack-cli": "4.9.0",
-    "webpack-dev-server": "3.11.2"
+    "typescript": "^4.5.5"
   },
   "scripts": {
     "start": "webpack serve --mode development",

packages/fruit/project.json

@@ -0,0 +1,6 @@
+{
+  "name": "@micro-snake/plugin-fruit",
+  "sourceRoot": "{projectRoot}/src",
+  "projectType": "library",
+  "tags": ["scope:federated"]
+}

packages/fruit/webpack.config.js

@@ -6,6 +6,11 @@ const { ModuleFederationPlugin } = webpack.container;
 const storeHomepage = require('@micro-snake/engine/package.json').homepage;
 const deps = require('./package.json').dependencies;
 
+// some webpack5/Node18 quirk, better than going with legacy openssl provider :shrug:
+const crypto = require("crypto");
+const crypto_orig_createHash = crypto.createHash;
+crypto.createHash = algorithm => crypto_orig_createHash(algorithm == "md4" ? "sha256" : algorithm);
+
 module.exports = (_, argv) => ({
   entry: './index.js',
   mode: argv.mode,
@@ -15,7 +20,8 @@ module.exports = (_, argv) => ({
     port: 1338
   },
   output: {
-    publicPath: 'auto'
+    publicPath: 'auto',
+    hashFunction: "sha256"
   },
 
   module: {

packages/store/package.json

@@ -19,12 +19,9 @@
     "@types/react-dom": "^17.0.11",
     "babel-loader": "8.2.2",
     "html-webpack-plugin": "5.3.1",
-    "serve": "11.3.2",
+    "serve": "14.1.2",
     "ts-loader": "^9.2.6",
-    "typescript": "^4.5.5",
-    "webpack": "5.37.1",
-    "webpack-cli": "4.9.0",
-    "webpack-dev-server": "3.11.2"
+    "typescript": "^4.5.5"
   },
   "scripts": {
     "start": "webpack serve --mode development",

packages/store/project.json

@@ -0,0 +1,6 @@
+{
+  "name": "@micro-snake/engine",
+  "sourceRoot": "{projectRoot}/src",
+  "projectType": "library",
+  "tags": ["scope:federated"]
+}

packages/store/webpack.config.js

@@ -1,9 +1,12 @@
 const path = require('path');
 const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
 const { ModuleFederationPlugin } = webpack.container;
 
+// some webpack5/Node18 quirk, better than going with legacy openssl provider :shrug:
+const crypto = require("crypto");
+const crypto_orig_createHash = crypto.createHash;
+crypto.createHash = algorithm => crypto_orig_createHash(algorithm == "md4" ? "sha256" : algorithm);
+
 module.exports = {
   entry: {},
   mode: 'development',
@@ -13,22 +16,15 @@ module.exports = {
     port: 1339
   },
   output: {
-    publicPath: 'auto'
+    publicPath: 'auto',
+    hashFunction: "sha256"
   },
   module: {
     rules: [
       {
         test: /\.tsx?$/,
         use: 'ts-loader',
         exclude: /node_modules/
-      },
-      {
-        test: /\.jsx?$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-        options: {
-          presets: ['@babel/preset-react']
-        }
       }
     ]
   },

packages/wildcard/package.json

@@ -11,17 +11,14 @@
     "@types/react-dom": "^17.0.11",
     "babel-loader": "8.2.2",
     "html-webpack-plugin": "5.3.1",
-    "serve": "11.3.2",
+    "serve": "14.1.2",
     "ts-loader": "^9.2.6",
-    "typescript": "^4.5.5",
-    "webpack": "5.37.1",
-    "webpack-cli": "4.9.0",
-    "webpack-dev-server": "3.11.2"
+    "typescript": "^4.5.5"
   },
   "scripts": {
     "start": "webpack serve --mode development",
     "build": "webpack --mode production",
-    "serve": "serve dist -p 1338",
+    "serve": "serve dist -p 1340",
     "clean": "rm -rf dist"
   },
   "dependencies": {

packages/wildcard/project.json

@@ -0,0 +1,6 @@
+{
+  "name": "@micro-snake/plugin-wildcard",
+  "sourceRoot": "{projectRoot}/src",
+  "projectType": "library",
+  "tags": ["scope:federated"]
+}

packages/wildcard/webpack.config.js

@@ -6,6 +6,12 @@ const { ModuleFederationPlugin } = webpack.container;
 const storeHomepage = require('@micro-snake/engine/package.json').homepage;
 const deps = require('./package.json').dependencies;
 
+// some webpack5/Node18 quirk, better than going with legacy openssl provider :shrug:
+const crypto = require("crypto");
+const crypto_orig_createHash = crypto.createHash;
+crypto.createHash = algorithm => crypto_orig_createHash(algorithm == "md4" ? "sha256" : algorithm);
+
+
 module.exports = (_, argv) => ({
   entry: './index.js',
   mode: 'development',
@@ -15,7 +21,8 @@ module.exports = (_, argv) => ({
     port: 1340
   },
   output: {
-    publicPath: 'auto'
+    publicPath: 'auto',
+    hashFunction: "sha256"
   },
   module: {
     rules: [

packages/game/package.json → projects/game/package.json

@@ -14,13 +14,10 @@
     "html-webpack-plugin": "5.3.1",
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
-    "serve": "11.3.2",
+    "serve": "14.1.2",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.2.6",
-    "typescript": "^4.5.5",
-    "webpack": "5.37.1",
-    "webpack-cli": "4.9.0",
-    "webpack-dev-server": "3.11.2"
+    "typescript": "^4.5.5"
   },
   "scripts": {
     "start": "webpack serve --mode development",
@@ -32,6 +29,8 @@
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@micro-snake/engine": "workspace:*",
+    "@micro-snake/plugin-fruit": "workspace:*",
+    "@micro-snake/plugin-wildcard": "workspace:*",
     "@mui/material": "^5.5.2",
     "konva": "^8.3.4",
     "mobx": "^6.3.13",

projects/game/project.json

@@ -0,0 +1,18 @@
+{
+  "name": "@micro-snake/game",
+  "sourceRoot": "{projectRoot}/src",
+  "projectType": "application",
+  "targets": {
+    "start-game": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+            { "command": "nx run-many --target=serve --exclude @micro-snake/game" },
+            { "command": "nx run @micro-snake/game:serve" }
+        ]
+      },
+      "outputs": ["{projectRoot}/dist"]
+    }
+  },
+  "tags": ["scope:game"]
+}

packages/game/webpack.config.js → projects/game/webpack.config.js

@@ -5,6 +5,12 @@ const path = require('path');
 const storeHomepage = require('@micro-snake/engine/package.json').homepage;
 const deps = require('./package.json').dependencies;
 
+// some webpack5/Node18 quirk, better than going with legacy openssl provider :shrug:
+const crypto = require("crypto");
+const crypto_orig_createHash = crypto.createHash;
+crypto.createHash = algorithm => crypto_orig_createHash(algorithm == "md4" ? "sha256" : algorithm);
+
+
 module.exports = (_, argv) => ({
   entry: './index.js',
   mode: argv.mode,
@@ -14,7 +20,8 @@ module.exports = (_, argv) => ({
     port: 1337
   },
   output: {
-    publicPath: 'auto'
+    publicPath: 'auto',
+    hashFunction: "sha256"
   },
   module: {
     rules: [

tsconfig.json

@@ -6,7 +6,8 @@
     "strict": true,
     "esModuleInterop": true,
     "lib": ["dom", "es2015"],
-    "target": "es5",
+    "target": "es6",
+    "module": "esnext",
     "jsx": "react",
     "experimentalDecorators": true,
     "moduleResolution": "node",