ractive-component-brunch

Brunch plugin to compile Ractive component file

Features

• Single component files compiled and work correctly
• Scoped component style work
• Component import via <link> works

Usage

Install the plugin with

npm install --save-dev ractive-component-brunch

Or

yarn add -D ractive-component-brunch

Now you can write your components in Ractive single component file then import and use them as normal module:

hello.html:

<link rel='ractive' href='foo.html' name='foo'>

<h1>Hello, {{ name }}</h1>

<style>
  h1 { color: #36c }
</style>

<script>
  component.exports = {
    data: { name: 'World' }
  }
</script>

initialize.js:

var Hello = require('hello.html')

new Hello({ el: '#app' })

Configuration

Currently there's no configuration supported. Planned configuration includes:

• registerGlobal: add component to Ractive.components global
• delimiters: custom template delimiters

Caveat

• Component styles are compiled using [CleanCSS][], we probably need a way to configure it, or better use the post-css plugin that is included in Brunch new project skeleton.
• Ractive is declared as dependency, should be changed to peer-dependency for better compatiblility with different versions.
• Custom template delimiter is probably not working

License

Copyright 2018 Tung Dao

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.