feat(docz-core): add some improvements to work with server config

packages/playgrodd-bundler-webpack/src/config-devserver.ts

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

packages/playgrodd-bundler-webpack/src/config.dev.ts

@@ -4,75 +4,75 @@ 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 { IBundlerFactoryParams as Args, Entry } from 'playgrodd-core'
+import { ConfigArgs as Config, Entry } from 'playgrodd-core'
 
 import { devServerConfig } from './config-devserver'
 import * as loaders from './loaders'
 
-const HOST = process.env.HOST || '0.0.0.0'
-
-export const config = ({ paths }: Args) => (
+export const config = ({ paths, host, src }: Config) => (
   entries: Entry[]
-): Configuration => ({
-  mode: 'development',
-  context: paths.ROOT,
-  devtool: '#source-map',
-  entry: [
-    require.resolve('babel-polyfill'),
-    require.resolve('react-dev-utils/webpackHotDevClient'),
-    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: [
-      {
-        oneOf: [
-          {
-            test: /\.(js|jsx|mjs)$/,
-            exclude: /node_modules/,
-            include: [paths.ROOT],
-            use: [require.resolve('thread-loader'), loaders.babel],
-          },
-        ],
-      },
+): Configuration => {
+  const srcPath = path.resolve(paths.root, src)
+
+  return {
+    mode: 'development',
+    devtool: '#source-map',
+    context: paths.root,
+    entry: [
+      require.resolve('babel-polyfill'),
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      paths.indexJs,
     ],
-  },
-  resolve: {
-    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
-    modules: [paths.ROOT, 'node_modules'],
-    alias: {
-      '@babel/runtime': path.dirname(
-        require.resolve('@babel/runtime/package.json')
-      ),
+    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: [
+        {
+          oneOf: [
+            {
+              test: /\.(js|jsx|mjs)$/,
+              exclude: /node_modules/,
+              include: [srcPath, paths.playgrodd],
+              use: [require.resolve('thread-loader'), loaders.babel],
+            },
+          ],
+        },
+      ],
     },
-  },
-  devServer: {
-    logLevel: 'silent',
-  },
-  plugins: [
-    new webpack.NamedModulesPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.INDEX_HTML,
-    }),
-  ],
-})
+    resolve: {
+      extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
+      modules: ['node_modules', srcPath],
+      alias: {
+        '@babel/runtime': path.dirname(
+          require.resolve('@babel/runtime/package.json')
+        ),
+      },
+    },
+    plugins: [
+      new webpack.NamedModulesPlugin(),
+      new webpack.HotModuleReplacementPlugin(),
+      new webpack.NoEmitOnErrorsPlugin(),
+      new HtmlWebpackPlugin({
+        inject: true,
+        template: paths.indexHtml,
+      }),
+    ],
+  }
+}
 
-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)
+export const setup = ({ paths, port, host, protocol }: Config) => (
+  config: Configuration
+) => {
+  const appName = require(paths.packageJson).name
+  const urls = webpackDevServerUtils.prepareUrls(protocol, host, port)
 
   return webpackDevServerUtils.createCompiler(
     webpack,
@@ -83,5 +83,5 @@ export const setup = ({ paths, port }: Args) => (config: Configuration) => {
   )
 }
 
-export const server = (args: Args) => (compiler: any): WebpackDevServer =>
-  new WebpackDevServer(compiler, devServerConfig(args))
+export const server = (config: Config) => (compiler: any): WebpackDevServer =>
+  new WebpackDevServer(compiler, devServerConfig(config))

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

@@ -1,13 +1,15 @@
-import { Bundler, IBundlerFactoryParams } from 'playgrodd-core'
 import { Configuration } from 'webpack'
+import { createBundler, IBundlerCreate } from 'playgrodd-core'
 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),
-  })
+export const bundler: IBundlerCreate<
+  Configuration,
+  WebpackDevServer
+> = createBundler<Configuration, WebpackDevServer>({
+  id: 'webpack',
+  config,
+  server,
+  setup,
+})

packages/playgrodd-core/src/Bundler.ts

@@ -5,6 +5,7 @@ import { compile } from 'art-template'
 
 import * as paths from './config/paths'
 import { Entry } from './Entry'
