diff --git a/README.md b/README.md index bbf1e21..8e964e3 100644 --- a/README.md +++ b/README.md @@ -27,11 +27,46 @@ npm install -g @compositor/x0 Read more about x0 in our [blog post](https://compositor.io/blog/x0-making-react-component-development-stupid-simple/). +## Getting Started + +x0 renders a directory of React components, automatically handling routing based on filename. +Create a `docs` folder and add an `index.js` file. + +```jsx +// index.js +import React from 'react' + +export default class extends React.Component { + render () { + return ( +

Hello

+ ) + } +} +``` + +Start a development server by running: + +```sh +x0 docs --open +``` + +To add more pages, add a new component for each route. For example, create an about page: + +```jsx +// about.js +import React from 'react' + +export default props => +

About

+``` + +The about page should now render when navigating to . ## Isolated development environment ```sh -x0 components +x0 docs ``` Options: @@ -44,7 +79,7 @@ Options: ``` ```sh -x0 components -op 8080 +x0 docs -op 8080 ``` @@ -53,13 +88,13 @@ x0 components -op 8080 Export static HTML and client-side bundle ```sh -x0 build components +x0 build docs ``` Export static HTML without bundle ```sh -x0 build components --static +x0 build docs --static ``` Options diff --git a/create-x0/cli.js b/create-x0/cli.js new file mode 100755 index 0000000..95c29b6 --- /dev/null +++ b/create-x0/cli.js @@ -0,0 +1,34 @@ +#!/usr/bin/env node +const path = require('path') +const init = require('initit') +const chalk = require('chalk') + +const [ name ] = process.argv.slice(2) +const template = 'c8r/x0/examples/basic' + +if (!name) { + console.log('name is required: $ create-x0 my-project') + process.exit(1) +} + +console.log('Creating x0 project ', chalk.green(name)) +console.log() + +init({ + name, + template, +}) + .then(res => { + console.log( + chalk.green( + 'Successfully created new x0 project' + ) + ) + process.exit(0) + }) + .catch(err => { + console.log( + chalk.red(err) + ) + process.exit(1) + }) diff --git a/create-x0/package.json b/create-x0/package.json new file mode 100644 index 0000000..ee2d2e1 --- /dev/null +++ b/create-x0/package.json @@ -0,0 +1,15 @@ +{ + "name": "create-x0", + "version": "1.0.0-1", + "description": "Create an x0 starter project", + "bin": { + "create-x0": "./cli.js" + }, + "keywords": [], + "author": "Brent Jackson", + "license": "MIT", + "dependencies": { + "chalk": "^2.4.1", + "initit": "^1.0.0-2" + } +} diff --git a/examples/basic/README.md b/examples/basic/README.md index c3e009f..4572d74 100644 --- a/examples/basic/README.md +++ b/examples/basic/README.md @@ -11,7 +11,7 @@ npm install npm start ``` -Editing `index.js` will live update in the development server. +Editing `src/index.js` will live update in the development server. ## Static Build diff --git a/examples/basic/package.json b/examples/basic/package.json index c63bd92..ff91f16 100644 --- a/examples/basic/package.json +++ b/examples/basic/package.json @@ -2,8 +2,8 @@ "name": "x0-basic-example", "private": true, "scripts": { - "start": "x0 . -o", - "build": "x0 build ." + "start": "x0 src -o", + "build": "x0 build src" }, "dependencies": { "@compositor/x0": "^5.0.0" diff --git a/examples/basic/index.js b/examples/basic/src/index.js similarity index 100% rename from examples/basic/index.js rename to examples/basic/src/index.js diff --git a/package.json b/package.json index 176cc7a..a1b8ba7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@compositor/x0", - "version": "6.0.0-4", + "version": "6.0.0", "description": "Document & develop React components without breaking a sweat", "main": "index.js", "bin": { diff --git a/src/scope.js b/src/scope.js index 3e3bbfd..de44527 100644 --- a/src/scope.js +++ b/src/scope.js @@ -56,6 +56,8 @@ export const code = ({ return (
diff --git a/test/components.js b/test/components.js
index 70472ef..adffd77 100644
--- a/test/components.js
+++ b/test/components.js
@@ -20,7 +20,6 @@ import {
 
 browserEnv()
 
-// make sure this doesn't conflict with webpack tests
 global.DIRNAME = 'beep'
 
 const renderJSON = el => render(el).toJSON()
@@ -221,7 +220,6 @@ test('SidebarLayout renders', t => {
   )
   t.snapshot(json)
 })
-// console.log(require('util').inspect(json, { depth: null }))
 
 const blacklist = {
   pre: true
diff --git a/test/snapshots/build.js.md b/test/snapshots/build.js.md
index cc35734..cab9150 100644
--- a/test/snapshots/build.js.md
+++ b/test/snapshots/build.js.md
@@ -9,9 +9,3 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     'x0

Hello

' - -## static uses getInitialProps method - -> Snapshot 1 - - 'x0

Hello

' diff --git a/test/snapshots/build.js.snap b/test/snapshots/build.js.snap index 527463b..5034be3 100644 Binary files a/test/snapshots/build.js.snap and b/test/snapshots/build.js.snap differ diff --git a/test/snapshots/components.js.md b/test/snapshots/components.js.md index 2f38c46..421cdfa 100644 --- a/test/snapshots/components.js.md +++ b/test/snapshots/components.js.md @@ -278,7 +278,7 @@ Generated by [AVA](https://ava.li). > Snapshot 1
 
 ## scope.h1 renders
diff --git a/test/snapshots/components.js.snap b/test/snapshots/components.js.snap
index fa75fd0..99c7e2b 100644
Binary files a/test/snapshots/components.js.snap and b/test/snapshots/components.js.snap differ