-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docz): add a mvp version of project
- Loading branch information
1 parent
9d56d02
commit 05ac064
Showing
11 changed files
with
355 additions
and
145 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import * as React from 'react' | ||
|
|
||
| import { IComponent } from '../utils/components' | ||
|
|
||
| export interface IHtmlProps { | ||
| components: IComponent[] | ||
| } | ||
|
|
||
| export const Html: React.SFC<IHtmlProps> = ({ components }) => { | ||
| const stringifiedComps = JSON.stringify(components) | ||
|
|
||
| return ( | ||
| <html> | ||
| <head> | ||
| <title>playgrodd</title> | ||
| <body> | ||
| <div id="root" /> | ||
| <script src="./index.jsx" /> | ||
| <script | ||
| dangerouslySetInnerHTML={{ | ||
| __html: `window.__PLAYGRODD_COMPONENTS__ = ${stringifiedComps}`, | ||
| }} | ||
| /> | ||
| </body> | ||
| </head> | ||
| </html> | ||
| ) | ||
| } |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import * as React from 'react' | ||
| import express, { Request, Response } from 'express' | ||
| import { Arguments } from 'yargs' | ||
| import { renderToString } from 'react-dom/server' | ||
|
|
||
| import { componentsFromPattern } from './utils/components' | ||
| import { createBundle, DIST_PATH } from './utils/bundle' | ||
| import { generateEntry } from './utils/entry' | ||
|
|
||
| import { Html } from './components/Html' | ||
|
|
||
| exports.server = async ({ files: pattern }: Arguments) => { | ||
| const app = express() | ||
| const components = componentsFromPattern(pattern) | ||
| const html = renderToString(<Html components={components} />) | ||
| const entry = generateEntry(components) | ||
|
|
||
| const bundle = await createBundle(html, entry) | ||
|
|
||
| app.use(express.static(DIST_PATH)) | ||
| app.use('/*', async (req: Request, res: Response) => { | ||
| res.sendFile(bundle.name) | ||
| }) | ||
|
|
||
| app.listen(3000) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import fs from 'fs' | ||
| import path from 'path' | ||
| import mkdir from 'mkdirp' | ||
| import Bundler from 'parcel-bundler' | ||
| import trash from 'trash' | ||
|
|
||
| const ROOT_PATH = fs.realpathSync(process.cwd()) | ||
| const PLAYGRODD_PATH = path.join(ROOT_PATH, '.playgrodd') | ||
| const THEME_PATH = path.join(PLAYGRODD_PATH, 'theme') | ||
| const INDEX_HTML = path.join(THEME_PATH, 'index.html') | ||
| const INDEX_JS = path.join(THEME_PATH, 'index.jsx') | ||
|
|
||
| export const CACHE_PATH = path.join(PLAYGRODD_PATH, 'cache') | ||
| export const DIST_PATH = path.join(PLAYGRODD_PATH, 'dist') | ||
|
|
||
| const checkMkdirTheme = () => { | ||
| try { | ||
| fs.lstatSync(THEME_PATH) | ||
| } catch (err) { | ||
| mkdir.sync(THEME_PATH) | ||
| } | ||
| } | ||
|
|
||
| const tempFile = (filepath: string, content: string) => | ||
| new Promise((resolve, reject) => { | ||
| checkMkdirTheme() | ||
|
|
||
| try { | ||
| fs.writeFileSync(filepath, content, 'utf-8') | ||
| resolve() | ||
| } catch (err) { | ||
| reject(err) | ||
| } | ||
| }) | ||
|
|
||
| export const createBundle = async (html: string, entry: string) => { | ||
| await trash(DIST_PATH) | ||
| await trash(THEME_PATH) | ||
| await tempFile(INDEX_JS, entry) | ||
| await tempFile(INDEX_HTML, html) | ||
|
|
||
| const bundler = new Bundler(INDEX_HTML, { | ||
| cacheDir: CACHE_PATH, | ||
| outDir: DIST_PATH, | ||
| publicURL: '/', | ||
| outFile: 'index', | ||
| }) | ||
|
|
||
| try { | ||
| return await bundler.bundle() | ||
| } catch (err) { | ||
| console.log(err) | ||
| return null | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { IComponent } from './components' | ||
|
|
||
| const mountLink = (component: IComponent) => | ||
| `<li> | ||
| <Link to="/${component.route}">${component.name}</Link> | ||
| </li>` | ||
|
|
||
| const componentRoute = (component: IComponent) => | ||
| `class Route${component.name} extends React.Component { | ||
| constructor(props, ctx) { | ||
| super(props, ctx) | ||
| this.state = { | ||
| render: () => null | ||
| } | ||
| } | ||
| async componentDidMount() { | ||
| const { doc: render } = await import('${component.filepath}') | ||
| this.setState({ render }) | ||
| } | ||
| render() { | ||
| return <div>{this.state.render()}</div> | ||
| } | ||
| }` | ||
|
|
||
| const mountRoute = (component: IComponent) => | ||
| `<Route | ||
| exact | ||
| path="/${component.route}" | ||
| render={(props) => { | ||
| const Comp = ${componentRoute(component)} | ||
| return <Comp {...props} /> | ||
| }} | ||
| />` | ||
|
|
||
| export const generateEntry = (components: IComponent[]) => { | ||
| return ` | ||
| import 'babel-polyfill' | ||
| import React from 'react' | ||
| import { render } from 'react-dom' | ||
| import { Router, Route, Link } from 'react-router-dom' | ||
| import { createBrowserHistory } from 'history' | ||
| const App = () => ( | ||
| <Router history={createBrowserHistory()}> | ||
| <div> | ||
| <ul>${components.map(mountLink).join('')}</ul> | ||
| <div>${components.map(mountRoute).join('')}</div> | ||
| </div> | ||
| </Router> | ||
| ) | ||
| render(<App />, document.querySelector('#root')) | ||
| ` | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.