Support vite, remove E2E_ENABLED and build as esm (#2)

feat: support vite, bundle as ESM and CJS

README.md

@@ -3,13 +3,14 @@
 [![npm](https://img.shields.io/npm/dm/@lmwn/rollup-plugin-inject-data-qa.svg)](https://www.npmjs.com/package/@lmwn/rollup-plugin-inject-data-qa)
 [![semantic-release](https://img.shields.io/badge/semantic-release-e10079.svg?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-![ts](https://badgen.net/badge/Built%20With/TypeScript/blue) 
+![ts](https://badgen.net/badge/Built%20With/TypeScript/blue)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 rollup plugin of react and styled-component that can injection `data-qa` attribute to DOM that can display/hide with ENV flag.
 
 inspired by
+
 - [babel-plugin-transform-react-styled-components-qa](https://www.npmjs.com/package/babel-plugin-transform-react-styled-components-qa)
 - [babel-plugin-transform-react-qa-classes](https://www.npmjs.com/package/babel-plugin-transform-react-qa-classes)
 
@@ -45,25 +46,25 @@ inspired by
 **input**
 
 ```js
-  const StyledA = styled.div`...`
+const StyledA = styled.div`...`
 
-  const ComponentA = () => (
-    <div>
-      <StyledA>...</StyledA>
-    </div>
-  )
+const ComponentA = () => (
+	<div>
+		<StyledA>...</StyledA>
+	</div>
+)
 ```
 
 **output**
 
 ```js
-  const ComponentA = () => (
-    <div data-qa="component-a">
-      <div className="styled-xxx" data-qa="styled-a">
-        ...
-      </div>
-    </div>
-  )
+const ComponentA = () => (
+	<div data-qa="component-a">
+		<div className="styled-xxx" data-qa="styled-a">
+			...
+		</div>
+	</div>
+)
 ```
 
 ## Params

package.json

@@ -1,10 +1,11 @@
 {
-  "name": "@lmwn/rollup-plugin-inject-data-qa",
+  "name": "rollup-plugin-data-qa",
   "version": "1.0.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/wongnai/rollup-plugin-data-qa.git"
   },
+  "type": "module",
   "author": "LINE MAN Wongnai Frontend Team",
   "homepage": "https://github.com/wongnai/rollup-plugin-data-qa#readme",
   "license": "MIT",
@@ -17,6 +18,16 @@
     "e2e",
     "data-qa"
   ],
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "require": "./index.cjs",
+      "default": "./index.js"
+    }
+  },
   "scripts": {
     "prepare": "husky install",
     "lint": "eslint --ext .tsx,.ts src",
@@ -30,15 +41,14 @@
   "dependencies": {
     "@rollup/pluginutils": "5.0.2",
     "change-case": "4.1.2",
-    "estree-walker": "3.0.1",
+    "estree-walker": "2.0.2",
     "lodash": "4.17.21",
     "magic-string": "0.27.0"
   },
   "devDependencies": {
     "@optimize-lodash/rollup-plugin": "4.0.1",
     "@rollup/plugin-commonjs": "21.0.0",
     "@rollup/plugin-node-resolve": "13.0.0",
-    "@rollup/plugin-typescript": "6.0.0",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/commit-analyzer": "8.0.1",
     "@semantic-release/git": "9.0.0",
@@ -59,9 +69,8 @@
     "rollup": "2.58.0",
     "rollup-plugin-cleaner": "1.0.0",
     "rollup-plugin-copy": "3.3.0",
-    "rollup-plugin-multi-input": "1.3.1",
     "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "4.1.1",
+    "rollup-plugin-ts": "3.4.5",
     "semantic-release": "21.0.0",
     "ts-jest": "27.0.7",
     "ttypescript": "1.5.15",

rollup.config.js

@@ -1,17 +1,14 @@
 import without from 'lodash/without'
-import path from 'path'
-import cleaner from 'rollup-plugin-cleaner'
+
 import copyTo from 'rollup-plugin-copy'
-import multiInput from 'rollup-plugin-multi-input'
 import { terser } from 'rollup-plugin-terser'
-import visualizer from 'rollup-plugin-visualizer'
-import typescript from 'ttypescript'
+import ttypescript from 'ttypescript'
 
 import { optimizeLodashImports } from '@optimize-lodash/rollup-plugin'
 import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
-import ts from '@rollup/plugin-typescript'
 import { createFilter } from '@rollup/pluginutils'
+import ts from 'rollup-plugin-ts'
 
 import config from './package.json'
 
@@ -21,50 +18,47 @@ const external = createFilter(EXTERNAL, null, {
 	resolve: false,
 })
 
-const cjsBundle = {
-	input: ['src/**/!(*.spec|*.d).ts', '!src/mocks/**/*'],
-	output: {
-		exports: 'named',
-		format: 'cjs',
-		dir: config.deploy,
-		sourcemap: true,
-	},
-	external,
-	plugins: [
-		cleaner({
-			targets: [config.deploy],
-		}),
-		multiInput(),
-		commonjs(),
-		resolve(),
-		optimizeLodashImports(),
-		ts({
-			typescript,
-			tsconfig: './tsconfig.json',
-			outDir: config.deploy,
-			noEmit: false,
-			declaration: true,
-			emitDeclarationOnly: true,
-			include: ['src/**/*.ts'],
-			exclude: ['src/**/*.spec.ts', 'src/mocks/**/*'],
-		}),
-		terser(),
-		visualizer({
-			filename: path.resolve(config.deploy, 'stat.html'),
-		}),
-		copyTo({
-			targets: [
-				{
-					src: './package.json',
-					dest: config.deploy,
-				},
-				{
-					src: './README.md',
-					dest: config.deploy,
+const generateBundle = format => {
+	const isCJS = format === 'cjs'
+	const isESM = format === 'esm'
+
+	return {
+		input: ['src/index.ts'],
+		output: {
+			exports: 'named',
+			format,
+			dir: config.deploy,
+			entryFileNames: `[name].${isCJS ? 'c' : ''}js`,
+		},
+		external,
+		plugins: [
+			commonjs(),
+			resolve(),
+			ts({
+				typescript: ttypescript,
+				tsconfig: {
+					fileName: 'tsconfig.json',
+					hook: resolvedConfig => ({ ...resolvedConfig, declaration: isESM }),
 				},
-			],
-		}),
-	],
+				include: ['src/**/*.ts'],
+				exclude: ['src/**/*.spec.ts', 'src/mocks/**/*'],
+			}),
+			optimizeLodashImports(),
+			terser(),
+			copyTo({
+				targets: [
+					{
+						src: './package.json',
+						dest: config.deploy,
+					},
+					{
+						src: './README.md',
+						dest: config.deploy,
+					},
+				],
+			}),
+		],
+	}
 }
 
-export default [cjsBundle]
+export default [generateBundle('cjs'), generateBundle('esm')]

src/utils/magicString/react/findFunctionComponentName/index.ts

@@ -8,6 +8,8 @@ export default function findFunctionComponentName({
 }: FindFunctionComponentNameParams) {
 	if (node.type === 'ExportNamedDeclaration' && node.declaration?.id?.name) {
 		return node.declaration.id.name
+	} else if (node.type === 'ExportDefaultDeclaration' && node.declaration?.id?.name) {
+		return node.declaration.id.name
 	} else if (parent?.type === 'VariableDeclarator' && parent?.id && isReactComponent(node)) {
 		return parent.id.name
 	}

src/utils/magicString/react/isReactComponent/index.ts

@@ -7,7 +7,7 @@ export default function isReactComponent(node: Record<string, any>): boolean {
 		return true
 	}
 
-	const nodeBody = node.body
+	const nodeBody = node?.body
 	const lastNodeBody = last(nodeBody?.body) as Record<string, any>
 
 	if (lastNodeBody?.type === 'ReturnStatement') {

src/utils/magicString/react/isReactNode/index.ts

@@ -1,3 +1,6 @@
 export default function isReactNode(node: Record<string, any>) {
-	return node.callee?.object?.name === 'React' && node.callee?.property?.name === 'createElement'
+	return (
+		(node?.callee?.object?.name === 'React' && node?.callee?.property?.name === 'createElement') ||
+		(node?.callee?.name === 'jsxDEV' && node.arguments?.[0]?.name !== 'Fragment')
+	)
 }

tsconfig.json

@@ -1,11 +1,11 @@
 {
 	"compilerOptions": {
-		"target": "es2016",
-		"module": "esnext",
+		"target": "ES6",
+		"module": "ESNext",
 		"strict": true,
 		"baseUrl": "./src",
 		"importHelpers": true,
-		"moduleResolution": "node",
+		"moduleResolution": "Node",
 		"esModuleInterop": true,
 		"allowSyntheticDefaultImports": true,
 		"sourceMap": true,
@@ -15,7 +15,6 @@
 		"resolveJsonModule": true,
 		"isolatedModules": false,
 		"strictNullChecks": true,
-		"suppressImplicitAnyIndexErrors": true,
 		"emitDecoratorMetadata": false,
 		"jsx": "react-jsx",
 		"useUnknownInCatchVariables": false