Feat: Made the mounting point id configurable. (#1050)

* Feat: Made the mounting point id configurable.
* Removed default container name.
* Removed nonsensical test.

Author: manatok

docs/Configuration.md

@@ -20,6 +20,7 @@ By default, Styleguidist will look for `styleguide.config.js` file in your proje
 - [`handlers`](#handlers)
 - [`ignore`](#ignore)
 - [`logger`](#logger)
+- [`mountPointId`](#mountPointId)
 - [`pagePerSection`](#pagepersection)
 - [`printBuildInstructions`](#printbuildinstructions)
 - [`printServerInstructions`](#printserverinstructions)
@@ -270,6 +271,12 @@ module.exports = {
 }
 ```
 
+#### `mountPointId`
+
+Type: `string`, defaults: `rsg-root`
+
+The ID of the DOM element that React-Styleguidist mounts.
+
 #### `pagePerSection`
 
 Type: `Boolean`, default: `false`

loaders/styleguide-loader.js

@@ -14,6 +14,7 @@ const slugger = require('./utils/slugger');
 // Config options that should be passed to the client
 const CLIENT_CONFIG_OPTIONS = [
 	'compilerConfig',
+	'mountPointId',
 	'pagePerSection',
 	'previewDelay',
 	'ribbon',

scripts/__tests__/config.spec.js

@@ -219,3 +219,8 @@ it('should throw when editorConfig option passed', () => {
 		});
 	expect(fn).toThrow('config option was removed');
 });
+
+it('mountPointId should have default value', () => {
+	const result = getConfig();
+	expect(result.mountPointId).toEqual('rsg-root');
+});

scripts/__tests__/make-webpack-config.spec.js

@@ -173,3 +173,16 @@ it('should not overwrite NODE_ENV', () => {
 	makeWebpackConfig(styleguideConfig, 'production');
 	expect(process.env.NODE_ENV).toBe(process$env$nodeEnv);
 });
+
+it('should pass specified mountPointId to HTML plugin', () => {
+	const result = makeWebpackConfig(
+		{
+			...styleguideConfig,
+			mountPointId: 'foo-bar',
+		},
+		'development'
+	);
+	expect(getClasses(result.plugins, 'MiniHtmlWebpackPlugin')[0].options.context.container).toEqual(
+		'foo-bar'
+	);
+});

scripts/make-webpack-config.js

@@ -27,7 +27,7 @@ module.exports = function(config, env) {
 	const htmlPluginOptions = {
 		context: Object.assign({}, templateContext, {
 			title: config.title,
-			container: 'rsg-root',
+			container: config.mountPointId,
 			trimWhitespace: true,
 		}),
 		template,

scripts/schemas/config.js

@@ -117,6 +117,10 @@ module.exports = {
 	logger: {
 		type: 'object',
 	},
+	mountPointId: {
+		type: 'string',
+		default: 'rsg-root',
+	},
 	pagePerSection: {
 		type: 'boolean',
 		default: false,

src/index.js

@@ -5,8 +5,6 @@ import ReactDOM from 'react-dom';
 import renderStyleguide from './utils/renderStyleguide';
 import { getParameterByName, hasInHash } from './utils/handleHash';
 
-const CONTAINER_ID = 'rsg-root';
-
 // Examples code revision to rerender only code examples (not the whole page) when code changes
 // eslint-disable-next-line no-unused-vars
 let codeRevision = 0;
@@ -38,7 +36,7 @@ const render = () => {
 	const styleguide = require('!!../loaders/styleguide-loader!./index.js');
 	ReactDOM.render(
 		renderStyleguide(styleguide, codeRevision),
-		document.getElementById(CONTAINER_ID)
+		document.getElementById(styleguide.config.mountPointId)
 	);
 };