riot / riot Goto Github PK

This is no big deal, but I noticed that $.observable misses a way to break circular events, something that I think is important in every Observable/Emitter implementation is sometimes useful to tie two observables together.

This is the failing test:

it("does not call trigger infinitely", function() {
    var counter = 0,
      otherEl = $.observable({});

    el.on("update", function(value) {
      if (counter++ < 1) { // 2 calls are enough to know the test failed
        otherEl.trigger("update", value);
      }
    });

    otherEl.on("update", function(value) {
      el.trigger("update", value);
    });

    el.trigger("update", "foo");

    assert.equal(1, counter);
  });

The usual way to fix this is to add a flag (i.e triggering) that controls that no event gets triggered twice in the same cycle.

Let me know if you actually want this implemented or you want to leave it as-is.

function listener() { alert(1); }
var obj = {};
$.observable(obj);

obj.on('boo', listener);
obj.off('boo', listener);
obj.emit('boo'); // should not alert

Even though listener is passed into obj.on, jq.on receives an anonymous function. This makes it impossible for jq.off to match listener.

E.g. {{name} is captured as a placeholder with key {name, which is an invalid var name.

It looks like it was about to somehow, but it doesn’t.

function a() {
    console.log("a()");
}

function b() {
    console.log("b()");
}

$.observable({}).one("foo", a).on("foo", b).trigger("foo");

Logs

a()

I think the events parameter should be trimed

With browserify I can use the event system of node.js, commonjs pattern and bundle all the files, so what does riot offer that I cannot do with browserify?

like Addy Osmany shows it with Backbone here - http://addyosmani.github.io/traceur-todomvc/docs/app.html

I believe the Riotjs + ES6 syntax is the future of lean apps.

This fantastic project! Simplicity reigns.

How am coming architecture Jade + Expressjs'm a little confused on what is the best way to convert my compomentes JQuery for Riot, since the View is responsible for receiving user events.

Please ideas and explanations.

Thank you

Can you remake riot.js for inheritance with the prototype chain?
I just want to do:

var MyClass = function () {};
MyClass.prototype = Object.Create($.prototype);
var myModule = new MyClass();
myModule.on('created', function() { alert('My Module is created!') });
myModule.trigger('created');

If you remove yourself as listener from an object when you are being called due to a triggering, the callback array will be altered resulting in the next callback being skipped.

This can result in very confusing bugs, which it did for me.

I realize that accomodating this scenario correctly may have performance downsides. For example, if you set a flag on callbacks to be removed, and remove them after, it is obviously going to be slower in the average case. Maybe there is a performant way?

If not, maybe there is a way to raise an exception or assume some form of error state if an event listener is removed during the looping over callbacks?

I would much prefer to crash and burn in this scenario, than to have the next event listener silently not being called, resulting in very subtle bugs.

Otherwise I'm enjoying the simplicity, elegance and speed of Riot. :)

Is the new Function(... reference in render.js a security risk?

I created small function implementing observable pattern with events inspired by riotjs but without jQuery dependency. Feel free to use if you like.

Normal
Branch with namespaces

You can find some use examples in test/js/test.js in both branches.

Hi.
I found it as tough constraint that I can't pass nested objects into the riot template renderer.
Consider a simple two levels of nested object such as the following model object ("data" is just for initialization from store for example):

function Items(data) {
this.name = data.name;
this.price = data.price;
this.details = { 'id': data.details.id, 'image': data.details.image }
...
}

When tested with a template, only the flat properties (such as name and price) would work for me, but the nested ones like so: details.id - would not.
when I looked at the renderer function (regex) I realized it won't work since it does not expect a dot nor a key['name'] format.

Thoughts?
Must I use only Flat properties in model? in other frameworks of-course it is possible.
I don't think it would break the constraint mentioned in Riot blog about the architecture of flat templates to have nested variables. it is not adding any logic

TIA
Tomer

The latest bower version is 1.0.1, but the latest riotjs is 1.12.1, when will the bower tag update to latest version?

any solution for riot.render for environment where uses of eval() and eval-like constructs such as new Function() restricted as previously requested in #45 and i have uses it temporary for render function

var regEx = /\{\s*(\w+)\s*\}/g;
riot.render = function(template, data) {
  return typeof data === 'object' && typeof template === 'string' && 
    template.replace(regEx, function(tag, match) { return data[match] || ''; });
};

but this very minimum and not support x.y.z object access

Note that Riot is not dependent on jQuery. You can use other DOM libraries too such as DOJO or Muutools or you can go with Facebook React.

https://muut.com/riotjs/docs/

Should it be "Mootools" instead?

Is it possible to have urls like:
domain.com/users?

I tried to read all of your documentations, but didnt find nothing about this

fn.apply(el, fn.typed ? [name].concat(args) : args);
what the purpose this statement?

The render code uses new Function("_", "function body as string") but this really is not needed. Moreover this is approach requires sandboxing in new Chrome editions or where the security settings are turned up.

This may not make sense if you intend to do the following

1. You want to support Javascript injection like John Resig's examples, although your general examples and code to date does not indicate so. His example mixes JS and HTML like jsp/asp.
2. You will add extremely complex syntax in the future ala Handlebars, which would seem to go against the manifesto. "Riot views are as dummy as possible. No conditional statements, loops, or data binding. No custom attributes or custom elements."
3. Support server-side template pre-compilation AND you can show a huge performance benefit.

So, then why not pre-process the template in a closure and then create a new function which is statically defined, not evaluated string, that does the string matching and replacing.

People may point out and say hey this could be slower, not really. You don't have to do all the line replaces then because the text is never going to be javascript code. Save time there. You can define the regex within the closure and then it will not need to be created every template evaluation, save time there. eval is not even that fast to being with. It works across more browsers. You could add features to strip out script tags providing security beyond what other templating engines offer. It is dead easy and simple for developers to understand.

Also if we are really looking for time savings do not use the entire TEMPLATE text as the property name. That is one large string compare for no good reason. It requires a little extra code, and an API change to provide a name. However, for larger programs I do not watch to pass the entire template around anyhow. I want to pass the template by reference, and best case I then just wrap this with a name lookup based one and store the templates twice in JS.

I have worked up some stub code this morning, https://github.com/TedMN/riotjs/blob/master/ext/render.js . My style is slightly different but the concepts referenced above are sudo implemented, I have not even run it. However, I have written stuff like this before. Finally, you could also expose the templating function as a generic string replace function. It can be super handy with urls etc. For one app we had config attributes for AJAX urls as they were complex and changed by env. So for example: www.example.com/{1}/{2}?support={3}, but you could also do www.example.com/{entity}/{id}?support={isSupportMode}.

Finally, I do think there is an enhancement to some how use jQuery's looping and set based processing to do looping, bulk processing and conditionals on your template processing. With riot's objective of leveraging jQuery it might be interesting to capitalized on that in a clean, minimalist, way.

\r, \u2028, and \u2029.

I have forked the riotjs project today and attempted to help increase minification, optimize, reduce, etc. I have the code sitting: https://github.com/TedMN/riotjs/blob/master/jquery.riot.js

However, before I create a pull request I want to address the jQuery.load with timeout part of the code. I am sure I can find a way around it and make it more compact as well. However, can anyone provide me with the context?
Ideas:

1. document ready
2. use jquery one event binding to avoid boolean variable
3. understand event flow to avoid timeout since all it does is wait effectively no time. This means it really is waiting for some thing it cannot track that well. What is it?

I have also commented smaller pushes to my fork around variables to help with minification, moving variables up in the process, and putting the initialization/load at the bottom after things are defined.

How do you write riot.js extensions á la jQuery?
There is no information on your blog on howto add functionality to riot.js. Is that your intention, I mean do you encourage people to write general javascript libraries instead of creating a community around riot.js? I hope your share this information on your blog too, I'm sure that more people than just me are interested in this.

https://moot.it/riotjs/ in the bottom says:
Official Release (v1.0) February 2014
:)))

