@senx/discovery-code NPM

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	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`