Build MJS and CJS versions (#189)

Author: timacdonald

UPGRADE.md

@@ -102,6 +102,12 @@ Update your NPM scripts in `package.json`:
   }
 ```
 
+You should also add `"type": "module"` as a top-level key / value pair to your project's `package.json` by running the following command:
+
+```shell
+npm pkg set type="module"
+```
+
 ### Vite compatible imports
 
 Vite only supports ES modules, so if you are upgrading an existing application you will need to replace any `require()` statements with `import`. You may refer to [this pull request](https://github.com/laravel/laravel/pull/5895/files) for an example.
@@ -265,7 +271,37 @@ Then you will need to specify the base URL for assets in your application's entr
 
 ### Optional: Configure Tailwind
 
-If you are using Tailwind, perhaps with one of Laravel's starter kits, you will need to create a `postcss.config.js` file. Tailwind can generate this for you automatically:
+If you are using Tailwind, perhaps with one of Laravel's starter kits, you will need migrate your `tailwind.config.js` to use [Vite compatible imports](#vite-compatible-imports) and exports.
+
+```diff
+- const defaultTheme = require('tailwindcss/defaultTheme');
++ import defaultTheme from 'tailwindcss/defaultTheme';
++ import forms from '@tailwindcss/forms';
+
+/** @type {import('tailwindcss').Config} */
+- module.exports = {
++ export default {
+    content: [
+        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
+        './storage/framework/views/*.php',
+        './resources/views/**/*.blade.php',
+        './resources/js/**/*.vue',
+    ],
+
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
+            },
+        },
+    },
+
+-    plugins: [require('@tailwindcss/forms')],
++    plugins: [forms],
+};
+```
+
+You will also need to create a `postcss.config.cjs` file. Tailwind can generate this for you automatically:
 
 ```shell
 npx tailwindcss init -p
@@ -274,7 +310,7 @@ npx tailwindcss init -p
 Or, you can create it manually:
 
 ```js
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

package.json

@@ -14,15 +14,27 @@
     },
     "license": "MIT",
     "author": "Laravel",
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.cjs",
+            "types": "./dist/index.d.ts"
+        },
+        "./inertia-helpers": {
+            "import": "./inertia-helpers/index.js",
+            "types": "./inertia-helpers/index.d.ts"
+        }
+    },
     "files": [
         "/dist",
         "/inertia-helpers"
     ],
     "scripts": {
         "build": "npm run build-plugin && npm run build-inertia-helpers",
-        "build-plugin": "rm -rf dist && tsc && cp src/dev-server-index.html dist/",
+        "build-plugin": "rm -rf dist && npm run build-plugin-types && npm run build-plugin-esm && npm run build-plugin-cjs && cp src/dev-server-index.html dist/",
+        "build-plugin-types": "tsc --emitDeclarationOnly",
+        "build-plugin-cjs": "esbuild src/index.ts --platform=node --format=cjs --outfile=dist/index.cjs",
+        "build-plugin-esm": "esbuild src/index.ts --platform=node --format=esm --outfile=dist/index.mjs",
         "build-inertia-helpers": "rm -rf inertia-helpers && tsc --project tsconfig.inertia-helpers.json",
         "lint": "eslint --ext .ts ./src ./tests",
         "test": "vitest run"
@@ -31,6 +43,7 @@
         "@types/node": "^18.11.9",
         "@typescript-eslint/eslint-plugin": "^5.21.0",
         "@typescript-eslint/parser": "^5.21.0",
+        "esbuild": "0.16.10",
         "eslint": "^8.14.0",
         "typescript": "^4.6.4",
         "vite": "^4.0.0",

tsconfig.inertia-helpers.json

@@ -1,9 +1,7 @@
 {
     "extends": "./tsconfig.json",
     "compilerOptions": {
-        "outDir": "inertia-helpers",
-        "target": "ES2020",
-        "module": "ES2020",
+        "outDir": "inertia-helpers"
     },
     "include": [
         "./src/inertia-helpers/index.ts"

tsconfig.json

@@ -1,8 +1,8 @@
 {
     "compilerOptions": {
         "outDir": "./dist",
-        "target": "ES2019",
-        "module": "commonjs",
+        "target": "ES2020",
+        "module": "ES2020",
         "moduleResolution": "node",
         "resolveJsonModule": true,
         "strict": true,