feat(docz-bundler-webpack): add bundler as package

packages/playgrodd-bundler-webpack/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "playgrodd-bundler-webpack",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "typings": "./dist/index.d.ts",
+  "source": "src/index.ts",
+  "license": "MIT",
+  "scripts": {
+    "clean": "trash dist",
+    "compile": "tsc -p tsconfig.json",
+    "dev": "run-s clean && run-s \"compile -w\"",
+    "build": "run-s clean && run-s compile",
+    "fix": "run-s fix:*",
+    "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write",
+    "fix:tslint": "tslint --fix --project ."
+  },
+  "dependencies": {
+    "@babel/core": "^7.0.0-beta.44",
+    "@babel/runtime": "^7.0.0-beta.44",
+    "babel-polyfill": "^7.0.0-beta.3",
+    "babel-loader": "^8.0.0-beta.1",
+    "babel-preset-react-app": "^4.0.0-next.b2fd8db8",
+    "deepmerge": "^2.1.0",
+    "html-webpack-plugin": "^3.2.0",
+    "load-cfg": "^0.0.1",
+    "playgrodd-core": "^0.0.1",
+    "react-dev-utils": "^5.0.1",
+    "react-hot-loader": "^4.0.1",
+    "thread-loader": "^1.1.5",
+    "webpack": "^4.5.0",
+    "webpack-dev-middleware": "^3.1.2",
+    "webpack-dev-server": "^3.1.3"
+  },
+  "devDependencies": {
+    "@types/deepmerge": "^2.1.0",
+    "@types/html-webpack-plugin": "^2.30.3",
+    "@types/node": "9.6.4",
+    "@types/webpack": "^4.1.3",
+    "@types/webpack-dev-server": "^2.9.4"
+  }
+}

packages/playgrodd-core/src/bundlers/webpack/config-devserver.ts → packages/playgrodd-bundler-webpack/src/config-devserver.ts

@@ -1,12 +1,14 @@
 import { Application } from 'express'
 import * as errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware'
 
-import * as paths from '../../config/paths'
-
 export const PROTOCOL = process.env.HTTPS === 'true' ? 'https' : 'http'
 export const HOST = process.env.HOST || '0.0.0.0'
 
