data binding on 0.5 beta

[griebd]

Hi there, nice approach, I'm just trying it out...

After some trouble to start I made the example in the README of S.js work except by the ×, it shows exactly like that and not as "×".

Anyway, I went forward and moved to 0.5 beta and now the data bindings for the inputs are not working anymore!!! the only change was the library version!

Thanks, and again, congratulations! I hope it does thrive!

  1 import S from 's-js';                                                          
  2 import SArray from 's-array';                                                  
  3 import * as Surplus from 'surplus';                                            
  4 import data from 'surplus-mixin-data';                                         
  5                                                                                
  6 var Todo = t => ({               // our Todo constructor                       
  7        title: S.data(t.title),   // properties are data signals                
  8        done: S.data(t.done)                                                    
  9     }),                                                                        
 10     todos = SArray([]),          // our array of todos                         
 11     newTitle = S.data(""),       // title for new todos                        
 12     addTodo = () => {            // push new title onto list                   
 13        todos.push(Todo({ title: newTitle(), done: false }));                   
 14        newTitle("");             // clear new title                            
 15     },                                                                         
 16     view = S.root(() =>                                                        
 17        <div>                     // declarative main view                      
 18           <input type="text" {...data(newTitle)}/>                             
 19           <a onClick={addTodo}>+</a>                                           
 20           {todos.map(todo =>     // insert todo views                          
 21              <div>                                                             
 22                 <input type="checkbox" {...data(todo.done)}/>                  
 23                 <input type="text" {...data(todo.title)}/>                     
 24                 <a onClick={() => todos.remove(todo)}>&times;</a>              
 25              </div>)}                                                          
 26        </div>);                                                                
 27                                                                                
 28 window.onload = () => {                                                        
 29   document.body.appendChild(view); // add view to document                     
 30 };                                                                             

  1 import minify from 'rollup-plugin-babel-minify';                               
  2 import nodeResolve from 'rollup-plugin-node-resolve';                          
  3 import surplus from 'rollup-plugin-surplus';                                   
  4                                                                                
  5 export default {                                                               
  6   entry: 'main.js',                                                            
  7   dest: 'bundle.js',                                                           
  8   'format': 'iife',                                                            
  9   'plugins': [                                                                 
 10     surplus(),                                                                 
 11     process.env.ENV === "production" ? minify({                                
 12       "comments": false,                                                       
 13       "sourceMap": false,                                                      
 14     }) : undefined,                                                            
 15     nodeResolve(),                                                             
 16   ].filter(x => x !== undefined),                                              
 17 }                                                                              

[adamhaile]

Hi Adriano -- Yes, 0.5 changes the syntax for using mixin functions. In 0.4, the spread syntax <tag {... } /> was overloaded between spread objects and mixin functions. In 0.5 you have to be explicit. Mixin functions now use the special fn={} attribute. So change all those {...data(...)} mixins to fn={data(...)} and it should work. This is actually the main reason for the version bump to 0.5, since it's breaking compatibility.

Sorry the example there confused you. I plan to bump it to 0.5 syntax once 0.5 is released.

The fact that html entities aren't being transpiled is something I noticed just recently. You can replace the × with × directly in the code for that. I'll update the readme with that and add a bug to figure out what's going on with entities.

Thanks for the report! If there's anything else that was a stumbling point, let me know. -- Adam

[griebd]

my mistake then! :wink:

about the html entities, we need then sometimes! and taking this opportunity, is this library safe against XSS? I mean, html entities from the view code should be interpreted as html, but anything from variables (may come from user input, db, unknown source) shouldn't...

thanks again!!!

[adamhaile]

Yes, Surplus works on DOM nodes, not strings, so any funny characters in, say, user supplied variables, just comes through as text, not HTML code.

[griebd]

good!!! thanks again!!! I will keep evaluating it for my project... now I need a router! (mithril was all included...)