feat: Add hot-reload (target to master) (#13)

authored-by: bluesd <[email protected]>

Author: mk-emeks

README.md

@@ -2,97 +2,85 @@
 
 A simple way to create an antd theme css file with zero configuration.
 
-[Ant Design](https://ant.design/) provides plenty of UI components, styled with [less](http://lesscss.org/).
-You can customize the default theme modifying less variables, [check the doc](https://ant.design/docs/react/customize-theme) for multiple ways to achieve this.\
-The main issue being that you don't have a simple way to create a static `css` file with zero configuration.
+[Ant Design](https://ant.design/) provides plenty of UI components, styled with less.
+You can customize the default theme modifying less variables (check [their doc](https://ant.design/docs/react/customize-theme) for multiple ways to achieve this), but the main issue being that you don't have a simple way to create a static `.css` file with zero configuration.
 
-This package was created with `Antd Design v4.6.6` and aims to ease the theme's customization process without having to install more dependencies yourself, set up `less` or eject your [React](reactjs.org) project.
+This package was created with `Antd Design v4.6.6` and aims to ease the theme's customization process without having to install more dependencies yourself, set up [less](https://lesscss.org/) or eject your [React](reactjs.org) project.
 
 ## Usage
 
 ### Generate custom theme styles
 
-1. Create your own custom theme overriding Antd's less variables (by default: `./custom-theme.less`).
-
-2. Generate theme's custom `.css` file.
-
-  - **Option A:** Without installing this plugin:
-    ```sh
-    $ npx @emeks/antd-custom-theme-generator
-
-    output > ./custom-theme.css
-    ```
-
-  - **Option B:** Installing the package as a dev dependency:
-
-    ```sh
-    $ npm i -E --save-dev @emeks/antd-custom-theme-generator
-    ```
-
-    Then generating your theme:
-    ```sh
-    $ generate-theme
-
-    output > ./custom-theme.css
-    ```
-
-3. Replace `antd/dist/antd.css` import in your project, with the output file (by default: `./custom-theme.css`) generated by this plugin.
+1. Define your custom theme creating a `.less` file overriding Antd's variables (by default: `./custom-theme.less`).
+   - _Example:_
+     ```less
+     @primary-color: #9063cd;
+     @success-color: #a8d3c4;
+     ```
+
+2. Generate custom theme's `.css` file.
+   - _Option A:_\
+    Without installing this package:
+     ```sh
+     $ npx @emeks/antd-custom-theme-generator
+
+     output > ./custom-theme.css
+     ```
+   - _Option B:_\
+     Installing this package as a dev dependency:
+     ```sh
+     $ npm i -E --save-dev @emeks/antd-custom-theme-generator
+     ```
+     Then generating your theme:
+     ```sh
+     $ generate-theme
+
+     default output > ./custom-theme.css
+     ```
+3. Replace `"antd/dist/antd.css"` import in your project, with the output file of your custom theme generated by this script (by default: `./custom-theme.css`).
 
 ### Options
 
 | Name | Default | Description |
 | --- | --- | --- |
-| `--verbose` or `-v` | | Print more info for debugging |
-| `--antd` | ./node_modules/antd | Path of the antd library |
-| `--theme` | default | Antd theme you want to override (e.g. `dark` or `compact`) - [Check available options](https://github.com/ant-design/ant-design/tree/master/components/style/themes). |
-| `<customThemeFilePath>` | ./custom-theme.less | Path of the less file with the variables your want to override |
-| `<generatedThemeFilePath>` | ./custom-theme.css | Output path where the script give you the css file with your new theme |
-
-> **Notes**:
->
-> The order of the paths **is** important.
->  ```sh
->  $ generate-theme [--verbose] [--antd] [--theme] [<customThemeFilePath>] [<generatedThemeFilePath>]
->  ```
->
-
-### Examples
-
-- Generate dark theme
+| `--verbose` or `-v` | | Prints a little bit more info for debugging purposes |
+| `--watch` or `-w` | | Keeps script running, recompile on `<customThemeFilePath>` change |
+| `--antd` | ./node_modules/antd | Path to the antd library directory |
+| `--theme` | default | Antd theme you want to use as base (e.g. `dark` or `compact`) - [Check available options](https://github.com/ant-design/ant-design/tree/master/components/style/themes) |
+| `<customThemeFilePath>` | ./custom-theme.less | Path to the custom `.less` file with Antd variables overriden |
+| `<generatedThemeFilePath>` | ./custom-theme.css | Output Path to the compiled `.css` file containing your new theme |
+
+> **Notes**:\
+> The order of paths **is** important.
+```sh
+  $ generate-theme [--verbose] [--watch] [--antd <dir>] [--theme <theme>] [<customThemeFilePath>] [<generatedThemeFilePath>]
+```
 
+#### Examples
+- Generate a custom theme using dark theme as base:
   ```sh
   $ npx @emeks/antd-custom-theme-generator --theme dark
   ```
-
-- Generate default theme with non default paths
+- Generate a custom theme using default theme as base specifying non default paths:
   ```sh
   $ npx @emeks/antd-custom-theme-generator ./styles/custom-theme.less ./styles/custom-theme.css
   ```
 
 ### FAQ
-
 > **Q1: Which variables can I override?**
 
 You may override any variable exposed by Antd in [this file](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less).
 
 > **Q2: Should I run this command every time I change my `custom-theme.less` file?**
 
-Yes, we don't provide hot-reload yet.
+No, you could pass the `-w` argument to let the script observe `<customThemeFilePath>` file and recompile it if it changes.
 
 ## Development
-
 - Inside package folder, link it globally:
-
-```sh
-$ npm link
-```
-
-- Use the package in your project (with antd already installed and a `custom-theme.less` file created as well):
-
-```sh
-$ generate-theme
-```
-
-## TODO List:
-
-- [ ] Add hot-reload generation.
+  ```sh
+  $ npm link
+  ```
+- Use the package in your project (with antd already installed and a `<customThemeFilePath>` file created as well):
+  ```sh
+  $ generate-theme
+  ```

index.js

@@ -1,43 +1,44 @@
 #!/usr/bin/env node
 const fs = require("fs");
 const less = require("less");
+const watch = require('node-watch');
 const argv = require("minimist")(
   process.argv.slice(2),
-  {alias: {"verbose": ["v"]}}
+  {alias: {"verbose": ["v"], "watch": ['w']}}
 );
 
 const DEFAULTS = {
   verbose: false,
+  watch: false,
   in: "./custom-theme.less",
   out: "./custom-theme.css",
   antd: "./node_modules/antd",
   theme: "default"
 };
 
 const verbose = argv["verbose"] || DEFAULTS.verbose;
+const shouldWatch = argv["watch"] || DEFAULTS.watch;
 const inFilePath = argv._[0] || DEFAULTS.in;
 const outFilePath = argv._[1] || DEFAULTS.out;
 const antdLibPath = argv["antd"] || DEFAULTS.antd;
 const theme = argv["theme"] || DEFAULTS.theme;
 
-verbose && console.debug(`
+verbose && console.debug(`Verbose::
 \x1b[34m[Params]\x1b[0m
   Args:
     verbose: ${argv["verbose"] || ''}
+    watch: ${argv["watch"] || ''}
     antd: ${argv['antd'] || ''}
     theme: ${argv['theme'] || ''}
     in: ${argv._[0] || ''}
     out: ${argv._[1] || ''}
   CWD: ${process.cwd()}
-  __dirname: ${__dirname}
 
 \x1b[34m[Vars]\x1b[0m
   customTheme: ${inFilePath}
   generatedTheme: ${outFilePath}
   antdLib: ${antdLibPath}
   theme: ${theme}
-
-Generating theme...
 `);
 
 const imports = [
@@ -46,15 +47,33 @@ const imports = [
   `@import url('${inFilePath}');`
 ].join('');
 
-less.render(imports, {javascriptEnabled: true})
-.then(
-  ({css}) => {
-    try {
-      fs.writeFileSync(outFilePath, css);
-      console.log(`AntDesign theme (${outFilePath}) successfully generated.`);
-    } catch(e) {
-      console.error(`Could not write into file (${outFilePath}):`, e);
-    }
-  },
-  (error) => console.error(error)
-);
+const compile = () => {
+  console.log('Generating theme...');
+  less.render(imports, {javascriptEnabled: true})
+  .then(
+    ({css}) => {
+      try {
+        fs.writeFileSync(outFilePath, css);
+        console.log(`AntDesign theme (${outFilePath}) successfully generated.`);
+      } catch(e) {
+        console.error(`Could not write into file (${outFilePath}):`, e);
+      }
+    },
+    (error) => console.error(error)
+  );
+};
+
+compile();
+if(shouldWatch){
+  const watcher = watch(inFilePath, ()=> {
+    console.log(`Watcher:: ${inFilePath} changed, recompiling.`);
+    compile();
+  });
+  const closeWatcher = () => {
+    console.log('Watcher:: Removing watcher...');
+    watcher.close();
+  };
+  process.on('SIGTERM', closeWatcher);
+  process.on('SIGINT', closeWatcher);
+  process.on('SIGQUIT', closeWatcher);
+};

package-lock.json

@@ -6,7 +6,8 @@
   },
   "dependencies": {
     "less": "3.11.3",
-    "minimist": "1.2.5"
+    "minimist": "1.2.5",
+    "node-watch": "0.7.1"
   },
   "bin": {
     "generate-theme": "index.js"