umd bundle

.gitignore

@@ -24,6 +24,7 @@ lib/
 stats.json
 e2e/build/
 cypress/
+bundles
 
 /coverage
 .ghpages-tmp

.npmignore

@@ -1,8 +1,2 @@
-.DS_Store
+!bundles/
-**/.*
+!package.json
-
-node_modules/
-
-perf/
-demo/
-coverage/

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",
+    "webpack-node-externals": "^1.6.0"
-    "core-js": "^2.5.1",
-    "rimraf": "^2.6.2"
   },
   "dependencies": {
     "decko": "^1.2.0",

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;

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;

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<RedocProps> {
+export class RedocStandalone extends React.Component<RedocStandaloneProps> {
   render() {
     const { specOrSpecUrl, options } = this.props;
     let specUrl;

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';

src/styled-components.ts

@@ -3,7 +3,7 @@ import { ThemedStyledComponentsModule } from 'styled-components';
 
 import { ThemeInterface } from './theme';
 
-type StyledFunction<T> = styledComponents.ThemedStyledFunction<T, ThemeInterface>;
+export type StyledFunction<T> = styledComponents.ThemedStyledFunction<T, ThemeInterface>;
 
 function withProps<T, U extends HTMLElement = HTMLElement>(
   styledFunction: StyledFunction<React.HTMLProps<U>>,

tsconfig.json

@@ -9,6 +9,7 @@
     "noUnusedParameters": true,
     "strictNullChecks": true,
     "sourceMap": true,
+    // "declaration": true,
     "outDir": "lib",
     "pretty": true,
     "lib": [

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']
+      ? './src/index.ts'
-      : [
+      : env.perf
-          'react-dev-utils/webpackHotDevClient',
+        ? ['./perf/index.tsx']
-          'react-hot-loader/patch',
+        : [
-          './src/hmr-playground.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({
+          loader: 'css-loader',
-            fallback: 'style-loader',
+          options: {
-            use: [
+            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;
 };

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"