feat(playgrodd): add components parser

examples/basic/.gitignore

@@ -0,0 +1 @@
+.playgrodd

examples/basic/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "playgrodd start"
   },
-  "devDependencies": {
+  "dependencies": {
     "playgrodd": "0.0.0"
   }
 }

examples/basic/src/Button.doc.jsx

@@ -1,4 +1,10 @@
-import { doc } from 'playgrodd'
-import { Button } from './'
+/**
+ * @playgrodd
+ * @name: Button
+ */
 
-doc('Button', () => <Button>Click me</Button>)
+import React from 'react'
+import { doc } from 'playgrodd'
+import { Button } from './Button'
+
+doc(() => <Button>Click me</Button>)

examples/basic/src/Button.jsx

@@ -1,5 +1,3 @@
 import React from 'react'
 
-export const Button = ({ children, ...props }) => (
-  <button {...props}>{children}</button>
-)
+export const Button = ({ children }) => <button>{children}</button>

packages/playgrood/bin/index.js

@@ -1,19 +1,20 @@
 #!/usr/bin/env node
 
-const { server } = require('../src/server')
+const yargs = require('yargs')
+const { server } = require('../build/main/server')
 
-require('yargs')
+yargs
   .command(
     'start [files]',
     'initialize the playground server',
     yargs => {
       yargs.positional('files', {
         type: 'string',
-        default: '**/*.doc.js',
+        default: '**/*.doc.(js|jsx)',
         describe: 'files that you want to document',
       })
     },
-    argv => server(argv)
+    server
   )
   .demandCommand()
   .help()

packages/playgrood/package.json

@@ -1,12 +1,48 @@
 {
   "name": "playgrodd",
+  "description": "Blazing fast and zero config React components playground",
   "version": "0.0.0",
   "preferGlobal": true,
-  "main": "src/index.js",
+  "main": "./build/main/index.js",
+  "typings": "./build/main/index.d.ts",
+  "module": "./build/module/index.js",
   "bin": {
     "playgrodd": "./bin/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\" --write",
+    "fix:tslint": "tslint --fix --project .",
+    "watch": "run-s clean build:main && run-p \"build:main -- -w\"",
+    "clean": "trash build"
+  },
   "dependencies": {
+    "babylon": "^6.18.0",
+    "emotion": "^9.0.2",
+    "express": "^4.16.3",
+    "fast-glob": "^2.2.0",
+    "parcel-bundler": "^1.6.2",
+    "prop-types": "^15.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-emotion": "^9.0.2",
+    "uuid": "^3.2.1",
     "yargs": "^11.0.0"
+  },
+  "devDependencies": {
+    "@types/babylon": "^6.16.2",
+    "@types/express": "^4.11.1",
+    "@types/node": "^9.4.7",
+    "@types/uuid": "^3.4.3",
+    "@types/yargs": "^11.0.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"
   }
 }

packages/playgrood/src/index.js

@@ -1 +0,0 @@
-const doc = render => render

packages/playgrood/src/index.ts

@@ -0,0 +1 @@
+const doc = () => null

packages/playgrood/src/server.js

@@ -1,3 +0,0 @@
-exports.server = argv => {
-  console.log(argv)
-}

packages/playgrood/src/server.ts

@@ -0,0 +1,13 @@
+import express from 'express'
+import { Arguments } from 'yargs'
+
+import { componentsFromPattern } from './utils/components'
+
+exports.server = async ({ files: pattern }: Arguments) => {
+  const app = express()
+  const components = componentsFromPattern(pattern)
+
+  console.log(components)
+
+  app.listen(3000)
+}

packages/playgrood/src/types.d.ts

@@ -0,0 +1,4 @@
+declare module 'parcel-bundler' {
+  var Bundler: any
+  export default Bundler
+}

packages/playgrood/src/utils/components.ts

