Use containerQuerySelector renderer config in Cosmos Next (#941)

Author: ovidiuch

packages/react-cosmos-shared2/src/dom.ts

@@ -1,21 +1,38 @@
-const CONTAINER_ID = 'root';
+export function getDomContainer(querySelector?: string) {
+  if (!querySelector) {
+    return getFallbackDomContainer();
+  }
+
+  const existingContainer = document.querySelector(querySelector);
+  if (!existingContainer) {
+    // TODO: Move this function outside of the shared package. It contains
+    // renderer-specific knowledge. Keep createDomContainer to reuse in
+    // the playground package.
+    console.warn(
+      `Query selector "${querySelector}" doesn't match any existing DOM element. ` +
+        `Are you using a custom HTML template? ` +
+        `Add an element matching "${querySelector}" to your template or change the containerQuerySelector setting.`
+    );
+    return getFallbackDomContainer();
+  }
 
-export function getDomContainer() {
-  return document.getElementById(CONTAINER_ID) || createDomContainer();
+  return existingContainer;
+}
+
+function getFallbackDomContainer() {
+  return document.querySelector('#root') || createDomContainer();
 }
 
 function createDomContainer() {
   const { body } = document;
-
   if (!body) {
     throw new Error(
       `Can't create DOM container because document.body is missing`
     );
   }
 
   const container = document.createElement('div');
-  container.setAttribute('id', CONTAINER_ID);
-
+  container.setAttribute('id', 'root');
   body.appendChild(container);
 
   return container;

packages/react-cosmos/src/client/next/index.js

@@ -3,13 +3,15 @@
 import { getRendererId } from './rendererId';
 import { initErrorOverlay, dismissErrorOverlay } from './errorOverlay';
 import { initGlobalErrorHandler } from './globalErrorHandler';
+import { rendererConfig } from './shared';
 
 const rendererId = getRendererId();
 
 function mount() {
   // Use dynamic import to load updated modules upon hot reloading
   require('./mount').mount({
     rendererId,
+    rendererConfig,
     onFixtureChange: dismissErrorOverlay
   });
 }

packages/react-cosmos/src/client/next/mount.js

@@ -7,17 +7,25 @@ import { PostMessage, WebSockets, FixtureConnect } from 'react-cosmos-fixture';
 import { fixtures, decorators } from './userModules';
 import { ErrorCatch } from './ErrorCatch';
 
+import type { RendererConfig } from './shared';
 import type { RendererId } from 'react-cosmos-shared2/renderer';
 
-type Opts = {
+type RendererOptions = {
   rendererId: RendererId,
+  rendererConfig: RendererConfig,
   onFixtureChange?: () => mixed
 };
 
-export function mount(opts: Opts) {
+export function mount({
+  rendererId,
+  rendererConfig,
+  onFixtureChange
+}: RendererOptions) {
   render(
-    wrapSuitableAdaptor(createFixtureConnectRenderCb(opts)),
-    getDomContainer()
+    wrapSuitableAdaptor(
+      createFixtureConnectRenderCb(rendererId, onFixtureChange)
+    ),
+    getDomContainer(rendererConfig.containerQuerySelector)
   );
 }
 
@@ -29,7 +37,10 @@ function wrapSuitableAdaptor(element) {
   return <WebSockets url={getWebSocketsUrl()}>{element}</WebSockets>;
 }
 
-function createFixtureConnectRenderCb({ rendererId, onFixtureChange }: Opts) {
+function createFixtureConnectRenderCb(
+  rendererId: RendererId,
+  onFixtureChange?: () => mixed
+) {
   return ({ subscribe, unsubscribe, postMessage }) => (
     <FixtureConnect
       rendererId={rendererId}

packages/react-cosmos/src/client/next/shared.js

@@ -0,0 +1,9 @@
+// @flow
+
+export type RendererConfig = {
+  containerQuerySelector?: string
+};
+
+declare var COSMOS_CONFIG: RendererConfig;
+
+export const rendererConfig: RendererConfig = COSMOS_CONFIG;