rcu v0.11.0
rcu - Ractive.js component utils
These utilities are designed to make it easy to implement Ractive.js component loaders in different environments. If you're not building a component loader, you probably don't need to read this page - you're probably looking for the page on components for authors instead.
For more information about the component specification, visit the page on components for component loader implementers, or see here for a list of existing implementations.
Installation
npm install rcu
...or grab the UMD build or ES2015 build from jsDelivr.
Usage
rcu.init( Ractive )
Before you can use rcu.parse()
or rcu.make()
, which use Ractive.parse()
and Ractive.extend()
respectively, you need to 'initialise' rcu by giving it a reference to Ractive
.
rcu.parse( source, parseOptions = {} )
This function converts the source
- the contents of an HTML component file - into an intermediate representation. Taking the example component, rcu.parse()
would return something like this:
{
imports: [{ href: 'foo.html', name: 'foo' }],
template: {v:1,t:[ /* template goes here... */] },
css: 'p { color: red; }',
script: /* contents of the script tag go here */,
modules: [ 'myLibrary' ]
}
rcu.make( source, config, callback, errback )
This function converts an HTML file into a constructor that inherits from Ractive
. It uses rcu.parse()
internally.
- source - the contents of the HTML file
- config - an object containing the following properties:
url - the URL of the current file
require - the function used inside component scripts to load external dependencies
loadImport - a function to load child components. It takes four arguments -
name
(the name of the component),path
(corresponds to a<link>
tag'shref
attribute),parentUrl
(the URL of the current file, i.e. the value ofconfig.url
), anddone
, which is a function that must be called with the resulting constructor. See here for an example of its use. loadModule (optional) - a function to load external dependencies, if they need to be loaded asynchronously. Has the same signature asloadImport
. See here for an example - callback - the function that will be called, with the constructor as sole argument, once the component is ready
- errback (optional) - a function to call if something goes wrong
rcu.getName( path )
Returns a name from a path, e.g. path/to/foo.html
becomes foo
.
rcu.resolve( relativePath, baseUrl )
Resolves relativePath
against baseUrl
, e.g.
rcu.resolve( '../bar.html', 'path/to/foo.html' ) === 'path/bar.html'; // true
rcu.generateSourceMap( definition, options )
Generate a v3 sourcemap, with one major assumption: the contents of the component's <script>
block are copied directly into the generated code, and we only need to worry about the offset (i.e. the number of non-<script>
lines of code, representing the template etc, that exist in the generated code before the <script>
tag's contents).
- definition - the result of
rcu.parse()
- options - an object containing the following properties:
source - the name of the original file, e.g. '/path/to/template.html'
offset (optional, but recommended) - the number of non-
<script>
lines before the<script>
contents * file (optional) - the name of the generated file, e.g. '/path/to/template.js'
License
MIT
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago