feat(docz): use webpack 4 instead of parcel

.gitignore

@@ -28,4 +28,5 @@ es
 lib
 stats.html
 build
+dist
 index.d.ts

packages/playgrood/bin/index.js → packages/playgrodd/bin/index.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 const yargs = require('yargs')
-const { server } = require('../build/main/server')
+const { server } = require('../dist/main/server')
 
 yargs
   .command(

packages/playgrood/package.json → packages/playgrodd/package.json

@@ -2,9 +2,9 @@
   "name": "playgrodd",
   "description": "Blazing fast and zero config React components playground",
   "version": "0.0.1",
-  "main": "./build/main/index.jsx",
-  "typings": "./build/main/index.d.ts",
-  "module": "./build/module/index.jsx",
+  "main": "./dist/main/index.jsx",
+  "typings": "./dist/main/index.d.ts",
+  "module": "./dist/module/index.jsx",
   "bin": {
     "playgrodd": "./bin/index.js"
   },
@@ -16,36 +16,55 @@
     "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write",
     "fix:tslint": "tslint --fix --project .",
     "watch": "run-s clean build:main && run-p \"build:main -- -w\"",
-    "clean": "trash build"
+    "clean": "trash dist"
   },
   "dependencies": {
+    "@babel/core": "7.0.0-beta.42",
+    "@babel/preset-env": "^7.0.0-beta.42",
+    "@babel/preset-react": "^7.0.0-beta.42",
+    "babel-loader": "^8.0.0-beta",
     "babel-polyfill": "^6.26.0",
+    "babel-traverse": "^6.26.0",
+    "babel-types": "^6.26.0",
     "babylon": "^6.18.0",
-    "create-react-context": "^0.2.1",
+    "connect-history-api-fallback": "^1.5.0",
     "express": "^4.16.3",
     "fast-glob": "^2.2.0",
+    "find-up": "^2.1.0",
     "history": "^4.7.2",
+    "html-webpack-plugin": "^3.0.7",
+    "invariant": "^2.2.4",
     "mkdirp": "^0.5.1",
-    "parcel-bundler": "^1.6.2",
-    "parcel-plugin-bundle-manifest": "^0.1.0",
     "prop-types": "^15.6.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-router-dom": "^4.2.2",
     "trash": "^4.3.0",
+    "unstated": "^1.1.0",
     "uuid": "^3.2.1",
+    "webpack": "^4.1.1",
+    "webpack-dev-server": "^3.1.1",
+    "webpack-hot-middleware": "^2.21.2",
     "yargs": "^11.0.0"
   },
   "devDependencies": {
+    "@types/babel-traverse": "^6.25.3",
     "@types/babylon": "^6.16.2",
+    "@types/connect-history-api-fallback": "^1.3.1",
     "@types/express": "^4.11.1",
+    "@types/find-up": "^2.1.1",
+    "@types/html-webpack-plugin": "^2.30.3",
+    "@types/invariant": "^2.2.29",
     "@types/mkdirp": "^0.5.2",
     "@types/node": "^9.4.7",
     "@types/react": "^16.0.40",
     "@types/react-dom": "^16.0.4",
     "@types/react-router-dom": "^4.2.5",
     "@types/trash": "^4.3.0",
     "@types/uuid": "^3.4.3",
+    "@types/webpack": "^4.1.1",
+    "@types/webpack-dev-middleware": "^2.0.1",
+    "@types/webpack-hot-middleware": "^2.16.3",
     "@types/yargs": "^11.0.0",
     "npm-run-all": "^4.1.2",
     "prettier": "^1.11.1",

packages/playgrodd/src/compiler/config.ts

@@ -0,0 +1,71 @@
+import * as fs from 'fs'
+import * as path from 'path'
+import findup from 'find-up'
+import webpack, { Loader, Configuration } from 'webpack'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+
+import { IComponentMap } from '../utils/components'
+import * as paths from './paths'
+
+export { config as devServerConfig } from './dev-server'
+
+const babelLoader = (babelrc: string | null): Loader => ({
+  loader: require.resolve('babel-loader'),
+  options: babelrc
+    ? JSON.parse(babelrc)
+    : {
+        babelrc: false,
+        cacheDirectory: true,
+        presets: [
+          require.resolve('@babel/preset-env'),
+          require.resolve('@babel/preset-react'),
+        ],
+      },
+})
+
+export const config = async (
+  components: IComponentMap
+): Promise<Configuration> => {
+  const babelrcPath = await findup('.babelrc')
+  const babelrc = babelrcPath ? fs.readFileSync(babelrcPath, 'utf-8') : null
+
+  return {
+    mode: 'development',
+    context: paths.ROOT,
+    entry: [
+      ...Object.values(components).map(({ filepath: f }) => f),
+      paths.INDEX_JS,
+    ],
+    output: {
+      pathinfo: true,
+      path: paths.DIST,
+      publicPath: '/',
+      filename: 'static/js/[name].js',
+      sourceMapFilename: 'static/js/[name].js.map',
+      crossOriginLoading: 'anonymous',
+      devtoolModuleFilenameTemplate: (info: any) =>
+        path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          include: [paths.ROOT],
+          use: babelLoader(babelrc),
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        __PLAYGRODD_COMPONENTS__: JSON.stringify(components),
+      }),
+      new HtmlWebpackPlugin({
+        template: paths.INDEX_HTML,
+      }),
+    ],
+  }
+}

