Fix CJS-dependent entry-points using the 'exports' field in package.j…

…son (#214)

* Fix CJS-dependent entry-points using the 'exports' field in package.json

* Remove obsolete 'yarn dev' script

* Update yarn.lock

CONTRIBUTING.md

@@ -4,7 +4,7 @@ When contributing to this repository, please first discuss the change you wish t
 
 Please note we have a **code of conduct**, please follow it in all your interactions with the project.
 
-## Setting up for Local Development
+## Setting up for local development
 
 1. Fork this repostiory.
 2. Clone your fork.
@@ -14,9 +14,11 @@ Please note we have a **code of conduct**, please follow it in all your interact
 - For features: `feature/[package_name]/[issue_number]/[descriptive_feature_name]`
 - For chores/the rest: `chore/[package_name]/[descriptive_chore_name]`
 
-4. Install & hoist dependencies with Yarn + Lerna: `yarn bootstrap`
+4. Install & hoist dependencies with Yarn + Lerna: `yarn install`
 5. Add `./node_modules/.bin` to your system's [`PATH`](https://en.wikipedia.org/wiki/PATH_(variable)), if it's not already listed.
-6. Start building for development: `yarn dev`
+6. Start building for development: `yarn build`
+
+> Note: There is no hot-reloading development script for now (which sucks, I know). Recently, the build system in Magic JS SDK changed to use a bundler as opposed to delivering TSC-transpiled files. This has complicated the matter of serving a development-specific flow. We will revisit this problem in the future.
 
 ### ESLint + VS Code
 
@@ -27,25 +29,23 @@ To ensure ESLint is able to properly lint source files in your VS Code developme
   "eslint.workingDirectories": [
     { "directory" : "./packages/@magic-sdk/commons", "changeProcessCWD": true },
     { "directory" : "./packages/@magic-sdk/provider", "changeProcessCWD": true },
-    { "directory" : "./packages/@magic-sdk/react-native", "changeProcessCWD": true },
-    { "directory" : "./packages/@magic-sdk/types", "changeProcessCWD": true },
+    { "directory" : "./packages/@magic-sdk/...", "changeProcessCWD": true },
     { "directory" : "./packages/magic-sdk", "changeProcessCWD": true },
   ],
 }
 ```
 
-### Development Scripts
+### Development scripts
 
 | NPM Script | Usage | Description |
 | ---------- | ----- | ----------- |
 | `bootstrap` | `yarn bootstrap` | Install dependencies/set up a local development environment. |
 | `wsrun` | `PKG=$PACKAGE_TARGET yarn wsrun` | Execute arbitrary scripts via `wsrun` for the specified package. |
 | `wsrun:paths` | `PKG=$PACKAGE_TARGET yarn paths` | Print the relative paths to each project based on the value of `$PKG`. |
-| `dev` | `PKG=$PACKAGE_TARGET yarn dev` | Start the specified package in development mode. |
-| `build` | `PKG=$PACKAGE_TARGET yarn build` | Build the specified package for production, or all packages if `$PKG` is omitted. |
-| `clean` | `PKG=$PACKAGE_TARGET yarn clean` | Run cleaning scripts for the specified package, or all packages if `$PKG` is omitted. Available flags: (`--cache`, `--test-artifacts`, `--deps`) |
-| `lint` | `PKG=$PACKAGE_TARGET yarn lint` | Run the linter for the specified package, or all packages if `$PKG` is omitted. |
-| `test` | `PKG=$PACKAGE_TARGET yarn test` | Run tests for the specified package, or all packages if `$PKG` is omitted. |
+| `build` | `PKG=$PACKAGE_TARGET yarn build` | Build the specified package for production, or interactively select a package if `$PKG` is omitted. |
+| `clean` | `PKG=$PACKAGE_TARGET yarn clean` | Run cleaning scripts for the specified package,or interactively select a package if `$PKG` is omitted. Available flags: (`--cache`, `--test-artifacts`, `--deps`) |
+| `lint` | `PKG=$PACKAGE_TARGET yarn lint` | Run the linter for the specified package, or interactively select a package if `$PKG` is omitted. |
+| `test` | `PKG=$PACKAGE_TARGET yarn test` | Run tests for the specified package, or interactively select a package if `$PKG` is omitted. |
 
 ## Opening a Pull Request
 
@@ -57,6 +57,8 @@ To ensure ESLint is able to properly lint source files in your VS Code developme
 
 We use [`auto`](https://github.com/intuit/auto) as our continous delivery tool. Cutting a release is just a matter of merging to `master`. For pre-releases, you can create a `next` branch as the base for your experimental/W.I.P. feature. Please familiarize yourself with the [documentation for `auto`](https://intuit.github.io/auto/docs) if you are in a position to cut a release.
 
+---
+
 ## Contributor Covenant Code of Conduct
 
 ### Our Pledge

package.json

@@ -6,7 +6,6 @@
     "wsrun": "$INIT_CWD/scripts/bin/wsrun-wrapper.ts",
     "wsrun:all": "$INIT_CWD/scripts/bin/wsrun-wrapper.ts --all",
     "wsrun:paths": "yarn wsrun --stages --no-prefix -r -c $INIT_CWD/scripts/bin/wsrun/resolve-paths.ts",
-    "dev": "$INIT_CWD/scripts/bin/clean.ts && $INIT_CWD/scripts/bin/dev.ts",
     "build": "$INIT_CWD/scripts/bin/clean.ts && $INIT_CWD/scripts/bin/build.ts",
     "clean": "$INIT_CWD/scripts/bin/clean.ts",
     "lint": "$INIT_CWD/scripts/bin/lint.ts",

packages/@magic-sdk/commons/package.json

@@ -17,8 +17,11 @@
   "target": "web",
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
-  "exports": "./dist/modern/index.js",
   "types": "./dist/types/index.d.ts",
+  "exports": {
+    "import": "./dist/modern/index.js",
+    "require": "./dist/cjs/index.js"
+  },
   "devDependencies": {
     "@magic-sdk/provider": "^6.0.3",
     "@magic-sdk/types": "^5.0.1"

packages/@magic-sdk/provider/package.json

@@ -17,8 +17,11 @@
   "target": "web",
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
-  "exports": "./dist/modern/index.js",
   "types": "./dist/types/index.d.ts",
+  "exports": {
+    "import": "./dist/modern/index.js",
+    "require": "./dist/cjs/index.js"
+  },
   "externals": {
     "exclude": [
       "web3-core",

packages/@magic-sdk/types/package.json

@@ -17,7 +17,10 @@
   "target": "web",
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
-  "exports": "./dist/modern/index.js",
   "types": "./dist/types/index.d.ts",
+  "exports": {
+    "import": "./dist/modern/index.js",
+    "require": "./dist/cjs/index.js"
+  },
   "gitHead": "1ef062ea699d48d5e9a9375a93b7c147632b05ca"
 }

packages/magic-sdk/package.json

@@ -18,8 +18,11 @@
   "target": "web",
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
-  "exports": "./dist/modern/index.js",
   "types": "./dist/types/index.d.ts",
+  "exports": {
+    "import": "./dist/modern/index.js",
+    "require": "./dist/cjs/index.js"
+  },
   "umd:main": "./dist/magic.js",
   "jsdelivr": "./dist/magic.js",
   "externals": {

scripts/bin/wsrun/build-package.ts

@@ -7,7 +7,7 @@
 
 import pLimit from 'p-limit';
 import isCI from 'is-ci';
-import { microbundle } from '../../utils/microbundle';
+import { build } from '../../utils/microbundle';
 import { runAsyncProcess } from '../../utils/run-async-process';
 
 function getExternalsFromPkgJson(pkgJson: any): string {
@@ -22,42 +22,46 @@ function getExternalsFromPkgJson(pkgJson: any): string {
 }
 
 async function cjs() {
-  await microbundle('build', {
+  const pkgJson = require(`${process.cwd()}/package.json`);
+  await build({
     format: 'cjs',
-    target: require(`${process.cwd()}/package.json`).target,
-    output: require(`${process.cwd()}/package.json`).main,
-    external: getExternalsFromPkgJson(require(`${process.cwd()}/package.json`)),
+    target: pkgJson.target,
+    output: pkgJson.exports?.require ?? pkgJson.main,
+    external: getExternalsFromPkgJson(pkgJson),
     sourcemap: true,
   });
 }
 
 async function esm() {
-  await microbundle('build', {
+  const pkgJson = require(`${process.cwd()}/package.json`);
+  await build({
     format: 'es',
-    target: require(`${process.cwd()}/package.json`).target,
-    output: require(`${process.cwd()}/package.json`).module,
-    external: getExternalsFromPkgJson(require(`${process.cwd()}/package.json`)),
+    target: pkgJson.target,
+    output: pkgJson.module,
+    external: getExternalsFromPkgJson(pkgJson),
     sourcemap: true,
   });
 }
 
 async function modern() {
-  await microbundle('build', {
+  const pkgJson = require(`${process.cwd()}/package.json`);
+  await build({
     format: 'modern',
-    target: require(`${process.cwd()}/package.json`).target,
-    output: require(`${process.cwd()}/package.json`).exports,
+    target: pkgJson.target,
+    output: typeof pkgJson.exports === 'string' ? pkgJson.exports : pkgJson.exports?.import,
     external: getExternalsFromPkgJson(require(`${process.cwd()}/package.json`)),
     sourcemap: true,
   });
 }
 
 async function cdn() {
-  await microbundle('build', {
+  const pkgJson = require(`${process.cwd()}/package.json`);
+  await build({
     source: 'src/index.cdn.ts',
     format: 'iife',
-    target: require(`${process.cwd()}/package.json`).target,
-    output: require(`${process.cwd()}/package.json`)['umd:main'],
-    name: require(`${process.cwd()}/package.json`).umdGlobal,
+    target: pkgJson.target,
+    output: pkgJson['umd:main'],
+    name: pkgJson.umdGlobal,
     external: 'none',
     sourcemap: false,
   });

scripts/utils/microbundle.ts

@@ -3,8 +3,7 @@ import { environment } from './environment';
 
 type MicrobundleFormat = 'modern' | 'es' | 'cjs' | 'umd' | 'iife';
 
-export async function microbundle(
-  cmd: 'build' | 'watch',
+export async function build(
   options: {
     source?: string;
     target?: string;
@@ -18,7 +17,7 @@ export async function microbundle(
   if (options.output) {
     /* eslint-disable prettier/prettier */
     const args = [
-      cmd, options.source ?? 'src/index.ts',
+      'build', options.source ?? 'src/index.ts',
       '--tsconfig', 'tsconfig.json',
       '--target', options.target ?? 'web',
       '--jsx', 'React.createElement',

yarn.lock

@@ -4118,19 +4118,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@magic-sdk/commons@^2.0.2, @magic-sdk/commons@workspace:packages/@magic-sdk/commons":
+"@magic-sdk/commons@^2.0.3, @magic-sdk/commons@workspace:packages/@magic-sdk/commons":
   version: 0.0.0-use.local
   resolution: "@magic-sdk/commons@workspace:packages/@magic-sdk/commons"
   dependencies:
-    "@magic-sdk/provider": ^6.0.2
+    "@magic-sdk/provider": ^6.0.3
     "@magic-sdk/types": ^5.0.1
   peerDependencies:
     "@magic-sdk/provider": ">=4.3.0"
     "@magic-sdk/types": ">=3.1.1"
   languageName: unknown
   linkType: soft
 
-"@magic-sdk/provider@^6.0.2, @magic-sdk/provider@workspace:packages/@magic-sdk/provider":
+"@magic-sdk/provider@^6.0.3, @magic-sdk/provider@workspace:packages/@magic-sdk/provider":
   version: 0.0.0-use.local
   resolution: "@magic-sdk/provider@workspace:packages/@magic-sdk/provider"
   dependencies:
@@ -4155,8 +4155,8 @@ __metadata:
     "@babel/core": ^7.15.0
     "@babel/plugin-transform-flow-strip-types": ^7.14.5
     "@babel/runtime": ~7.10.4
-    "@magic-sdk/commons": ^2.0.2
-    "@magic-sdk/provider": ^6.0.2
+    "@magic-sdk/commons": ^2.0.3
+    "@magic-sdk/provider": ^6.0.3
     "@magic-sdk/types": ^5.0.1
     "@react-native-async-storage/async-storage": ^1.15.5
     "@types/lodash": ^4.14.158
@@ -13746,8 +13746,8 @@ fsevents@^1.2.7:
     "@babel/core": ^7.9.6
     "@babel/plugin-proposal-optional-chaining": ^7.9.0
     "@babel/runtime": ^7.9.6
-    "@magic-sdk/commons": ^2.0.2
-    "@magic-sdk/provider": ^6.0.2
+    "@magic-sdk/commons": ^2.0.3
+    "@magic-sdk/provider": ^6.0.3
     "@magic-sdk/types": ^5.0.1
     localforage: ^1.7.4
     localforage-driver-memory: ^1.0.5