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 9 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
170 changes: 164 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,126 @@ describe('Transform property', () => {
},
static: {
key2: ["fixed", "array"]
},
config: function(host) {
return {
key2: ["fixed", "array"],
key1: host.prop1
};
}
}
}
});

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

pluginTest(
'transforms parameters with 2 levels deep (foo.bar)',
`
import { wire } from 'lwc';
import { getFoo } from 'data-service';
export default class Test {
@wire(getFoo, { key1: "$prop1.prop2", key2: ["fixed", 'array'], key3: "$p1.p2" })
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",
key3: "p1.p2"
},
static: {
key2: ["fixed", "array"]
},
config: function(host) {
let v1 = host.prop1;
let v2 = host.p1;
return {
key2: ["fixed", "array"],
key1: v1 != null ? v1.prop2 : undefined,
key3: v2 != null ? v2.p2 : 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.prop4
: undefined
};
}
}
}
Expand Down Expand Up @@ -88,6 +208,14 @@ describe('Transform property', () => {
static: {
key3: "fixed",
key4: ["fixed", "array"]
},
config: function(host) {
return {
key3: "fixed",
key4: ["fixed", "array"],
key1: host.prop,
key2: host.prop
};
}
}
}
Expand Down Expand Up @@ -171,7 +299,10 @@ describe('Transform property', () => {
wiredProp: {
adapter: getFoo,
params: {},
static: {}
static: {},
config: function(host) {
return {};
}
}
}
});
Expand All @@ -185,7 +316,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 +343,10 @@ describe('Transform property', () => {
wiredProp: {
adapter: Foo.Bar,
params: {},
static: {}
static: {},
config: function(host) {
return {};
}
}
}
});
Expand Down Expand Up @@ -253,7 +387,10 @@ describe('Transform property', () => {
wiredProp: {
adapter: Foo.Bar,
params: {},
static: {}
static: {},
config: function(host) {
return {};
}
}
}
});
Expand Down Expand Up @@ -314,7 +451,10 @@ describe('Transform property', () => {
_registerDecorators(Test, {
wire: {
wiredProp: {
adapter: getFoo
adapter: getFoo,
config: function(host) {
return {};
}
}
}
});
Expand Down Expand Up @@ -479,6 +619,12 @@ describe('Transform property', () => {
},
static: {
key2: ["fixed"]
},
config: function(host) {
return {
key2: ["fixed"],
key1: host.prop1
};
}
},
wired2: {
Expand All @@ -488,6 +634,12 @@ describe('Transform property', () => {
},
static: {
key2: ["array"]
},
config: function(host) {
return {
key2: ["array"],
key1: host.prop1
};
}
}
}
Expand Down Expand Up @@ -535,7 +687,13 @@ describe('Transform method', () => {
static: {
key2: ["fixed"]
},
method: 1
method: 1,
config: function(host) {
return {
key2: ["fixed"],
key1: host.prop1
};
}
}
}
});
Expand Down
89 changes: 89 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 @@ -9,6 +9,7 @@ const { staticClassProperty, markAsLWCNode } = require('../../utils');
const { LWC_COMPONENT_PROPERTIES } = require('../../constants');

const WIRE_PARAM_PREFIX = '$';
const WIRE_CONFIG_ARG_NAME = 'host';

function isObservedProperty(configProperty) {
const propertyValue = configProperty.get('value');
Expand Down Expand Up @@ -37,6 +38,92 @@ function getWiredParams(t, wireConfig) {
});
}

function getGeneratedConfig(t, wiredValue) {
let counter = 0;
const configBlockBody = [];
const configProps = [];
const generateParameterConfigValue = memberExprPaths => {
if (memberExprPaths.length === 1) {
return {
configValueExpression: t.memberExpression(
t.identifier(WIRE_CONFIG_ARG_NAME),
t.identifier(memberExprPaths[0])
),
};
}

const varName = 'v' + ++counter;
const varDeclaration = t.variableDeclaration('let', [
t.variableDeclarator(
t.identifier(varName),
t.memberExpression(
t.identifier(WIRE_CONFIG_ARG_NAME),
t.identifier(memberExprPaths[0])
)
),
]);

// Results in: v != null && ... (v = v.i) != null && ... (v = v.(n-1)) != null
let conditionTest = t.binaryExpression('!=', t.identifier(varName), t.nullLiteral());

for (let i = 1, n = memberExprPaths.length; i < n - 1; 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())
);
}

// conditionTest ? v.n : undefined
const configValueExpression = t.conditionalExpression(
conditionTest,
t.memberExpression(
t.identifier(varName),
t.identifier(memberExprPaths[memberExprPaths.length - 1])
),
t.identifier('undefined')
);

return {
varDeclaration,
configValueExpression,
};
};

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.configValueExpression));

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

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

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

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

function buildWireConfigValue(t, wiredValues) {
return t.objectExpression(
wiredValues.map(wiredValue => {
Expand All @@ -63,6 +150,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