Merge pull request #137 from msgpack/esm

Provides ES modules by setting "module" field in package.json

Author: gfx

.gitignore

@@ -1,6 +1,6 @@
 node_modules/
 dist/
-dist.es5/
+dist.*/
 build/
 .nyc_output/
 coverage/

package.json

@@ -5,12 +5,13 @@
   "author": "The MessagePack community",
   "license": "ISC",
   "main": "./dist/index.js",
-  "browser": "./dist.es5/msgpack.min.js",
+  "browser": "./dist.es5+umd/msgpack.min.js",
+  "module": "./dist.es5+esm/index.js",
   "types": "./dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
     "build": "npm publish --dry-run",
-    "prepare": "npm run clean && tsc -p tsconfig.dist.json && webpack",
+    "prepare": "npm run clean && webpack && tsc --build tsconfig.dist.json tsconfig.dist.es5+esm.json && ts-node tools/esmify.ts dist.es5+esm/*.js dist.es5+esm/*/*.js",
     "prepublishOnly": "run-p 'test:dist:*' && npm run test:browser",
     "clean": "rimraf build dist dist.*",
     "test": "mocha 'test/**/*.test.ts'",
@@ -88,6 +89,7 @@
   "files": [
     "src/**/*.*",
     "dist/**/*.*",
-    "dist.es5/**/*.*"
+    "dist.es5/**/*.*",
+    "dist.es5+esm/**/*.*"
   ]
 }

src/index.ts

@@ -1,28 +1,46 @@
 // Main Functions:
 
-export { encode, EncodeOptions } from "./encode";
-export { decode, DecodeOptions } from "./decode";
-export { decodeAsync, decodeArrayStream, decodeStream } from "./decodeAsync";
+import { encode } from "./encode";
+export { encode };
+import type { EncodeOptions } from "./encode";
+export type { EncodeOptions };
 
-/**
- * @experimental `Decoder` is exported for experimental use.
- */
-export { Decoder } from "./Decoder";
+import { decode } from "./decode";
+export { decode };
+import type { DecodeOptions } from "./decode";
+export { DecodeOptions };
 
-/**
- * @experimental `Encoder` is exported for experimental use.
- */
-export { Encoder } from "./Encoder";
+import { decodeAsync, decodeArrayStream, decodeStream } from "./decodeAsync";
+export { decodeAsync, decodeArrayStream, decodeStream };
+
+import { Decoder } from "./Decoder";
+export { Decoder };
+
+import { Encoder } from "./Encoder";
+export { Encoder };
 
 // Utilitiies for Extension Types:
 
-export { ExtensionCodec, ExtensionCodecType, ExtensionDecoderType, ExtensionEncoderType } from "./ExtensionCodec";
-export { ExtData } from "./ExtData";
-export {
+import { ExtensionCodec } from "./ExtensionCodec";
+export { ExtensionCodec };
+import type { ExtensionCodecType, ExtensionDecoderType, ExtensionEncoderType } from "./ExtensionCodec";
+export type { ExtensionCodecType, ExtensionDecoderType, ExtensionEncoderType };
+import { ExtData } from "./ExtData";
+export { ExtData };
+
+import {
   EXT_TIMESTAMP,
   encodeDateToTimeSpec,
   encodeTimeSpecToTimestamp,
   decodeTimestampToTimeSpec,
   encodeTimestampExtension,
   decodeTimestampExtension,
 } from "./timestamp";
+export {
+  EXT_TIMESTAMP,
+  encodeDateToTimeSpec,
+  encodeTimeSpecToTimestamp,
+  decodeTimestampToTimeSpec,
+  encodeTimestampExtension,
+  decodeTimestampExtension,
+};

tools/esmify.ts

@@ -0,0 +1,13 @@
+#!ts-node
+/* eslint-disable no-console */
+
+import fs from "fs";
+
+const files = process.argv.slice(2);
+
+for (const file of files) {
+  console.info(`Processing ${file}`);
+  const content = fs.readFileSync(file).toString("utf8");
+  const newContent = content.replace(/\bfrom "([^"]+)";/g, 'from "$1.js";');
+  fs.writeFileSync(file, newContent);
+}

tsconfig.dist.es5+esm.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "outDir": "./dist.es5+esm",
+    "declaration": false,
+    "noEmitOnError": true,
+    "incremental": false
+  },
+  "include": ["src/**/*.ts"]
+}

webpack.config.ts

@@ -1,17 +1,17 @@
 import path from "path";
-// @ts-ignore
+// @ts-expect-error
 import webpack from "webpack";
-// @ts-ignore
+// @ts-expect-error
 import { CheckEsVersionPlugin } from "@bitjourney/check-es-version-webpack-plugin";
-// @ts-ignore
+// @ts-expect-error
 import _ from "lodash";
 
 const config = {
   mode: "production",
 
   entry: "./src/index.ts",
   output: {
-    path: path.resolve(__dirname, "dist.es5"),
+    path: path.resolve(__dirname, "dist.es5+umd"),
     library: "MessagePack",
     libraryTarget: "umd",
     globalObject: "this",