Merge pull request #193 from studiometa/feature/cjs-esm-exports

[Feature] Add support for CommonJS usage

Author: titouanmathis

package-lock.json

@@ -16,21 +16,12 @@
     "lint:docs": "prettier --check 'packages/docs/**/*.{md,js,html,vue}'",
     "lint:types": "tsc --build tsconfig.lint.json",
     "fix:docs": "prettier --write 'packages/docs/**/*.{md,js,html,vue}'",
-    "build": "npm run build:babel && npm run build:types && npm run build:bundle && npm run build:cp-files",
+    "build": "rm -rf dist && npm run build:pkg && npm run build:types && npm run build:cp-files",
     "build:cp-files": "cp packages/js-toolkit/package.json dist/ && cp LICENSE dist/ && cp README.md dist",
     "build:types": "tsc --build tsconfig.build.json",
-    "build:babel": "babel --no-comments --delete-dir-on-start --out-dir dist/ packages/js-toolkit",
-    "build:bundle": "npm run build:bundle:modern && npm run build:bundle:umd",
-    "build:bundle:modern": "NODE_TARGET=bundle microbundle -i packages/js-toolkit/index.js -o dist/index.modern.js -f modern --no-sourcemap --no-pkg-main --external none",
-    "build:bundle:umd": "NODE_TARGET=bundle microbundle -i packages/js-toolkit/index.js -o dist/index.umd.js -f umd --no-sourcemap --name Base --no-pkg-main --external none"
+    "build:pkg": "node scripts/build.js"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.7",
-    "@babel/core": "^7.16.5",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.16.5",
-    "@babel/preset-env": "^7.16.5",
-    "@studiometa/browserslist-config": "^1.0.1",
     "@studiometa/eslint-config": "^2.1.3",
     "@studiometa/prettier-config": "^2.1.1",
     "@studiometa/stylelint-config": "^2.0.0",
@@ -39,10 +30,10 @@
     "@types/node": "^16.11.13",
     "@typescript-eslint/eslint-plugin": "^4.29.3",
     "@typescript-eslint/parser": "^4.29.3",
-    "babel-plugin-add-import-extension": "^1.6.0",
+    "esbuild": "^0.14.12",
     "eslint": "^7.32.0",
     "eslint-plugin-jest": "^24.4.0",
-    "microbundle": "^0.13.3",
+    "fast-glob": "^3.2.11",
     "prettier": "^2.5.1",
     "typescript": "^4.5.4"
   }

package.json

@@ -5,7 +5,7 @@ Test if two circles collide with one another.
 ## Usage
 
 ```js
-import { collideCircleCircle } from '@studiometa/js-toolkit/utils/collide';
+import { collideCircleCircle } from '@studiometa/js-toolkit/utils';
 
 const circle1 = {
   x: 40,

packages/docs/utils/collision/collideCircleCircle.md

@@ -71,8 +71,12 @@ Select an easing function below to see how it will transform the given progress
   const fn = computed(() => (name.value === 'linear' ? linear : easingFunctions.value[name.value]));
   const count = 100;
 
-  import('@studiometa/js-toolkit/utils/math/ease.js').then((mod) => {
-    easingFunctions.value = mod;
+  import('@studiometa/js-toolkit/utils').then((mod) => {
+    for (const [key, value] of Object.entries(mod)) {
+      if (key.startsWith('ease')) {
+        easingFunctions.value[key] = value;
+      }
+    }
   });
 </script>
 

packages/docs/utils/math/ease.md

@@ -17,16 +17,27 @@
   "homepage": "https://github.com/studiometa/js-toolkit#readme",
   "type": "module",
   "sideEffects": false,
-  "unpkg": "./index.umd.js",
   "main": "./index.js",
   "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs",
+      "types": "./index.d.ts"
+    },
+    "./utils": {
+      "import": "./utils/index.js",
+      "require": "./utils/index.cjs",
+      "types": "./utils/index.d.ts"
+    }
+  },
   "keywords": [
     "js-toolkit",
     "component",
     "studiometa",
     "toolkit"
   ],
-  "types": "index.d.ts",
   "dependencies": {
     "@babel/runtime": "^7.15.4",
     "deepmerge": "^4.2.2"

packages/js-toolkit/package.json

@@ -12,7 +12,7 @@
  * @param {Boolean} force Force usage of non-square DOMElements
  * @return {Circle} Circle object that can be used in collides functions
  */
-export default function collidePointRect({ x, y, width, height }, force = false) {
+export default function boundingRectToCircle({ x, y, width, height }, force = false) {
   if (width !== height && !force)
     throw new Error('Initial DOMElement is not a square. Please use the force mode.');
   return {

packages/js-toolkit/utils/collide/boundingRectToCircle.js

@@ -4,6 +4,7 @@ export { default as keyCodes } from './keyCodes.js';
 export { default as memoize } from './memoize.js';
 export { default as nextFrame } from './nextFrame.js';
 export { default as throttle } from './throttle.js';
+export { default as scrollTo } from './scrollTo.js';
 export { matrix, transition } from './css/index.js';
 export {
   objectToURLSearchParams,

packages/js-toolkit/utils/index.js

@@ -47,6 +47,7 @@ Array [
   "nextFrame",
   "objectToURLSearchParams",
   "round",
+  "scrollTo",
   "throttle",
   "transition",
   "withLeadingCharacters",

packages/tests/utils/__snapshots__/index.spec.js.snap

@@ -0,0 +1,45 @@
+const path = require('path');
+const glob = require('fast-glob');
+const esbuild = require('esbuild');
+
+const entryPoints = glob.sync(['packages/js-toolkit/**/*.js', '!**/node_modules/**'], {
+  cwd: path.resolve(__dirname, '..'),
+});
+
+const outdir = path.resolve(__dirname, '../dist');
+
+const defaultOptions = {
+  entryPoints,
+  write: true,
+  outdir,
+};
+
+/**
+ * Build with esbuild.
+ *
+ * @param   {require('esbuild').BuildOptions} opts
+ * @returns {Promise<void>}
+ */
+async function build(opts) {
+  console.log(`Building ${opts.format}...`);
+  const { errors, warnings } = await esbuild.build({
+    ...defaultOptions,
+    ...opts,
+  });
+
+  errors.forEach(console.error);
+  warnings.forEach(console.warn);
+  console.log(`Done building ${opts.format}!`);
+}
+
+build({
+  format: 'esm',
+  // bundle: true,
+  // splitting: true,
+  // chunkNames: '__chunks/[name]-[hash]',
+});
+
+build({
+  format: 'cjs',
+  outExtension: { '.js': '.cjs' },
+});

scripts/build.js

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "noEmit": false,
     "declaration": true,
-    "declarationDir": "dist",
+    "outDir": "dist/",
     "emitDeclarationOnly": true
   }
 }