From d6b58afe86faa79a9baf5d1a8b1a849e8955bdbf Mon Sep 17 00:00:00 2001 From: Brent Jackson Date: Wed, 13 Sep 2017 18:35:13 -0400 Subject: [PATCH] Rename things and clean up --- README.md | 83 +++++++++++++++++---------------------------- bin/cli.js | 23 ++++++++----- docs/index.html | 2 +- lib/dev/index.js | 1 - lib/static/css.js | 48 -------------------------- lib/static/index.js | 18 ++++++---- package.json | 14 ++++---- 7 files changed, 66 insertions(+), 123 deletions(-) delete mode 100644 lib/static/css.js diff --git a/README.md b/README.md index 2d99b17..f87a10b 100644 --- a/README.md +++ b/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 -``` diff --git a/bin/cli.js b/bin/cli.js index 50b58b3..0847103 100755 --- a/bin/cli.js +++ b/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 { diff --git a/docs/index.html b/docs/index.html index 5c24659..9b7c689 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,3 +1,3 @@ -RX0

Hello 2

{
+X0
Hello 2
{
   "count": 2
 }

\ No newline at end of file
diff --git a/lib/dev/index.js b/lib/dev/index.js
index 376280a..448ab5e 100644
--- a/lib/dev/index.js
+++ b/lib/dev/index.js
@@ -13,7 +13,6 @@ const devOptions = {
 }
 
 module.exports = (filename, options = {}, cb) => {
-  console.log('server', filename, options)
   if (!filename) return
   const dirname = path.dirname(filename)
 
diff --git a/lib/static/css.js b/lib/static/css.js
deleted file mode 100644
index 3bafd6f..0000000
--- a/lib/static/css.js
+++ /dev/null
@@ -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 ''
-  }
-
-}
diff --git a/lib/static/index.js b/lib/static/index.js
index c3c729c..93286f2 100644
--- a/lib/static/index.js
+++ b/lib/static/index.js
@@ -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 => '' + 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'
     ],
diff --git a/package.json b/package.json
index 0b54d23..f3bcc66 100644
--- a/package.json
+++ b/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
     },