-export const devServerConfig = () => ({
+export interface IDevServerConfigParams {
+  paths: any
+}
+
+export const devServerConfig = ({ paths }: IDevServerConfigParams) => ({
   compress: true,
   clientLogLevel: 'none',
   contentBase: paths.PLAYGRODD,

packages/playgrodd-core/src/bundlers/webpack/config-dev.ts → packages/playgrodd-bundler-webpack/src/config.dev.ts

@@ -1,38 +1,19 @@
 import * as path from 'path'
-import { Loader, Configuration } from 'webpack'
+import { Configuration } from 'webpack'
 import * as webpack from 'webpack'
 import * as HtmlWebpackPlugin from 'html-webpack-plugin'
 import * as webpackDevServerUtils from 'react-dev-utils/WebpackDevServerUtils'
 import * as WebpackDevServer from 'webpack-dev-server'
-import * as merge from 'deepmerge'
-import { load } from 'load-cfg'
-
-import * as paths from '../../config/paths'
-import { Entry } from '../../Entry'
+import { IBundlerFactoryParams as Args, Entry } from 'playgrodd-core'
 
 import { devServerConfig } from './config-devserver'
+import * as loaders from './loaders'
 
 const HOST = process.env.HOST || '0.0.0.0'
 
-const babelLoader = (): Loader => {
-  const babelrc = load('babel', null)
-  const options = merge(babelrc, {
-    babelrc: false,
-    cacheDirectory: true,
-    presets: [
-      require.resolve('@babel/preset-env'),
-      require.resolve('@babel/preset-react'),
-    ],
-    plugins: [require.resolve('react-hot-loader/babel')],
-  })
-
-  return {
-    options,
-    loader: require.resolve('babel-loader'),
-  }
-}
-
-export const config = (entries: Entry[]): Configuration => ({
+export const config = ({ paths }: Args) => (
+  entries: Entry[]
+): Configuration => ({
   mode: 'development',
   context: paths.ROOT,
   devtool: '#source-map',
@@ -54,15 +35,19 @@ export const config = (entries: Entry[]): Configuration => ({
   module: {
     rules: [
       {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        include: [paths.ROOT],
-        use: babelLoader(),
+        oneOf: [
+          {
+            test: /\.(js|jsx|mjs)$/,
+            exclude: /node_modules/,
+            include: [paths.ROOT],
+            use: [require.resolve('thread-loader'), loaders.babel],
+          },
+        ],
       },
     ],
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
     modules: [paths.ROOT, 'node_modules'],
     alias: {
       '@babel/runtime': path.dirname(
@@ -84,7 +69,7 @@ export const config = (entries: Entry[]): Configuration => ({
   ],
 })
 
-export const setup = (port: number) => (config: Configuration) => {
+export const setup = ({ paths, port }: Args) => (config: Configuration) => {
   const appName = require(paths.PACKAGE_JSON).name
   const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
   const urls = webpackDevServerUtils.prepareUrls(protocol, HOST, port)
@@ -98,5 +83,5 @@ export const setup = (port: number) => (config: Configuration) => {
   )
 }
 
-export const server = (compiler: any): WebpackDevServer =>
-  new WebpackDevServer(compiler, devServerConfig())
+export const server = (args: Args) => (compiler: any): WebpackDevServer =>
+  new WebpackDevServer(compiler, devServerConfig(args))

packages/playgrodd-bundler-webpack/src/index.ts

@@ -0,0 +1,13 @@
+import { Bundler, IBundlerFactoryParams } from 'playgrodd-core'
+import { Configuration } from 'webpack'
+import * as WebpackDevServer from 'webpack-dev-server'
+
+import { config, setup, server } from './config.dev'
+
+export const create = (params: IBundlerFactoryParams) =>
+  new Bundler<Configuration, WebpackDevServer>({
+    id: 'webpack',
+    config: config(params),
+    server: server(params),
+    setup: setup(params),
+  })

packages/playgrodd-bundler-webpack/src/loaders.ts

@@ -0,0 +1,15 @@
+import { Loader } from 'webpack'
+
+import * as merge from 'deepmerge'
+import { load } from 'load-cfg'
+
+export const babel: Loader = {
+  loader: require.resolve('babel-loader'),
+  options: merge(load('babel', null), {
+    babelrc: false,
+    cacheDirectory: true,
+    highlightCode: true,
+    presets: [require.resolve('babel-preset-react-app')],
+    plugins: [require.resolve('react-hot-loader/babel')],
+  }),
+}

packages/playgrodd-bundler-webpack/src/types.d.ts

@@ -0,0 +1,2 @@
+declare module 'react-dev-utils/errorOverlayMiddleware'
+declare module 'react-dev-utils/WebpackDevServerUtils'

packages/playgrodd-bundler-webpack/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "types": ["node"],
+    "typeRoots": ["node_modules/@types", "src/types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/**"]
+}

packages/playgrodd-bundler-webpack/tslint.json

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

packages/playgrodd-core/package.json

@@ -1,53 +1,37 @@
 {
   "name": "playgrodd-core",
   "version": "0.0.1",
-  "main": "./dist/main/index.js",
-  "typings": "./dist/main/index.d.ts",
-  "module": "./dist/module/index.js",
+  "main": "dist/index.js",
+  "umd:main": "dist/index.umd.js",
+  "module": "dist/index.m.js",
+  "source": "src/index.ts",
+  "typings": "./dist/index.d.ts",
   "scripts": {
     "copy-templates": "node scripts/copy-templates",
-    "clean": "trash dist && yarn copy-templates",
-    "dev": "run-s clean build:main && run-p \"build:main -- -w\"",
-    "build": "run-s clean && run-p build:*",
-    "build:main": "tsc -p tsconfig.json",
-    "build:module": "tsc -p tsconfig.module.json",
+    "clean": "trash dist",
+    "postclean": "run-s copy-templates",
+    "compile": "tsc -p tsconfig.json",
+    "dev": "run-s clean && run-s \"compile -w\"",
+    "build": "run-s clean && run-s compile",
     "fix": "run-s fix:*",
     "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write",
     "fix:tslint": "tslint --fix --project ."
   },
   "dependencies": {
-    "@babel/core": "^7.0.0-beta.44",
-    "@babel/runtime": "^7.0.0-beta.44",
     "art-template": "^4.12.2",
-    "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",
-    "deepmerge": "^2.1.0",
-    "del": "^3.0.0",
     "express": "^4.16.3",
     "fast-glob": "^2.2.0",
-    "html-webpack-plugin": "^3.2.0",
-    "load-cfg": "^0.0.1",
-    "mkdirp": "^0.5.1",
-    "react-dev-utils": "^5.0.1",
-    "react-hot-loader": "^4.0.1",
-    "webpack": "^4.5.0",
-    "webpack-dev-middleware": "^3.1.2",
-    "webpack-dev-server": "^3.1.3",
-    "webpack-messages": "^1.0.1"
+    "mkdirp": "^0.5.1"
   },
   "devDependencies": {
     "@types/babel-traverse": "^6.25.3",
     "@types/babylon": "^6.16.2",
-    "@types/deepmerge": "^2.1.0",
     "@types/del": "^3.0.1",
     "@types/express": "^4.11.1",
     "@types/mkdirp": "^0.5.2",
-    "@types/webpack": "^4.1.3",
-    "@types/webpack-dev-server": "^2.9.4",
-    "@types/html-webpack-plugin": "^2.30.3",
     "shelljs": "^0.8.1"
   }
 }

packages/playgrodd-core/src/Bundler.ts

@@ -22,11 +22,11 @@ const touch = (file: string, content: string) => {
 const compiled = (templateFile: string) =>
   compile(fs.readFileSync(`${paths.TEMPLATES_PATH}/${templateFile}`, 'utf-8'))
 
-type TConfigFn<C> = (entries: Entry[]) => C
-type TSetupFn<C> = (config: C) => Promise<any>
-type TServerFn<S> = (compiler: any) => S
+export type TConfigFn<C> = (entries: Entry[]) => C
+export type TSetupFn<C> = (config: C) => Promise<any>
+export type TServerFn<S> = (compiler: any) => S
 
-interface IConstructorParams<C, S> {
+export interface IConstructorParams<C, S> {
   id: string
   config: TConfigFn<C>
   setup: TSetupFn<C>
@@ -50,11 +50,11 @@ export class Bundler<C = any, S = any> {
     this.server = server
   }
 
-  public async createCompiler(entries: Entry[]) {
+  public async createCompiler(theme: string, entries: Entry[]) {
     const config = this.config(entries)
 
     await del(paths.PLAYGRODD)
-    touch(paths.APP_JS, app({ entries }))
+    touch(paths.APP_JS, app({ theme, entries }))
     touch(paths.INDEX_JS, js({}))
     touch(paths.INDEX_HTML, html({}))
 
@@ -65,3 +65,12 @@ export class Bundler<C = any, S = any> {
     return await this.server(compiler)
   }
 }
+
+export interface IBundlerFactoryParams {
+  port: number
+  paths: paths.Paths
+}
+
+export interface BundlerFactory {
+  create: (args: IBundlerFactoryParams) => Bundler
+}

packages/playgrodd-core/src/config/paths.ts

@@ -1,6 +1,19 @@
 import * as fs from 'fs'
 import * as path from 'path'
 
+export type Paths = {
+  ROOT: string
+  PLAYGRODD: string
+  PACKAGE_JSON: string
+
+  APP_JS: string
+  INDEX_JS: string
+  INDEX_HTML: string
+  DIST: string
+
+  TEMPLATES_PATH: string
+}
+
 export const ROOT = fs.realpathSync(process.cwd())
 export const PLAYGRODD = path.join(ROOT, '.playgrodd')
 export const PACKAGE_JSON = path.join(ROOT, 'package.json')

packages/playgrodd-core/src/index.ts

@@ -1 +1,5 @@
+export { Paths } from './config/Paths'
+
 export { Server } from './server'
+export { Entry } from './Entry'
+export { Bundler, IBundlerFactoryParams } from './Bundler'