Skip to content

Commit

Permalink
feat(docz-core): add typescript support
Browse files Browse the repository at this point in the history
  • Loading branch information
pedronauck committed May 28, 2018
1 parent 9052d0f commit 17dae8b
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 74 deletions.
2 changes: 2 additions & 0 deletions packages/docz-core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
},
"dependencies": {
"@babel/core": "7.0.0-beta.49",
"@babel/preset-typescript": "^7.0.0-beta.49",
"@babel/runtime": "^7.0.0-beta.49",
"@mdx-js/loader": "^0.9.0",
"@mdx-js/mdx": "^0.9.0",
Expand Down Expand Up @@ -50,6 +51,7 @@
"lodash.get": "^4.4.2",
"prettier": "^1.13.0",
"react-dev-utils": "^5.0.1",
"react-docgen-typescript-loader": "^2.1.0",
"react-hot-loader": "4.2.0",
"remark-frontmatter": "^1.2.0",
"remark-parse": "^5.0.0",
Expand Down
144 changes: 73 additions & 71 deletions packages/docz-core/src/bundlers/webpack/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,58 +9,79 @@ import UglifyJs from 'uglifyjs-webpack-plugin'
import matter from 'remark-frontmatter'
import merge from 'deepmerge'

import { Config as ConfigObj } from '../../commands/args'
import { Config as Args } from '../../commands/args'
import { plugin as mdastPlugin } from '../../utils/plugin-mdast'
import { plugin as hastPlugin } from '../../utils/plugin-hast'
import { BabelRC } from '../../Plugin'
import { Env } from './'

const INLINE_LIMIT = 10000

interface HappypackLoaderParams {
id: string
opts?: BabelRC
}
const uglify = new UglifyJs({
parallel: true,
cache: true,
sourceMap: true,
uglifyOptions: {
parse: {
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
comparisons: false,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
ascii_only: true,
},
},
})

const setupHappypack = (config: Config, args: Args, babelrc: any) => {
const babelLoader: any = {
loader: require.resolve('babel-loader'),
options: merge(babelrc, {
plugins: [require.resolve('react-hot-loader/babel')],
}),
}

const happypackLoader = (babelrc: any) => ({
id,
opts = {},
}: HappypackLoaderParams) => [
{
id,
verbose: false,
const jsx = {
id: 'jsx',
verbose: args.debug,
loaders: [babelLoader],
}

if (!args.typescript) {
babelLoader.options.plugins.push(
require.resolve('babel-plugin-react-docgen')
)
} else {
jsx.loaders.push({
loader: require.resolve('react-docgen-typescript-loader'),
})
}

const mdx = {
id: 'mdx',
verbose: args.debug,
loaders: [
{
loader: require.resolve('babel-loader'),
query: merge(babelrc, opts),
options: babelrc,
},
],
},
]

const setupHappypack = (config: Config, babelrc: any) => {
const loader = happypackLoader(babelrc)

const jsx = loader({
id: 'jsx',
opts: {
plugins: [
require.resolve('react-hot-loader/babel'),
require.resolve('babel-plugin-react-docgen'),
],
},
})

const mdx = loader({
id: 'mdx',
})
}

config.plugin('happypack-jsx').use(HappyPack, jsx)
config.plugin('happypack-mdx').use(HappyPack, mdx)
config.plugin('happypack-jsx').use(HappyPack, [jsx])
config.plugin('happypack-mdx').use(HappyPack, [mdx])
}

export const createConfig = (babelrc: BabelRC) => (
args: ConfigObj,
args: Args,
env: Env
): Config => {
const { paths, debug } = args
Expand Down Expand Up @@ -121,41 +142,12 @@ export const createConfig = (babelrc: BabelRC) => (
chunks: 'all',
name: 'vendors',
},
...(isProd && {
minimizer: [uglify],
}),
},
})

if (isProd) {
config.merge({
optimization: {
minimizer: [
new UglifyJs({
uglifyOptions: {
parse: {
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
comparisons: false,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
ascii_only: true,
},
},
parallel: true,
cache: true,
sourceMap: true,
}),
],
},
})
}

