mirror of https://github.com/sveltejs/svelte
Rich Harris
8 years ago
committed by
GitHub
commit
7cd8683952
@ -0,0 +1,319 @@
|
||||
import MagicString, { Bundle } from 'magic-string';
|
||||
import { walk } from 'estree-walker';
|
||||
import isReference from '../utils/isReference.js';
|
||||
import counter from './shared/utils/counter.js';
|
||||
import flattenReference from '../utils/flattenReference.js';
|
||||
import globalWhitelist from '../utils/globalWhitelist.js';
|
||||
import getIntro from './shared/utils/getIntro.js';
|
||||
import getOutro from './shared/utils/getOutro.js';
|
||||
|
||||
export default class Generator {
|
||||
constructor ( parsed, source, names, visitors ) {
|
||||
this.parsed = parsed;
|
||||
this.source = source;
|
||||
this.names = names;
|
||||
this.visitors = visitors;
|
||||
|
||||
this.imports = [];
|
||||
this.helpers = {};
|
||||
this.components = {};
|
||||
this.events = {};
|
||||
|
||||
this.elementDepth = 0;
|
||||
|
||||
this.code = new MagicString( source );
|
||||
this.getUniqueName = counter( names );
|
||||
this.cssId = parsed.css ? `svelte-${parsed.hash}` : '';
|
||||
this.usesRefs = false;
|
||||
|
||||
this._callbacks = {};
|
||||
}
|
||||
|
||||
addSourcemapLocations ( node ) {
|
||||
walk( node, {
|
||||
enter: node => {
|
||||
this.code.addSourcemapLocation( node.start );
|
||||
this.code.addSourcemapLocation( node.end );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
contextualise ( expression, isEventHandler ) {
|
||||
const usedContexts = [];
|
||||
const dependencies = [];
|
||||
|
||||
const { code, helpers } = this;
|
||||
const { contextDependencies, contexts, indexes } = this.current;
|
||||
|
||||
walk( expression, {
|
||||
enter ( node, parent ) {
|
||||
if ( isReference( node, parent ) ) {
|
||||
const { name } = flattenReference( node );
|
||||
|
||||
if ( parent && parent.type === 'CallExpression' && node === parent.callee && helpers[ name ] ) {
|
||||
code.prependRight( node.start, `template.helpers.` );
|
||||
}
|
||||
|
||||
else if ( name === 'event' && isEventHandler ) {
|
||||
// noop
|
||||
}
|
||||
|
||||
else if ( contexts[ name ] ) {
|
||||
dependencies.push( ...contextDependencies[ name ] );
|
||||
if ( !~usedContexts.indexOf( name ) ) usedContexts.push( name );
|
||||
}
|
||||
|
||||
else if ( indexes[ name ] ) {
|
||||
const context = indexes[ name ];
|
||||
if ( !~usedContexts.indexOf( context ) ) usedContexts.push( context );
|
||||
}
|
||||
|
||||
else {
|
||||
if ( globalWhitelist[ name ] ) {
|
||||
code.prependRight( node.start, `( '${name}' in root ? root.` );
|
||||
code.appendLeft( node.object.end, ` : ${name} )` );
|
||||
} else {
|
||||
code.prependRight( node.start, `root.` );
|
||||
}
|
||||
|
||||
dependencies.push( name );
|
||||
if ( !~usedContexts.indexOf( 'root' ) ) usedContexts.push( 'root' );
|
||||
}
|
||||
|
||||
this.skip();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
dependencies,
|
||||
contexts: usedContexts,
|
||||
snippet: `[✂${expression.start}-${expression.end}✂]`,
|
||||
string: this.code.slice( expression.start, expression.end )
|
||||
};
|
||||
}
|
||||
|
||||
fire ( eventName, data ) {
|
||||
const handlers = eventName in this._callbacks && this._callbacks[ eventName ].slice();
|
||||
if ( !handlers ) return;
|
||||
|
||||
for ( let i = 0; i < handlers.length; i += 1 ) {
|
||||
handlers[i].call( this, data );
|
||||
}
|
||||
}
|
||||
|
||||
generate ( result, options, { name, format } ) {
|
||||
if ( this.imports.length ) {
|
||||
const statements = [];
|
||||
|
||||
this.imports.forEach( ( declaration, i ) => {
|
||||
if ( format === 'es' ) {
|
||||
statements.push( this.source.slice( declaration.start, declaration.end ) );
|
||||
return;
|
||||
}
|
||||
|
||||
const defaultImport = declaration.specifiers.find( x => x.type === 'ImportDefaultSpecifier' || x.type === 'ImportSpecifier' && x.imported.name === 'default' );
|
||||
const namespaceImport = declaration.specifiers.find( x => x.type === 'ImportNamespaceSpecifier' );
|
||||
const namedImports = declaration.specifiers.filter( x => x.type === 'ImportSpecifier' && x.imported.name !== 'default' );
|
||||
|
||||
const name = ( defaultImport || namespaceImport ) ? ( defaultImport || namespaceImport ).local.name : `__import${i}`;
|
||||
declaration.name = name; // hacky but makes life a bit easier later
|
||||
|
||||
namedImports.forEach( specifier => {
|
||||
statements.push( `var ${specifier.local.name} = ${name}.${specifier.imported.name}` );
|
||||
});
|
||||
|
||||
if ( defaultImport ) {
|
||||
statements.push( `${name} = ( ${name} && ${name}.__esModule ) ? ${name}['default'] : ${name};` );
|
||||
}
|
||||
});
|
||||
|
||||
result = `${statements.join( '\n' )}\n\n${result}`;
|
||||
}
|
||||
|
||||
const pattern = /\[✂(\d+)-(\d+)$/;
|
||||
|
||||
const parts = result.split( '✂]' );
|
||||
const finalChunk = parts.pop();
|
||||
|
||||
const compiled = new Bundle({ separator: '' });
|
||||
|
||||
function addString ( str ) {
|
||||
compiled.addSource({
|
||||
content: new MagicString( str )
|
||||
});
|
||||
}
|
||||
|
||||
const intro = getIntro( format, options, this.imports );
|
||||
if ( intro ) addString( intro );
|
||||
|
||||
const { filename } = options;
|
||||
|
||||
parts.forEach( str => {
|
||||
const chunk = str.replace( pattern, '' );
|
||||
if ( chunk ) addString( chunk );
|
||||
|
||||
const match = pattern.exec( str );
|
||||
|
||||
const snippet = this.code.snip( +match[1], +match[2] );
|
||||
|
||||
compiled.addSource({
|
||||
filename,
|
||||
content: snippet
|
||||
});
|
||||
});
|
||||
|
||||
addString( finalChunk );
|
||||
addString( '\n\n' + getOutro( format, name, options, this.imports ) );
|
||||
|
||||
return {
|
||||
code: compiled.toString(),
|
||||
map: compiled.generateMap({ includeContent: true })
|
||||
};
|
||||
}
|
||||
|
||||
getUniqueNameMaker () {
|
||||
return counter( this.names );
|
||||
}
|
||||
|
||||
parseJs () {
|
||||
const { source } = this;
|
||||
const { js } = this.parsed;
|
||||
|
||||
const imports = this.imports;
|
||||
const computations = [];
|
||||
const templateProperties = {};
|
||||
|
||||
if ( js ) {
|
||||
this.addSourcemapLocations( js.content );
|
||||
|
||||
// imports need to be hoisted out of the IIFE
|
||||
for ( let i = 0; i < js.content.body.length; i += 1 ) {
|
||||
const node = js.content.body[i];
|
||||
if ( node.type === 'ImportDeclaration' ) {
|
||||
let a = node.start;
|
||||
let b = node.end;
|
||||
while ( /[ \t]/.test( source[ a - 1 ] ) ) a -= 1;
|
||||
while ( source[b] === '\n' ) b += 1;
|
||||
|
||||
//imports.push( source.slice( a, b ).replace( /^\s/, '' ) );
|
||||
imports.push( node );
|
||||
this.code.remove( a, b );
|
||||
}
|
||||
}
|
||||
|
||||
const defaultExport = js.content.body.find( node => node.type === 'ExportDefaultDeclaration' );
|
||||
|
||||
if ( defaultExport ) {
|
||||
const finalNode = js.content.body[ js.content.body.length - 1 ];
|
||||
if ( defaultExport === finalNode ) {
|
||||
// export is last property, we can just return it
|
||||
this.code.overwrite( defaultExport.start, defaultExport.declaration.start, `return ` );
|
||||
} else {
|
||||
// TODO ensure `template` isn't already declared
|
||||
this.code.overwrite( defaultExport.start, defaultExport.declaration.start, `var template = ` );
|
||||
|
||||
let i = defaultExport.start;
|
||||
while ( /\s/.test( source[ i - 1 ] ) ) i--;
|
||||
|
||||
const indentation = source.slice( i, defaultExport.start );
|
||||
this.code.appendLeft( finalNode.end, `\n\n${indentation}return template;` );
|
||||
}
|
||||
|
||||
defaultExport.declaration.properties.forEach( prop => {
|
||||
templateProperties[ prop.key.name ] = prop.value;
|
||||
});
|
||||
|
||||
this.code.prependRight( js.content.start, 'var template = (function () {' );
|
||||
} else {
|
||||
this.code.prependRight( js.content.start, '(function () {' );
|
||||
}
|
||||
|
||||
this.code.appendLeft( js.content.end, '}());' );
|
||||
|
||||
[ 'helpers', 'events', 'components' ].forEach( key => {
|
||||
if ( templateProperties[ key ] ) {
|
||||
templateProperties[ key ].properties.forEach( prop => {
|
||||
this[ key ][ prop.key.name ] = prop.value;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if ( templateProperties.computed ) {
|
||||
const dependencies = new Map();
|
||||
|
||||
templateProperties.computed.properties.forEach( prop => {
|
||||
const key = prop.key.name;
|
||||
const value = prop.value;
|
||||
|
||||
const deps = value.params.map( param => param.name );
|
||||
dependencies.set( key, deps );
|
||||
});
|
||||
|
||||
const visited = new Set();
|
||||
|
||||
function visit ( key ) {
|
||||
if ( !dependencies.has( key ) ) return; // not a computation
|
||||
|
||||
if ( visited.has( key ) ) return;
|
||||
visited.add( key );
|
||||
|
||||
const deps = dependencies.get( key );
|
||||
deps.forEach( visit );
|
||||
|
||||
computations.push({ key, deps });
|
||||
}
|
||||
|
||||
templateProperties.computed.properties.forEach( prop => visit( prop.key.name ) );
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
computations,
|
||||
templateProperties
|
||||
};
|
||||
}
|
||||
|
||||
on ( eventName, handler ) {
|
||||
const handlers = this._callbacks[ eventName ] || ( this._callbacks[ eventName ] = [] );
|
||||
handlers.push( handler );
|
||||
}
|
||||
|
||||
pop () {
|
||||
const tail = this.current;
|
||||
this.current = tail.parent;
|
||||
|
||||
return tail;
|
||||
}
|
||||
|
||||
push ( fragment ) {
|
||||
const newFragment = Object.assign( {}, this.current, fragment, {
|
||||
parent: this.current
|
||||
});
|
||||
|
||||
this.current = newFragment;
|
||||
}
|
||||
|
||||
visit ( node ) {
|
||||
const visitor = this.visitors[ node.type ];
|
||||
if ( !visitor ) throw new Error( `Not implemented: ${node.type}` );
|
||||
|
||||
if ( visitor.enter ) visitor.enter( this, node );
|
||||
|
||||
if ( visitor.type === 'Element' ) {
|
||||
this.elementDepth += 1;
|
||||
}
|
||||
|
||||
if ( node.children ) {
|
||||
node.children.forEach( child => {
|
||||
this.visit( child );
|
||||
});
|
||||
}
|
||||
|
||||
if ( visitor.type === 'Element' ) {
|
||||
this.elementDepth -= 1;
|
||||
}
|
||||
|
||||
if ( visitor.leave ) visitor.leave( this, node );
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
import CodeBuilder from '../../../utils/CodeBuilder.js';
|
||||
|
||||
export default function getBuilders () {
|
||||
return {
|
||||
init: new CodeBuilder(),
|
||||
mount: new CodeBuilder(),
|
||||
update: new CodeBuilder(),
|
||||
detach: new CodeBuilder(),
|
||||
detachRaw: new CodeBuilder(),
|
||||
teardown: new CodeBuilder()
|
||||
};
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import deindent from '../../utils/deindent.js';
|
||||
import deindent from '../../../utils/deindent.js';
|
||||
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
@ -1,6 +1,7 @@
|
||||
export default {
|
||||
enter ( generator ) {
|
||||
const anchor = generator.createAnchor( 'yield', 'yield' );
|
||||
const anchor = `yield_anchor`;
|
||||
generator.createAnchor( anchor, 'yield' );
|
||||
|
||||
generator.current.builders.mount.addLine(
|
||||
`component.yield && component.yield.mount( ${generator.current.target}, ${anchor} );`
|
||||
@ -1,5 +1,5 @@
|
||||
import createBinding from './binding/index.js';
|
||||
import deindent from '../../../utils/deindent.js';
|
||||
import deindent from '../../../../utils/deindent.js';
|
||||
|
||||
export default function addComponentAttributes ( generator, node, local ) {
|
||||
local.staticAttributes = [];
|
||||
@ -1,7 +1,7 @@
|
||||
import attributeLookup from './lookup.js';
|
||||
import createBinding from './binding/index.js';
|
||||
import deindent from '../../../utils/deindent.js';
|
||||
import flattenReference from '../../../utils/flattenReference.js';
|
||||
import deindent from '../../../../utils/deindent.js';
|
||||
import flattenReference from '../../../../utils/flattenReference.js';
|
||||
|
||||
export default function addElementAttributes ( generator, node, local ) {
|
||||
node.attributes.forEach( attribute => {
|
||||
@ -1,6 +1,6 @@
|
||||
import deindent from '../../../../utils/deindent.js';
|
||||
import isReference from '../../../../utils/isReference.js';
|
||||
import flattenReference from '../../../../utils/flattenReference.js';
|
||||
import deindent from '../../../../../utils/deindent.js';
|
||||
import isReference from '../../../../../utils/isReference.js';
|
||||
import flattenReference from '../../../../../utils/flattenReference.js';
|
||||
|
||||
export default function createBinding ( generator, node, attribute, current, local ) {
|
||||
const parts = attribute.value.split( '.' );
|
||||
@ -0,0 +1,129 @@
|
||||
import deindent from '../../utils/deindent.js';
|
||||
import CodeBuilder from '../../utils/CodeBuilder.js';
|
||||
import processCss from '../shared/css/process.js';
|
||||
import visitors from './visitors/index.js';
|
||||
import Generator from '../Generator.js';
|
||||
|
||||
class SsrGenerator extends Generator {
|
||||
constructor ( parsed, source, names, visitors ) {
|
||||
super( parsed, source, names, visitors );
|
||||
this.renderCode = '';
|
||||
}
|
||||
|
||||
append ( code ) {
|
||||
this.renderCode += code;
|
||||
}
|
||||
}
|
||||
|
||||
export default function ssr ( parsed, source, options, names ) {
|
||||
const format = options.format || 'cjs';
|
||||
const name = options.name || 'SvelteComponent';
|
||||
|
||||
const generator = new SsrGenerator( parsed, source, names, visitors );
|
||||
|
||||
const { computations, templateProperties } = generator.parseJs();
|
||||
|
||||
const builders = {
|
||||
main: new CodeBuilder(),
|
||||
render: new CodeBuilder(),
|
||||
renderCss: new CodeBuilder()
|
||||
};
|
||||
|
||||
// create main render() function
|
||||
generator.push({
|
||||
contexts: {},
|
||||
indexes: {}
|
||||
});
|
||||
|
||||
parsed.html.children.forEach( node => generator.visit( node ) );
|
||||
|
||||
builders.render.addLine(
|
||||
templateProperties.data ? `root = Object.assign( template.data(), root || {} );` : `root = root || {};`
|
||||
);
|
||||
|
||||
computations.forEach( ({ key, deps }) => {
|
||||
builders.render.addLine(
|
||||
`root.${key} = template.computed.${key}( ${deps.map( dep => `root.${dep}` ).join( ', ' )} );`
|
||||
);
|
||||
});
|
||||
|
||||
builders.render.addBlock(
|
||||
`return \`${generator.renderCode}\`;`
|
||||
);
|
||||
|
||||
// create renderCss() function
|
||||
builders.renderCss.addBlock(
|
||||
`var components = [];`
|
||||
);
|
||||
|
||||
if ( parsed.css ) {
|
||||
builders.renderCss.addBlock( deindent`
|
||||
components.push({
|
||||
filename: ${name}.filename,
|
||||
css: ${JSON.stringify( processCss( parsed ) )},
|
||||
map: null // TODO
|
||||
});
|
||||
` );
|
||||
}
|
||||
|
||||
if ( templateProperties.components ) {
|
||||
builders.renderCss.addBlock( deindent`
|
||||
var seen = {};
|
||||
|
||||
function addComponent ( component ) {
|
||||
var result = component.renderCss();
|
||||
result.components.forEach( x => {
|
||||
if ( seen[ x.filename ] ) return;
|
||||
seen[ x.filename ] = true;
|
||||
components.push( x );
|
||||
});
|
||||
}
|
||||
` );
|
||||
|
||||
templateProperties.components.properties.forEach( prop => {
|
||||
builders.renderCss.addLine( `addComponent( template.components.${prop.key.name} );` );
|
||||
});
|
||||
}
|
||||
|
||||
builders.renderCss.addBlock( deindent`
|
||||
return {
|
||||
css: components.map( x => x.css ).join( '\\n' ),
|
||||
map: null,
|
||||
components
|
||||
};
|
||||
` );
|
||||
|
||||
if ( parsed.js ) {
|
||||
builders.main.addBlock( `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` );
|
||||
}
|
||||
|
||||
builders.main.addBlock( deindent`
|
||||
var ${name} = {};
|
||||
|
||||
${name}.filename = ${JSON.stringify( options.filename )};
|
||||
|
||||
${name}.render = function ( root, options ) {
|
||||
${builders.render}
|
||||
};
|
||||
|
||||
${name}.renderCss = function () {
|
||||
${builders.renderCss}
|
||||
};
|
||||
|
||||
var escaped = {
|
||||
'"': '"',
|
||||
"'": '&39;',
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>'
|
||||
};
|
||||
|
||||
function __escape ( html ) {
|
||||
return String( html ).replace( /["'&<>]/g, match => escaped[ match ] );
|
||||
}
|
||||
` );
|
||||
|
||||
const result = builders.main.toString();
|
||||
|
||||
return generator.generate( result, options, { name, format } );
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
// do nothing
|
||||
};
|
||||
@ -0,0 +1,46 @@
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
function stringify ( chunk ) {
|
||||
if ( chunk.type === 'Text' ) return chunk.data;
|
||||
if ( chunk.type === 'MustacheTag' ) {
|
||||
const { snippet } = generator.contextualise( chunk.expression );
|
||||
return '${__escape( ' + snippet + ')}';
|
||||
}
|
||||
}
|
||||
|
||||
const props = node.attributes.map( attribute => {
|
||||
let value;
|
||||
|
||||
if ( attribute.value === true ) {
|
||||
value = `true`;
|
||||
} else if ( attribute.value.length === 0 ) {
|
||||
value = `''`;
|
||||
} else if ( attribute.value.length === 1 ) {
|
||||
const chunk = attribute.value[0];
|
||||
if ( chunk.type === 'Text' ) {
|
||||
value = isNaN( parseFloat( chunk.data ) ) ? JSON.stringify( chunk.data ) : chunk.data;
|
||||
} else {
|
||||
const { snippet } = generator.contextualise( chunk.expression );
|
||||
value = snippet;
|
||||
}
|
||||
} else {
|
||||
value = '`' + attribute.value.map( stringify ).join( '' ) + '`';
|
||||
}
|
||||
|
||||
return `${attribute.name}: ${value}`;
|
||||
}).join( ', ' );
|
||||
|
||||
let open = `\${template.components.${node.name}.render({${props}}`;
|
||||
|
||||
if ( node.children.length ) {
|
||||
open += `, { yield: () => \``;
|
||||
}
|
||||
|
||||
generator.append( open );
|
||||
},
|
||||
|
||||
leave ( generator, node ) {
|
||||
const close = node.children.length ? `\` })}` : ')}';
|
||||
generator.append( close );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,32 @@
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
const { dependencies, snippet } = generator.contextualise( node.expression );
|
||||
|
||||
const open = `\${ ${snippet}.map( ${ node.index ? `( ${node.context}, ${node.index} )` : node.context} => \``;
|
||||
generator.append( open );
|
||||
|
||||
// TODO should this be the generator's job? It's duplicated between
|
||||
// here and the equivalent DOM compiler visitor
|
||||
const contexts = Object.assign( {}, generator.current.contexts );
|
||||
contexts[ node.context ] = true;
|
||||
|
||||
const indexes = Object.assign( {}, generator.current.indexes );
|
||||
if ( node.index ) indexes[ node.index ] = node.context;
|
||||
|
||||
const contextDependencies = Object.assign( {}, generator.current.contextDependencies );
|
||||
contextDependencies[ node.context ] = dependencies;
|
||||
|
||||
generator.push({
|
||||
contexts,
|
||||
indexes,
|
||||
contextDependencies
|
||||
});
|
||||
},
|
||||
|
||||
leave ( generator ) {
|
||||
const close = `\` ).join( '' )}`;
|
||||
generator.append( close );
|
||||
|
||||
generator.pop();
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,51 @@
|
||||
import Component from './Component.js';
|
||||
import voidElementNames from '../../../utils/voidElementNames.js';
|
||||
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
if ( node.name in generator.components ) {
|
||||
Component.enter( generator, node );
|
||||
return;
|
||||
}
|
||||
|
||||
let openingTag = `<${node.name}`;
|
||||
|
||||
node.attributes.forEach( attribute => {
|
||||
if ( attribute.type !== 'Attribute' ) return;
|
||||
|
||||
let str = ` ${attribute.name}`;
|
||||
|
||||
if ( attribute.value !== true ) {
|
||||
str += `="` + attribute.value.map( chunk => {
|
||||
if ( chunk.type === 'Text' ) {
|
||||
return chunk.data;
|
||||
}
|
||||
|
||||
const { snippet } = generator.contextualise( chunk.expression );
|
||||
return '${' + snippet + '}';
|
||||
}).join( '' ) + `"`;
|
||||
}
|
||||
|
||||
openingTag += str;
|
||||
});
|
||||
|
||||
if ( generator.cssId && !generator.elementDepth ) {
|
||||
openingTag += ` ${generator.cssId}`;
|
||||
}
|
||||
|
||||
openingTag += '>';
|
||||
|
||||
generator.append( openingTag );
|
||||
},
|
||||
|
||||
leave ( generator, node ) {
|
||||
if ( node.name in generator.components ) {
|
||||
Component.leave( generator, node );
|
||||
return;
|
||||
}
|
||||
|
||||
if ( !voidElementNames.test( node.name ) ) {
|
||||
generator.append( `</${node.name}>` );
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
const { snippet } = generator.contextualise( node.expression );
|
||||
generator.append( '${ ' + snippet + ' ? `' );
|
||||
},
|
||||
|
||||
leave ( generator, node ) {
|
||||
generator.append( '` : `' );
|
||||
if ( node.else ) node.else.children.forEach( child => generator.visit( child ) );
|
||||
generator.append( '` }' );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
const { snippet } = generator.contextualise( node.expression );
|
||||
generator.append( '${__escape( ' + snippet + ' )}' );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
const { snippet } = generator.contextualise( node.expression );
|
||||
generator.append( '${' + snippet + '}' );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
enter ( generator, node ) {
|
||||
generator.append( node.data.replace( /\${/g, '\\${' ) );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
enter ( generator ) {
|
||||
generator.append( `\${options.yield()}` );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,19 @@
|
||||
import Comment from './Comment.js';
|
||||
import EachBlock from './EachBlock.js';
|
||||
import Element from './Element.js';
|
||||
import IfBlock from './IfBlock.js';
|
||||
import MustacheTag from './MustacheTag.js';
|
||||
import RawMustacheTag from './RawMustacheTag.js';
|
||||
import Text from './Text.js';
|
||||
import YieldTag from './YieldTag.js';
|
||||
|
||||
export default {
|
||||
Comment,
|
||||
EachBlock,
|
||||
Element,
|
||||
IfBlock,
|
||||
MustacheTag,
|
||||
RawMustacheTag,
|
||||
Text,
|
||||
YieldTag
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
import deindent from '../../utils/deindent.js';
|
||||
import deindent from '../../../utils/deindent.js';
|
||||
import getGlobals from './getGlobals.js';
|
||||
|
||||
export default function getIntro ( format, options, imports ) {
|
||||
@ -1,435 +0,0 @@
|
||||
import { walk } from 'estree-walker';
|
||||
import deindent from '../utils/deindent.js';
|
||||
import isReference from '../utils/isReference.js';
|
||||
import flattenReference from '../utils/flattenReference.js';
|
||||
import MagicString, { Bundle } from 'magic-string';
|
||||
import processCss from '../generate/css/process.js';
|
||||
|
||||
const voidElementNames = /^(?:area|base|br|col|command|doctype|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/i;
|
||||
|
||||
export default function compile ( parsed, source, { filename }) {
|
||||
const code = new MagicString( source );
|
||||
|
||||
const templateProperties = {};
|
||||
const components = {};
|
||||
const helpers = {};
|
||||
|
||||
const imports = [];
|
||||
|
||||
if ( parsed.js ) {
|
||||
walk( parsed.js.content, {
|
||||
enter ( node ) {
|
||||
code.addSourcemapLocation( node.start );
|
||||
code.addSourcemapLocation( node.end );
|
||||
}
|
||||
});
|
||||
|
||||
// imports need to be hoisted out of the IIFE
|
||||
for ( let i = 0; i < parsed.js.content.body.length; i += 1 ) {
|
||||
const node = parsed.js.content.body[i];
|
||||
if ( node.type === 'ImportDeclaration' ) {
|
||||
let a = node.start;
|
||||
let b = node.end;
|
||||
while ( /[ \t]/.test( source[ a - 1 ] ) ) a -= 1;
|
||||
while ( source[b] === '\n' ) b += 1;
|
||||
|
||||
//imports.push( source.slice( a, b ).replace( /^\s/, '' ) );
|
||||
imports.push( node );
|
||||
code.remove( a, b );
|
||||
}
|
||||
}
|
||||
|
||||
const defaultExport = parsed.js.content.body.find( node => node.type === 'ExportDefaultDeclaration' );
|
||||
|
||||
if ( defaultExport ) {
|
||||
const finalNode = parsed.js.content.body[ parsed.js.content.body.length - 1 ];
|
||||
if ( defaultExport === finalNode ) {
|
||||
// export is last property, we can just return it
|
||||
code.overwrite( defaultExport.start, defaultExport.declaration.start, `return ` );
|
||||
} else {
|
||||
// TODO ensure `template` isn't already declared
|
||||
code.overwrite( defaultExport.start, defaultExport.declaration.start, `var template = ` );
|
||||
|
||||
let i = defaultExport.start;
|
||||
while ( /\s/.test( source[ i - 1 ] ) ) i--;
|
||||
|
||||
const indentation = source.slice( i, defaultExport.start );
|
||||
code.appendLeft( finalNode.end, `\n\n${indentation}return template;` );
|
||||
}
|
||||
|
||||
defaultExport.declaration.properties.forEach( prop => {
|
||||
templateProperties[ prop.key.name ] = prop.value;
|
||||
});
|
||||
|
||||
code.prependRight( parsed.js.content.start, 'var template = (function () {' );
|
||||
} else {
|
||||
code.prependRight( parsed.js.content.start, '(function () {' );
|
||||
}
|
||||
|
||||
code.appendLeft( parsed.js.content.end, '}());' );
|
||||
|
||||
if ( templateProperties.helpers ) {
|
||||
templateProperties.helpers.properties.forEach( prop => {
|
||||
helpers[ prop.key.name ] = prop.value;
|
||||
});
|
||||
}
|
||||
|
||||
if ( templateProperties.components ) {
|
||||
templateProperties.components.properties.forEach( prop => {
|
||||
components[ prop.key.name ] = prop.value;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
let scope = new Set();
|
||||
const scopes = [ scope ];
|
||||
|
||||
function contextualise ( expression ) {
|
||||
walk( expression, {
|
||||
enter ( node, parent ) {
|
||||
if ( isReference( node, parent ) ) {
|
||||
const { name } = flattenReference( node );
|
||||
|
||||
if ( parent && parent.type === 'CallExpression' && node === parent.callee && helpers[ name ] ) {
|
||||
code.prependRight( node.start, `template.helpers.` );
|
||||
return;
|
||||
}
|
||||
|
||||
if ( !scope.has( name ) ) {
|
||||
code.prependRight( node.start, `data.` );
|
||||
}
|
||||
|
||||
this.skip();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
snippet: `[✂${expression.start}-${expression.end}✂]`,
|
||||
string: code.slice( expression.start, expression.end )
|
||||
};
|
||||
}
|
||||
|
||||
let elementDepth = 0;
|
||||
|
||||
const stringifiers = {
|
||||
Comment () {
|
||||
return '';
|
||||
},
|
||||
|
||||
Component ( node ) {
|
||||
const props = node.attributes.map( attribute => {
|
||||
let value;
|
||||
|
||||
if ( attribute.value === true ) {
|
||||
value = `true`;
|
||||
} else if ( attribute.value.length === 0 ) {
|
||||
value = `''`;
|
||||
} else if ( attribute.value.length === 1 ) {
|
||||
const chunk = attribute.value[0];
|
||||
if ( chunk.type === 'Text' ) {
|
||||
value = isNaN( parseFloat( chunk.data ) ) ? JSON.stringify( chunk.data ) : chunk.data;
|
||||
} else {
|
||||
const { snippet } = contextualise( chunk.expression );
|
||||
value = snippet;
|
||||
}
|
||||
} else {
|
||||
value = '`' + attribute.value.map( stringify ).join( '' ) + '`';
|
||||
}
|
||||
|
||||
return `${attribute.name}: ${value}`;
|
||||
}).join( ', ' );
|
||||
|
||||
let params = `{${props}}`;
|
||||
|
||||
if ( node.children.length ) {
|
||||
params += `, { yield: () => \`${node.children.map( stringify ).join( '' )}\` }`;
|
||||
}
|
||||
|
||||
return `\${template.components.${node.name}.render(${params})}`;
|
||||
},
|
||||
|
||||
EachBlock ( node ) {
|
||||
const { snippet } = contextualise( node.expression );
|
||||
|
||||
scope = new Set();
|
||||
scope.add( node.context );
|
||||
if ( node.index ) scope.add( node.index );
|
||||
|
||||
scopes.push( scope );
|
||||
|
||||
const block = `\${ ${snippet}.map( ${ node.index ? `( ${node.context}, ${node.index} )` : node.context} => \`${ node.children.map( stringify ).join( '' )}\` ).join( '' )}`;
|
||||
|
||||
scopes.pop();
|
||||
scope = scopes[ scopes.length - 1 ];
|
||||
|
||||
return block;
|
||||
},
|
||||
|
||||
Element ( node ) {
|
||||
if ( node.name in components ) {
|
||||
return stringifiers.Component( node );
|
||||
}
|
||||
|
||||
let element = `<${node.name}`;
|
||||
|
||||
node.attributes.forEach( attribute => {
|
||||
if ( attribute.type !== 'Attribute' ) return;
|
||||
|
||||
let str = ` ${attribute.name}`;
|
||||
|
||||
if ( attribute.value !== true ) {
|
||||
str += `="` + attribute.value.map( chunk => {
|
||||
if ( chunk.type === 'Text' ) {
|
||||
return chunk.data;
|
||||
}
|
||||
|
||||
const { snippet } = contextualise( chunk.expression );
|
||||
return '${' + snippet + '}';
|
||||
}).join( '' ) + `"`;
|
||||
}
|
||||
|
||||
element += str;
|
||||
});
|
||||
|
||||
if ( parsed.css && elementDepth === 0 ) {
|
||||
element += ` svelte-${parsed.hash}`;
|
||||
}
|
||||
|
||||
if ( voidElementNames.test( node.name ) ) {
|
||||
element += '>';
|
||||
} else {
|
||||
elementDepth += 1;
|
||||
element += '>' + node.children.map( stringify ).join( '' ) + `</${node.name}>`;
|
||||
elementDepth -= 1;
|
||||
}
|
||||
|
||||
return element;
|
||||
},
|
||||
|
||||
IfBlock ( node ) {
|
||||
const { snippet } = contextualise( node.expression ); // TODO use snippet, for sourcemap support
|
||||
|
||||
const consequent = node.children.map( stringify ).join( '' );
|
||||
const alternate = node.else ? node.else.children.map( stringify ).join( '' ) : '';
|
||||
|
||||
return '${ ' + snippet + ' ? `' + consequent + '` : `' + alternate + '` }';
|
||||
},
|
||||
|
||||
MustacheTag ( node ) {
|
||||
const { snippet } = contextualise( node.expression ); // TODO use snippet, for sourcemap support
|
||||
return '${__escape( String( ' + snippet + ') )}';
|
||||
},
|
||||
|
||||
RawMustacheTag ( node ) {
|
||||
const { snippet } = contextualise( node.expression ); // TODO use snippet, for sourcemap support
|
||||
return '${' + snippet + '}';
|
||||
},
|
||||
|
||||
Text ( node ) {
|
||||
return node.data.replace( /\${/g, '\\${' );
|
||||
},
|
||||
|
||||
YieldTag () {
|
||||
return `\${options.yield()}`;
|
||||
}
|
||||
};
|
||||
|
||||
function stringify ( node ) {
|
||||
const stringifier = stringifiers[ node.type ];
|
||||
|
||||
if ( !stringifier ) {
|
||||
throw new Error( `Not implemented: ${node.type}` );
|
||||
}
|
||||
|
||||
return stringifier( node );
|
||||
}
|
||||
|
||||
function createBlock ( node ) {
|
||||
const str = stringify( node );
|
||||
if ( str.slice( 0, 2 ) === '${' ) return str.slice( 2, -1 );
|
||||
return '`' + str + '`';
|
||||
}
|
||||
|
||||
const blocks = parsed.html.children.map( node => {
|
||||
return deindent`
|
||||
rendered += ${createBlock( node )};
|
||||
`;
|
||||
});
|
||||
|
||||
const topLevelStatements = [];
|
||||
|
||||
const importBlock = imports
|
||||
.map( ( declaration, i ) => {
|
||||
const defaultImport = declaration.specifiers.find( x => x.type === 'ImportDefaultSpecifier' || x.type === 'ImportSpecifier' && x.imported.name === 'default' );
|
||||
const namespaceImport = declaration.specifiers.find( x => x.type === 'ImportNamespaceSpecifier' );
|
||||
const namedImports = declaration.specifiers.filter( x => x.type === 'ImportSpecifier' && x.imported.name !== 'default' );
|
||||
|
||||
const name = ( defaultImport || namespaceImport ) ? ( defaultImport || namespaceImport ).local.name : `__import${i}`;
|
||||
|
||||
const statements = [
|
||||
`var ${name} = require( '${declaration.source.value}' );`
|
||||
];
|
||||
|
||||
namedImports.forEach( specifier => {
|
||||
statements.push( `var ${specifier.local.name} = ${name}.${specifier.imported.name};` );
|
||||
});
|
||||
|
||||
if ( defaultImport ) {
|
||||
statements.push( `${name} = ( ${name} && ${name}.__esModule ) ? ${name}['default'] : ${name};` );
|
||||
}
|
||||
|
||||
return statements.join( '\n' );
|
||||
})
|
||||
.filter( Boolean )
|
||||
.join( '\n' );
|
||||
|
||||
if ( parsed.js ) {
|
||||
if ( imports.length ) {
|
||||
topLevelStatements.push( importBlock );
|
||||
}
|
||||
|
||||
topLevelStatements.push( `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` );
|
||||
}
|
||||
|
||||
const renderStatements = [
|
||||
templateProperties.data ? `data = Object.assign( template.data(), data || {} );` : `data = data || {};`
|
||||
];
|
||||
|
||||
if ( templateProperties.computed ) {
|
||||
const statements = [];
|
||||
const dependencies = new Map();
|
||||
|
||||
templateProperties.computed.properties.forEach( prop => {
|
||||
const key = prop.key.name;
|
||||
const value = prop.value;
|
||||
|
||||
const deps = value.params.map( param => param.name );
|
||||
dependencies.set( key, deps );
|
||||
});
|
||||
|
||||
const visited = new Set();
|
||||
|
||||
function visit ( key ) {
|
||||
if ( !dependencies.has( key ) ) return; // not a computation
|
||||
|
||||
if ( visited.has( key ) ) return;
|
||||
visited.add( key );
|
||||
|
||||
const deps = dependencies.get( key );
|
||||
deps.forEach( visit );
|
||||
|
||||
statements.push( deindent`
|
||||
data.${key} = template.computed.${key}( ${deps.map( dep => `data.${dep}` ).join( ', ' )} );
|
||||
` );
|
||||
}
|
||||
|
||||
templateProperties.computed.properties.forEach( prop => visit( prop.key.name ) );
|
||||
|
||||
renderStatements.push( statements.join( '\n' ) );
|
||||
}
|
||||
|
||||
renderStatements.push(
|
||||
`var rendered = '';`,
|
||||
blocks.join( '\n\n' ),
|
||||
`return rendered;`
|
||||
);
|
||||
|
||||
const renderCssStatements = [
|
||||
`var components = [];`
|
||||
];
|
||||
|
||||
if ( parsed.css ) {
|
||||
renderCssStatements.push( deindent`
|
||||
components.push({
|
||||
filename: exports.filename,
|
||||
css: ${JSON.stringify( processCss( parsed ) )},
|
||||
map: null // TODO
|
||||
});
|
||||
` );
|
||||
}
|
||||
|
||||
if ( templateProperties.components ) {
|
||||
renderCssStatements.push( deindent`
|
||||
var seen = {};
|
||||
|
||||
function addComponent ( component ) {
|
||||
var result = component.renderCss();
|
||||
result.components.forEach( x => {
|
||||
if ( seen[ x.filename ] ) return;
|
||||
seen[ x.filename ] = true;
|
||||
components.push( x );
|
||||
});
|
||||
}
|
||||
` );
|
||||
|
||||
renderCssStatements.push( templateProperties.components.properties.map( prop => `addComponent( template.components.${prop.key.name} );` ).join( '\n' ) );
|
||||
}
|
||||
|
||||
renderCssStatements.push( deindent`
|
||||
return {
|
||||
css: components.map( x => x.css ).join( '\\n' ),
|
||||
map: null,
|
||||
components
|
||||
};
|
||||
` );
|
||||
|
||||
topLevelStatements.push( deindent`
|
||||
exports.filename = ${JSON.stringify( filename )};
|
||||
|
||||
exports.render = function ( data, options ) {
|
||||
${renderStatements.join( '\n\n' )}
|
||||
};
|
||||
|
||||
exports.renderCss = function () {
|
||||
${renderCssStatements.join( '\n\n' )}
|
||||
};
|
||||
|
||||
var escaped = {
|
||||
'"': '"',
|
||||
"'": '&39;',
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>'
|
||||
};
|
||||
|
||||
function __escape ( html ) {
|
||||
return html.replace( /["'&<>]/g, match => escaped[ match ] );
|
||||
}
|
||||
` );
|
||||
|
||||
const rendered = topLevelStatements.join( '\n\n' );
|
||||
|
||||
const pattern = /\[✂(\d+)-(\d+)$/;
|
||||
|
||||
const parts = rendered.split( '✂]' );
|
||||
const finalChunk = parts.pop();
|
||||
|
||||
const compiled = new Bundle({ separator: '' });
|
||||
|
||||
function addString ( str ) {
|
||||
compiled.addSource({
|
||||
content: new MagicString( str )
|
||||
});
|
||||
}
|
||||
|
||||
parts.forEach( str => {
|
||||
const chunk = str.replace( pattern, '' );
|
||||
if ( chunk ) addString( chunk );
|
||||
|
||||
const match = pattern.exec( str );
|
||||
|
||||
const snippet = code.snip( +match[1], +match[2] );
|
||||
|
||||
compiled.addSource({
|
||||
filename,
|
||||
content: snippet
|
||||
});
|
||||
});
|
||||
|
||||
addString( finalChunk );
|
||||
|
||||
return {
|
||||
code: compiled.toString()
|
||||
};
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
export default /^(?:area|base|br|col|command|doctype|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/;
|
||||
@ -1,3 +1,3 @@
|
||||
<p>before</p>
|
||||
|
||||
<p>after</p>
|
||||
|
||||
<p>after</p>
|
||||
@ -1,4 +1,4 @@
|
||||
<div><p>foo: lol</p>
|
||||
<p>baz: 42 (number)</p>
|
||||
<p>qux: this is a piece of string</p>
|
||||
<p>quux: core</p></div>
|
||||
<p>baz: 42 (number)</p>
|
||||
<p>qux: this is a piece of string</p>
|
||||
<p>quux: core</p></div>
|
||||
@ -1,2 +1,2 @@
|
||||
<div><p>foo: bar</p>
|
||||
<p>baz: 42 (number)</p></div>
|
||||
<p>baz: 42 (number)</p></div>
|
||||
@ -1,2 +1,2 @@
|
||||
<p>1 + 2 = 3</p>
|
||||
<p>3 * 3 = 9</p>
|
||||
<p>3 * 3 = 9</p>
|
||||
@ -1,2 +1,2 @@
|
||||
<a></a>
|
||||
<p></p>
|
||||
<p></p>
|
||||
@ -1,2 +1,2 @@
|
||||
<div>i got 99 problems</div>
|
||||
<div>the answer is 42</div>
|
||||
<div>the answer is 42</div>
|
||||
@ -1,5 +1,5 @@
|
||||
<div svelte-4188175681>red</div>
|
||||
<div svelte-146600313>green: foo</div>
|
||||
<div svelte-1506185237>blue: foo</div>
|
||||
<div svelte-146600313>green: bar</div>
|
||||
<div svelte-1506185237>blue: bar</div>
|
||||
<div svelte-146600313>green: foo</div>
|
||||
<div svelte-1506185237>blue: foo</div>
|
||||
<div svelte-146600313>green: bar</div>
|
||||
<div svelte-1506185237>blue: bar</div>
|
||||
Loading…
Reference in new issue