@@ -0,0 +1,53 @@
+import fs from 'fs'
+import path from 'path'
+import glob from 'fast-glob'
+import { v4 } from 'uuid'
+import { parse } from 'babylon'
+import { File, Comment } from 'babel-types'
+
+export interface Component {
+  readonly id: string
+  readonly filepath: string
+  readonly route: string
+  readonly name: string | null
+  readonly hasManifest: boolean
+}
+
+const ROOT_PATH = fs.realpathSync(process.cwd())
+
+const convertToAst = (entry: string): File =>
+  parse(fs.readFileSync(entry, 'utf-8'), {
+    sourceType: 'module',
+    plugins: ['jsx'],
+  })
+
+const findManifest = ({ comments }: File): Comment | undefined =>
+  comments.find(({ value }) => /\@playgrodd/.test(value))
+
+const nameOnManifest = (manifest: Comment | undefined): string | null => {
+  const match = manifest && manifest.value.match(/(?:\@name\:\s)(\w+)/)
+  return match ? match[1] : null
+}
+
+const parseEntry = (entry: string) => {
+  const ast = convertToAst(entry)
+  const manifest = findManifest(ast)
+  const name = nameOnManifest(manifest)
+  const route = path.join(path.parse(entry).dir, name || '')
+  const filepath = path.join(ROOT_PATH, entry)
+
+  return {
+    id: v4(),
+    name,
+    filepath,
+    route,
+    hasManifest: !!manifest,
+  }
+}
+
+const filterByManifest = (component: Component) => !!component.hasManifest
+
+export const componentsFromPattern = (pattern: string): Component[] => {
+  const entries: string[] = glob.sync(pattern)
+  return entries.map(parseEntry).filter(filterByManifest)
+}

packages/playgrood/tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "outDir": "build/main",
+    "rootDir": "src",
+    "moduleResolution": "node",
+    "module": "commonjs",
+    "declaration": true,
+    "inlineSourceMap": true,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+
+    "strict": true /* Enable all strict type-checking options. */,
+
+    /* Strict Type-Checking Options */
+    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": true /* Enable strict null checks. */,
+    "strictFunctionTypes": true /* Enable strict checking of function types. */,
+    "strictPropertyInitialization": true /* Enable strict checking of property initialization in classes. */,
+    "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
+    "alwaysStrict": true /* Parse in strict mode and emit "use strict" for each source file. */,
+
+    /* Additional Checks */
+    "noUnusedLocals": true /* Report errors on unused locals. */,
+    "noUnusedParameters": true /* Report errors on unused parameters. */,
+    "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
+    "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
+
+    /* Debugging Options */
+    "traceResolution": false /* Report module resolution log messages. */,
+    "listEmittedFiles": false /* Print names of generated files part of the compilation. */,
+    "listFiles": false /* Print names of files part of the compilation. */,
+    "pretty": true /* Stylize errors and messages using color and context. */,
+
+    /* Experimental Options */
+    // "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
+    // "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */,
+
+    "lib": ["es2017"],
+    "types": ["node"],
+    "typeRoots": ["node_modules/@types", "src/types"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules/**"],
+  "compileOnSave": false
+}

packages/playgrood/tsconfig.module.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "target": "esnext",
+    "outDir": "build/module",
+    "module": "esnext"
+  },
+  "exclude": [
+    "node_modules/**"
+  ]
+}

packages/playgrood/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": ["tslint:latest", "tslint-config-prettier"],
+  "rules": {
+    "interface-name": [true, "never-prefix"],
+    "ordered-imports": false,
+    "object-literal-sort-keys": [true, "ignore-case", "shorthand-first"],
+
+    // TODO: allow devDependencies only in **/*.spec.ts files:
+    // waiting on https://github.com/palantir/tslint/pull/3708
+    "no-implicit-dependencies": [true, "dev"],
+
+    // Recommended built-in rules
+    "no-var-keyword": true,
+    "no-parameter-reassignment": true,
+    "typedef": [true, "call-signature"],
+  }
+}