Compile React app after changes in a automatic way using Parcel

Question

I'm creating a TypeScript library that exports a simple React component. I'm using Parcel as bundler.

Here is my package.json:

{
  ...
  "main": "dist/index.js",
  "files": [
    "dist/"
  ],
  "scripts": {
    "compile": "rm -rf dist/ && tsc --outDir dist",
    "compile-watch": "rm -rf dist/ && tsc -w --outDir dist",
    "format": "prettier src/**/*.{js,jsx,ts,tsx} --write",
    "lint": "tslint -p tsconfig.json",
    "prepublish": "yarn compile",
    "clean": "yarn format && yarn lint",
    "start:demo": "parcel demo/index.html",
    "build": "parcel build demo/index.html --out-dir demo-build"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.3.0",
    "@typescript-eslint/parser": "^4.3.0",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^6.12.0",
    "parcel": "^1.12.4",
    "prettier": "^2.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "typescript": "^4.0.3"
  },
  "dependencies": {
    "@types/react": "^16.9.50",
    "@types/react-dom": "^16.9.8",
  }
}

And my files structure:

myLibrary/
  |_ demo/
    |_ index.html
    |_ index.tsx
    |_ style.css
  |_ demo-build/
    |_ ...
  |_ dist/
    |_ ...
  |_ node_modules/
    |_ ...
  |_ src/
    |_ lib/
      |_ Test.tsx
      |_ ...
    |_ index.tsx
  |_ package.json
  |_ ...

To test the Test component I created a demo page, so I run yarn start:demo.

The problem is that when I edit the Test component, nothing change. I need to stop the process, run yarn compile and then run yarn start:demo. What I'm missing?

Answer 1

You can use the watch command in parcel

https://en.parceljs.org/cli.html#watch

parcel watch demo/index.html

since you already have compile-watch, use yarn compile-watch while you're developing.