now it is the end of the march :)

btw, thanks for riot.js! the best thing i saw. i'm using it (v0.98) in my projects. thank you!

Hi,
I created this mini project multip-table using your framework with the target of reducing the total weight of the project. And the result was so good that the whole project ended up only 40.0KB on production build.
riotjs is really cool as a micro framework.

i start a project using riot.js ,now i want render a json data like

{
    daily_id:1
    content:"whatever",
    user:{
        name:"oubushixb"
    }
}

template like
<p>{daily_id}</p>
<p>{content}</p>
<a>{user.name}</a>

Whitespace could be important in the template. Better to escape them as \n than to eliminate them.

In the "Model" section of the documentation at https://moot.it/blog/technology/riotjs-the-1kb-mvp-framework.html, it references an "emit" function when it should reference the "trigger" function to trigger an event.

Not specifically an issue with the code, but the documentation.

Please, add source map for riot.min.js.

• When toggling todos with a filter active, the toggled todos should be shown/hidden according to current filter.
• Should finish editing when input is blurred
• Should revert editing if "esc" is pressed when editing

For example, a todo entry like this shows in bold:

<b>test</b>

This can be used to inject script tags too, which could cause problems such as leaking cookies or allowing malicious cross site scripting.

As far as I can tell, $.route doesn't support browsers without HTML5 History API. This means IE10+ is required. Three examples of libraries that do support routing for IE8+:

• Backbone.js
• Director
• Routie

All of the above support IE8+, using hashchange event. Additionally, Directory and Backbone support IE7+, using <iframe>-based emulation.

P.S. What browser versions does riot.js intend to support?

$.render() needs a syntax for inserting raw (literal) HTML without escaping, for example <div>{$content}</div> where the $ symbol would suppress escaping - for one, this would make it possible to compose templates by inserting a rendered result into another template.

I know it's pre-release, but It'd be great to get it on http://cdnjs.com/ :)

The last line in render.js doesn't have semicolon at the end, causing the concatenated build to fail on the the next concatenated module.

The Riot.js introduction says that $.observable events are based on jQuery events. However, the source code shows otherwise.