packages/playgrodd/src/compiler/dev-server.ts

@@ -0,0 +1,26 @@
+import * as paths from './paths'
+
+const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
+const host = process.env.HOST || '0.0.0.0'
+
+export const config = (compiler: any) => ({
+  compress: true,
+  clientLogLevel: 'none',
+  contentBase: paths.DIST,
+  watchContentBase: true,
+  publicPath: '/',
+  hot: true,
+  quiet: true,
+  noInfo: true,
+  https: protocol === 'https',
+  host: host,
+  overlay: false,
+  watchOptions: {
+    ignored: /node_modules/,
+  },
+  stats: {
+    colors: true,
+    chunks: false,
+    chunkModules: false,
+  },
+})

packages/playgrodd/src/compiler/generate-files.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { renderToString } from 'react-dom/server'
+
+const Html = () => (
+  <html>
+    <head>
+      <title>Playgrodd</title>
+      <body>
+        <div id="root" />
+      </body>
+    </head>
+  </html>
+)
+
+export const generateHtml = () => renderToString(<Html />)
+
+export const generateJs = () =>
+  `import 'babel-polyfill'
+
+  import * as React from 'react'
+  import { render } from 'react-dom'
+  import { App } from 'playgrodd-theme-default'
+
+  render(
+    <App />,
+    document.querySelector('#root')
+  )`

packages/playgrodd/src/compiler/index.ts

@@ -0,0 +1,36 @@
+import fs from 'fs'
+import mkdir from 'mkdirp'
+import trash from 'trash'
+import webpack from 'webpack'
+
+import * as paths from './paths'
+import { config } from './config'
+import { IComponentMap } from '../utils/components'
+import { generateHtml, generateJs } from './generate-files'
+
+export { config as devServerConfig } from './dev-server'
+
+const checkMkdirTheme = (): void => {
+  try {
+    fs.lstatSync(paths.THEME)
+  } catch (err) {
+    mkdir.sync(paths.THEME)
+  }
+}
+
+const tempFile = (filepath: string, content: string) => {
+  checkMkdirTheme()
+  fs.writeFileSync(filepath, content, 'utf-8')
+}
+
+export const createCompiler = async (components: IComponentMap) => {
+  const js = generateJs()
+  const html = generateHtml()
+  const webpackConfig = await config(components)
+
+  await trash(paths.THEME)
+  tempFile(paths.INDEX_JS, js)
+  tempFile(paths.INDEX_HTML, html)
+
+  return webpack(webpackConfig)
+}

packages/playgrodd/src/compiler/paths.ts

@@ -0,0 +1,10 @@
+import * as fs from 'fs'
+import * as path from 'path'
+
+export const ROOT = fs.realpathSync(process.cwd())
+export const PLAYGRODD = path.join(ROOT, '.playgrodd')
+export const THEME = path.join(PLAYGRODD, 'theme')
+export const INDEX_JS = path.join(THEME, 'index.jsx')
+export const INDEX_HTML = path.join(THEME, 'index.html')
+
+export const DIST = path.join(PLAYGRODD, 'dist')

packages/playgrodd/src/components/Html.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+export const Html = () => (
+  <html>
+    <head>
+      <title>Playgrodd</title>
+      <body>
+        <div id="root" />
+      </body>
+    </head>
+  </html>
+)

packages/playgrodd/src/components/Playgrodd.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Router } from 'react-router-dom'
+import { createBrowserHistory, History } from 'history'
+import { Provider } from 'unstated'
+
+import { container } from '../documents/container'
+
+export const history: History = createBrowserHistory()
+
+export const Playgrodd: React.SFC = ({ children }) => (
+  <Router history={history}>
+    <Provider inject={[container]}>{children}</Provider>
+  </Router>
+)

packages/playgrodd/src/components/Preview.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { Subscribe } from 'unstated'
+import { Route } from 'react-router-dom'
+
+import { Doc } from '../documents'
+import { IComponent } from '../utils/components'
+import { DocumentsContainer } from '../documents/container'
+
+const components = __PLAYGRODD_COMPONENTS__
+const loadDocument = (doc: Doc) => {
+  const { route }: IComponent = components[doc.getName()]
+  const sections = doc.getSections()
+
+  return (
+    <Route
+      exact
+      key={route}
+      path={route}
+      render={() =>
+        sections.map(({ id, title, render: Component }) => (
+          <React.Fragment key={id}>
+            {title && <h2>{title}</h2>}
+            <Component />
+          </React.Fragment>
+        ))
+      }
+    />
+  )
+}
+
+export const Preview: React.SFC = () => (
+  <Subscribe to={[DocumentsContainer]}>
+    {({ state }) => state.documents.map(loadDocument)}
+  </Subscribe>
+)

packages/playgrodd/src/documents/container.ts

@@ -0,0 +1,21 @@
+import { Container } from 'unstated'
+
+import { Doc } from './'
+
+export interface DocumentState {
+  documents: Doc[]
+}
+
+export class DocumentsContainer extends Container<DocumentState> {
+  state = {
+    documents: [],
+  }
+
+  public add(document: Doc) {
+    this.setState({
+      documents: [document, ...this.state.documents],
+    })
+  }
+}
+
+export const container = new DocumentsContainer()