playroom - npm Package Compare versions

Comparing version 0.9.0 to 0.9.1

examples/material-ui/package.json

examples/material-ui/playroom/FrameComponent.js

		import React from 'react';
		import { create } from 'jss';
		import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
		import JssProvider from 'react-jss/lib/JssProvider';
		import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';

		export default class FrameComponent extends React.Component {
		constructor(props) {
		super(props);

		this.generateClassName = createGenerateClassName();
		this.jss = create({
		...jssPreset(),
		insertionPoint: props.frameWindow.document.head
		});
		}

		render() {
		const { children } = this.props;

		return (
		<JssProvider jss={this.jss} generateClassName={this.generateClassName}>
		<MuiThemeProvider sheetsManager={new Map()}>
		{children}
		</MuiThemeProvider>
		</JssProvider>
		);
		return <MuiThemeProvider>{children}</MuiThemeProvider>;
		}
		}

examples/reakit/playroom/FrameComponent.js

		import React from 'react';
		import { StyleSheetManager } from 'styled-components';
		import { Provider } from 'reakit';
		import theme from 'reakit-theme-default';

		export default ({ children, frameWindow }) => (
		export default ({ children }) => (
		<Provider theme={theme}>
		<StyleSheetManager target={frameWindow.document.head}>
		<React.Fragment>
		<style>{'* { font-family: Helvetica, Arial, sans-serif; }'}</style>
		{children}
		</React.Fragment>
		</StyleSheetManager>
		<React.Fragment>
		<style>{'* { font-family: Helvetica, Arial, sans-serif; }'}</style>
		{children}
		</React.Fragment>
		</Provider>
		);

package.json

		{
		"name": "playroom",
		"version": "0.9.0",
		"version": "0.9.1",
		"description": "Design with code, powered by your own component library",
		@@ -85,6 +85,6 @@ "main": "index.js",
		"re-resizable": "^4.9.3",
		"react": "^16.5.2",
		"react": "^16.8.6",
		"react-codemirror": "^1.0.0",
		"react-docgen-typescript": "^1.12.2",
		"react-dom": "^16.5.2",
		"react-dom": "^16.8.6",
		"read-pkg-up": "^5.0.0",
		@@ -91,0 +91,0 @@ "scope-eval": "^1.0.0",

README.md

		@@ -121,18 +121,2 @@ <img src="images/logo.png?raw=true" alt="Playroom" title="Playroom" width="292" height="50" />

		## CSS-in-JS Support

		If you're using a CSS-in-JS library that generates styles dynamically, you might need to configure it to insert them into the iframe. For example, when using [styled-components](https://www.styled-components.com):

		```js
		import React from 'react';
		import { StyleSheetManager } from 'styled-components';
		import ThemeProvider from '../path/to/ThemeProvider';

		export default ({ theme, children, frameWindow }) => (
		<StyleSheetManager target={frameWindow.document.head}>
		<ThemeProvider theme={theme}>{children}</ThemeProvider>
		</StyleSheetManager>
		);
		```

		## TypeScript Support
		@@ -139,0 +123,0 @@

examples/material-ui/yarn.lock

Sorry, the diff of this file is not supported yet

yarn.lock

Sorry, the diff of this file is not supported yet

Worsened metrics