@senx/discovery-code
v0.0.43
Published
Discovery Code Editor
Readme
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-codeWith 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 |