Skip to content

Commit b39e060

Browse files
16021602
committed
Extract code from json-form repo
0 parents  commit b39e060

13 files changed

+7220
-0
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
elm-stuff/
2+
node_modules/
3+
dist/
4+
build/

‎.npmignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
tests
2+
elm-stuff
3+
build
4+
src
5+
webpack.config.js

‎elm-package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"version": "1.1.0",
3+
"summary": "Form generator based on JSON Schema",
4+
"repository": "https://github.com/1602/json-form.git",
5+
"license": "BSD3",
6+
"source-directories": [
7+
"src",
8+
"../json-form/src"
9+
],
10+
"exposed-modules": [ ],
11+
"dependencies": {
12+
"1602/elm-feather": "2.2.0 <= v < 3.0.0",
13+
"1602/json-schema": "4.1.0 <= v < 5.0.0",
14+
"1602/json-value": "3.0.2 <= v < 3.0.3",
15+
"elm-lang/core": "5.0.0 <= v < 6.0.0",
16+
"elm-lang/html": "2.0.0 <= v < 3.0.0"
17+
},
18+
"elm-version": "0.18.0 <= v < 0.19.0"
19+
}

‎package.json

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "json-form-custom-element",
3+
"private": false,
4+
"version": "1.2.0",
5+
"description": "JSON Schema based form generator",
6+
"main": "dist/custom-element.js",
7+
"repository": "git://github.com/1602/json-form.git",
8+
"author": "Anatoliy <[email protected]>",
9+
"license": "GNU GENERAL PUBLIC LICENSE v3",
10+
"scripts": {
11+
"start": "npm run dev",
12+
"dev": "webpack-dev-server --hot --port 4000 --colors",
13+
"build": "webpack",
14+
"deploy": "gh-pages -d dist",
15+
"prod": "webpack -p",
16+
"postinstall": "elm-package install -y && elm-test init"
17+
},
18+
"devDependencies": {
19+
"@ubio/css": "^1.3.11",
20+
"babel-core": "^6.26.0",
21+
"babel-loader": "^7.1.2",
22+
"babel-preset-env": "^1.6.1",
23+
"chokidar-cli": "^1.2.0",
24+
"clean-webpack-plugin": "^0.1.17",
25+
"copy-webpack-plugin": "^4.2.3",
26+
"css-loader": "^0.28.7",
27+
"elm": "^0.18.0",
28+
"elm-hot-loader": "^0.5.4",
29+
"elm-verify-examples": "^2.3.1",
30+
"elm-webpack-loader": "^4.4.0",
31+
"extract-text-webpack-plugin": "^3.0.2",
32+
"file-loader": "^1.1.5",
33+
"gh-pages": "^1.1.0",
34+
"html-webpack-plugin": "^2.30.1",
35+
"node-sass": "^4.7.2",
36+
"postcss-loader": "^2.0.9",
37+
"resolve-url-loader": "^2.2.1",
38+
"style-loader": "^0.19.0",
39+
"to-string-loader": "^1.1.5",
40+
"uglifyjs-webpack-plugin": "^1.2.7",
41+
"url-loader": "^0.6.2",
42+
"webpack": "^3.10.0",
43+
"webpack-dev-server": "^2.9.7",
44+
"webpack-merge": "^4.1.1"
45+
}
46+
}

‎src/CustomElement.elm

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
port module CustomElement exposing (init, subscriptions, update, view)
2+
3+
--import Html.Attributes exposing (class, classList)
4+
--import Html.Events exposing (onClick)
5+
6+
import Html exposing (Html, div, h3, text)
7+
import Json.Decode exposing (Value, decodeValue)
8+
import Json.Encode as Encode
9+
import Json.Form
10+
import Json.Schema.Definitions
11+
import Json.Value as JsonValue exposing (decoder)
12+
13+
14+
type alias Model =
15+
{ form : Json.Form.Model
16+
, schema : Json.Schema.Definitions.Schema
17+
, editedValue : Maybe JsonValue.JsonValue
18+
}
19+
20+
21+
init : Value -> ( Model, Cmd Msg )
22+
init v =
23+
let
24+
schema =
25+
v
26+
|> decodeValue (Json.Decode.at [ "schema" ] Json.Schema.Definitions.decoder)
27+
|> Result.mapError Debug.log
28+
|> Result.withDefault Json.Schema.Definitions.blankSchema
29+
30+
value =
31+
v
32+
|> decodeValue (Json.Decode.at [ "value" ] JsonValue.decoder)
33+
|> Result.toMaybe
34+
in
35+
{ form = Json.Form.init schema value
36+
, editedValue = value
37+
, schema = schema
38+
}
39+
! []
40+
41+
42+
type Msg
43+
= JsonFormMsg Json.Form.Msg
44+
| ChangeValue Value
45+
| ChangeSchema Value
46+
47+
48+
update : Msg -> Model -> ( Model, Cmd Msg )
49+
update message model =
50+
case message of
51+
ChangeSchema v ->
52+
let
53+
schema =
54+
v
55+
|> decodeValue Json.Schema.Definitions.decoder
56+
|> Result.withDefault Json.Schema.Definitions.blankSchema
57+
in
58+
{ model
59+
| schema = schema
60+
, form = Json.Form.init schema model.editedValue
61+
}
62+
! []
63+
64+
ChangeValue v ->
65+
let
66+
value =
67+
v
68+
|> decodeValue JsonValue.decoder
69+
|> Result.toMaybe
70+
in
71+
{ model
72+
| editedValue = value
73+
, form = Json.Form.init model.schema value
74+
}
75+
! []
76+
77+
JsonFormMsg msg ->
78+
let
79+
( ( m, cmd ), exMsg ) =
80+
Json.Form.update msg model.form
81+
82+
( editedValue, exCmd ) =
83+
case exMsg of
84+
Json.Form.UpdateValue v isValid ->
85+
( v
86+
, Encode.object
87+
[ ( "value"
88+
, v
89+
|> Maybe.withDefault JsonValue.NullValue
90+
|> JsonValue.encode
91+
)
92+
, ( "isValid", Encode.bool isValid )
93+
]
94+
|> value
95+
)
96+
97+
_ ->
98+
( model.editedValue, Cmd.none )
99+
in
100+
{ model
101+
| form = m
102+
, editedValue = editedValue
103+
}
104+
! [ cmd |> Cmd.map JsonFormMsg, exCmd ]
105+
106+
107+
view : Model -> Html Msg
108+
view model =
109+
model.form
110+
|> Json.Form.view
111+
|> Html.map JsonFormMsg
112+
113+
114+
port valueChange : (Value -> msg) -> Sub msg
115+
116+
117+
port value : Value -> Cmd msg
118+
119+
120+
port schemaChange : (Value -> msg) -> Sub msg
121+
122+
123+
subscriptions : Model -> Sub Msg
124+
subscriptions _ =
125+
Sub.batch
126+
[ valueChange ChangeValue
127+
, schemaChange ChangeSchema
128+
]

