ci(examples): start locally linked example with npm script

Author: rolandszoke

package-lock.json

@@ -14,6 +14,12 @@
     "test-web": "jest --config ./jest.web.json",
     "test-web-no-hook": "NOHOOK=true jest --config ./jest.no-hook.json",
     "test": "npm run test-web && npm run test-web-no-hook && npm run test-native",
+    "example-beer-finder": "node ./scripts/startExample.js ./examples/beer-finder",
+    "example-clock": "node ./scripts/startExample.js ./examples/clock",
+    "example-contacts": "node ./scripts/startExample.js ./examples/contacts",
+    "example-stop-watch": "node ./scripts/startExample.js ./examples/stop-watch",
+    "example-todo-mvc": "node ./scripts/startExample.js ./examples/todo-mvc",
+    "example-native-clock": "node ./scripts/startExample.js ./examples/native-clock",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "test-builds": "node ./scripts/testBuilds.js",
     "lint": "eslint --max-warnings 0 --ext js,jsx src scripts",
@@ -76,6 +82,7 @@
     "@babel/preset-react": "^7.8.3",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-angular": "^8.3.4",
+    "@rollup/plugin-node-resolve": "^7.1.1",
     "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^9.4.0",
     "@types/react": "^16.9.19",
@@ -108,7 +115,6 @@
     "rollup": "^1.31.0",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-node-resolve": "^5.2.0",
     "sinon": "^8.1.1",
     "styled-components": "^5.0.1"
   },

package.json

@@ -1,5 +1,5 @@
 import path from 'path';
-import resolvePlugin from 'rollup-plugin-node-resolve';
+import resolvePlugin from '@rollup/plugin-node-resolve';
 import babelPlugin from 'rollup-plugin-babel';
 import externalsPlugin from 'rollup-plugin-auto-external';
 

rollup.config.js

@@ -0,0 +1,99 @@
+/* eslint-disable no-console */
+const path = require('path');
+const { execSync: exec } = require('child_process');
+const rollup = require('rollup');
+const resolvePlugin = require('@rollup/plugin-node-resolve');
+const babelPlugin = require('rollup-plugin-babel');
+const externalsPlugin = require('rollup-plugin-auto-external');
+
+console.customInfo = args => {
+  console.info(
+    '\x1b[44m\x1b[37m',
+    '\u2139',
+    '\x1b[0m',
+    '\x1b[36m',
+    args,
+    '\x1b[0m',
+  );
+};
+
+const exampleFolder = path.resolve(process.argv[2]);
+
+// 1. BUILD EASY-STATE BUNDLE
+console.customInfo('Building react-easy-state in watch mode.');
+const watchOptions = {
+  input: path.resolve('src/index.js'),
+  plugins: [
+    resolvePlugin(),
+    babelPlugin({ exclude: 'node_modules/**' }),
+    externalsPlugin({ dependencies: true, peerDependecies: true }),
+  ],
+  output: {
+    format: 'es',
+    dir: 'dist',
+    entryFileNames: 'es.es6.js',
+    sourcemap: true,
+  },
+  watch: {
+    include: 'src/**',
+  },
+};
+const watcher = rollup.watch(watchOptions);
+watcher.on('event', ({ code }) => {
+  if (code === 'START') {
+    console.customInfo('Building bundle.');
+  } else if (code === 'END') {
+    console.customInfo('Bundle built!');
+  } else if (code === 'ERROR') {
+    console.customInfo('Encountered an error while bundling!');
+  }
+});
+
+// 2. LINK EASY-STATE
+console.customInfo('Create link to react-easy-state.');
+exec('npm link', { stdio: 'inherit' });
+console.customInfo('Installing dependencies for example.');
+exec('npm i', {
+  cwd: exampleFolder,
+  stdio: 'inherit',
+});
+console.customInfo('Deleting react dependency duplicates.');
+exec(
+  `
+rm -rf ./node_modules/react-easy-state &&
+rm -rf ./node_modules/react &&
+rm -rf ./node_modules/react-dom
+  `,
+  {
+    cwd: exampleFolder,
+    stdio: 'inherit',
+  },
+);
+console.customInfo('Linking react-easy-state.');
+exec('npm link react-easy-state', {
+  cwd: exampleFolder,
+  stdio: 'inherit',
+});
+
+// 3. START EXAMPLE
+console.customInfo(`Starting ${process.argv[2]} in the background.`);
+exec("nohup bash -c 'npm run start' >/dev/null 2>&1 &", {
+  cwd: exampleFolder,
+  stdio: 'inherit',
+});
+
+const gracefullShutdown = () => {
+  console.customInfo('Killing nodes.');
+  exec('killall node', { stdio: 'inherit' });
+  console.customInfo('Unlinking react-easy-state.');
+  exec('npm unlink --no-save react-easy-state', {
+    cwd: exampleFolder,
+    stdio: 'inherit',
+  });
+  exec('npm unlink', { stdio: 'inherit' });
+  console.customInfo('Stoping bundle builder.');
+  watcher.close();
+};
+
+process.on('SIGINT', gracefullShutdown);
+process.on('SIGTERM', gracefullShutdown);