From 4caba01767dd33ec625bad2429a10cb0000466b0 Mon Sep 17 00:00:00 2001 From: Shawn Erquhart Date: Mon, 19 Mar 2018 10:25:59 -0400 Subject: [PATCH] enable manual initialization via global flag --- src/bootstrap.js | 32 ++++++----- src/index.js | 64 +++++----------------- src/init.js | 7 --- webpack.dev.js | 1 - webpack.prod.js | 1 - website/site/content/docs/beta-features.md | 22 +++++++- 6 files changed, 51 insertions(+), 76 deletions(-) delete mode 100644 src/init.js diff --git a/src/bootstrap.js b/src/bootstrap.js index 1163c16f0361..a8134116688d 100644 --- a/src/bootstrap.js +++ b/src/bootstrap.js @@ -13,7 +13,7 @@ import 'EditorWidgets'; import 'MarkdownPlugins'; import './index.css'; -export const ROOT_ID = 'nc-root'; +const ROOT_ID = 'nc-root'; function bootstrap(opts = {}) { const { config } = opts; @@ -24,13 +24,24 @@ function bootstrap(opts = {}) { console.log(`Netlify CMS version ${NETLIFY_CMS_VERSION}`); /** - * Create mount element dynamically. + * Get DOM element where app will mount. */ - let el = document.getElementById(ROOT_ID); - if (!el) { - el = document.createElement('div'); - el.id = ROOT_ID; - document.body.appendChild(el); + function getRoot() { + /** + * Return existing root if found. + */ + const existingRoot = document.getElementById(ROOT_ID); + if (existingRoot) { + return existingRoot; + } + + /** + * If no existing root, create and return a new root. + */ + const newRoot = document.createElement('div'); + newRoot.id = ROOT_ID; + document.body.appendChild(newRoot); + return newRoot; } /** @@ -68,12 +79,7 @@ function bootstrap(opts = {}) { /** * Render application root. */ - render(, el); - - /** - * Return true to indicate bootstrap success to caller. - */ - return true; + render(, getRoot()); } export default bootstrap; diff --git a/src/index.js b/src/index.js index 0931ab6fbcc6..b3b8bde9d9b9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,63 +1,25 @@ -/** - * This module provides a self-initializing CMS instance with API hooks added to - * the `window` object. - */ import React from 'react'; -import bootstrap, { ROOT_ID } from './bootstrap'; +import bootstrap from './bootstrap'; import registry from 'Lib/registry'; import createReactClass from 'create-react-class'; -let initialized = false; - /** - * Allow init of the CMS. + * Load Netlify CMS automatically if `window.CMS_MANUAL_INIT` is set. */ -function init(opts = {}) { - if (initialized) { - console.error('Bootstrap attempted, but Netlify CMS is already initialized!'); - return; - } - initialized = bootstrap(opts); - return initialized; +if (!window.CMS_MANUAL_INIT) { + bootstrap(); +} else { + console.log('`window.CMS_MANUAL_INIT` flag set, skipping automatic initialization.'); } /** - * Allow reset of the CMS to allow render after unmount + * Add extension hooks to global scope. */ -function reset() { - initialized = false; +if (typeof window !== 'undefined') { + window.CMS = registry; + window.initCMS = bootstrap; + window.createClass = window.createClass || createReactClass; + window.h = window.h || React.createElement; } -const CMS = (function startApp() { - /** - * Load the app, bail if root element exists or no-auto element. - * Use
in your app if you are not persisting the root element. - * (in example: as a React Route) - */ - if (document.getElementById('no-auto') || document.getElementById(ROOT_ID)) { - console.log('CMS is running in manual mode. [using init() to initialize]'); - } else { - init(); - } - - /** - * Add extension hooks to global scope. - */ - const api = { init, reset, ...registry }; - if (typeof window !== 'undefined') { - window.CMS = api; - window.createClass = window.createClass || createReactClass; - window.h = window.h || React.createElement; - } - return api; -})() - -/** - * Export the registry for projects that import the CMS. - */ -export default CMS; - -/** - * Export the init, reset and registry standalone. (optional) - */ -export { init, reset, registry }; +export { registry as default, bootstrap as init }; diff --git a/src/init.js b/src/init.js deleted file mode 100644 index 1bf0f676ac6c..000000000000 --- a/src/init.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * This module provides manual initialization and registry hooks. - */ -import bootstrap from './bootstrap'; -import registry from 'Lib/registry'; - -export { bootstrap as init, registry }; diff --git a/webpack.dev.js b/webpack.dev.js index c458037fed90..3e145fd6a855 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -13,7 +13,6 @@ module.exports = merge.smart(require('./webpack.base.js'), { `webpack-dev-server/client?http://${ HOST }:${ PORT }/`, './index', ], - init: './init', }, output: { path: path.join(__dirname, 'dist'), diff --git a/webpack.prod.js b/webpack.prod.js index db665304521a..b198252462b6 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -8,7 +8,6 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = merge.smart(require('./webpack.base.js'), { entry: { cms: './index', - init: './init', }, output: { path: path.join(__dirname, 'dist'), diff --git a/website/site/content/docs/beta-features.md b/website/site/content/docs/beta-features.md index 4a1c1a7de04f..8c0c042b184b 100644 --- a/website/site/content/docs/beta-features.md +++ b/website/site/content/docs/beta-features.md @@ -7,15 +7,31 @@ We run new functionality in an open beta format from time to time. That means th **Use these features at your own risk.** +## Custom Mount Element +Netlify CMS always creates it's own DOM element for mounting the application, which means it always +takes over the entire page, and is generally inflexible if you're trying to do something creative, +like injecting it into a shared context. + +You can now provide your own element for Netlify CMS to mount in by setting the target element's ID +as `nc-root`. If Netlify CMS finds an element with this ID during initialization, it will mount +within that element instead of creating it's own. + ## Manual Initialization Netlify CMS can now be manually initialized, rather than automatically loading up the moment you import it. The whole point of this at the moment is to inject configuration into Netlify CMS before it loads, bypassing need for an actual config.yml. This is important, for example, when creating tight integrations with static site generators. -Injecting config is technically already possible by setting `window.CMS_CONFIG` before importing/requiring/running Netlify CMS, but most projects are modular and don't want to use globals, plus `window.CMS_CONFIG` is an internal, not technically supported, and provides no validation. Therefore, we'll focus on manual initialization via the npm package. +Injecting config is technically already possible by setting `window.CMS_CONFIG` before importing/requiring/running Netlify CMS, but most projects are modular and don't want to use globals, plus `window.CMS_CONFIG` is an internal, not technically supported, and provides no validation. Assuming you have the netlify-cms package installed to your project, manual initialization works like so: ```js -import { init, registry } from 'netlify-cms/dist/init' +// This global flag enables manual initialization. +window.CMS_MANUAL_INIT = true + +// Usage with import from npm package +import CMS, { init } from 'netlify-cms' + +// Usage with script tag +const { CMS, initCMS: init } = window /** * Initialize without passing in config - equivalent to just importing @@ -42,5 +58,5 @@ init({ }) // The registry works as expected, and can be used before or after init. -registry.registerPreviewTemplate(...); +CMS.registerPreviewTemplate(...); ```