soundstep/soma-template

Seamless DOM-based templates.

Hi 👋

Currently hard working on private repositories, you won't see most of my work!

I obviously like programming in general, that's why I'm here. I do like node.js and vanilla Javascript. "Minimal" is a term that generally works for me as I believe "going towards simplicity" is an important mantra to have.

Without killing the fun, I follow some old concepts that Javascript developers seem to forget nowadays. Like the Law of Demeter, scalability, maintainability, well-used design patterns, and so on. For this reason, I love frameworks, libraries, and open-source code and I believe in user-friendly API, abstractions, and well-built interfaces.

Besides that, I love scripting anything that will help me, and probably some colleagues, regardless of the language: Javascript, NodeJS, Go, Deno, bash, or anything that will work at that moment. I take scripting every day's tasks as an excuse to learn new tools and new languages because I'm really really... curious!

Monorepos and a big accent on automation and workflows seem to be part of my daily life as a developer.

Get in touch, just for chatting!

soma-template's Issues

data-repeat undefined parameter

If I have this piece of code:

<div data-repeat="item in items" class="{{helper(item)}}">...</div>

the first call of helper gets undefined as parameter, after that normal calls on items follows.

Here is a live example (look in the console): http://plnkr.co/edit/WyFDSx?p=preview

Boolean special attribue

Hi, why attributes like data-show/hide have their values evaluated with isAttributeDefined function? I think there is more suitable conversion to boolean value.

Consider I have variable (non-boolean but can be null) to render in a div element and I want to show that div only if the variable is non null. With current implementation a have to create another control variable or a helper (to boolean coversion):

scope.variable = ...;
scope.showVariable = scope.variable != null;

<div data-show="{{scope.showVariable}}">{{scope.variable}}</div>

If the attribute values will be converted to boolean I can do this:

scop.variable = ...;

<div data-show="{{scope.variable}}">{{scope.variable}}</div>

This is more confortable and clear I think.

data-enabled attribute

It would be nice to have a data-enabled attribute which is the negation of the data-disabled attribute. This will make the code more logical when tieing it to a boolean variable that determines whether or not a boolean attribute is enabled. For example:

 Agree to terms and conditions: 
 <input type="checkbox" data-checked="{{termsAndConditionsChecked}}" >
 <input type="text" data-enabled="{{termsAndConditionsChecked}}" >

And in the template

var template = function(scope) {
    scope.termsAndConditions = false;
}

This will avoid having to do a negation for the variable as would be the case for the data-disabled attribute.
Happy to work on a PR for this "feature" if needed ..

data-click type events not working on iOS

For some reason the data-click event on elements does not work on iOS, on either the simulator or on real iOS devices. The only solution is to use a delegated jQuery event to fire the scoped functions. That said, the data-click event works fine on Android and Windows Phone 8.

demos/people doesn't work under Firefox

New item is added on every keydown in the text input fields. Appended item contains the fields values just before current key pressed. In attached picture I have just typed ABC in the first field, and then 123 in the second, not touching "add" button:

Update Typescript definition

Reminder:
The soma.d.ts seems out of date, need to update it.

Run-time compiled templates not initialising nested templates

Hi Soundstep:

http://plnkr.co/edit/gHwT7PPCgpjIjv2pIcfT?p=preview

Is this expected functionality? I require that a template can be compiled from mark-up, instantiating any templates contained in that markup.

This is more my situation:

function XTemplate (template, scope, element) {
  var markup = require('./templates/_xTemplate.html');

  template.compile();
  scope = template.scope;
}

_xTemplate.html

<div data-template="YTemplate"></div>
<div data-template="ZTemplate"></div>

If this issue won't be fixed for a while, how might I circumvent this limitation for the time being?

Many thanks, hope you are doing well.

Yours,
Rob.

angular like "filters" in data-repeat

Would be nice to have angular like "filters" in data-repeat
Is there any similar functionality?

soma-template swallowing errors in services, templates

soma-template/src/12.bootstrap.js

Line 21 in cf7d4a7

} catch(err){}

Without any sort of logging on this line, or re-throwing the error, when a template encounters an error it does so quietly, which causes problems identifying the offending code without placing breakpoints at strategic positions.

Late instantiation of templates doesn't work as expected

http://plnkr.co/edit/m907ipqWj8UrluYHcRWo?p=preview

As demonstrated by plnkr above, instantiation of templates after initial parsing doesn't work as expected.

Sorry I can't provide more information about this bug, finding it difficult to pinpoint the exact cause.

Template constructor, named variables not honored

http://plnkr.co/edit/vXkEq5K2bxKjSOJ1PE9i?p=preview

Generally in soma named variables in constructors are assigned to their associated variables, rather than being assigned based on order. I incorrectly assumed this would be the case with instantiating templates.

I think it would be nice to bring this in-line with how constructors behave elsewhere.

You may be aware of this point, I just wished to bring it your attention as it can be the cause of unexpected behaviour.

data-model

