New: Add hot module reloading for theme and styles

.eslintrc

@@ -1,78 +1,74 @@
 {
-  "parser": "babel-eslint",
-  "extends": ["tamia/react", "plugin:jsx-a11y/recommended"],
-  "env": {
-    "browser": true,
-    "node": true
-  },
-  "plugins": [
-    "compat",
-    "import",
-    "jsx-a11y"
-  ],
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "moduleDirectory": ["src/client", "node_modules"],
-        "extensions": [
-          ".js",
-          ".json",
-          ".tsx",
-          ".ts"
-        ]
-      }
-    },
-    "react": {
-      "version": "16.6",
-      "flowVersion": "0.83"
-    }
-  },
-  "rules": {
-    "valid-jsdoc": 0,
-    "no-duplicate-imports": 0,
-    "compat/compat": "error",
-    "import/no-unresolved": ["error", {
-      "commonjs": true,
-      "caseSensitive": true
-    }],
-    "import/export": "error",
-    "import/no-named-as-default-member": "error",
-    "import/no-mutable-exports": "error",
-    "import/no-amd": "error",
-    "import/first": ["error", "absolute-first"],
-    "import/no-duplicates": "error",
-    "import/extensions": ["error", "always", {
-      "js": "never",
-      "tsx": "never",
-      "ts": "never"
-    }],
-    "import/no-extraneous-dependencies": "error",
-    "import/newline-after-import": "error",
-    "import/prefer-default-export": "error",
-    "import/no-named-default": "error"
-  },
-  "globals": {
-    "System": false,
-    "classes": false,
-    "shallow": false,
-    "render": false,
-    "mount": false,
-    "cy": false
-  },
-  "overrides": [
-    {
-        "files": ["*.spec.js"],
-        "rules": {
-          "compat/compat": 0
-        }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "parser": "@typescript-eslint/parser",
-      "plugins": ["@typescript-eslint"],
-      "extends": [
-        "tamia/typescript-react"
-      ]
-    }
-  ]
+	"parser": "babel-eslint",
+	"extends": ["tamia/react", "plugin:jsx-a11y/recommended"],
+	"env": {
+		"browser": true,
+		"node": true
+	},
+	"plugins": ["compat", "import", "jsx-a11y"],
+	"settings": {
+		"import/resolver": {
+			"node": {
+				"moduleDirectory": ["src/client", "node_modules"],
+				"extensions": [".js", ".json", ".tsx", ".ts"]
+			}
+		},
+		"react": {
+			"version": "16.6",
+			"flowVersion": "0.83"
+		}
+	},
+	"rules": {
+		"valid-jsdoc": 0,
+		"no-duplicate-imports": 0,
+		"compat/compat": "error",
+		"import/no-unresolved": [
+			"error",
+			{
+				"commonjs": true,
+				"caseSensitive": true
+			}
+		],
+		"import/export": "error",
+		"import/no-named-as-default-member": "error",
+		"import/no-mutable-exports": "error",
+		"import/no-amd": "error",
+		"import/first": ["error", "absolute-first"],
+		"import/no-duplicates": "error",
+		"import/extensions": [
+			"error",
+			"always",
+			{
+				"js": "never",
+				"tsx": "never",
+				"ts": "never"
+			}
+		],
+		"import/no-extraneous-dependencies": "error",
+		"import/newline-after-import": "error",
+		"import/prefer-default-export": "error",
+		"import/no-named-default": "error"
+	},
+	"globals": {
+		"System": false,
+		"classes": false,
+		"shallow": false,
+		"render": false,
+		"mount": false,
+		"cy": false
+	},
+	"overrides": [
+		{
+			"files": ["*.spec.js"],
+			"rules": {
+				"compat/compat": 0
+			}
+		},
+		{
+			"files": ["*.ts", "*.tsx"],
+			"parser": "@typescript-eslint/parser",
+			"plugins": ["@typescript-eslint"],
+			"extends": ["tamia/typescript-react"]
+		}
+	]
 }

docs/Configuration.md

@@ -599,9 +599,11 @@ Folder for static HTML style guide generated with `styleguidist build` command.
 
 #### `styles`
 
-Type: `object`, optional
+Type: `Object` or `String` , optional
+
+Customize styles of any Styleguidist’s component or file path to a file exporting said styles.
 
