aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/pages/Compiler.tsx
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-11-16 18:05:30 +0800
committerAugust Skare <post@augustskare.no>2018-11-16 18:05:30 +0800
commit54bd7df900316504e4403bc94cffd92930a6c763 (patch)
tree7b386224e5746be65bfddc094cc5b26f7c018e19 /packages/dev-tools-pages/ts/pages/Compiler.tsx
parent5afef5fe820674abfbdf58226ed0a6920b5c74f7 (diff)
downloaddexon-sol-tools-54bd7df900316504e4403bc94cffd92930a6c763.tar
dexon-sol-tools-54bd7df900316504e4403bc94cffd92930a6c763.tar.gz
dexon-sol-tools-54bd7df900316504e4403bc94cffd92930a6c763.tar.bz2
dexon-sol-tools-54bd7df900316504e4403bc94cffd92930a6c763.tar.lz
dexon-sol-tools-54bd7df900316504e4403bc94cffd92930a6c763.tar.xz
dexon-sol-tools-54bd7df900316504e4403bc94cffd92930a6c763.tar.zst
dexon-sol-tools-54bd7df900316504e4403bc94cffd92930a6c763.zip
fix linting + code syntax for statless components
Diffstat (limited to 'packages/dev-tools-pages/ts/pages/Compiler.tsx')
-rw-r--r--packages/dev-tools-pages/ts/pages/Compiler.tsx177
1 files changed, 90 insertions, 87 deletions
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 0db7c6204..ee533d566 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,56 +1,60 @@
import * as React from 'react';
-import { render, hydrate } from 'react-dom';
+import { hydrate, render } from 'react-dom';
import * as Loadable from 'react-loadable';
+import { context } from 'ts/context/compiler';
+
+import { Base } from 'ts/components/Base';
+import { Breakout } from 'ts/components/Breakout';
+import { Code } from 'ts/components/Code';
+import { Compiler as CompilerComponent } from 'ts/components/Compiler';
+import { Content } from 'ts/components/Content';
+import { ContentBlock } from 'ts/components/ContentBlock';
+import { Hero } from 'ts/components/Hero';
+import { InlineCode } from 'ts/components/InlineCode';
import { Lead } from 'ts/components/Typography';
-import context from 'ts/context/compiler';
-import Base from 'ts/components/Base';
-import Content from 'ts/components/Content';
-import ContentBlock from 'ts/components/ContentBlock';
-import Code from 'ts/components/Code';
-import InlineCode from 'ts/components/InlineCode';
-import CompilerComponent from 'ts/components/Compiler';
-import Breakout from 'ts/components/Breakout';
-import Hero from 'ts/components/Hero';
const Animation = Loadable({
loader: () => System.import(/* webpackChunkName: 'compiler-animation' */ 'ts/components/Animations/Compiler'),
loading: () => <div />,
delay: 1000,
+ render(loadable: { Animation: any }): React.ReactNode {
+ const Component = loadable.Animation;
+ return <Component />;
+ },
});
-function Compiler() {
- return (
- <Base context={context}>
- <Hero>
- <Animation />
- </Hero>
- <CompilerComponent />
- <Content>
- <ContentBlock main title="Get started" />
- <ContentBlock title="Install">
- <Breakout>
- <Code copy>npm install @0x/sol-compiler --g</Code>
- </Breakout>
- </ContentBlock>
+const Compiler: React.StatelessComponent<{}> = () => (
+ <Base context={context}>
+ <Hero>
+ <Animation />
+ </Hero>
+ <CompilerComponent />
+ <Content>
+ <ContentBlock main={true} title="Get started" />
+ <ContentBlock title="Install">
+ <Breakout>
+ <Code canCopy={true}>npm install @0x/sol-compiler --g</Code>
+ </Breakout>
+ </ContentBlock>
- <ContentBlock title="Run">
- <Breakout>
- <Code>cd /your_project_dir && sol-compiler</Code>
- </Breakout>
- </ContentBlock>
+ <ContentBlock title="Run">
+ <Breakout>
+ <Code>cd /your_project_dir && sol-compiler</Code>
+ </Breakout>
+ </ContentBlock>
- <ContentBlock title="Configure">
- <p>
- Configure via a <InlineCode>compiler.json</InlineCode> file.
- </p>
- <Breakout>
- <Code>mkdir compiler.json</Code>
- </Breakout>
- <p>Example of settings:</p>
- <Breakout>
- <Code language="json">
- {`{
+ <ContentBlock title="Configure">
+ <p>
+ Configure via a <InlineCode>compiler.json</InlineCode> file.
+ </p>
+ <Breakout>
+ <Code>mkdir compiler.json</Code>
+ </Breakout>
+ <p>Example of settings:</p>
+ <Breakout>
+ <Code language="json">
+ {`{
"contractsDir": "contracts",
"artifactsDir": "artifacts",
"contracts": "*",
@@ -63,26 +67,26 @@ function Compiler() {
}
}
}`}
- </Code>
- </Breakout>
- </ContentBlock>
- </Content>
- <Content dark>
- <ContentBlock main title="Artifacts">
- <Lead>
- Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
- define which parts of the artifact you need.
- </Lead>
- </ContentBlock>
+ </Code>
+ </Breakout>
+ </ContentBlock>
+ </Content>
+ <Content dark={true}>
+ <ContentBlock main={true} title="Artifacts">
+ <Lead>
+ Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define
+ which parts of the artifact you need.
+ </Lead>
+ </ContentBlock>
- <ContentBlock title="Production">
- <p>
- Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
- define which parts of the artifact you need.
- </p>
- <Breakout>
- <Code light language="json" etc>
- {`{
+ <ContentBlock title="Production">
+ <p>
+ Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define
+ which parts of the artifact you need.
+ </p>
+ <Breakout>
+ <Code isLight={true} language="json" isEtc={true}>
+ {`{
"compilerSettings": {
"outputSelection": {
"*": {
@@ -91,26 +95,26 @@ function Compiler() {
}
}
}`}
- </Code>
- </Breakout>
- <Breakout>
- <Code light language="json" etc>
- {`{
+ </Code>
+ </Breakout>
+ <Breakout>
+ <Code isLight={true} language="json" isEtc={true}>
+ {`{
"compilerOutput": {
"abi": [...],
},
}`}
- </Code>
- </Breakout>
- </ContentBlock>
- <ContentBlock title="Development">
- <p>
- Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the
- artifact.
- </p>
- <Breakout>
- <Code light language="json" etc>
- {`{
+ </Code>
+ </Breakout>
+ </ContentBlock>
+ <ContentBlock title="Development">
+ <p>
+ Sometimes you need to use some debuggers or other dev tools and you’ll need more info in the
+ artifact.
+ </p>
+ <Breakout>
+ <Code isLight={true} language="json" isEtc={true}>
+ {`{
"compilerSettings": {
"outputSelection": {
"*": {
@@ -125,12 +129,12 @@ function Compiler() {
}
}
}`}
- </Code>
- </Breakout>
+ </Code>
+ </Breakout>
- <Breakout>
- <Code light language="json" etc>
- {`{
+ <Breakout>
+ <Code isLight={true} language="json" isEtc={true}>
+ {`{
"compilerOutput": {
"abi": [...],
"evm": {
@@ -150,13 +154,12 @@ function Compiler() {
}
},
}`}
- </Code>
- </Breakout>
- </ContentBlock>
- </Content>
- </Base>
- );
-}
+ </Code>
+ </Breakout>
+ </ContentBlock>
+ </Content>
+ </Base>
+);
const root = document.getElementById('app');