Skip to content

Commit 904d397

Browse files
committed
[breaking] Upgrade to Babel 7
[build] Upgrade of Jest and babel-plugin-tester [docs] Update of docs
1 parent 27c92a9 commit 904d397

File tree

9 files changed

+3870
-1722
lines changed

9 files changed

+3870
-1722
lines changed

.npmignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
src/test/
2+
.editorconfig
3+
.gitignore
4+
manualRun.js
5+
yarn.lock
6+
*.log

README.md

+12-7
Original file line numberDiff line numberDiff line change
@@ -270,16 +270,16 @@ class Comp extends React.Component {
270270

271271
## Usage
272272

273-
Install [babel-codemod](https://github.com/square/babel-codemod) `npm i -g babel-codemod`
273+
Install [codemod](https://github.com/codemod-js/codemod) `npm install -g @codemod/cli`
274274

275275
Then install in root of your project `npm install babel-plugin-hyperscript-to-jsx`
276276

277-
Run it like that from node_modules hence:
277+
Run it like that from node_modules:
278278
```
279279
codemod --plugin ./node_modules/babel-plugin-hyperscript-to-jsx/src/index.js ./src
280280
```
281281

282-
Also you may like to pretty print it using prettier instead of recast
282+
Also, you may like to pretty print it immediately using prettier
283283
```
284284
codemod --plugin ./node_modules/babel-plugin-hyperscript-to-jsx/src/index.js ./src --printer prettier
285285
```
@@ -288,6 +288,11 @@ Remove `babel-plugin-hyperscript-to-jsx` from `package.json`
288288

289289
If there is any issues, let me know in the issues tab here at GitHub.
290290

291+
You can run it against exact file too e.g. `./src/index.js`
292+
```
293+
codemod --plugin ./node_modules/babel-plugin-hyperscript-to-jsx/src/index.js ./src/index.js --printer prettier
294+
```
295+
291296
## Limitations
292297

293298
1) When `h` is called this way
@@ -307,10 +312,10 @@ Fix all that by yourself :)
307312

308313
(it's possible but will require further analysis of AST with hardcore traversal and I don't think it worth it)
309314

310-
## Integration with WebStorm/VS Code to do file by file
315+
## Integration with WebStorm/VS Code to do it nicely file by file
311316
Preconditions:
312317
```
313-
npm i -g babel-core babel-codemod babel-plugin-hyperscript-to-jsx
318+
npm i -g @codemod/cli babel-plugin-hyperscript-to-jsx
314319
```
315320

316321
### WebStorm:
@@ -319,7 +324,7 @@ npm i -g babel-core babel-codemod babel-plugin-hyperscript-to-jsx
319324
```
320325
Name: h to JSX
321326
Program: codemod
322-
Arguments: -p /usr/local/lib/node_modules/babel-plugin-hyperscript-to-jsx/src/index.js$FilePathRelativeToProjectRoot$
327+
Arguments: -p <your global node_modules location>/babel-plugin-hyperscript-to-jsx/src/index.js $FilePathRelativeToProjectRoot$
323328
Working directory: $ProjectFileDir$
324329
325330
In advanced settings:
@@ -345,7 +350,7 @@ Tick on: Sync file after execution
345350
{
346351
"label": "H to JSX",
347352
"type": "shell",
348-
"command": "codemod -p /usr/local/lib/node_modules/babel-plugin-hyperscript-to-jsx/src/index.js ${file}"
353+
"command": "codemod -p <your global node_modules location>/babel-plugin-hyperscript-to-jsx/src/index.js ${file}"
349354
}
350355
]
351356
}

manualRun.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const babel = require("babel-core");
1+
const babel = require("@babel/core");
22
const prettier = require("prettier");
33
const check = require("./src/test/cases").check;
44

@@ -7,7 +7,7 @@ const result = babel.transform(check, {
77
}).code;
88

99
console.log(
10-
prettier.format(result, { semi: false, singleQuote: true, parser: "babylon" })
10+
prettier.format(result, { semi: false, singleQuote: true, parser: "babel" })
1111
);
1212

1313
module.exports = {

package.json

+16-10
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,27 @@
66
"license": "MIT",
77
"author": "https://github.com/RIP21/",
88
"main": "src/index.js",
9-
"keywords": ["babel-plugin"],
10-
"peerDependencies": {
11-
"babel-core": "^6.26.0"
12-
},
9+
"keywords": [
10+
"babel-plugin",
11+
"babel-codemod",
12+
"codemod",
13+
"hyperscript",
14+
"jsx"
15+
],
1316
"devDependencies": {
14-
"babel-core": "^6.26.0",
15-
"babel-plugin-tester": "^5.0.0",
16-
"jest": "^22.4.2",
17-
"prettier": "^1.13.4"
17+
"babel-plugin-tester": "7.0.4",
18+
"jest": "^25.1.0",
19+
"np": "^6.0.0",
20+
"prettier": "^1.19.1"
1821
},
1922
"scripts": {
2023
"test": "jest",
21-
"start": "node manualRun.js"
24+
"start": "node manualRun.js",
25+
"release": "np"
2226
},
2327
"dependencies": {
24-
"string-extract-class-names": "^4.0.6"
28+
"@babel/core": "^7.8.4",
29+
"string-extract-class-names": "^4.0.6",
30+
"@babel/helper-plugin-utils": "^7.8.3"
2531
}
2632
}

src/index.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use strict";
22

3-
const t = require("babel-core").types;
3+
const t = require("@babel/core").types;
4+
const declare = require("@babel/helper-plugin-utils").declare;
45
const getTagAndClassNamesAndId = require("./utils").getTagAndClassNamesAndId;
56
const revTransform = require("./rev");
67
const getOption = require("./utils").getOption;
@@ -26,7 +27,7 @@ const bJsxAttr = (prop, expressionOrValue) => {
2627
const bJsxAttributes = objectExpression => {
2728
return objectExpression.properties.map(node => {
2829
const { key, value, argument } = node;
29-
if (t.isSpreadProperty(node) || t.isSpreadElement(node)) {
30+
if (t.isSpreadElement(node) || t.isSpreadElement(node)) {
3031
return t.JSXSpreadAttribute(argument);
3132
} else if (t.isProperty(node) && node.computed && !t.isStringLiteral(key)) {
3233
// to handle h(Abc, { [kek]: 0, ["norm"]: 1 }) to <Abc {...{ [kek]: 0 }} norm={1} />
@@ -128,7 +129,7 @@ const transformHyperscriptToJsx = (node, isTopLevelCall) => {
128129
? convertToStringLiteral(intermediateFirstArg)
129130
: intermediateFirstArg;
130131
const isFirstArgIsConditionalExpression =
131-
firstArgument.type === "ConditionalExpression"
132+
firstArgument.type === "ConditionalExpression";
132133

133134
// If firstArg is computed should be ignored, but inside the JSX should be wrapped into JSXExprContainer
134135
if (
@@ -212,12 +213,13 @@ const threeArgumentsCase = (firstArg, secondArg, thirdArg) => {
212213
};
213214

214215
let isCssModules = false;
215-
module.exports = function() {
216+
module.exports = declare(api => {
216217
return {
218+
name: "hyperscript-to-jsx",
217219
manipulateOptions(opts, parserOpts) {
218220
parserOpts.plugins.push("asyncGenerators");
219221
parserOpts.plugins.push("classProperties");
220-
parserOpts.plugins.push("decorators");
222+
parserOpts.plugins.push("decorators-legacy");
221223
parserOpts.plugins.push("doExpressions");
222224
parserOpts.plugins.push("dynamicImport");
223225
parserOpts.plugins.push("flow");
@@ -324,4 +326,4 @@ module.exports = function() {
324326
}
325327
}
326328
};
327-
};
329+
});

src/rev.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use strict";
22

3-
const t = require("babel-core").types;
3+
const t = require("@babel/core").types;
44
const getTagAndClassNamesAndId = require("./utils").getTagAndClassNamesAndId;
55
let isCssModules = false;
66

@@ -24,7 +24,7 @@ const bJsxAttr = (prop, expressionOrValue) => {
2424
const bJsxAttributes = objectExpression => {
2525
return objectExpression.properties.map(node => {
2626
const { key, value, argument } = node;
27-
if (t.isSpreadProperty(node) || t.isSpreadElement(node)) {
27+
if (t.isSpreadElement(node) || t.isSpreadElement(node)) {
2828
return t.JSXSpreadAttribute(argument);
2929
} else if (t.isProperty(node) && node.computed && !t.isStringLiteral(key)) {
3030
// to handle h(Abc, { [kek]: 0, ["norm"]: 1 }) to <Abc {...{ [kek]: 0 }} norm={1} />

0 commit comments

Comments
 (0)