@senx/discovery-code
Version:
Discovery Code Editor
194 lines (136 loc) • 6.93 kB
Markdown
# Discovery Code
[](https://badge.fury.io/js/%40senx%2Fdiscovery-code)
This [web components](https://fr.wikipedia.org/wiki/Composants_web) embed a WarpScript editor dedicated to [Warp 10](https://www.warp10.io).
<img src="https://warp10.io/assets/img/materials/logo_warp10.png" width="400" alt="Warp 10">
- [Licence Apache 2](./LICENSE.md)
- [Contribute](./CONTRIBUTING.md)
## Usage
### In a Web Environment
#### With NPM/Yarn
$ npm install @senx/discovery-code
#### With CDN
```html
<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
<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
```json
{
"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` |