updated: use the latest riot compiler

This commit is contained in:
Gianluca Guarini 2019-04-20 00:41:12 +02:00
parent 7c74849634
commit 46113df053
4 changed files with 174 additions and 6289 deletions

View File

@ -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

View File

@ -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

File diff suppressed because it is too large Load Diff

View File

@ -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"
} }
} }