diff --git a/src/Native/VirtualDom.js b/src/Native/VirtualDom.js index 98d4750e..a1303e65 100644 --- a/src/Native/VirtualDom.js +++ b/src/Native/VirtualDom.js @@ -22,6 +22,14 @@ function text(string) }; } +function comment(string) +{ + return { + type: 'comment', + text: string + }; +} + function node(tag) { @@ -320,6 +328,9 @@ function render(vNode, eventNode) case 'text': return localDoc.createTextNode(vNode.text); + case 'comment': + return localDoc.createComment(vNode.text); + case 'node': var domNode = vNode.namespace ? localDoc.createElementNS(vNode.namespace, vNode.tag) @@ -649,6 +660,15 @@ function diffHelp(a, b, patches, index) return; + case 'comment': + if (a.text !== b.text) + { + patches.push(makePatch('p-comment', index, b.text)); + return; + } + + return; + case 'node': // Bail if obvious indicators have changed. Implies more serious // structural changes such that it's not worth it to diff. @@ -1205,8 +1225,9 @@ function addDomNodesHelp(domNode, vNode, patches, i, low, high, eventNode) return i; case 'text': + case 'comment': case 'thunk': - throw new Error('should never traverse `text` or `thunk` nodes like this'); + throw new Error('should never traverse `text`, `comment` or `thunk` nodes like this'); } } @@ -1256,6 +1277,10 @@ function applyPatch(domNode, patch) domNode.replaceData(0, domNode.length, patch.data); return domNode; + case 'p-comment': + domNode.replaceData(0, domNode.length, patch.data); + return domNode; + case 'p-thunk': return applyPatchesHelp(domNode, patch.data); @@ -1858,6 +1883,7 @@ var allEvents = mostEvents.concat('wheel', 'scroll'); return { node: node, text: text, + comment: comment, custom: custom, map: F2(map), diff --git a/src/VirtualDom.elm b/src/VirtualDom.elm index ac28926c..137155fc 100644 --- a/src/VirtualDom.elm +++ b/src/VirtualDom.elm @@ -1,6 +1,6 @@ module VirtualDom exposing ( Node - , text, node + , text, node, comment , Property, property, attribute, attributeNS, mapProperty , style , on, onWithOptions, Options, defaultOptions @@ -14,7 +14,7 @@ module VirtualDom exposing that expose more helper functions for HTML or SVG. # Create -@docs Node, text, node +@docs Node, text, node, comment # Declare Properties and Attributes @docs Property, property, attribute, attributeNS, mapProperty @@ -77,6 +77,16 @@ text = Native.VirtualDom.text +{-| Create a comment node in the DOM. It will escape the string just like it +does for `text`. + + comment "This is a comment" +-} +comment : String -> Node msg +comment = + Native.VirtualDom.comment + + {-| This function is useful when nesting components with [the Elm Architecture](https://github.com/evancz/elm-architecture-tutorial/). It lets you transform the messages produced by a subtree. @@ -328,4 +338,3 @@ programWithFlags -> Program flags model msg programWithFlags impl = Native.VirtualDom.programWithFlags Debug.wrapWithFlags impl -