Update npm package structure

1. Files are now organized as follows to fix ESM imports[^1][^2]:
- `dist/*.cjs.js` -> `dist/cjs/*.js`
- `dist/*.esm.js` -> `dist/esm/*.js`

2. `dist/{cjs,esm}/**/*.js` are now not bundled with rollup to avoid
   duplicated bundling.

[^1]: UMD files are kept in the root of `dist/` to avoid breaking
      existing code that loads them from CDN instead of `package.json`'s
      `exports` field.
[^2]: ESM imports were broken with Node.js because files are not
      suffixed with mjs nor `type: module` is not specified in root
      `package.json`. Now `dist/esm/package.json` specifies `type: module`.

packages/npm-packages/ruby-3.2-wasm-wasi/package.json

@@ -2,35 +2,20 @@
   "name": "@ruby/3.2-wasm-wasi",
   "version": "2.3.0",
   "description": "Ruby 3.2 built on WASI",
-  "main": "./dist/index.cjs.js",
-  "umd:main": "./dist/index.umd.js",
-  "module": "./dist/index.esm.js",
-  "typings": "./dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "exports": {
     ".": {
-      "browser": "./dist/index.esm.js",
-      "umd": "./dist/index.umd.js",
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/browser.d.ts"
+      "browser": "./dist/esm/index.js",
+      "umd": "./dist/umd/index.js",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
-    "./dist/browser": {
-      "browser": "./dist/browser.esm.js",
-      "umd": "./dist/browser.umd.js",
-      "import": "./dist/browser.esm.js",
-      "require": "./dist/browser.cjs.js",
-      "types": "./dist/browser.d.ts"
-    },
-    "./dist/browser.script": {
-      "browser": "./dist/browser.script.esm.js",
-      "umd": "./dist/browser.script.umd.js",
-      "import": "./dist/browser.script.esm.js",
-      "types": "./dist/browser.script.d.ts"
-    },
-    "./dist/node": {
-      "import": "./dist/node.esm.js",
-      "require": "./dist/node.cjs.js",
-      "types": "./dist/node.d.ts"
+    "./dist/*": {
+      "browser": "./dist/esm/*.js",
+      "umd": "./dist/umd/*.js",
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js"
     }
   },
   "files": [
@@ -45,7 +30,7 @@
     "build:static": "npm run build:static:files && npm run build:static:compat",
     "build:wasm": "../ruby-wasm-wasi/tools/pack-ruby-wasm.sh ../../../rubies/3.2-wasm32-unknown-wasi-full-js-debug ./dist",
     "build:rollup": "rollup -c rollup.config.mjs",
-    "build": "npm run build:deps && npm run build:static && npm run build:wasm && npm run build:rollup"
+    "build": "npm run build:deps && npm run build:static && npm run build:wasm && npm run build:rollup && ../ruby-wasm-wasi/tools/post-build.sh ./dist"
   },
   "repository": "https://github.com/ruby/ruby.wasm",
   "homepage": "https://github.com/ruby/ruby.wasm/tree/main/packages/npm-packages/ruby-3.2-wasm-wasi",

packages/npm-packages/ruby-head-wasm-wasi/package.json

@@ -2,35 +2,20 @@
   "name": "@ruby/head-wasm-wasi",
   "version": "2.3.0",
   "description": "Ruby head built on WASI",
-  "main": "./dist/index.cjs.js",
-  "umd:main": "./dist/index.umd.js",
-  "module": "./dist/index.esm.js",
-  "typings": "./dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "exports": {
     ".": {
-      "browser": "./dist/index.esm.js",
-      "umd": "./dist/index.umd.js",
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/browser.d.ts"
+      "browser": "./dist/esm/index.js",
+      "umd": "./dist/umd/index.js",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
-    "./dist/browser": {
-      "browser": "./dist/browser.esm.js",
-      "umd": "./dist/browser.umd.js",
-      "import": "./dist/browser.esm.js",
-      "require": "./dist/browser.cjs.js",
-      "types": "./dist/browser.d.ts"
-    },
-    "./dist/browser.script": {
-      "browser": "./dist/browser.script.esm.js",
-      "umd": "./dist/browser.script.umd.js",
-      "import": "./dist/browser.script.esm.js",
-      "types": "./dist/browser.script.d.ts"
-    },
-    "./dist/node": {
-      "import": "./dist/node.esm.js",
-      "require": "./dist/node.cjs.js",
-      "types": "./dist/node.d.ts"
+    "./dist/*": {
+      "browser": "./dist/esm/*.js",
+      "umd": "./dist/umd/*.js",
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js"
     }
   },
   "files": [
@@ -45,7 +30,7 @@
     "build:static": "npm run build:static:files && npm run build:static:compat",
     "build:wasm": "../ruby-wasm-wasi/tools/pack-ruby-wasm.sh ../../../rubies/head-wasm32-unknown-wasi-full-js-debug ./dist",
     "build:rollup": "rollup -c rollup.config.mjs",
-    "build": "npm run build:deps && npm run build:static && npm run build:wasm && npm run build:rollup"
+    "build": "npm run build:deps && npm run build:static && npm run build:wasm && npm run build:rollup && ../ruby-wasm-wasi/tools/post-build.sh ./dist"
   },
   "repository": "https://github.com/ruby/ruby.wasm",
   "homepage": "https://github.com/ruby/ruby.wasm/tree/main/packages/npm-packages/ruby-head-wasm-wasi",

packages/npm-packages/ruby-wasm-wasi/package.json

@@ -2,35 +2,24 @@
   "name": "@ruby/wasm-wasi",
   "version": "2.3.0",
   "description": "WebAssembly port of CRuby with WASI",
-  "main": "./dist/index.cjs.js",
-  "umd:main": "./dist/index.umd.js",
-  "module": "./dist/index.esm.js",
-  "typings": "./dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "browser": "./dist/index.umd.js",
+  "typings": "./dist/esm/index.d.ts",
   "exports": {
     ".": {
-      "browser": "./dist/index.esm.js",
-      "umd": "./dist/index.umd.js",
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/browser.d.ts"
+      "browser": "./dist/esm/index.js",
+      "umd": "./dist/umd/index.js",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/esm/browser.d.ts"
     },
-    "./dist/browser": {
-      "browser": "./dist/browser.esm.js",
-      "umd": "./dist/browser.umd.js",
-      "import": "./dist/browser.esm.js",
-      "require": "./dist/browser.cjs.js",
-      "types": "./dist/browser.d.ts"
-    },
-    "./dist/browser.script": {
-      "browser": "./dist/browser.script.esm.js",
-      "umd": "./dist/browser.script.umd.js",
-      "import": "./dist/browser.script.esm.js",
-      "types": "./dist/browser.script.d.ts"
-    },
-    "./dist/node": {
-      "import": "./dist/node.esm.js",
-      "require": "./dist/node.cjs.js",
-      "types": "./dist/node.d.ts"
+    "./dist/*": {
+      "browser": "./dist/esm/*.js",
+      "umd": "./dist/umd/*.js",
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js",
+      "types": "./dist/esm/*.d.ts"
     }
   },
   "files": [
@@ -61,8 +50,9 @@
     "serve:example": "bundle exec ruby -run -e httpd ./example -p 8085",
     "format": "prettier --write .",
     "build:static": "./tools/pack-bindgen-src.sh ./dist",
-    "build:rollup": "rollup -c rollup.config.mjs && tsc --build",
-    "build": "npm run build:static && npm run build:rollup"
+    "build:rollup": "rollup -c rollup.config.mjs",
+    "build:tsc": "tsc -p tsconfig.json && tsc -p tsconfig.cjs.json",
+    "build": "npm run build:rollup && npm run build:tsc && npm run build:static && ./tools/post-build.sh ./dist"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

packages/npm-packages/ruby-wasm-wasi/rollup.config.mjs

@@ -5,56 +5,26 @@ import nodePolyfills from "rollup-plugin-polyfill-node";
 
 const typescriptOptions = { tsconfig: "./tsconfig.json", declaration: false };
 
-function variant(basename, { browser = false } = {}) {
+function config({ basename }) {
   return {
     input: `src/${basename}.ts`,
-    output: [
-      {
-        file: `dist/${basename}.umd.js`,
-        format: "umd",
-        name: "ruby-wasm-wasi",
-      },
-      {
-        file: `dist/${basename}.esm.js`,
-        format: "es",
-        name: "ruby-wasm-wasi",
-      },
-      {
-        file: `dist/${basename}.cjs.js`,
-        format: "cjs",
-        exports: "named",
-      },
-    ],
+    output: {
+      file: `dist/${basename}.umd.js`,
+      format: "umd",
+      name: "ruby-wasm-wasi",
+    },
     plugins: [
-      ...(browser
-        ? [nodePolyfills(), inject({ Buffer: ["buffer", "Buffer"] })]
-        : []),
+      nodePolyfills(),
+      inject({ Buffer: ["buffer", "Buffer"] }),
       typescript(typescriptOptions),
-      nodeResolve(),
-    ],
+      nodeResolve({ resolveOnly: ["@wasmer/wasi"] })
+    ]
   };
 }
 
 /** @type {import('rollup').RollupOptions[]} */
 export default [
-  variant("index"),
-  variant("browser", { browser: true }),
-  variant("browser.script", { browser: true }),
-  {
-    input: `src/node.ts`,
-    output: [
-      {
-        file: `dist/node.esm.js`,
-        format: "es",
-        name: "ruby-wasm-wasi",
-      },
-      {
-        file: `dist/node.cjs.js`,
-        format: "cjs",
-        exports: "named",
-      },
-    ],
-    plugins: [typescript(typescriptOptions), nodeResolve()],
-    external: ["wasi"],
-  },
-];
+  { basename: "browser.script" },
+  { basename: "browser" },
+  { basename: "index" },
+].map(config);

packages/npm-packages/ruby-wasm-wasi/src/browser.script.ts

@@ -1,4 +1,4 @@
-import { DefaultRubyVM } from "./browser";
+import { DefaultRubyVM } from "./browser.js";
 
 export const main = async (
   pkg: { name: string; version: string },

packages/npm-packages/ruby-wasm-wasi/src/browser.ts

@@ -1,5 +1,5 @@
 import { init, WASI } from "@wasmer/wasi";
-import { RubyVM } from "./index";
+import { RubyVM } from "./index.js";
 
 const consolePrinter = () => {
   let memory: WebAssembly.Memory | undefined = undefined;

packages/npm-packages/ruby-wasm-wasi/src/index.ts

@@ -1,10 +1,10 @@
-import * as RbAbi from "./bindgen/rb-abi-guest";
+import * as RbAbi from "./bindgen/rb-abi-guest.js";
 import {
   RbJsAbiHost,
   addRbJsAbiHostToImports,
   JsAbiResult,
   JsAbiValue,
-} from "./bindgen/rb-js-abi-host";
+} from "./bindgen/rb-js-abi-host.js";
 
 /**
  * A Ruby VM instance

packages/npm-packages/ruby-wasm-wasi/src/node.ts

@@ -1,5 +1,5 @@
 import { WASI } from "wasi";
-import { RubyVM } from "./index";
+import { RubyVM } from "./index.js";
 
 export const DefaultRubyVM = async (
   rubyModule: WebAssembly.Module,

packages/npm-packages/ruby-wasm-wasi/tools/pack-bindgen-src.sh

@@ -9,5 +9,7 @@ fi
 package_dir="$(cd "$(dirname "$0")/.." && pwd)"
 dist_dir="$1"
 
-mkdir -p "$dist_dir/bindgen"
-find "$package_dir/src/bindgen" -name "*.d.ts" -exec cp {} "$dist_dir/bindgen" \;
+for format in "esm" "cjs"; do
+  mkdir -p "$dist_dir/$format/bindgen"
+  find "$package_dir/src/bindgen" -name "*.d.ts" -exec cp {} "$dist_dir/$format/bindgen" \;
+done

packages/npm-packages/ruby-wasm-wasi/tools/pack-compat-shim.mjs

@@ -13,43 +13,47 @@ const parseArgs = () => {
   return options;
 };
 
+const dirname = path.dirname(new URL(import.meta.url).pathname);
+
 const shimContent = (target, pkg) => {
   const deprecated = target.deprecated ?? true;
   const file = target.file;
-  const suffix = file.split(".").slice(-2).join(".");
+  const stem = path.basename(file).replace(`.js`, "");
+  const importPath = stem === "index" ? "" : `/dist/${stem}`;
   const deprecationMessage = (original, replacement) => {
     return (
-      `DEPRECATED(${pkg}): "${file}" will be moved to "@ruby/wasm-wasi" in the next major release.\n` +
+      `DEPRECATED(${pkg}): "dist/${stem}" will be moved to "@ruby/wasm-wasi" in the next major release.\n` +
       `Please replace your \\\`${original}\\\` with \\\`${replacement}\\\``
     );
   };
 
   let originalImport = "";
   let newImport = "";
-  switch (suffix) {
-    case "cjs.js":
-      originalImport = `require('${pkg}/dist/${file}');`;
-      newImport = `require('@ruby/wasm-wasi/dist/${file}');`;
+  let content = "";
+  switch (target.format) {
+    case "cjs":
+      originalImport = `require('${pkg}${importPath}');`;
+      newImport = `require('@ruby/wasm-wasi${importPath}');`;
+      content = `module.exports = require('@ruby/wasm-wasi${importPath}');`;
       break;
-    case "umd.js":
-      originalImport = `require('${pkg}/dist/${file}');`;
-      newImport = `require('@ruby/wasm-wasi/dist/${file}');`;
+    case "umd":
+      originalImport = `require('${pkg}${importPath}');`;
+      newImport = `require('@ruby/wasm-wasi${importPath}');`;
+      content = fs.readFileSync(
+        path.join(dirname, "..", "dist", file),
+        "utf-8",
+      );
       break;
-    case "d.ts":
-    case "esm.js":
-      originalImport = `import * from '${pkg}/dist/${file}';`;
-      newImport = `import * from '@ruby/wasm-wasi/dist/${file}';`;
+    case "esm":
+      originalImport = `import * from '${pkg}${importPath}';`;
+      newImport = `import * from '@ruby/wasm-wasi${importPath}';`;
+      content = `export * from '@ruby/wasm-wasi${importPath}';`;
       break;
     default:
       throw new Error(`Unknown suffix: ${suffix} for target ${file}`);
   }
 
-  const dirname = path.dirname(new URL(import.meta.url).pathname);
-  const content = fs.readFileSync(
-    path.join(dirname, "..", "dist", file),
-    "utf-8",
-  );
-  if (suffix === "d.ts" || !deprecated) {
+  if (!deprecated) {
     return content;
   }
   const deprecation =
@@ -59,27 +63,23 @@ const shimContent = (target, pkg) => {
 
 const main = () => {
   const targets = [
-    { file: "bindgen/rb-abi-guest.d.ts" },
-    { file: "bindgen/rb-js-abi-host.d.ts" },
-    { file: "browser.cjs.js" },
-    { file: "browser.d.ts" },
+    { format: "cjs", file: "cjs/browser.js" },
     // They can be used by dynamic-import or <script> tag in browser
     // and there is no easy way to replace them with `@ruby/wasm-wasi`
     // so we don't deprecate them at this moment.
-    { file: "browser.esm.js", deprecated: false },
-    { file: "browser.umd.js", deprecated: false },
+    { format: "esm", file: "esm/browser.js", deprecated: false },
+    { format: "umd", file: "browser.umd.js", deprecated: false },
+
+    { format: "cjs", file: "cjs/browser.script.js" },
+    { format: "esm", file: "esm/browser.script.js" },
+    { format: "umd", file: "browser.script.umd.js" },
+
+    { format: "cjs", file: "cjs/index.js" },
+    { format: "esm", file: "esm/index.js" },
+    { format: "umd", file: "index.umd.js" },
 
-    { file: "browser.script.cjs.js" },
-    { file: "browser.script.d.ts" },
-    { file: "browser.script.esm.js" },
-    { file: "browser.script.umd.js" },
-    { file: "index.cjs.js" },
-    { file: "index.d.ts" },
-    { file: "index.esm.js" },
-    { file: "index.umd.js" },
-    { file: "node.cjs.js" },
-    { file: "node.d.ts" },
-    { file: "node.esm.js" },
+    { format: "cjs", file: "cjs/node.js" },
+    { format: "esm", file: "esm/node.js" },
   ];
 
   const options = parseArgs();