From ec45c8582ae026045c79ea817ba8a004a972f01d Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 19 Nov 2017 21:27:44 +0200 Subject: [PATCH] umd bundle --- .gitignore | 1 + .npmignore | 10 ++---- package.json | 13 +++++--- src/components/Redoc/Redoc.tsx | 2 +- src/components/Redoc/elements.tsx | 1 + src/components/RedocStandalone.tsx | 4 +-- src/components/index.ts | 2 +- src/styled-components.ts | 2 +- tsconfig.json | 1 + webpack.config.js | 49 ++++++++++++++++-------------- yarn.lock | 4 +++ 11 files changed, 48 insertions(+), 41 deletions(-) diff --git a/.gitignore b/.gitignore index f8cc68f9..ea0403b8 100644 --- a/.gitignore +++ b/.gitignore @@ -24,6 +24,7 @@ lib/ stats.json e2e/build/ cypress/ +bundles /coverage .ghpages-tmp diff --git a/.npmignore b/.npmignore index dd64d4ef..5f87409c 100644 --- a/.npmignore +++ b/.npmignore @@ -1,8 +1,2 @@ -.DS_Store -**/.* - -node_modules/ - -perf/ -demo/ -coverage/ +!bundles/ +!package.json diff --git a/package.json b/package.json index 24cee077..4da35193 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "name": "redoc", "version": "2.0.0", "description": "ReDoc", - "main": "lib/index.js", + "main": "bundles/redoc.lib.js", "scripts": { "start": "webpack-dev-server --hot", "start:perf": "webpack-dev-server --env.prod --env.perf", @@ -16,7 +16,9 @@ "e2e:clean": "rimraf e2e/.build", "cy:open": "cypress open", "bundle:clean": "rimraf bundles", - "bundle": "npm run bundle:clean && webpack -p --env.prod --env.standalone", + "bundle:standalone": "webpack -p --env.prod --env.standalone", + "bundle:lib": "webpack -p --env.prod", + "bundle": "npm run bundle:clean && npm run bundle:lib && npm run bundle:standalone", "stats": "webpack -p --env.prod --json --profile > stats.json", "prettier": "prettier --write \"src/**/*.{ts,tsx}\"" }, @@ -38,6 +40,7 @@ "@types/webpack": "^3.0.5", "@types/webpack-env": "^1.13.0", "awesome-typescript-loader": "^3.2.2", + "core-js": "^2.5.1", "css-loader": "^0.28.7", "cypress": "^1.0.3", "enzyme": "^3.1.1", @@ -45,6 +48,7 @@ "enzyme-to-json": "^3.2.2", "extract-text-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^2.30.1", + "http-server": "^0.10.0", "jest": "^21.1.0", "mobx-react-devtools": "^4.2.15", "prettier": "^1.5.3", @@ -53,6 +57,7 @@ "raf": "^3.4.0", "react-dev-utils": "^4.1.0", "react-hot-loader": "3.0.0-beta.6", + "rimraf": "^2.6.2", "source-map-loader": "^0.2.1", "style-loader": "^0.18.2", "ts-jest": "^21.0.1", @@ -61,9 +66,7 @@ "webpack": "^3.4.1", "webpack-dashboard": "^0.4.0", "webpack-dev-server": "^2.6.1", - "http-server": "^0.10.0", - "core-js": "^2.5.1", - "rimraf": "^2.6.2" + "webpack-node-externals": "^1.6.0" }, "dependencies": { "decko": "^1.2.0", diff --git a/src/components/Redoc/Redoc.tsx b/src/components/Redoc/Redoc.tsx index 5e1e0854..c8619441 100644 --- a/src/components/Redoc/Redoc.tsx +++ b/src/components/Redoc/Redoc.tsx @@ -11,7 +11,7 @@ import { AppStore } from '../../services'; import defaultTheme from '../../theme'; -interface RedocProps { +export interface RedocProps { store: AppStore; options?: { theme?: ThemeInterface; diff --git a/src/components/Redoc/elements.tsx b/src/components/Redoc/elements.tsx index facaead6..50feb92f 100644 --- a/src/components/Redoc/elements.tsx +++ b/src/components/Redoc/elements.tsx @@ -1,5 +1,6 @@ import { hoverColor } from '../../common-elements/mixins'; import styled from '../../styled-components'; +export { ClassAttributes } from 'react'; export const RedocWrap = styled.div` overflow: hidden; diff --git a/src/components/RedocStandalone.tsx b/src/components/RedocStandalone.tsx index 97a725e2..c28cdee2 100644 --- a/src/components/RedocStandalone.tsx +++ b/src/components/RedocStandalone.tsx @@ -7,14 +7,14 @@ import { StoreProvider } from './StoreProvider'; import { ErrorBoundary } from './ErrorBoundary'; import { Redoc } from './Redoc/Redoc'; -export interface RedocProps { +export interface RedocStandaloneProps { specOrSpecUrl: string | object; options?: { theme?: ThemeInterface; }; } -export class RedocStandalone extends React.Component { +export class RedocStandalone extends React.Component { render() { const { specOrSpecUrl, options } = this.props; let specUrl; diff --git a/src/components/index.ts b/src/components/index.ts index 233dd8ec..60cfee17 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,6 +1,6 @@ export * from './RedocStandalone'; export * from './Redoc/Redoc'; -export * from './Redoc/elements'; +// export * from './Redoc/elements'; export * from './Schema/'; export * from './Operation/Operation'; export * from './RedocStandalone'; diff --git a/src/styled-components.ts b/src/styled-components.ts index 783d3c10..187bdbb8 100644 --- a/src/styled-components.ts +++ b/src/styled-components.ts @@ -3,7 +3,7 @@ import { ThemedStyledComponentsModule } from 'styled-components'; import { ThemeInterface } from './theme'; -type StyledFunction = styledComponents.ThemedStyledFunction; +export type StyledFunction = styledComponents.ThemedStyledFunction; function withProps( styledFunction: StyledFunction>, diff --git a/tsconfig.json b/tsconfig.json index 3e971d64..1f29a13d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,6 +9,7 @@ "noUnusedParameters": true, "strictNullChecks": true, "sourceMap": true, + // "declaration": true, "outDir": "lib", "pretty": true, "lib": [ diff --git a/webpack.config.js b/webpack.config.js index 04e29915..8640023b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,6 +2,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); const DashboardPlugin = require('webpack-dashboard/plugin'); +const nodeExternals = require('webpack-node-externals'); module.exports = env => { env = env || {}; @@ -11,19 +12,21 @@ module.exports = env => { entry = ['./src/polyfills.ts', './src/standalone.tsx']; } else { entry = env.prod - ? env.perf ? ['./perf/index.tsx'] : ['./src/hmr-playground.tsx'] - : [ - 'react-dev-utils/webpackHotDevClient', - 'react-hot-loader/patch', - './src/hmr-playground.tsx', - ]; + ? './src/index.ts' + : env.perf + ? ['./perf/index.tsx'] + : [ + 'react-dev-utils/webpackHotDevClient', + 'react-hot-loader/patch', + './src/hmr-playground.tsx', + ]; } const config = { entry: entry, output: { - filename: env.standalone ? 'redoc.standalone.js' : 'redoc.bundle.js', + filename: env.standalone ? 'redoc.standalone.js' : 'redoc.lib.js', path: __dirname + '/bundles', }, @@ -69,18 +72,11 @@ module.exports = env => { }, { test: /\.css$/, - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: [ - { - loader: 'css-loader', - options: { - sourceMap: true, - minimize: true, - }, - }, - ], - }), + loader: 'css-loader', + options: { + sourceMap: true, + minimize: true, + }, }, { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }, ], @@ -90,20 +86,27 @@ module.exports = env => { 'process.env.NODE_ENV': env.prod ? '"production"' : '"development"', __DEV__: env.prod ? 'false' : 'true', }), - new ExtractTextPlugin({ - filename: 'redoc.css', - allChunks: true, - }), new HtmlWebpackPlugin({ template: './demo/index.html', }), new webpack.NamedModulesPlugin(), ], }; + if (env.prod) { config.plugins.push(new webpack.optimize.ModuleConcatenationPlugin()); } else { config.plugins.push(new DashboardPlugin()); } + + if (env.prod && !env.standalone) { + config.externals = nodeExternals({ + // bundle in moudules that need transpiling + non-js (e.g. css) + whitelist: ['swagger2openapi', 'reftools', /\.(?!(?:jsx?|json)$).{1,5}$/i], + }); + + config.output.library = 'Redoc'; + config.output.libraryTarget = 'umd'; + } return config; }; diff --git a/yarn.lock b/yarn.lock index ac561a90..d4c68eb4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7162,6 +7162,10 @@ webpack-dev-server@^2.6.1: webpack-dev-middleware "^1.11.0" yargs "^6.6.0" +webpack-node-externals@^1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-1.6.0.tgz#232c62ec6092b100635a3d29d83c1747128df9bd" + webpack-sources@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.2.tgz#d0148ec083b3b5ccef1035a6b3ec16442983b27a"