diff --git a/custom.d.ts b/custom.d.ts index ca833574..c50bda10 100644 --- a/custom.d.ts +++ b/custom.d.ts @@ -1,3 +1,5 @@ +/// + declare module '*.json' { const content: any; export = content; diff --git a/demo/webpack.config.ts b/demo/webpack.config.ts index c7457a8d..cb20a3f8 100644 --- a/demo/webpack.config.ts +++ b/demo/webpack.config.ts @@ -1,8 +1,9 @@ import * as webpack from 'webpack'; import * as HtmlWebpackPlugin from 'html-webpack-plugin'; import * as ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; -import * as CopyWebpackPlugin from 'copy-webpack-plugin'; +import * as CopyWebpackPlugin from 'copy-webpack-plugin'; import { resolve } from 'path'; +import { compact } from 'lodash'; const VERSION = JSON.stringify(require('../package.json').version); const REVISION = JSON.stringify( @@ -25,17 +26,24 @@ const tsLoader = env => ({ }, }); -const babelHotLoader = { +const babelLoader = mode => ({ loader: 'babel-loader', options: { - plugins: [ + plugins: compact([ '@babel/plugin-syntax-typescript', '@babel/plugin-syntax-decorators', '@babel/plugin-syntax-jsx', - 'react-hot-loader/babel', - ], + mode === 'production' ? 'react-hot-loader/babel' : undefined, + [ + 'babel-plugin-styled-components', + { + minify: true, + displayName: mode !== 'production', + }, + ], + ]), }, -}; +}); export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) => ({ entry: [ @@ -76,7 +84,7 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) = { test: [/\.eot$/, /\.gif$/, /\.woff$/, /\.svg$/, /\.ttf$/], use: 'null-loader' }, { test: /\.tsx?$/, - use: mode === 'production' ? [tsLoader(env)] : [tsLoader(env), babelHotLoader], + use: [tsLoader(env), babelLoader(mode)], exclude: ['node_modules'], }, { @@ -115,8 +123,6 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) = template: env.playground ? 'demo/playground/index.html' : 'demo/index.html', }), new ForkTsCheckerWebpackPlugin(), - new CopyWebpackPlugin([ - 'demo/openapi.yaml' - ]) + new CopyWebpackPlugin(['demo/openapi.yaml']), ], }); diff --git a/package.json b/package.json index c65dcf2d..bb15cede 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "@types/webpack-env": "^1.13.0", "@types/yargs": "^11.0.0", "babel-loader": "8.0.0-beta.2", + "babel-plugin-styled-components": "^1.5.1", "beautify-benchmark": "^0.2.4", "conventional-changelog-cli": "^1.3.5", "copy-webpack-plugin": "^4.5.1", diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts index 33941f67..a7a30004 100644 --- a/src/common-elements/fields.ts +++ b/src/common-elements/fields.ts @@ -1,5 +1,5 @@ import { transparentize } from 'polished'; -import styled from 'styled-components'; +import styled from '../styled-components'; import { PropertyNameCell } from './fields-layout'; export const ClickablePropertyNameCell = PropertyNameCell.extend` diff --git a/src/common-elements/linkify.ts b/src/common-elements/linkify.ts index bf2590b6..4e49900c 100644 --- a/src/common-elements/linkify.ts +++ b/src/common-elements/linkify.ts @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components'; +import styled, { css } from '../styled-components'; // tslint:disable-next-line export const linkifyMixin = className => css` diff --git a/src/common-elements/mixins.ts b/src/common-elements/mixins.ts index 4c9d7803..176ee922 100644 --- a/src/common-elements/mixins.ts +++ b/src/common-elements/mixins.ts @@ -1,4 +1,4 @@ -import { css } from 'styled-components'; +import { css } from '../styled-components'; export const deprecatedCss = css` text-decoration: line-through; diff --git a/src/components/Responses/ResponsesList.tsx b/src/components/Responses/ResponsesList.tsx index f66518b9..11ad8cfd 100644 --- a/src/components/Responses/ResponsesList.tsx +++ b/src/components/Responses/ResponsesList.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import styled from 'styled-components'; +import styled from '../../styled-components'; import { ResponseModel } from '../../services/models'; import { ResponseView } from './Response'; diff --git a/src/styled.d.ts b/src/styled.d.ts new file mode 100644 index 00000000..9dd299c7 --- /dev/null +++ b/src/styled.d.ts @@ -0,0 +1,43 @@ +import * as styledComponents from 'styled-components'; + +// Styled components typings for using babel-plugin BEFORE typescript +declare module 'styled-components' { + interface ThemedStyledFunction { + // adding "| string[]" for transpileTemplateLiterals and similar below + ( + strings: TemplateStringsArray | string[], + ...interpolations: Interpolation>[] + ): StyledComponentClass; + + new ( + strings: TemplateStringsArray | string[], + ...interpolations: Interpolation>[] + ): StyledComponentClass