+import { ConfigArgs } from './Server'
 
 const mkd = (dir: string): void => {
   try {
@@ -15,18 +16,22 @@ const mkd = (dir: string): void => {
 }
 
 const touch = (file: string, content: string) => {
-  mkd(paths.PLAYGRODD)
+  mkd(paths.playgrodd)
   fs.writeFileSync(file, content, 'utf-8')
 }
 
 const compiled = (templateFile: string) =>
-  compile(fs.readFileSync(`${paths.TEMPLATES_PATH}/${templateFile}`, 'utf-8'))
+  compile(fs.readFileSync(`${paths.templatesPath}/${templateFile}`, 'utf-8'))
 
 export type TConfigFn<C> = (entries: Entry[]) => C
 export type TSetupFn<C> = (config: C) => Promise<any>
 export type TServerFn<S> = (compiler: any) => S
 
-export interface IConstructorParams<C, S> {
+export interface ICompilerOpts {
+  theme: string
+}
+
+export interface IConstructorParams<C, S> extends ICompilerOpts {
   id: string
   config: TConfigFn<C>
   setup: TSetupFn<C>
@@ -39,24 +44,27 @@ const html = compiled('index.tpl.html')
 
 export class Bundler<C = any, S = any> {
   readonly id: string
+  readonly theme: string
   private config: TConfigFn<C>
   private setup: TSetupFn<C>
   private server: TServerFn<S>
 
-  constructor({ id, config, setup, server }: IConstructorParams<C, S>) {
+  constructor({ id, config, theme, setup, server }: IConstructorParams<C, S>) {
     this.id = id
+    this.theme = theme
     this.config = config
     this.setup = setup
     this.server = server
   }
 
-  public async createCompiler(theme: string, entries: Entry[]) {
+  public async createCompiler(entries: Entry[]) {
+    const { theme } = this
     const config = this.config(entries)
 
-    await del(paths.PLAYGRODD)
-    touch(paths.APP_JS, app({ theme, entries }))
-    touch(paths.INDEX_JS, js({}))
-    touch(paths.INDEX_HTML, html({}))
+    await del(paths.playgrodd)
+    touch(paths.appJs, app({ theme, entries }))
+    touch(paths.indexJs, js({}))
+    touch(paths.indexHtml, html({}))
 
     return await this.setup(config)
   }
@@ -66,11 +74,26 @@ export class Bundler<C = any, S = any> {
   }
 }
 
-export interface IBundlerFactoryParams {
-  port: number
-  paths: paths.Paths
+export interface IFactory<C, S> {
+  id: string
+  config: (args: ConfigArgs) => TConfigFn<C>
+  setup: (args: ConfigArgs) => TSetupFn<C>
+  server: (args: ConfigArgs) => TServerFn<S>
+}
+
+export interface IBundlerCreate<C, S> {
+  (args: ConfigArgs): Bundler<C, S>
 }
 
-export interface BundlerFactory {
-  create: (args: IBundlerFactoryParams) => Bundler
+export function createBundler<C, S>(
+  factory: IFactory<C, S>
+): IBundlerCreate<C, S> {
+  return (args: ConfigArgs): Bundler<C, S> =>
+    new Bundler({
+      id: factory.id,
+      theme: args.theme,
+      config: factory.config(args),
+      setup: factory.setup(args),
+      server: factory.server(args),
+    })
 }

packages/playgrodd-core/src/Entries.ts

@@ -37,7 +37,9 @@ export class Entries {
     )
   }
 
-  public parse(): Entry[] {
-    return this.files.filter(isPlaygroddFile).map(file => new Entry(file))
+  public parse(src: string): Entry[] {
+    return this.files
+      .filter(isPlaygroddFile)
+      .map(file => new Entry({ file, src }))
   }
 }

packages/playgrodd-core/src/Entry.ts

@@ -17,16 +17,22 @@ const getNameFromDoc = traverseAndAssign<any, string>(
   path => path.node.arguments[0].value
 )
 
+export interface IConstructorParams {
+  file: string
+  src: string
+}
+
 export class Entry {
   public name: string
   public filepath: string
   public route: string
 
-  constructor(file: string) {
+  constructor({ src, file }: IConstructorParams) {
     const ast = convertToAst(file)
     const name = getNameFromDoc(ast) || ''
     const route = path.join('/', path.parse(file).dir, name)
-    const filepath = path.relative(paths.ROOT, file)
+    const source = path.relative(paths.root, src)
+    const filepath = path.relative(source, file)
 
     this.name = name
     this.route = route

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

@@ -2,25 +2,23 @@ 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
+  root: string
+  playgrodd: string
+  packageJson: string
+  appJs: string
+  indexJs: string
+  indexHtml: string
+  dist: string
+  templatesPath: string
 }
 
-export const ROOT = fs.realpathSync(process.cwd())
-export const PLAYGRODD = path.join(ROOT, '.playgrodd')
-export const PACKAGE_JSON = path.join(ROOT, 'package.json')
+export const root = fs.realpathSync(process.cwd())
+export const playgrodd = path.resolve(root, '.playgrodd')
+export const packageJson = path.resolve(root, 'package.json')
 
-export const APP_JS = path.join(PLAYGRODD, 'app.jsx')
-export const INDEX_JS = path.join(PLAYGRODD, 'index.jsx')
-export const INDEX_HTML = path.join(PLAYGRODD, 'index.html')
-export const DIST = path.join(PLAYGRODD, 'dist')
+export const appJs = path.resolve(playgrodd, 'app.jsx')
+export const indexJs = path.resolve(playgrodd, 'index.jsx')
+export const indexHtml = path.resolve(playgrodd, 'index.html')
+export const dist = path.resolve(playgrodd, 'dist/')
 
-export const TEMPLATES_PATH = path.join(__dirname, '../../templates')
+export const templatesPath = path.resolve(__dirname, '../../templates')

packages/playgrodd-core/src/index.ts

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