diff --git a/UPGRADE.md b/UPGRADE.md index 987031f..c238422 100644 --- a/UPGRADE.md +++ b/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: {}, diff --git a/package.json b/package.json index 0cc37ae..b3494e4 100644 --- a/package.json +++ b/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", diff --git a/tsconfig.inertia-helpers.json b/tsconfig.inertia-helpers.json index b6531ff..2024efc 100644 --- a/tsconfig.inertia-helpers.json +++ b/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" diff --git a/tsconfig.json b/tsconfig.json index be715c9..d926f37 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,8 +1,8 @@ { "compilerOptions": { "outDir": "./dist", - "target": "ES2019", - "module": "commonjs", + "target": "ES2020", + "module": "ES2020", "moduleResolution": "node", "resolveJsonModule": true, "strict": true,