chore(examples): easier linking for iot-app-kit packages (#265)

examples/react-app/README.md

@@ -10,37 +10,11 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Install the latest @iot-app-kit/* packages built locally
 
-1. Build all the packages from the root of this `iot-app-kit` repository and link them with:
+`npm run link`
 
-```sh
-npm run bootstrap
-npm run link
-```
+## Automatically rebuild and relink @iot-app-kit/* packages
 
-2. Come back to `iot-app-kit/examples/react-app`, temporarily remove all dependencies for `@iot-app-kit/*` from `package.json` and install the other dependencies with:
-
-```sh
-npm install
-```
-
-3. Add all the `@iot-app-kit/*` dependencies back to `package.json` and link them to the latest build with:
-
-```sh
-npm link @iot-app-kit/core @iot-app-kit/components @iot-app-kit/react-components @iot-app-kit/related-table @iot-app-kit/scene-composer @iot-app-kit/source-iotsitewise @iot-app-kit/source-iottwinmaker @iot-app-kit/table
-```
-
-4. To solve the duplicate React issue due to link, go to the root of this `iot-app-kit` repository, and run:
-
-```sh
-npm link ./examples/react-app/node_modules/react ./examples/react-app/node_modules/react-dom
-```
-
-5. Come back to `iot-appkit/examples/react-app`, build and start the app with:
-
-```sh
-npm run build
-npm run start
-```
+`npm run hot-link`
 
 ## Note
 

examples/react-app/hot-link.js

@@ -0,0 +1,47 @@
+const nodemon = require('nodemon');
+const { spawn } = require('node:child_process');
+
+// killable process
+let currentProcess;
+
+/**
+ * Run build commands via node process
+ */
+const build = () => {
+  currentProcess = spawn(`npm run link`, { shell: true });
+
+  currentProcess.stdout.on('data', (data) => console.log(data.toString()));
+
+  currentProcess.stderr.on('data', (data) => console.error(data.toString()));
+};
+
+/**
+ * Have nodemon watch over source code and ignore tests
+ * Watch for restart events to trigger rebuilds
+ */
+nodemon({
+  exec: 'echo "started hot linker"',
+  watch: [
+    '../../packages/components/src',
+    '../../packages/core/src',
+    '../../packages/react-components/src',
+    '../../packages/related-table/src',
+    '../../packages/scene-composer/src',
+    '../../packages/source-iotsitewise/src',
+    '../../packages/source-iottwinmaker/src',
+    '../../packages/table/src',
+  ],
+  ignore: ['../../packages/scene-composer/src/assets/auto-gen'],
+  ext: 'ts, tsx, js',
+  delay: 1000,
+});
+
+build();
+
+nodemon.on('restart', function (files) {
+  currentProcess && currentProcess.kill();
+
+  console.log('Files changed: ', files);
+
+  build();
+});

examples/react-app/link.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+cd ../..
+
+npm run bootstrap
+npm run link
+
+cd examples/react-app
+
+npm install
+
+npm link @iot-app-kit/core @iot-app-kit/components @iot-app-kit/react-components @iot-app-kit/related-table @iot-app-kit/scene-composer @iot-app-kit/source-iotsitewise @iot-app-kit/source-iottwinmaker @iot-app-kit/table
+
+cd ../..
+
+npm link ./examples/react-app/node_modules/react ./examples/react-app/node_modules/react-dom
+
+cd examples/react-app
+
+npm run build
+npm run start