RSG puts components into global namespace

[n1313]

All components that are loaded into the styleguide are put into the global namespace, so I think it is possible to accidentally overwrite properties of window with an unfortunately named component.

[sapegin]

A good solution would be to extend code that we use for the context option. But it’d be tricky ;-)

[n1313]

For historical purposes here's my initial stab at this issue. It works but is a bit too dirty of a hack.

[rcline]

@n1313 That really doesn't look that hacky to me. Is there any side effects I am not seeing?

I would love to see this get added! (Currently having to rename my Image component so that it doesn't conflict with window.Image 😞 )

[sapegin]

@rcline Doesn’t look super hacky to me now, and I’m sure we can avoid a global variable here. Feel free to send a pull request for that ;-)

[rcline]

@sapegin It looks like this code has been changed/moved.

react-styleguidist/src/rsg-components/Preview/Preview.js

Lines 54 to 56 in d07e825

	with (stateWrapper) {
	return eval(${JSON.stringify(compiledCode)})
	}

Any direction on where to look to make a similar change? (passing in namespaced components to a with () context call)

[sapegin]

Not sure which code has been moved where ;-)

I think the right place to do it is here:

react-styleguidist/loaders/examples-loader.js

Lines 22 to 23 in 916e173

	// Append React to context modules, since it’s required for JSX
	const fullContext = Object.assign({ React: 'react' }, config.context);

But it’ll require some experiments, you’ll need to move props-loader call there I think:

react-styleguidist/loaders/utils/processComponent.js

Line 35 in fc6a3ba

props: requireIt(`!!${propsLoader}!${filepath}`),

[kopax]

I am also having that issues, I'm not sure if I understand the fix, did anybody tried @sapegin solution?

[linde12]

Yup. This makes things very difficult when your library has dependencies to third party code. E.g. in my specific case i have a dependency to a component which in turn depends on a component named Object resulting in React saying "Object.defineProperty is not a function"

[sapegin]

Feel free to send a pull request with a fix, commenting that you also have a known issue won't help anyone.