master
Evan Chen 2021-11-24 17:08:11 +08:00
parent b2d2f84bc6
commit 34b45442c1
23 changed files with 1207 additions and 14 deletions

822
README.md Normal file
View File

@ -0,0 +1,822 @@
# KConfig
a json config visualizer
## Schema
JSON Schema Support
-----------------
JSON Editor fully supports version 3 and 4 of the JSON Schema [core][core] and [validation][validation] specifications.
Some of The [hyper-schema][hyper] specification is supported as well.
[core]: http://json-schema.org/latest/json-schema-core.html
[validation]: http://json-schema.org/latest/json-schema-validation.html
[hyper]: http://json-schema.org/latest/json-schema-hypermedia.html
### $ref and definitions
JSON Editor supports schema references to external URLs and local definitions. Here's an example showing both:
```json
{
"type": "object",
"properties": {
"name": {
"title": "Full Name",
"$ref": "#/definitions/name"
},
"location": {
"$ref": "http://mydomain.com/geo.json"
}
},
"definitions": {
"name": {
"type": "string",
"minLength": 5
}
}
}
```
Local references must point to the `definitions` object of the root node of the schema.
So, `#/customkey/name` will throw an exception.
If loading an external url via Ajax, the url must either be on the same domain or return the correct HTTP cross domain headers.
If your URLs don't meet this requirement, you can pass in the references to JSON Editor during initialization (see Usage section above).
Self-referential $refs are supported. Check out `examples/recursive.html` for usage examples.
### hyper-schema links
The `links` keyword from the hyper-schema specification can be used to add links to related documents.
JSON Editor will use the `mediaType` property of the links to determine how best to display them.
Image, audio, and video links will display the media inline as well as providing a text link.
Here are a couple examples:
Simple text link
```js+jinja
{
"title": "Blog Post Id",
"type": "integer",
"links": [
{
"rel": "comments",
"href": "/posts/{{self}}/comments/",
// Optional - set CSS classes for the link
"class": "comment-link open-in-modal primary-text"
}
]
}
```
Make link download when clicked
```js+jinja
{
"title": "Document filename",
"type": "string",
"links": [
{
"rel": "Download File",
"href": "/documents/{{self}}",
// Can also set `download` to a string as per the HTML5 spec
"download": true
}
]
}
```
Show a video preview (using HTML5 video)
```js+jinja
{
"title": "Video filename",
"type": "string",
"links": [
{
"href": "/videos/{{self}}.mp4",
"mediaType": "video/mp4"
}
]
}
```
The `href` property is a template that gets re-evaluated every time the value changes.
The variable `self` is always available. Look at the __Dependencies__ section below for how to include other fields or use a custom template engine.
### Property Ordering
There is no way to specify property ordering in JSON Schema (although this may change in v5 of the spec).
JSON Editor introduces a new keyword `propertyOrder` for this purpose. The default property order if unspecified is 1000. Properties with the same order will use normal JSON key ordering.
```json
{
"type": "object",
"properties": {
"prop1": {
"type": "string"
},
"prop2": {
"type": "string",
"propertyOrder": 10
},
"prop3": {
"type": "string",
"propertyOrder": 1001
},
"prop4": {
"type": "string",
"propertyOrder": 1
}
}
}
```
In the above example schema, `prop1` does not have an order specified, so it will default to 1000.
So, the final order of properties in the form (and in returned JSON data) will be:
1. prop4 (order 1)
2. prop2 (order 10)
3. prop1 (order 1000)
4. prop3 (order 1001)
### Default Properties
The default behavior of JSON Editor is to include all object properties defined with the `properties` keyword.
To override this behaviour, you can use the keyword `defaultProperties` to set which ones are included:
```json
{
"type": "object",
"properties": {
"name": {"type": "string"},
"age": {"type": "integer"}
},
"defaultProperties": ["name"]
}
```
Now, only the `name` property above will be included by default. You can use the "Object Properties" button
to add the "age" property back in.
### format
JSON Editor supports many different formats for schemas of type `string`. They will work with schemas of type `integer` and `number` as well, but some formats may produce weird results.
If the `enum` property is specified, `format` will be ignored.
JSON Editor uses HTML5 input types, so some of these may render as basic text input in older browsers:
* color
* date
* datetime-local
* email
* month
* password
* number
* range
* tel
* text
* textarea
* time
* url
* week
Here is an example that will show a color picker in browsers that support it:
```json
{
"type": "object",
"properties": {
"color": {
"type": "string",
"format": "color"
}
}
}
```
#### String Editors Input Attributes
You can set custom attributes such as **placeholder**, **class** and **data-** on the input field using the special options keyword `inputAttributes`.
Like this:
```json
{
"type": "object",
"properties": {
"name": {
"title": "Full Name",
"options": {
"inputAttributes": {
"placeholder": "your name here...",
"class": "myclass"
}
}
}
}
}
```
#### Specialized String Editors
__Ace Editor__ is a syntax highlighting source code editor. You can use it by setting the format to any of the following:
* actionscript
* batchfile
* c
* c++
* cpp (alias for c++)
* coffee
* csharp
* css
* dart
* django
* ejs
* erlang
* golang
* groovy
* handlebars
* haskell
* haxe
* html
* ini
* jade
* java
* javascript
* json
* less
* lisp
* lua
* makefile
* markdown
* matlab
* mysql
* objectivec
* pascal
* perl
* pgsql
* php
* python
* r
* ruby
* sass
* scala
* scss
* smarty
* sql
* stylus
* svg
* twig
* vbscript
* xml
* yaml
```json
{
"type": "string",
"format": "yaml"
}
```
You can use the hyper-schema keyword `media` instead of `format` too if you prefer for formats with a mime type:
```json
{
"type": "string",
"media": {
"type": "text/html"
}
}
```
You can enable [Ace editor options](https://github.com/ajaxorg/ace/wiki/Configuring-Ace) individually by setting the `options.ace` in schema.
```json
{
"type": "string",
"format": "sql",
"options": {
"ace": {
"theme": "ace/theme/vibrant_ink",
"tabSize": 2,
"useSoftTabs": true,
"wrap": true
}
}
}
```
#### Booleans
The default boolean editor is a select box with options "true" and "false". To use a checkbox instead, set the format to `checkbox`.
```json
{
"type": "boolean",
"format": "checkbox"
}
```
#### Arrays
The default array editor takes up a lot of screen real estate. The `table` and `tabs` formats provide more compact UIs for editing arrays.
The `table` format works great when every array element has the same schema and is not too complex.
The `tabs` format can handle any array, but only shows one array element at a time. It has tabs on the left for switching between items.
The `tabs-top` format place tabs on the top.
Here's an example of the `table` format:
```json
{
"type": "array",
"format": "table",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
}
}
}
}
```
For arrays of enumerated strings, you can also use the `select` or `checkbox` format. These formats require a very specific schema to work:
```json
{
"type": "array",
"uniqueItems": true,
"items": {
"type": "string",
"enum": ["value1","value2"]
}
}
```
By default, the `checkbox` editor (multiple checkboxes) will be used if there are fewer than 8 enum options. Otherwise, the `select` editor (a multiselect box) will be used.
You can override this default by passing in a format:
```json
{
"type": "array",
"format": "select",
"uniqueItems": true,
"items": {
"type": "string",
"enum": ["value1","value2"]
}
}
```
#### Objects
The default object layout is one child editor per row. The `grid` format will instead put multiple child editors per row.
This can make the editor much more compact, but at a cost of not guaranteeing child editor order. This format will stretch
columns to fill gaps untill all the 12 columns are filled.
```json
{
"type": "object",
"properties": {
"name": { "type": "string" }
},
"format": "grid"
}
```
The `grid-strict` format instead will respect columns sizes (no stretching) and properties order.
It introduces the new `grid-break` property to breaks the current row leaving a 4 colums gap.
```json
{
"type": "object",
"format": "grid-strict",
"properties": {
"a": {
"title": "a",
"type": "string",
"options": {
"grid_columns": 4
}
},
"b": {
"title": "b",
"type": "string",
"options": {
"grid_columns": 4,
"grid_break": true
}
},
"c": {
"title": "c",
"type": "string",
"options": {
"grid_columns": 6
}
},
"d": {
"title": "d",
"type": "string",
"options": {
"grid_columns": 6
}
}
}
}
```
The `categories` format groups properties in top-tabbed panels, one for each object or array property plus one that groups all added or other types of properties.
Panel tabs titles came from object or array titles and for the grouping panel it defaults to "Basic", unless `basicCategoryTitle` is defined.
```json
{
"type": "object",
"properties": {
"name": { "type": "string" }
},
"format": "categories",
"basicCategoryTitle": "Main"
}
```
InfoText
------------------
Using the option `infoText`, will create a info button, displaying the text you set, on hovering.
```json
{
"type": "string",
"title": "Name",
"options": {
"infoText": "Your full name"
}
}
```
Dependencies
------------------
Sometimes, it's necessary to have one field's value depend on another's.
The dependency information is fetched from the dependencies field in the options field of the control. The `dependencies` field should be a map where the keys are the names of the fields depended on and the value is the expected value. The value may be an array to indicate multiple value possibilities. This uses the internal field value watch system to notify fields of changes in their dependencies.
Here's an example schema:
```json
{
"title": "An object",
"type": "object",
"properties": {
"fieldOne": {
"title": "I should be changed to 'foo'",
"type": "string",
"enum": ["foo","bar"],
"default": "bar"
},
"depender1": {
"title": "I depend on fieldOne to be 'foo'",
"type": "string",
"enum": ["lorem","ipsum"],
"options": {
"dependencies": {
"fieldOne": "foo"
}
}
},
"depender2": {
"title": "I depend on fieldOne to be 'bar'",
"type": "string",
"enum": ["dolor", "sit"],
"options": {
"dependencies": {
"fieldOne": "bar"
}
}
}
}
}
```
The `dependencies` keyword from the JSON Schema specification is not nearly flexible enough to handle most use cases,
so JSON Editor introduces a couple custom keywords that help in this regard.
The first step is to have a field "watch" other fields for changes.
```json
{
"type": "object",
"properties": {
"first_name": {
"type": "string"
},
"last_name": {
"type": "string"
},
"full_name": {
"type": "string",
"watch": {
"fname": "first_name",
"lname": "last_name"
}
}
}
}
```
The keyword `watch` tells JSON Editor which fields to watch for changes.
The keys (`fname` and `lname` in this example) are alphanumeric aliases for the fields.
The values (`first_name` and `last_name`) are paths to the fields. To access nested properties of objects, use a dot for separation (e.g. "path.to.field").
By default paths are from the root of the schema, but you can make the paths relative to any ancestor node with a schema `id` defined as well. This is especially useful within arrays. Here's an example:
```json
{
"type": "array",
"items": {
"type": "object",
"id": "arr_item",
"properties": {
"first_name": {
"type": "string"
},
"last_name": {
"type": "string"
},
"full_name": {
"type": "string",
"watch": {
"fname": "arr_item.first_name",
"lname": "arr_item.last_name"
}
}
}
}
}
```
Now, the `full_name` field in each array element will watch the `first_name` and `last_name` fields within the same array element.
### Templates
Watching fields by itself doesn't do anything. For the example above, you need to tell JSON Editor that `full_name` should be `fname [space] lname`.
JSON Editor uses a javascript template engine to accomplish this. A barebones template engine is included by default (simple `{{variable}}` replacement only), but many of the most popular template engines are also supported:
* ejs
* handlebars
* hogan
* markup
* mustache
* swig
* underscore >=1.7 (since 1.4.0, see also [#332](https://github.com/json-editor/json-editor/pull/332))
You can change the default by setting `JSONEditor.defaults.options.template` to one of the supported template engines:
```javascript
JSONEditor.defaults.options.template = 'handlebars';
```
You can set the template engine on a per-instance basis as well:
```js
const editor = new JSONEditor(element,{
schema: schema,
template: 'hogan'
});
```
Here is the completed `full_name` example using the default barebones template engine:
```js+jinja
{
"type": "object",
"properties": {
"first_name": {
"type": "string"
},
"last_name": {
"type": "string"
},
"full_name": {
"type": "string",
"template": "{{fname}} {{lname}}",
"watch": {
"fname": "first_name",
"lname": "last_name"
}
}
}
}
```
It is also possible to set the "template" property to a JavaScript callback function, defined under `window.JSONEditor.defaults.callbacks.template`. Inside the JavaScript callback, you have access to all the variables defined under the `watch` property + the current editor.
Example Schema:
```js+jinja
{
"type": "object",
"properties": {
"first_name": {
"type": "string"
},
"last_name": {
"type": "string"
},
"full_name": {
"type": "string",
"template": "callbackFunction",
"watch": {
"fname": "first_name",
"lname": "last_name"
}
}
}
}
```
Example Callback function:
```js+jinja
window.JSONEditor.defaults.callbacks.template = {
"callbackFunction": (jseditor,e) => {
return e.fname + " " + e.lname;
}
};
```
### Enum Values
Another common dependency is a drop down menu whose possible values depend on other fields. Here's an example:
```json
{
"type": "object",
"properties": {
"possible_colors": {
"type": "array",
"items": {
"type": "string"
}
},
"primary_color": {
"type": "string"
}
}
}
```
Let's say you want to force `primary_color` to be one of colors in the `possible_colors` array. First, we must tell the `primary_color` field to watch the `possible_colors` array.
```json
{
"primary_color": {
"type": "string",
"watch": {
"colors": "possible_colors"
}
}
}
```
Then, we use the special keyword `enumSource` to tell JSON Editor that we want to use this field to populate a drop down.
```json
{
"primary_color": {
"type": "string",
"watch": {
"colors": "possible_colors"
},
"enumSource": "colors"
}
}
```
Now, anytime the `possible_colors` array changes, the dropdown's values will be changed as well.
This is the most basic usage of `enumSource`. The more verbose form of this property supports
filtering, pulling from multiple sources, constant values, etc..
Here's a more complex example (this uses the Swig template engine syntax to show some advanced features)
```js+jinja
{
// An array of sources
"enumSource": [
// Constant values
["none"],
{
// A watched field source
"source": "colors",
// Use a subset of the array
"slice": [2,5],
// Filter items with a template (if this renders to an empty string, it won't be included)
"filter": "{% if item !== 'black' %}1{% endif %}",
// Specify the display text for the enum option
"title": "{{item|upper}}",
// Specify the value property for the enum option
"value": "{{item|trim}}"
},
// Another constant value at the end of the list
["transparent"]
]
}
```
You can also specify a list of static items with a slightly different syntax:
```js+jinja
{
"enumSource": [{
// A watched field source
"source": [
{
"value": 1,
"title": "One"
},
{
"value": 2,
"title": "Two"
}
],
"title": "{{item.title}}",
"value": "{{item.value}}"
}]
]
}
```
The colors examples used an array of strings directly. Using the verbose form, you can
also make it work with an array of objects. Here's an example:
```js+jinja
{
"type": "object",
"properties": {
"possible_colors": {
"type": "array",
"items": {
"type": "object",
"properties": {
"text": {
"type": "string"
}
}
}
},
"primary_color": {
"type": "string",
"watch": {
"colors": "possible_colors"
},
"enumSource": [{
"source": "colors",
"value": "{{item.text}}"
}]
}
}
}
```
All of the optional templates in the verbose form have the properties `item` and `i` passed into them. `item` refers to the array element. `i` is the zero-based index.
#### Sorting
To sort the dynamic EnumSource, you can set the EnumSource property `sort` to either `asc` or `desc`.
### Dynamic Headers
The `title` keyword of a schema is used to add user friendly headers to the editing UI. Sometimes though, dynamic headers, which change based on other fields, are helpful.
Consider the example of an array of children. Without dynamic headers, the UI for the array elements would show `Child 1`, `Child 2`, etc..
It would be much nicer if the headers could be dynamic and incorporate information about the children, such as `1 - John (age 9)`, `2 - Sarah (age 11)`.
To accomplish this, use the `headerTemplate` property. All of the watched variables are passed into this template, along with the static title `title` (e.g. "Child"), the 0-based index `i0` (e.g. "0" and "1"), the 1-based index `i1`, and the field's value `self` (e.g. `{"name": "John", "age": 9}`).
```js+jinja
{
"type": "array",
"title": "Children",
"items": {
"type": "object",
"title": "Child",
"headerTemplate": "{{ i1 }} - {{ self.name }} (age {{ self.age }})",
"properties": {
"name": { "type": "string" },
"age": { "type": "integer" }
}
}
}
```

View File

@ -1,3 +1,106 @@
{
"test":"test"
"title": "Person",
"type": "object",
"id": "person",
"properties": {
"name": {
"type": "string",
"description": "First and Last name",
"minLength": 4
},
"age": {
"type": "integer",
"default": 21,
"minimum": 18,
"maximum": 99
},
"gender": {
"type": "string",
"enum": [
"male",
"female",
"other"
]
},
"location": {
"type": "object",
"title": "Location",
"properties": {
"city": {
"type": "string"
},
"state": {
"type": "string"
},
"citystate": {
"type": "string",
"description": "This is generated automatically from the previous two fields",
"template": "{{city}}, {{state}}",
"watch": {
"city": "person.location.city",
"state": "person.location.state"
}
}
}
},
"query": {
"type": "string",
"format": "sql",
"options": {
"ace": {
"theme": "ace/theme/monokai",
"tabSize": 2,
"useSoftTabs": true,
"wrap": true
}
}
},
"pets": {
"type": "array",
"format": "table",
"title": "Pets",
"uniqueItems": true,
"items": {
"type": "object",
"properties": {
"type": {
"type": "string",
"enum": [
"cat",
"dog",
"bird",
"reptile",
"other"
],
"default": "dog"
},
"name": {
"type": "string"
},
"fixed": {
"type": "boolean",
"title": "spayed / neutered"
}
}
}
},
"cars": {
"type": "array",
"format": "tabs",
"title": "Cars",
"uniqueItems": false,
"items": {
"type": "object",
"title": "Car",
"properties": {
"manufacturer": {
"type": "string"
},
"model": {
"type": "string"
}
}
}
}
}
}

View File

@ -3,10 +3,37 @@
<head>
<title>{{.AppName}}</title>
<style>
.ace_selection {
background: #7f7f00 !important;
}
</style>
</head>
<body>
<div class='container' style="max-width: 960px;">
<div class='columns'>
<h1 class='col-md-12'>{{.AppName}} Config</h1>
</div>
<div class='columns'>
<div class='column col-md-12'>
<button id='submit' class='tiny'>Submit</button>
<button id='load' class='secondary tiny'>Load</button>
<button id='download' class='secondary tiny'>Download</button>
<a id="downloadAnchorElem" style="display:none"></a>
<span id='valid_indicator' class='label'></span>
</div>
</div>
<br>
<div class='columns'>
<div class='column col-md-12' id='editor_holder'></div>
</div>
</div>
<script type="module" src="./main.js"></script>
{{.ACE_JS}}
<script>
let AppName = '{{.AppName}}'
</script>
</body>
</html>

View File

@ -2,13 +2,19 @@ package kconfig
import (
_ "embed"
"html/template"
"io/ioutil"
"net/http"
"strings"
"github.com/rs/zerolog/log"
"kumoly.io/lib/guard/engine"
"kumoly.io/tools/kconfig/public"
)
//go:embed assets/default.kfj
var defaultSchema string
//go:embed public/index.html
var index string
var servePublic = http.FileServer(http.FS(public.FS))
@ -24,14 +30,66 @@ type Kconfig struct {
KFJstr string
Mux *http.ServeMux
OnSave func(string) error
Get func() string
Apply func([]byte) error
Load func() []byte
}
func New() *Kconfig {
k := &Kconfig{}
k := &Kconfig{
AppName: "kconfig",
KFJstr: defaultSchema,
Apply: func(b []byte) error {
log.Debug().Msgf("%s", b)
return nil
},
Load: func() []byte {
return []byte(`{
"name": "test",
"age": 21,
"gender": "male",
"location": {
"city": "",
"state": "",
"citystate": ", "
},
"pets": [],
"cars": []
}`)
},
}
mux := http.NewServeMux()
mux.HandleFunc("/", k.App)
mux.HandleFunc("/api/schema", func(w http.ResponseWriter, r *http.Request) {
if r.Method != http.MethodGet {
http.NotFound(w, r)
return
}
w.Write([]byte(k.KFJstr))
})
mux.HandleFunc("/api/load", func(w http.ResponseWriter, r *http.Request) {
if r.Method != http.MethodGet {
http.NotFound(w, r)
return
}
w.Write([]byte(k.Load()))
})
mux.HandleFunc("/api/apply", func(w http.ResponseWriter, r *http.Request) {
if r.Method != http.MethodPost {
http.NotFound(w, r)
return
}
data, err := ioutil.ReadAll(r.Body)
r.Body.Close()
if err != nil {
panic(err)
}
err = k.Apply(data)
if err != nil {
panic(err)
}
w.Write([]byte("ok"))
})
k.Mux = mux
return k
}
@ -42,7 +100,13 @@ func (k *Kconfig) ServeHTTP(w http.ResponseWriter, r *http.Request) {
func (k *Kconfig) App(w http.ResponseWriter, r *http.Request) {
if r.URL.Path == "/" {
tmpl.Execute(w, struct{ AppName string }{k.AppName})
tmpl.Execute(w, struct {
AppName string
ACE_JS template.HTML
}{
k.AppName,
template.HTML(`<script src="ace/ace.js"></script>`),
})
return
}
file, err := public.FS.Open(strings.TrimPrefix(r.URL.String(), "/"))

71
main.js
View File

@ -1,3 +1,74 @@
import {JSONEditor} from '@json-editor/json-editor'
import 'spectre.css/dist/spectre.min.css'
import 'spectre.css/dist/spectre-exp.min.css'
import 'spectre.css/dist/spectre-icons.min.css'
(function() {
console.log("start")
var editor = new JSONEditor(document.getElementById('editor_holder'),{
theme: 'spectre',
iconlib: 'spectre',
ajax: true,
// The schema for the editor
schema: {
$ref: "api/schema",
format: "grid"
},
});
// Hook up the submit button to log to the console
document.getElementById('submit').addEventListener('click',async function() {
// Get the value from the editor
console.log(editor.getValue());
const res = await fetch('api/apply', {
method: 'POST',
body: JSON.stringify(editor.getValue()),
headers: new Headers({
'Content-Type': 'application/json'
})
}).catch(err=>{console.log(err);return;});
if (!res.ok) {
console.log(res)
}
});
// Hook up the load from server button
document.getElementById('load').addEventListener('click',async function() {
const res = await fetch('api/load').catch(err=>{console.log(err);return;});
if (!res.ok) {
console.log(res)
}
const body = await res.json();
editor.setValue(body);
});
// Hook up the validation indicator to update its
// status whenever the editor changes
editor.on('change',function() {
// Get an array of errors from the validator
var errors = editor.validate();
var indicator = document.getElementById('valid_indicator');
// Not valid
if(errors.length) {
indicator.className = 'label alert';
indicator.textContent = 'not valid';
}
// Valid
else {
indicator.className = 'label success';
indicator.textContent = 'valid';
}
});
document.getElementById('download').addEventListener('click',async function() {
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(editor.getValue(),null,2));
var dlAnchorElem = document.getElementById('downloadAnchorElem');
dlAnchorElem.setAttribute('href', dataStr );
dlAnchorElem.setAttribute('download', AppName+'.json');
dlAnchorElem.click();
});
})();

View File

@ -5,11 +5,12 @@
"author": "Evan Chen <evanchen@kumoly.io>",
"license": "MIT",
"scripts": {
"build":"rm public/*.js public/*.css; yarn parcel build index.html"
"build": "rm public/*.js public/*.css && yarn parcel build index.html"
},
"dependencies": {
"@json-editor/json-editor": "^2.6.1",
"parcel": "^2.0.1"
"parcel": "^2.0.1",
"spectre.css": "^0.5.9"
},
"targets": {
"default": {

17
public/ace/ace.js Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

8
public/ace/mode-html.js Normal file

File diff suppressed because one or more lines are too long

8
public/ace/mode-json.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,8 @@
ace.define("ace/mode/plain_text",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/text_highlight_rules","ace/mode/behaviour"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text").Mode,s=e("./text_highlight_rules").TextHighlightRules,o=e("./behaviour").Behaviour,u=function(){this.HighlightRules=s,this.$behaviour=new o};r.inherits(u,i),function(){this.type="text",this.getNextLineIndent=function(e,t,n){return""},this.$id="ace/mode/plain_text"}.call(u.prototype),t.Mode=u}); (function() {
ace.require(["ace/mode/plain_text"], function(m) {
if (typeof module == "object" && typeof exports == "object" && module) {
module.exports = m;
}
});
})();

8
public/ace/mode-sql.js Normal file
View File

@ -0,0 +1,8 @@
ace.define("ace/mode/sql_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text_highlight_rules").TextHighlightRules,s=function(){var e="select|insert|update|delete|from|where|and|or|group|by|order|limit|offset|having|as|case|when|then|else|end|type|left|right|join|on|outer|desc|asc|union|create|table|primary|key|if|foreign|not|references|default|null|inner|cross|natural|database|drop|grant",t="true|false",n="avg|count|first|last|max|min|sum|ucase|lcase|mid|len|round|rank|now|format|coalesce|ifnull|isnull|nvl",r="int|numeric|decimal|date|varchar|char|bigint|float|double|bit|binary|text|set|timestamp|money|real|number|integer",i=this.createKeywordMapper({"support.function":n,keyword:e,"constant.language":t,"storage.type":r},"identifier",!0);this.$rules={start:[{token:"comment",regex:"--.*$"},{token:"comment",start:"/\\*",end:"\\*/"},{token:"string",regex:'".*?"'},{token:"string",regex:"'.*?'"},{token:"string",regex:"`.*?`"},{token:"constant.numeric",regex:"[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b"},{token:i,regex:"[a-zA-Z_$][a-zA-Z0-9_$]*\\b"},{token:"keyword.operator",regex:"\\+|\\-|\\/|\\/\\/|%|<@>|@>|<@|&|\\^|~|<|>|<=|=>|==|!=|<>|="},{token:"paren.lparen",regex:"[\\(]"},{token:"paren.rparen",regex:"[\\)]"},{token:"text",regex:"\\s+"}]},this.normalizeRules()};r.inherits(s,i),t.SqlHighlightRules=s}),ace.define("ace/mode/folding/cstyle",["require","exports","module","ace/lib/oop","ace/range","ace/mode/folding/fold_mode"],function(e,t,n){"use strict";var r=e("../../lib/oop"),i=e("../../range").Range,s=e("./fold_mode").FoldMode,o=t.FoldMode=function(e){e&&(this.foldingStartMarker=new RegExp(this.foldingStartMarker.source.replace(/\|[^|]*?$/,"|"+e.start)),this.foldingStopMarker=new RegExp(this.foldingStopMarker.source.replace(/\|[^|]*?$/,"|"+e.end)))};r.inherits(o,s),function(){this.foldingStartMarker=/([\{\[\(])[^\}\]\)]*$|^\s*(\/\*)/,this.foldingStopMarker=/^[^\[\{\(]*([\}\]\)])|^[\s\*]*(\*\/)/,this.singleLineBlockCommentRe=/^\s*(\/\*).*\*\/\s*$/,this.tripleStarBlockCommentRe=/^\s*(\/\*\*\*).*\*\/\s*$/,this.startRegionRe=/^\s*(\/\*|\/\/)#?region\b/,this._getFoldWidgetBase=this.getFoldWidget,this.getFoldWidget=function(e,t,n){var r=e.getLine(n);if(this.singleLineBlockCommentRe.test(r)&&!this.startRegionRe.test(r)&&!this.tripleStarBlockCommentRe.test(r))return"";var i=this._getFoldWidgetBase(e,t,n);return!i&&this.startRegionRe.test(r)?"start":i},this.getFoldWidgetRange=function(e,t,n,r){var i=e.getLine(n);if(this.startRegionRe.test(i))return this.getCommentRegionBlock(e,i,n);var s=i.match(this.foldingStartMarker);if(s){var o=s.index;if(s[1])return this.openingBracketBlock(e,s[1],n,o);var u=e.getCommentFoldRange(n,o+s[0].length,1);return u&&!u.isMultiLine()&&(r?u=this.getSectionRange(e,n):t!="all"&&(u=null)),u}if(t==="markbegin")return;var s=i.match(this.foldingStopMarker);if(s){var o=s.index+s[0].length;return s[1]?this.closingBracketBlock(e,s[1],n,o):e.getCommentFoldRange(n,o,-1)}},this.getSectionRange=function(e,t){var n=e.getLine(t),r=n.search(/\S/),s=t,o=n.length;t+=1;var u=t,a=e.getLength();while(++t<a){n=e.getLine(t);var f=n.search(/\S/);if(f===-1)continue;if(r>f)break;var l=this.getFoldWidgetRange(e,"all",t);if(l){if(l.start.row<=s)break;if(l.isMultiLine())t=l.end.row;else if(r==f)break}u=t}return new i(s,o,u,e.getLine(u).length)},this.getCommentRegionBlock=function(e,t,n){var r=t.search(/\s*$/),s=e.getLength(),o=n,u=/^\s*(?:\/\*|\/\/|--)#?(end)?region\b/,a=1;while(++n<s){t=e.getLine(n);var f=u.exec(t);if(!f)continue;f[1]?a--:a++;if(!a)break}var l=n;if(l>o)return new i(o,r,l,t.length)}}.call(o.prototype)}),ace.define("ace/mode/folding/sql",["require","exports","module","ace/lib/oop","ace/mode/folding/cstyle"],function(e,t,n){"use strict";var r=e("../../lib/oop"),i=e("./cstyle").FoldMode,s=t.FoldMode=function(){};r.inherits(s,i),function(){}.call(s.prototype)}),ace.define("ace/mode/sql",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/sql_highlight_rules","ace/mode/folding/sql"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text").Mode,s=e("./sql_highlight_rules").SqlHighlightRules,o=e("./folding/sql").FoldMode,u=function(){this.HighlightRules=s,this.foldingRules=new o,this.$behaviour=this.$defaultBehaviour};r.inherits(u,i),function(){this.lineCommentStart="--",this.blockComment={start:"/*",end:"*/"},this.$id="ace/mode/sql",this.snippetFileId="ace/snippets/sql"}.call(u.prototype),t.Mode=u}); (function() {
ace.require(["ace/mode/sql"], function(m) {
if (typeof module == "object" && typeof exports == "object" && module) {
module.exports = m;
}
});
})();

8
public/ace/mode-text.js Normal file
View File

@ -0,0 +1,8 @@
; (function() {
ace.require(["ace/mode/text"], function(m) {
if (typeof module == "object" && typeof exports == "object" && module) {
module.exports = m;
}
});
})();

8
public/ace/mode-yaml.js Normal file
View File

@ -0,0 +1,8 @@
ace.define("ace/mode/yaml_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text_highlight_rules").TextHighlightRules,s=function(){this.$rules={start:[{token:"comment",regex:"#.*$"},{token:"list.markup",regex:/^(?:-{3}|\.{3})\s*(?=#|$)/},{token:"list.markup",regex:/^\s*[\-?](?:$|\s)/},{token:"constant",regex:"!![\\w//]+"},{token:"constant.language",regex:"[&\\*][a-zA-Z0-9-_]+"},{token:["meta.tag","keyword"],regex:/^(\s*\w.*?)(:(?=\s|$))/},{token:["meta.tag","keyword"],regex:/(\w+?)(\s*:(?=\s|$))/},{token:"keyword.operator",regex:"<<\\w*:\\w*"},{token:"keyword.operator",regex:"-\\s*(?=[{])"},{token:"string",regex:'["](?:(?:\\\\.)|(?:[^"\\\\]))*?["]'},{token:"string",regex:/[|>][-+\d]*(?:$|\s+(?:$|#))/,onMatch:function(e,t,n,r){r=r.replace(/ #.*/,"");var i=/^ *((:\s*)?-(\s*[^|>])?)?/.exec(r)[0].replace(/\S\s*$/,"").length,s=parseInt(/\d+[\s+-]*$/.exec(r));return s?(i+=s-1,this.next="mlString"):this.next="mlStringPre",n.length?(n[0]=this.next,n[1]=i):(n.push(this.next),n.push(i)),this.token},next:"mlString"},{token:"string",regex:"['](?:(?:\\\\.)|(?:[^'\\\\]))*?[']"},{token:"constant.numeric",regex:/(\b|[+\-\.])[\d_]+(?:(?:\.[\d_]*)?(?:[eE][+\-]?[\d_]+)?)(?=[^\d-\w]|$)/},{token:"constant.numeric",regex:/[+\-]?\.inf\b|NaN\b|0x[\dA-Fa-f_]+|0b[10_]+/},{token:"constant.language.boolean",regex:"\\b(?:true|false|TRUE|FALSE|True|False|yes|no)\\b"},{token:"paren.lparen",regex:"[[({]"},{token:"paren.rparen",regex:"[\\])}]"},{token:"text",regex:/[^\s,:\[\]\{\}]+/}],mlStringPre:[{token:"indent",regex:/^ *$/},{token:"indent",regex:/^ */,onMatch:function(e,t,n){var r=n[1];return r>=e.length?(this.next="start",n.shift(),n.shift()):(n[1]=e.length-1,this.next=n[0]="mlString"),this.token},next:"mlString"},{defaultToken:"string"}],mlString:[{token:"indent",regex:/^ *$/},{token:"indent",regex:/^ */,onMatch:function(e,t,n){var r=n[1];return r>=e.length?(this.next="start",n.splice(0)):this.next="mlString",this.token},next:"mlString"},{token:"string",regex:".+"}]},this.normalizeRules()};r.inherits(s,i),t.YamlHighlightRules=s}),ace.define("ace/mode/matching_brace_outdent",["require","exports","module","ace/range"],function(e,t,n){"use strict";var r=e("../range").Range,i=function(){};(function(){this.checkOutdent=function(e,t){return/^\s+$/.test(e)?/^\s*\}/.test(t):!1},this.autoOutdent=function(e,t){var n=e.getLine(t),i=n.match(/^(\s*\})/);if(!i)return 0;var s=i[1].length,o=e.findMatchingBracket({row:t,column:s});if(!o||o.row==t)return 0;var u=this.$getIndent(e.getLine(o.row));e.replace(new r(t,0,t,s-1),u)},this.$getIndent=function(e){return e.match(/^\s*/)[0]}}).call(i.prototype),t.MatchingBraceOutdent=i}),ace.define("ace/mode/folding/coffee",["require","exports","module","ace/lib/oop","ace/mode/folding/fold_mode","ace/range"],function(e,t,n){"use strict";var r=e("../../lib/oop"),i=e("./fold_mode").FoldMode,s=e("../../range").Range,o=t.FoldMode=function(){};r.inherits(o,i),function(){this.getFoldWidgetRange=function(e,t,n){var r=this.indentationBlock(e,n);if(r)return r;var i=/\S/,o=e.getLine(n),u=o.search(i);if(u==-1||o[u]!="#")return;var a=o.length,f=e.getLength(),l=n,c=n;while(++n<f){o=e.getLine(n);var h=o.search(i);if(h==-1)continue;if(o[h]!="#")break;c=n}if(c>l){var p=e.getLine(c).length;return new s(l,a,c,p)}},this.getFoldWidget=function(e,t,n){var r=e.getLine(n),i=r.search(/\S/),s=e.getLine(n+1),o=e.getLine(n-1),u=o.search(/\S/),a=s.search(/\S/);if(i==-1)return e.foldWidgets[n-1]=u!=-1&&u<a?"start":"","";if(u==-1){if(i==a&&r[i]=="#"&&s[i]=="#")return e.foldWidgets[n-1]="",e.foldWidgets[n+1]="","start"}else if(u==i&&r[i]=="#"&&o[i]=="#"&&e.getLine(n-2).search(/\S/)==-1)return e.foldWidgets[n-1]="start",e.foldWidgets[n+1]="","";return u!=-1&&u<i?e.foldWidgets[n-1]="start":e.foldWidgets[n-1]="",i<a?"start":""}}.call(o.prototype)}),ace.define("ace/mode/yaml",["require","exports","module","ace/lib/oop","ace/mode/text","ace/mode/yaml_highlight_rules","ace/mode/matching_brace_outdent","ace/mode/folding/coffee"],function(e,t,n){"use strict";var r=e("../lib/oop"),i=e("./text").Mode,s=e("./yaml_highlight_rules").YamlHighlightRules,o=e("./matching_brace_outdent").MatchingBraceOutdent,u=e("./folding/coffee").FoldMode,a=function(){this.HighlightRules=s,this.$outdent=new o,this.foldingRules=new u,this.$behaviour=this.$defaultBehaviour};r.inherits(a,i),function(){this.lineCommentStart=["#"],this.getNextLineIndent=function(e,t,n){var r=this.$getIndent(t);if(e=="start"){var i=t.match(/^.*[\{\(\[]\s*$/);i&&(r+=n)}return r},this.checkOutdent=function(e,t,n){return this.$outdent.checkOutdent(t,n)},this.autoOutdent=function(e,t,n){this.$outdent.autoOutdent(t,n)},this.$id="ace/mode/yaml"}.call(a.prototype),t.Mode=a}); (function() {
ace.require(["ace/mode/yaml"], function(m) {
if (typeof module == "object" && typeof exports == "object" && module) {
module.exports = m;
}
});
})();

View File

@ -0,0 +1,8 @@
ace.define("ace/theme/monokai",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!0,t.cssClass="ace-monokai",t.cssText=".ace-monokai .ace_gutter {background: #2F3129;color: #8F908A}.ace-monokai .ace_print-margin {width: 1px;background: #555651}.ace-monokai {background-color: #272822;color: #F8F8F2}.ace-monokai .ace_cursor {color: #F8F8F0}.ace-monokai .ace_marker-layer .ace_selection {background: #49483E}.ace-monokai.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #272822;}.ace-monokai .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}.ace-monokai .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #49483E}.ace-monokai .ace_marker-layer .ace_active-line {background: #202020}.ace-monokai .ace_gutter-active-line {background-color: #272727}.ace-monokai .ace_marker-layer .ace_selected-word {border: 1px solid #49483E}.ace-monokai .ace_invisible {color: #52524d}.ace-monokai .ace_entity.ace_name.ace_tag,.ace-monokai .ace_keyword,.ace-monokai .ace_meta.ace_tag,.ace-monokai .ace_storage {color: #F92672}.ace-monokai .ace_punctuation,.ace-monokai .ace_punctuation.ace_tag {color: #fff}.ace-monokai .ace_constant.ace_character,.ace-monokai .ace_constant.ace_language,.ace-monokai .ace_constant.ace_numeric,.ace-monokai .ace_constant.ace_other {color: #AE81FF}.ace-monokai .ace_invalid {color: #F8F8F0;background-color: #F92672}.ace-monokai .ace_invalid.ace_deprecated {color: #F8F8F0;background-color: #AE81FF}.ace-monokai .ace_support.ace_constant,.ace-monokai .ace_support.ace_function {color: #66D9EF}.ace-monokai .ace_fold {background-color: #A6E22E;border-color: #F8F8F2}.ace-monokai .ace_storage.ace_type,.ace-monokai .ace_support.ace_class,.ace-monokai .ace_support.ace_type {font-style: italic;color: #66D9EF}.ace-monokai .ace_entity.ace_name.ace_function,.ace-monokai .ace_entity.ace_other,.ace-monokai .ace_entity.ace_other.ace_attribute-name,.ace-monokai .ace_variable {color: #A6E22E}.ace-monokai .ace_variable.ace_parameter {font-style: italic;color: #FD971F}.ace-monokai .ace_string {color: #E6DB74}.ace-monokai .ace_comment {color: #75715E}.ace-monokai .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass,!1)}); (function() {
ace.require(["ace/theme/monokai"], function(m) {
if (typeof module == "object" && typeof exports == "object" && module) {
module.exports = m;
}
});
})();

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
console.log("start");

14
public/index.2e4018f1.js Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
<!DOCTYPE html><html><head><title>{{.AppName}}</title></head><body> <script type="module" src="index.2af1befd.js"></script> </body></html>
<!DOCTYPE html><html><head><link rel="stylesheet" href="index.e0891ed3.css"><title>{{.AppName}}</title><style>.ace_selection{background:#7f7f00!important}</style></head><body> <div class="container" style="max-width:960px;"> <div class="columns"> <h1 class="col-md-12">{{.AppName}} Config</h1> </div> <div class="columns"> <div class="col-md-12 column"> <button id="submit" class="tiny">Submit</button> <button id="load" class="secondary tiny">Load</button> <button id="download" class="secondary tiny">Download</button> <a id="downloadAnchorElem" style="display:none"></a> <span id="valid_indicator" class="label"></span> </div> </div> <br> <div class="columns"> <div class="col-md-12 column" id="editor_holder"></div> </div> </div> <script type="module" src="index.2e4018f1.js"></script> {{.ACE_JS}} <script>let AppName="{{.AppName}}";</script> </body></html>

View File

@ -3998,6 +3998,11 @@ source-map@~0.7.2:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
spectre.css@^0.5.9:
version "0.5.9"
resolved "https://registry.yarnpkg.com/spectre.css/-/spectre.css-0.5.9.tgz#86c732d093036d9fdc0a2ba570f005e4023ae6ca"
integrity sha512-9jUqwZmCnvflrxFGcK+ize43TvjwDjqMwZPVubEtSIHzvinH0TBUESm1LcOJx3Ur7bdPaeOHQIjOqBl1Y5kLFw==
split2@^3.1.1:
version "3.2.2"
resolved "https://registry.yarnpkg.com/split2/-/split2-3.2.2.tgz#bf2cf2a37d838312c249c89206fd7a17dd12365f"