/**
* entries
*/
Expand Down Expand Up @@ -185,8 +177,7 @@ export const createConfig = (babelrc: BabelRC) => (
'.web.jsx',
'.jsx',
'.mdx',
'.ts',
'.tsx',
...(args.typescript ? ['.ts', '.tsx'] : []),
])
.end()
.modules.add('node_modules')
Expand All @@ -212,11 +203,22 @@ export const createConfig = (babelrc: BabelRC) => (
.use('happypack-jsx')
.loader('happypack/loader?id=jsx')

if (args.typescript) {
config.module
.rule('ts')
.test(/\.ts?x$/)
.include.add(srcPath)
.end()
.exclude.add(/node_modules/)
.end()
.use('happypack-jsx')
.loader('happypack/loader?id=jsx')
}

config.module
.rule('mdx')
.test(/\.md?x$/)
.include.add(srcPath)
.add(paths.docz)
.end()
.exclude.add(/node_modules/)
.end()
Expand Down Expand Up @@ -275,7 +277,7 @@ export const createConfig = (babelrc: BabelRC) => (
* plugins
*/

setupHappypack(config, babelrc)
setupHappypack(config, args, babelrc)

config.plugin('assets-plugin').use(manifestPlugin, [
{
Expand Down
6 changes: 6 additions & 0 deletions packages/docz-core/src/commands/args.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export interface Argv {
/* bundler args */
env: string
debug: boolean
typescript: boolean
protocol: string
host: string
port: number
Expand Down Expand Up @@ -51,6 +52,11 @@ export const args = (yargs: any) => {
type: 'string',
default: 'docz-theme-default',
})
yargs.positional('typescript', {
alias: 'ts',
type: 'boolean',
default: false,
})
yargs.positional('debug', {
type: 'boolean',
default: process.env.DEBUG || false,
Expand Down
7 changes: 5 additions & 2 deletions packages/docz-core/src/utils/babelrc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,17 @@ export const babelrc = (args: Config) => {
const config = merge(load('babel', null), {
babelrc: false,
cacheDirectory: !args.debug,
presets: [require.resolve('babel-preset-react-app')],
presets: [
[require.resolve('babel-preset-react-app'), { flow: !args.typescript }],
...(args.typescript ? [require.resolve('@babel/preset-typescript')] : []),
],
plugins: [],
})

return [...(args.plugins || [])].reduce(
(obj, plugin) =>
plugin.modifyBabelRc && isFn(plugin.modifyBabelRc)
? merge(obj, plugin.modifyBabelRc(config))
? plugin.modifyBabelRc(config)
: obj,
config
)
Expand Down
2 changes: 1 addition & 1 deletion packages/docz/src/components/PropsTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export type TooltipComponent = React.ComponentType<{
const getValue = (value: string) => value.replace(/\'/g, '')

const getPropType = (prop: Prop, Tooltip?: TooltipComponent) => {
const name = prop.type.name.toUpperCase()
const name = prop.type.name

if (!Tooltip || !prop.type.value) return name

Expand Down
46 changes: 46 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -563,6 +563,12 @@
dependencies:
"@babel/helper-plugin-utils" "7.0.0-beta.49"

"@babel/[email protected]":
version "7.0.0-beta.49"
resolved "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.0.0-beta.49.tgz#332b6d17c28904981465f69f111646ef7a5ede10"
dependencies:
"@babel/helper-plugin-utils" "7.0.0-beta.49"

"@babel/[email protected]":
version "7.0.0-beta.42"
resolved "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.0.0-beta.42.tgz#b918eb8760c38d6503a1a9858fa073786b60ab2b"
Expand Down Expand Up @@ -1000,6 +1006,13 @@
dependencies:
"@babel/helper-plugin-utils" "7.0.0-beta.49"

"@babel/[email protected]":
version "7.0.0-beta.49"
resolved "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.0.0-beta.49.tgz#1f81fb756e033df6c396b2fffc1ba573a97c8a19"
dependencies:
"@babel/helper-plugin-utils" "7.0.0-beta.49"
"@babel/plugin-syntax-typescript" "7.0.0-beta.49"

"@babel/[email protected]":
version "7.0.0-beta.42"
resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.0.0-beta.42.tgz#1e7bdcf678d9a9066d06e6d334ab41ca11ca00ad"
Expand Down Expand Up @@ -1132,6 +1145,13 @@
"@babel/plugin-transform-react-jsx-self" "7.0.0-beta.49"
"@babel/plugin-transform-react-jsx-source" "7.0.0-beta.49"

"@babel/preset-typescript@^7.0.0-beta.49":
version "7.0.0-beta.49"
resolved "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.0.0-beta.49.tgz#20a3c4a2f815efe7416f756b433c0fd9907a47ad"
dependencies:
"@babel/helper-plugin-utils" "7.0.0-beta.49"
"@babel/plugin-transform-typescript" "7.0.0-beta.49"

"@babel/runtime@^7.0.0-beta.49":
version "7.0.0-beta.49"
resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.49.tgz#03b3bf07eb982072c8e851dd2ddd5110282e61bf"
Expand Down Expand Up @@ -1782,6 +1802,15 @@ ajv@^6.0.1, ajv@^6.1.0:
json-schema-traverse "^0.3.0"
uri-js "^3.0.2"

ajv@^6.5.0:
version "6.5.0"
resolved "https://registry.npmjs.org/ajv/-/ajv-6.5.0.tgz#4c8affdf80887d8f132c9c52ab8a2dc4d0b7b24c"
dependencies:
fast-deep-equal "^2.0.1"
fast-json-stable-stringify "^2.0.0"
json-schema-traverse "^0.3.0"
uri-js "^4.2.1"

align-text@^0.1.1, align-text@^0.1.3:
version "0.1.4"
resolved "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
Expand Down Expand Up @@ -6990,6 +7019,17 @@ react-dev-utils@^5.0.1:
strip-ansi "3.0.1"
text-table "0.2.0"

react-docgen-typescript-loader@^2.1.0:
version "2.1.0"
resolved "https://registry.npmjs.org/react-docgen-typescript-loader/-/react-docgen-typescript-loader-2.1.0.tgz#f3a069bf6f3657b976d17d62b1580b204f264597"
dependencies:
ajv "^6.5.0"
react-docgen-typescript "^1.5.0"

react-docgen-typescript@^1.5.0:
version "1.5.0"
resolved "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-1.5.0.tgz#64f5dd5ff6540c7095433189a7e0e78441041d93"

react-docgen@^3.0.0-beta11:
version "3.0.0-beta9"
resolved "https://registry.npmjs.org/react-docgen/-/react-docgen-3.0.0-beta9.tgz#6be987e640786ecb10ce2dd22157a022c8285e95"
Expand Down Expand Up @@ -8840,6 +8880,12 @@ uri-js@^3.0.2:
dependencies:
punycode "^2.1.0"

uri-js@^4.2.1:
version "4.2.2"
resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
dependencies:
punycode "^2.1.0"

urix@^0.1.0:
version "0.1.0"
resolved "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
Expand Down

0 comments on commit 17dae8b

Please sign in to comment.