Skip to content

Commit

Permalink
fix: debounce config call when creating component with wire
Browse files Browse the repository at this point in the history 
also, adds an extra data for the wire decorator, indicating if it has dynamic parameters.
  • Loading branch information
@jodarove
jodarove committed Feb 11, 2020
1 parent da5b35b commit c90e12d
Show file tree
Hide file tree
Showing 9 changed files with 139 additions and 50 deletions.
1 change: 1 addition & 0 deletions packages/@lwc/babel-plugin-component/src/__tests__/implicit-explicit.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ describe('Implicit mode', () => {
static: {
id: 1
},
hasParams: false,
config: function($cmp) {
return {
id: 1
Expand Down
3 changes: 3 additions & 0 deletions packages/@lwc/babel-plugin-component/src/__tests__/observed-fields.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ describe('observed fields', () => {
wire: {
wiredProp: {
adapter: createElement,
hasParams: false,
config: function($cmp) {
return {};
}
Expand Down Expand Up @@ -118,6 +119,7 @@ describe('observed fields', () => {
wire: {
function: {
adapter: createElement,
hasParams: false,
config: function($cmp) {
return {};
}
Expand Down Expand Up @@ -310,6 +312,7 @@ describe('observed fields', () => {
wire: {
wiredProp: {
adapter: createElement,
hasParams: false,
config: function($cmp) {
return {};
}
Expand Down
14 changes: 14 additions & 0 deletions packages/@lwc/babel-plugin-component/src/__tests__/wire-decorator.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ describe('Transform property', () => {
static: {
key2: ["fixed", "array"]
},
hasParams: true,
config: function($cmp) {
return {
key2: ["fixed", "array"],
Expand Down Expand Up @@ -93,6 +94,7 @@ describe('Transform property', () => {
static: {
key1: importedValue
},
hasParams: false,
config: function($cmp) {
return {
key1: importedValue
Expand Down Expand Up @@ -145,6 +147,7 @@ describe('Transform property', () => {
static: {
key2: ["fixed", "array"]
},
hasParams: true,
config: function($cmp) {
let v1 = $cmp.prop1;
let v2 = $cmp.p1;
Expand Down Expand Up @@ -200,6 +203,7 @@ describe('Transform property', () => {
static: {
key2: ["fixed", "array"]
},
hasParams: true,
config: function($cmp) {
let v1 = $cmp.prop1;
return {
Expand Down Expand Up @@ -260,6 +264,7 @@ describe('Transform property', () => {
key3: "fixed",
key4: ["fixed", "array"]
},
hasParams: true,
config: function($cmp) {
return {
key3: "fixed",
Expand Down Expand Up @@ -351,6 +356,7 @@ describe('Transform property', () => {
adapter: getFoo,
params: {},
static: {},
hasParams: false,
config: function($cmp) {
return {};
}
Expand Down Expand Up @@ -395,6 +401,7 @@ describe('Transform property', () => {
adapter: Foo.Bar,
params: {},
static: {},
hasParams: false,
config: function($cmp) {
return {};
}
Expand Down Expand Up @@ -439,6 +446,7 @@ describe('Transform property', () => {
adapter: Foo.Bar,
params: {},
static: {},
hasParams: false,
config: function($cmp) {
return {};
}
Expand Down Expand Up @@ -503,6 +511,7 @@ describe('Transform property', () => {
wire: {
wiredProp: {
adapter: getFoo,
hasParams: false,
config: function($cmp) {
return {};
}
Expand Down Expand Up @@ -619,6 +628,7 @@ describe('Transform property', () => {
key2: "p1.p2"
},
static: {},
hasParams: true,
config: function($cmp) {
let v1 = $cmp["prop1"];
let v2 = $cmp.p1;
Expand Down Expand Up @@ -673,6 +683,7 @@ describe('Transform property', () => {
static: {
key2: ["fixed", "array"]
},
hasParams: true,
config: function($cmp) {
let v1 = $cmp["prop1"];
return {
Expand Down Expand Up @@ -777,6 +788,7 @@ describe('Transform property', () => {
static: {
key2: ["fixed"]
},
hasParams: true,
config: function($cmp) {
return {
key2: ["fixed"],
Expand All @@ -792,6 +804,7 @@ describe('Transform property', () => {
static: {
key2: ["array"]
},
hasParams: true,
config: function($cmp) {
return {
key2: ["array"],
Expand Down Expand Up @@ -845,6 +858,7 @@ describe('Transform method', () => {
key2: ["fixed"]
},
method: 1,
hasParams: true,
config: function($cmp) {
return {
key2: ["fixed"],
Expand Down
6 changes: 6 additions & 0 deletions packages/@lwc/babel-plugin-component/src/decorators/wire/transform.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,12 @@ function buildWireConfigValue(t, wiredValues) {
wireConfig.push(t.objectProperty(t.identifier('method'), t.numericLiteral(1)));
}

wireConfig.push(
t.objectProperty(
t.identifier('hasParams'),
t.booleanLiteral(!!wiredValue.params && wiredValue.params.length > 0)
)
);
wireConfig.push(getGeneratedConfig(t, wiredValue));

return t.objectProperty(
Expand Down
7 changes: 4 additions & 3 deletions packages/@lwc/engine/src/framework/decorators/register.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ interface WireCompilerDef {
method?: number;
adapter: WireAdapterConstructor;
config: ConfigCallback;
hasParams: boolean;
}
interface RegisterDecoratorMeta {
readonly publicMethods?: MethodCompilerMeta;
Expand Down Expand Up @@ -211,7 +212,7 @@ export function registerDecorators(
}
if (!isUndefined(wire)) {
for (const fieldOrMethodName in wire) {
const { adapter, method, config: configCallback } = wire[fieldOrMethodName];
const { adapter, method, config: configCallback, hasParams } = wire[fieldOrMethodName];
descriptor = getOwnPropertyDescriptor(proto, fieldOrMethodName);
if (method === 1) {
if (process.env.NODE_ENV !== 'production') {
Expand All @@ -225,7 +226,7 @@ export function registerDecorators(
throw new Error();
}
wiredMethods[fieldOrMethodName] = descriptor;
storeWiredMethodMeta(descriptor, adapter, configCallback);
storeWiredMethodMeta(descriptor, adapter, configCallback, hasParams);
} else {
if (process.env.NODE_ENV !== 'production') {
assert.isTrue(
Expand All @@ -236,7 +237,7 @@ export function registerDecorators(
}
descriptor = internalWireFieldDecorator(fieldOrMethodName);
wiredFields[fieldOrMethodName] = descriptor;
storeWiredFieldMeta(descriptor, adapter, configCallback);
storeWiredFieldMeta(descriptor, adapter, configCallback, hasParams);
defineProperty(proto, fieldOrMethodName, descriptor);
}
}
Expand Down
38 changes: 31 additions & 7 deletions packages/@lwc/engine/src/framework/wiring.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@ function createContextWatcher(
}

function createConnector(vm: VM, name: string, wireDef: WireDef): WireAdapter {
const { method, adapter } = wireDef;
const { method, adapter, configCallback, hasParams } = wireDef;
const { component } = vm;
const dataCallback = isUndefined(method)
? createFieldDataCallback(vm, name)
: createMethodDataCallback(vm, method);
Expand All @@ -128,7 +129,7 @@ function createConnector(vm: VM, name: string, wireDef: WireDef): WireAdapter {
},
noop
);
const computeConfigAndUpdate = createConfigWatcher(vm, wireDef, (config: ConfigValue) => {
const updateConnectorConfig = (config: ConfigValue) => {
// every time the config is recomputed due to tracking,
// this callback will be invoked with the new computed config
runWithBoundaryProtection(
Expand All @@ -141,9 +142,27 @@ function createConnector(vm: VM, name: string, wireDef: WireDef): WireAdapter {
},
noop
);
});
// computing the initial config (no context at this point because the component is not connected)
computeConfigAndUpdate();
};

// Computes the current wire config and calls the update method on the wire adapter.
// This initial implementation may change depending on the specific wire instance, if it has params, we will need
// to observe changes in the next tick.
let computeConfigAndUpdate = () => {
updateConnectorConfig(configCallback(component));
};

if (hasParams) {
// This wire has dynamic parameters: we wait for the component instance is created and its values set
// in order to call the update(config) method.
Promise.resolve().then(() => {
computeConfigAndUpdate = createConfigWatcher(vm, wireDef, updateConnectorConfig);

computeConfigAndUpdate();
});
} else {
computeConfigAndUpdate();
}

// if the adapter needs contextualization, we need to watch for new context and push it alongside the config
if (!isUndefined(adapter.contextSchema)) {
createContextWatcher(vm, wireDef, (newContext: ContextValue) => {
Expand Down Expand Up @@ -176,6 +195,7 @@ type WireAdapterSchemaValue = 'optional' | 'required';
interface WireDef {
method?: (data: any) => void;
adapter: WireAdapterConstructor;
hasParams: boolean;
configCallback: ConfigCallback;
}

Expand Down Expand Up @@ -208,7 +228,8 @@ export interface WireAdapterConstructor {
export function storeWiredMethodMeta(
descriptor: PropertyDescriptor,
adapter: WireAdapterConstructor,
configCallback: ConfigCallback
configCallback: ConfigCallback,
hasParams: boolean
) {
// support for callable adapters
if ((adapter as any).adapter) {
Expand All @@ -219,14 +240,16 @@ export function storeWiredMethodMeta(
adapter,
method,
configCallback,
hasParams,
};
WireMetaMap.set(descriptor, def);
}

export function storeWiredFieldMeta(
descriptor: PropertyDescriptor,
adapter: WireAdapterConstructor,
configCallback: ConfigCallback
configCallback: ConfigCallback,
hasParams: boolean
) {
// support for callable adapters
if ((adapter as any).adapter) {
Expand All @@ -235,6 +258,7 @@ export function storeWiredFieldMeta(
const def: WireFieldDef = {
adapter,
configCallback,
hasParams,
};
WireMetaMap.set(descriptor, def);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/integration-karma/test/wire/property-trap/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@ describe('wire adapter update', () => {

return Promise.resolve().then(() => {
const actualWiredValues = elm.getWiredProp();
expect(spy.length).toBe(2);
expect(spy.length).toBe(1);
expect(actualWiredValues.data.recordId).toBe('default value');
elm.setWireKeyParameter(wireKey);

return Promise.resolve().then(() => {
expect(spy.length).toBe(2);
expect(spy.length).toBe(1);
});
});
});
Expand Down
Loading

0 comments on commit c90e12d

Please sign in to comment.