updated: use the latest riot compiler
This commit is contained in:
parent
7c74849634
commit
46113df053
48
Readme.md
48
Readme.md
@ -7,18 +7,20 @@ A parcel plugin for riot.js
|
|||||||
|
|
||||||
## Using
|
## Using
|
||||||
Add parcel-plugin-riot to your project.
|
Add parcel-plugin-riot to your project.
|
||||||
```
|
|
||||||
npm i parcel-plugin-riot
|
```bash
|
||||||
|
npm i -D @riotjs/parcel-plugin-riot @riotjs/compiler
|
||||||
```
|
```
|
||||||
|
|
||||||
-> You are ready!
|
-> You are ready!
|
||||||
|
|
||||||
```javascript
|
```js
|
||||||
|
import App from './src/App.riot'
|
||||||
|
import {component} from 'riot'
|
||||||
|
|
||||||
const riot = require('riot')
|
component(App)(document.querySelector('#root'), {
|
||||||
require('./src/App.tag')
|
message: 'Hello there'
|
||||||
|
})
|
||||||
riot.mount('*')
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
@ -27,34 +29,18 @@ If you want compile your tags using custom riot compiler options you can create
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
// html parser
|
hot: false // set it to true if you are using hmr
|
||||||
template: 'foo',
|
// add here all the other @riotjs/compiler options riot.js.org/compiler
|
||||||
// js parser
|
// template: 'pug' for example
|
||||||
type: 'baz',
|
|
||||||
// css parser
|
|
||||||
style: 'bar',
|
|
||||||
parsers: {
|
|
||||||
html: {
|
|
||||||
foo: (html, opts, url) => require('foo').compile(html)
|
|
||||||
},
|
|
||||||
css: {
|
|
||||||
bar: (tagName, css, opts, url) => require('bar').compile(css)
|
|
||||||
},
|
|
||||||
js: {
|
|
||||||
baz: (js, opts, url) => require('baz').compile(js)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// special options that may be used to extend
|
|
||||||
// the default riot parsers options
|
|
||||||
parserOptions: {
|
|
||||||
js: {},
|
|
||||||
template: {},
|
|
||||||
style: {}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
If you want to enable hmr via `hot` option you will need to install also [`@riotjs/hot-reload`](https://www.npmjs.com/package/@riotjs/hot-reload)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm i @riotjs/hot-reload -D
|
||||||
|
```
|
||||||
|
|
||||||
[travis-image]: https://img.shields.io/travis/riot/parcel-plugin-riot.svg?style=flat-square
|
[travis-image]: https://img.shields.io/travis/riot/parcel-plugin-riot.svg?style=flat-square
|
||||||
[travis-url]: https://travis-ci.org/riot/parcel-plugin-riot
|
[travis-url]: https://travis-ci.org/riot/parcel-plugin-riot
|
||||||
|
|||||||
37
RiotAsset.js
37
RiotAsset.js
@ -1,23 +1,42 @@
|
|||||||
const { compile } = require('riot-compiler')
|
const { compile } = require('@riotjs/compiler')
|
||||||
const { Asset } = require('parcel-bundler')
|
const { Asset } = require('parcel-bundler')
|
||||||
const preamble = 'const riot = require(\'riot\');\n'
|
|
||||||
|
/**
|
||||||
|
* Generate the hmr code depending on the tag generated by the compiler
|
||||||
|
* @param {string} path - path to the component file
|
||||||
|
* @returns {string} the code needed to handle the riot hot reload
|
||||||
|
*/
|
||||||
|
function hotReload(path) {
|
||||||
|
return `;(() => {
|
||||||
|
if (module.hot) {
|
||||||
|
const hotReload = require('@riotjs/hot-reload').default
|
||||||
|
module.hot.accept()
|
||||||
|
if (module.hot.data) {
|
||||||
|
const component = require('${path}').default;
|
||||||
|
hotReload(component)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})()`
|
||||||
|
}
|
||||||
|
|
||||||
class RiotAsset extends Asset {
|
class RiotAsset extends Asset {
|
||||||
constructor(name, options) {
|
constructor(name, pkg, options) {
|
||||||
super(name, options)
|
super(name, pkg, options)
|
||||||
this.type = 'js'
|
this.type = 'js'
|
||||||
}
|
}
|
||||||
|
|
||||||
async generate() {
|
async generate() {
|
||||||
const riotOpts = (await this.getConfig(['.riotrc', '.riotrc.js', 'riot.config.js'])) || {}
|
const options = (await this.getConfig(['.riotrc', '.riotrc.js', 'riot.config.js'])) || {}
|
||||||
const code = compile(this.contents, riotOpts, this.name)
|
const {code, map} = compile(this.contents, {
|
||||||
|
file: this.relativeName,
|
||||||
this.contents = `${preamble}${code}`
|
...options
|
||||||
|
})
|
||||||
|
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
|
sourceMap: this.options.sourceMaps ? map : false,
|
||||||
type: 'js',
|
type: 'js',
|
||||||
value: this.contents
|
value: `${code}${options.hot ? hotReload(this.relativeName) : ''}`
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
6360
package-lock.json
generated
6360
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
@ -1,27 +1,23 @@
|
|||||||
{
|
{
|
||||||
"name": "parcel-plugin-riot",
|
"name": "@riotjs/parcel-plugin-riot",
|
||||||
"version": "2.1.0",
|
"version": "4.0.0-alpha.1",
|
||||||
"description": "A parcel plugin for riot.js",
|
"description": "A parcel plugin for riot.js",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "npx eslint *.js"
|
"prepare": "npm i --no-save @riotjs/compiler",
|
||||||
},
|
"test": "npx eslint **/*.js"
|
||||||
"author": {
|
|
||||||
"name": "andruschka",
|
|
||||||
"url": "https://92digital.com"
|
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/andruschka/parcel-plugin-riot"
|
"url": "https://github.com/andruschka/parcel-plugin-riot"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"peerDependencies": {
|
||||||
"parcel-bundler": "^1.12.3",
|
"parcel-bundler": "^1.12.3",
|
||||||
"riot": "^3.13.2",
|
"@riotjs/compiler": "^4.0.0"
|
||||||
"riot-compiler": "^3.4.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"eslint": "^5.15.3",
|
"eslint": "^5.16.0",
|
||||||
"eslint-config-riot": "^2.0.0"
|
"eslint-config-riot": "^2.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user