Compare commits

..

No commits in common. "main" and "v2.1.0" have entirely different histories.
main ... v2.1.0

16 changed files with 6277 additions and 5255 deletions

View File

@ -1,12 +0,0 @@
extends: eslint-config-riot
parserOptions:
ecmaVersion: 2021
sourceType: 'module'
globals:
sinon: true
expect: true
rules:
fp/no-class: off

25
.eslintrc.json Normal file
View File

@ -0,0 +1,25 @@
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaVersion": 8,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"rules": {
"no-const-assign": "warn",
"no-this-before-super": "warn",
"no-undef": "warn",
"no-unreachable": "warn",
"no-unused-vars": "warn",
"constructor-super": "warn",
"valid-typeof": "warn",
"semi": [2, "always"]
}
}

View File

@ -1,24 +0,0 @@
name: test
on:
push:
branches: [ main, dev ]
pull_request:
branches: [ dev ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x, 15.x]
steps:
- uses: actions/checkout@v2
- name: Local Unit Test ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm i
- run: npm test

6
.gitignore vendored
View File

@ -1,5 +1 @@
node_modules
/test/.parcel-cache/
/test/package-lock.json
/test/dist
.idea
node_modules/*

22
LICENSE
View File

@ -1,22 +0,0 @@
The MIT License (MIT)
Copyright (c) 2018 Riot
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -1,95 +1,20 @@
[![Build Status][ci-image]][ci-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]
# parcel-plugin-riot
The Riot.js official parcel transformer.
## Important
- If you are using Parcel < 2.0.0 please check the [this branch](https://github.com/riot/parcel-transformer-riot/tree/parcel-v1)
- If you are using Riot.js < 4.0.0 please check the [v3 branch](https://github.com/riot/parcel-transformer-riot/tree/v3)
A parcel plugin for riot.js
## Using
### 1. Add the riot parcel transformer to your project.
```bash
npm i -D @riotjs/parcel-transformer-riot @riotjs/compiler
Add parcel-plugin-riot to your project.
```
### 2. Configure your .parcelrc file
```json
{
"extends": "@parcel/config-default",
"transformers": {
"*.riot": ["@riotjs/parcel-transformer-riot"]
}
}
npm i parcel-plugin-riot
```
-> You are ready!
```js
import App from './src/App.riot'
import {component} from 'riot'
```javascript
component(App)(document.querySelector('#root'), {
message: 'Hello there'
})
const riot = require('riot')
require('./src/App.tag')
riot.mount('*')
```
## Configuration
If you want compile your tags using custom riot compiler options you can create a `riot.config.js` in the root folder of your project
```js
module.exports = {
hot: false // set it to true if you are using hmr
// add here all the other @riotjs/compiler options riot.js.org/compiler
// template: 'pug' for example
}
```
If you want to use `pug` as your template engine, your `riot.config.js` might look like this
```js
const { registerPreprocessor } = require('@riotjs/compiler')
const { render } = require('pug')
// register the pug preprocessor
registerPreprocessor('template', 'pug', (code, options) => {
const { file } = options
return {
code: render(code, {
filename: file,
pretty: true,
doctype: 'html'
})
}
})
module.exports = {
template: 'pug'
}
```
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
```
[ci-image]:https://img.shields.io/github/workflow/status/riot/parcel-transformer-riot/test?style=flat-square
[ci-url]:https://github.com/riot/parcel-transformer-riot/actions
[license-image]: https://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]: LICENSE
[npm-version-image]: https://img.shields.io/npm/v/@riotjs/parcel-transformer-riot.svg?style=flat-square
[npm-downloads-image]: https://img.shields.io/npm/dm/@riotjs/parcel-transformer-riot.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@riotjs/parcel-transformer-riot

27
RiotAsset.js Normal file
View File

@ -0,0 +1,27 @@
const { compile } = require('riot-compiler');
const { Asset } = require('parcel-bundler');
const preamble = "const riot = require('riot');\n";
class RiotAsset extends Asset {
constructor(name, options) {
super(name, options);
this.type = 'js';
}
async generate() {
const riotOpts = (await this.getConfig(['.riotrc', '.riotrc.js', 'riot.config.js'])) || {};
let code = compile(this.contents, riotOpts, this.name);
code = `${ preamble }${ code }`;
this.contents = code;
return [
{
type: 'js',
value: this.contents
}
];
}
}
module.exports = RiotAsset;

View File

@ -1,63 +1,3 @@
const { compile } = require('@riotjs/compiler')
const { Transformer } = require('@parcel/plugin')
const SourceMap = require('@parcel/source-map').default
const { basename } = require('path')
const CONFIG_FILES = ['.riotrc', '.riotrc.js', 'riot.config.js']
const PACKAGE_KEY = 'riot'
/**
* 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 riotConfig = await config.getConfig(
CONFIG_FILES,
{
packageKey: PACKAGE_KEY
}
)
const shouldInvalidateOnStartup = riotConfig &&
riotConfig?.filePath?.endsWith('.js') ||
riotConfig?.filePath?.endsWith(CONFIG_FILES[0])
if (shouldInvalidateOnStartup) {
config.invalidateOnStartup()
}
return riotConfig?.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
})
// the suffix will be added only for the HMR
const suffix = config?.hot ? hotReload(basename(asset.filePath)) : ''
asset.type = 'js'
asset.setCode(`${code}${suffix}`)
asset.setMap(sourceMap.addVLQMap(map))
return [asset]
}
})
module.exports = function (bundler) {
bundler.addAssetType('tag', require.resolve('./RiotAsset'));
};

11170
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,30 +1,21 @@
{
"name": "@riotjs/parcel-transformer-riot",
"version": "7.0.2",
"description": "The Riot.js official parcel transformer",
"name": "parcel-plugin-riot",
"version": "2.1.0",
"description": "A parcel plugin for riot.js",
"main": "index.js",
"scripts": {
"prepare": "npm i --no-save @riotjs/compiler@6 @riotjs/hot-reload@6 riot@6",
"test": "npx eslint *.js && npm run test-bundle",
"test-bundle": "cd test && npm i"
},
"engines": {
"parcel": "2.x"
"scripts": {},
"author": {
"name": "andruschka",
"url": "https://92digital.com"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/riot/parcel-plugin-riot"
},
"peerDependencies": {
"@riotjs/compiler": "^6.0.4"
},
"devDependencies": {
"eslint": "^8.1.0",
"eslint-config-riot": "^3.0.0"
"url": "https://github.com/andruschka/parcel-plugin-riot"
},
"dependencies": {
"@parcel/plugin": "^2.0.0",
"@parcel/source-map": "^2.0.0"
"parcel-bundler": "^1.12.3",
"riot": "^3.13.2",
"riot-compiler": "^3.4.0"
}
}

View File

@ -1,6 +0,0 @@
{
"extends": "@parcel/config-default",
"transformers": {
"*.riot": ["@riotjs/parcel-transformer-riot"]
}
}

View File

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Parcel Plugin Riot Example</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./main.js"></script>
</body>
</html>

View File

@ -1,5 +0,0 @@
import MyComponent from './my-component.riot'
import { component } from 'riot'
component(MyComponent)(document.getElementById('root'))

View File

@ -1,9 +0,0 @@
<my-component>
<p>{message}</p>
<script>
export default {
message: 'hello world'
}
</script>
</my-component>

View File

@ -1,20 +0,0 @@
{
"name": "riot-parcel-test",
"private": true,
"scripts": {
"postinstall": "parcel build index.html --no-cache"
},
"alias": {
"./test/*.riot": "./$1"
},
"dependencies": {
"riot": "^6.0.0",
"@riotjs/hot-reload": "^6.0.0"
},
"devDependencies": {
"parcel": "^2.0.0",
"@parcel/config-default": "^2.0.0",
"@riotjs/compiler": "^6.0.0",
"@riotjs/parcel-transformer-riot": "file:../"
}
}

View File

@ -1,3 +0,0 @@
module.exports = {
hot: true
}