Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat: add wire config as function #1455

Merged
merged 10 commits into from
Aug 22, 2019
Merged

feat: add wire config as function #1455

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
025832a
feat: add wire config as function
jodarove Aug 20, 2019
8c10d19
fix: replace multiple conditionals with logical expression
jodarove Aug 20, 2019
3327b33
fix: failing tests
jodarove Aug 20, 2019
4c46981
fix: perf improvement based on review
jodarove Aug 20, 2019
0d6fe95
fix: prettier
jodarove Aug 20, 2019
3dce69b
fix: remove unnecessary assigment in config function
jodarove Aug 20, 2019
e94793f
fix: lint
jodarove Aug 20, 2019
f1f1194
fix: allow return null value in config props
jodarove Aug 21, 2019
8797cf0
wip: extract arg name (host) as constant
jodarove Aug 21, 2019
3edebbc
wip: rename wire config argument to $cmp
jodarove Aug 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/@lwc/babel-plugin-component/src/__tests__/implicit-explicit.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,11 @@ describe('Implicit mode', () => {
params: {},
static: {
id: 1
},
config: function(host) {
return {
id: 1
};
}
}
}
Expand Down
10 changes: 8 additions & 2 deletions packages/@lwc/babel-plugin-component/src/__tests__/observed-fields.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,10 @@ describe('observed fields', () => {
publicMethods: ["someMethod"],
wire: {
wiredProp: {
adapter: createElement
adapter: createElement,
config: function(host) {
return {};
}
}
},
track: {
Expand Down Expand Up @@ -171,7 +174,10 @@ describe('observed fields', () => {
publicMethods: ["someMethod"],
wire: {
wiredProp: {
adapter: createElement
adapter: createElement,
config: function(host) {
return {};
}
}
},
track: {
Expand Down
121 changes: 115 additions & 6 deletions packages/@lwc/babel-plugin-component/src/__tests__/wire-decorator.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,72 @@ describe('Transform property', () => {
},
static: {
key2: ["fixed", "array"]
},
config: function(host) {
let v1 = host.prop1;
return {
key2: ["fixed", "array"],
key1: v1 != null ? v1 : undefined
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, it is still buggy. if host.prop1 is null, it will return undefined :(, basically, this form should be used if you are accessing something that has at least two levels deep, e.g.: host.prop1.prop2, but for host.prop1 you don't need thing.

Copy link
Contributor Author

@jodarove jodarove Aug 21, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

my bad, i understood that was the desired behavior.

Since that is not case and we need to handle null/undefined, we could remove the condition for the last prop access too, returning acc.lastProp, the most common cases will look like this:

foo (n = 1): 
   prop: host.foo

foo.bar (n = 2):
   let v = host.foo;
   prop: v != null ? v.bar : undefined

foo.bar.baz (n = 3):
   let v = host.foo;
   prop: v != null &&
        (v = v.bar) != null
          ? v.baz
          : undefined

};
}
}
}
});

export default _registerComponent(Test, {
tmpl: _tmpl
});
`,
},
}
);

pluginTest(
'transforms parameters with multiple levels deep',
`
import { wire } from 'lwc';
import { getFoo } from 'data-service';
export default class Test {
@wire(getFoo, { key1: "$prop1.prop2.prop3.prop4", key2: ["fixed", 'array']})
wiredProp;
}
`,
{
output: {
code: `
import { registerDecorators as _registerDecorators } from "lwc";
import _tmpl from "./test.html";
import { registerComponent as _registerComponent } from "lwc";
import { getFoo } from "data-service";

class Test {
constructor() {
this.wiredProp = void 0;
}
}

_registerDecorators(Test, {
wire: {
wiredProp: {
adapter: getFoo,
params: {
key1: "prop1.prop2.prop3.prop4"
},
static: {
key2: ["fixed", "array"]
},
config: function(host) {
let v1 = host.prop1;
return {
key2: ["fixed", "array"],
key1:
v1 != null &&
(v1 = v1.prop2) != null &&
(v1 = v1.prop3) != null &&
(v1 = v1.prop4) != null
? v1
: undefined
};
}
}
}
Expand Down Expand Up @@ -88,6 +154,16 @@ describe('Transform property', () => {
static: {
key3: "fixed",
key4: ["fixed", "array"]
},
config: function(host) {
let v1 = host.prop;
let v2 = host.prop;
return {
key3: "fixed",
key4: ["fixed", "array"],
key1: v1 != null ? v1 : undefined,
key2: v2 != null ? v2 : undefined
};
}
}
}
Expand Down Expand Up @@ -171,7 +247,10 @@ describe('Transform property', () => {
wiredProp: {
adapter: getFoo,
params: {},
static: {}
static: {},
config: function(host) {
return {};
}
}
}
});
Expand All @@ -185,7 +264,7 @@ describe('Transform property', () => {
);

pluginTest(
'decorator accepts a member epxression',
'decorator accepts a member expression',
`
import { wire } from 'lwc';
import { Foo } from 'data-service';
Expand All @@ -212,7 +291,10 @@ describe('Transform property', () => {
wiredProp: {
adapter: Foo.Bar,
params: {},
static: {}
static: {},
config: function(host) {
return {};
}
}
}
});
Expand Down Expand Up @@ -253,7 +335,10 @@ describe('Transform property', () => {
wiredProp: {
adapter: Foo.Bar,
params: {},
static: {}
static: {},
config: function(host) {
return {};
}
}
}
});
Expand Down Expand Up @@ -314,7 +399,10 @@ describe('Transform property', () => {
_registerDecorators(Test, {
wire: {
wiredProp: {
adapter: getFoo
adapter: getFoo,
config: function(host) {
return {};
}
}
}
});
Expand Down Expand Up @@ -479,6 +567,13 @@ describe('Transform property', () => {
},
static: {
key2: ["fixed"]
},
config: function(host) {
let v1 = host.prop1;
return {
key2: ["fixed"],
key1: v1 != null ? v1 : undefined
};
}
},
wired2: {
Expand All @@ -488,6 +583,13 @@ describe('Transform property', () => {
},
static: {
key2: ["array"]
},
config: function(host) {
let v1 = host.prop1;
return {
key2: ["array"],
key1: v1 != null ? v1 : undefined
};
}
}
}
Expand Down Expand Up @@ -535,7 +637,14 @@ describe('Transform method', () => {
static: {
key2: ["fixed"]
},
method: 1
method: 1,
config: function(host) {
let v1 = host.prop1;
return {
key2: ["fixed"],
key1: v1 != null ? v1 : undefined
};
}
}
}
});
Expand Down
69 changes: 69 additions & 0 deletions packages/@lwc/babel-plugin-component/src/decorators/wire/transform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,73 @@ function getWiredParams(t, wireConfig) {
});
}

function getGeneratedConfig(t, wiredValue) {
let counter = 0;
const configBlockBody = [];
const configProps = [];
const generateParameterConfigValue = memberExprPaths => {
const varName = 'v' + ++counter;
const varDeclaration = t.variableDeclaration('let', [
t.variableDeclarator(
t.identifier(varName),
t.memberExpression(t.identifier('host'), t.identifier(memberExprPaths[0]))
),
]);

let conditionTest = t.binaryExpression('!=', t.identifier(varName), t.nullLiteral());
for (let i = 1, n = memberExprPaths.length; i < n; i++) {
const nextPropValue = t.assignmentExpression(
'=',
t.identifier(varName),
t.memberExpression(t.identifier(varName), t.identifier(memberExprPaths[i]))
);

conditionTest = t.logicalExpression(
'&&',
conditionTest,
t.binaryExpression('!=', nextPropValue, t.nullLiteral())
);
}

const conditionalExpression = t.conditionalExpression(
conditionTest,
t.identifier(varName),
t.identifier('undefined')
);

return {
varName,
varDeclaration,
conditionalExpression,
};
};

if (wiredValue.static) {
Array.prototype.push.apply(configProps, wiredValue.static);
}

if (wiredValue.params) {
wiredValue.params.forEach(param => {
const memberExprPaths = param.value.value.split('.');
const paramConfigValue = generateParameterConfigValue(memberExprPaths);

configProps.push(t.objectProperty(param.key, paramConfigValue.conditionalExpression));

configBlockBody.push(paramConfigValue.varDeclaration);
});
}

configBlockBody.push(t.returnStatement(t.objectExpression(configProps)));

const fnExpression = t.functionExpression(
null,
[t.identifier('host')],
t.blockStatement(configBlockBody)
);

return t.objectProperty(t.identifier('config'), fnExpression);
}

function buildWireConfigValue(t, wiredValues) {
return t.objectExpression(
wiredValues.map(wiredValue => {
Expand All @@ -63,6 +130,8 @@ function buildWireConfigValue(t, wiredValues) {
wireConfig.push(t.objectProperty(t.identifier('method'), t.numericLiteral(1)));
}

wireConfig.push(getGeneratedConfig(t, wiredValue));

return t.objectProperty(
t.identifier(wiredValue.propertyName),
t.objectExpression(wireConfig)
Expand Down
Loading