Skip to content

Commit

Permalink
feat: add support for import.meta.hot (#15)
Browse files Browse the repository at this point in the history
  • Loading branch information
0kzh committed Jan 22, 2023
1 parent 081c514 commit 2605da6
Show file tree
Hide file tree
Showing 16 changed files with 362 additions and 8 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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>

Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions packages/babel-plugin-transform-vite-meta-hot/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
package-lock=false
legacy-peer-deps=true
18 changes: 18 additions & 0 deletions packages/babel-plugin-transform-vite-meta-hot/LICENSE.md
Original file line number Diff line number Diff line change
@@ -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.
71 changes: 71 additions & 0 deletions packages/babel-plugin-transform-vite-meta-hot/README.md
Original file line number Diff line number Diff line change
@@ -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']
})
```
44 changes: 44 additions & 0 deletions packages/babel-plugin-transform-vite-meta-hot/package.json
Original file line number Diff line number Diff line change
@@ -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 <me@kelvinzhang.ca>",
"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"
}
}
Original file line number Diff line number Diff line change
@@ -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
`;
Original file line number Diff line number Diff line change
@@ -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()'
}
})
52 changes: 52 additions & 0 deletions packages/babel-plugin-transform-vite-meta-hot/src/index.ts
Original file line number Diff line number Diff line change
@@ -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'))
}
}
}
}
4 changes: 4 additions & 0 deletions packages/babel-plugin-transform-vite-meta-hot/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"extends": "../../tsconfig.json",
"include": ["src/**/*"]
}
11 changes: 10 additions & 1 deletion packages/babel-preset-vite/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ This preset includes the following plugins:

- [babel-plugin-transform-vite-meta-env](../babel-plugin-transform-vite-meta-env)
- [babel-plugin-transform-vite-meta-glob](../babel-plugin-transform-vite-meta-glob)
- [babel-plugin-transform-vite-meta-hot](../babel-plugin-transform-vite-meta-hot)

## Installation

Expand Down Expand Up @@ -54,7 +55,8 @@ With options:
"babel-preset-vite",
{
"env": false, // defaults to true
"glob": false // defaults to true
"glob": false, // defaults to true
"hot": false // defaults to true
}
]
]
Expand Down Expand Up @@ -92,5 +94,12 @@ Toggles whether or not to perform
[`import.meta.glob` and `import.meta.globEager`](https://vitejs.dev/guide/features.html#glob-import)
transformations.

### `hot`

`boolean`, defaults to `true`

Toggles whether or not to perform [`import.meta.hot`](https://vitejs.dev/guide/api-hmr.html)
transformations.

> You can read more about configuring preset options
> [here](https://babeljs.io/docs/en/presets#preset-options)
8 changes: 6 additions & 2 deletions packages/babel-preset-vite/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@
"keywords": [
"babel",
"vite",
"preset"
"preset",
"env",
"glob",
"hot"
],
"author": "Michael Peyper <mpeyper7@gmail.com>",
"license": "MIT",
Expand All @@ -38,6 +41,7 @@
"@babel/runtime": "^7.13.9",
"@types/babel__core": "^7.1.12",
"babel-plugin-transform-vite-meta-env": "^0.0.0-semantically-released",
"babel-plugin-transform-vite-meta-glob": "^0.0.0-semantically-released"
"babel-plugin-transform-vite-meta-glob": "^0.0.0-semantically-released",
"babel-plugin-transform-vite-meta-hot": "^0.0.0-semantically-released"
}
}

0 comments on commit 2605da6

Please sign in to comment.