wire api fix

packages/@lwc/engine-server/src/__tests__/fixtures/wire/invocation-sequence/method/config.json

@@ -0,0 +1,3 @@
+{
+    "entry": "x/parent"
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/invocation-sequence/method/expected.html

@@ -0,0 +1,20 @@
+<fixture-test>
+  <template shadowrootmode="open">
+    <x-wire>
+      <template shadowrootmode="open">
+        <div>
+          Invocation sequence: 
+ 1. component: setApiValue(parent provided (initial) value)
+ 2. adapter: connect()
+ 3. component: getApiValue(parent provided (initial) value)
+ 4. adapter: update()
+ 5. component: wiredMethod(wire provided value)
+ 6. component: setApiValue(wire provided value)
+        </div>
+        <div>
+          Api Value: wire provided value
+        </div>
+      </template>
+    </x-wire>
+  </template>
+</fixture-test>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/invocation-sequence/method/modules/x/parent/parent.html

@@ -0,0 +1,3 @@
+<template>
+    <x-wire api-value={apiValue}></x-wire>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/invocation-sequence/method/modules/x/parent/parent.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class Parent extends LightningElement {
+    apiValue = 'parent provided (initial) value';
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/invocation-sequence/method/modules/x/wire/adapter.js

@@ -0,0 +1,18 @@
+export let invocationSequence = [];
+
+export class adapter {
+    constructor(dataCallback) {
+        this.dc = dataCallback;
+    }
+
+    connect() {
+        invocationSequence.push('adapter: connect()');
+    }
+
+    update() {
+        invocationSequence.push('adapter: update()');
+        this.dc('wire provided value');
+    }
+
+    disconnect() {}
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/invocation-sequence/method/modules/x/wire/wire.html

@@ -0,0 +1,4 @@
+<template>
+    <div>Invocation sequence: {invocationSequence}</div>
+    <div>Api Value: {apiValue}</div>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/invocation-sequence/method/modules/x/wire/wire.js

@@ -0,0 +1,26 @@
+import { LightningElement, wire, api } from 'lwc';
+
+import { adapter, invocationSequence } from './adapter';
+
+export default class Wire extends LightningElement {
+    @api
+    set apiValue(value) {
+        invocationSequence.push(`component: setApiValue(${value})`);
+        this._apiValue = value;
+    }
+
+    get apiValue() {
+        invocationSequence.push(`component: getApiValue(${this._apiValue})`);
+        return this._apiValue;
+    }
+
+    @wire(adapter, { apiValue: '$apiValue' })
+    wiredMethod(value) {
+        invocationSequence.push(`component: wiredMethod(${value})`);
+        this.apiValue = value;
+    }
+
+    get invocationSequence() {
+        return invocationSequence.map((invocation, i) => `\n ${i + 1}. ${invocation}`).join('');
+    }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/invocation-sequence/prop/config.json

@@ -0,0 +1,3 @@
+{
+    "entry": "x/wire"
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/invocation-sequence/prop/expected.html

@@ -0,0 +1,12 @@
+<fixture-test>
+  <template shadowrootmode="open">
+    <div>
+      Wire adapter invocation sequence: 
+ 1. adaptor connect()
+ 2. adaptor update()
+    </div>
+    <div>
+      Wired prop: true
+    </div>
+  </template>
+</fixture-test>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/invocation-sequence/prop/modules/x/wire/adapter.js

@@ -0,0 +1,18 @@
+export let invocationSequence = [];
+
+export class adapter {
+    constructor(dataCallback) {
+        this.dc = dataCallback;
+    }
+
+    connect() {
+        invocationSequence.push('adaptor connect()');
+    }
+
+    update() {
+        invocationSequence.push('adaptor update()');
+        this.dc(true);
+    }
+
+    disconnect() {}
+}

packages/@lwc/engine-server/src/__tests__/fixtures/wire/invocation-sequence/prop/modules/x/wire/wire.html

@@ -0,0 +1,4 @@
+<template>
+    <div>Wire adapter invocation sequence: {invocationSequence}</div>
+    <div>Wired prop: {wiredProp}</div>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/wire/invocation-sequence/prop/modules/x/wire/wire.js

@@ -0,0 +1,12 @@
+import { LightningElement, wire } from 'lwc';
+
+import { adapter, invocationSequence } from './adapter';
+
+export default class Wire extends LightningElement {
+    @wire(adapter)
+    wiredProp;
+
+    get invocationSequence() {
+        return invocationSequence.map((invocation, i) => `\n ${i + 1}. ${invocation}`).join('');
+    }
+}

packages/@lwc/ssr-compiler/src/compile-js/generate-markup.ts

@@ -46,7 +46,6 @@ const bGenerateMarkup = esTemplate`
             });
 
             __establishContextfulRelationship(contextfulParent, instance);
-            ${/*connect wire*/ is.statement}
 
             instance[__SYMBOL__SET_INTERNALS](
                 props,
@@ -59,6 +58,7 @@ const bGenerateMarkup = esTemplate`
                 instance.connectedCallback();
                 __mutationTracker.disable(instance);
             }
+            ${/*connect wire*/ is.statement}
             // If a render() function is defined on the class or any of its superclasses, then that takes priority.
             // Next, if the class or any of its superclasses has an implicitly-associated template, then that takes
             // second priority (e.g. a foo.html file alongside a foo.js file). Finally, there is a fallback empty template.