Feat: Made the mounting point id configurable. #1050
Conversation
Codecov Report
|
|
Could you elaborate a bit on your use case? I'm not against adding this option, but it sounds a bit weird anyway ;-) |
|
We have an open source documentation tool (http://presidium.spandigital.net/) that serves .md files as static html pages. We have been working on a number of plugins to pull content into presidium (javadocs, swagger definitions etc) and we are currently adding a plugin for react-styleguidist. Each article in presidium lives in it's own .md file, which is then linked to the navigation and allows users to interact with it (e.g adding comments). In order to achieve this with RSG, so that it fits in nicely with presidium, our plugin runs RSG against each component separately, so that we can generate a separate bundle and .md per component. As a result, we need to embed multiple components on one page. |
docs/Configuration.md
Outdated
|
|
||
| Type: `string`, defaults: `rsg-root` | ||
|
|
||
| The id of the DOM element that React-Styleguidist mounts. |
There was a problem hiding this comment.
id → ID
React-Styleguidist → Styleguidist
scripts/make-webpack-config.js
Outdated
| @@ -27,7 +27,7 @@ module.exports = function(config, env) { | |||
| const htmlPluginOptions = { | |||
| context: Object.assign({}, templateContext, { | |||
| title: config.title, | |||
| container: 'rsg-root', | |||
| container: config.mountPointId || 'rsg-root', | |||
There was a problem hiding this comment.
You already have a default value from the config schema, so you don't need || here.
## New features * Add custom component display names ([#933](#933)) ``` module.exports = { updateDocs(docs) { if (docs && docs.displayName) { docs.visibleName = docs.displayName.toLowerCase() } return docs } } ``` * Made the mounting point id configurable. ([#1050](#1050)) ## Bug fixes * Cypress failing test ([#1077](#1077))
|
🎉 This PR is included in version 7.2.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
* Feat: Made the mounting point id configurable. * Removed default container name. * Removed nonsensical test.
## New features * Add custom component display names ([#933](styleguidist/react-styleguidist#933)) ``` module.exports = { updateDocs(docs) { if (docs && docs.displayName) { docs.visibleName = docs.displayName.toLowerCase() } return docs } } ``` * Made the mounting point id configurable. ([#1050](styleguidist/react-styleguidist#1050))
## New features * Add custom component display names ([#933](styleguidist/react-styleguidist#933)) ``` module.exports = { updateDocs(docs) { if (docs && docs.displayName) { docs.visibleName = docs.displayName.toLowerCase() } return docs } } ``` * Made the mounting point id configurable. ([#1050](styleguidist/react-styleguidist#1050)) ## Bug fixes * Cypress failing test ([#1077](styleguidist/react-styleguidist#1077))
By default RSG binds to a div with an id of
rsg-rootwith no way of overriding this. We needed to import multiple RSG bundle files into our work documentation site and as such needed to be able to specify the id of the element we wanted the bundles to bind to.In your
styleguide.config.jsyou can now specify an optionalmountPointIdto specify the id of the DOM element you want the app to bind to. It will default to the existingrsg-rootif not specified.I have tried to add some tests but might need some guidance here to make sure I am on the right track.