StencilJS dependency watch in a monorepo

readme.md

Stencil monorepo dev-server setup to watch dependency changes

The project has 3 packages in a lerna monorepo:

- packages
-- client
-- ui
-- ui-kit

ui-kit being the "app". With npm run dev inside packages/ui you run the Stencil dev-server + a watch on the 2 dependencies.

client is a simple utility/commons kinda package bundled with rollup whereas ui-kit is a design system if you will.

It's not the fastest solution but a workaround.

package.json

// packages/ui/package.json

{
 ....
    
  "scripts": {
    "dev": "npm run watch-dev | npm run dev-stencil",
    "dev-stencil": "npm run dev-mode && npm run co-prebuild && stencil build --dev --watch --serve",
    "watch-dev": "node ./build/dev-watch.js"
  },
...   
}

watch-dev.js

// packages/ui/build/watch-dev.js

const colors = require('colors/safe');
const fs = require('fs');

const log = (message, ...args) =>
  console.log(colors.cyan(`\n${message}`), args.length > 0 ? args : '');

const setup = async () => {
  log('Running watch-mode => re-compiling "ui" on dependency changes');

  // Read Stencil config
  const stencilConfigPath = 'stencil.config.ts';
  let stencilConfigContent = '';
  await fs.readFile(stencilConfigPath, 'utf8', function(err, data) {
    if (err) {
      return console.log(err);
    }

    log(`Read file ${stencilConfigPath} successfully`, data.length);

    stencilConfigContent = data;
  });

  const writeStencilConfig = (curr, prev) => {
    log(`${clientEntrance} file changed => updateing ${stencilConfigPath}`);

    log(`Writing Stencil config file`, stencilConfigContent);

    if (stencilConfigContent.length === 0) {
      return;
    }

    fs.writeFile(stencilConfigPath, stencilConfigContent, 'utf8', function(
      err
    ) {
      if (err) return console.log(err);
    });
  };

  // Setup listener for @case-os/client changes
  const clientEntrance = `../client/esm/index.js`;
  await fs.watchFile(clientEntrance, writeStencilConfig);
  // Setup listener for @case-os/client changes
  const uiKitEntrance = `../ui-kit/dist/index.js`;
  await fs.watchFile(uiKitEntrance, writeStencilConfig);
};

setup();