I propose to add a special attribute tag "data-model" which would tie a model class/ object to the template

Make the docs more clear about the use of npm install

I think there is a missing point about the use of soma-template when installing with npm install. To make it properly work I had to do the following

var soma = require('soma.js');
var template = require('soma-template');
soma.plugins.add(template.Plugin);

However, only the second line is included in the docs. I think all 3 should be included for clarity (happy to do a PR if needed).

data-repeat incorrectly rendering when initially blank, then subsequently rendered with items

Demonstrated by: http://plnkr.co/edit/01kNm2kCdDKElUbYtrXG?p=preview

Initially rendering with an empty array results in incorrect subsequent appending of data-repeat elements

2 questions

Hi,

this library looks great and the file size makes it excellent for 3rd party widgets.

The library seems similar to http://vuejs.org/ (the syntax) and http://lhorie.github.io/mithril/ (the DOM-based template). How is Soma different/better?

Can we have effects on DOM changes? When a node is removed/added can an effect be applied?

data-show for inline elements

Hi,

The data-show attribute looks like designed for block elements.
Does soma-template have such special attributes for other types of elements, like inline element?
Thanks to the flexibility the framework offer, I can do these kind of job with combination of inline-style and curly braces for now. However I will be glad if it provides such attributes.

Thanks.

Parse functions in parameters

When an interpolation token is used as a helper (scope function), allow parameters to be helper/function calls too.

E.g.

<div data-show="{{and(isFirst($index), infoIsDefined)}}">
    {{upperCase(replace(" ", "-", info))}}
</div>

conditional if/else ?

Hi,

Is there any way to reproduce an if statement inside the template ?
(e.g. "do not append such block if something")

It would be like data-hide except that i don't want the node to be in the DOM.

Thanks in advance,

Stéphane.

data-skip attributes from scoped variables (Tokens)

Hi,

I'm running into an issue while using repeaters within soma-template. The data-skip attribute looks like it should resolve the problems I'm encountering, but it doesn't seem to behave as I'd expect when using a boolean value set against the scope or returned from a scoped function or helper function.

Here's an example:
http://plnkr.co/edit/BGmNq8RQhu2pX3HHeMa7?p=preview

From what I can see, none of the {{age}} values should be rendered as they are both set with an active data-skip attribute. However data-skip only seems to function when given "true".

Thanks for your time.

Dave

Possible confusion involving template re-compilation

http://plnkr.co/edit/wsADmQWYGxaXQZSv5lfx?p=preview

The above plnkr demonstrates a situation that caught me out when writing a self-compiling template, not sure if it's worth adding a note to http://soundstep.github.io/soma-template/#re-compile, pointing out that the scope is recreated upon compilation (thus re-assignments are required).

Setting value should use the content attribute

If you write:

<input type="text" name="name" value="{{name}}">

Then:

1. Render the template
2. Allow the user to type in the text field
3. Update the the scope and re-render the template

The field will fail to update. This is because setAttribute affects the default value of the input.

As MDN summarises it:

Using setAttribute() to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use elt.value instead of elt.setAttribute('value', val).
[ https://developer.mozilla.org/en-US/docs/Web/API/element.setAttribute ]

The spec is more cryptic:

The value content attribute gives the default value of the input element. When the value content attribute is added, set, or removed, if the control's dirty value flag is false, the user agent must set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise, and then run the current value sanitization algorithm, if one is defined.
[ http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html ]

I've observed this behaviour in both Firefox and Chrome.

This makes it difficult to update text fields using soma templates. One use case is that the user enters a string, passes it to the server to save, the server passes back a sanitized/trimmed version of the string, and the app goes to re-render the form with the updated string. Currently this workflow is impossible.

Soma should either:

a) Treat 'value' as a special attribute and set it using the content attribute instead of setAttribute, or
b) Allow both behaviours and have data-value set the content attribute

I think (a) is preferable.

Can't pass arguments to helper function nor perform arithmetic operations.

Hello.

Could you help me with following code?

<tr data-repeat="i in range(0, items.length, 3)">
    <td><p>{{items[i* 3 + 0].ref}}</td>
    <td><p>{{items[i * 3 + 1].ref}}</td>
    <td><p>{{items[i * 3 + 2].ref}}</td>
</tr>

Can't manage to properly pass arguments to the range function
The first and last parameter are undefined.
Tried passing values as strings "range('0', items.length, '3'" but only items.length is defined.
Also "range(0, 10, 3)" gets all parameters undefined but "range('0', '10', '3')" gets all parameters.

Another problem is that I can't manage to evaluate arithmetic operations.
"i * 3 + n" expressions aren't evaluated.

I'm I missing something here or are these bugs?

Thanks

missing license and copyright

Hello,
i can't find any license or copyright information.
It is often found in a LICENSE file, along with short notices in sources files.
As it is, one has no right to use, distribute, modify your program...
Since you probably don't care about the license (you would have put one if you did), i suggest the liberal MIT.
A list here:
http://opensource.org/licenses