-Customize styles of any Styleguidist’s component.
+The path is relative to the cwd or absolute.
 
 See example in the [cookbook](Cookbook.md#how-to-change-styles-of-a-style-guide).
 
@@ -625,16 +627,20 @@ A function that returns an HTML string, see [mini-html-webpack-plugin docs](http
 
 #### `theme`
 
-Type: `object`, optional
+Type: `Object` or `String`, optional
 
 Customize style guide UI fonts, colors, etc.
 
+Contain a theme object or a file path to a file exporting such object.
+
+The path is relative to the cwd or absolute.
+
 See example in the [cookbook](Cookbook.md#how-to-change-styles-of-a-style-guide).
 
 > **Note:** See available [theme variables](https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.ts).
-
+>
 > **Note:** Styles use [JSS](https://github.com/cssinjs/jss/blob/master/docs/jss-syntax.md) with these plugins: [jss-plugin-isolate](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-isolate), [jss-plugin-nested](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-nested), [jss-plugin-camel-case](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-camel-case), [jss-plugin-default-unit](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-default-unit), [jss-plugin-compose](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-compose) and [jss-plugin-global](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-global).
-
+>
 > **Note:** Use [React Developer Tools](https://github.com/facebook/react) to find component and style names. For example a component `<LogoRenderer><h1 className="rsg--logo-53">` corresponds to an example above.
 
 #### `title`
@@ -690,22 +696,22 @@ Function that modifies code example (Markdown fenced code block). For example, y
 
 ```javascript
 module.exports = {
-	updateExample(props, exampleFilePath) {
-		const { settings, lang } = props
-		if (typeof settings.file === 'string') {
-			const filepath = path.resolve(
-				path.dirname(exampleFilePath),
-				settings.file
-			)
-			const { file, ...restSettings } = settings;
-			return {
-				content: fs.readFileSync(filepath, 'utf8'),
-				settings: restSettings,
-				lang,
-			}
-		}
-		return props
-	}
+  updateExample(props, exampleFilePath) {
+    const { settings, lang } = props
+    if (typeof settings.file === 'string') {
+      const filepath = path.resolve(
+        path.dirname(exampleFilePath),
+        settings.file
+      )
+      const { file, ...restSettings } = settings
+      return {
+        content: fs.readFileSync(filepath, 'utf8'),
+        settings: restSettings,
+        lang
+      }
+    }
+    return props
+  }
 }
 ```
 
@@ -796,11 +802,11 @@ module.exports = {
 ```
 
 > **Warning:** This option disables config load from `webpack.config.js`, load your config [manually](Webpack.md#reusing-your-projects-webpack-config).
-
+>
 > **Note:** `entry`, `externals`, `output`, `watch`, and `stats` options will be ignored. For production builds, `devtool` will also be ignored.
-
+>
 > **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `MiniHtmlWebpackPlugin`, `UglifyJsPlugin`, `TerserPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.
-
+>
 > **Note:** Run style guide in verbose mode to see the actual webpack config used by Styleguidist: `npx styleguidist server --verbose`.
 
 See [Configuring webpack](Webpack.md) for examples.

docs/Cookbook.md

@@ -260,10 +260,16 @@ module.exports = {
 }
 ```
 
-> **Note:** See available [theme variables](https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.ts).
+You can as well store those styles and theme variables like below. This has one big advantage, it avoid needing our styleguide to restart at every modification of the styles or theme.
 
-> **Note:** Styles use [JSS](https://github.com/cssinjs/jss/blob/master/docs/jss-syntax.md) with these plugins: [jss-isolate](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-isolate), [jss-nested](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-nested), [jss-camel-case](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-camel-case), [jss-default-unit](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-default-unit), [jss-compose](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-compose) and [jss-global](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-global).
+Each modification will trigger a hot module replacement and automatically update the styleguide in your browser.
+
+Check out the [themed example](https://github.com/styleguidist/react-styleguidist/tree/master/examples/themed) on the githuub repo to see an example.
 
+> **Note:** See available [theme variables](https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.ts).
+>
+> **Note:** Styles use [JSS](https://github.com/cssinjs/jss/blob/master/docs/jss-syntax.md) with these plugins: [jss-isolate](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-isolate), [jss-nested](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-nested), [jss-camel-case](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-camel-case), [jss-default-unit](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-default-unit), [jss-compose](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-compose) and [jss-global](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-global).
+>
 > **Note:** Use [React Developer Tools](https://github.com/facebook/react) to find component and style names. For example a component `<LogoRenderer><h1 className="rsg--logo-53">` corresponds to an example above.
 
 ## How to change the layout of a style guide?
@@ -390,16 +396,16 @@ module.exports = {
 
 ## How to debug my components and examples?
 
-1.  Open your browser’s developer tools
-2.  Write `debugger;` statement wherever you want: in a component source, a Markdown example or even in an editor in a browser.
+1. Open your browser’s developer tools
+2. Write `debugger;` statement wherever you want: in a component source, a Markdown example or even in an editor in a browser.
 
 ![](https://d3vv6lp55qjaqc.cloudfront.net/items/3i3E3j2h3t1315141k0o/debugging.png)
 
 ## How to debug the exceptions thrown from my components?
 
-1.  Put `debugger;` statement at the beginning of your code.
-2.  Press the ![Debugger](https://d3vv6lp55qjaqc.cloudfront.net/items/2h2q3N123N3G3R252o41/debugger.png) button in your browser’s developer tools.
-3.  Press the ![Continue](https://d3vv6lp55qjaqc.cloudfront.net/items/3b3c1P3g3O1h3q111I2l/continue.png) button and the debugger will stop execution at the next exception.
+1. Put `debugger;` statement at the beginning of your code.
+2. Press the ![Debugger](https://d3vv6lp55qjaqc.cloudfront.net/items/2h2q3N123N3G3R252o41/debugger.png) button in your browser’s developer tools.
+3. Press the ![Continue](https://d3vv6lp55qjaqc.cloudfront.net/items/3b3c1P3g3O1h3q111I2l/continue.png) button and the debugger will stop execution at the next exception.
 
 ## How to use the production or development build of React?
 
@@ -466,9 +472,9 @@ devServer: {
 
 Two options:
 
-1.  Put a `favicon.ico` file into the root folder of your site.
+1. Put a `favicon.ico` file into the root folder of your site.
 
-2.  Use [template](Configuration.md#template) option:
+2. Use [template](Configuration.md#template) option:
 
 ```javascript
 module.exports = {

examples/themed/Readme.md

@@ -0,0 +1,12 @@
+# React Styleguidist themed example style guide
+
+How to start locally:
+
+```
+git clone https://github.com/styleguidist/react-styleguidist.git
+cd react-styleguidist/examples/themed
+npm install
+npx styleguidist server
+```
+
+Then open [http://localhost:6060](http://localhost:6060) in your browser.

examples/themed/babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+	presets: [
+		[
+			'@babel/env',
+			{
+				modules: false,
+				useBuiltIns: 'usage',
+				corejs: 3,
+			},
+		],
+		'@babel/react',
+	],
+	plugins: ['@babel/plugin-proposal-class-properties'],
+};