Closes #53

Author: easafe

package-lock.json

@@ -6,13 +6,13 @@ let styleData = 1,
     attributeData = 4,
     keyData = 7;
 
-export function createProperty_(name) {
+export function createProperty(name) {
     return function (value) {
         return [propertyData, name, value];
     };
 }
 
-export function createAttribute_(name) {
+export function createAttribute(name) {
     return function (value) {
         return [attributeData, name, value];
     };

src/Flame/Html/Attribute/Internal.js

@@ -18,8 +18,6 @@ import Partial.Unsafe as PU
 import Prelude (const, flip, map, not, otherwise, show, ($), (<<<), (<>), (==))
 import Type.Row.Homogeneous (class Homogeneous)
 
-type Name = String
-type Value = String
 
 type ToStringAttribute = ToNodeData String
 
@@ -33,43 +31,37 @@ type ToNumberAttribute = ToNodeData Number
 class ToClassList a where
       to :: a -> Array String
 
-instance stringClassList :: ToClassList String where
+instance ToClassList String where
       to = DA.filter (not <<< DS.null) <<< DS.split (Pattern " ")
 
-instance recordClassList :: Homogeneous r Boolean => ToClassList { | r } where
+instance Homogeneous r Boolean => ToClassList { | r } where
       to = FO.keys <<< FO.filterWithKey (flip const) <<< FO.fromHomogeneous
 
 -- | Enables either tuples, arrays or records be used as an argument to `style`
 class ToStyleList a where
       toStyleList :: a -> Object String
 
-instance tupleStyleList :: ToStyleList (Tuple String String) where
+instance ToStyleList (Tuple String String) where
       toStyleList (Tuple a b) = FO.singleton a b
 else
-instance recordStyleList :: Homogeneous r String => ToStyleList { | r } where
+instance Homogeneous r String => ToStyleList { | r } where
       toStyleList = FO.fromFoldable <<< map go <<< toArray
             where go (Tuple name' value') = Tuple (caseify name') value'
                   toArray :: _ -> Array (Tuple String String)
                   toArray = FO.toUnfoldable <<< FO.fromHomogeneous
 else
-instance foldableStyleList :: DF.Foldable f => ToStyleList (f (Tuple String String)) where
+instance DF.Foldable f => ToStyleList (f (Tuple String String)) where
       toStyleList = FO.fromFoldable
 
 --these functions cheat by only creating the necessary key on NodeData
-foreign import createProperty_ :: forall message.  Name -> Value -> (NodeData message)
-foreign import createAttribute_ :: forall message. Name -> Value -> (NodeData message)
+-- | Sets a DOM property
+foreign import createProperty :: forall message. String -> String -> NodeData message
+-- | Creates a HTML attribute
+foreign import createAttribute :: forall message. String -> String -> NodeData message
 foreign import createClass :: forall message. Array String -> NodeData message
 foreign import createStyle :: forall message. Object String -> NodeData message
 foreign import createKey :: forall message. String -> NodeData message
 
--- | Sets a DOM property
-createProperty :: forall message. String -> String -> NodeData message
-createProperty name value = createProperty_ name value
-
--- | Creates a HTML attribute
-createAttribute :: forall message. String -> String -> NodeData message
-createAttribute name value = createAttribute_ name value
-
 booleanToFalsyString :: Boolean -> String
 booleanToFalsyString =
       case _ of

src/Flame/Html/Attribute/Internal.purs

@@ -1,7 +1,6 @@
 let textNode = 1,
     elementNode = 2,
     svgNode = 3,
-    fragmentNode = 4,
     lazyNode = 5,
     managedNode = 6;
 let styleData = 1,
@@ -74,13 +73,6 @@ export function createEmptyElement(tag) {
     };
 }
 
-export function createFragmentNode(children) {
-    return {
-        nodeType: fragmentNode,
-        node: undefined,
-        children: children
-    };
-}
 
 export function text(value) {
     return {

src/Flame/Html/Element.js

@@ -9,6 +9,7 @@ import Data.Maybe as DM
 import Effect (Effect)
 import Flame.Html.Attribute.Internal as FHAI
 import Flame.Types (Html, NodeData, Tag, Key)
+import Flame.Internal.Fragment as FIF
 import Web.DOM (Node)
 
 -- | `ToNode` simplifies element creation by automating common tag operations
@@ -19,19 +20,19 @@ class ToNode :: forall k. Type -> k -> (k -> Type) -> Constraint
 class ToNode a b c | a -> b where
       toNode :: a -> Array (c b)
 
-instance stringToHtml :: ToNode String b Html where
+instance ToNode String b Html where
       toNode = DA.singleton <<< text
 
-instance arrayToNodeData :: (ToNode a b c) => ToNode (Array a) b c where
+instance (ToNode a b c) => ToNode (Array a) b c where
       toNode = DA.concatMap toNode
 
-instance htmlToHtml :: ToNode (Html a) a Html where
+instance ToNode (Html a) a Html where
       toNode = DA.singleton
 
-instance stringToNodeData :: ToNode String b NodeData where
+instance ToNode String b NodeData where
       toNode = DA.singleton <<< FHAI.id
 
-instance nodeDataToNodedata :: ToNode (NodeData a) a NodeData where
+instance ToNode (NodeData a) a NodeData where
       toNode = DA.singleton
 
 type ToHtml a b h = ToNode a h NodeData => ToNode b h Html => a -> b -> Html h
@@ -51,7 +52,6 @@ type NodeRenderer arg = {
 foreign import createElementNode :: forall message. Tag -> Array (NodeData message) -> Array (Html message) -> Html message
 foreign import createDatalessElementNode :: forall message. Tag -> Array (Html message) -> Html message
 foreign import createSingleElementNode :: forall message. Tag -> Array (NodeData message) -> Html message
-foreign import createFragmentNode ::  forall message. Array (Html message) -> Html message
 
 --separate functions as svg are special babies
 foreign import createSvgNode :: forall message. Array (NodeData message) -> Array (Html message) -> Html message
@@ -85,7 +85,7 @@ createElement' tag nodeData = createSingleElementNode tag $ toNode nodeData
 -- |
 -- | Fragments act as wrappers: only children nodes are rendered
 fragment :: forall b h. ToHtml_ b h
-fragment children = createFragmentNode $ toNode children
+fragment children = FIF.createFragmentNode $ toNode children
 
 -- | Creates a lazy node
 -- |

src/Flame/Html/Element.purs

@@ -1,5 +1,5 @@
-export function compareReference_(a) {
+export function compareReference(a) {
       return function (b) {
             return a === b;
-      };
+      }
 }

src/Flame/Internal/Equality.js

@@ -2,10 +2,7 @@ module Flame.Internal.Equality where
 
 import Prelude (not, ($))
 
-foreign import compareReference_ :: forall a. a -> a -> Boolean
-
-compareReference :: forall a. a -> a -> Boolean
-compareReference a a2 = compareReference_ a a2
+foreign import compareReference :: forall a. a -> a -> Boolean
 
 modelHasChanged :: forall model. model -> model -> Boolean
 modelHasChanged old new = not $ compareReference old new

src/Flame/Internal/Equality.purs

@@ -0,0 +1,9 @@
+let fragmentNode = 4;
+
+export function createFragmentNode(children) {
+    return {
+        nodeType: fragmentNode,
+        node: undefined,
+        children: children
+    };
+}

src/Flame/Internal/Fragment.js

@@ -0,0 +1,3 @@
+module Flame.Internal.Fragment where
+
+foreign import createFragmentNode :: forall html message. Array (html message) -> html message

src/Flame/Internal/Fragment.purs

@@ -37,7 +37,7 @@ function F(eventWrapper, root, updater, html, isDry) {
     /** The current virtual nodes to be diff'd when the view updates */
     this.cachedHtml = html.node === undefined ? html : shallowCopy(html); //if node is already defined, then this object has been reused in views
 
-    //a "dry" application means that it was server side rendered
+    //"dry" application means that it was server side rendered
     if (isDry)
         this.hydrate(this.root, this.cachedHtml);
     else
@@ -192,24 +192,9 @@ F.prototype.createChildrenNodes = function (parent, children) {
     let childrenLength = children.length;
 
     for (let i = 0; i < childrenLength; ++i) {
-        let c = children[i] = (children[i].node === undefined ? children[i] : shallowCopy(children[i])),
-            node = this.createNode(c);
+        let html = children[i] = (children[i].node === undefined ? children[i] : shallowCopy(children[i]));
 
-        if (c.text !== undefined)
-            node.textContent = c.text;
-        else {
-            if (c.children !== undefined)
-                this.createChildrenNodes(node, c.children);
-            else if (c.rendered !== undefined) {
-                if (c.messageMapper !== undefined)
-                    lazyMessageMap(c.messageMapper, c.rendered);
-
-                if (c.rendered.children !== undefined)
-                    this.createChildrenNodes(node, c.rendered.children);
-            }
-        }
-
-        parent.appendChild(node);
+        this.checkCreateAllNodes(parent, html, null);
     }
 };
 
@@ -303,7 +288,7 @@ function createAttributes(node, attributes) {
         node.setAttribute(key, attributes[key]);
 }
 
-/** Creates synthethic events
+/** Creates synthetic events
  *
  *  If the event bubbles, a single listener for its type is added to the root, and fired at the nearest node from the target that contains a handler. Otherwise the event is added to the node */
 F.prototype.createAllEvents = function (node, html) {
@@ -328,9 +313,9 @@ F.prototype.createEvent = function (node, name, html) {
         if (html.messageMapper !== undefined)
             node[eventKey + eventPostfix] = html.messageMapper;
 
-        let synthethic = this.applicationEvents.get(name);
+        let synthetic = this.applicationEvents.get(name);
 
-        if (synthethic === undefined) {
+        if (synthetic === undefined) {
             let runEvent = this.runEvent.bind(this);
 
             this.root.addEventListener(name, runEvent, false);
@@ -340,7 +325,7 @@ F.prototype.createEvent = function (node, name, html) {
             });
         }
         else
-            synthethic.count++;
+            synthetic.count++;
     }
 };