Discovery Code
This web components embed a WarpScript editor dedicated to Warp 10.
Usage
In a Web Environment
With NPM/Yarn
$ npm install @senx/discovery-code
With CDN
<script nomodule src="https://cdn.jsdelivr.net/npm/@senx/discovery-code/dist/discovery-code/discovery-code.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@senx/discovery-code/dist/discovery-code/discovery-code.esm.js"></script>
Usage
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div style="width: 100%; min-height: calc(100vh - 280px);overflow: hidden;">
<discovery-code-editor url="https://sandbox.senx.io/api/v0/exec"
debug="true" show-dataviz="false"
id="editor"
show-execute="true" debug
show-result="true" config='{}'
display-messages="true" initial-size="400">
NEWGTS 'v' STORE
0 10 <%
'ts' STORE
$v NOW $ts STU * - NaN NaN NaN RAND ADDVALUE DROP
%> FOR
$v
</discovery-code-editor>
</div>
<script nomodule src="https://cdn.jsdelivr.net/npm/@senx/discovery-code/dist/discovery-code/discovery-code.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@senx/discovery-code/dist/discovery-code/discovery-code.esm.js"></script>
</body>
</html>
Properties
Property | Attribute | Description | Type | Default |
---|
code | code | | string | '' |
config | config | | Config | string | new Config() |
debug | debug | | boolean | false |
displayMessages | display-messages | | boolean | false |
existingComments | existing-comments | | ReviewCommentEvent[] | string | [] |
heightLine | height-line | | number | undefined |
heightPx | height-px | | number | undefined |
imageTab | image-tab | | boolean | false |
initialSize | -- | | { w?: number; h?: number; name?: string; p?: number; } | undefined |
language | language | | "flows" | "warpscript" | 'warpscript' |
showDataviz | show-dataviz | | boolean | false |
showExecute | show-execute | | boolean | false |
showResult | show-result | | boolean | false |
theme | theme | | "dark" | "light" | 'light' |
url | url | | string | undefined |
widthPx | width-px | | number | undefined |
Events
Event | Description | Type |
---|
discoveryCodeBreakPoint | | CustomEvent<any> |
discoveryCodeChanged | | CustomEvent<any> |
discoveryCodeDataviz | | CustomEvent<any> |
discoveryCodeError | | CustomEvent<any> |
discoveryCodeLoaded | | CustomEvent<any> |
discoveryCodeRef | | CustomEvent<any> |
discoveryCodeResult | | CustomEvent<any> |
discoveryCodeReview | | CustomEvent<any> |
discoveryCodeSize | | CustomEvent<any> |
discoveryCodeStatus | | CustomEvent<any> |
Methods
abort(session?: string) => Promise<void>
Returns
Type: Promise<void>
execute(session?: string) => Promise<void>
Returns
Type: Promise<void>
highlight(line: number) => Promise<void>
Returns
Type: Promise<void>
resize(initial: boolean) => Promise<void>
Returns
Type: Promise<void>
Data format
Default config
{
"buttons" : {
"class": ""
},
"execButton" : {
"class": "",
"label": "Execute"
},
"datavizButton" : {
"class": "",
"label": "Visualize"
},
"hover" : true,
"readOnly" : false,
"messageClass" : "",
"errorClass" : "",
"editor": {
"quickSuggestionsDelay": 10,
"quickSuggestions": true,
"tabSize": 2,
"minLineNumber": 10,
"enableDebug": false
}
}
CSS vars
Inherited from Discovery
Name | Default value |
---|
--warp-view-button-font-size | 1rem |
--warp-view-button-border-color | #004eff |
--warp-view-button-padding | .375rem .75rem |
--warp-view-button-label-color | #ffffff |
--warp-view-button-bg-color | #004eff |
--warp-view-button-bg-color | #004eff |
--warp-view-button-width | auto |
--warp-view-button-border-radius | 0.25rem |
--warp-view-spinner-color | #004eff |
Specific
Name | Default value |
---|
--discovery-code-status-bar-font-color | #404040 |
--discovery-code-status-bar-background | #c0c0c0 |
--discovery-code-breakpoint-color | #dc3545 |
--discovery-code-selected-line-color | #00abc066 |