diff --git a/README.md b/README.md index c8d6e4b..a1be3d1 100644 --- a/README.md +++ b/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 && ( - - ), -
- Hello -
-] - -App.getInitialProps = async ({ - Component, - props -}) => { - const { ServerStyleSheet } = require('styled-components') - const sheet = new ServerStyleSheet() - sheet.collectStyles() - 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 => ( -
-

x0

Zero-config React development environment and static site generator
v3.0.0-7
npm install @compositor/x0
Features
Isolated development environment
Static site generator
Hot reloading
Works with virtually any React component
No convoluted APIs to learn
No boilerplate required
Routing with react-router
Works with CSS-in-JS libraries like styled-components
Support for async data fetching
Get Started
Read the docs and get started on GitHub or sign up for updates.
Documentation
© 2017 Compositor, Inc.
+ + diff --git a/examples/custom-html/App.js b/examples/custom-html/App.js deleted file mode 100644 index 3611b3a..0000000 --- a/examples/custom-html/App.js +++ /dev/null @@ -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 => ( -
-

hi Hello {props.count}

- - -
-) - -export default createProvider()(App) diff --git a/examples/custom-html/README.md b/examples/custom-html/README.md deleted file mode 100644 index ebdf856..0000000 --- a/examples/custom-html/README.md +++ /dev/null @@ -1,19 +0,0 @@ - -# x0 custom HTML example - -```sh -npm install -``` - -## Dev Server - -```sh -npm start -``` - -## Static Build - -```sh -npm run build -``` - diff --git a/examples/custom-html/Root.js b/examples/custom-html/Root.js deleted file mode 100644 index 239e8ab..0000000 --- a/examples/custom-html/Root.js +++ /dev/null @@ -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 => ( - -) - -export default Root diff --git a/examples/custom-html/package.json b/examples/custom-html/package.json deleted file mode 100644 index fd99aa7..0000000 --- a/examples/custom-html/package.json +++ /dev/null @@ -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 - } -} diff --git a/lib/dev/config.js b/lib/dev/config.js index 64e92c0..b8474fc 100644 --- a/lib/dev/config.js +++ b/lib/dev/config.js @@ -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'), diff --git a/lib/static/client.js b/lib/static/client.js index a80f424..e3ff144 100644 --- a/lib/static/client.js +++ b/lib/static/client.js @@ -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') ], diff --git a/lib/static/getCSS.js b/lib/static/getCSS.js index 185859e..5a1cfa7 100644 --- a/lib/static/getCSS.js +++ b/lib/static/getCSS.js @@ -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 = () => '' diff --git a/lib/static/index.js b/lib/static/index.js index 55245e8..d96267b 100644 --- a/lib/static/index.js +++ b/lib/static/index.js @@ -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 = ({ diff --git a/package.json b/package.json index db9ccfa..6ec5ac7 100644 --- a/package.json +++ b/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", diff --git a/test/snapshots/static.js.md b/test/snapshots/static.js.md index e6945de..8ff5ad4 100644 --- a/test/snapshots/static.js.md +++ b/test/snapshots/static.js.md @@ -18,6 +18,7 @@ Generated by [AVA](https://ava.li). `␊ ␊ + ␊

Hello

␊ ␊ ␊ @@ -29,6 +30,7 @@ Generated by [AVA](https://ava.li). `␊ ␊ + ␊

Hello

␊ ␊ ␊ @@ -40,6 +42,7 @@ Generated by [AVA](https://ava.li). `␊ ␊ + ␊

Hello

␊ ␊ ␊ diff --git a/test/snapshots/static.js.snap b/test/snapshots/static.js.snap index 87e68e6..a52a7e9 100644 Binary files a/test/snapshots/static.js.snap and b/test/snapshots/static.js.snap differ