New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: Computed properties should keep original definition order #15232
Merged
nicolo-ribaudo
merged 12 commits into
babel:main
from
SuperSodaSea:fix/computed-properties-order
Dec 5, 2022
Merged
Changes from 8 commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
4061dae
fix: Computed properties should keep order
SuperSodaSea ed1f8c3
Merge remote-tracking branch 'upstream/main' into fix/computed-proper…
SuperSodaSea 86acf87
Rename test
SuperSodaSea 16758f3
Update new-version-checklist
SuperSodaSea 1fd56a3
Change parameter order of defineAccessor
SuperSodaSea c735135
Update test spec/definition-order
SuperSodaSea 71a045c
Merge branch 'main' into fix/computed-properties-order
SuperSodaSea b8acd2e
Add fallback for helper function
SuperSodaSea 8a6ccb4
Better helper fallback
liuxingbaoyu 666e7de
Apply suggestions from code review
SuperSodaSea dac736c
Cleanup
SuperSodaSea b16daaf
Merge remote-tracking branch 'upstream/main' into fix/computed-proper…
SuperSodaSea File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/* @minVersion 7.20.6 */ | ||
|
||
export default function _defineAccessor(type, obj, key, fn) { | ||
var desc = { configurable: true, enumerable: true }; | ||
// type should be "get" or "set" | ||
desc[type] = fn; | ||
return Object.defineProperty(obj, key, desc); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,7 @@ | ||
import { types as t } from "@babel/core"; | ||
import type { PluginPass } from "@babel/core"; | ||
import { declare } from "@babel/helper-plugin-utils"; | ||
import { template, types as t, type PluginPass } from "@babel/core"; | ||
import template from "@babel/template"; | ||
import type { Scope } from "@babel/traverse"; | ||
|
||
export interface Options { | ||
|
@@ -12,7 +14,6 @@ type PropertyInfo = { | |
body: t.Statement[]; | ||
computedProps: t.ObjectMember[]; | ||
initPropExpression: t.ObjectExpression; | ||
getMutatorId: () => t.Identifier; | ||
state: PluginPass; | ||
}; | ||
|
||
|
@@ -26,10 +27,43 @@ export default declare((api, options: Options) => { | |
? pushComputedPropsLoose | ||
: pushComputedPropsSpec; | ||
|
||
const buildMutatorMapAssign = template.statements(` | ||
MUTATOR_MAP_REF[KEY] = MUTATOR_MAP_REF[KEY] || {}; | ||
MUTATOR_MAP_REF[KEY].KIND = VALUE; | ||
`); | ||
function buildDefineAccessor( | ||
state: PluginPass, | ||
type: "get" | "set", | ||
obj: t.Expression, | ||
key: t.Expression, | ||
fn: t.Expression, | ||
) { | ||
let helper: t.Identifier; | ||
if (state.availableHelper("defineAccessor")) { | ||
helper = state.addHelper("defineAccessor"); | ||
} else { | ||
// Fallback for @babel/helpers <= 7.20.6, manually add helper function | ||
SuperSodaSea marked this conversation as resolved.
Show resolved
Hide resolved
|
||
const file = state.file; | ||
helper = file.declarations["defineAccessor"]; | ||
if (!helper) { | ||
helper = file.declarations["defineAccessor"] = | ||
file.scope.generateUidIdentifier("defineAccessor"); | ||
|
||
const helperDeclaration = template.statement.ast` | ||
function ${helper}(type, obj, key, fn) { | ||
var desc = { configurable: true, enumerable: true }; | ||
desc[type] = fn; | ||
return Object.defineProperty(obj, key, desc); | ||
} | ||
`; | ||
const helperPath = file.path.unshiftContainer( | ||
"body", | ||
helperDeclaration, | ||
)[0]; | ||
// TODO: NodePath#unshiftContainer should automatically register new bindings. | ||
file.scope.registerDeclaration(helperPath); | ||
} | ||
helper = t.cloneNode(helper); | ||
} | ||
|
||
return t.callExpression(helper, [t.stringLiteral(type), obj, key, fn]); | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Now the helper function is directly added to the file scope if it is not available. For example: var obj = {
get ["x" + foo]() { return "heh"; }
}; The output would be: - var obj = babelHelpers.defineAccessor("get", {}, "x" + foo, function () {
+ function _defineAccessor(type, obj, key, fn) {
+ var desc = {
+ configurable: true,
+ enumerable: true
+ };
+ desc[type] = fn;
+ return Object.defineProperty(obj, key, desc);
+ }
+ var obj = _defineAccessor("get", {}, "x" + foo, function () {
return "heh";
}); |
||
|
||
/** | ||
* Get value of an object member under object expression. | ||
|
@@ -72,31 +106,26 @@ export default declare((api, options: Options) => { | |
); | ||
} | ||
|
||
function pushMutatorDefine( | ||
{ body, getMutatorId, scope }: PropertyInfo, | ||
function pushAccessorDefine( | ||
{ body, computedProps, initPropExpression, objId, state }: PropertyInfo, | ||
prop: t.ObjectMethod, | ||
) { | ||
let key = | ||
const kind = prop.kind as "get" | "set"; | ||
const key = | ||
!prop.computed && t.isIdentifier(prop.key) | ||
? t.stringLiteral(prop.key.name) | ||
: prop.key; | ||
const value = getValue(prop); | ||
|
||
const maybeMemoise = scope.maybeGenerateMemoised(key); | ||
if (maybeMemoise) { | ||
if (computedProps.length === 1) { | ||
return buildDefineAccessor(state, kind, initPropExpression, key, value); | ||
} else { | ||
body.push( | ||
t.expressionStatement(t.assignmentExpression("=", maybeMemoise, key)), | ||
t.expressionStatement( | ||
buildDefineAccessor(state, kind, t.cloneNode(objId), key, value), | ||
), | ||
); | ||
key = maybeMemoise; | ||
} | ||
|
||
body.push( | ||
...buildMutatorMapAssign({ | ||
MUTATOR_MAP_REF: getMutatorId(), | ||
KEY: t.cloneNode(key), | ||
VALUE: getValue(prop), | ||
KIND: t.identifier(prop.kind), | ||
}), | ||
); | ||
} | ||
|
||
function pushComputedPropsLoose(info: PropertyInfo) { | ||
|
@@ -105,7 +134,8 @@ export default declare((api, options: Options) => { | |
t.isObjectMethod(prop) && | ||
(prop.kind === "get" || prop.kind === "set") | ||
) { | ||
pushMutatorDefine(info, prop); | ||
const single = pushAccessorDefine(info, prop); | ||
if (single) return single; | ||
} else { | ||
pushAssign(t.cloneNode(info.objId), prop, info.body); | ||
} | ||
|
@@ -123,7 +153,8 @@ export default declare((api, options: Options) => { | |
t.isObjectMethod(prop) && | ||
(prop.kind === "get" || prop.kind === "set") | ||
) { | ||
pushMutatorDefine(info, prop); | ||
const single = pushAccessorDefine(info, prop); | ||
if (single) return single; | ||
} else { | ||
// the value of ObjectProperty in ObjectExpression must be an expression | ||
const value = getValue(prop) as t.Expression; | ||
|
@@ -195,44 +226,15 @@ export default declare((api, options: Options) => { | |
]), | ||
); | ||
|
||
let mutatorRef: t.Identifier; | ||
|
||
const getMutatorId = function () { | ||
if (!mutatorRef) { | ||
mutatorRef = scope.generateUidIdentifier("mutatorMap"); | ||
|
||
body.push( | ||
t.variableDeclaration("var", [ | ||
t.variableDeclarator(mutatorRef, t.objectExpression([])), | ||
]), | ||
); | ||
} | ||
|
||
return t.cloneNode(mutatorRef); | ||
}; | ||
|
||
const single = pushComputedProps({ | ||
scope, | ||
objId, | ||
body, | ||
computedProps, | ||
initPropExpression, | ||
getMutatorId, | ||
state, | ||
}); | ||
|
||
if (mutatorRef) { | ||
body.push( | ||
t.expressionStatement( | ||
t.callExpression( | ||
state.addHelper("defineEnumerableProperties"), | ||
[t.cloneNode(objId), t.cloneNode(mutatorRef)], | ||
), | ||
), | ||
); | ||
} | ||
|
||
// @ts-expect-error todo(flow->ts) `void` should not be used as variable | ||
if (single) { | ||
path.replaceWith(single); | ||
} else { | ||
|
12 changes: 6 additions & 6 deletions
12
...rm-computed-properties/test/fixtures/assumption-setComputedProperties/accessors/output.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,10 @@ | ||
var _foobar, _foobar2, _test, _test2, _obj, _mutatorMap; | ||
var obj = (_obj = {}, _foobar = foobar, _mutatorMap = {}, _mutatorMap[_foobar] = _mutatorMap[_foobar] || {}, _mutatorMap[_foobar].get = function () { | ||
var _obj; | ||
var obj = (_obj = {}, babelHelpers.defineAccessor("get", _obj, foobar, function () { | ||
return "foobar"; | ||
}, _foobar2 = foobar, _mutatorMap[_foobar2] = _mutatorMap[_foobar2] || {}, _mutatorMap[_foobar2].set = function (x) { | ||
}), babelHelpers.defineAccessor("set", _obj, foobar, function (x) { | ||
console.log(x); | ||
}, _test = "test", _mutatorMap[_test] = _mutatorMap[_test] || {}, _mutatorMap[_test].get = function () { | ||
}), babelHelpers.defineAccessor("get", _obj, "test", function () { | ||
return "regular getter after computed property"; | ||
}, _test2 = "test", _mutatorMap[_test2] = _mutatorMap[_test2] || {}, _mutatorMap[_test2].set = function (x) { | ||
}), babelHelpers.defineAccessor("set", _obj, "test", function (x) { | ||
console.log(x); | ||
}, babelHelpers.defineEnumerableProperties(_obj, _mutatorMap), _obj); | ||
}), _obj); |
3 changes: 3 additions & 0 deletions
3
...mputed-properties/test/fixtures/assumption-setComputedProperties/single-accessor/input.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
var obj = { | ||
get ["x" + foo]() { return "heh"; } | ||
}; |
3 changes: 3 additions & 0 deletions
3
...puted-properties/test/fixtures/assumption-setComputedProperties/single-accessor/output.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
var obj = babelHelpers.defineAccessor("get", {}, "x" + foo, function () { | ||
return "heh"; | ||
}); |
6 changes: 3 additions & 3 deletions
6
...sform-computed-properties/test/fixtures/assumption-setComputedProperties/symbol/output.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
var _foo, _mutatorMap; | ||
var _foo; | ||
var k = Symbol(); | ||
var foo = (_foo = {}, _foo[Symbol.iterator] = "foobar", _mutatorMap = {}, _mutatorMap[k] = _mutatorMap[k] || {}, _mutatorMap[k].get = function () { | ||
var foo = (_foo = {}, _foo[Symbol.iterator] = "foobar", babelHelpers.defineAccessor("get", _foo, k, function () { | ||
return k; | ||
}, babelHelpers.defineEnumerableProperties(_foo, _mutatorMap), _foo); | ||
}), _foo); |
12 changes: 6 additions & 6 deletions
12
packages/babel-plugin-transform-computed-properties/test/fixtures/spec/accessors/output.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,10 @@ | ||
var _foobar, _foobar2, _test, _test2, _obj, _mutatorMap; | ||
var obj = (_obj = {}, _foobar = foobar, _mutatorMap = {}, _mutatorMap[_foobar] = _mutatorMap[_foobar] || {}, _mutatorMap[_foobar].get = function () { | ||
var _obj; | ||
var obj = (_obj = {}, babelHelpers.defineAccessor("get", _obj, foobar, function () { | ||
return "foobar"; | ||
}, _foobar2 = foobar, _mutatorMap[_foobar2] = _mutatorMap[_foobar2] || {}, _mutatorMap[_foobar2].set = function (x) { | ||
}), babelHelpers.defineAccessor("set", _obj, foobar, function (x) { | ||
console.log(x); | ||
}, _test = "test", _mutatorMap[_test] = _mutatorMap[_test] || {}, _mutatorMap[_test].get = function () { | ||
}), babelHelpers.defineAccessor("get", _obj, "test", function () { | ||
return "regular getter after computed property"; | ||
}, _test2 = "test", _mutatorMap[_test2] = _mutatorMap[_test2] || {}, _mutatorMap[_test2].set = function (x) { | ||
}), babelHelpers.defineAccessor("set", _obj, "test", function (x) { | ||
console.log(x); | ||
}, babelHelpers.defineEnumerableProperties(_obj, _mutatorMap), _obj); | ||
}), _obj); |
17 changes: 17 additions & 0 deletions
17
...es/babel-plugin-transform-computed-properties/test/fixtures/spec/definition-order/exec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
var a = { | ||
get ["x"]() { return 0; }, | ||
["y"]: 1, | ||
}; | ||
expect(Object.keys(a)).toStrictEqual(["x", "y"]); | ||
|
||
var b = { | ||
get ["x"]() { return 0; }, | ||
["x"]: 1, | ||
}; | ||
expect(b.x).toBe(1); | ||
|
||
var x = 1; | ||
var y = { x, get x() { return 0; }, x }; | ||
expect(y.x).toBe(1); | ||
y.x = 2; | ||
expect(y.x).toBe(2); |
13 changes: 13 additions & 0 deletions
13
...s/babel-plugin-transform-computed-properties/test/fixtures/spec/definition-order/input.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
var a = { | ||
get ["x"]() { return 0; }, | ||
["y"]: 1, | ||
}; | ||
|
||
var b = { | ||
get ["x"]() { return 0; }, | ||
["x"]: 1, | ||
}; | ||
|
||
var x = 1; | ||
var y = { x, get x() { return 0; }, x }; | ||
y.x = 2; |
6 changes: 6 additions & 0 deletions
6
...bel-plugin-transform-computed-properties/test/fixtures/spec/definition-order/options.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"plugins": [ | ||
"transform-duplicate-keys", | ||
"transform-computed-properties" | ||
] | ||
} |
14 changes: 14 additions & 0 deletions
14
.../babel-plugin-transform-computed-properties/test/fixtures/spec/definition-order/output.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
var _a, _b, _y; | ||
var a = (_a = {}, babelHelpers.defineAccessor("get", _a, "x", function () { | ||
return 0; | ||
}), babelHelpers.defineProperty(_a, "y", 1), _a); | ||
var b = (_b = {}, babelHelpers.defineAccessor("get", _b, "x", function () { | ||
return 0; | ||
}), babelHelpers.defineProperty(_b, "x", 1), _b); | ||
var x = 1; | ||
var y = (_y = { | ||
x | ||
}, babelHelpers.defineAccessor("get", _y, "x", function () { | ||
return 0; | ||
}), babelHelpers.defineProperty(_y, "x", x), _y); | ||
y.x = 2; |
3 changes: 3 additions & 0 deletions
3
...es/babel-plugin-transform-computed-properties/test/fixtures/spec/single-accessor/input.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
var obj = { | ||
get ["x" + foo]() { return "heh"; } | ||
}; |
3 changes: 3 additions & 0 deletions
3
...s/babel-plugin-transform-computed-properties/test/fixtures/spec/single-accessor/output.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
var obj = babelHelpers.defineAccessor("get", {}, "x" + foo, function () { | ||
return "heh"; | ||
}); |
6 changes: 3 additions & 3 deletions
6
packages/babel-plugin-transform-computed-properties/test/fixtures/spec/symbol/output.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
var _foo, _mutatorMap; | ||
var _foo; | ||
var k = Symbol(); | ||
var foo = (_foo = {}, babelHelpers.defineProperty(_foo, Symbol.iterator, "foobar"), _mutatorMap = {}, _mutatorMap[k] = _mutatorMap[k] || {}, _mutatorMap[k].get = function () { | ||
var foo = (_foo = {}, babelHelpers.defineProperty(_foo, Symbol.iterator, "foobar"), babelHelpers.defineAccessor("get", _foo, k, function () { | ||
return k; | ||
}, babelHelpers.defineEnumerableProperties(_foo, _mutatorMap), _foo); | ||
}), _foo); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure if this is the correct
minVersion
...There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We will need to update it when releasing, could you update the Makefile like I did in 80c6889?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done in 16758f3.