ractivejs / ractive-load Goto Github PK

Why are comments stripped out of the component?

<p>Hello {{subject}} <!-- keep me here --></p>

<script>
  component.exports = {
    data: { subject: 'World' },
    stripComments: false
  };
</script>

output:

<p>Hello World</p>

So I'm not using it exactly like a decorator, but the following component doesn't get the CodeMirror portion correctly styled (it's significantly dumbed down, fyi, many many edge cases not covered):

<textarea value='val'></textarea>
<style>
  .CodeMirror {
    border: 1px solid #ddd;
    border-width: 1px 0;
  }
</style>
<script>
  var CodeMirror = require('CodeMirror');
  component.exports = {
    onrender: function() {
      var mirror = CodeMirror.fromTextArea(this.find('textarea'), this.get('config'));
      mirror.on('change', function() { this.set('val', mirror.getValue(); });
      this.observe('val', function(newVal) { mirror.setValue(newVal); });
    }
  };
</script>

The data attributes aren't correctly applied to the dynamically added pieces. I imagine this would work the same w/ decorators.

My suggestion would be to allow components to define a 'styleTag'. If it's defined the component gets wrapped by a tag with the data-ractive-css='{{x}}' attribute instead of adding the data-ractive to all the tags in the component.

It could look like this:

<textarea value="{{val}}"></textarea>
...
<script>
  component.exports = {
    styleTag: "div",
    onrender: ...
  };
</script>

When rendered this would show up on your page:

<div data-ractive-css='{{1}}'><textarea></textarea></div>

and

[data-ractive-css='{{1}}'] .CodeMirror {
  border: 1px solid #ddd;
  border-width: 1px 0;
}

in the appended style element.

This would mean that the styles would be correctly applied. It would also be backward compatible since it's opt-in. It would also make processing the html faster in this case (no iterating over the template's nodes. Just wrap the whole thing and keep going).

Hi!

Have been trying to run the clock example stand alone, these are my (slightly modified) files:

// main.js -> create our clock...
var baseView;
Ractive.load( 'baseView.html' ).then( function ( BaseView ) {
baseView = new BaseView({
el: 'main',
data: { datetime: new Date()}
})
});

var i= 0;
setInterval(function () {
if (i%2 == 0) console.log("tick");
else console.log("tack");
i++;
baseView.set('datetime', new Date() );
}, 1000);

baseView.html and clock.html unmodified (except for not using a Capital letter in front)

All the below will be obvious to you, but it took me a lot of time to figure out ->

1. issue: can you add this to the doc, so people do not have to guess/dig how it is done standalone without the Gist?
2. issue: I was reading about in https://github.com/ractivejs/ractive-load and tried to use variations of Ractive.load.modules.moment = moment, but in vain. Finally I just loaded it (i.e. the nodeJs-module moment) in index.html along with ractive.js. That worked! But why then "Ractive.load.modules"? Please explain and document how it should be done in my example or else which you can run stand-alone.

Otherwise great work! Thanks!!!

It appears the script parsing of templates fails quietly in IE8. The end result is a silent failure that doesn't get emit from ractive-load in any fashion, and puts the Promise in a metastable state (never triggers fail/success criteria).

The core issue is in eval2.Function(). The code is wrapping the component's <script> with an anonymous function to achieve scope isolation. The bug manifests itself here in IE8: this older version of IE doesn't eval anonymous functions properly, returning "undefined" instead of the desired effect. There's a little more information in this SO thread: http://stackoverflow.com/q/1271516

The "solution" I'm using is further down in the answers: http://stackoverflow.com/a/8115692
Appears to be working well for me and hasn't caused other deleterious effects (yet). I'm happy to submit a PR if this looks like a reasonable fix.

var jsString = "(function(arg1) { alert('Hello World!'); })";

/*
 * IE8/9 Fails in current code
 */
eval(jsString); 
// undefined

/*
 * Suggested Solution
 */
eval("false||" + jsString);
// (function(arg1)...

I've already mentioned about this issue here, but it might be a wrong place to post it... So, I'm trying to report the problem here

There is a problem with the following parsed.v check in ractive-load (or rcv) using Ractive v.0.6.1, that gives parsed.v === 2:

if (parsed.v !== 1) {
throw new Error('Mismatched template version! Please ensure you are using the latest version of Ractive.js in your build process as well as in your app');
}

Description

Well aware of the current issue of ractive-load, rcu and Ractive >0.8, but just posting this one here since nobody appears to have encountered it yet. Aside from the version number, attributes are parsed to a different property (m instead of a) causing this block to fail parsing the rest of the component.

Reproduction

const template = '<link rel="ractive" href="path/to/Component.html">'
console.log(JSON.stringify(Ractive.parse(template)))

Expected (<0.8)

{"v":3,"t":[{"t":7,"e":"link","a":{"rel":"ractive","href":"path/to/Component.html"}}]}

Actual (>0.8)

{"v":4,"t":[{"t":7,"e":"link","m":[{"n":"rel","f":"ractive","t":13},{"n":"href","f":"path/to/Component.html","t":13}]}]}

Hi, thanks for great plugin.
I have component defined in Ractive.components:
Ractive.components['Selectize'] = extend...
but, when ractive-load run into
<rel href="Selectize" >
he will load same component again (only first time).

How can I force ractive-load to first check is component already defined at global Ractive.components ?

Hi,

I have some difficulties to know what's possible to do with components and what not, and how.
For example, is it possible to define multiple components in one html? If yes, is there an example somewhere?
Btw, thanks again for the great library ractive is.

Not sure if this is a documentation issue or an uncaught error. But if you <link> a Component to itself it just repeatedly loads itself.

I suspect it's missing the cache since it's not fully loaded yet. It appears that components receive themselves as components automatically, though, so this is unnecessary (although undocumentedly so).

Hi,

I'm trying to learn and test out one of your code samples of using ractive-load plugin.

http://examples.ractivejs.org/donut-charts

I reproduced all the code on my local machine, ran python simpleHTTPserver as my own webserver, etc.

When I tried to viewing it in my web browser, i got following errors in the console log.

Uncaught (in promise) Error: Ractive.load() error: Could not find dependency "ractive-transitions-fade". It should be exposed as Ractive.load.modules["ractive-transitions-fade"] or window["ractive-transitions-fade"

Why is it complaining about the promises? Is it because I'm using a different web server than Node/Express?

In my JS code, I simply wrote code like this(as per your existing samples)

Ractive.load('BaseView.html').then(function (BaseView) {
   var ractive = new BaseView({
      el: 'main',
      data: getData()
    });  
});

function getData () {
  return {
    months: [
      { name: 'January',   points: { dogs: 4, cats: 3, rabbits: 7 } },
      { name: 'February',  points: { dogs: 2, cats: 7, rabbits: 3 } },
      { name: 'March',     points: { dogs: 5, cats: 4, rabbits: 6 } },
      { name: 'April',     points: { dogs: 6, cats: 8, rabbits: 4 } },
      { name: 'May',       points: { dogs: 8, cats: 9, rabbits: 5 } },
      { name: 'June',      points: { dogs: 3, cats: 2, rabbits: 2 } },
      { name: 'July',      points: { dogs: 4, cats: 4, rabbits: 8 } },
      { name: 'August',    points: { dogs: 2, cats: 5, rabbits: 9 } },
      { name: 'September', points: { dogs: 3, cats: 6, rabbits: 4 } },
      { name: 'October',   points: { dogs: 7, cats: 2, rabbits: 7 } },
      { name: 'November',  points: { dogs: 5, cats: 8, rabbits: 5 } },
      { name: 'December',  points: { dogs: 1, cats: 0, rabbits: 7 } }
    ]
  };
}

When running on node.js, I'd be nice to have a way to always load files from the disk.

Hi,

Currently, loading a component is a bit flaky. As soon as there is a tiny error in it, it will fail to display (that's not really a problem, it's faulty) ...The issue is that there isn't even a single log line in order to know what's wrong and locate the error.

Cheers

rcu needs to be bumped to 0.2.1, noticed ractive-load doesn't have fix for SourceUrl

I think there is two problemes with one file components' styles:

1. styles are added after exisiting ones in the head. I think styles should be placed on top of the head. They'll acte more as "default styles" for component.
2. attribute selectors don't replace selectors but are added to them causing more specificity.

The second point could be more tricky to solve as you can't simply replace all selectors by a corresponding attribute selector (contextual selectors for eg). Here two ideas (failing solution):

• Maybe a solution could be to only replace class selectors (and adding rvcuid to those).
• Maybe allowing to manually specify temporary rvcuid which will be replaced in both element and selectors with a "strongest" one.

"Error: Ractive.load() error: Could not find dependency "marked". It should be exposed as Ractive.load.modules.marked or window.marked"
I am unable to find what this means. I was never unable to get the loader working with the Comments example (out of the gist)

Where is

<link rel="ractive" href="fancy-tree.html">
<link rel="ractive" href="fancy-slideshow.html">
<link rel="ractive" href="fancy-panel.html">

documented?

Thanks for the great rendering engine.

Looked through the code, but didn't see anything obvious for this. Is there a way to load components that extend from other components? Also, should this issue be in rcu?

In an AMD/CommonJS context, this makes sense (to make the custom tap event available to the component):

require('ractive-events-tap');

But ractive-load will look for Ractive.load.modules['ractive-events-tap'], and then window['ractive-events-tap'], and then (having found neither) throw an error.

A workaround is to do Ractive.load.modules['ractive-events-tap'] = Ractive.events.tap, but that sucks.

Options:

1. Disregard any dependencies that match the pattern /^ractive-/. Ractive will print a warning when it tries to use the plugin and finds it missing.
2. Don't throw an error, just carry on. Would make debugging harder in other situations (e.g. if you did THREE = require('three'), you wouldn't realise that for modules with a name/exports mismatch, you need to alias them with Ractive.load.modules.three = THREE;

In official Ractive Load page http://ractivejs.github.io/ractive-load/ , the download link doesn't work correctly, returning 'Not found'.

https://raw.githubusercontent.com/ractivejs/ractive-load/master/ractive-load.js

Hello,

I want a way to set target & template later like ractive.setTemplate and ractive.setTarget.
Also use target HTML DOM as template.

Please it will be helpful to expand new components and reusable.

Regards.

Currently, require calls are relative to cwd. I think they should either respect baseUrl (if set), or we should add another option for this.

@Rich-Harris, what do you reckon?

Probably is a Ractive.parse issue, but thought I'd start here.

<div>{{>myPartial}}</div>
<!-- {{>myPartial}} -->
<div class='card big'>
    <span contenteditable>{{title}}</span>
</div>
<!-- {{/myPartial}} -->

<style>
</style>

<script>
</script>

parsed.t only has one top-level object :(

When loading a component file with Ractive.load, when I put a character like a curly quote ’ inside the HTML section, there is a possible bug occurring when the same component has a <script> tag.

The component below will render normally:

<!-- components/something.html  -->
<div>
    This is my HTML section in my component file.
    And this is a buggy curly quote ’
</div>

But this one will not render:

<!-- components/something.html  -->
<div>
    This is my HTML section in my component file.
    And this is a buggy curly quote ’
</div>

<script> </script>

And return the error:

DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

code: 5
message: "Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range."
name: "InvalidCharacterError"
stack: "Error: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.↵    at Error (native)↵    at e (http://local.burh.com.br/javascript/ractive-load.min.js:1:2223)↵    at new e.Function (http://local.burh.com.br/javascript/ractive-load.min.js:1:3406)↵    at f (http://local.burh.com.br/javascript/ractive-load.min.js:1:4664)↵    at v (http://local.burh.com.br/javascript/ractive-load.min.js:1:5030)↵    at http://local.burh.com.br/javascript/ractive-load.min.js:1:5319↵    at http://local.burh.com.br/javascript/ractive.min.js:11:5960↵    at http://local.burh.com.br/javascript/ractive.min.js:11:5191"
__proto__: DOMException

Of course I removed the buggy character but I just want to understand the error. Is this charset limitation made by my browser or can I workaround it?

Just to note, my main page has a UTF-8 charset in meta tag.

Per Readme.md:

To get ractive-load.min.js you can:
    ...
    Use bower: $ bower i ractive-load.

This works with 0.5.2, but with 0.6.0, I only see

dist/ractive-load.es.js
dist/ractive-load.umd.js

I'm pretty new to js build systems, so might be missing something. But, in any case the Readme.md should probably be updated on new way to get /use ractive-load via bower. Thanks!

Heya!

The line

if ( typeof XMLHttpRequest === 'function' ) {

doesn't work as expected in Safari. There, typeof XMLHttpRequest actually returns object, which causes the script to try and use fs.readFile and breaks in the browser.

I'm not familiar enough with the Node environment (i.e. how fs is recognized) to do a pull request here, or I would.

In any case, cheers!

I cannot seem to get ractive-load to work with any version of ractive from 0.8.0 and up. (ractive version 0.7.3 works fine with ractive-load). I'm running this in the context of electron app.

Chrome Dev Tools Console output:
Ractive.js 0.8.0 in debug mode, more...
index.html:56 Error: Mismatched template version (expected 3, got 4)! Please ensure you are using the latest version of Ractive.js in your build process as well as in your app
at parse ({electron-app}\node_modules\ractive-load\dist\ractive-load.umd.js:73:10)
at Object.make ({electron-app}\node_modules\ractive-load\dist\ractive-load.umd.js:456:16)
at {electron-app}\node_modules\ractive-load\dist\ractive-load.umd.js:661:10
at {electron-app}\node_modules\ractive-load\dist\ractive-load.umd.js:660:12

index.html:56 context

var load = require('ractive-load');
load( 'ractive_components/login.html' ).then(function(Login) {...}).catch(function(error){console.log(error);});

Line 56 is console.log(error)

it seems to me

Ractive.load.baseUrl = 'static/components';

would not work as expected.

Hi,

I find the concept of packaging components in separate htmls a great idea, although I'm not yet very familiar with the ins and outs.

Currently, to import components, you have to do something like this:

Ractive.load({
    comp1: 'comp1.html',
    comp2: 'comp2.html'
    comp3: 'comp3.html'
}).then( function ( components ) {
    console.log( components )
    var ractive = new Ractive({
        el: 'body',
        template: '#template',
        components: components,
        data: ...
    });
});

Would it be possible for ractive to automatically parse the document head for links like these:

<link rel="ractive" src="fancy-tree.html" />
<link rel="ractive" src="fancy-slideshow.html" />
<link rel="ractive" src="fancy-panel.html" />

...and register them automatically the same way? So that components of the name "fancy-_" (simply the same name as the html file) could be used by default for _all* ractive instances. This would reduce the other part to:

    var ractive = new Ractive({
        el: 'body',
        template: '#template',
        data: ...
    })

I think it would be great in terms of simplicity. One potential issue would perhaps be that Ractive would have to wait for all components to load before rendering (or with a special flag in order to avoid to do so, like "ignore_components: true"). I don't know if that would be problematic or not though.

Best Regards

Hi, how to make this work with Ractive 0.8 edge?

Ractive.load is awesome for development. It's less than ideal for production because each component is retrieved through an individual request. Are there any thoughts on how we could have the best of both worlds:

1. Easy, modular components in development
2. A single request for all templates in production