Make filepath optional in riotconfig.

.eslintrc

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

.github/workflows/test.yml

@@ -13,8 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x, 15.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+        node-version: [14.x, 15.x]
     steps:
       - uses: actions/checkout@v2
       - name: Local Unit Test ${{ matrix.node-version }}

.gitignore

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

Readme.md

@@ -3,17 +3,30 @@
 [![NPM downloads][npm-downloads-image]][npm-url]
 [![MIT License][license-image]][license-url]
 
-A parcel plugin for riot.js
+The Riot.js official parcel transformer.
 
 ## Important
 
-If you are using Riot.js < 4.0.0 please check the [v3 branch](https://github.com/riot/parcel-plugin-riot/tree/v3)
+- 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-plugin-riot @riotjs/compiler
+npm i -D @riotjs/parcel-transformer-riot @riotjs/compiler
+```
+
+### 2. Configure your .parcelrc file 
+
+```json
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.riot": ["@riotjs/parcel-transformer-riot"]
+  }
+}
 ```
 
 -> You are ready!
@@ -70,13 +83,13 @@ npm i @riotjs/hot-reload -D
 ```
 
 
-[ci-image]:https://img.shields.io/github/workflow/status/riot/parcel-plugin-riot/test?style=flat-square
-[ci-url]:https://github.com/riot/parcel-plugin-riot/actions
+[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-plugin-riot.svg?style=flat-square
-[npm-downloads-image]: https://img.shields.io/npm/dm/@riotjs/parcel-plugin-riot.svg?style=flat-square
-[npm-url]:             https://npmjs.org/package/@riotjs/parcel-plugin-riot
+[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
 

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

index.js

@@ -1,3 +1,63 @@
-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 { 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,24 +1,30 @@
 {
-  "name": "@riotjs/parcel-plugin-riot",
-  "version": "6.0.0",
-  "description": "A parcel plugin for riot.js",
+  "name": "@riotjs/parcel-transformer-riot",
+  "version": "7.0.2",
+  "description": "The Riot.js official parcel transformer",
   "main": "index.js",
   "scripts": {
-    "prepare": "npm i --no-save @riotjs/compiler@5 parcel-bundler@1 @riotjs/hot-reload@5 riot@5",
+    "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"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/andruschka/parcel-plugin-riot"
+    "url": "https://github.com/riot/parcel-plugin-riot"
   },
   "peerDependencies": {
-    "@riotjs/compiler": "^6.0.0",
-    "parcel-bundler": "^1.9.4"
+    "@riotjs/compiler": "^6.0.4"
   },
   "devDependencies": {
-    "eslint": "^7.30.0",
+    "eslint": "^8.1.0",
     "eslint-config-riot": "^3.0.0"
+  },
+  "dependencies": {
+    "@parcel/plugin": "^2.0.0",
+    "@parcel/source-map": "^2.0.0"
   }
 }

test/.parcelrc

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

test/index.html

@@ -8,6 +8,6 @@
 </head>
 <body>
     <div id="root"></div>
-    <script src="./main.js"></script>
+    <script type="module" src="./main.js"></script>
 </body>
 </html>

test/main.js

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

test/package.json

@@ -1,17 +1,20 @@
 {
   "name": "riot-parcel-test",
-  "main": "index.html",
   "private": true,
   "scripts": {
     "postinstall": "parcel build index.html --no-cache"
   },
+  "alias": {
+    "./test/*.riot": "./$1"
+  },
   "dependencies": {
-    "parcel-bundler": "^1.11.0"
+   "riot": "^6.0.0",
+    "@riotjs/hot-reload": "^6.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"
+    "parcel": "^2.0.0",
+    "@parcel/config-default": "^2.0.0",
+    "@riotjs/compiler": "^6.0.0",
+    "@riotjs/parcel-transformer-riot": "file:../"
   }
 }