Feat: Change template container ID to prevent clashes (#859)

Fixes #753.
styleguidist · Mar 21, 2018 · 3ebcc80 · 3ebcc80
1 parent 6055c2b
commit 3ebcc80
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/scripts/templates/index.html b/scripts/templates/index.html
@@ -6,6 +6,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	</head>
 	<body>
-		<div id="app"></div>
+		<div id="rsg-root"></div>
 	</body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -18,7 +18,17 @@ const scrollToOrigin = () => {
 const render = () => {
 	// eslint-disable-next-line import/no-unresolved
 	const styleguide = require('!!../loaders/styleguide-loader!./index.js');
-	ReactDOM.render(renderStyleguide(styleguide, codeRevision), document.getElementById('app'));
+	let containerId = 'rsg-root';
+
+	if (document.getElementById('app')) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			"The use of 'app' element id in the template is deprecated. Please, update your template file to use 'rsg-root' as the container id."
+		);
+		containerId = 'app';
+	}
+
+	ReactDOM.render(renderStyleguide(styleguide, codeRevision), document.getElementById(containerId));
 };
 
 window.addEventListener('hashchange', render);