Use custom json-schema build

Author: 1602

elm-package.json

@@ -5,17 +5,19 @@
     "license": "BSD3",
     "source-directories": [
         "src",
+        "../json-schema/src",
         "../json-form/src"
     ],
     "exposed-modules": [ ],
     "dependencies": {
         "1602/elm-feather": "2.2.0 <= v < 3.0.0",
-        "1602/json-schema": "4.1.0 <= v < 5.0.0",
         "1602/json-value": "3.0.2 <= v < 3.0.3",
+        "NoRedInk/elm-decode-pipeline": "3.0.0 <= v < 4.0.0",
         "elm-lang/core": "5.0.0 <= v < 6.0.0",
         "elm-lang/dom": "1.1.1 <= v < 2.0.0",
         "elm-lang/html": "2.0.0 <= v < 3.0.0",
-        "elm-lang/svg": "2.0.0 <= v < 3.0.0"
+        "elm-lang/svg": "2.0.0 <= v < 3.0.0",
+        "zwilias/elm-utf-tools": "1.0.1 <= v < 2.0.0"
     },
     "elm-version": "0.18.0 <= v < 0.19.0"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "json-form-custom-element",
   "private": false,
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "JSON Schema based form generator",
   "main": "dist/custom-element.js",
   "repository": "git://github.com/1602/json-form.git",

src/CustomElement.elm

@@ -3,20 +3,21 @@ port module CustomElement exposing (init, subscriptions, update, view)
 --import Html.Attributes exposing (class, classList)
 --import Html.Events exposing (onClick)
 
+import Dict
 import Html exposing (Html, div, h3, text)
 import Json.Decode exposing (Value, decodeValue)
 import Json.Encode as Encode
 import Json.Form
 import Json.Form.Config exposing (Config)
-import Json.Schema.Definitions
-import Json.Value as JsonValue exposing (decoder)
+import Json.Schema.Definitions exposing (Schema)
+import Json.Value as JsonValue exposing (JsonValue, decoder)
 
 
 type alias Model =
     { form : Json.Form.Model
     , config : Config
     , schema : Json.Schema.Definitions.Schema
-    , editedValue : Maybe JsonValue.JsonValue
+    , value : Maybe JsonValue.JsonValue
     }
 
 
@@ -39,12 +40,30 @@ init v =
                 |> decodeValue (Json.Decode.field "value" JsonValue.decoder)
                 |> Result.toMaybe
     in
-    { form = Json.Form.init config schema value
-    , editedValue = value
-    , schema = schema
-    , config = config
-    }
-        ! []
+    initForm schema value config
+
+
+initForm : Schema -> Maybe JsonValue -> Config -> ( Model, Cmd Msg )
+initForm schema value config =
+    let
+        form =
+            value |> Json.Form.init config schema
+    in
+    ( { form = form
+      , value = form.value
+      , schema = schema
+      , config = config
+      }
+    , [ ( "value"
+        , form.value
+            |> Maybe.map JsonValue.encode
+            |> Maybe.withDefault Encode.null
+        )
+      , ( "isValid", form.errors |> Dict.isEmpty |> Encode.bool )
+      ]
+        |> Encode.object
+        |> valueUpdated
+    )
 
 
 type Msg
@@ -76,11 +95,7 @@ update message model =
                         |> decodeValue Json.Schema.Definitions.decoder
                         |> Result.withDefault Json.Schema.Definitions.blankSchema
             in
-            { model
-                | schema = schema
-                , form = Json.Form.init model.config schema model.editedValue
-            }
-                ! []
+            initForm schema model.value model.config
 
         ChangeValue v ->
             let
@@ -89,18 +104,14 @@ update message model =
                         |> decodeValue JsonValue.decoder
                         |> Result.toMaybe
             in
-            { model
-                | editedValue = value
-                , form = Json.Form.init model.config model.schema value
-            }
-                ! []
+            initForm model.schema value model.config
 
         JsonFormMsg msg ->
             let
                 ( ( m, cmd ), exMsg ) =
                     Json.Form.update msg model.form
 
-                ( editedValue, exCmd ) =
+                ( value, exCmd ) =
                     case exMsg of
                         Json.Form.UpdateValue v isValid ->
                             ( v
@@ -112,15 +123,15 @@ update message model =
                                   )
                                 , ( "isValid", Encode.bool isValid )
                                 ]
-                                |> value
+                                |> valueUpdated
                             )
 
                         _ ->
-                            ( model.editedValue, Cmd.none )
+                            ( model.value, Cmd.none )
             in
             { model
                 | form = m
-                , editedValue = editedValue
+                , value = value
             }
                 ! [ cmd |> Cmd.map JsonFormMsg, exCmd ]
 
@@ -135,7 +146,7 @@ view model =
 port valueChange : (Value -> msg) -> Sub msg
 
 
-port value : Value -> Cmd msg
+port valueUpdated : Value -> Cmd msg
 
 
 port schemaChange : (Value -> msg) -> Sub msg

src/custom-element.js

@@ -3,6 +3,10 @@ const css = require('../../json-form/stylesheets/standalone.css').toString();
 
 
 function readAttribute(node, name, defValue) {
+    if (!node.hasAttribute(name)) {
+        return defValue;
+    }
+
     try {
         return JSON.parse(node.getAttribute(name));
     } catch (e) {
@@ -31,8 +35,9 @@ customElements.define('json-form',
             this._appRoot = appRoot;
 
             this._schema = readAttribute(this, 'schema', {});
-            this._value = readAttribute(this, 'value', null);
+            this._value = readAttribute(this, 'value', {});
             this._config = readAttribute(this, 'config');
+            this._muteAttributeChange = false;
 
         }
 
@@ -43,19 +48,18 @@ customElements.define('json-form',
                 config: this._config
             });
             this.app = app;
-            this.muteAttributeChange = false;
 
-            app.ports.value.subscribe(({ value, isValid }) => {
+            app.ports.valueUpdated.subscribe(({ value, isValid }) => {
                 const event = new CustomEvent('change', { detail: { value, isValid } });
-                this.muteAttributeChange = true;
+                this._muteAttributeChange = true;
                 this.setAttribute('value', JSON.stringify(value));
-                this.muteAttributeChange = false;
                 this.dispatchEvent(event);
             });
         }
 
         attributeChangedCallback(name, oldValue, newValue) {
-            if (this.muteAttributeChange) {
+            if (this._muteAttributeChange) {
+                this._muteAttributeChange = false;
                 return;
             }
 

src/index.html

@@ -19,6 +19,7 @@
                         },
                         "type": "boolean",
                         "title": "enable",
+                        "default": false,
                         "description": "Enable editing"
                     },
                     "form": {
@@ -212,7 +213,7 @@
         </style>
     </head>
     <body>
-        <json-form></json-form> 
+        <json-form></json-form>
         <json-viewer></json-viewer>
     </body>
 </html>