; + + // adding "withConfig" for transpileTemplateLiterals + withConfig(config: any): ThemedStyledFunction; + } + + export interface ThemedCssFunction { + // adding "| string[]" for transpileTemplateLiterals and similar below + ( + strings: TemplateStringsArray | string[], + ...interpolations: SimpleInterpolation[] + ): InterpolationValue[]; +

( + strings: TemplateStringsArray | string[], + ...interpolations: Interpolation>[] + ): FlattenInterpolation>[]; + } + + interface ThemedStyledComponentsModule { + keyframes( + strings: TemplateStringsArray | string[], + ...interpolations: SimpleInterpolation[] + ): string; + injectGlobal( + strings: TemplateStringsArray | string[], + ...interpolations: SimpleInterpolation[] + ): void; + } +} diff --git a/webpack.config.ts b/webpack.config.ts index 240ae4f2..1be9bfe4 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -21,7 +21,7 @@ const BANNER = `ReDoc - OpenAPI/Swagger-generated API Reference Documentation Version: ${VERSION} Repo: https://github.com/Rebilly/ReDoc`; -export default (env: { standalone?: boolean } = {}) => ({ +export default (env: { standalone?: boolean } = {}, { mode }) => ({ entry: env.standalone ? ['./src/polyfills.ts', './src/standalone.tsx'] : './src/index.ts', output: { filename: env.standalone ? 'redoc.standalone.js' : 'redoc.lib.js', @@ -62,14 +62,33 @@ export default (env: { standalone?: boolean } = {}) => ({ rules: [ { test: /\.tsx?$/, - use: { - loader: 'ts-loader', - options: { - compilerOptions: { - module: 'es2015', + use: [ + { + loader: 'ts-loader', + options: { + compilerOptions: { + module: 'es2015', + }, }, }, - }, + { + loader: 'babel-loader', + options: { + plugins: [ + '@babel/plugin-syntax-typescript', + '@babel/plugin-syntax-decorators', + '@babel/plugin-syntax-jsx', + [ + 'babel-plugin-styled-components', + { + minify: true, + displayName: mode !== 'production', + }, + ], + ], + }, + }, + ], exclude: ['node_modules'], }, { diff --git a/yarn.lock b/yarn.lock index ac2661ed..72f52821 100644 --- a/yarn.lock +++ b/yarn.lock @@ -38,6 +38,12 @@ source-map "^0.5.0" trim-right "^1.0.1" +"@babel/helper-annotate-as-pure@^7.0.0-beta.37": + version "7.0.0-beta.42" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.42.tgz#f2b0a3be684018b55fc308eb5408326f78479085" + dependencies: + "@babel/types" "7.0.0-beta.42" + "@babel/helper-function-name@7.0.0-beta.42": version "7.0.0-beta.42" resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.42.tgz#b38b8f4f85168d1812c543dd700b5d549b0c4658" @@ -919,6 +925,14 @@ babel-plugin-jest-hoist@^22.4.1: version "22.4.1" resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.4.1.tgz#d712fe5da8b6965f3191dacddbefdbdf4fb66d63" +babel-plugin-styled-components@^1.5.1: + version "1.5.1" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.5.1.tgz#31dbeb696d1354d1585e60d66c7905f5e474afcd" + dependencies: + "@babel/helper-annotate-as-pure" "^7.0.0-beta.37" + babel-types "^6.26.0" + stylis "^3.0.0" + babel-plugin-syntax-async-functions@^6.8.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95" @@ -8748,7 +8762,7 @@ stylis-rule-sheet@^0.0.10: version "0.0.10" resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" -stylis@^3.5.0: +stylis@^3.0.0, stylis@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1"