Publish as custom element

Author: 1602

src/CustomElement.elm

@@ -0,0 +1,84 @@
+port module CustomElement exposing (init, update, view, subscriptions)
+
+import Html exposing (Html, div, text, h3)
+
+
+--import Html.Attributes exposing (class, classList)
+--import Html.Events exposing (onClick)
+
+import Json.Decode exposing (Value, decodeValue)
+import JsonValue exposing (decoder)
+import Json.Form
+import Json.Schema.Definitions
+
+
+type alias Model =
+    { form : Json.Form.Model
+    , 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
+    in
+        { form = Json.Form.init schema value
+        , editedValue = value
+        }
+            ! [ loadSnippet "traveller" ]
+
+
+type Msg
+    = JsonFormMsg Json.Form.Msg
+    | ChangeValue Value
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update message model =
+    case message of
+        ChangeValue v ->
+            { model | editedValue = v |> decodeValue JsonValue.decoder |> Result.toMaybe
+            }
+                ! []
+
+        JsonFormMsg msg ->
+            let
+                ( ( m, cmd ), exMsg ) =
+                    Json.Form.update msg model.form
+            in
+                { model
+                    | form = m
+                    , editedValue =
+                        case exMsg of
+                            Json.Form.UpdateValue v ->
+                                v
+
+                            _ ->
+                                model.editedValue
+                }
+                    ! [ cmd |> Cmd.map JsonFormMsg ]
+
+
+view : Model -> Html Msg
+view model =
+    model.form
+        |> Json.Form.view
+        |> Html.map JsonFormMsg
+
+
+port loadSnippet : String -> Cmd msg
+
+
+port valueChange : (Value -> msg) -> Sub msg
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    valueChange ChangeValue

src/Demo.elm

@@ -27,7 +27,7 @@ initialShowcase =
 init : ( Model, Cmd Msg )
 init =
     { showcase = initialShowcase
-    , form = Json.Form.init (getSnippet initialShowcase)
+    , form = Json.Form.init (getSnippet initialShowcase) Nothing
     , editedValue = Nothing
     , expandedNodes = [ [] ]
     }
@@ -69,7 +69,7 @@ update message model =
                 ! []
 
         SetShowcase s ->
-            { model | showcase = s, form = Json.Form.init (getSnippet s), editedValue = Nothing } ! []
+            { model | showcase = s, form = Json.Form.init (getSnippet s) Nothing, editedValue = Nothing } ! []
 
 
 view : Model -> Html Msg

src/Json/Form.elm

@@ -36,7 +36,7 @@ type alias Msg =
     Definitions.Msg
 
 
-init : Schema -> Model
+init : Schema -> Maybe JsonValue -> Model
 init =
     Definitions.init
 

src/Json/Form/Definitions.elm

@@ -15,11 +15,11 @@ type alias Model =
     }
 
 
-init : Schema -> Model
-init s =
+init : Schema -> Maybe JsonValue -> Model
+init s v =
     { schema = s
     , focused = Nothing
-    , value = Nothing
+    , value = v
     , errors = Dict.empty
     , beingEdited = []
     , editedNumber = ""

src/JsonFormCustomElement.elm

@@ -0,0 +1,13 @@
+module JsonFormCustomElement exposing (main)
+
+import Html
+import CustomElement exposing (init, update, view, subscriptions)
+
+
+main =
+    Html.programWithFlags
+        { init = init
+        , update = update
+        , view = view
+        , subscriptions = subscriptions
+        }

src/custom-element.js

@@ -0,0 +1,37 @@
+const Elm = require('./JsonFormCustomElement');
+const css = require('../stylesheets/standalone.css').toString();
+
+
+customElements.define('json-viewer',
+    class extends HTMLElement {
+
+        static get observedAttributes() {
+            return ['value'];
+        }
+
+        constructor() {
+            super();
+
+            const appRoot = document.createElement('div');
+            const appStyles = document.createElement('style');
+            appStyles.textContent = css;
+
+            const shadowRoot = this.attachShadow({mode: 'open'});
+            shadowRoot.appendChild(appStyles);
+            shadowRoot.appendChild(appRoot);
+
+            const json = this.getAttribute('value');
+            const schema = JSON.parse(this.getAttribute('schema'));
+            const value = JSON.parse(json);
+            const app = Elm.Main.embed(appRoot, { schema, value });
+            this.app = app;
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+            switch (name) {
+                case 'value':
+                    this.app.ports.valueChange.send(JSON.parse(newValue));
+                    break;
+            }
+        }
+});

stylesheets/standalone.css

@@ -0,0 +1 @@
+@import './json-form.css';

webpack.config.js

@@ -4,24 +4,42 @@ var merge = require("webpack-merge");
 var CopyWebpackPlugin = require("copy-webpack-plugin");
 var HTMLWebpackPlugin = require("html-webpack-plugin");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
 
 var TARGET_ENV =
     process.env.npm_lifecycle_event === "prod" ? "production" : "development";
 var filename = TARGET_ENV == "production" ? "[name]-[hash].js" : "index.js";
 
 var common = {
-    entry: "./src/index.js",
+    entry: {
+        'index.js': "./src/index.js",
+        'custom-element': './src/custom-element'
+    },
     output: {
         path: path.join(__dirname, "dist"),
         // webpack -p automatically adds hash when building for production
-        filename: filename
+        filename: '[name].js'
     },
     plugins: [
         new HTMLWebpackPlugin({
             // using .ejs prevents other loaders causing errors
             template: "src/index.ejs",
             // inject details of output file at end of body
             inject: "body"
+        }),
+        new UglifyJsPlugin({
+            uglifyOptions: {
+                ecma: 6,
+                compress: {
+                    pure_funcs: "F2,F3,F4,F5,F6,F7,F8,F9",
+                    pure_getters: true,
+                    keep_fargs: false,
+                    unsafe_comps: true,
+                    unsafe_methods: true,
+                    unsafe_arrows: true
+                }
+            }
         })
     ],
     resolve: {