marcello3d/node-ractify

ractive.js + browserify

Ractify

Browserify 2 + ractive.js

Upgrading from v0.4.x to v0.5.x

Replace require('ractive/build/ractive.runtime') with require('ractive/ractive.runtime')

v0.4.x

I've decided to remove some "magic." Namely:

• Ractify no longer uses Ractive.extend
• require('ractify') no longer includes the ractive runtime (it throws an error and will be removed in future versions)

ractify still parses Ractive components, but it just returns a plain javascript object with template and css properties (and whatever <script> code is in the Ractive component). See this issue

See test input and output for an example.

Upgrading from v0.3.x to v0.4.x

• replace var Ractive = require('ractify') with var Ractive = require('ractive/build/ractive.runtime')
• For components, replace var Foo = require('./foo.ract') with:

var Ractive = require('ractive/build/ractive.runtime')
var Foo = Ractive.extend(require('./foo.ract'))

Upgrading from <v0.3.0 to v0.4.x

• replace require('ractify') with require('ractive/build/ractive.runtime')
• replace new Ractive({ template:require('./foo.ract'), ... }) with new Ractive({ template:require('./foo.ract').template, ... })

Installation

Ractify does not install Ractive on its own, you must do so yourself (this allows you to update Ractive without an update to ractify).

Example:

npm install --save ractify
npm install --save [email protected]

Usage / Examples

Browserify API usage:

var browserify = require('browserify')
var ractify = require('ractify')

var bundle = browserify()
bundle.transform(ractify)

In your Client-side JavaScript, require('ractive/build/ractive.runtime') and it'll import the runtime-only version of ractive. require a .ract file, and it will return a plain javascript object with template and (if defined) css parameters:

var Ractive = require('ractive/build/ractive.runtime')
var foo = new Ractive({
    template:require('./views/foo.ract').template,
    el: document.getElementById("foo"),
    data: ...
})

This structure can be passed into Ractive.extend to automatically build Ractive components:

var Ractive = require('ractive/build/ractive.runtime')
var Foo = Ractive.extend(require('./views/foo.ract'))
var foo = new Foo({
    el: document.getElementById("foo"),
    data: ...
})

Extract partials by inspecting the template property:

var foo = require('./views/partials.ract')
if (foo.template.partials) {
    // foo.template.main has the main template
    // foo.template.partials has the partial templates
}

Commandline Browserify usage:

$ browserify -t ractify main.js > bundle.js

If you want to use different file extension, e.g. .html, you can use extension option:

var browserify = require('browserify');
var ractify = require('ractify');

var bundle = browserify();
bundle.transform({ extension: 'html' }, ractify);

$ browserify -t [ ractify --extension html ] main.js > bundle.js

License

Open source software under the zlib license.

node-ractify's Issues

Ractive v0.4 changed filename

I couldn't find this in the issues list, but I got a build error after updating to the latest Ractive.js in npm. It seems Ractive changed their file names to all lowercase (Ractive.runtime.js => ractive.runtime.js, etc). The Ractify runtime.js is looking for the capital case filename which no longer exists in v0.4.

Including <style> element in a .ract file

I'm able to get your clock.ract sample file working in my site, bundled with browserify, but the <style> element seems to get ignored. Thus all I see is a big black circle. If i put all the clock styles in a separate css file, the clock shows up just fine. Have you encountered anything like this?

Using ractive 0.6.1, ractify 0.5.0, browserify 7.0.1 (and gulp to automate everything). Haven't gotten it to work with ractive runtime.

I initialize the clock in my main.js file with:

var ractifyClock = require('../components/ractify-clock.ract');
var ractify = new Ractive({
    el: 'ractify-clock',
    template: ractifyClock.template,
    data: ractifyClock.data,
    onrender: ractifyClock.init
})

Here's how the styles turn out in my bundle:

component.exports.css = "\n  .rvc-clock-demo {\n        position: relative;\n        width: 100%;\n   ...

Do I have to do something specific with the component.export.css string?
Here's the whole ractify-clock.ract portion of the completed bundle.js

17:[function(require,module,exports){
var component = module


    component.exports = {
        data: {
            minor: new Array( 60 ),
            major: new Array( 12 )
        },

        init: function () {
            var self = this, interval;

            this.set( 'date', new Date() );

            interval = setInterval( function () {
                self.set( 'date', new Date() );
            });

            this.on( 'teardown', function () {
                clearInterval( interval );
            });
        }
    };


component.exports.template = { v:1,
  t:[ { t:7,
      e:"div",
      a:{ "class":"rvc-clock-demo" },
      f:[ " ",
        { t:7,
          e:"svg",
          a:{ viewBox:"0 0 100 100" },
          f:[ " ",
            { t:7,
              e:"g",
              a:{ transform:"translate(50,50)" },
              f:[ { t:7,
                  e:"circle",
                  a:{ "class":"clock-face",
                    r:"48" } },
                " ",
                { t:4,
                  r:"minor",
                  i:"i",
                  f:[ { t:7,
                      e:"line",
                      a:{ "class":"minor",
                        y1:"42",
                        y2:"45",
                        transform:[ "rotate( ",
                          { t:2,
                            x:{ r:[ "i",
                                "minor.length" ],
                              s:"360*_0/_1" } },
                          " )" ] } } ] },
                " ",
                { t:4,
                  r:"major",
                  i:"i",
                  f:[ { t:7,
                      e:"line",
                      a:{ "class":"major",
                        y1:"35",
                        y2:"45",
                        transform:[ "rotate( ",
                          { t:2,
                            x:{ r:[ "i",
                                "major.length" ],
                              s:"360*_0/_1" } },
                          " )" ] } } ] },
                " ",
                { t:7,
                  e:"line",
                  a:{ "class":"hour",
                    y1:"2",
                    y2:"-20",
                    transform:[ "rotate( ",
                      { t:2,
                        x:{ r:[ "date" ],
                          s:"30*_0.getHours()+_0.getMinutes()/2" } },
                      " )" ] } },
                " ",
                { t:7,
                  e:"line",
                  a:{ "class":"minute",
                    y1:"4",
                    y2:"-30",
                    transform:[ "rotate( ",
                      { t:2,
                        x:{ r:[ "date" ],
                          s:"6*_0.getMinutes()+_0.getSeconds()/10" } },
                      " )" ] } },
                " ",
                { t:7,
                  e:"g",
                  a:{ transform:[ "rotate( ",
                      { t:2,
                        x:{ r:[ "date" ],
                          s:"6*_0.getSeconds()" } },
                      " )" ] },
                  f:[ { t:7,
                      e:"line",
                      a:{ "class":"second",
                        y1:"10",
                        y2:"-38" } },
                    " ",
                    { t:7,
                      e:"line",
                      a:{ "class":"second-counterweight",
                        y1:"10",
                        y2:"2" } } ] } ] } ] } ] } ] }

component.exports.css = "\n  .rvc-clock-demo {\n        position: relative;\n        width: 100%;\n        height: 0;\n        padding-bottom: 100%;\n    }\n\n    .rvc-clock-demo svg {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n    }\n\n    .rvc-clock-demo .clock-face {\n        stroke: #333;\n        fill: white;\n    }\n\n    .rvc-clock-demo .minor {\n        stroke: #999;\n        stroke-width: 0.5;\n    }\n\n    .rvc-clock-demo .major {\n        stroke: #333;\n        stroke-width: 1;\n    }\n\n    .rvc-clock-demo .hour {\n        stroke: #333;\n    }\n\n    .rvc-clock-demo .minute {\n        stroke: #666;\n    }\n\n    .rvc-clock-demo .second, .second-counterweight {\n        stroke: rgb(180,0,0);\n    }\n\n    .rvc-clock-demo .second-counterweight {\n        stroke-width: 3;\n    }\n"
},{}],````

Another (possibly unrelated) issue, which doesn't seem to impact the clock functioning, is that i'm getting an error in the console. 

````Error: Invalid value for <line> attribute transform="rotate(  )"````
````Error: Invalid value for <g> attribute transform="rotate(  )"````

ractive as a dependency

Why is ractive a devDependencies instead of dependency? In my project I have to manually install ractive. The bigger problems is when I upgrade ractify, ractive's version is out of date. Why not have npm manage it by moving ractive into dependencies instead?

Ractive plugins?

Hi there,

Any special trick to using Ractive plugins with Ractify? I'm trying to require a transition plugin per the docs, but I keep getting the same console warning:

Missing "slide" transition. You may need to download a plugin via https://github.com/RactiveJS/Ractive/wiki/Plugins#transitions

Error: Cannot find module 'ractive/build/ractive.runtime'

Happens to v0.5.0, which renders the module unusable. The reason is that the ractive module form 0.5.0 onwards no longer includes a build dir with all the built runtime.js files. I'm not sure what's the best approach here. cc @timoxley