auto/manual init w/ single bundle, BYO root element 🎉 (#1173)

* ensure that application is only initialized once

* allow for single bundle init

* enable manual initialization via global flag
This commit is contained in:
Shawn Erquhart
2018-03-28 15:52:57 -04:00
committed by GitHub
parent 085c88e2b8
commit a19bc04c00
6 changed files with 49 additions and 30 deletions

View File

@ -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
@ -44,7 +60,7 @@ init({
})
// The registry works as expected, and can be used before or after init.
registry.registerPreviewTemplate(...);
CMS.registerPreviewTemplate(...);
```
## Raw CSS in `registerPreviewStyle`