提交 003a6746 编写于 作者: S Sergey Petushkov

Add webpack, webpack-dev-server; Add sandbox

上级 df0d9b0c
......@@ -3,5 +3,6 @@ src/vendor/**/*.js
src/test/utils.js
*.test.js
example/
sandbox/
flow-typed/**/*.js
lib/
......@@ -28,7 +28,7 @@
"typescript": "tsc --project ./typings/tests",
"prepublish": "npm run build",
"lint-staged": "lint-staged",
"dev": "babel-node example/devServer.js"
"dev": "webpack-dev-server --config webpack.config.dev.js"
},
"repository": {
"type": "git",
......@@ -77,7 +77,7 @@
"babel-cli": "^6.22.2",
"babel-core": "^6.17.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-loader": "^7.1.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-flow-react-proptypes": "^2.1.3",
......@@ -110,6 +110,7 @@
"pre-commit": "^1.2.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-live": "^1.7.1",
"react-native": "^0.39.2",
"react-primitives": "^0.4.2",
"react-test-renderer": "^15.6.1",
......@@ -125,7 +126,9 @@
"rollup-plugin-uglify": "^1.0.1",
"rollup-plugin-visualizer": "^0.1.5",
"tslint": "^4.3.1",
"typescript": "^2.4.1"
"typescript": "^2.4.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
},
"peerDependencies": {
"react": ">= 0.14.0 < 17.0.0-0"
......
import React, { Component } from 'react';
import { render } from 'react-dom';
import styled, { injectGlobal, css, keyframes } from 'styled-components';
import {
LiveProvider as _LiveProvider,
LiveEditor as _LiveEditor,
LiveError as _LiveError,
LivePreview as _LivePreview,
} from 'react-live';
injectGlobal`
body {
font-size: 18px;
line-height: 1.2;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-style: normal;
padding: 0;
margin: 0;
color: rgb(46, 68, 78);
-webkit-font-smoothing: subpixel-antialiased;
}
button {
font-size: 18px;
}
* {
box-sizing: border-box;
}
`;
const code = `const Button = styled.button\`
border-radius: 3px;
padding: 0.25em 1em;
margin: 0 1em;
background: transparent;
color: palevioletred;
border: 2px solid palevioletred;
\${props => props.primary && css\`
background: palevioletred;
color: white;
\`}
\`;
render(
<div>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
</div>
);`;
const Body = styled.main`
width: 100vw;
min-height: 100vh;
background-image: linear-gradient(20deg, #e6356f, #69e7f7);
padding: 0 20px;
`;
const Heading = styled.div`
padding-top: 30px;
text-align: center;
`;
const Title = styled.h1``;
const Subtitle = styled.p``;
const Content = styled.div`
width: 100%;
max-width: 860px;
margin: 0 auto;
margin-top: 60px;
`;
const Code = styled.span`
white-space: pre;
vertical-align: middle;
font-family: monospace;
display: inline-block;
background-color: #1e1f27;
color: #c5c8c6;
padding: 0.1em 0.3em 0.15em;
font-size: 0.8em;
border-radius: 0.2em;
`;
const LiveProvider = styled(_LiveProvider)`
display: flex;
flex-wrap: wrap;
border-radius: 3px;
overflow: hidden;
box-shadow: 3px 3px 18px rgba(66, 22, 93, 0.3);
`;
const LiveBlock = styled.div`
flex-basis: 50%;
width: 50%;
max-width: 50%;
padding: 0.5rem;
@media (max-width: 40.625em) {
flex-basis: auto;
width: 100%;
max-width: 100%;
}
`;
const LiveEditor = LiveBlock.withComponent(_LiveEditor).extend`
overflow: auto;
`;
const LivePreview = LiveBlock.withComponent(_LivePreview).extend`
background-color: white;
`;
const LiveError = styled(_LiveError)`
flex-basis: 100%;
background: #ff5555;
color: #fff;
padding: 0.5rem;
`;
const App = () => (
<Body>
<Heading>
<Title>
Interactive sandbox for <Code>styled-components</Code>
</Title>
<Subtitle>
Make changes to the <Code>./src/**</Code> and see them take effect in
realtime!
</Subtitle>
</Heading>
<Content>
<LiveProvider code={code} scope={{ styled, css, keyframes }} noInline>
<LiveEditor />
<LivePreview />
<LiveError />
</LiveProvider>
</Content>
</Body>
);
render(<App />, document.querySelector('#react-root'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>styled-components</title>
<link rel="icon" type="image/png" href="https://styled-components.com/static/favicon.png">
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="react-root"></div>
<script src="./bundle.js"></script>
</body>
</html>
\ No newline at end of file
/* eslint-disable flowtype/require-valid-file-annotation */
const webpack = require('webpack')
const path = require('path')
const cwd = (...args) => path.join(process.cwd(), ...args)
module.exports = {
// entry file for out sandbox
entry: cwd('sandbox', 'index.js'),
// cheap-module-source-map generates sourcemaps with original source
// more info: https://webpack.js.org/configuration/devtool/
devtool: 'cheap-module-source-map',
devServer: {
compress: true,
// static content for webpack-dev-server
contentBase: cwd('sandbox', 'public'),
// by default webpack-dev-server doesn't watch static content
watchContentBase: true,
publicPath: '/',
// allows all 404 routes to redirect to index.html
historyApiFallback: true,
},
// provide React, ReactDOM as external dependency
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
output: {
// this would not be actually be saved on disk when used with webpack-dev-server
path: cwd('build'),
filename: 'bundle.js',
publicPath: '/',
},
resolve: {
alias: {
// allows to use absolute import for styled-components in the sandbox
'styled-components': cwd('src'),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: [cwd('sandbox'), cwd('src')],
loader: 'babel-loader',
},
],
},
plugins: [
new webpack.EnvironmentPlugin({
// this will provide default value for NODE_ENV, unless defined otherwise
// more info: https://webpack.js.org/plugins/environment-plugin/#usage-with-default-values
NODE_ENV: 'development',
}),
],
performance: {
// don't need those in development sandbox
hints: false,
},
}
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册