wclr / yalc

Work with yarn/npm packages locally like a boss.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to render yalc add dynamically

parithibang opened this issue · comments

I am building a package and using Yalc I am publishing it in my local. My scenario is that I want a Hot Module Replacement in the package and the consuming application should automatically detect the changes.

What I have tried is that in my custom package created a watch command in package.json

"watch": "webpack --watch",

In webpack.config.js

module.exports = (env, argv) => {
  if (argv && argv.watch) {
    const watchCommand = "yalc publish --push --replace";
    config.plugins.push(
      new WebpackShellPluginNext({
        onDoneWatch: {
          scripts: [watchCommand],
          blocking: false,
          parallel: true,
        },
      })
    );
  }
  return config;
};

Then in my application directory in package.json added a custom nodemon command

"start:nodemon": "nodemon --exec 'webpack serve --env standalone'",

Application webpack.config.js

devServer: {
      hot: true,
      watchFiles: [".yalc/**/*"],
      onBeforeSetupMiddleware: (devServer) => {
        devServer.compiler.hooks.done.tap("customCommand", () => {
            exec("yalc add my-custom-package", (err, stdout, stderr) => {
              if (stdout) console.log(stdout);
            });
        });
      }
    }

The changes are not reflected while the file is saved in the package directory. But if I stop and start the start:nodemon process it is working fine.

commented

Yalc is too simple to be the case for such issues -) Basically, it just copies the files from one location to another.