Bug: Reserve data= In Shorthand Subtemplates (#188)

Author: jlukic

packages/compiler/src/template-compiler.js

@@ -652,6 +652,11 @@ class TemplateCompiler {
       each(dataMatches, (match, index) => {
         let name = match[1].trim();
         let value = match[2].trim();
+        // `data` is the reserved blob arg, not a reactive key
+        if (name === 'data') {
+          templateInfo.data = value;
+          return;
+        }
         data[name] = value;
       });
       // standard notation defaults to reactive data

packages/compiler/test/compiler.test.js

@@ -1306,6 +1306,30 @@ describe('TemplateCompiler', () => {
       expect(ast).toEqual(expectedAST);
     });
 
+    it('should route shorthand data= to node.data, not reactiveData', () => {
+      const compiler = new TemplateCompiler();
+      const ast = compiler.compile(`{>child data=getCardData}`);
+      expect(ast).toEqual([
+        { type: 'template', name: "'child'", data: 'getCardData', reactiveData: {} },
+      ]);
+    });
+
+    it('should split mixed shorthand args into data and reactiveData', () => {
+      const compiler = new TemplateCompiler();
+      const ast = compiler.compile(`{>child data=getRow extra=foo}`);
+      expect(ast).toEqual([
+        { type: 'template', name: "'child'", data: 'getRow', reactiveData: { extra: 'foo' } },
+      ]);
+    });
+
+    it('should produce equivalent data binding for shorthand vs verbose', () => {
+      const compiler = new TemplateCompiler();
+      const shorthand = compiler.compile(`{>child data=getRow}`);
+      const verbose = compiler.compile(`{> template name='child' data=getRow}`);
+      expect(shorthand[0].data).toBe(verbose[0].data);
+      expect(shorthand[0].reactiveData ?? {}).toEqual(verbose[0].reactiveData ?? {});
+    });
+
     it('should compile a template with a partial and reactive data', () => {
       const compiler = new TemplateCompiler();
       const template = `

packages/renderer/test/browser/subtree-misc.test.js

@@ -336,8 +336,8 @@ RENDERING_ENGINES.forEach(engine => {
           tagName: tag,
           template: [
             '{#snippet leaf}<span>{value}</span>{/snippet}',
-            '{#snippet branch}{>leaf value=data}{/snippet}',
-            '{>branch data=(getLabel)}',
+            '{#snippet branch}{>leaf value=label}{/snippet}',
+            '{>branch label=(getLabel)}',
           ].join(''),
           defaultState: { count: 0 },
           createComponent: ({ state }) => ({