Merge pull request #184 from chialab/vite-plugin-commonjs

Add vite-plugin-commonjs

docs/.vitepress/config.js

@@ -101,6 +101,10 @@ export default defineConfig({
                         text: 'postcss-url-rebase',
                         link: '/guide/postcss-url-rebase',
                     },
+                    {
+                        text: 'vite-plugin-commonjs',
+                        link: '/guide/vite-plugin-commonjs',
+                    },
                     {
                         text: 'vitest-axe',
                         link: '/guide/vitest-axe',

docs/guide/vite-plugin-commonjs.md

@@ -0,0 +1,46 @@
+# vite-plugin-commonjs
+
+Convert CommonJS modules to ES Modules on the fly with Vite.
+
+This plugin works only when Vite is used in `serve` mode and aims to prevent the need of optimizing dependencies.
+
+## Install
+
+::: code-group
+
+```sh[npm]
+npm i -D @chialab/vite-plugin-commonjs
+```
+
+```sh[yarn]
+yarn add -D @chialab/vite-plugin-commonjs
+```
+
+```sh[pnpm]
+pnpm add -D @chialab/vite-plugin-commonjs
+```
+
+:::
+
+## Usage
+
+```ts[vite.config.ts]
+import { defineConfig } from 'vite';
+import commonjs from '@chialab/vite-plugin-commonjs';
+
+export default defineConfig({
+    plugins: [
+        commonjs(),
+    ],
+});
+```
+
+## Options
+
+The plugin accepts an options object with the following properties:
+
+### `optimizeDeps`
+
+-   Type: `boolean`
+
+Re-enable dependency optimization. By the default, the plugin disables Vite optimizations.

docs/guide/vitest-axe.md

@@ -1,4 +1,4 @@
-# Vitest Axe matchers
+# vitest-axe
 
 Axe violations matchers for Vitest.
 

docs/guide/vitest-provider-browserstack.md

@@ -1,8 +1,8 @@
-# Browserstack provider for Vitest
+# vitest-provider-browserstack
 
 A browser provider for [Vitest](https://vitest.dev/) that runs tests on [Browserstack](https://www.browserstack.com/).
 
-### Install
+## Install
 
 ::: code-group
 
@@ -20,7 +20,7 @@ pnpm add -D @chialab/vitest-provider-browserstack
 
 :::
 
-### Usage
+## Usage
 
 ::: info
 
@@ -83,7 +83,7 @@ export default {
 };
 ```
 
-### Options
+## Options
 
 `user` and `key` options can be omitted if you have a `BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY` environment variables set.
 

packages/vite-plugin-commonjs/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Chialab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/vite-plugin-commonjs/README.md

@@ -0,0 +1,29 @@
+<p align="center">
+    <strong>vite-plugin-commonjs</strong> • Support for dynamic commonjs transformation in Vite dev server.
+</p>
+
+<p align="center">
+    <a href="https://www.npmjs.com/package/@chialab/vite-plugin-commonjs"><img alt="NPM" src="https://img.shields.io/npm/v/@chialab/vite-plugin-commonjs.svg?style=flat-square"></a>
+</p>
+
+---
+
+## Install
+
+```sh
+npm i @chialab/vite-plugin-commonjs -D
+```
+
+```sh
+yarn add @chialab/vite-plugin-commonjs -D
+```
+
+## Documentation
+
+Read the documentation at [chialab.github.io/rna](https://chialab.github.io/rna/guide/vite-plugin-commonjs).
+
+---
+
+## License
+
+**vite-plugin-commonjs** is released under the [MIT](https://github.com/chialab/rna/blob/main/packages/vite-plugin-commonjs/LICENSE) license.

packages/vite-plugin-commonjs/lib/index.js

@@ -0,0 +1,50 @@
+import { maybeCommonjsModule, maybeMixedModule, transform, wrapDynamicRequire } from '@chialab/cjs-to-esm';
+
+/**
+ * Support for dynamic commonjs transformation in Vite dev server.
+ * @param {{ optimizeDeps?: boolean }} options
+ * @returns {import('vite').Plugin}
+ */
+export default function commonjs({ optimizeDeps = false } = {}) {
+    return {
+        name: 'commonjs',
+
+        config(config, env) {
+            if (env.command === 'build') {
+                return config;
+            }
+
+            if (optimizeDeps) {
+                return config;
+            }
+
+            return {
+                ...config,
+                optimizeDeps: {
+                    ...(config.optimizeDeps || {}),
+                    include: [],
+                    noDiscovery: true,
+                },
+            };
+        },
+
+        async transform(code, id) {
+            if (await maybeMixedModule(code)) {
+                return wrapDynamicRequire(code, {
+                    source: id,
+                    sourcemap: true,
+                    sourcesContent: true,
+                });
+            }
+
+            if (await maybeCommonjsModule(code)) {
+                return transform(code, {
+                    source: id,
+                    sourcemap: true,
+                    sourcesContent: true,
+                    helperModule: false,
+                });
+            }
+        },
+    };
+}

packages/vite-plugin-commonjs/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@chialab/vite-plugin-commonjs",
+  "type": "module",
+  "version": "0.19.0",
+  "description": "Support for dynamic commonjs transformation in Vite dev server.",
+  "main": "lib/index.js",
+  "typings": "./types/index.d.ts",
+  "author": "Chialab <[email protected]> (https://www.chialab.it)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chialab/rna",
+    "directory": "packages/vite-plugin-commonjs"
+  },
+  "keywords": [],
+  "files": [
+    "lib",
+    "types",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@chialab/cjs-to-esm": "^0.18.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  }
+}

packages/vite-plugin-commonjs/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./types",
+    "declarationDir": "./types",
+    "baseUrl": ".",
+    "rootDir": "./lib"
+  },
+  "include": ["lib/**/*"],
+  "references": [
+    {
+      "path": "../cjs-to-esm"
+    }
+  ]
+}

tsconfig.json

@@ -108,6 +108,9 @@
     {
       "path": "./packages/rna-saucelabs-test-runner"
     },
+    {
+      "path": "./packages/vite-plugin-commonjs"
+    },
     {
       "path": "./packages/vitest-axe"
     },

yarn.lock

@@ -2291,6 +2291,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@chialab/vite-plugin-commonjs@workspace:packages/vite-plugin-commonjs":
+  version: 0.0.0-use.local
+  resolution: "@chialab/vite-plugin-commonjs@workspace:packages/vite-plugin-commonjs"
+  dependencies:
+    "@chialab/cjs-to-esm": ^0.18.0
+    typescript: ^5.0.0
+  languageName: unknown
+  linkType: soft
+
 "@chialab/vitest-axe@workspace:packages/vitest-axe":
   version: 0.0.0-use.local
   resolution: "@chialab/vitest-axe@workspace:packages/vitest-axe"