aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/Base.tsx (renamed from packages/dev-tools-pages/ts/pages/Base.tsx)2
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx6
-rw-r--r--packages/dev-tools-pages/ts/components/MetaTags.tsx28
-rw-r--r--packages/dev-tools-pages/ts/globalStyles.tsx6
-rw-r--r--packages/dev-tools-pages/ts/globals.d.ts2
-rw-r--r--packages/dev-tools-pages/ts/highlight.tsx6
-rw-r--r--packages/dev-tools-pages/ts/index.tsx37
-rw-r--r--packages/dev-tools-pages/ts/pages/Compiler.tsx13
-rw-r--r--packages/dev-tools-pages/ts/pages/Cov.tsx13
-rw-r--r--packages/dev-tools-pages/ts/pages/Profiler.tsx13
-rw-r--r--packages/dev-tools-pages/ts/pages/Trace.tsx13
11 files changed, 54 insertions, 85 deletions
diff --git a/packages/dev-tools-pages/ts/pages/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
index 7bb578611..16e9560f0 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 (
<ThemeContext.Provider value={props.context}>
- <MetaTags />
<GlobalStyles />
<Header />
<Hero />
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 42d4234f1..074914c2a 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<CodeProps, CodeState> {
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<CodeProps, CodeState> {
<StyledCode>{this.props.children}</StyledCode>
)}
</StyledPre>
- <Button onClick={this.handleCopy}>Copy</Button>
+ {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
{!('clipboard' in navigator) ? (
<CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
) : null}
diff --git a/packages/dev-tools-pages/ts/components/MetaTags.tsx b/packages/dev-tools-pages/ts/components/MetaTags.tsx
deleted file mode 100644
index 9bb33f7ab..000000000
--- a/packages/dev-tools-pages/ts/components/MetaTags.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import { withContext, Props } from './withContext';
-
-interface MetaTagsProps extends Props {
- imgSrc?: string;
-}
-
-function MetaTags(props: MetaTagsProps) {
- const { title, imgSrc = '/images/og_image.png' } = props;
- const description = props.tagline;
- return (
- <Helmet>
- <title>{props.title}</title>
- <meta name="description" content={description} />
- <link rel="shortcut icon" href={`/favicons/${props.name}.ico`} />
- <meta property="og:title" content={title} />
- <meta property="og:description" content={description} />
- <meta property="og:type" content="website" />
- <meta property="og:image" content={imgSrc} />
- <meta name="twitter:site" content="@0xproject" />
- <meta name="twitter:image" content={imgSrc} />
- </Helmet>
- );
-}
-
-export default withContext(MetaTags);
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 1a2a1769a..c0cf46673 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -10,21 +10,21 @@ const BaseStyles = createGlobalStyle`
@font-face {
font-family: "Maison Neue";
- src: url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
+ src: url("/fonts/MaisonNeue-Book-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Book-subset.woff") format("woff");
font-weight: 300;
font-display: swap;
unicode-range: U+20-7E;
}
@font-face {
font-family: "Maison Neue";
- src: url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
+ src: url("/fonts/MaisonNeue-Bold-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Bold-subset.woff") format("woff");
font-weight: 500;
font-display: swap;
unicode-range: U+20-7E;
}
@font-face {
font-family: "Maison Neue Mono";
- src: url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
+ src: url("/fonts/MaisonNeue-Mono-subset.woff2") format("woff2"), url("/fonts/MaisonNeue-Mono-subset.woff") format("woff");
font-weight: 300;
font-display: optional;
unicode-range: U+20-7E;
diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts
index da026a198..07871a74b 100644
--- a/packages/dev-tools-pages/ts/globals.d.ts
+++ b/packages/dev-tools-pages/ts/globals.d.ts
@@ -1,6 +1,8 @@
declare module 'whatwg-fetch';
declare module 'react-document-title';
+declare var System: any;
+
declare module '*.json' {
const json: any;
/* tslint:disable */
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
new file mode 100644
index 000000000..0c4602d51
--- /dev/null
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -0,0 +1,6 @@
+const highlight = require('highlight.js/lib/highlight');
+const javascript = require('highlight.js/lib/languages/javascript');
+
+highlight.registerLanguage('javascript', javascript);
+
+export default highlight;
diff --git a/packages/dev-tools-pages/ts/index.tsx b/packages/dev-tools-pages/ts/index.tsx
deleted file mode 100644
index b185e270a..000000000
--- a/packages/dev-tools-pages/ts/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { render } from 'react-dom';
-import { Router, Link } from '@reach/router';
-
-import Trace from 'ts/pages/Trace';
-import Compiler from 'ts/pages/Compiler';
-import Cov from 'ts/pages/Cov';
-import Profiler from 'ts/pages/Profiler';
-
-const Index = (props: any) => (
- <ul>
- <li>
- <Link to="/trace">sol-trace</Link>
- </li>
- <li>
- <Link to="/compiler">sol-compiler</Link>
- </li>
- <li>
- <Link to="/cov">sol-cov</Link>
- </li>
- <li>
- <Link to="/profiler">sol-profiler</Link>
- </li>
- </ul>
-);
-
-const App = () => (
- <Router>
- <Trace path="/trace" />
- <Compiler path="/compiler" />
- <Cov path="/cov" />
- <Profiler path="/profiler" />
- <Index default />
- </Router>
-);
-
-render(<App />, document.getElementById('app'));
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);
+}