Merge pull request #20 from getmash/chore/winter-2022-build-update

Upgrade all packages to ESM only. Dropping tech debt and simplifying our tooling.

.changeset/pre.json

@@ -0,0 +1,12 @@
+{
+  "mode": "exit",
+  "tag": "alpha",
+  "initialVersions": {
+    "@getmash/client-sdk": "1.1.3",
+    "@getmash/jsonrpc-engine": "1.0.2",
+    "@getmash/post-message": "1.1.0"
+  },
+  "changesets": [
+    "strong-eagles-shop"
+  ]
+}

.changeset/strong-eagles-shop.md

@@ -0,0 +1,7 @@
+---
+"@getmash/client-sdk": major
+"@getmash/jsonrpc-engine": major
+"@getmash/post-message": major
+---
+
+Upgrade all packages to ESM only. Dropping tech debt and simplifying our tooling.

.github/workflows/test.yml

@@ -41,29 +41,28 @@ jobs:
       - name: Install dependencies
         shell: bash
         run: yarn install --immutable
-
-      - name: Check release definition
-        # Don't run on changeset-release branch as it does not require a changeset to update
-        # package versions. Simplifies the automation of package versioning and allows
-        # branch protection rules
-        if: github.head_ref != 'changeset-release/main'
-        run: yarn release:status
-
-      - name: Buld packages
-        shell: bash
-        run: yarn build       
+
+      # Fails if project references drift from package.json, fix with reference script
+      - name: Check project reference
+        run: yarn references:check
 
       - name: Test packages
-        run: yarn test
+        run: yarn workspaces foreach --topological --parallel run test
 
       - name: Lint packages
-        run: yarn lint
+        run: yarn workspaces foreach --topological --parallel run lint
 
       - name: Post coverage
-        uses: vebr/jest-lcov-reporter@v0.2.1
+        uses: eeshdarthvader/code-coverage-assistant@0.1 
         # only post on PRs
         if: github.event_name == 'pull_request'
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          update-comment: true
-          lcov-file: ./coverage/lcov.info
+          monorepo-base-path: "./packages"
+
+      - name: Check release definition
+        # Don't run on changeset-release branch as it does not require a changeset to update
+        # package versions. Simplifies the automation of package versioning and allows
+        # branch protection rules
+        if: github.head_ref != 'changeset-release/main'
+        run: yarn release:status

.gitignore

@@ -24,7 +24,7 @@ coverage
 *.tsbuildinfo
 
 # jest
-.cache/jest
+**/.cache/jest
 
 #parcel
 .parcel-cache

conf/README.md

@@ -2,6 +2,14 @@
 
 Configuration files shared by the packages in the monorepo.
 
+## TypeScript
+
+`tsconfig.base.json` is the base TypeScript shared by all tools and packages.
+
 ## eslint
 
 We need to keep `.eslintrc` files out of root or LSPs will create an instance to lint the entire repository. Quickly bogs down.
+
+## jest
+
+`jest.base.js` is imported by all packages.

conf/eslintrc.base.js

@@ -53,5 +53,15 @@ module.exports = {
     ],
     "@typescript-eslint/ban-ts-comment": "off",
   },
-  settings: {},
+  settings: {
+    // import settings along with eslint-import-resolver-typescript allow js imports to be mapped back to ts files
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+	"project": ["tsconfig.json"]
+      },
+    }
+  },
 };

conf/jest/jest.base.js

@@ -0,0 +1,39 @@
+const path = require("path");
+
+const tsconfig = path.join(__dirname, "tsconfig.test.json");
+const setupPostMessage = path.join(__dirname, "setupPostMessage.js");
+
+function generate(config) {
+  return Object.assign(
+    {
+      cache: true,
+      cacheDirectory: ".cache/jest",
+      /*
+       * Automatically clear mock calls and instances before every test.
+       * Equivalent to calling jest.clearAllMocks() before each test.
+       * This does not remove any mock implementation that may have been provided.
+       */
+      clearMocks: true,
+      collectCoverage: true,
+      collectCoverageFrom: ["src/**/*.{ts,tsx}"],
+      coverageDirectory: "coverage/",
+      extensionsToTreatAsEsm: [".ts", ".tsx", ".mts"],
+      moduleNameMapper: {
+        // jest resolver needs help finding the ts files from js extensions in imports
+        "^(\\.{1,2}/.*)\\.js$": "$1",
+        // there is a bug in jest and it can't handle the exports in this library
+        "^uuid$": require.resolve("uuid"),
+      },
+      transform: {
+        "^.+\\.tsx?$": [
+          "ts-jest",
+          { useESM: true, tsconfig, diagnostics: false },
+        ],
+      },
+      setupFiles: [setupPostMessage],
+    },
+    config,
+  );
+}
+
+module.exports = generate;

tsconfig.test.json → conf/jest/tsconfig.test.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./tsconfig.base.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "react-jsx",
     "noEmit": true

justfile

@@ -0,0 +1,8 @@
+# default help menu lists tasks
+@help:
+  just --list --justfile {{justfile()}} --list-heading $'mash-js\n'
+
+# test all packages
+@test:
+  yarn references:check
+  yarn workspaces foreach --topological --parallel run test

package.json

