msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into gh-371

Browse Source
pull/391/head
Rich-Harris 8 years ago
parent 4360a03ffd 1dc66d403e
commit 89f0fb00e6
13 changed files with 105 additions and 16 deletions
Show Stats Download Patch File Download Diff File

5
CHANGELOG.md
Unescape View File

@ -1,5 +1,10 @@
# Svelte changelog
## 1.12.1
* Deconflict non-helper functions (`addCss` etc) ([#388](https://github.com/sveltejs/svelte/issues/388))
* Allow reserved words in tags, e.g. `{{class}}` ([#383](https://github.com/sveltejs/svelte/issues/383))
## 1.12.0
* Shorthand attributes — `<Widget :foo/>` is equivalent to `<Widget foo='{{foo}}'/>` ([#384](https://github.com/sveltejs/svelte/pull/384))

2
package.json
Unescape View File

@ -1,6 +1,6 @@
{
"name": "svelte",
"version": "1.12.0",
"version": "1.12.1",
"description": "The magical disappearing UI framework",
"main": "compiler/svelte.js",
"files": [

4
src/generators/Generator.js
Unescape View File

@ -232,6 +232,7 @@ export default class Generator {
const imports = this.imports;
const computations = [];
let defaultExport = null;
const templateProperties = {};
if ( js ) {
@ -251,7 +252,7 @@ export default class Generator {
}
}
const defaultExport = js.content.body.find( node => node.type === 'ExportDefaultDeclaration' );
defaultExport = js.content.body.find( node => node.type === 'ExportDefaultDeclaration' );
if ( defaultExport ) {
const finalNode = js.content.body[ js.content.body.length - 1 ];
@ -319,6 +320,7 @@ export default class Generator {
return {
computations,
defaultExport,
templateProperties
};
}

55
src/generators/dom/index.js
Unescape View File

@ -3,6 +3,7 @@ import getBuilders from './utils/getBuilders.js';
import CodeBuilder from '../../utils/CodeBuilder.js';
import namespaces from '../../utils/namespaces.js';
import processCss from '../shared/processCss.js';
import removeObjectKey from '../../utils/removeObjectKey.js';
import visitors from './visitors/index.js';
import Generator from '../Generator.js';
import * as shared from '../../shared/index.js';
@ -17,6 +18,8 @@ class DomGenerator extends Generator {
// Svelte's builtin `import { get, ... } from 'svelte/shared.js'`;
this.importedNames = {};
this.aliases = {};
this.importedComponents = {};
}
addElement ( name, renderStatement, needsIdentifier = false ) {
@ -138,6 +141,10 @@ class DomGenerator extends Generator {
this.uses[ name ] = true;
return this.alias( name );
}
alias ( name ) {
if ( !( name in this.aliases ) ) {
let alias = name;
let i = 1;
@ -158,7 +165,7 @@ export default function dom ( parsed, source, options, names ) {
const generator = new DomGenerator( parsed, source, name, names, visitors, options );
const { computations, templateProperties } = generator.parseJs();
const { computations, defaultExport, templateProperties } = generator.parseJs();
// Remove these after version 2
if ( templateProperties.onrender ) {
@ -184,11 +191,33 @@ export default function dom ( parsed, source, options, names ) {
const ns = templateProperties.namespace.value.value;
namespace = namespaces[ ns ] || ns;
// TODO remove the namespace property from the generated code, it's unused past this point
removeObjectKey( generator, defaultExport.declaration, 'namespace' );
}
if ( templateProperties.components ) {
let hasNonImportedComponent = false;
templateProperties.components.value.properties.forEach( property => {
const key = property.key.name;
const value = source.slice( property.value.start, property.value.end );
if ( generator.importedNames[ value ] ) {
generator.importedComponents[ key ] = value;
} else {
hasNonImportedComponent = true;
}
});
if ( hasNonImportedComponent ) {
// remove the specific components which were imported, as we'll refer to them directly
Object.keys( generator.importedComponents ).forEach ( key => {
removeObjectKey( generator, templateProperties.components.value, key );
});
} else {
// remove the entire components portion of the export
removeObjectKey( generator, defaultExport.declaration, 'components' );
}
}
generator.push({
name: 'renderMainFragment',
name: generator.alias( 'renderMainFragment' ),
namespace,
target: 'target',
localElementDepth: 0,
@ -238,12 +267,12 @@ export default function dom ( parsed, source, options, names ) {
});
builders.main.addBlock( deindent`
function applyComputations ( state, newState, oldState, isInitial ) {
function ${generator.alias( 'applyComputations' )} ( state, newState, oldState, isInitial ) {
${builder}
}
` );
builders._set.addLine( `applyComputations( this._state, newState, oldState, false )` );
builders._set.addLine( `${generator.alias( 'applyComputations' )}( this._state, newState, oldState, false )` );
}
// TODO is the `if` necessary?
@ -259,13 +288,13 @@ export default function dom ( parsed, source, options, names ) {
if ( parsed.css && options.css !== false ) {
builders.main.addBlock( deindent`
var addedCss = false;
function addCss () {
var ${generator.alias( 'addedCss' )} = false;
function ${generator.alias( 'addCss' )} () {
var style = ${generator.helper( 'createElement' )}( 'style' );
style.textContent = ${JSON.stringify( processCss( parsed, generator.code ) )};
${generator.helper( 'appendNode' )}( style, document.head );
addedCss = true;
${generator.alias( 'addedCss' )} = true;
}
` );
}
@ -276,7 +305,7 @@ export default function dom ( parsed, source, options, names ) {
builders.init.addLine( `this._torndown = false;` );
if ( parsed.css && options.css !== false ) {
builders.init.addLine( `if ( !addedCss ) addCss();` );
builders.init.addLine( `if ( !${generator.alias( 'addedCss' )} ) ${generator.alias( 'addCss' )}();` );
}
if ( generator.hasComponents ) {
@ -286,7 +315,7 @@ export default function dom ( parsed, source, options, names ) {
if ( generator.hasComplexBindings ) {
builders.init.addBlock( deindent`
this._bindings = [];
this._fragment = renderMainFragment( this._state, this );
this._fragment = ${generator.alias( 'renderMainFragment' )}( this._state, this );
if ( options.target ) this._fragment.mount( options.target, null );
while ( this._bindings.length ) this._bindings.pop()();
` );
@ -294,7 +323,7 @@ export default function dom ( parsed, source, options, names ) {
builders._set.addLine( `while ( this._bindings.length ) this._bindings.pop()();` );
} else {
builders.init.addBlock( deindent`
this._fragment = renderMainFragment( this._state, this );
this._fragment = ${generator.alias( 'renderMainFragment' )}( this._state, this );
if ( options.target ) this._fragment.mount( options.target, null );
` );
}
@ -327,7 +356,7 @@ export default function dom ( parsed, source, options, names ) {
if ( templateProperties.computed ) {
constructorBlock.addLine(
`applyComputations( this._state, this._state, {}, true );`
`${generator.alias( 'applyComputations' )}( this._state, this._state, {}, true );`
);
}
@ -419,4 +448,4 @@ export default function dom ( parsed, source, options, names ) {
}
return generator.generate( builders.main.toString(), options, { name, format } );
}
}

2
src/generators/dom/visitors/Component.js
Unescape View File

@ -106,7 +106,7 @@ export default {
componentInitProperties.push(`data: ${name}_initialData`);
}
const expression = node.name === ':Self' ? generator.name : `template.components.${node.name}`;
const expression = node.name === ':Self' ? generator.name : generator.importedComponents[ node.name ] || `template.components.${node.name}`;
local.init.addBlockAtStart( deindent`
${statements.join( '\n\n' )}

9
src/utils/removeObjectKey.js
Unescape View File

@ -0,0 +1,9 @@
export default function removeObjectKey ( generator, node, key ) {
if ( node.type !== 'ObjectExpression' ) return;
const properties = node.properties;
const index = properties.findIndex( property => property.key.type === 'Identifier' && property.key.name === key );
if ( index === -1 ) return;
const a = properties[ index ].start;
const b = index < properties.length - 1 ? properties[ index + 1 ].start : properties[ index ].end;
generator.code.remove( a, b );
}

8
test/generator/samples/deconflict-non-helpers/_config.js
Unescape View File

@ -0,0 +1,8 @@
export default {
html: `ABCD`,
test ( assert, component ) {
assert.equal( component.get( 'compute' ), 'ABCD' );
component.destroy();
}
};

17
test/generator/samples/deconflict-non-helpers/main.html
Unescape View File

@ -0,0 +1,17 @@
{{compute}}
<script>
import { addCss, addedCss, applyComputations, renderMainFragment } from './module.js';
export default {
data() {
return {
value: addCss + addedCss + applyComputations + renderMainFragment
};
},
computed: {
compute: value => value.toUpperCase()
}
};
</script>
<style>
</style>

4
test/generator/samples/deconflict-non-helpers/module.js
Unescape View File

@ -0,0 +1,4 @@
export const addCss = 'a';
export const addedCss = 'b';
export const applyComputations = 'c';
export const renderMainFragment = 'd';

1
test/generator/samples/imported-renamed-components/ComponentOne.html
Unescape View File

@ -0,0 +1 @@
One

1
test/generator/samples/imported-renamed-components/ComponentTwo.html
Unescape View File

@ -0,0 +1 @@
Two

3
test/generator/samples/imported-renamed-components/_config.js
Unescape View File

@ -0,0 +1,3 @@
export default {
html: `OneTwo`
};

10
test/generator/samples/imported-renamed-components/main.html
Unescape View File

@ -0,0 +1,10 @@
<RenamedComponentOne/><RenamedComponentTwo/>
<script>
import ComponentOne from './ComponentOne.html';
import ComponentTwo from './ComponentTwo.html';
export default {
components: { RenamedComponentOne: ComponentOne, RenamedComponentTwo: ComponentTwo }
};
</script>
Write Preview
Loading…
Cancel
Save