Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcello3d/ractify-loader
Ractive component loader for webpack
https://github.com/marcello3d/ractify-loader
Last synced: 29 days ago
JSON representation
Ractive component loader for webpack
- Host: GitHub
- URL: https://github.com/marcello3d/ractify-loader
- Owner: marcello3d
- License: zlib
- Created: 2015-08-10T23:59:10.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-09-10T16:13:39.000Z (about 9 years ago)
- Last Synced: 2024-09-16T13:44:28.626Z (2 months ago)
- Language: JavaScript
- Size: 129 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: Readme.md
- Changelog: HISTORY.md
- License: LICENSE
Awesome Lists containing this project
README
Ractify Loader (for webpack)
=================
[](http://badge.fury.io/js/ractive-component-loader) [](https://travis-ci.org/marcello3d/ractive-component-loader)
[Webpack](https://www.npmjs.com/package/webpack) + [ractive.js](http://www.ractivejs.org/)
Based on (and compatible with) [ractify](https://github.com/marcello3d/node-ractify).
Installation
------------
This loader does not depend on Ractive, you must require it yourself (this allows you to update Ractive
without an update to ractify-loader).
Example:
```
npm install --save ractify-loader
npm install --save [email protected]
```
Usage / Examples
----------------
Webpack config example usage:
```js
/* webpack.config.js */
module.exports = {
module: {
loaders: [
{ test: /\.ract$/, loader: '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:
```js
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:
```js
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:
```js
var foo = require('./views/partials.ract')
if (foo.template.partials) {
// foo.template.main has the main template
// foo.template.partials has the partial templates
}
```
License
-------
Open source software under the [zlib license](LICENSE).