Bundle ractive with ractive-load through Rollup

Question

What is the correct way to import ractive and ractive-load to my rollup project? npm or github?

Currently I am using npm to install each one:

npm install --save-dev ractivejs/ractive

And

npm install --save-dev ractivejs/ractive-load

And I'm using rollup-plugin-commonjs with rollup-plugin-node-resolve to corretly bundle them (rollup.config.js in the end of the question):

import Ractive from 'ractive';
import load from 'ractive-load';
...

But it seems that ractive-load also imports other modules in its code, causing this error:

Error parsing /home/.../node_modules/rcu/src/make.js: 'import' and 'export' may only appear at the top level (2:0) in /home/.../node_modules/rcu/src/make.js

How can I correctly use Rollup and which are the right sources for this case (npm or github)?

---

Here is my rollup.config.js:

import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
  entry: 'src/main.js',
  plugins: [

  nodeResolve({
        jsnext: true,
        main: true,
        browser: true,
    }),

    commonjs({
        sourceMap: false
  }),

  // uglify()

  ],
  format: 'iife',
  moduleName: 'Altiva',
  dest: 'altiva.js'
};

Answer 1

ractive-load is intended to "read" link tags in the browser and then do AJAX requests for the component file, then it uses a library called rcu to convert the component files into usable javascript components.

What you need is a utility (that uses rcu or does equivalent work) to turn your component files into javascript files that you can run during build process then hand-off to rollup. Fortunately, it looks like there is a rollup plugin rollup-plugin-ractive designed to do just that:

rollup({
  entry: 'src/main.js',
  plugins: [
    ractive({
      // By default, all .html files are compiled
      extensions: [ '.html', '.ract' ],

      // You can restrict which files are compiled
      // using `include` and `exclude`
      include: 'src/components/**.html'
    })
  ]
}).then(...)

There's also list of some of the available loaders here, among them are "plain vanilla js" variants as well.