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

5 files changed, 40 insertions, 40 deletions

diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/pages/Base.tsx
deleted file mode 100644
index 7bb578611..000000000
--- a/packages/dev-tools-pages/ts/pages/Base.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-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';
-
-interface BaseProps {
-    context: any;
-    children: React.ReactNode;
-}
-
-function Base(props: BaseProps) {
-    return (
-        <ThemeContext.Provider value={props.context}>
-            <MetaTags />
-            <GlobalStyles />
-            <Header />
-            <Hero />
-            {props.children}
-            <Footer />
-        </ThemeContext.Provider>
-    );
-}
-
-export default Base;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 79c9f52e4..35c810cb3 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/compiler';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import CompilerComponent from 'ts/components/Compiler';
 
-function Compiler(props: any) {
+function Compiler() {
     return (
         <Base context={context}>
             <Container>
@@ -52,4 +53,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Compiler;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Compiler />, root);
+} else {
+    render(<Compiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx
index b7405f8f9..e835e5c82 100644
--- a/packages/dev-tools-pages/ts/pages/Cov.tsx
+++ b/packages/dev-tools-pages/ts/pages/Cov.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/cov';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import Intro from 'ts/components/Intro';
 
-function Cov(props: any) {
+function Cov() {
     return (
         <Base context={context}>
             <Container>
@@ -58,4 +59,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Cov;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Cov />, root);
+} else {
+    render(<Cov />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Profiler.tsx b/packages/dev-tools-pages/ts/pages/Profiler.tsx
index d129d6427..9f8b46b9c 100644
--- a/packages/dev-tools-pages/ts/pages/Profiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Profiler.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/profiler';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import Intro from 'ts/components/Intro';
 
-function Profiler(props: any) {
+function Profiler() {
     return (
         <Base context={context}>
             <Container>
@@ -58,4 +59,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Profiler;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Profiler />, root);
+} else {
+    render(<Profiler />, root);
+}
diff --git a/packages/dev-tools-pages/ts/pages/Trace.tsx b/packages/dev-tools-pages/ts/pages/Trace.tsx
index 5dddf027e..be5acdac4 100644
--- a/packages/dev-tools-pages/ts/pages/Trace.tsx
+++ b/packages/dev-tools-pages/ts/pages/Trace.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/trace';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import TraceComponent from 'ts/components/Trace';
 
-function Trace(props: any) {
+function Trace() {
     return (
         <Base context={context}>
             <TraceComponent />
@@ -52,4 +53,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Trace;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Trace />, root);
+} else {
+    render(<Trace />, root);
+}