Make filepath optional in riotconfig.

build(deps): bump lodash from 4.17.11 to 4.17.15

.eslintrc

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

.eslintrc.json

@@ -1,25 +0,0 @@
-{
-    "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"]
-    }
-}

.github/workflows/test.yml

@@ -0,0 +1,24 @@
+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 +1,5 @@
-node_modules/*
+node_modules
+/test/.parcel-cache/
+/test/package-lock.json
+/test/dist
+.idea

LICENSE

@@ -0,0 +1,22 @@
+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.
+

Readme.md

@@ -1,20 +1,95 @@
-# parcel-plugin-riot
+[![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]
 
-A parcel plugin for riot.js
+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)
 
 ## 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!
 
-```javascript
+```js
+import App from './src/App.riot'
+import {component} from 'riot'
 
-const riot = require('riot')
-require('./src/App.tag')
-
-riot.mount('*')
+component(App)(document.querySelector('#root'), {
+  message: 'Hello there'
+})
 ```
 
+## 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
+

RiotAsset.js

@@ -1,27 +0,0 @@
-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;

index.js

@@ -1,3 +1,63 @@
-module.exports = function (bundler) {
-  bundler.addAssetType('tag', 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,21 +1,30 @@
 {
-  "name": "parcel-plugin-riot",
-  "version": "2.1.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": {},
-  "author": {
-    "name": "andruschka",
-    "url": "https://92digital.com"
+  "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"
   },
   "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.4"
+  },
+  "devDependencies": {
+    "eslint": "^8.1.0",
+    "eslint-config-riot": "^3.0.0"
   },
   "dependencies": {
-    "parcel-bundler": "^1.12.3",
-    "riot": "^3.13.2",
-    "riot-compiler": "^3.4.0"
+    "@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

@@ -0,0 +1,13 @@
+<!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

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

test/my-component.riot

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

test/package.json

@@ -0,0 +1,20 @@
+{
+  "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

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