From 9f2bd988a0905e5c2b85db3c570eebc0acce5ef9 Mon Sep 17 00:00:00 2001 From: Rich-Harris Date: Mon, 17 Apr 2017 17:40:02 -0400 Subject: [PATCH] collapse text around comments --- src/generators/dom/index.js | 2 +- src/generators/dom/preprocess.js | 53 ++++++++--- src/generators/dom/visitors/Comment.js | 3 - src/generators/dom/visitors/index.js | 2 - src/parse/index.js | 4 +- src/parse/state/mustache.js | 4 +- src/parse/state/tag.js | 2 +- src/{parse => utils}/patterns.js | 0 src/{parse => }/utils/trim.js | 2 +- .../expected.js | 87 +++++++++++++++++++ .../collapses-text-around-comments/input.html | 30 +++++++ 11 files changed, 167 insertions(+), 22 deletions(-) delete mode 100644 src/generators/dom/visitors/Comment.js rename src/{parse => utils}/patterns.js (100%) rename src/{parse => }/utils/trim.js (85%) create mode 100644 test/js/samples/collapses-text-around-comments/expected.js create mode 100644 test/js/samples/collapses-text-around-comments/input.html diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js index 2e2a17117a..1309c4ddb2 100644 --- a/src/generators/dom/index.js +++ b/src/generators/dom/index.js @@ -43,7 +43,7 @@ export default function dom ( parsed, source, options ) { const { computations, hasJs, templateProperties, namespace } = generator.parseJs(); - const block = preprocess( generator, parsed.html.children ); + const block = preprocess( generator, parsed.html ); const state = { namespace, diff --git a/src/generators/dom/preprocess.js b/src/generators/dom/preprocess.js index 37481f478c..68b783aaaa 100644 --- a/src/generators/dom/preprocess.js +++ b/src/generators/dom/preprocess.js @@ -1,4 +1,5 @@ import Block from './Block.js'; +import { trimStart, trimEnd } from '../../utils/trim.js'; function isElseIf ( node ) { return node && node.children.length === 1 && node.children[0].type === 'IfBlock'; @@ -23,7 +24,7 @@ const preprocessors = { }); blocks.push( node._block ); - preprocessChildren( generator, node._block, node.children ); + preprocessChildren( generator, node._block, node ); if ( node._block.dependencies.size > 0 ) { dynamic = true; @@ -38,7 +39,7 @@ const preprocessors = { }); blocks.push( node.else._block ); - preprocessChildren( generator, node.else._block, node.else.children ); + preprocessChildren( generator, node.else._block, node.else ); if ( node.else._block.dependencies.size > 0 ) { dynamic = true; @@ -97,7 +98,7 @@ const preprocessors = { }); generator.blocks.push( node._block ); - preprocessChildren( generator, node._block, node.children ); + preprocessChildren( generator, node._block, node ); block.addDependencies( node._block.dependencies ); node._block.hasUpdateMethod = node._block.dependencies.size > 0; @@ -107,7 +108,7 @@ const preprocessors = { }); generator.blocks.push( node.else._block ); - preprocessChildren( generator, node.else._block, node.else.children ); + preprocessChildren( generator, node.else._block, node.else ); node.else._block.hasUpdateMethod = node.else._block.dependencies.size > 0; } }, @@ -140,13 +141,13 @@ const preprocessors = { }); generator.blocks.push( node._block ); - preprocessChildren( generator, node._block, node.children ); + preprocessChildren( generator, node._block, node ); block.addDependencies( node._block.dependencies ); node._block.hasUpdateMethod = node._block.dependencies.size > 0; } else { - preprocessChildren( generator, block, node.children ); + preprocessChildren( generator, block, node ); } } } @@ -154,14 +155,33 @@ const preprocessors = { preprocessors.RawMustacheTag = preprocessors.MustacheTag; -function preprocessChildren ( generator, block, children ) { - children.forEach( child => { +function preprocessChildren ( generator, block, node ) { + // glue text nodes together + const cleaned = []; + let lastChild; + + node.children.forEach( child => { + if ( child.type === 'Comment' ) return; + + if ( child.type === 'Text' && lastChild && lastChild.type === 'Text' ) { + lastChild.data += child.data; + lastChild.end = child.end; + } else { + cleaned.push( child ); + } + + lastChild = child; + }); + + node.children = cleaned; + + cleaned.forEach( child => { const preprocess = preprocessors[ child.type ]; if ( preprocess ) preprocess( generator, block, child ); }); } -export default function preprocess ( generator, children ) { +export default function preprocess ( generator, node ) { const block = new Block({ generator, name: generator.alias( 'create_main_fragment' ), @@ -179,8 +199,21 @@ export default function preprocess ( generator, children ) { }); generator.blocks.push( block ); - preprocessChildren( generator, block, children ); + preprocessChildren( generator, block, node ); block.hasUpdateMethod = block.dependencies.size > 0; + // trim leading and trailing whitespace from the top level + const firstChild = node.children[0]; + if ( firstChild && firstChild.type === 'Text' ) { + firstChild.data = trimStart( firstChild.data ); + if ( !firstChild.data ) node.children.shift(); + } + + const lastChild = node.children[ node.children.length - 1 ]; + if ( lastChild && lastChild.type === 'Text' ) { + lastChild.data = trimEnd( lastChild.data ); + if ( !lastChild.data ) node.children.pop(); + } + return block; } \ No newline at end of file diff --git a/src/generators/dom/visitors/Comment.js b/src/generators/dom/visitors/Comment.js deleted file mode 100644 index 4d3477d7ef..0000000000 --- a/src/generators/dom/visitors/Comment.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function visitComment () { - // do nothing -} diff --git a/src/generators/dom/visitors/index.js b/src/generators/dom/visitors/index.js index 7a3d2fecd4..4bdf5b4591 100644 --- a/src/generators/dom/visitors/index.js +++ b/src/generators/dom/visitors/index.js @@ -1,4 +1,3 @@ -import Comment from './Comment.js'; import EachBlock from './EachBlock.js'; import Element from './Element/Element.js'; import IfBlock from './IfBlock.js'; @@ -8,7 +7,6 @@ import Text from './Text.js'; import YieldTag from './YieldTag.js'; export default { - Comment, EachBlock, Element, IfBlock, diff --git a/src/parse/index.js b/src/parse/index.js index 29122d69bc..7ea7be222f 100644 --- a/src/parse/index.js +++ b/src/parse/index.js @@ -1,7 +1,7 @@ import { locate } from 'locate-character'; import fragment from './state/fragment.js'; -import { whitespace } from './patterns.js'; -import { trimStart, trimEnd } from './utils/trim.js'; +import { whitespace } from '../utils/patterns.js'; +import { trimStart, trimEnd } from '../utils/trim.js'; import getCodeFrame from '../utils/getCodeFrame.js'; import hash from './utils/hash.js'; diff --git a/src/parse/state/mustache.js b/src/parse/state/mustache.js index bb25fcfc16..9a9dd33886 100644 --- a/src/parse/state/mustache.js +++ b/src/parse/state/mustache.js @@ -1,6 +1,6 @@ import readExpression from '../read/expression.js'; -import { whitespace } from '../patterns.js'; -import { trimStart, trimEnd } from '../utils/trim.js'; +import { whitespace } from '../../utils/patterns.js'; +import { trimStart, trimEnd } from '../../utils/trim.js'; const validIdentifier = /[a-zA-Z_$][a-zA-Z0-9_$]*/; diff --git a/src/parse/state/tag.js b/src/parse/state/tag.js index 5069c5c85c..48e8cd197e 100644 --- a/src/parse/state/tag.js +++ b/src/parse/state/tag.js @@ -2,7 +2,7 @@ import readExpression from '../read/expression.js'; import readScript from '../read/script.js'; import readStyle from '../read/style.js'; import { readEventHandlerDirective, readBindingDirective } from '../read/directives.js'; -import { trimStart, trimEnd } from '../utils/trim.js'; +import { trimStart, trimEnd } from '../../utils/trim.js'; import { decodeCharacterReferences } from '../utils/html.js'; import isVoidElementName from '../../utils/isVoidElementName.js'; diff --git a/src/parse/patterns.js b/src/utils/patterns.js similarity index 100% rename from src/parse/patterns.js rename to src/utils/patterns.js diff --git a/src/parse/utils/trim.js b/src/utils/trim.js similarity index 85% rename from src/parse/utils/trim.js rename to src/utils/trim.js index 012203cd22..c64d7b26a2 100644 --- a/src/parse/utils/trim.js +++ b/src/utils/trim.js @@ -1,4 +1,4 @@ -import { whitespace } from '../patterns.js'; +import { whitespace } from './patterns.js'; export function trimStart ( str ) { let i = 0; diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js new file mode 100644 index 0000000000..d126127689 --- /dev/null +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -0,0 +1,87 @@ +import { appendNode, assign, createElement, createText, detachNode, dispatchObservers, insertNode, proto, setAttribute } from "svelte/shared.js"; + +var template = (function () { + return { + data: function () { + return { foo: 42 } + } + }; +}()); + +var added_css = false; +function add_css () { + var style = createElement( 'style' ); + style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n"; + appendNode( style, document.head ); + + added_css = true; +} + +function create_main_fragment ( root, component ) { + var p = createElement( 'p' ); + setAttribute( p, 'svelte-3842350206', '' ); + var text_value = root.foo; + var text = createText( text_value ); + appendNode( text, p ); + + return { + mount: function ( target, anchor ) { + insertNode( p, target, anchor ); + }, + + update: function ( changed, root ) { + if ( text_value !== ( text_value = root.foo ) ) { + text.data = text_value; + } + }, + + destroy: function ( detach ) { + if ( detach ) { + detachNode( p ); + } + } + }; +} + +function SvelteComponent ( options ) { + options = options || {}; + this._state = assign( template.data(), options.data ); + + this._observers = { + pre: Object.create( null ), + post: Object.create( null ) + }; + + this._handlers = Object.create( null ); + + this._root = options._root; + this._yield = options._yield; + + this._torndown = false; + if ( !added_css ) add_css(); + + this._fragment = create_main_fragment( this._state, this ); + if ( options.target ) this._fragment.mount( options.target, null ); +} + +assign( SvelteComponent.prototype, proto ); + +SvelteComponent.prototype._set = function _set ( newState ) { + var oldState = this._state; + this._state = assign( {}, oldState, newState ); + dispatchObservers( this, this._observers.pre, newState, oldState ); + if ( this._fragment ) this._fragment.update( newState, this._state ); + dispatchObservers( this, this._observers.post, newState, oldState ); +}; + +SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) { + this.fire( 'destroy' ); + + this._fragment.destroy( detach !== false ); + this._fragment = null; + + this._state = {}; + this._torndown = true; +}; + +export default SvelteComponent; \ No newline at end of file diff --git a/test/js/samples/collapses-text-around-comments/input.html b/test/js/samples/collapses-text-around-comments/input.html new file mode 100644 index 0000000000..a6c1ae40f7 --- /dev/null +++ b/test/js/samples/collapses-text-around-comments/input.html @@ -0,0 +1,30 @@ + + + + + +

{{foo}}

+ + + + + + + + + + + + + + \ No newline at end of file