React to attr changes in custom element

Author: 1602

bower.json

@@ -0,0 +1,17 @@
+{
+  "name": "json-form-custom-element",
+  "description": "JSON Schema based form generator",
+  "main": "build/custom-element.js",
+  "authors": [
+    "Anatoliy <[email protected]>"
+  ],
+  "license": "GNU GENERAL PUBLIC LICENSE v3",
+  "homepage": "https://github.com/1602/json-form",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "json-form-custom-element",
-  "private": true,
-  "version": "1.0.0",
+  "private": false,
+  "version": "1.0.5",
   "description": "JSON Schema based form generator",
   "main": "build/custom-element.js",
   "repository": "[email protected]:1602/json-form.git",

src/CustomElement.elm

@@ -14,39 +14,66 @@ import Json.Schema.Definitions
 
 type alias Model =
     { form : Json.Form.Model
+    , schema : Json.Schema.Definitions.Schema
     , editedValue : Maybe JsonValue.JsonValue
     }
 
 
 init : Value -> ( Model, Cmd Msg )
 init v =
     let
-        schema = v
-            |> decodeValue (Json.Decode.at [ "schema" ] Json.Schema.Definitions.decoder)
-            |> Result.withDefault Json.Schema.Definitions.blankSchema
-
-        value = v
-            |> decodeValue (Json.Decode.at [ "value" ] JsonValue.decoder)
-            |> Result.toMaybe
+        schema =
+            v
+                |> decodeValue (Json.Decode.at [ "schema" ] Json.Schema.Definitions.decoder)
+                |> Result.mapError Debug.log
+                |> Result.withDefault Json.Schema.Definitions.blankSchema
+
+        value =
+            v
+                |> decodeValue (Json.Decode.at [ "value" ] JsonValue.decoder)
+                |> Result.toMaybe
     in
         { form = Json.Form.init schema value
         , editedValue = value
+        , schema = schema
         }
-            ! [ loadSnippet "traveller" ]
+            ! []
 
 
 type Msg
     = JsonFormMsg Json.Form.Msg
     | ChangeValue Value
+    | ChangeSchema Value
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
 update message model =
     case message of
+        ChangeSchema v ->
+            let
+                schema =
+                    v
+                        |> decodeValue Json.Schema.Definitions.decoder
+                        |> Result.withDefault Json.Schema.Definitions.blankSchema
+            in
+                { model
+                    | schema = schema
+                    , form = Json.Form.init schema model.editedValue
+                }
+                    ! []
+
         ChangeValue v ->
-            { model | editedValue = v |> decodeValue JsonValue.decoder |> Result.toMaybe
-            }
-                ! []
+            let
+                value =
+                    v
+                        |> decodeValue JsonValue.decoder
+                        |> Result.toMaybe
+            in
+                { model
+                    | editedValue = value
+                    , form = Json.Form.init model.schema value
+                }
+                    ! []
 
         JsonFormMsg msg ->
             let
@@ -73,12 +100,15 @@ view model =
         |> Html.map JsonFormMsg
 
 
-port loadSnippet : String -> Cmd msg
+port valueChange : (Value -> msg) -> Sub msg
 
 
-port valueChange : (Value -> msg) -> Sub msg
+port schemaChange : (Value -> msg) -> Sub msg
 
 
 subscriptions : Model -> Sub Msg
 subscriptions _ =
-    valueChange ChangeValue
+    Sub.batch
+        [ valueChange ChangeValue
+        , schemaChange ChangeSchema
+        ]

src/Json/Form.elm

@@ -64,8 +64,8 @@ viewNode model schema isRequired path =
         Object ->
             viewObject model schema isRequired path
 
-        _ ->
-            text "Not implemented"
+        x ->
+            text (toString x ++ ": not implemented")
 
 
 editingMode : Model -> Schema -> EditingMode

src/custom-element.js

@@ -6,7 +6,7 @@ customElements.define('json-form',
     class extends HTMLElement {
 
         static get observedAttributes() {
-            return ['value'];
+            return ['value', 'schema'];
         }
 
         constructor() {
@@ -32,6 +32,9 @@ customElements.define('json-form',
                 case 'value':
                     this.app.ports.valueChange.send(JSON.parse(newValue));
                     break;
+                case 'schema':
+                    this.app.ports.schemaChange.send(JSON.parse(newValue));
+                    break;
             }
         }
 });