Add ESM support for importing the Vite plugin

Author: kylorhall-atlassian

.changeset/large-gifts-sip.md

@@ -0,0 +1,5 @@
+---
+'@compiled/vite-plugin': patch
+---
+
+Split CJS and ESM exports for the Vite Plugin

packages/tsconfig.esm.json

@@ -1,4 +1,4 @@
 {
   "files": [],
-  "references": [{ "path": "react/tsconfig.json" }]
+  "references": [{ "path": "react/tsconfig.json" }, { "path": "vite-plugin/tsconfig.json" }]
 }

packages/tsconfig.json

@@ -13,7 +13,7 @@
     { "path": "parcel-transformer-external/tsconfig.json" },
     { "path": "react/tsconfig.cjs.json" },
     { "path": "utils/tsconfig.json" },
-    { "path": "vite-plugin/tsconfig.json" },
+    { "path": "vite-plugin/tsconfig.cjs.json" },
     { "path": "webpack-loader/tsconfig.json" }
   ]
 }

packages/vite-plugin/package.json

@@ -14,15 +14,14 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "default": "./dist/index.js"
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     }
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
   "files": [
     "dist",
     "src"

packages/vite-plugin/src/index.ts

@@ -19,7 +19,7 @@ import { createDefaultResolver } from './utils';
  * @param userOptions - Plugin configuration options
  * @returns Vite plugin object
  */
-export default function compiledVitePlugin(userOptions: PluginOptions = {}): any {
+function compiled(userOptions: PluginOptions = {}): any {
   const options: PluginOptions = {
     // Vite-specific
     bake: true,
@@ -273,4 +273,6 @@ export default function compiledVitePlugin(userOptions: PluginOptions = {}): any
   };
 }
 
+export { compiled };
 export type { PluginOptions as VitePluginOptions };
+export default compiled;

packages/vite-plugin/tsconfig.cjs.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.options.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist/cjs",
+    "skipLibCheck": true,
+    "tsBuildInfoFile": "tsconfig.cjs.tsbuildinfo"
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["./src/__tests__/**/*"],
+  "references": [
+    { "path": "../babel-plugin/tsconfig.json" },
+    { "path": "../babel-plugin-strip-runtime/tsconfig.json" },
+    { "path": "../css/tsconfig.json" },
+    { "path": "../utils/tsconfig.json" }
+  ]
+}

packages/vite-plugin/tsconfig.json

@@ -2,8 +2,11 @@
   "extends": "../tsconfig.options.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "outDir": "./dist",
-    "skipLibCheck": true
+    "outDir": "./dist/esm",
+    "module": "es6",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "tsBuildInfoFile": "tsconfig.esm.tsbuildinfo"
   },
   "include": ["./src/**/*"],
   "exclude": ["./src/__tests__/**/*"],