mirror of
https://github.com/c8r/x0.git
synced 2024-09-11 21:57:26 +03:00
Rename things and clean up
This commit is contained in:
Brent Jackson
parent
2e194d9d5c
commit
d6b58afe86
83
README.md
83
README.md
@ -1,10 +1,10 @@
|
||||
|
||||
# rx0
|
||||
# x0
|
||||
|
||||
React dev environment, static-site generator, and bundler
|
||||
|
||||
```sh
|
||||
npm install rx0
|
||||
npm install @compositor/x0
|
||||
```
|
||||
|
||||
## Features
|
||||
@ -17,40 +17,59 @@ npm install rx0
|
||||
|
||||
* Components should not rely on bundler features like webpack loaders
|
||||
|
||||
### Isolated development environment
|
||||
|
||||
## Isolated development environment
|
||||
|
||||
```sh
|
||||
rx0 dev src/Component.js
|
||||
x0 dev src/App.js
|
||||
```
|
||||
|
||||
Options:
|
||||
- open
|
||||
- port
|
||||
|
||||
|
||||
### Static Render
|
||||
```
|
||||
-o --open Open dev server in default browser
|
||||
-p --port Set custom port for dev server
|
||||
```
|
||||
|
||||
```sh
|
||||
rx0 static src/App.js
|
||||
x0 dev src/App.js -op 8080
|
||||
```
|
||||
|
||||
|
||||
## Static Render
|
||||
|
||||
Render a static HTML page with client-side JS bundle
|
||||
|
||||
```sh
|
||||
x0 build src/App.js
|
||||
```
|
||||
|
||||
Render with a custom root HTML component to control CSS, routing, etc.
|
||||
|
||||
```
|
||||
rx0 static src/App.js src/Html.js
|
||||
x0 build src/App.js --html src/Html.js
|
||||
```
|
||||
|
||||
Options
|
||||
- out-dir
|
||||
- client-bundle
|
||||
|
||||
```
|
||||
-d --out-dir Directory to save index.html and bundle.js to
|
||||
-s --static Only render static HTML (no client-side JS)
|
||||
```
|
||||
|
||||
|
||||
## Render Multiple Pages
|
||||
|
||||
```sh
|
||||
x0 build src/pages/ --out-dir docs/
|
||||
```
|
||||
|
||||
### Configuration
|
||||
|
||||
In `package.json`
|
||||
|
||||
```json
|
||||
"rx0": {
|
||||
"x0": {
|
||||
"title": "Hello",
|
||||
"props": {
|
||||
"count": 0
|
||||
@ -64,45 +83,7 @@ MIT License
|
||||
|
||||
To do:
|
||||
|
||||
- [x] pass component
|
||||
- [x] CLI
|
||||
- [x] test hot loading
|
||||
- [x] test outside dir
|
||||
- [x] render static
|
||||
- [x] render static callback
|
||||
|
||||
- [x] render json
|
||||
- [x] rehydrate from json
|
||||
- [x] render bundle
|
||||
- [x] rehydrate from json
|
||||
- [x] out-dir option
|
||||
- [ ] render css (yikes)
|
||||
|
||||
- [x] configurable (props) html render
|
||||
- [x] default html render
|
||||
- [x] merge options with package.json
|
||||
- [x] update-notifier
|
||||
- [ ] render multiple routes
|
||||
- [ ] readdir
|
||||
- [ ] configuration `options.pages`
|
||||
- User configures routing in App – ssr/static props for current pathname hydration
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
pages: [
|
||||
{
|
||||
path: '/',
|
||||
component: 'docs/App.js',
|
||||
props: {}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
```sh
|
||||
io
|
||||
iox
|
||||
ion
|
||||
r0
|
||||
rex
|
||||
```
|
||||
|
||||
23
bin/cli.js
23
bin/cli.js
@ -10,29 +10,36 @@ require('update-notifier')({
|
||||
const cli = meow(`
|
||||
Usage:
|
||||
|
||||
$ rx0 dev src/Component.js
|
||||
$ x0 dev src/App.js
|
||||
|
||||
$ rx0 static src/Component.js
|
||||
$ x0 build src/App.js
|
||||
|
||||
Options:
|
||||
|
||||
-h --html Root HTML component for wrapping the app component
|
||||
|
||||
-d --out-dir Output directory for static build
|
||||
|
||||
-s --static Render static HTML without client-side JS
|
||||
|
||||
-p --port Port for dev server
|
||||
|
||||
-o --open Open dev server in default browser
|
||||
|
||||
`, {
|
||||
alias: {
|
||||
d: 'outDir'
|
||||
}
|
||||
})
|
||||
|
||||
const [ cmd, file, rootpath ] = cli.input
|
||||
const options = Object.assign({}, pkg.rx0, cli.flags)
|
||||
const [ cmd, file ] = cli.input
|
||||
const options = Object.assign({}, pkg.x0, cli.flags)
|
||||
|
||||
const absolute = f => f
|
||||
? path.isAbsolute(f) ? f : path.join(process.cwd(), f)
|
||||
: null
|
||||
|
||||
const filename = absolute(file)
|
||||
const root = absolute(rootpath)
|
||||
|
||||
switch (cmd) {
|
||||
case 'dev':
|
||||
@ -41,9 +48,9 @@ switch (cmd) {
|
||||
console.log(port)
|
||||
})
|
||||
break
|
||||
case 'static':
|
||||
const static = require('../lib/static')
|
||||
static(filename, root, options, (err, html) => {
|
||||
case 'build':
|
||||
const build = require('../lib/static')
|
||||
build(filename, options, (err, html) => {
|
||||
if (!options.outDir) {
|
||||
console.log(html)
|
||||
} else {
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<!DOCTYPE html><html data-reactroot="" data-reactid="1" data-react-checksum="-650371014"><head data-reactid="2"><title data-reactid="3">RX0</title><meta charset="utf-8" data-reactid="4"/><meta name="viewport" content="width=device-width, initial-scale=1" data-reactid="5"/><meta name="description" data-reactid="6"/><style data-reactid="7">.x0{color:lime}</style></head><body data-reactid="8"><div id="app" data-reactid="9"><div data-reactroot="" data-reactid="1" data-react-checksum="781606405"><h1 class="x0" data-reactid="2"><!-- react-text: 3 -->Hello <!-- /react-text --><!-- react-text: 4 -->2<!-- /react-text --></h1><pre data-reactid="5">{
|
||||
<!DOCTYPE html><html data-reactroot="" data-reactid="1" data-react-checksum="-1053024280"><head data-reactid="2"><title data-reactid="3">X0</title><meta charset="utf-8" data-reactid="4"/><meta name="viewport" content="width=device-width, initial-scale=1" data-reactid="5"/><meta name="description" data-reactid="6"/><style data-reactid="7">.x0{color:lime}</style></head><body data-reactid="8"><div id="app" data-reactid="9"><div data-reactroot="" data-reactid="1" data-react-checksum="781606405"><h1 class="x0" data-reactid="2"><!-- react-text: 3 -->Hello <!-- /react-text --><!-- react-text: 4 -->2<!-- /react-text --></h1><pre data-reactid="5">{
|
||||
"count": 2
|
||||
}</pre><button data-reactid="6">-</button><button data-reactid="7">+</button></div></div><script id="__initial-props__" type="application/json" data-reactid="10">{"count":2}</script><script src="bundle.js" data-reactid="11"></script></body></html>
|
||||
@ -13,7 +13,6 @@ const devOptions = {
|
||||
}
|
||||
|
||||
module.exports = (filename, options = {}, cb) => {
|
||||
console.log('server', filename, options)
|
||||
if (!filename) return
|
||||
const dirname = path.dirname(filename)
|
||||
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
const { pkg } = require('read-pkg-up').sync()
|
||||
|
||||
// all these libraries might be wildly too different to reasonably account for
|
||||
const libs = [
|
||||
'styled-components',
|
||||
'cxs',
|
||||
'glamor',
|
||||
'glamorous',
|
||||
'fela',
|
||||
]
|
||||
|
||||
// todo: check semver
|
||||
module.exports = () => {
|
||||
const { dependencies = {} } = pkg
|
||||
let lib
|
||||
let version
|
||||
|
||||
libs.forEach(name => {
|
||||
if (Object.keys(dependencies).includes(name)) {
|
||||
lib = name
|
||||
version = dependencies[lib]
|
||||
}
|
||||
})
|
||||
|
||||
switch (lib) {
|
||||
case 'styled-components':
|
||||
// wtf this api is convoluted af
|
||||
// seems like this needs the components to render inside
|
||||
// one of these functions
|
||||
const { ServerStyleSheet } = require('styled-components')
|
||||
const sheet = new ServerStyleSheet()
|
||||
|
||||
// console.log('sheet instance', sheet.create)
|
||||
// const css = sheet.getStyleTags()
|
||||
|
||||
// could return react elements here
|
||||
// const css = sheet.getStyleElements()
|
||||
break
|
||||
// case 'glamorous':
|
||||
case 'cxs':
|
||||
const cxs = require('cxs')
|
||||
const css = cxs.css()
|
||||
return css
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
|
||||
}
|
||||
@ -11,7 +11,6 @@ const React = require('react')
|
||||
const { renderToString } = require('react-dom/server')
|
||||
const Html = require('./Html')
|
||||
const client = require('./client')
|
||||
// const renderCSS = require('./css')
|
||||
|
||||
const render = (Component, props) => renderToString(
|
||||
React.createElement(Component, props)
|
||||
@ -19,7 +18,16 @@ const render = (Component, props) => renderToString(
|
||||
|
||||
const doc = n => '<!DOCTYPE html>' + n
|
||||
|
||||
module.exports = async (filename, root, options = {}, cb) => {
|
||||
const getRoot = options => {
|
||||
if (typeof options.html !== 'string') return null
|
||||
const root = path.isAbsolute(options.html)
|
||||
? options.html
|
||||
: path.join(process.cwd(), options.html)
|
||||
const Root = require(root).default || require(roo)
|
||||
return Root
|
||||
}
|
||||
|
||||
module.exports = async (filename, options = {}, cb) => {
|
||||
const {
|
||||
props = {},
|
||||
routes
|
||||
@ -27,17 +35,13 @@ module.exports = async (filename, root, options = {}, cb) => {
|
||||
const req = require(filename)
|
||||
const Component = req.default || req
|
||||
|
||||
const Root = root ? require(root).default || require(root) : null
|
||||
const Root = getRoot(options)
|
||||
|
||||
const body = render(Component, props)
|
||||
|
||||
const stats = await client(filename, options)
|
||||
|
||||
// probably just delegate this to custom Root components
|
||||
// const css = renderCSS(Component, props)
|
||||
|
||||
const rootProps = Object.assign({}, options, props, {
|
||||
// css,
|
||||
scripts: [
|
||||
'bundle.js'
|
||||
],
|
||||
|
||||
14
package.json
14
package.json
@ -1,15 +1,15 @@
|
||||
{
|
||||
"name": "rx0",
|
||||
"version": "1.0.3",
|
||||
"name": "@compositor/x0",
|
||||
"version": "1.0.0-60",
|
||||
"description": "React dev environment, static-site generator, and bundler",
|
||||
"main": "index.js",
|
||||
"bin": {
|
||||
"rx0": "bin/cli.js"
|
||||
"x0": "bin/cli.js"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "./bin/cli.js dev docs/App.js",
|
||||
"build": "./bin/cli.js static docs/App.js",
|
||||
"test": "./bin/cli.js static docs/App.js docs/Root.js -d docs"
|
||||
"build": "./bin/cli.js build docs/App.js",
|
||||
"test": "./bin/cli.js build docs/App.js --html docs/Root.js -d docs"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Brent Jackson",
|
||||
@ -34,8 +34,8 @@
|
||||
"cxs": "^6.0.0",
|
||||
"refunk": "^1.0.0-2"
|
||||
},
|
||||
"rx0": {
|
||||
"title": "RX0",
|
||||
"x0": {
|
||||
"title": "X0",
|
||||
"props": {
|
||||
"count": 2
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user