fix(docz-core): packages splitting

examples/basic/.babelrc

@@ -7,7 +7,7 @@
     "emotion",
     ["module-resolver", {
       "alias": {
-        "playgrodd": "../../node_modules/playgrodd/dist/main/index.js",
+        "playgrodd": "../../node_modules/playgrodd/dist/index.js",
         "playgrodd-theme-default": "../../node_modules/playgrodd-theme-default/dist/index.js"
       }
     }]

package.json

@@ -6,9 +6,13 @@
   },
   "devDependencies": {
     "lerna": "^2.9.0",
-    "libundler": "^1.3.0",
-    "typescript": "^2.7.2",
-    "trash-cli": "^1.4.0"
+    "libundler": "^1.4.0",
+    "npm-run-all": "^4.1.2",
+    "prettier": "^1.11.1",
+    "trash-cli": "^1.4.0",
+    "tslint": "^5.9.1",
+    "tslint-config-prettier": "^1.10.0",
+    "typescript": "^2.7.2"
   },
   "workspaces": [
     "packages/*",

packages/playgrodd-core/package.json

@@ -1,25 +1,43 @@
 {
   "name": "playgrodd-core",
   "version": "0.0.1",
-  "main": "./dist/main/index.jsx",
+  "main": "./dist/main/index.js",
   "typings": "./dist/main/index.d.ts",
-  "module": "./dist/module/index.jsx",
-  "source": "src/index.ts",
+  "module": "./dist/module/index.js",
   "scripts": {
     "build": "run-s clean && run-p build:*",
     "build:main": "tsc -p tsconfig.json",
     "build:module": "tsc -p tsconfig.module.json",
     "fix": "run-s fix:*",
     "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 dist"
   },
+  "dependencies": {
+    "@babel/core": "^7.0.0-beta.42",
+    "babel-loader": "^8.0.0-beta.1",
+    "babel-polyfill": "^7.0.0-beta.3",
+    "babel-traverse": "^6.26.0",
+    "babel-types": "^6.26.0",
+    "babylon": "^6.18.0",
+    "connect-history-api-fallback": "^1.5.0",
+    "del": "^3.0.0",
+    "fast-glob": "^2.2.0",
+    "html-webpack-plugin": "^3.1.0",
+    "mkdirp": "^0.5.1",
+    "webpack": "^4.2.0",
+    "webpack-dev-server": "^3.1.1",
+    "webpack-hot-middleware": "^2.21.2"
+  },
   "devDependencies": {
-    "npm-run-all": "^4.1.2",
-    "prettier": "^1.11.1",
-    "trash-cli": "^1.4.0",
-    "tslint": "^5.9.1",
-    "tslint-config-prettier": "^1.10.0",
-    "typescript": "^2.7.2"
+    "@types/babel-traverse": "^6.25.3",
+    "@types/babylon": "^6.16.2",
+    "@types/connect-history-api-fallback": "^1.3.1",
+    "@types/del": "^3.0.0",
+    "@types/mkdirp": "^0.5.2",
+    "@types/webpack": "^4.1.2",
+    "@types/webpack-dev-server": "^2.9.4",
+    "@types/webpack-hot-middleware": "^2.16.3"
   }
 }

packages/playgrodd-core/src/compiler/create-compiler.ts

@@ -1,12 +1,12 @@
 import * as fs from 'fs'
-import mkdir from 'mkdirp'
-import trash from 'trash'
-import webpack from 'webpack'
+import * as mkdir from 'mkdirp'
+import * as del from 'del'
+import * as webpack from 'webpack'
 
-import * as paths from './paths'
 import { IEntryObj } from './files-parser'
 import { createConfig } from './create-config'
 import { generateHtml, generateJs } from './generate-files'
+import * as paths from '../config/paths'
 
 const checkMkdirTheme = (): void => {
   try {
@@ -26,7 +26,7 @@ export const createCompiler = async (entries: IEntryObj[]) => {
   const html = generateHtml()
   const webpackConfig = await createConfig(entries)
 
-  await trash(paths.THEME)
+  await del.sync(paths.THEME)
   tempFile(paths.INDEX_JS, js)
   tempFile(paths.INDEX_HTML, html)
 

packages/playgrodd-core/src/compiler/create-config.ts

@@ -1,11 +1,11 @@
 import * as fs from 'fs'
 import * as path from 'path'
-import findup from 'find-up'
+import * as findup from 'find-up'
 import { Loader, Configuration } from 'webpack'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
+import * as HtmlWebpackPlugin from 'html-webpack-plugin'
 
-import * as paths from './paths'
 import { IEntryObj } from './files-parser'
+import * as paths from '../config/paths'
 
 const babelLoader = (babelrc: string | null): Loader => ({
   loader: require.resolve('babel-loader'),
@@ -24,13 +24,19 @@ const babelLoader = (babelrc: string | null): Loader => ({
 export const createConfig = async (
   entries: IEntryObj[]
 ): Promise<Configuration> => {
-  const babelrcPath = await findup('.babelrc')
+  const babelrcPath = findup.sync(['.babelrc', 'babelrc.js'])
   const babelrc = babelrcPath ? fs.readFileSync(babelrcPath, 'utf-8') : null
 
+  console.log(entries)
+
   return {
     mode: 'development',
     context: paths.ROOT,
-    entry: [...entries.map(entry => entry.filepath), paths.INDEX_JS],
+    entry: [
+      require.resolve('babel-polyfill'),
+      ...entries.map(entry => entry.filepath),
+      paths.INDEX_JS,
+    ],
     output: {
       pathinfo: true,
       path: paths.DIST,

packages/playgrodd-core/src/compiler/files-parser.ts

@@ -1,6 +1,6 @@
-import fs from 'fs'
-import path from 'path'
-import glob from 'fast-glob'
+import * as fs from 'fs'
+import * as path from 'path'
+import * as glob from 'fast-glob'
 import { parse } from 'babylon'
 import { NodePath } from 'babel-traverse'
 import * as t from 'babel-types'

packages/playgrodd-core/src/compiler/generate-files.ts

@@ -10,9 +10,7 @@ export const generateHtml = () => `
 `
 
 export const generateJs = () =>
-  `import 'babel-polyfill'
-
-  import * as React from 'react'
+  `import * as React from 'react'
   import { render } from 'react-dom'
   import { Theme } from 'playgrodd-theme-default'
 

packages/playgrodd-core/src/compiler/index.ts

@@ -1,3 +1,2 @@
 export { entriesMapper } from './files-parser'
 export { createCompiler } from './create-compiler'
-export { devServer } from './dev-server'

packages/playgrodd-core/src/server.ts

@@ -1,23 +1,46 @@
-// /import { Arguments } from 'yargs'
+import { Arguments } from 'yargs'
+import * as historyApiFallback from 'connect-history-api-fallback'
+import * as hotMiddleware from 'webpack-hot-middleware'
+import * as WebpackDevServer from 'webpack-dev-server'
 
-// import { entriesMapper } from './compiler'
-// import { createCompiler, devServer } from './compiler'
+import { entriesMapper } from './compiler'
+import { createCompiler } from './compiler'
+import * as paths from './config/paths'
 
-// import * as Koa from 'koa'
-// const historyApiFallback = require('connect-history-api-fallback')
-// const devServerMiddleware = require('webpack-dev-middleware')
-// const hotMiddleware = require('webpack-hot-middleware')
+const PROTOCOL = process.env.HTTPS === 'true' ? 'https' : 'http'
+const HOST = process.env.HOST || '0.0.0.0'
 
-// console.log(Koa)
+export const server = async ({ files: pattern }: Arguments) => {
+  const entries = await entriesMapper(pattern)
+  const compiler = await createCompiler(entries)
 
-export const server = ({ files: pattern }: any) => {
-  // const app = new Koa()
-  // const entries = await entriesMapper(pattern)
-  // const compiler = await createCompiler(entries)
-  // app.use(historyApiFallback())
-  // app.use(hotMiddleware(compiler, { log: false, heartbeat: 2000 }))
-  // app.use(devServerMiddleware(compiler, devServer(compiler)))
-  // app.listen(3000, () => {
-  //   console.log('Example app listening on port 3000!')
-  // })
+  const app = new WebpackDevServer(compiler, {
+    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,
+    },
+    before(app: any) {
+      app.use(historyApiFallback())
+      app.use(hotMiddleware(compiler, { log: false, heartbeat: 2000 }))
+    },
+  })
+
+  app.listen(3000, () => {
+    console.log('Example app listening on port 3000!')
+  })
 }

packages/playgrodd-core/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
     "outDir": "dist/main",
     "rootDir": "src",
     "types": ["node"],

packages/playgrodd-core/tslint.json

@@ -1,3 +1,3 @@
 {
-  "extends": "../../tslint.json"
+  "extends": ["../../tslint.json"]
 }

packages/playgrodd/.librc

@@ -0,0 +1,3 @@
+{
+  "external": ["react", "react-dom", "react-router-dom", "history"]
+}

packages/playgrodd/package.json

@@ -10,8 +10,8 @@
     "playgrodd": "./bin/index.js"
   },
   "scripts": {
-    "dev": "libundler watch",
-    "build": "libundler build",
+    "dev": "libundler watch --ts",
+    "build": "libundler build --ts",
     "build:prod": "yarn run build --compress --sourcemap",
     "fix": "run-s fix:*",
     "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write",
@@ -23,8 +23,8 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-router-dom": "^4.2.2",
+    "ulid": "^2.3.0",
     "unstated": "^1.1.0",
-    "uuid": "^3.2.1",
     "yargs": "^11.0.0"
   },
   "devDependencies": {

packages/playgrodd/src/documents/index.ts

@@ -1,4 +1,4 @@
-import * as uuid from 'uuid'
+import { ulid } from 'ulid'
 import { container } from '../container'
 
 const isFn = (value: any): boolean => typeof value === 'function'
@@ -54,15 +54,9 @@ export class Doc implements IDoc {
     const [title, renderMethod] = args
     const render: IRenderMethod = isFn(title) ? title : renderMethod
 
-    if (!isFn(title) || !isFn(renderMethod)) {
-      throw new Error(
-        'You need to set a function that will render your section'
-      )
-    }
-
     this._sections.push({
       render,
-      id: uuid.v4(),
+      id: ulid(),
       ...(title && !isFn(title) && { title }),
     })
 

packages/playgrodd/src/types.d.ts

@@ -1,5 +1 @@
-declare module 'uuid' {
-  export function v4(): string
-}
-
 declare const __PLAYGRODD_COMPONENTS__: any