‎src/JsonFormCustomElement.elm

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module JsonFormCustomElement exposing (main)
2+
3+
import Html
4+
import CustomElement exposing (init, update, view, subscriptions)
5+
6+
7+
main =
8+
Html.programWithFlags
9+
{ init = init
10+
, update = update
11+
, view = view
12+
, subscriptions = subscriptions
13+
}

‎src/custom-element.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
const Elm = require('./JsonFormCustomElement');
2+
const css = require('../../json-form/stylesheets/standalone.css').toString();
3+
4+
5+
customElements.define('json-form',
6+
class extends HTMLElement {
7+
8+
static get observedAttributes() {
9+
return ['value', 'schema'];
10+
}
11+
12+
constructor() {
13+
super();
14+
15+
const appRoot = document.createElement('div');
16+
const appStyles = document.createElement('style');
17+
appStyles.textContent = css;
18+
19+
const shadowRoot = this.attachShadow({mode: 'open'});
20+
shadowRoot.appendChild(appStyles);
21+
shadowRoot.appendChild(appRoot);
22+
23+
const json = this.getAttribute('value');
24+
const schema = JSON.parse(this.getAttribute('schema'));
25+
const value = JSON.parse(json);
26+
const app = Elm.JsonFormCustomElement.embed(appRoot, { schema, value });
27+
this.app = app;
28+
this.muteAttributeChange = false;
29+
30+
app.ports.value.subscribe(({ value, isValid }) => {
31+
const event = new CustomEvent('change', { detail: { value, isValid } });
32+
this.muteAttributeChange = true;
33+
this.setAttribute('value', JSON.stringify(value));
34+
this.muteAttributeChange = false;
35+
this.dispatchEvent(event);
36+
});
37+
}
38+
39+
attributeChangedCallback(name, oldValue, newValue) {
40+
if (this.muteAttributeChange) {
41+
return;
42+
}
43+
44+
switch (name) {
45+
case 'value':
46+
this.app.ports.valueChange.send(JSON.parse(newValue));
47+
break;
48+
case 'schema':
49+
this.app.ports.schemaChange.send(JSON.parse(newValue));
50+
break;
51+
}
52+
}
53+
});

‎src/index.ejs

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>JSON Form web-component demo</title>
7+
<!--link rel="stylesheet" href="https://unpkg.com/@ubio/[email protected]/index.css"></link-->
8+
<script src="https://unpkg.com/json-viewer-custom-element"></script>
9+
<script>
10+
const q = document.querySelector.bind(document);
11+
12+
window.addEventListener('load', () => {
13+
const form = q('json-form');
14+
const viewer = q('json-viewer');
15+
connect(form, viewer);
16+
});
17+
18+
function connect(form, viewer) {
19+
form.addEventListener('change', () =>
20+
viewer.setAttribute('value', form.getAttribute('value'))
21+
);
22+
}
23+
24+
</script>
25+
<style>
26+
json-viewer { margin: 50px; display: block; }
27+
json-form { margin: 50px; display: block; }
28+
</style>
29+
</head>
30+
<body>
31+
<!--
32+
<json-form
33+
schema='{"type":"string","title":"Greeting","maxLength":5,"description":"Enter any greeting"}'
34+
value='"hello"'
35+
></json-form>
36+
37+
<json-viewer
38+
value='"hello"'
39+
></json-viewer>
40+
-->
41+
</body>
42+
</html>

0 commit comments

Comments
 (0)