hirasso / parcel-plugin-watch-reload

Parcel plugin to watch files not included in the bundles and reload browser if they change

parcel-plugin-watch-reload

📦🔌🗂👀 A Parcel plugin that watches files not included in your bundles (e.g. **/*.php) and reloads your browser if they change (great for CMS theme development like e.g. WordPress). Also, has emojis in readme 👾

Installation

$ npm install parcel-plugin-watch-reload -D

...or

$ yarn add parcel-plugin-watch-reload -D

Setup

Specify which file types should trigger a browser reload in your package.json:

{
  "watchreload": {
    "files": "**/*.php"
  }
}

Arrays of globs are also supported:

{
  "watchreload": {
    "files": ["**/*.php", "**/*.svg"]
  }
}

Without the files setting in your package.json, the plugin will do nothing.

Optional settings

• Set a reload delay:

  {
    "watchreload": {
      "files": "**/*.php",
      "reloadDelay": 200
    }
  }

• Overwrite the plugin's settings for Chokidar. The defaults are:

  {
    "watchreload": {
      "files": "**/*.php",
      "chokidarOptions": {
        "ignored": ["node_modules", "bower_components", ".cache"],
        "ignoreInitial": true
      }
    }
  }

That's it! If you start parcel in watch mode with the hmr option set to true (it's the default), each change to a file matching your rules will trigger a browser reload. ✨

License

parcel-plugin-watch-reload's Issues

Browser not reloading

Plugin looks great!

I have enabled it for PHP files and it detects the file changes on the command line:
wp-content/themes/limpido/footer.php changed: reloading browsers...

...However it doesn't reload the Browser.
A manual refresh shows the code changes.

Can you help? It would be useful!

Some Background Info
Using parcel to build JS and SCSS in a Wordpress theme.

package.json
{ "name": "XYZ", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "parcel watch ./wp-content/themes/limpido/src/parcel-entrypoint.js --out-file=site --out-dir=wp-content/themes/limpido/dist", "build": "parcel build ./wp-content/themes/limpido/src/parcel-entrypoint.js --out-file=site --out-dir=wp-content/themes/limpido/dist" }, "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^9.7.1", "parcel-bundler": "^1.12.4", "parcel-plugin-watch-reload": "0.0.2", "postcss-modules": "^1.4.1", "sass": "^1.23.3", "spectre.css": "^0.5.8" }, "watchreload": { "files": "**/*.php" } }

.postcssrc
{ "modules": false, "plugins": { "autoprefixer": { "grid": true } } }

同学，您这个项目引入了577个开源组件，存在6个漏洞，辛苦升级一下

检测到 hirasso/parcel-plugin-watch-reload 一共引入了577个开源组件，存在6个漏洞

漏洞标题：Sindre Sorhus IS-SVG 安全漏洞
缺陷组件：[email protected]
漏洞编号：CVE-2021-29059
漏洞描述：Sindre Sorhus is-svg是  （Sindre Sorhus）开源的一个应用软件。提供检查字符串或缓冲区是否为SVG功能。
IS-SVG 存在安全漏洞，该漏洞源于当应用程序检查一个精心制作的无效SVG字符串时，就会出现正则表达式拒绝服务(ReDOS)。
影响范围：[2.1.0, 4.3.0)
最小修复版本：4.3.0
缺陷组件引入路径：[email protected]>[email protected]>[email protected]>[email protected]>[email protected]>[email protected]

另外还有6个漏洞，详细报告：https://mofeisec.com/jr?p=a3c0c3

Parcel 2

Hi,
I'm currently playing around with using Parcel 2 as a bundler for a PHP based shop theme. Now I am struggling to get this plugin to work with Parcel 2 (I am totally new to Parcel, so many of the 0-config things still perplex me).
During my search I discovered that [Parcel 2 enforces a naming scheme](https://v2.parceljs.org/plugin-system/overview/#complete-list-of-plugin-types-(in-a-somewhat-correct-order) that this Plugin doesnt fit, any idea if that would already would fix it and which type of plugin would be correct?
Thanks for any hints, if I get any further i would love to make a PR :)
Morbi

files: [] not works :(

    if( !this.settings.files || typeof this.settings.files !== 'string' || typeof this.settings.files !== 'array'  ) {
      console.log(chalk.bold.yellow(`${this.pluginName} No files specified for watching`));
      return;
    }

add build option for files that need to be built on change

lets say you have folder structure

src/
  modules/
    header.html
  index.html

you included header.html with posthtml-modules, modules folder files change reloads browser but doesn't builds it

[Feature] Reload delay

Sometimes the backend is not reloaded when parcel is already reloaded.

Plz, add a small reload delay by conf.