What was the reasoning behind moving away from jQuery's events? As the introduction states, "a good event library is the single most important feature in a client-side framework". In light of this, what is your vision for the eventual scope of Riot.js events?

expected:
observable.trigger for one() event will remove reference to event handler

actual behavior:
observable.trigger keeps reference to already fired event handlers.

proposed solution:
single-time events should be removed from callbacks[name] array after firing.

Hi,

Just leaving this here to see what you think about it:

I added an optional scope to the observable callbacks in my app. Since a triggered callback function is run in the context of the triggering object I ran into scoping issues when doing something like this:

var gamePresenter = {
    init: function(user) {
       // User is an observable object
        user.on('didUpdateStats', this.renderPlayerStats);
    },
    render: function(template, data) {
        // Render...
    }
    renderPlayerStats: function(stats) {
       // This function will be executed in the scope of the user object
       // resulting in "render" being undefined
       this.render('someTemplate', stats);
    }
}

Of course I could refactor the code to not use "this", but for me an easy solution was to add the scope as a third parameter:

    // riot.observable.on
    el.on = function(events, fn, scope) {
        if (typeof fn === "function") {
          fn.scope = scope;
          ...

   // riot.observable.one
    el.one = function(name, fn, scope) {
        if (fn) fn.one = true;
        return el.on(name, fn, scope);
    };

   // ...and finally riot.observable.trigger
   ...
   fn.apply(fn.scope || el, fn.typed ? [name].concat(args) : args);
   ...

So now I can do this to avoid scoping issues:

    user.on('didUpdateStats', this.renderPlayerStats, this);

What do you think? Does this make any sense?

Is there any way to avoid this? I'm trying to get riot to play nice with browserify, and this presents a problem. Also it seems janky. Right now I'm just wrapping riot and dumping the whole thing into the global scope, I guess it works ok.

Add support for square brackets notation in riot.render function to access object properties with arbitrary string keys like {entry.user[“first:name”]}

The canonical link for documentation ( https://muut.com/riotjs/docs/ ) reads as more of a rant about the state of current client-side application design and manifesto about good design. While I agree with the sentiments expressed, I feel that the commentary actively gets in the way of using the this documentation as either a learning tool or as reference material. Have you considered breaking out the reference material to a separate page?

I tried to use Riot.js observable with React components. But I can't find a way to remove specific listeners. I think memory will leak without doing it. Am I right? Example:

var Bus = observable({});

var component = React.createClass({
  login: function() {
    // do stuff
  },
  componentDidMount: function() {
     Bus.on("login", this.login);
  },
  componentWillUnmount: function() {
    // how to remove this.login listener here?
  },
  // ...
}

Just finished this as a riot starter project: http://sfdevlabs.github.io/yolocharts/#simple_line

I found riot very nice to work with, although it took me several tries to get the structure down, as the todo app is not much guidance. Would have been helpful for me to see someone else's project to learn how to do it. Maybe we can start collecting these?

Can someone point me to the template usage docs? I would like to know, for example, how to extend templates or create partials. Thanks

Please provide the API docs with examples, possibly using GitHub Wiki.

From what I can see in the source code, Riot.js has only three main functions:

• $.observable(element) returning element with 4 methods:
  • el.on(events, callback)
  • el.one(event, callback)
  • el.off(events)
  • el.trigger(event)
• $.render(template, data) returning string
• $.route(to) taking either string or function

Is this a complete list or will there be more functions in version 1.0? How about changing the route definition to this form: $.route(to, callback), i.e: $.route('add', function() {...}).route('show/:param', function(param) {...});

Example template content: He said, 'My name is {name}.'

Installing via npm install riotjs fails. It looks like it's not finding the 1.0.2 version.

npm ERR! fetch failed https://registry.npmjs.org/riotjs/-/riotjs-1.0.2.tgz
npm ERR! Error: 404 Not Found

Not sure if related, but the latest version 1.0.2 listed on https://www.npmjs.org/package/riotjs doesn't match the latest version on https://github.com/muut/riotjs/releases

Hi,

Is there an example on using riotjs with require.js?
What would be the best approach be?

Thanks!

Is the purpose of the off method to remove the callback function if it is registered multiple times? If so, the code looks wrong to me since after removing the function once, the index is incremented and the subsequent entry is skipped. Consider the following:

> var arr = [ 'one', 'two', 'three', 'three', 'four', 'five', 'five', 'six' ];
undefined
> for (var i = 0, cb; (cb = arr && arr[i]); ++i) {
       if (cb === 'three') arr.splice(i, 1);
   }
["three"]
> arr
["one", "two", "three", "four", "five", "five", "six"]

As you can see, the second 'three' is not removed. Contrast with:

> var arr = [ 'one', 'two', 'three', 'three', 'four', 'five', 'five', 'six' ];
undefined
> for (var i = arr && arr.length-1, cb; (cb = arr && arr[i]); --i) {
       if (cb === 'three') arr.splice(i, 1);
   }
["three"]
> arr
["one", "two", "four", "five", "five", "six"]