From 580e574c841fb9b0ba9d37a50bd5a0f787799ff2 Mon Sep 17 00:00:00 2001 From: August Skare Date: Fri, 19 Oct 2018 15:02:15 +0100 Subject: [PATCH 01/14] Feature/build step (#2) * BundleAnalyzerPlugin * lazy load highlight.js * seperate bundles for each page * prerender apps to html on build * preload important font files * dont prerender code copy button * fix woff2 variant of font * added missing doctype * remove metatags component --- packages/dev-tools-pages/.gitignore | 3 +- packages/dev-tools-pages/assets/crawl.html | 20 + .../{public => assets}/favicons/compiler.ico | Bin .../{public => assets}/favicons/cov.ico | Bin .../{public => assets}/favicons/profiler.ico | Bin .../{public => assets}/favicons/trace.ico | Bin packages/dev-tools-pages/assets/index.html | 14 + packages/dev-tools-pages/package.json | 12 +- packages/dev-tools-pages/pages.js | 72 +++ packages/dev-tools-pages/public/index.html | 15 - .../ts/{pages => components}/Base.tsx | 2 - .../dev-tools-pages/ts/components/Code.tsx | 6 +- .../ts/components/MetaTags.tsx | 28 - packages/dev-tools-pages/ts/globalStyles.tsx | 6 +- packages/dev-tools-pages/ts/globals.d.ts | 2 + packages/dev-tools-pages/ts/highlight.tsx | 6 + packages/dev-tools-pages/ts/index.tsx | 37 -- .../dev-tools-pages/ts/pages/Compiler.tsx | 13 +- packages/dev-tools-pages/ts/pages/Cov.tsx | 13 +- .../dev-tools-pages/ts/pages/Profiler.tsx | 13 +- packages/dev-tools-pages/ts/pages/Trace.tsx | 13 +- packages/dev-tools-pages/webpack.config.js | 27 +- yarn.lock | 534 +++++++++++++++--- 23 files changed, 666 insertions(+), 170 deletions(-) create mode 100644 packages/dev-tools-pages/assets/crawl.html rename packages/dev-tools-pages/{public => assets}/favicons/compiler.ico (100%) rename packages/dev-tools-pages/{public => assets}/favicons/cov.ico (100%) rename packages/dev-tools-pages/{public => assets}/favicons/profiler.ico (100%) rename packages/dev-tools-pages/{public => assets}/favicons/trace.ico (100%) create mode 100644 packages/dev-tools-pages/assets/index.html create mode 100644 packages/dev-tools-pages/pages.js delete mode 100644 packages/dev-tools-pages/public/index.html rename packages/dev-tools-pages/ts/{pages => components}/Base.tsx (89%) delete mode 100644 packages/dev-tools-pages/ts/components/MetaTags.tsx create mode 100644 packages/dev-tools-pages/ts/highlight.tsx delete mode 100644 packages/dev-tools-pages/ts/index.tsx diff --git a/packages/dev-tools-pages/.gitignore b/packages/dev-tools-pages/.gitignore index 6446c8579d..9e9db7daeb 100644 --- a/packages/dev-tools-pages/.gitignore +++ b/packages/dev-tools-pages/.gitignore @@ -1 +1,2 @@ -/public/fonts \ No newline at end of file +public +assets/fonts \ No newline at end of file diff --git a/packages/dev-tools-pages/assets/crawl.html b/packages/dev-tools-pages/assets/crawl.html new file mode 100644 index 0000000000..9135c3edec --- /dev/null +++ b/packages/dev-tools-pages/assets/crawl.html @@ -0,0 +1,20 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/packages/dev-tools-pages/public/favicons/compiler.ico b/packages/dev-tools-pages/assets/favicons/compiler.ico similarity index 100% rename from packages/dev-tools-pages/public/favicons/compiler.ico rename to packages/dev-tools-pages/assets/favicons/compiler.ico diff --git a/packages/dev-tools-pages/public/favicons/cov.ico b/packages/dev-tools-pages/assets/favicons/cov.ico similarity index 100% rename from packages/dev-tools-pages/public/favicons/cov.ico rename to packages/dev-tools-pages/assets/favicons/cov.ico diff --git a/packages/dev-tools-pages/public/favicons/profiler.ico b/packages/dev-tools-pages/assets/favicons/profiler.ico similarity index 100% rename from packages/dev-tools-pages/public/favicons/profiler.ico rename to packages/dev-tools-pages/assets/favicons/profiler.ico diff --git a/packages/dev-tools-pages/public/favicons/trace.ico b/packages/dev-tools-pages/assets/favicons/trace.ico similarity index 100% rename from packages/dev-tools-pages/public/favicons/trace.ico rename to packages/dev-tools-pages/assets/favicons/trace.ico diff --git a/packages/dev-tools-pages/assets/index.html b/packages/dev-tools-pages/assets/index.html new file mode 100644 index 0000000000..5ab1a45f11 --- /dev/null +++ b/packages/dev-tools-pages/assets/index.html @@ -0,0 +1,14 @@ + + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + +
+ + \ No newline at end of file diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json index 8fb4bed7b3..eb34e37153 100644 --- a/packages/dev-tools-pages/package.json +++ b/packages/dev-tools-pages/package.json @@ -7,7 +7,7 @@ "private": true, "description": "0x Dev tools pages", "scripts": { - "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production", + "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production && react-snap", "build:ci": "yarn build", "build:dev": "../../node_modules/.bin/webpack --mode development", "clean": "shx rm -f public/bundle*", @@ -28,7 +28,7 @@ "styled-normalize": "^8.0.1" }, "devDependencies": { - "@reach/router": "^1.2.1", + "@types/highlight.js": "^9.12.3", "@types/lodash": "4.14.104", "@types/node": "*", "@types/reach__router": "^1.2.0", @@ -40,11 +40,15 @@ "@types/react-tap-event-plugin": "0.0.30", "@types/styled-components": "^4.0.1", "awesome-typescript-loader": "^5.2.1", + "clean-webpack-plugin": "^0.1.19", + "copy-webpack-plugin": "^4.5.4", "copyfiles": "^2.0.0", "css-loader": "0.23.x", + "html-webpack-plugin": "^3.2.0", "less-loader": "^4.1.0", "make-promises-safe": "^1.1.0", "raw-loader": "^0.5.1", + "react-snap": "^1.19.0", "react-svg-loader": "^2.1.0", "shx": "^0.2.2", "source-map-loader": "^0.2.4", @@ -55,7 +59,11 @@ "typescript": "3.0.1", "uglifyjs-webpack-plugin": "^2.0.1", "webpack": "^4.20.2", + "webpack-bundle-analyzer": "^3.0.3", "webpack-cli": "3.1.2", "webpack-dev-server": "^3.1.9" + }, + "reactSnap": { + "source": "public" } } diff --git a/packages/dev-tools-pages/pages.js b/packages/dev-tools-pages/pages.js new file mode 100644 index 0000000000..5819040681 --- /dev/null +++ b/packages/dev-tools-pages/pages.js @@ -0,0 +1,72 @@ +const pages = [ + { + title: 'sol-compiler', + filename: 'compiler/index.html', + template: 'assets/index.html', + chunks: ['compiler'], + favicon: 'assets/favicons/compiler.ico', + minify: true, + meta: { + description: 'Solidity compilation that just works', + 'og-title': { property: 'og:title', content: 'sol-compiler' }, + 'og-description': { property: 'og:description', content: 'Solidity compilation that just works' }, + 'og-type': { property: 'og:type', content: 'website' }, + 'og-image': { property: 'og:image', content: '' }, + 'twitter:site': '@0xproject', + 'twitter:image': '', + }, + }, + { + title: 'sol-cov', + filename: 'cov/index.html', + template: 'assets/index.html', + chunks: ['cov'], + favicon: 'assets/favicons/cov.ico', + minify: true, + meta: { + description: 'Solidity code coverage', + 'og-title': { property: 'og:title', content: 'sol-cov' }, + 'og-description': { property: 'og:description', content: 'Solidity code coverage' }, + 'og-type': { property: 'og:type', content: 'website' }, + 'og-image': { property: 'og:image', content: '' }, + 'twitter:site': '@0xproject', + 'twitter:image': '', + }, + }, + { + title: 'sol-profiler', + filename: 'profiler/index.html', + template: 'assets/index.html', + chunks: ['profiler'], + favicon: 'assets/favicons/profiler.ico', + minify: true, + meta: { + description: 'Gas profiling for Solidity', + 'og-title': { property: 'og:title', content: 'sol-profiler' }, + 'og-description': { property: 'og:description', content: 'Gas profiling for Solidity' }, + 'og-type': { property: 'og:type', content: 'website' }, + 'og-image': { property: 'og:image', content: '' }, + 'twitter:site': '@0xproject', + 'twitter:image': '', + }, + }, + { + title: 'sol-trace', + filename: 'trace/index.html', + template: 'assets/index.html', + chunks: ['trace'], + favicon: 'assets/favicons/trace.ico', + minify: true, + meta: { + description: 'Human-readable stack traces', + 'og-title': { property: 'og:title', content: 'sol-trace' }, + 'og-description': { property: 'og:description', content: 'Human-readable stack traces' }, + 'og-type': { property: 'og:type', content: 'website' }, + 'og-image': { property: 'og:image', content: '' }, + 'twitter:site': '@0xproject', + 'twitter:image': '', + }, + }, +]; + +module.exports = pages; diff --git a/packages/dev-tools-pages/public/index.html b/packages/dev-tools-pages/public/index.html deleted file mode 100644 index f8131aece1..0000000000 --- a/packages/dev-tools-pages/public/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - 0x: The Protocol for Trading Tokens - - - -
- - - - \ No newline at end of file diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx similarity index 89% rename from packages/dev-tools-pages/ts/pages/Base.tsx rename to packages/dev-tools-pages/ts/components/Base.tsx index 7bb5786116..16e9560f03 100644 --- a/packages/dev-tools-pages/ts/pages/Base.tsx +++ b/packages/dev-tools-pages/ts/components/Base.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import ThemeContext from 'ts/context'; import GlobalStyles from 'ts/globalStyles'; -import MetaTags from 'ts/components/MetaTags'; import Header from 'ts/components/Header'; import Hero from 'ts/components/Hero'; import Footer from 'ts/components/Footer'; @@ -15,7 +14,6 @@ interface BaseProps { function Base(props: BaseProps) { return ( -
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx index 42d4234f10..074914c2a9 100644 --- a/packages/dev-tools-pages/ts/components/Code.tsx +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -68,8 +68,8 @@ class Code extends React.Component { const { language, children } = this.props; if (language !== undefined) { - const { highlight } = await import(/* webpackChunkName: 'highlight.js' */ 'highlight.js'); - const { value: hlCode } = highlight(language, children as string); + const { default: hljs } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight'); + const { value: hlCode } = hljs.highlight(language, children as string); this.setState({ hlCode }); } } @@ -102,7 +102,7 @@ class Code extends React.Component { {this.props.children} )} - + {navigator.userAgent !== 'ReactSnap' ? : null} {!('clipboard' in navigator) ? (