Add support for parcel v2
This commit is contained in:
gianlucaguarini
parent
ab2416bab6
commit
08e9c11480
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,4 +1,5 @@
|
||||
node_modules
|
||||
/test/.parcel-cache/
|
||||
/test/package-lock.json
|
||||
/test/dist
|
||||
.idea
|
||||
|
||||
46
RiotAsset.js
46
RiotAsset.js
@ -1,46 +0,0 @@
|
||||
const { compile } = require('@riotjs/compiler')
|
||||
const { Asset } = require('parcel-bundler')
|
||||
const { relative, dirname } = require('path')
|
||||
|
||||
/**
|
||||
* 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 {
|
||||
constructor(name, pkg, options) {
|
||||
super(name, pkg, options)
|
||||
this.type = 'js'
|
||||
}
|
||||
|
||||
async generate() {
|
||||
const options = (await this.getConfig(['.riotrc', '.riotrc.js', 'riot.config.js'])) || {}
|
||||
const {code, map} = compile(this.contents, {
|
||||
file: this.relativeName,
|
||||
...options
|
||||
})
|
||||
|
||||
return [
|
||||
{
|
||||
sourceMap: this.options.sourceMaps ? map : false,
|
||||
type: 'js',
|
||||
value: `${code}${options.hot ? hotReload(relative(dirname(this.name), this.relativeName)) : ''}`
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = RiotAsset
|
||||
55
index.js
55
index.js
@ -1,3 +1,54 @@
|
||||
module.exports = function(bundler) {
|
||||
bundler.addAssetType('riot', require.resolve('./RiotAsset'))
|
||||
const { compile } = require('@riotjs/compiler')
|
||||
const { Transformer } = require('@parcel/plugin')
|
||||
const SourceMap = require('@parcel/source-map').default
|
||||
const { relative } = require('path')
|
||||
|
||||
/**
|
||||
* 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)
|
||||
}
|
||||
}
|
||||
})()`
|
||||
}
|
||||
|
||||
module.exports = new Transformer({
|
||||
async loadConfig({config}) {
|
||||
const { contents } = await config.getConfig(
|
||||
['.riotrc', '.riotrc.js', 'riot.config.js'],
|
||||
{
|
||||
packageKey: 'riot'
|
||||
}
|
||||
)
|
||||
|
||||
return contents || {}
|
||||
},
|
||||
async transform({asset, config, options}) {
|
||||
const source = await asset.getCode()
|
||||
const sourceMap = new SourceMap(options.projectRoot)
|
||||
|
||||
const {code, map} = compile(source, {
|
||||
file: asset.filePath,
|
||||
...config
|
||||
})
|
||||
|
||||
|
||||
asset.type = 'js'
|
||||
asset.setCode(`${code}${config.hot ? hotReload(relative(options.projectRoot, asset.filePath)) : ''}`)
|
||||
asset.setMap(sourceMap.addVLQMap(map))
|
||||
|
||||
return [asset]
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
18835
package-lock.json
generated
18835
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@riotjs/parcel-plugin-riot",
|
||||
"name": "@riotjs/parcel-transformer-riot",
|
||||
"version": "6.0.0",
|
||||
"description": "A parcel plugin for riot.js",
|
||||
"main": "index.js",
|
||||
@ -8,17 +8,23 @@
|
||||
"test": "npx eslint *.js && npm run test-bundle",
|
||||
"test-bundle": "cd test && npm i"
|
||||
},
|
||||
"engines": {
|
||||
"parcel": "2.x"
|
||||
},
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/andruschka/parcel-plugin-riot"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@riotjs/compiler": "^6.0.0",
|
||||
"parcel-bundler": "^1.9.4"
|
||||
"@riotjs/compiler": "^6.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^7.30.0",
|
||||
"eslint-config-riot": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@parcel/plugin": "^2.0.0",
|
||||
"@parcel/source-map": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
6
test/.parcelrc
Normal file
6
test/.parcelrc
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "@parcel/config-default",
|
||||
"transformers": {
|
||||
"*.riot": ["@riotjs/parcel-transformer-riot"]
|
||||
}
|
||||
}
|
||||
@ -8,6 +8,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./main.js"></script>
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { component } from 'riot'
|
||||
import MyComponent from './my-component.riot'
|
||||
|
||||
export default MyComponent
|
||||
|
||||
component(MyComponent)(document.getElementById('root'))
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
{
|
||||
"name": "riot-parcel-test",
|
||||
"main": "index.html",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"postinstall": "parcel build index.html --no-cache"
|
||||
},
|
||||
"dependencies": {
|
||||
"parcel-bundler": "^1.11.0"
|
||||
"parcel": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@riotjs/compiler": "^4.0.0",
|
||||
"@riotjs/hot-reload": "^4.0.0-rc.1",
|
||||
"@riotjs/parcel-plugin-riot": "file:../",
|
||||
"riot": "^4.0.0-rc.13"
|
||||
"@riotjs/compiler": "^6.0.0",
|
||||
"@riotjs/hot-reload": "^6.0.0",
|
||||
"@riotjs/parcel-transformer-riot": "file:../",
|
||||
"riot": "^6.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user