Fix template tags for event handlers fix #130

luwes · Sep 3, 2020 · bb85b70 · bb85b70
1 parent f703c68
commit bb85b70
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/packages/sinuous/observable/src/observable.js b/packages/sinuous/observable/src/observable.js
@@ -117,7 +117,8 @@ function observable(value) {
   }
 
   // Tiny indicator that this is an observable function.
-  data.$o = true;
+  // Used in sinuous/h/src/property.js
+  data.$o = 1;
   data._observers = new Set();
   // The 'not set' value must be unique, so `nullish` can be set in a transaction.
   data._pending = EMPTY_ARR;
@@ -179,7 +180,8 @@ function computed(observer, value) {
   }
 
   // Tiny indicator that this is an observable function.
-  data.$o = true;
+  // Used in sinuous/h/src/property.js
+  data.$o = 1;
 
   function data() {
     if (update._fresh) {

diff --git a/packages/sinuous/template/src/template.js b/packages/sinuous/template/src/template.js
@@ -41,6 +41,11 @@ export function t(key, observed, bind) {
     action._bind = bind;
     recordedActions.push(action);
   };
+
+  // Tiny indicator that this is a template tag.
+  // Used in sinuous/h/src/property.js
+  tag.$o = 2;
+
   return tag;
 }
 

diff --git a/packages/sinuous/template/test/template.js b/packages/sinuous/template/test/template.js
@@ -1,4 +1,5 @@
 import test from 'tape';
+import spy from 'ispy';
 import { h, html } from 'sinuous';
 import { template, o, t } from 'sinuous/template';
 import { map } from 'sinuous/map';
@@ -28,6 +29,25 @@ test('template result fills tags', function(tt) {
   tt.end();
 });
 
+test('template works w/ event listeners', function(tt) {
+  const buttonClick = spy();
+  const obj = { buttonClick };
+  const btn = template(() =>
+    h('button', { onclick: o('buttonClick') }, 'Click me')
+  )(obj).firstChild;
+
+  btn.click();
+  tt.equal(buttonClick.callCount, 1, 'click called');
+
+  obj.buttonClick = spy();
+  btn.click();
+  tt.equal(obj.buttonClick.callCount, 1, 'can change click handler via observable prop');
+
+  tt.equal(buttonClick.callCount, 1, 'first handler is still clicked just once');
+
+  tt.end();
+});
+
 test('template result fills observable tags', function(tt) {
   const obj = { title: 'Apple', class: 'juice' };
   const tmpl = template(() =>