chore: split packages

packages/playgrodd-core/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "playgrodd-core",
+  "version": "0.0.1",
+  "main": "./dist/main/index.jsx",
+  "typings": "./dist/main/index.d.ts",
+  "module": "./dist/module/index.jsx",
+  "source": "src/index.ts",
+  "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 .",
+    "clean": "trash dist"
+  },
+  "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"
+  }
+}

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

@@ -1,15 +1,13 @@
-import fs from 'fs'
+import * as 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 { IEntryObj } from './files-parser'
+import { createConfig } from './create-config'
 import { generateHtml, generateJs } from './generate-files'
 
-export { config as devServerConfig } from './dev-server'
-
 const checkMkdirTheme = (): void => {
   try {
     fs.lstatSync(paths.THEME)
@@ -23,10 +21,10 @@ const tempFile = (filepath: string, content: string) => {
   fs.writeFileSync(filepath, content, 'utf-8')
 }
 
-export const createCompiler = async (components: IComponentMap) => {
+export const createCompiler = async (entries: IEntryObj[]) => {
   const js = generateJs()
   const html = generateHtml()
-  const webpackConfig = await config(components)
+  const webpackConfig = await createConfig(entries)
 
   await trash(paths.THEME)
   tempFile(paths.INDEX_JS, js)

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

@@ -1,13 +1,11 @@
 import * as fs from 'fs'
 import * as path from 'path'
 import findup from 'find-up'
-import webpack, { Loader, Configuration } from 'webpack'
+import { 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'
+import { IEntryObj } from './files-parser'
 
 const babelLoader = (babelrc: string | null): Loader => ({
   loader: require.resolve('babel-loader'),
@@ -23,8 +21,8 @@ const babelLoader = (babelrc: string | null): Loader => ({
       },
 })
 
-export const config = async (
-  components: IComponentMap
+export const createConfig = async (
+  entries: IEntryObj[]
 ): Promise<Configuration> => {
   const babelrcPath = await findup('.babelrc')
   const babelrc = babelrcPath ? fs.readFileSync(babelrcPath, 'utf-8') : null
@@ -32,10 +30,7 @@ export const config = async (
   return {
     mode: 'development',
     context: paths.ROOT,
-    entry: [
-      ...Object.values(components).map(({ filepath: f }) => f),
-      paths.INDEX_JS,
-    ],
+    entry: [...entries.map(entry => entry.filepath), paths.INDEX_JS],
     output: {
       pathinfo: true,
       path: paths.DIST,
@@ -58,11 +53,12 @@ export const config = async (
     },
     resolve: {
       extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+      modules: [paths.ROOT, 'node_modules'],
+      alias: {
+        src: path.join(paths.ROOT, 'src'),
+      },
     },
     plugins: [
-      new webpack.DefinePlugin({
-        __PLAYGRODD_COMPONENTS__: JSON.stringify(components),
-      }),
       new HtmlWebpackPlugin({
         template: paths.INDEX_HTML,
       }),

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

@@ -3,7 +3,7 @@ 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) => ({
+export const devServer = (compiler: any) => ({
   compress: true,
   clientLogLevel: 'none',
   contentBase: paths.DIST,

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

@@ -5,17 +5,7 @@ import { parse } from 'babylon'
 import { NodePath } from 'babel-traverse'
 import * as t from 'babel-types'
 
-import { traverseAndAssign } from './traverse'
-
-export interface IComponent {
-  readonly id: string
-  readonly route: string
-  readonly filepath: string
-}
-
-export interface IComponentMap {
-  readonly [key: string]: IComponent
-}
+import { traverseAndAssign } from '../utils/traverse'
 
 const ROOT_PATH = fs.realpathSync(process.cwd())
 
@@ -51,25 +41,30 @@ const getNameFromDoc = traverseAndAssign<any, string>(
   path => path.node.arguments[0].value
 )
 
-const reduceByName = (obj: any, entry: string): IComponentMap => {
-  const ast = convertToAst(entry)
-  const name = getNameFromDoc(ast)
-  const route = path.join('/', path.parse(entry).dir, name || '')
-  const filepath = path.join(ROOT_PATH, entry)
-
-  return Object.assign({}, obj, {
-    [`${name}`]: {
-      filepath,
-      route,
-    },
-  })
+export interface IEntryObj {
+  name: string
+  filepath: string
+  route: string
 }
 
-export const componentsFromPattern = (pattern: string): IComponentMap => {
+const mountEntriesMapper = (file: string): IEntryObj => {
+  const ast = convertToAst(file)
+  const name = getNameFromDoc(ast) || ''
+  const route = path.join('/', path.parse(file).dir, name)
+  const filepath = path.relative(ROOT_PATH, file)
+
+  return {
+    name,
+    route,
+    filepath,
+  }
+}
+
+export const entriesMapper = (pattern: string): IEntryObj[] => {
   const ignoreGlob = '!node_modules'
-  const entries: string[] = glob.sync(
+  const files: string[] = glob.sync(
     Array.isArray(pattern) ? [...pattern, ignoreGlob] : [pattern, ignoreGlob]
   )
 
-  return entries.filter(isPlaygroddFile).reduce(reduceByName, {})
+  return files.filter(isPlaygroddFile).map(mountEntriesMapper)
 }

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

@@ -1,7 +1,4 @@
-import * as React from 'react'
-import { renderToString } from 'react-dom/server'
-
-const Html = () => (
+export const generateHtml = () => `
   <html>
     <head>
       <title>Playgrodd</title>
@@ -10,18 +7,16 @@ const Html = () => (
       </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'
+  import { Theme } from 'playgrodd-theme-default'
 
   render(
-    <App />,
+    <Theme />,
     document.querySelector('#root')
   )`

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

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

packages/playgrodd-core/src/index.ts

@@ -0,0 +1 @@
+export { server } from './server'

packages/playgrodd-core/src/server.ts

@@ -0,0 +1,23 @@
+// /import { Arguments } from 'yargs'
+
+// import { entriesMapper } from './compiler'
+// import { createCompiler, devServer } from './compiler'
+
+// import * as Koa from 'koa'
+// const historyApiFallback = require('connect-history-api-fallback')
+// const devServerMiddleware = require('webpack-dev-middleware')
+// const hotMiddleware = require('webpack-hot-middleware')
+
+// console.log(Koa)
+
+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!')
+  // })
+}

packages/playgrodd-core/src/utils/helpers.ts

@@ -0,0 +1 @@
+export const isFn = (value: any): boolean => typeof value === 'function'

packages/playgrodd-core/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/main",
+    "rootDir": "src",
+    "types": ["node"],
+    "typeRoots": ["node_modules/@types", "src/types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/**"]
+}

packages/playgrodd-core/tslint.json

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

packages/playgrodd/src/components/Html.tsx

@@ -1,12 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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/documents/container.ts

@@ -1,21 +0,0 @@
-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()

packages/playgrodd/src/server.ts

@@ -1,22 +0,0 @@
-import express from 'express'
-import { Arguments } from 'yargs'
-import devServerMiddleware from 'webpack-dev-middleware'
-import historyApiFallback from 'connect-history-api-fallback'
-import hotMiddleware from 'webpack-hot-middleware'
-
-import { componentsFromPattern } from './utils/components'
-import { createCompiler, devServerConfig } from './compiler'
-
-exports.server = async ({ files: pattern }: Arguments) => {
-  const app = express()
-  const components = await componentsFromPattern(pattern)
-  const compiler = await createCompiler(components)
-
-  app.use(historyApiFallback())
-  app.use(hotMiddleware(compiler, { log: false, heartbeat: 2000 }))
-  app.use(devServerMiddleware(compiler, devServerConfig(compiler)))
-
-  app.listen(3000, () => {
-    console.log('Example app listening on port 3000!')
-  })
-}