feat(wire-service): imported function identifier as adapter id for @wire

packages/babel-plugin-transform-lwc-class/src/__tests__/wire-decorator.test.js

@@ -12,9 +12,9 @@ describe('Wired field', () => {
         export default class Test {}
         Test.wire = {
             innerRecord: {
-                type: "record",
                 params: { recordId: "recordId" },
-                static: { fields: ["Account", 'Rate'] }
+                static: { fields: ["Account", 'Rate'] },
+                type: "record"
             }
         };
     `);
@@ -31,17 +31,37 @@ describe('Wired field', () => {
         },
     });
 
-    test('decorator expects a string as first parameter', `
+    test('decorator expects a function identifier as first parameter', `
+        import { wire } from 'engine';
+        import { record } from 'data-service';
+        export default class Test {
+            @wire(record, {}) innerRecord;
+        }
+    `, `
+        import { wire } from 'engine';
+        import { record } from 'data-service';
+        export default class Test {}
+        Test.wire = {
+            innerRecord: {
+                params: {},
+                static: {},
+                adapter: record
+            }
+        };
+    `);
+
+    test('decorator expects an imported identifier as first parameter', `
+        import { wire } from 'engine';
         const RECORD = "record"
         export default class Test {
             @wire(RECORD, {}) innerRecord;
         }
     `, undefined, {
-        message: 'test.js: @wire expects a string as first parameter.',
-        loc: {
-            line: 3,
-            column: 10,
-        },
+            message: 'test.js: @wire expects a function identifier to be imported as first parameter.',
+            loc: {
+                line: 4,
+                column: 6,
+            },
     });
 
     test('decorator expects an oject as second parameter', `
@@ -69,9 +89,9 @@ describe('Wired method', () => {
         }
         Test.wire = {
             innerRecordMethod: {
-                type: "record",
                 params: { recordId: "recordId" },
                 static: { fields: ["Account", 'Rate'] },
+                type: "record",
                 method: 1
             }
         };

packages/babel-plugin-transform-lwc-class/src/decorators/wire.js

@@ -31,10 +31,6 @@ module.exports = function wireVisitor ({ types: t }) {
     function buildWireConfigValue(wiredValues) {
         return t.objectExpression(wiredValues.map(wiredValue => {
             const wireConfig = [
-                t.objectProperty(
-                    t.identifier('type'),
-                    t.stringLiteral(wiredValue.type)
-                ),
                 t.objectProperty(
                     t.identifier('params'),
                     t.objectExpression(wiredValue.params)
@@ -45,6 +41,25 @@ module.exports = function wireVisitor ({ types: t }) {
                 )
             ];
 
+            // TODO: deprecate type (string as adapter id once consumer has migrated to use imported identifier)
+            if (wiredValue.type) {
+                wireConfig.push(
+                    t.objectProperty(
+                        t.identifier('type'),
+                        t.stringLiteral(wiredValue.type)
+                    )
+                )
+            }
+
+            if (wiredValue.adapter) {
+                wireConfig.push(
+                    t.objectProperty(
+                        t.identifier('adapter'),
+                        t.identifier(wiredValue.adapter)
+                    )
+                )
+            }
+
             if (wiredValue.isClassMethod) {
                 wireConfig.push(
                     t.objectProperty(
@@ -72,9 +87,16 @@ module.exports = function wireVisitor ({ types: t }) {
                     );
                 }
 
-                if (!id.isStringLiteral()) {
+                // TODO: deprecate string as adapter id once consumer has migrated to use imported identifier
+                if (!id.isStringLiteral() && !id.isIdentifier()) {
+                    throw id.buildCodeFrameError(
+                        `@wire expects a string or a function identifier as first parameter.`
+                    );
+                }
+
+                if (id.isIdentifier() && !path.scope.getBinding(id.node.name).path.isImportSpecifier()) {
                     throw id.buildCodeFrameError(
-                        `@wire expects a string as first parameter.`
+                        `@wire expects a function identifier to be imported as first parameter.`
                     );
                 }
 
@@ -89,13 +111,21 @@ module.exports = function wireVisitor ({ types: t }) {
                     kind: 'method'
                 });
 
-                wiredValues.push({
+                const wiredValue = {
                     propertyName,
                     isClassMethod,
-                    type: id.node.value,
                     static: getWiredStatic(config),
                     params: getWiredParams(config),
-                });
+                }
+
+                // TODO: deprecate type (string as adapter id once consumer has migrated to use imported identifier)
+                if (id.isStringLiteral()) {
+                    wiredValue.type = id.node.value;
+                } else if (id.isIdentifier()) {
+                    wiredValue.adapter = id.node.name;
+                }
+
+                wiredValues.push(wiredValue);
 
                 path.remove();
             }

packages/lwc-integration/scripts/build.js

@@ -82,12 +82,13 @@ const globalModules = {
     'babel/helpers/createClass' : 'createClass',
     'babel/helpers/defineProperty': 'defineProperty',
     'babel/helpers/objectDestructuringEmpty': 'objectDestructuringEmpty',
-    'wire-service': 'WireService'
+    'wire-service': 'WireService',
+    'todo': 'Todo'
 };
 
 const baseInputConfig = {
     external: function (id) {
-        if (id.includes('babel/helpers') || id.includes('engine') || id.includes('wire-service')) {
+        if (id.includes('babel/helpers') || id.includes('engine') || id.includes('wire-service') || id.includes('todo')) {
             return true;
         }
     },
@@ -116,6 +117,7 @@ const baseOutputConfig = {
 const engineModeFile = path.join(require.resolve(`lwc-engine/dist/umd/${isCompat ? 'es5': 'es2017'}/engine.js`));
 const compatPath = path.join(require.resolve('proxy-compat-build/dist/umd/compat_downgrade.js'));
 const wireServicePath = path.join(require.resolve(`lwc-wire-service/dist/umd/${isCompat ? 'es5': 'es2017'}/wire-service.js`));
+const todoPath = path.join(require.resolve('../src/shared/todo.js'));
 
 if (!fs.existsSync(engineModeFile)) {
     throw new Error("Compat version of engine not generated in expected location: " + engineModeFile
@@ -126,6 +128,7 @@ if (!fs.existsSync(engineModeFile)) {
 fs.copySync(compatPath, path.join(testSharedOutput, 'compat.js'));
 fs.copySync(engineModeFile, path.join(testSharedOutput,'engine.js'));
 fs.copySync(wireServicePath, path.join(testSharedOutput, 'wire-service.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,10 +1,10 @@
 import { Element } from 'engine';
-
+import { serviceTodo } from 'todo';
 export default class WiredMethod extends Element {
     @api todoId;
     @track state = { error: undefined, todo: undefined };
 
-    @wire('todo', { id: '$todoId' })
+    @wire(serviceTodo, { 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 } from 'engine';
-
+import { serviceTodo } from 'todo';
 export default class WiredProp extends Element {
     @api todoId;
 
-    @wire('todo', { id: '$todoId' })
+    @wire(serviceTodo, { id: '$todoId' })
     todo;
 
     get error() {

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

@@ -9,88 +9,14 @@ exports.app = function (cmpName) {
 
 exports.todoApp = function (cmpName) {
     return `
+        import { serviceTodo } from 'todo';
         import registerWireService from 'wire-service';
         import { createElement, register } from 'engine';
         import Cmp from '${cmpName}';
 
-        function getSubject(initialValue, initialError) {
-            let observer;
-
-            function next(value) {
-                observer.next(value);
-            }
-
-            function error(err) {
-                observer.error(err);
-            }
-
-            function complete() {
-                observer.complete();
-            }
-
-            const observable = {
-                subscribe: (obs) => {
-                    observer = obs;
-                    if (initialValue) {
-                        next(initialValue);
-                    }
-                    if (initialError) {
-                        error(initialError);
-                    }
-                    return {
-                        unsubscribe: () => { }
-                    };
-                }
-            };
-
-            return {
-                next,
-                error,
-                complete,
-                observable
-            };
-        }
-
-        function generateTodo(id, completed) {
-            return {
-                id,
-                title: 'task ' + id,
-                completed
-            };
-        }
-
-        const 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((acc, value) => {
-            acc[value.id] = value;
-            return acc;
-        }, {});
-
-
-        function serviceTodo(config) {
-            if (!('id' in config)) {
-                return undefined;
-            }
-
-            const todo = TODO[config.id];
-            if (!todo) {
-                const subject = getSubject(undefined, { message: 'Todo not found' });
-                return subject.observable;
-            }
-
-            return getSubject(todo).observable;
-        }
-
         registerWireService(register, () => {
             return {
-                'todo': serviceTodo
+                serviceTodo
             };
         });
 
@@ -132,6 +58,7 @@ exports.wireServiceHtml = function (cmpName, isCompat) {
         <body>
             ${isCompat ? COMPAT : ''}
             <script src="/shared/engine.js"></script>
+            <script src="/shared/todo.js"></script>
             <script src="/shared/wire-service.js"></script>
             <script src="./${cmpName}.js"></script>
         </body>

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

@@ -0,0 +1,85 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+        typeof define === 'function' && define.amd ? define(['exports'], factory) :
+            (factory((global.Todo = {})));
+}(this, (function (exports) {
+    'use strict';
+
+function getSubject(initialValue, initialError) {
+    var observer;
+
+    function next(value) {
+        observer.next(value);
+    }
+
+    function error(err) {
+        observer.error(err);
+    }
+
+    function complete() {
+        observer.complete();
+    }
+
+    var observable = {
+        subscribe: function(obs) {
+            observer = obs;
+            if (initialValue) {
+                next(initialValue);
+            }
+            if (initialError) {
+                error(initialError);
+            }
+            return {
+                unsubscribe: function() {}
+            };
+        }
+    };
+
+    return {
+        next: next,
+        error: error,
+        complete: complete,
+        observable: observable
+    };
+}
+
+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;
+}, {});
+
+
+function serviceTodo(config) {
+    if (!('id' in config)) {
+        return undefined;
+    }
+
+    var todo = TODO[config.id];
+    if (!todo) {
+        var subject = getSubject(undefined, { message: 'Todo not found' });
+        return subject.observable;
+    }
+
+    return getSubject(todo).observable;
+}
+
+    exports.serviceTodo = serviceTodo;
+    Object.defineProperty(exports, '__esModule', { value: true });
+})));