feat: add support for import.meta.hot (#15)

Author: 0kzh

README.md

@@ -24,6 +24,7 @@ This repo includes the following presets and plugins:
 - [babel-preset-vite](./packages/babel-preset-vite)
   - [babel-plugin-transform-vite-meta-env](./packages/babel-plugin-transform-vite-meta-env)
   - [babel-plugin-transform-vite-meta-glob](./packages/babel-plugin-transform-vite-meta-glob)
+  - [babel-plugin-transform-vite-meta-hot](./packages/babel-plugin-transform-vite-meta-hot)
 
 For installation, usage and example, please refer to the documentation in the above packages.
 
@@ -41,6 +42,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/MohitPopli"><img src="https://avatars.githubusercontent.com/u/17976072?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mohit</b></sub></a><br /><a href="https://github.com/OpenSourceRaidGuild/babel-vite/commits?author=MohitPopli" title="Code">💻</a></td>
     <td align="center"><a href="https://rubenmoya.dev/"><img src="https://avatars.githubusercontent.com/u/905225?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rubén Moya</b></sub></a><br /><a href="https://github.com/OpenSourceRaidGuild/babel-vite/commits?author=rubenmoya" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/mitchelvanbever"><img src="https://avatars.githubusercontent.com/u/10127707?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mitchel van Bever</b></sub></a><br /><a href="#ideas-mitchelvanbever" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://kelvinzhang.com/"><img src="https://avatars.githubusercontent.com/u/9621004?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kelvin Zhang</b></sub></a><br /><a href="https://github.com/OpenSourceRaidGuild/babel-vite/commits?author=0kzh" title="Code">💻</a><a href="https://github.com/OpenSourceRaidGuild/babel-vite/commits?author=0kzh" title="Tests">⚠️</a> <a href="https://github.com/OpenSourceRaidGuild/babel-vite/commits?author=0kzh" title="Documentation">📖</a></td>
   </tr>
 </table>
 

package.json

@@ -48,10 +48,12 @@
     "build": "run-p --aggregate-output build:**",
     "build:babel-plugin-transform-vite-meta-env": "npm run build --prefix packages/babel-plugin-transform-vite-meta-env",
     "build:babel-plugin-transform-vite-meta-glob": "npm run build --prefix packages/babel-plugin-transform-vite-meta-glob",
+    "build:babel-plugin-transform-vite-meta-hot": "npm run build --prefix packages/babel-plugin-transform-vite-meta-hot",
     "build:babel-preset-vite": "npm run build --prefix packages/babel-preset-vite",
     "test": "run-p --aggregate-output test:** --",
     "test:babel-plugin-transform-vite-meta-env": "npm run test --prefix packages/babel-plugin-transform-vite-meta-env -- --coverage",
     "test:babel-plugin-transform-vite-meta-glob": "npm run test --prefix packages/babel-plugin-transform-vite-meta-glob -- --coverage",
+    "test:babel-plugin-transform-vite-meta-hot": "npm run test --prefix packages/babel-plugin-transform-vite-meta-hot -- --coverage",
     "test:babel-preset-vite": "npm run test --prefix packages/babel-preset-vite -- --coverage",
     "typecheck": "kcd-scripts typecheck",
     "lint": "kcd-scripts lint",

packages/babel-plugin-transform-vite-meta-hot/.npmrc

@@ -0,0 +1,2 @@
+package-lock=false
+legacy-peer-deps=true

packages/babel-plugin-transform-vite-meta-hot/LICENSE.md

@@ -0,0 +1,18 @@
+MIT License
+
+Copyright (c) [2021] [Michael Peyper]
+
+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/babel-plugin-transform-vite-meta-hot/README.md

@@ -0,0 +1,71 @@
+# babel-plugin-transform-vite-meta-hot
+
+<!-- prettier-ignore-start -->
+[![Build Status](https://img.shields.io/github/workflow/status/OpenSourceRaidGuild/babel-vite/validate?logo=github&style=flat-square)](https://github.com/OpenSourceRaidGuild/babel-vite/actions?query=workflow%3Avalidate)
+[![codecov](https://img.shields.io/codecov/c/github/OpenSourceRaidGuild/babel-vite.svg?style=flat-square)](https://codecov.io/gh/OpenSourceRaidGuild/babel-vite)
+[![version](https://img.shields.io/npm/v/babel-plugin-transform-vite-meta-hot.svg?style=flat-square)](https://www.npmjs.com/package/babel-plugin-transform-vite-meta-hot)
+[![downloads](https://img.shields.io/npm/dm/babel-plugin-transform-vite-meta-hot.svg?style=flat-square)](http://www.npmtrends.com/babel-plugin-transform-vite-meta-hot)
+[![MIT License](https://img.shields.io/npm/l/babel-plugin-transform-vite-meta-hot.svg?style=flat-square)](https://github.com/OpenSourceRaidGuild/babel-vite/blob/master/LICENSE.md)
+
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+[![Code of Conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://github.com/OpenSourceRaidGuild/babel-vite/blob/master/CODE_OF_CONDUCT.md)
+[![Discord](https://img.shields.io/discord/808364903822917662.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff&style=flat-square)](https://discord.gg/grS89HWeYh)
+
+[![Watch on GitHub](https://img.shields.io/github/watchers/OpenSourceRaidGuild/babel-vite.svg?style=social)](https://github.com/OpenSourceRaidGuild/babel-vite/watchers)
+[![Star on GitHub](https://img.shields.io/github/stars/OpenSourceRaidGuild/babel-vite.svg?style=social)](https://github.com/OpenSourceRaidGuild/babel-vite/stargazers)
+[![Tweet](https://img.shields.io/twitter/url/https/github.com/OpenSourceRaidGuild/babel-vite.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20out%20babel-plugin-transform-vite-meta-hot%20by%20OpenSourceRaidGuild%20https%3A%2F%2Fgithub.com%2FOpenSourceRaidGuild%2Fbabel-vite%20%F0%9F%91%8D)
+<!-- prettier-ignore-end -->
+
+> Please note: this plugin is intended to provide an approximation of some of Vite specific
+> transformations when running the code in non-Vite environment, for example, running tests with a
+> NodeJS based test runner.
+>
+> **The functionality within these transformations should not be relied upon in production.**
+
+## Example
+
+**In**
+
+```
+if (import.meta.hot) {
+  import.meta.hot.accept(callback);
+}
+```
+
+**Out**
+
+```
+if (module.hot) {
+  module.hot.accept(callback);
+}
+```
+
+## Installation
+
+```sh
+npm install --save-dev babel-plugin-transform-vite-meta-hot
+```
+
+## Usage
+
+### With a configuration file (Recommended)
+
+```json
+{
+  "plugins": ["babel-plugin-transform-vite-meta-hot"]
+}
+```
+
+### Via CLI
+
+```sh
+babel --plugins babel-plugin-transform-vite-meta-hot script.js
+```
+
+### Via Node API
+
+```javascript
+require('@babel/core').transformSync('code', {
+  plugins: ['babel-plugin-transform-vite-meta-hot']
+})
+```

packages/babel-plugin-transform-vite-meta-hot/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "babel-plugin-transform-vite-meta-hot",
+  "version": "0.0.0-semantically-released",
+  "description": "babel plugin that emulates vite's import.meta.hot functionality",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OpenSourceRaidGuild/babel-vite.git"
+  },
+  "keywords": [
+    "babel",
+    "vite",
+    "plugin",
+    "import",
+    "meta",
+    "hot"
+  ],
+  "author": "Kelvin Zhang <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/OpenSourceRaidGuild/babel-vite/issues"
+  },
+  "homepage": "https://github.com/OpenSourceRaidGuild/babel-vite#readme",
+  "scripts": {
+    "build": "kcd-scripts build --out-dir lib",
+    "test": "kcd-scripts test"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.8",
+    "@types/babel-plugin-tester": "^9.0.1",
+    "babel-plugin-tester": "^10.0.0",
+    "kcd-scripts": "^12.0.0",
+    "typescript": "^4.2.2"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.13.9",
+    "@types/babel__core": "^7.1.12"
+  }
+}

packages/babel-plugin-transform-vite-meta-hot/src/__tests__/__snapshots__/index.ts.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`vite-meta-hot not import.meta lookup: not import.meta lookup 1`] = `
+
+const x = import.meta()
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const x = import.meta()
+
+
+`;
+
+exports[`vite-meta-hot not replace import.meta.hot: not replace import.meta.hot 1`] = `
+
+const x = module.hot
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const x = module.hot
+
+
+`;
+
+exports[`vite-meta-hot not replace key access: not replace key access 1`] = `
+
+const key = "env"; const x = import.meta[key]
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const key = 'env'
+const x = import.meta[key]
+
+
+`;
+
+exports[`vite-meta-hot not replace string access: not replace string access 1`] = `
+
+const x = import.meta["env"]
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const x = import.meta['env']
+
+
+`;
+
+exports[`vite-meta-hot not replaceable: not replaceable 1`] = `
+
+const x = import.meta.other
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const x = import.meta.other
+
+
+`;
+
+exports[`vite-meta-hot replace import.meta.hot: replace import.meta.hot 1`] = `
+
+const x = import.meta.hot
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const x = module.hot
+
+
+`;
+
+exports[`vite-meta-hot replace key access: replace key access 1`] = `
+
+const key = "hot"; const x = import.meta[key]
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const key = 'hot'
+const x = module.hot
+
+
+`;
+
+exports[`vite-meta-hot replace string access: replace string access 1`] = `
+
+const x = import.meta["hot"]
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const x = module.hot
+
+
+`;

packages/babel-plugin-transform-vite-meta-hot/src/__tests__/index.ts

@@ -0,0 +1,18 @@
+import pluginTester from 'babel-plugin-tester'
+import plugin from '..'
+
+pluginTester({
+  plugin,
+  pluginName: 'vite-meta-hot',
+  snapshot: true,
+  tests: {
+    'replace import.meta.hot': 'const x = import.meta.hot',
+    'not replace import.meta.hot': 'const x = module.hot',
+    'replace string access': 'const x = import.meta["hot"]',
+    'not replace string access': 'const x = import.meta["env"]',
+    'replace key access': 'const key = "hot"; const x = import.meta[key]',
+    'not replace key access': 'const key = "env"; const x = import.meta[key]',
+    'not replaceable': 'const x = import.meta.other',
+    'not import.meta lookup': 'const x = import.meta()'
+  }
+})

packages/babel-plugin-transform-vite-meta-hot/src/index.ts

@@ -0,0 +1,52 @@
+import type babelCore from '@babel/core'
+
+export default function viteMetaHotBabelPlugin({
+  template,
+  types: t
+}: typeof babelCore): babelCore.PluginObj {
+  return {
+    name: 'vite-meta-hot',
+    visitor: {
+      MemberExpression(path) {
+        const isMetaProperty = t.isMetaProperty(path.node.object)
+        const isHotVar = t.isIdentifier(path.node.property) && path.node.property.name === 'hot'
+
+        if (!isMetaProperty || !isHotVar) {
+          return
+        }
+
+        path.replaceWith(template.expression.ast('module.hot'))
+      },
+      StringLiteral(path) {
+        const isMetaProperty =
+          t.isMemberExpression(path.parentPath.node) &&
+          t.isMetaProperty(path.parentPath.node.object)
+        const isHotVar = path.node.value === 'hot'
+
+        if (!isMetaProperty || !isHotVar) {
+          return
+        }
+
+        path.parentPath.replaceWith(template.expression.ast('module.hot'))
+      },
+      Identifier(path) {
+        if (
+          !t.isMemberExpression(path.parentPath.node) ||
+          !t.isMetaProperty(path.parentPath.node.object)
+        ) {
+          return
+        }
+
+        const key = path.node.name
+        /* @ts-expect-error outdated types */
+        // eslint-disable-next-line
+        const keyValue = path.scope.getBinding(key)?.path.node.init?.value
+        if (keyValue !== 'hot') {
+          return
+        }
+
+        path.parentPath.replaceWith(template.expression.ast('module.hot'))
+      }
+    }
+  }
+}

packages/babel-plugin-transform-vite-meta-hot/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"]
+}