From 9feee3a0bfe3e992218fdefcfd1e383125b8ec0d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 25 Jun 2017 10:05:52 -0400 Subject: [PATCH] use @foo for generator.alias("foo") --- src/generators/dom/index.ts | 71 +++++++------------ src/generators/dom/preprocess.ts | 2 +- .../dom/visitors/Component/Component.ts | 2 +- .../dom/visitors/Element/EventHandler.ts | 4 +- .../dom/visitors/Element/addTransitions.ts | 6 +- src/generators/server-side-rendering/index.ts | 14 ++-- .../visitors/Component.ts | 2 +- .../expected-bundle.js | 2 +- .../expected.js | 2 +- 9 files changed, 40 insertions(+), 65 deletions(-) diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index ddc619e802..7dd1e04656 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -16,7 +16,6 @@ const helperPattern = new RegExp(`@(${Object.keys(shared).join('|')})\\b`, 'g'); export class DomGenerator extends Generator { blocks: Block[]; - uses: Set; readonly: Set; metaBindings: string[]; @@ -34,7 +33,6 @@ export class DomGenerator extends Generator { ) { super(parsed, source, name, options); this.blocks = []; - this.uses = new Set(); this.readonly = new Set(); @@ -43,16 +41,6 @@ export class DomGenerator extends Generator { // initial values for e.g. window.innerWidth, if there's a <:Window> meta tag this.metaBindings = []; } - - helper(name: string) { - if (this.options.dev && `${name}Dev` in shared) { - name = `${name}Dev`; - } - - this.uses.add(name); - - return this.alias(name); - } } export default function dom( @@ -99,17 +87,13 @@ export default function dom( `( '${dep}' in newState && @differs( state.${dep}, oldState.${dep} ) )` ) .join(' || ')}`; - const statement = `state.${key} = newState.${key} = ${generator.alias( - 'template' - )}.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );`; + const statement = `state.${key} = newState.${key} = @template.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );`; computationBuilder.addConditionalLine(condition, statement); }); builder.addBlock(deindent` - function ${generator.alias( - 'recompute' - )} ( state, newState, oldState, isInitial ) { + function @recompute ( state, newState, oldState, isInitial ) { ${computationBuilder} } `); @@ -130,10 +114,7 @@ export default function dom( var oldState = this._state; this._state = @assign( {}, oldState, newState ); - ${computations.length && - `${generator.alias( - 'recompute' - )}( this._state, newState, oldState, false )`} + ${computations.length && `@recompute( this._state, newState, oldState, false )`} @dispatchObservers( this, this._observers.pre, newState, oldState ); ${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`} @dispatchObservers( this, this._observers.post, newState, oldState ); @@ -151,9 +132,9 @@ export default function dom( if (generator.css && options.css !== false) { builder.addBlock(deindent` - function ${generator.alias('add_css')} () { + function @add_css () { var style = @createElement( 'style' ); - style.id = ${JSON.stringify(generator.cssId + '-style')}; + style.id = '${generator.cssId}-style'; style.textContent = ${JSON.stringify(generator.css)}; @appendNode( style, document.head ); } @@ -171,14 +152,14 @@ export default function dom( const prototypeBase = `${name}.prototype` + (templateProperties.methods - ? `, ${generator.alias('template')}.methods` + ? `, @template.methods` : ''); const proto = sharedPath ? `@proto ` : deindent` { ${['get', 'fire', 'observe', 'on', 'set', '_flush'] - .map(n => `${n}: ${generator.helper(n)}`) + .map(n => `${n}: @${n}`) .join(',\n')} }`; @@ -190,15 +171,11 @@ export default function dom( `if ( !options.target && !options._root ) throw new Error( "'target' is a required option" );`} ${generator.usesRefs && `this.refs = {};`} this._state = ${templateProperties.data - ? `@assign( ${generator.alias( - 'template' - )}.data(), options.data )` + ? `@assign( @template.data(), options.data )` : `options.data || {}`}; ${generator.metaBindings} ${computations.length && - `${generator.alias( - 'recompute' - )}( this._state, this._state, {}, true );`} + `@recompute( this._state, this._state, {}, true );`} ${options.dev && Array.from(generator.expectedProperties).map( prop => @@ -224,14 +201,12 @@ export default function dom( options.css !== false && `if ( !document.getElementById( ${JSON.stringify( generator.cssId + '-style' - )} ) ) ${generator.alias('add_css')}();`} + )} ) ) @add_css();`} ${(generator.hasComponents || generator.hasIntroTransitions) && `this._renderHooks = [];`} ${generator.hasComplexBindings && `this._bindings = [];`} - this._fragment = ${generator.alias( - 'create_main_fragment' - )}( this._state, this ); + this._fragment = @create_main_fragment( this._state, this ); if ( options.target ) { ${generator.hydratable ? @@ -254,11 +229,9 @@ export default function dom( ${templateProperties.oncreate && deindent` if ( options._root ) { - options._root._renderHooks.push( ${generator.alias( - 'template' - )}.oncreate.bind( this ) ); + options._root._renderHooks.push( @template.oncreate.bind( this ) ); } else { - ${generator.alias('template')}.oncreate.call( this ); + @template.oncreate.call( this ); } `} } @@ -272,7 +245,7 @@ export default function dom( ${name}.prototype.teardown = ${name}.prototype.destroy = function destroy ( detach ) { this.fire( 'destroy' ); ${templateProperties.ondestroy && - `${generator.alias('template')}.ondestroy.call( this );`} + `@template.ondestroy.call( this );`} if ( detach !== false ) this._fragment.unmount(); this._fragment.destroy(); @@ -283,8 +256,16 @@ export default function dom( }; `); + const usedHelpers = new Set(); + let result = builder.toString() - .replace(helperPattern, (match: string, name: string) => generator.helper(name)); + .replace(/@(\w+)\b/g, (match: string, name: string) => { + if (name in shared) { + if (options.dev && `${name}Dev` in shared) name = `${name}Dev`; + usedHelpers.add(name); + } + return generator.alias(name); + }); if (sharedPath) { if (format !== 'es') { @@ -293,7 +274,7 @@ export default function dom( ); } - const names = Array.from(generator.uses).sort().map(name => { + const names = Array.from(usedHelpers).sort().map(name => { return name !== generator.alias(name) ? `${name} as ${generator.alias(name)}` : name; @@ -301,7 +282,7 @@ export default function dom( result = `import { ${names.join(', ')} } from ${JSON.stringify(sharedPath)};\n\n` + result; } else { - generator.uses.forEach(key => { + usedHelpers.forEach(key => { const str = shared[key]; const code = new MagicString(str); const expression = parseExpressionAt(str, 0); @@ -320,7 +301,7 @@ export default function dom( if (node.name in shared) { // this helper function depends on another one const dependency = node.name; - generator.uses.add(dependency); + usedHelpers.add(dependency); const alias = generator.alias(dependency); if (alias !== node.name) diff --git a/src/generators/dom/preprocess.ts b/src/generators/dom/preprocess.ts index dc3ff59717..d9600cea61 100644 --- a/src/generators/dom/preprocess.ts +++ b/src/generators/dom/preprocess.ts @@ -382,7 +382,7 @@ export default function preprocess( ) { const block = new Block({ generator, - name: generator.alias('create_main_fragment'), + name: '@create_main_fragment', key: null, contexts: new Map(), diff --git a/src/generators/dom/visitors/Component/Component.ts b/src/generators/dom/visitors/Component/Component.ts index 96fdd4e31e..a33458e037 100644 --- a/src/generators/dom/visitors/Component/Component.ts +++ b/src/generators/dom/visitors/Component/Component.ts @@ -184,7 +184,7 @@ export default function visitComponent( const expression = node.name === ':Self' ? generator.name : generator.importedComponents.get(node.name) || - `${generator.alias('template')}.components.${node.name}`; + `@template.components.${node.name}`; local.create.addBlockAtStart(deindent` ${statements.join('\n')} diff --git a/src/generators/dom/visitors/Element/EventHandler.ts b/src/generators/dom/visitors/Element/EventHandler.ts index 8edb614a62..2a13379364 100644 --- a/src/generators/dom/visitors/Element/EventHandler.ts +++ b/src/generators/dom/visitors/Element/EventHandler.ts @@ -72,9 +72,7 @@ export default function visitEventHandler( block.addVariable(handlerName); block.builders.hydrate.addBlock(deindent` - ${handlerName} = ${generator.alias( - 'template' - )}.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) { + ${handlerName} = @template.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) { ${handlerBody} }); `); diff --git a/src/generators/dom/visitors/Element/addTransitions.ts b/src/generators/dom/visitors/Element/addTransitions.ts index 2a0a52b41e..238831c04b 100644 --- a/src/generators/dom/visitors/Element/addTransitions.ts +++ b/src/generators/dom/visitors/Element/addTransitions.ts @@ -20,7 +20,7 @@ export default function addTransitions( block.addVariable(name); - const fn = `${generator.alias('template')}.transitions.${intro.name}`; + const fn = `@template.transitions.${intro.name}`; block.builders.intro.addBlock(deindent` ${block.component}._renderHooks.push( function () { @@ -48,7 +48,7 @@ export default function addTransitions( ? block.contextualise(intro.expression).snippet : '{}'; - const fn = `${generator.alias('template')}.transitions.${intro.name}`; // TODO add built-in transitions? + const fn = `@template.transitions.${intro.name}`; // TODO add built-in transitions? if (outro) { block.builders.intro.addBlock(deindent` @@ -73,7 +73,7 @@ export default function addTransitions( ? block.contextualise(outro.expression).snippet : '{}'; - const fn = `${generator.alias('template')}.transitions.${outro.name}`; + const fn = `@template.transitions.${outro.name}`; // TODO hide elements that have outro'd (unless they belong to a still-outroing // group) prior to their removal from the DOM diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts index 32a4c6635e..fe065c2260 100644 --- a/src/generators/server-side-rendering/index.ts +++ b/src/generators/server-side-rendering/index.ts @@ -59,22 +59,18 @@ export default function ssr( ${name}.data = function () { return ${templateProperties.data - ? `${generator.alias('template')}.data()` + ? `@template.data()` : `{}`}; }; ${name}.render = function ( state, options ) { ${templateProperties.data - ? `state = Object.assign( ${generator.alias( - 'template' - )}.data(), state || {} );` + ? `state = Object.assign( @template.data(), state || {} );` : `state = state || {};`} ${computations.map( ({ key, deps }) => - `state.${key} = ${generator.alias( - 'template' - )}.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );` + `state.${key} = @template.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );` )} ${generator.bindings.length && @@ -121,7 +117,7 @@ export default function ssr( const { name } = prop.key; const expression = generator.importedComponents.get(name) || - `${generator.alias('template')}.components.${name}`; + `@template.components.${name}`; return `addComponent( ${expression} );`; })} `} @@ -144,7 +140,7 @@ export default function ssr( function __escape ( html ) { return String( html ).replace( /["'&<>]/g, match => escaped[ match ] ); } - `; + `.replace(/@(\w+)/g, (match, name) => generator.alias(name)); return generator.generate(result, options, { name, format }); } diff --git a/src/generators/server-side-rendering/visitors/Component.ts b/src/generators/server-side-rendering/visitors/Component.ts index 6fb87973e4..fb34b188f4 100644 --- a/src/generators/server-side-rendering/visitors/Component.ts +++ b/src/generators/server-side-rendering/visitors/Component.ts @@ -68,7 +68,7 @@ export default function visitComponent( const expression = node.name === ':Self' ? generator.name : generator.importedComponents.get(node.name) || - `${generator.alias('template')}.components.${node.name}`; + `@template.components.${node.name}`; bindings.forEach(binding => { block.addBinding(binding, expression); diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js index 35aa419e8b..0f9374f360 100644 --- a/test/js/samples/collapses-text-around-comments/expected-bundle.js +++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js @@ -145,7 +145,7 @@ var template = (function () { function add_css () { var style = createElement( 'style' ); - style.id = "svelte-3842350206-style"; + style.id = 'svelte-3842350206-style'; style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n"; appendNode( style, document.head ); } diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index d3a818a9d0..07b8b893ac 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -10,7 +10,7 @@ var template = (function () { function add_css () { var style = createElement( 'style' ); - style.id = "svelte-3842350206-style"; + style.id = 'svelte-3842350206-style'; style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n"; appendNode( style, document.head ); }