@ligolang/compact-ligo-ide
v3.0.3
Published
A React component for embedding Ligo code snippets on a page.
Downloads
13
Keywords
Readme
A React component for embedding Ligo code snippets on a page.
Quick start
- Install package
yarn add @ligolang/compact-ligo-ide
- Add
CompactLigoIde
component to a page
import { Code, Language } from "@ligolang/compact-ligo-ide";
const App = () => {
const codeWithConfig = `(*_*
name: CameLigo Contract
dryRun:
entrypoint: main
parameters: Increment 2
storage: 0
*_*)
// variant defining pseudo multi-entrypoint actions
type action is
| Increment of int
| Decrement of int
function add (const a : int ; const b : int) : int is
block { skip } with a + b
function subtract (const a : int ; const b : int) : int is
block { skip } with a - b
// real entrypoint that re-routes the flow based
// on the action provided
function main (const p : action ; const s : int) :
(list(operation) * int) is
block { skip } with ((nil : list(operation)),
case p of
| Increment(n) -> add(s, n)
| Decrement(n) -> subtract(s, n)
end)`;
const editor = {
title: 'Smart Contract',
language: Language.CameLigo
};
const compile = {
entrypoint: 'main'
};
const dryRun = {
entrypoint: 'main',
parameters: 'Increment 1',
storage: '0'
};
const deploy = {
entrypoint: 'main',
storage: '0'
};
const evaluateFunction = {
entrypoint: 'add',
parameters: '5, 3'
};
return <CompactLigoIde
theme="light"
editor={editor}
compile={compile}
dryRun={dryRun}
deploy={deploy}
evaluateFunction={evaluateFunction}>
{codeWithConfig}
</CompactLigoIde>
};
- Apply styling
<style type="text/css">
.compactLigoIde {
height: 600px;
width: 600px;
}
</style>
Configuration
Compact Ligo IDE can be configured via component parameters and/or by passing configuration as a child. The example above illustrastes how to do so.
Available configuration
interface CompactLigoIdeProps {
editor?: Partial<EditorConfig>;
compile?: Partial<CompileConfig>;
dryRun?: Partial<DryRunConfig>;
deploy?: Partial<DeployConfig>;
evaluateFunction?: Partial<EvaluateFunctionConfig>;
evaluateValue?: Partial<EvaluateValueConfig>;
result?: string;
webIdeUrl?: string;
theme?: "dark" | "light";
children?: string;
}
interface EditorConfig {
language: Language;
code: string;
dirty: boolean;
title: string;
}
interface CompileConfig {
entrypoint: string;
}
interface DryRunConfig {
entrypoint: string;
parameters: string;
storage: string;
}
interface DeployConfig {
entrypoint: string;
storage: string;
}
interface EvaluateFunctionConfig {
entrypoint: string;
parameters: string;
}
interface EvaluateValueConfig {
entrypoint: string;
}
Alternatively, the component can be configured by passing the configuration like so:
(*_*
name: PascaLIGO Contract
language: pascaligo
compile:
entrypoint: main
dryRun:
entrypoint: main
parameters: Increment (1)
storage: 0
deploy:
entrypoint: main
storage: 0
evaluateValue:
entrypoint: ""
evaluateFunction:
entrypoint: add
parameters: (5, 6)
*_*)
// variant defining pseudo multi-entrypoint actions
type action is
| Increment of int
| Decrement of int
function add (const a : int ; const b : int) : int is
block { skip } with a + b
function subtract (const a : int ; const b : int) : int is
block { skip } with a - b
// real entrypoint that re-routes the flow based
// on the action provided
function main (const p : action ; const s : int) :
(list(operation) * int) is
block { skip } with ((nil : list(operation)),
case p of
| Increment(n) -> add(s, n)
| Decrement(n) -> subtract(s, n)
end)
Contribute
Starting dev server
- Install dependencies with
yarn install
- Run
yarn start
- Open http://localhost:1234 in a browser
Build package
Run yarn build
.
Publish package
Run npm publish --access=public
.