diff options
author | August Skare <post@augustskare.no> | 2018-10-25 19:10:35 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-25 19:10:35 +0800 |
commit | 1ae9f68db8c9768e68d1eab1f411b346e9512c1c (patch) | |
tree | ed13286ad8d4b60cf5bffac2182328baa0367f02 /packages/dev-tools-pages/ts/pages/Compiler.tsx | |
parent | e5d3e3b33a88e2b08ed02cb39910fab28e130594 (diff) | |
download | dexon-0x-contracts-1ae9f68db8c9768e68d1eab1f411b346e9512c1c.tar dexon-0x-contracts-1ae9f68db8c9768e68d1eab1f411b346e9512c1c.tar.gz dexon-0x-contracts-1ae9f68db8c9768e68d1eab1f411b346e9512c1c.tar.bz2 dexon-0x-contracts-1ae9f68db8c9768e68d1eab1f411b346e9512c1c.tar.lz dexon-0x-contracts-1ae9f68db8c9768e68d1eab1f411b346e9512c1c.tar.xz dexon-0x-contracts-1ae9f68db8c9768e68d1eab1f411b346e9512c1c.tar.zst dexon-0x-contracts-1ae9f68db8c9768e68d1eab1f411b346e9512c1c.zip |
Content (#7)
* optional children in List component
* added real content to trace page
* added real content to cov page
* add support for json highlighting
* real content on compiler page
* real content on profiler page
* remove unused import
* remove list from compiler page
* wrap code components in pages with breakout component
* fix font size on text
* fix typo
Diffstat (limited to 'packages/dev-tools-pages/ts/pages/Compiler.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/pages/Compiler.tsx | 128 |
1 files changed, 100 insertions, 28 deletions
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx index 96f26a978..92390e20b 100644 --- a/packages/dev-tools-pages/ts/pages/Compiler.tsx +++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; import { render, hydrate } from 'react-dom'; +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 { Tabs, TabBlock } from 'ts/components/Tabs'; import Code from 'ts/components/Code'; import InlineCode from 'ts/components/InlineCode'; -import List from 'ts/components/List'; import CompilerComponent from 'ts/components/Compiler'; +import Breakout from 'ts/components/Breakout'; function Compiler() { return ( @@ -17,41 +17,51 @@ function Compiler() { <CompilerComponent /> <Content> <ContentBlock main title="Get started" /> - <ContentBlock title="Required steps"> - <List items={['Step 1', 'Step 2']} /> - </ContentBlock> - <ContentBlock title="Prerequisites"> - <Code>npm install @0x/sol-trace --save</Code> - <p> - Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>. - Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace - ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '} - <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also - write your own and support any artifact format. - </p> + <ContentBlock title="Install"> + <Breakout> + <Code>npm install @0x/sol-compiler --g</Code> + </Breakout> </ContentBlock> - <ContentBlock title="Installation"> - <Tabs> - <TabBlock title="Sol-compiler"> - <Code language="js"> - {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + <ContentBlock title="Run"> + <Breakout> + <Code>cd /your_project_dir && sol-compiler</Code> + </Breakout> + </ContentBlock> -// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in -const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} - </Code> - </TabBlock> - <TabBlock title="Truffle">Truffle</TabBlock> - <TabBlock title="Custom">Custom</TabBlock> - </Tabs> + <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": "*", + "compilerSettings": { + "optimizer": { "enabled": false }, + "outputSelection": { + "*": { + "*": ["abi", "evm.bytecode.object"] + } + } + } +}`} + </Code> + </Breakout> </ContentBlock> </Content> <Content dark> <ContentBlock main title="Artifacts"> - <p> + <Lead> Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need. - </p> + </Lead> </ContentBlock> <ContentBlock title="Production"> @@ -59,6 +69,68 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi 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"> + {`{ + ... + "compilerSettings": { + "outputSelection": { + "*": { + "*": ["abi"] + } + } + } + ... +}`} + </Code> + </Breakout> + <Breakout> + <Code light language="json"> + {`{ + ... + "compilerSettings": { + "outputSelection": { + "*": { + "*": [ + "abi", + "evm.bytecode.object", + "evm.bytecode.sourceMap", + "evm.deployedBytecode.object", + "evm.deployedBytecode.sourceMap" + ] + } + } + } + ... +}`} + </Code> + </Breakout> + <Breakout> + <Code light language="json"> + {`{ + ... + "compilerOutput": { + "abi": [...], + "evm": { + "bytecode": { + "object": "0xdeadbeef", + "sourceMap": "26:480:..." + }, + "deployedBytecode": { + "object": "0xdeadbeef", + "sourceMap": "26:480:0..." + } + } + } + "sources": { + "Migrations.sol": { + "id": 0 + } + }, + ... +}`} + </Code> + </Breakout> </ContentBlock> </Content> </Base> |