updated: use common js for the config

.eslintrc

@@ -1,7 +1,7 @@
 extends: eslint-config-riot
 
 parserOptions:
-  ecmaVersion: 2021
+  ecmaVersion: 2018
   sourceType: 'module'
 
 globals:
@@ -9,4 +9,4 @@ globals:
   expect: true
 
 rules:
-  fp/no-class: off
+  fp/no-class: false

.github/workflows/test.yml

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

.gitignore

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

.travis.yml

@@ -0,0 +1,14 @@
+language: node_js
+
+node_js:
+  - 10
+
+branches:
+  only:
+    - master
+    - dev
+
+notifications:
+  email: false
+
+sudo: false

Readme.md

@@ -1,43 +1,24 @@
-[![Build Status][ci-image]][ci-url]
+[![Build Status][travis-image]][travis-url]
 [![NPM version][npm-version-image]][npm-url]
 [![NPM downloads][npm-downloads-image]][npm-url]
 [![MIT License][license-image]][license-url]
 
-The Riot.js official parcel transformer.
+A parcel plugin for riot.js
-
-## 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)
 
 ## Using
-
+Add parcel-plugin-riot to your project.
-### 1. Add the riot parcel transformer to your project.
-
-```bash
-npm i -D @riotjs/parcel-transformer-riot @riotjs/compiler
 ```
-
+npm i parcel-plugin-riot
-### 2. Configure your .parcelrc file 
-
-```json
-{
-  "extends": "@parcel/config-default",
-  "transformers": {
-    "*.riot": ["@riotjs/parcel-transformer-riot"]
-  }
-}
 ```
 
 -> You are ready!
 
-```js
+```javascript
-import App from './src/App.riot'
-import {component} from 'riot'
 
-component(App)(document.querySelector('#root'), {
+const riot = require('riot')
-  message: 'Hello there'
+require('./src/App.tag')
-})
+
+riot.mount('*')
 ```
 
 ## Configuration
@@ -46,50 +27,42 @@ If you want compile your tags using custom riot compiler options you can create
 
 ```js
 module.exports = {
-  hot: false // set it to true if you are using hmr
+  // html parser
-  // add here all the other @riotjs/compiler options riot.js.org/compiler
+  template: 'foo',
-  // template: 'pug' for example
+  // js parser
-}
+  type: 'baz',
-```
+  // css parser
-
+  style: 'bar',
-If you want to use `pug` as your template engine, your `riot.config.js` might look like this
+  parsers: {
-
+    html: {
-```js
+      foo: (html, opts, url) => require('foo').compile(html)
-const { registerPreprocessor } = require('@riotjs/compiler')
+    },
-const { render } = require('pug')
+    css: {
-
+      bar: (tagName, css, opts, url) => require('bar').compile(css)
-// register the pug preprocessor
+    },
-registerPreprocessor('template', 'pug', (code, options) => {
+    js: {
-  const { file } = options
+      baz: (js, opts, url) => require('baz').compile(js)
-
+    }
-  return {
+  },
-    code: render(code, {
+  // special options that may be used to extend
-      filename: file,
+  // the default riot parsers options
-      pretty: true,
+  parserOptions: {
-      doctype: 'html'
+    js: {},
-    })
+    template: {},
+    style: {}
   }
-})
-
-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
+[travis-image]:  https://img.shields.io/travis/riot/parcel-plugin-riot.svg?style=flat-square
-[ci-url]:https://github.com/riot/parcel-transformer-riot/actions
+[travis-url]:    https://travis-ci.org/riot/parcel-plugin-riot
 
 [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-version-image]:   https://img.shields.io/npm/v/parcel-plugin-riot.svg?style=flat-square
-[npm-downloads-image]: https://img.shields.io/npm/dm/@riotjs/parcel-transformer-riot.svg?style=flat-square
+[npm-downloads-image]: https://img.shields.io/npm/dm/parcel-plugin-riot.svg?style=flat-square
-[npm-url]:             https://npmjs.org/package/@riotjs/parcel-transformer-riot
+[npm-url]:             https://npmjs.org/package/parcel-plugin-riot
 

RiotAsset.js

@@ -0,0 +1,26 @@
+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'])) || {}
+    const code = compile(this.contents, riotOpts, this.name)
+
+    this.contents = `${preamble}${code}`
+
+    return [
+      {
+        type: 'js',
+        value: this.contents
+      }
+    ]
+  }
+}
+
+module.exports = RiotAsset

index.js

@@ -1,63 +1,3 @@
-const { compile } = require('@riotjs/compiler')
+module.exports = function(bundler) {
-const  { Transformer } = require('@parcel/plugin')
+  bundler.addAssetType('tag', require.resolve('./RiotAsset'))
-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]
-  }
-})

package.json

@@ -1,30 +1,27 @@
 {
-  "name": "@riotjs/parcel-transformer-riot",
+  "name": "parcel-plugin-riot",
-  "version": "7.0.2",
+  "version": "2.1.0",
-  "description": "The Riot.js official parcel transformer",
+  "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"
-    "test": "npx eslint *.js && npm run test-bundle",
-    "test-bundle": "cd test && npm i"
   },
-  "engines": {
+  "author": {
-    "parcel": "2.x"
+    "name": "andruschka",
+    "url": "https://92digital.com"
   },
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/riot/parcel-plugin-riot"
+    "url": "https://github.com/andruschka/parcel-plugin-riot"
-  },
-  "peerDependencies": {
-    "@riotjs/compiler": "^6.0.4"
-  },
-  "devDependencies": {
-    "eslint": "^8.1.0",
-    "eslint-config-riot": "^3.0.0"
   },
   "dependencies": {
-    "@parcel/plugin": "^2.0.0",
+    "parcel-bundler": "^1.12.3",
-    "@parcel/source-map": "^2.0.0"
+    "riot": "^3.13.2",
+    "riot-compiler": "^3.4.0"
+  },
+  "devDependencies": {
+    "eslint": "^5.15.3",
+    "eslint-config-riot": "^2.0.0"
   }
 }

test/.parcelrc

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

test/index.html

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

test/main.js

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

test/my-component.riot

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

test/package.json

@@ -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:../"
-  }
-}

test/riot.config.js

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