@@ -17,13 +17,8 @@
     "packages/*"
   ],
   "scripts": {
-    "clean": "yarn workspaces foreach -p run clean",
-    "build": "yarn clean && yarn workspaces foreach -ipt run build",
-    "lint": "eslint packages/*",
-    "lint:fix": "eslint --fix packages/*",
-    "test": "jest --colors",
-    "test:config": "jest --showConfig",
-    "test:watch": "jest --watch --colors",
+    "references": "yarn workspaces-to-typescript-project-references --includesRoot",
+    "references:check": "yarn workspaces-to-typescript-project-references --includesRoot --check",
     "release:add:empty": "yarn changeset add --empty",
     "release:add": "yarn changeset add",
     "release:status": "yarn changeset status --since origin/main --output",
@@ -32,27 +27,8 @@
     "release": "yarn clean && yarn build && yarn release:publish"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.19.3",
     "@changesets/changelog-github": "^0.4.7",
-    "@types/babel__preset-env": "^7",
-    "@types/eslint": "^8",
-    "@types/jest": "^29.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
-    "@typescript-eslint/parser": "^5.39.0",
-    "babel-jest": "^29.1.2",
-    "eslint": "^8.24.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "jest": "^29.1.2",
-    "jest-environment-jsdom": "^29.1.2",
-    "prettier": "^2.7.1",
-    "ts-jest": "^29.0.3",
-    "tslib": "^2.4.0",
-    "typescript": "^4.8.4"
-  },
-  "dependencies": {
-    "@changesets/cli": "^2.25.0"
+    "@changesets/cli": "^2.25.0",
+    "@monorepo-utils/workspaces-to-typescript-project-references": "^2.8.2"
   }
 }

packages/jsonrpc-engine/.eslintrc.js → packages/client-sdk/.eslintrc.cjs

@@ -2,7 +2,6 @@ module.exports = {
   extends: ["../../conf/eslintrc.base.js"],
   root: true,
   parserOptions: {
-    project: "tsconfig.lint.json",
     tsconfigRootDir: __dirname,
   },
 };

packages/client-sdk/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @getmash/client-sdk
 
+## 2.0.0-alpha.0
+
+### Major Changes
+
+- [#20](https://github.com/getmash/mash-js/pull/20) [`46f3177`](https://github.com/getmash/mash-js/commit/46f3177fde43f265ddb41aeb9daad3b19ecc6aa7) Thanks [@nyonson](https://github.com/nyonson)! - Upgrade all packages to ESM only. Dropping tech debt and simplifying our tooling.
+
+### Patch Changes
+
+- Updated dependencies [[`46f3177`](https://github.com/getmash/mash-js/commit/46f3177fde43f265ddb41aeb9daad3b19ecc6aa7)]:
+  - @getmash/jsonrpc-engine@2.0.0-alpha.0
+  - @getmash/post-message@2.0.0-alpha.0
+
 ## 1.1.3
 
 ### Patch Changes

packages/client-sdk/jest.config.cjs

@@ -0,0 +1 @@
+module.exports = require('../../conf/jest/jest.base.js')({ testEnvironment: "jsdom" });

packages/client-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmash/client-sdk",
-  "version": "1.1.3",
+  "version": "2.0.0-alpha.0",
   "description": "Mash Client SDK to interact with the Mash Wallet on a site",
   "keywords": [
     "lightning",
@@ -9,18 +9,27 @@
     "mash",
     "monetize"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.js",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "default": "./dist/index.js"
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
   "scripts": {
     "clean": "rm -f tsconfig.tsbuildinfo && rm -rf dist",
-    "build": "tsc --build"
+    "build": "tsc --build",
+    "lint": "tsc --build && eslint .",
+    "lint:fix": "tsc --build && eslint --fix .",
+    "test": "tsc --build && node --experimental-vm-modules $(yarn bin jest) src"
   },
   "dependencies": {
-    "@getmash/jsonrpc-engine": "^1.0.2",
-    "@getmash/post-message": "^1.1.0"
+    "@getmash/jsonrpc-engine": "^2.0.0-alpha.0",
+    "@getmash/post-message": "^2.0.0-alpha.0"
   },
   "files": [
-    "dist"
+    "dist",
+    "!dist/**/*.test.*"
   ],
   "author": "Mash <support@getmash.com> (https://getmash.com/)",
   "license": "MIT",
@@ -31,5 +40,27 @@
   },
   "bugs": {
     "url": "https://github.com/getmash/mash-js/issues"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.20.2",
+    "@types/babel__preset-env": "^7",
+    "@types/eslint": "^8",
+    "@types/jest": "^29.2.2",
+    "@types/prettier": "^2",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "babel-jest": "^29.2.2",
+    "eslint": "^8.26.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^27.1.4",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
+    "prettier": "^2.7.1",
+    "ts-jest": "^29.0.3",
+    "tslib": "^2.4.1",
+    "typescript": "^4.8.4"
   }
 }

packages/client-sdk/src/IFrame.test.ts

@@ -1,3 +1,5 @@
+import { jest } from "@jest/globals";
+
 import PostMessageEngine, { PostMessageEvent } from "@getmash/post-message";
 
 import IFrame, {
@@ -12,8 +14,8 @@ import IFrame, {
   MIN_CONTENT_WIDTH,
   MAX_SHIFT_HORIZONTAL,
   MAX_SHIFT_UP,
-} from "./IFrame";
-import { FloatLocation, MashSettings, merge } from "./settings";
+} from "./IFrame.js";
+import { FloatLocation, MashSettings, merge } from "./settings.js";
 
 const IFRAME_SOURCE = "http://localhost";
 
@@ -36,6 +38,7 @@ function mockMatchMedia(mobile = false) {
   // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
   Object.defineProperty(window, "matchMedia", {
     writable: true,
+    // @ts-ignore ignore type of wrapped to allow mock to function
     value: jest.fn().mockImplementation((query: string) => ({
       matches: mobile,
       media: query,