feat(wire-service): rfc implementation

bin/generate-aura-dist.sh

@@ -14,6 +14,12 @@ cp  ./packages/lwc-engine/dist/umd/es5/engine.js $AURA_FILEPATH/aura-resources/s
 cp  ./packages/lwc-engine/dist/umd/es5/engine_debug.js $AURA_FILEPATH/aura-resources/src/main/resources/aura/resources/engine/engine_compat_debug.js
 cp  ./packages/lwc-engine/dist/umd/es5/engine.min.js $AURA_FILEPATH/aura-resources/src/main/resources/aura/resources/engine/engine_compat.min.js
 
+# wire service
+cp  ./packages/lwc-wire-service/dist/umd/es2017/wire* $AURA_FILEPATH/aura-resources/src/main/resources/aura/resources/wire/
+cp  ./packages/lwc-wire-service/dist/umd/es5/wire.js $AURA_FILEPATH/aura-resources/src/main/resources/aura/resources/wire/wire_compat.js
+cp  ./packages/lwc-wire-service/dist/umd/es5/wire_debug.js $AURA_FILEPATH/aura-resources/src/main/resources/aura/resources/wire/wire_compat_debug.js
+cp  ./packages/lwc-wire-service/dist/umd/es5/wire.min.js $AURA_FILEPATH/aura-resources/src/main/resources/aura/resources/wire/wire_compat.min.js
+
 # compiler
 cp  ./packages/lwc-compiler/dist/umd/compiler.js $AURA_FILEPATH/aura-modules/src/main/resources/modules/compiler.js
 

jest.config.js

@@ -8,11 +8,6 @@ module.exports = {
         '<rootDir>/packages/*/**/__tests__/*.spec.(js|ts)'
     ],
     projects: [
-        '<rootDir>',
-        '<rootDir>/packages/*/jest.config.js'
-    ],
-    testPathIgnorePatterns: [
-        'node_modules',
-        'lwc-wire-service'
+        '<rootDir>'
     ]
 };

packages/lwc-integration/scripts/build.js

@@ -13,7 +13,7 @@ const mode = process.env.MODE || 'compat';
 const isCompat = /compat/.test(mode);
 
 const engineModeFile = path.join(require.resolve(`lwc-engine/dist/umd/${isCompat ? 'es5': 'es2017'}/engine.js`));
-const wireServicePath = path.join(require.resolve(`lwc-wire-service/dist/umd/${isCompat ? 'es5': 'es2017'}/wire-service.js`));
+const wireServicePath = path.join(require.resolve(`lwc-wire-service/dist/umd/${isCompat ? 'es5': 'es2017'}/wire.js`));
 const todoPath = path.join(require.resolve('../src/shared/todo.js'));
 
 const testSufix = '.test.js';
@@ -117,7 +117,7 @@ fs.copySync(engineModeFile, path.join(testSharedOutput,'engine.js'));
 fs.writeFileSync(path.join(testSharedOutput,'downgrade.js'), compatPolyfills.loadDowngrade());
 fs.writeFileSync(path.join(testSharedOutput,'polyfills.js'), compatPolyfills.loadPolyfills());
 
-fs.copySync(wireServicePath, path.join(testSharedOutput, 'wire-service.js'));
+fs.copySync(wireServicePath, path.join(testSharedOutput, 'wire.js'));
 fs.copySync(todoPath, path.join(testSharedOutput, 'todo.js'));
 
 // -- Build component tests -----------------------------------------------------=

packages/lwc-integration/src/components/wired/test-wired-method-suite/wired-method/wired-method.js

@@ -1,12 +1,12 @@
 import { Element, api, track, wire } from 'engine';
