mirror of
https://github.com/c8r/x0.git
synced 2024-08-17 09:20:52 +03:00
Use webpack 3
This commit is contained in:
Brent Jackson
parent
fe06b88a32
commit
8889e9a60e
86
README.md
86
README.md
@ -87,68 +87,8 @@ App.getInitialProps = async ({
|
||||
|
||||
## CSS-in-JS
|
||||
|
||||
Use the `getInitialProps` static method to precompile CSS from css-in-js libraries such as [styled-components][sc]
|
||||
|
||||
```jsx
|
||||
// styled-components
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const Heading = styled.h1`
|
||||
color: tomato;
|
||||
`
|
||||
|
||||
const App = props => [
|
||||
props.styles && (
|
||||
<head
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: props.styles
|
||||
}}
|
||||
/>
|
||||
),
|
||||
<div>
|
||||
<Heading>Hello</Heading>
|
||||
</div>
|
||||
]
|
||||
|
||||
App.getInitialProps = async ({
|
||||
Component,
|
||||
props
|
||||
}) => {
|
||||
const { ServerStyleSheet } = require('styled-components')
|
||||
const sheet = new ServerStyleSheet()
|
||||
sheet.collectStyles(<Component {...props} />)
|
||||
const styles = sheet.getStyleTags()
|
||||
return { styles }
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
// CXS
|
||||
import React from 'react'
|
||||
import cxs from 'cxs/component'
|
||||
|
||||
const Heading = cxs('h1')({
|
||||
color: 'tomato'
|
||||
})
|
||||
|
||||
const App = props => (
|
||||
<div>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: props.css
|
||||
}}
|
||||
/>
|
||||
<Heading>Hello</Heading>
|
||||
</div>
|
||||
)
|
||||
|
||||
App.getInitialProps = async () => {
|
||||
const css = cxs.css()
|
||||
return { css }
|
||||
}
|
||||
```
|
||||
|
||||
x0 supports server-side rendering for styled-components, glamor, and glamorous.
|
||||
To enable CSS rendering for static output, use the `cssLibrary` option
|
||||
|
||||
## Head content
|
||||
|
||||
@ -157,27 +97,16 @@ Browsers should handle this correctly since the `<head>` and `<body>` elements a
|
||||
|
||||
```jsx
|
||||
const App = props => (
|
||||
<div>
|
||||
<React.Fragment>
|
||||
<title>Hello x0</title>
|
||||
<style dangerouslySetInnerHTML={{
|
||||
__html: 'body{font-family:-apple-system,BlinkMacSystemFont,sans-serif}'
|
||||
}} />
|
||||
<h1>Hello x0</h1>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
```
|
||||
|
||||
Returning an array of elements also works.
|
||||
|
||||
```jsx
|
||||
const App = props => [
|
||||
<title>Hello</title>,
|
||||
<div>
|
||||
<h1>Hello</h1>
|
||||
</div>
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
## Configuration
|
||||
|
||||
@ -207,6 +136,7 @@ To render multiple pages and use routing, add a `routes` array to the `package.j
|
||||
x0 static src/App.js --out-dir site
|
||||
```
|
||||
|
||||
<!--
|
||||
For easier integration with [react-router][react-router], use the x0 Router component, which handles universal rendering.
|
||||
|
||||
```jsx
|
||||
@ -237,7 +167,11 @@ const App = props => (
|
||||
)
|
||||
```
|
||||
|
||||
MIT License
|
||||
-->
|
||||
|
||||
[Made by Compositor](https://compositor.io/)
|
||||
|
|
||||
[MIT License](LICENSE.md)
|
||||
|
||||
[nextjs]: https://github.com/zeit/next.js
|
||||
[react-router]: https://github.com/ReactTraining/react-router
|
||||
|
||||
23
docs/App.js
23
docs/App.js
@ -18,10 +18,6 @@ import Btn from './Btn'
|
||||
import BtnOutline from './BtnOutline'
|
||||
import Tweet from './Tweet'
|
||||
|
||||
// testing
|
||||
import styled from 'styled-components'
|
||||
const Hello = styled.h2`color:tomato;`
|
||||
|
||||
const App = connect(props => <React.Fragment>
|
||||
<head>
|
||||
<title>{props.title}</title>
|
||||
@ -29,7 +25,7 @@ const App = connect(props => <React.Fragment>
|
||||
<meta name='twitter:card' content='summary' />
|
||||
<meta name='twitter:site' content='@getcompositor' />
|
||||
<meta name='twitter:title' content='Compositor x0' />
|
||||
<meta name='twitter:title' content={props.description} />
|
||||
<meta name='twitter:description' content={props.description} />
|
||||
<meta name='twitter:image' content='https://compositor.io/logo/dist/compositor-black.png' />
|
||||
<Style />
|
||||
</head>
|
||||
@ -57,23 +53,11 @@ const App = connect(props => <React.Fragment>
|
||||
<Tweet />
|
||||
</Flex>
|
||||
</nav>
|
||||
|
||||
<Hello>Hello styled-components</Hello>
|
||||
|
||||
<header>
|
||||
<Box pt={4} pb={3}>
|
||||
<Title>x0 {props.count}</Title>
|
||||
<button
|
||||
children='+'
|
||||
onClick={e => {
|
||||
props.update(s => ({ count: s.count + 1 }))
|
||||
}}
|
||||
/>
|
||||
<Title>x0</Title>
|
||||
<Text fontWeight='600' f={3} mb={2}>{pkg.description}</Text>
|
||||
<Mono f={0}>v{pkg.version}</Mono>
|
||||
{props.tracks && (
|
||||
<pre children={JSON.stringify(props.tracks)}/>
|
||||
)}
|
||||
</Box>
|
||||
</header>
|
||||
<main>
|
||||
@ -112,9 +96,6 @@ const App = connect(props => <React.Fragment>
|
||||
<Btn mr={2} href='https://github.com/c8r/x0'>
|
||||
Documentation
|
||||
</Btn>
|
||||
<BtnOutline href='https://compositor.io/#sign-up'>
|
||||
Sign Up
|
||||
</BtnOutline>
|
||||
</Box>
|
||||
</section>
|
||||
<footer>
|
||||
|
||||
16
docs/index.html
Normal file
16
docs/index.html
Normal file
File diff suppressed because one or more lines are too long
@ -1,19 +0,0 @@
|
||||
import React from 'react'
|
||||
import { createProvider } from 'refunk'
|
||||
|
||||
const dec = state => ({ count: state.count - 1 })
|
||||
const inc = state => ({ count: state.count + 1 })
|
||||
|
||||
const App = props => (
|
||||
<div>
|
||||
<h1>hi Hello {props.count}</h1>
|
||||
<button onClick={e => props.update(dec)}>
|
||||
-
|
||||
</button>
|
||||
<button onClick={e => props.update(inc)}>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default createProvider()(App)
|
||||
@ -1,19 +0,0 @@
|
||||
|
||||
# x0 custom HTML example
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
## Dev Server
|
||||
|
||||
```sh
|
||||
npm start
|
||||
```
|
||||
|
||||
## Static Build
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Html } from '@compositor/x0'
|
||||
|
||||
const css = `*{box-sizing:border-box}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;margin:0}`
|
||||
|
||||
const Root = props => (
|
||||
<Html
|
||||
{...props}
|
||||
title='x0 HTML'
|
||||
css={css}
|
||||
/>
|
||||
)
|
||||
|
||||
export default Root
|
||||
@ -1,18 +0,0 @@
|
||||
{
|
||||
"name": "x0-html-example",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "x0 dev App.js -o",
|
||||
"build": "x0 build App.js --html Root.js --out-dir ./site",
|
||||
"test": "x0 build App.js --html Root.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"refunk": "^1.0.0-2",
|
||||
"@compositor/x0": "^1.0.9"
|
||||
},
|
||||
"x0": {
|
||||
"title": "x0 HTML Example",
|
||||
"description": "Just a simple example",
|
||||
"count": 16
|
||||
}
|
||||
}
|
||||
@ -3,8 +3,7 @@ const webpack = require('webpack')
|
||||
|
||||
// dev webpack config
|
||||
module.exports = {
|
||||
mode: 'development',
|
||||
// devtool: 'eval',
|
||||
// mode: 'development',
|
||||
devtool: 'source-map',
|
||||
entry: [
|
||||
path.join(__dirname, './entry'),
|
||||
|
||||
@ -3,7 +3,7 @@ const webpack = require('webpack')
|
||||
const MinifyPlugin = require('babel-minify-webpack-plugin')
|
||||
|
||||
const config = {
|
||||
mode: 'production',
|
||||
// mode: 'production',
|
||||
entry: [
|
||||
path.join(__dirname, './entry')
|
||||
],
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
const React = require('react')
|
||||
const { renderToString } = require('react-dom/server')
|
||||
const SC = require('styled-components')
|
||||
const glamor = require('glamor/server')
|
||||
|
||||
const getSC = (Component, props) => {
|
||||
const SC = require('styled-components')
|
||||
const sheet = new SC.ServerStyleSheet()
|
||||
renderToString(
|
||||
sheet.collectStyles(
|
||||
@ -15,6 +14,7 @@ const getSC = (Component, props) => {
|
||||
}
|
||||
|
||||
const getGlamor = (Component, props) => {
|
||||
const glamor = require('glamor/server')
|
||||
const { css } = glamor.renderStatic(() => (
|
||||
renderToString(
|
||||
React.createElement(Component, props)
|
||||
@ -24,18 +24,10 @@ const getGlamor = (Component, props) => {
|
||||
return tag
|
||||
}
|
||||
|
||||
const getEmotion = (Component, props) => {
|
||||
}
|
||||
|
||||
const getFela = (Component, props) => {
|
||||
}
|
||||
|
||||
const libraries = {
|
||||
'styled-components': getSC,
|
||||
glamorous: getGlamor,
|
||||
glamor: getGlamor,
|
||||
// emotion: getEmotion,
|
||||
// fela: getFela,
|
||||
}
|
||||
|
||||
const noop = () => ''
|
||||
|
||||
@ -14,7 +14,6 @@ const path = require('path')
|
||||
const React = require('react')
|
||||
const { renderToString, renderToStaticMarkup } = require('react-dom/server')
|
||||
const client = require('./client')
|
||||
|
||||
const getCSS = require('./getCSS')
|
||||
|
||||
const createHTML = ({
|
||||
|
||||
11
package.json
11
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@compositor/x0",
|
||||
"version": "3.0.0-6",
|
||||
"version": "3.0.0-7",
|
||||
"description": "Zero-config React development environment and static site generator",
|
||||
"main": "index.js",
|
||||
"bin": {
|
||||
@ -9,7 +9,7 @@
|
||||
"scripts": {
|
||||
"start": "./bin/cli.js dev docs/App.js -op 8888",
|
||||
"build": "./bin/cli.js build docs/App.js --static -d docs",
|
||||
"client": "./bin/cli.js build docs/App.js -d docs --cssLibrary='styled-components'",
|
||||
"client": "./bin/cli.js build docs/App.js -d docs",
|
||||
"test": "nyc ava",
|
||||
"cover": "nyc report --reporter=html --reporter=lcov"
|
||||
},
|
||||
@ -27,8 +27,6 @@
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"chalk": "^2.1.0",
|
||||
"emotion": "^8.0.12",
|
||||
"fela": "^6.1.0",
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.11.0",
|
||||
"meow": "^3.7.0",
|
||||
@ -37,18 +35,15 @@
|
||||
"pkg-up": "^2.0.0",
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0",
|
||||
"react-emotion": "^8.0.12",
|
||||
"react-fela": "^6.1.1",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"read-pkg-up": "^2.0.0",
|
||||
"update-notifier": "^2.2.0",
|
||||
"webpack": "^4.0.0-alpha.0",
|
||||
"webpack": "^3.10.0",
|
||||
"webpack-dev-server": "^2.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@compositor/logo": "^1.2.2",
|
||||
"ava": "^0.24.0",
|
||||
"cxs": "^6.1.0",
|
||||
"isomorphic-fetch": "^2.2.1",
|
||||
"nano-style": "^1.0.0-20",
|
||||
"nyc": "^11.2.1",
|
||||
|
||||
@ -18,6 +18,7 @@ Generated by [AVA](https://ava.li).
|
||||
|
||||
`<!DOCTYPE html>␊
|
||||
<meta charset='utf-8'>␊
|
||||
␊
|
||||
<h1>Hello</h1>␊
|
||||
␊
|
||||
␊
|
||||
@ -29,6 +30,7 @@ Generated by [AVA](https://ava.li).
|
||||
|
||||
`<!DOCTYPE html>␊
|
||||
<meta charset='utf-8'>␊
|
||||
␊
|
||||
<h1>Hello</h1>␊
|
||||
␊
|
||||
␊
|
||||
@ -40,6 +42,7 @@ Generated by [AVA](https://ava.li).
|
||||
|
||||
`<!DOCTYPE html>␊
|
||||
<meta charset='utf-8'>␊
|
||||
␊
|
||||
<h1 data-reactroot="">Hello</h1>␊
|
||||
<script id='__initial-props__' type='application/json'>{"outDir":"test/output"}</script>␊
|
||||
<script src='/bundle.js'></script>␊
|
||||
|
||||
Binary file not shown.
Loading…
Reference in New Issue
Block a user