|
|
@ -30,7 +30,7 @@ function createRenderer ( fragment ) {
|
|
|
|
`;
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default function generate ( parsed, template ) {
|
|
|
|
export default function generate ( parsed, template, options = {} ) {
|
|
|
|
const code = new MagicString( template );
|
|
|
|
const code = new MagicString( template );
|
|
|
|
|
|
|
|
|
|
|
|
function addSourcemapLocations ( node ) {
|
|
|
|
function addSourcemapLocations ( node ) {
|
|
|
@ -609,13 +609,15 @@ export default function generate ( parsed, template ) {
|
|
|
|
dispatchObservers( observers.deferred, newState, oldState );
|
|
|
|
dispatchObservers( observers.deferred, newState, oldState );
|
|
|
|
` );
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const constructorName = options.name || 'SvelteComponent';
|
|
|
|
|
|
|
|
|
|
|
|
const result = deindent`
|
|
|
|
const result = deindent`
|
|
|
|
${parsed.js ? `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` : ``}
|
|
|
|
${parsed.js ? `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` : ``}
|
|
|
|
|
|
|
|
|
|
|
|
${renderers.reverse().join( '\n\n' )}
|
|
|
|
${renderers.reverse().join( '\n\n' )}
|
|
|
|
|
|
|
|
|
|
|
|
export default function createComponent ( options ) {
|
|
|
|
export default function ${constructorName} ( options ) {
|
|
|
|
var component = ${templateProperties.methods ? `Object.create( template.methods )` : `{}`};${usesRefs ? `\ncomponent.refs = {}` : ``}
|
|
|
|
var component = this;${usesRefs ? `\nthis.refs = {}` : ``}
|
|
|
|
var state = {};
|
|
|
|
var state = {};
|
|
|
|
|
|
|
|
|
|
|
|
var observers = {
|
|
|
|
var observers = {
|
|
|
@ -641,15 +643,15 @@ export default function generate ( parsed, template ) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
component.get = function get ( key ) {
|
|
|
|
this.get = function get ( key ) {
|
|
|
|
return state[ key ];
|
|
|
|
return state[ key ];
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
component.set = function set ( newState ) {
|
|
|
|
this.set = function set ( newState ) {
|
|
|
|
${setStatements.join( '\n\n' )}
|
|
|
|
${setStatements.join( '\n\n' )}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
component.observe = function ( key, callback, options = {} ) {
|
|
|
|
this.observe = function ( key, callback, options = {} ) {
|
|
|
|
const group = options.defer ? observers.deferred : observers.immediate;
|
|
|
|
const group = options.defer ? observers.deferred : observers.immediate;
|
|
|
|
|
|
|
|
|
|
|
|
( group[ key ] || ( group[ key ] = [] ) ).push( callback );
|
|
|
|
( group[ key ] || ( group[ key ] = [] ) ).push( callback );
|
|
|
@ -663,22 +665,22 @@ export default function generate ( parsed, template ) {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
component.teardown = function teardown () {
|
|
|
|
this.teardown = function teardown () {
|
|
|
|
mainFragment.teardown();
|
|
|
|
mainFragment.teardown();
|
|
|
|
mainFragment = null;
|
|
|
|
mainFragment = null;
|
|
|
|
|
|
|
|
|
|
|
|
state = {};
|
|
|
|
state = {};
|
|
|
|
|
|
|
|
|
|
|
|
${templateProperties.onteardown ? `template.onteardown.call( component );` : ``}
|
|
|
|
${templateProperties.onteardown ? `template.onteardown.call( this );` : ``}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
let mainFragment = renderMainFragment( component, options.target );
|
|
|
|
let mainFragment = renderMainFragment( this, options.target );
|
|
|
|
component.set( ${templateProperties.data ? `Object.assign( template.data(), options.data )` : `options.data`} );
|
|
|
|
this.set( ${templateProperties.data ? `Object.assign( template.data(), options.data )` : `options.data`} );
|
|
|
|
|
|
|
|
|
|
|
|
${templateProperties.onrender ? `template.onrender.call( component );` : ``}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return component;
|
|
|
|
${templateProperties.onrender ? `template.onrender.call( this );` : ``}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
${templateProperties.methods ? `${constructorName}.prototype = template.methods` : ''}
|
|
|
|
`;
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
const pattern = /\[✂(\d+)-(\d+)$/;
|
|
|
|
const pattern = /\[✂(\d+)-(\d+)$/;
|
|
|
|