-import { serviceTodo } from 'todo';
+import { getTodo } from 'todo';
 
 export default class WiredMethod extends Element {
     @api todoId;
     @track state = { error: undefined, todo: undefined };
 
-    @wire(serviceTodo, { id: '$todoId' })
-    function(error, data) {
+    @wire(getTodo, { id: '$todoId' })
+    function({error, data}) {
         this.state = { error: error, todo: data };
     }
 }

packages/lwc-integration/src/components/wired/test-wired-prop-suite/wired-prop/wired-prop.js

@@ -1,9 +1,9 @@
 import { Element, api, wire } from 'engine';
-import { serviceTodo } from 'todo';
+import { getTodo } from 'todo';
 export default class WiredProp extends Element {
     @api todoId;
 
-    @wire(serviceTodo, { id: '$todoId' })
+    @wire(getTodo, { id: '$todoId' })
     todo;
 
     get error() {

packages/lwc-integration/src/shared/templates.js

@@ -9,15 +9,44 @@ exports.app = function (cmpName) {
 
 exports.todoApp = function (cmpName) {
     return `
-        import { serviceTodo } from 'todo';
-        import registerWireService from 'wire-service';
+        import { registerWireService, register as registerAdapter, ValueChangedEvent } from 'wire-service';
         import { createElement, register } from 'engine';
         import Cmp from '${cmpName}';
+        import { getTodo, getObservable } from 'todo';
 
-        registerWireService(register, function () {
-            return {
-                serviceTodo
+        registerWireService(register);
+
+        // Register the wire adapter for @wire(getTodo).
+        registerAdapter(getTodo, function getTodoWireAdapter(wiredEventTarget) {
+            let subscription;
+            let config;
+            wiredEventTarget.dispatchEvent(new ValueChangedEvent({ data: undefined, error: undefined }));
+            const observer = {
+                next: data => wiredEventTarget.dispatchEvent(new ValueChangedEvent({ data, error: undefined })),
+                error: error => wiredEventTarget.dispatchEvent(new ValueChangedEvent({ data: undefined, error }))
             };
+            wiredEventTarget.addEventListener('connect', () => {
+                const observable = getObservable(config);
+                if (observable) {
+                    subscription = observable.subscribe(observer);
+                    return;
+                }
+            });
+            wiredEventTarget.addEventListener('disconnect', () => {
+                subscription.unsubscribe();
+            });
+            wiredEventTarget.addEventListener('config', (newConfig) => {
+                config = newConfig;
+                if (subscription) {
+                    subscription.unsubscribe();
+                    subscription = undefined;
+                }
+                const observable = getObservable(config);
+                if (observable) {
+                    subscription = observable.subscribe(observer);
+                    return;
+                }
+            });
         });
 
         const element = createElement('${cmpName}', { is: Cmp });
@@ -57,7 +86,7 @@ exports.wireServiceHtml = function (cmpName, isCompat) {
             ${isCompat ? COMPAT : ''}
             <script src="../../shared/engine.js"></script>
             <script src="../../shared/todo.js"></script>
-            <script src="../../shared/wire-service.js"></script>
+            <script src="../../shared/wire.js"></script>
             <script src="./${cmpName}.js"></script>
         </body>
     </html>

packages/lwc-integration/src/shared/todo.js

@@ -5,81 +5,84 @@
 }(this, (function (exports) {
     'use strict';
 
-function getSubject(initialValue, initialError) {
-    var observer;
+    function getSubject(initialValue, initialError) {
+        var observer;
 
-    function next(value) {
-        observer.next(value);
-    }
+        function next(value) {
+            observer.next(value);
+        }
 
-    function error(err) {
-        observer.error(err);
-    }
+        function error(err) {
+            observer.error(err);
+        }
 
-    function complete() {
-        observer.complete();
-    }
+        function complete() {
+            observer.complete();
+        }
 
-    var observable = {
-        subscribe: function(obs) {
-            observer = obs;
-            if (initialValue) {
-                next(initialValue);
-            }
-            if (initialError) {
-                error(initialError);
+        var observable = {
+            subscribe: function(obs) {
+                observer = obs;
+                if (initialValue) {
+                    next(initialValue);
+                }
+                if (initialError) {
+                    error(initialError);
+                }
+                return {
+                    unsubscribe: function() {}
+                };
             }
-            return {
-                unsubscribe: function() {}
-            };
-        }
-    };
+        };
 
-    return {
-        next: next,
-        error: error,
-        complete: complete,
-        observable: observable
-    };
-}
+        return {
+            next: next,
+            error: error,
+            complete: complete,
+            observable: observable
+        };
+    }
 
-function generateTodo(id, completed) {
-    return {
-        id: id,
-        title: 'task ' + id,
-        completed: completed
-    };
-}
+    function generateTodo(id, completed) {
+        return {
+            id: id,
+            title: 'task ' + id,
+            completed: completed
+        };
+    }
 
-var TODO = [
-    generateTodo(0, true),
-    generateTodo(1, false),
-    // intentionally skip 2
-    generateTodo(3, true),
-    generateTodo(4, true),
-    // intentionally skip 5
-    generateTodo(6, false),
-    generateTodo(7, false)
-].reduce(function(acc, value) {
-    acc[value.id] = value;
-    return acc;
-}, {});
+    var TODO = [
+        generateTodo(0, true),
+        generateTodo(1, false),
+        // intentionally skip 2
+        generateTodo(3, true),
+        generateTodo(4, true),
+        // intentionally skip 5
+        generateTodo(6, false),
+        generateTodo(7, false)
+    ].reduce(function(acc, value) {
+        acc[value.id] = value;
+        return acc;
+    }, {});
 
 
-function serviceTodo(config) {
-    if (!('id' in config)) {
-        return undefined;
-    }
+    function getObservable(config) {
+        if (!config || !('id' in config)) {
+            return undefined;
+        }
+
+        var todo = TODO[config.id];
+        if (!todo) {
+            var subject = getSubject(undefined, { message: 'Todo not found' });
+            return subject.observable;
+        }
 
-    var todo = TODO[config.id];
-    if (!todo) {
-        var subject = getSubject(undefined, { message: 'Todo not found' });
-        return subject.observable;
+        return getSubject(todo).observable;
     }
 
-    return getSubject(todo).observable;
-}
+    const getTodo = Symbol('getTodo');
 
-    exports.serviceTodo = serviceTodo;
+    exports.getTodo = getTodo;
+    exports.getObservable = getObservable;
     Object.defineProperty(exports, '__esModule', { value: true });
-})));
+})));

packages/lwc-wire-service/package.json

@@ -2,13 +2,13 @@
   "name": "lwc-wire-service",
   "version": "0.18.1",
   "description": "@wire service",
-  "main": "dist/commonjs/es2017/wire-service.js",
-  "module": "dist/modules/es2017/wire-service.js",
+  "main": "dist/commonjs/es2017/wire.js",
+  "module": "dist/modules/es2017/wire.js",
   "scripts": {
+    "build": "concurrently \"yarn build:es-and-cjs\" \"yarn build:umd:dev\" \"yarn build:umd:prod\"",
     "clean": "rm -rf dist",
-    "lint": "eslint src playground",
-    "build": "concurrently \"yarn build:es-and-cjs\" \"yarn build:umd:dev\"",
     "build:umd:dev": "rollup -c rollup.config.umd.dev.js",
+    "build:umd:prod": "rollup -c rollup.config.umd.prod.js",
     "build:es-and-cjs": "rollup -c rollup.config.es-and-cjs.js",
     "build:playground": "rollup -c playground/rollup.config.js",
     "serve": "node playground/server.js",
@@ -34,7 +34,7 @@
   },
   "lwc": {
     "modules": {
-      "wire-service": "dist/modules/es2017/wire-service.js"
+      "wire-service": "dist/modules/es2017/wire.js"
     }
   }
 }

packages/lwc-wire-service/playground/app.js

@@ -1,10 +1,10 @@
 // bootstrapping process for App
 import { createElement, register } from 'engine';
+import { registerWireService } from 'wire-service';
 import App from 'x-demo';
 
-import registerPlaygroundWireAdapters from 'x-wire-adapter';
 
-registerPlaygroundWireAdapters({register});
+registerWireService(register);
 
 const container = document.getElementById('main');
 const element = createElement('x-demo', { is: App });

packages/lwc-wire-service/playground/rollup.config.js

@@ -11,7 +11,7 @@ function resolver() {
         resolveId: (id) => {
             // wire service itself (no namespace)
             if (id === 'wire-service') {
-                return path.resolve('./src/main.js');
+                return require.resolve('lwc-wire-service').replace('commonjs', 'modules');
             } else if (id === 'engine') {
                 return require.resolve('lwc-engine').replace('commonjs', 'modules');
             // test and wire namespace components

packages/lwc-wire-service/playground/x/demo/demo.html

@@ -7,9 +7,11 @@ <h1>Demo of @wire</h1>
     <h2>Component with single @wire bound to field</h2>
     <x-single-wire todo-id={state.todoId}></x-single-wire>
     <hr>
+
     <h2>Component with single @wire bound to method</h2>
     <x-single-wire-method todo-id={state.todoId}></x-single-wire-method>
     <hr>
     <h2>Component with multiple @wires driven by non-@api properties</h2>
     <x-multiple-wires todo-id={state.todoId}></x-multiple-wires>
+
 </template>

packages/lwc-wire-service/playground/x/multiple-wires/multiple-wires.js

@@ -1,4 +1,5 @@
 import { Element, api, wire } from 'engine';
+import { getTodo } from 'x-todo-api';
 
 export default class MultipleWires extends Element {
     idA;
@@ -18,10 +19,10 @@ export default class MultipleWires extends Element {
         return this.idA;
     }
 
-    @wire('todo', { id: '$idA' })
+    @wire(getTodo, { id: '$idA' })
     todoA;
 
-    @wire('todo', { id: '$idB' })
+    @wire(getTodo, { id: '$idB' })
     todoB;
 
     get hasError() {

packages/lwc-wire-service/playground/x/single-wire-method/single-wire-method.js

@@ -1,13 +1,14 @@
 import { Element, api, wire, track } from 'engine';
+import { getTodo } from 'x-todo-api';
 
 export default class SingleWireMethod extends Element {
     @api todoId;
 
     @track error = undefined;
     @track todo = undefined;
 
-    @wire('todo', { id: '$todoId' })
-    function(error, data) {
+    @wire(getTodo, { id: '$todoId' })
+    function({error, data}) {
         this.error = error;
         this.todo = data;
     }