Feat: Do not put component into global namespace

.eslintrc

@@ -17,7 +17,7 @@
     }
   },
   "rules": {
-    "no-invalid-this": 0,
+    "valid-jsdoc": 0,
     "compat/compat": "error",
     "import/no-unresolved": ["error", {
       "commonjs": true,

docs/Documenting.md

@@ -146,7 +146,7 @@ MyComponent.propTypes = {
 
 ## Defining custom component names
 
-Use @visibleName JSDoc tag to define component names that are used in the Styleguidist UI:
+Use `@visibleName` JSDoc tag to define component names that are used in the Styleguidist UI:
 
 ```javascript
 /**
@@ -221,20 +221,29 @@ class Button extends React.Component {
 
 ## Writing code examples
 
-Code examples in Markdown use ES6+JSX syntax. All components covered by the style guide can be used in all examples:
+Code examples in Markdown use ES6+JSX syntax. You can use the current component without explicitly importing it:
 
-```jsx
-<Panel>
+````jsx
+// ```jsx inside Button/Readme.md or Button.md
+<Button>Push Me</Button>
+````
+
+> **Note:** Styleguidist uses [Bublé](https://buble.surge.sh/guide/) to run ES6 code on the frontend, it supports [most of the ES6 features](https://buble.surge.sh/guide/#unsupported-features).
+
+To use other components, you need to explicitly `import` them:
+
+````jsx
+// ```jsx inside Panel/Readme.md or Panel.md
+import Button from '../Button'
+;<Panel>
   <p>
     Using the Button component in the example of the Panel component:
   </p>
   <Button>Push Me</Button>
 </Panel>
-```
-
-> **Note:** Styleguidist uses [Bublé](https://buble.surge.sh/guide/) to run ES6 code on the frontend, it supports [most of the ES6 features](https://buble.surge.sh/guide/#unsupported-features).
+````
 
-You can also `import` other modules (like mock data for unit tests):
+You can also `import` other modules, like mock data:
 
 ````jsx
 // ```jsx inside Markdown
@@ -246,7 +255,8 @@ import mockData from './mocks'
 
 Each example has its own state that you can access as `state` variable and change with `setState()` function. Default state is `{}` and can be set with `initialState`.
 
-```jsx
+````jsx
+// ```jsx inside Markdown
 initialState = { isOpen: false }
 ;<div>
   <button onClick={() => setState({ isOpen: true })}>Open</button>
@@ -255,11 +265,12 @@ initialState = { isOpen: false }
     <button onClick={() => setState({ isOpen: false })}>Close</button>
   </Modal>
 </div>
-```
+````
 
 `initialState`, `state` and `setState()` helpers are good to show components in different states, but to let users copy-paste your example code without modifications into their React app you may want to use `React.Component` instead. We can rewrite the example above like this:
 
-```jsx
+````jsx
+// ```jsx inside Markdown
 class ModalExample extends React.Component {
   constructor() {
     super()
@@ -286,7 +297,7 @@ class ModalExample extends React.Component {
   }
 }
 ;<ModalExample />
-```
+````
 
 > **Note:** If you need a more complex demo it’s often a good idea to define it in a separate JavaScript file and `import` it in Markdown.
 

examples/basic/src/components/Button/Readme.md

@@ -44,6 +44,22 @@ Fenced blocks with other languages are rendered as highlighted code:
 <h1>Hello world</h1>
 ```
 
+Current component (like `Button` in this example) is always accessible by its name in the example code. If you want to use other components, you need to explicitly import them:
+
+```jsx
+import Placeholder from '../Placeholder'
+<Button><Placeholder /></Button>
+```
+
+Or you can explicitly import everything:
+
+```jsx
+import React from 'react'
+import Button from '../Button'
+import Placeholder from '../Placeholder'
+<Button><Placeholder /></Button>
+```
+
 Each example has its own state that you can access at the `state` variable and change with the `setState` function. Default state is `{}`:
 
 ```jsx

examples/basic/src/components/CounterButton/Readme.md

@@ -1,4 +1,5 @@
 ```js
+import Button from '../Button'
 let ref
 ;<div>
   <CounterButton ref={r => (ref = r)} />

examples/sections/docs/Two.md

@@ -1,3 +1,8 @@
 That big pink button again:
 
-    <Button size="large" color="deeppink">Lick Me</Button>
+```jsx
+import Button from '../src/components/Button'
+;<Button size="large" color="deeppink">
+  Lick Me
+</Button>
+```

examples/sections/src/components/Placeholder/Example.md

@@ -1,5 +1,6 @@
 Extra example file linked via `@example` doclet:
 
 ```jsx
+import Placeholder from '../Placeholder'
 <Placeholder type="bear" />
 ```

package.json

@@ -69,6 +69,7 @@
     "prismjs": "^1.15.0",
     "prop-types": "^15.6.2",
     "q-i": "^2.0.1",
+    "querystringify": "^2.0.0",
     "react-dev-utils": "^5.0.1",
     "react-docgen": "3.0.0-beta12",
     "react-docgen-annotation-resolver": "^1.0.0",
@@ -113,7 +114,6 @@
     "eslint": "^5.4.0",
     "eslint-config-tamia": "^6.0.2",
     "eslint-plugin-compat": "^2.5.1",
-    "eslint-plugin-es5": "^1.3.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-react": "^7.11.1",
     "file-loader": "^1.1.11",

src/client/rsg-components/Preview/Preview.js

@@ -5,8 +5,6 @@ import PlaygroundError from 'rsg-components/PlaygroundError';
 
 import ReactExample from '../ReactExample';
 
-/* eslint-disable no-invalid-this */
-
 const Fragment = React.Fragment ? React.Fragment : 'div';
 
 export default class Preview extends Component {

src/client/utils/__tests__/renderStyleguide.spec.js

@@ -48,18 +48,6 @@ describe('renderStyleguide', () => {
 		expect(result).toMatchSnapshot();
 	});
 
-	it('should globalize all components', () => {
-		renderStyleguide(styleguide, codeRevision, location, doc, history);
-		expect(global.Button).toBe('ButtonModule');
-		expect(global.Image).toBe('ImageModule');
-	});
-
-	it('should globalize all components in isolated mode', () => {
-		renderStyleguide(styleguide, codeRevision, { hash: '#!/Button' }, doc, history);
-		expect(global.Button).toBe('ButtonModule');
-		expect(global.Image).toBe('ImageModule');
-	});
-
 	it('should change document title', () => {
 		const title = jest.fn();
 		const location = { hash: '' };

src/client/utils/renderStyleguide.js

@@ -3,7 +3,6 @@ import slots from 'rsg-components/slots';
 import StyleGuide from 'rsg-components/StyleGuide';
 import getPageTitle from './getPageTitle';
 import getRouteData from './getRouteData';
-import globalizeComponents from './globalizeComponents';
 import processSections from './processSections';
 
 /**
@@ -23,10 +22,6 @@ export default function renderStyleguide(
 ) {
 	const allSections = processSections(styleguide.sections);
 
-	// Globalize all components, not just ones we see on the screen, to make
-	// all components accessible to all examples
-	globalizeComponents(allSections);
-
 	const { title, pagePerSection } = styleguide.config;
 	const { sections, displayMode } = getRouteData(allSections, loc.hash, pagePerSection);
 

src/loaders/.eslintrc

@@ -1,9 +1,6 @@
 {
 	"extends": "tamia",
-	"parserOptions": {
-		"sourceType": "script"
-	},
 	"rules": {
-		"no-invalid-this": 0
+		"valid-jsdoc": 0
 	}
 }