Svelteのコンパイルに関してつらつら

Component {
  ignore_stack: [],
  vars: [
    {
      name: 'text',
      initialised: true,
      writable: true,
      imported: false,
      referenced: true,
      hoistable: true
    }
  ],
  var_lookup: Map(1) {
    'text' => {
      name: 'text',
      initialised: true,
      writable: true,
      imported: false,
      referenced: true,
      hoistable: true
    }
  },
  imports: [],
  exports_from: [],
  instance_exports_from: [],
  hoistable_nodes: Set(1) {
    Node {
      type: 'VariableDeclaration',
      start: 12,
      end: 30,
      loc: [SourceLocation],
      declarations: [Array],
      kind: 'let'
    }
  },
  node_for_declaration: Map(1) {
    'text' => Node {
      type: 'VariableDeclaration',
      start: 12,
      end: 30,
      loc: [SourceLocation],
      declarations: [Array],
      kind: 'let'
    }
  },
  partly_hoisted: [],
  fully_hoisted: [
    Node {
      type: 'VariableDeclaration',
      start: 12,
      end: 30,
      loc: [SourceLocation],
      declarations: [Array],
      kind: 'let'
    }
  ],
  reactive_declarations: [],
  reactive_declaration_nodes: Set(0) {},
  has_reactive_assignments: false,
  injected_reactive_declaration_vars: Set(0) {},
  helpers: Map(0) {},
  globals: Map(0) {},
  indirect_dependencies: Map(0) {},
  elements: [
    Element {
      start: 42,
      end: 80,
      type: 'Element',
      attributes: [Array],
      actions: [],
      bindings: [],
      classes: [],
      styles: [],
      handlers: [],
      lets: [],
      intro: null,
      outro: null,
      animation: null,
      name: 'h1',
      namespace: null,
      scope: [TemplateScope],
      children: [Array],
      prev: [Text],
      next: [Text]
    }
  ],
  aliases: Map(0) {},
  used_names: Set(1) { 'Component' },
  globally_used_names: Set(0) {},
  slots: Map(0) {},
  slot_outlets: Set(0) {},
  name: { type: 'Identifier', name: 'Component' },
  stats: Stats {
    start_time: 331363032.89668,
    stack: [],
    timings: [ [Object], [Object] ],
    current_children: [ [Object], [Object] ],
    current_timing: undefined
  },
  warnings: [],
  ast: {
    html: { start: 1, end: 80, type: 'Fragment', children: [Array] },
    css: {
      type: 'Style',
      start: 82,
      end: 132,
      attributes: [],
      children: [Array],
      content: [Object]
    },
    instance: {
      type: 'Script',
      start: 1,
      end: 40,
      context: 'default',
      content: [Node]
    },
    module: undefined
  },
  source: '\n' +
    '<script>\n' +
    '  let text = "word";\n' +
    '</script>\n' +
    '\n' +
    '<h1 class="greeting">Hello {text}</h1>\n' +
    '\n' +
    '<style>\n' +
    '  .greeting {\n' +
    '    color: red;\n' +
    '  }\n' +
    '</style>\n',
  compile_options: { generate: 'dom', dev: false, enableSourcemap: true },
  original_ast: {
    html: { start: 1, end: 80, type: 'Fragment', children: [Array] },
    css: {
      type: 'Style',
      start: 82,
      end: 132,
      attributes: [],
      children: [Array],
      content: [Object]
    },
    instance: {
      type: 'Script',
      start: 1,
      end: 40,
      context: 'default',
      content: [Object]
    },
    module: undefined
  },
  file: undefined,
  locate: [Function: locate],
  stylesheet: Stylesheet {
    children: [ [Rule] ],
    keyframes: Map(0) {},
    nodes_with_css_class: Set(1) { [Element] },
    source: '\n' +
      '<script>\n' +
      '  let text = "word";\n' +
      '</script>\n' +
      '\n' +
      '<h1 class="greeting">Hello {text}</h1>\n' +
      '\n' +
      '<style>\n' +
      '  .greeting {\n' +
      '    color: red;\n' +
      '  }\n' +
      '</style>\n',
    ast: {
      html: [Object],
      css: [Object],
      instance: [Object],
      module: undefined
    },
    filename: undefined,
    dev: false,
    id: 'svelte-9led3h',
    has_styles: true
  },
  component_options: {
    immutable: false,
    accessors: false,
    preserveWhitespace: false,
    namespace: undefined
  },
  namespace: undefined,
  tag: 'Component',
  ignores: undefined,
  instance_scope: Scope {
    parent: null,
    block: false,
    declarations: Map(1) { 'text' => [Node] },
    initialised_declarations: Set(1) { 'text' },
    references: Set(1) { 'text' }
  },
  instance_scope_map: WeakMap { <items unknown> },
  fragment: Fragment {
    start: 1,
    end: 80,
    type: 'Fragment',
    scope: TemplateScope {
      owners: Map(0) {},
      parent: undefined,
      names: Set(0) {},
      dependencies_for_name: Map(0) {}
    },
    children: [ [Text], [Text], [Element], [Text] ]
  }
}

<ref *1> MustacheTag {
  start: 119,
  end: 125,
  type: 'MustacheTag',
  expression: Expression {
    type: 'Expression',
    references: Set(1) { 'text' },
    dependencies: Set(1) { 'text' },
    contextual_dependencies: Set(0) {},
    declarations: [],
    uses_context: false,
    node: Node {
      type: 'Identifier',
      start: 120,
      end: 124,
      loc: [SourceLocation],
      name: 'text'
    },
    template_scope: TemplateScope {
      owners: Map(0) {},
      parent: undefined,
      names: Set(0) {},
      dependencies_for_name: Map(0) {}
    },
    owner: [Circular *1],
    scope: Scope {
      parent: null,
      block: false,
      declarations: Map(0) {},
      initialised_declarations: Set(0) {},
      references: [Set]
    },
    scope_map: WeakMap { <items unknown> }
  },

export default function createComponent ( options ) {
	var component = {};
	var state = {};

	var observers = {
		immediate: Object.create( null ),
		deferred: Object.create( null )
	};

	// universal methods
	function dispatchObservers ( group, state, oldState ) {
		for ( const key in group ) {
			const newValue = state[ key ];
			const oldValue = oldState[ key ];

			if ( newValue === oldValue && typeof newValue !== 'object' ) continue;

			const callbacks = group[ key ];
			if ( !callbacks ) continue;

			for ( let i = 0; i < callbacks.length; i += 1 ) {
				callbacks[i].call( component, newValue, oldValue );
			}
		}
	}

	component.get = function get ( key ) {
		return state[ key ];
	};

	component.set = function set ( newState ) {
		const oldState = state;
		state = Object.assign( {}, oldState, newState );

		if ( state.name !== oldState.name ) {
			text_0.data = state.name;
		}
	};

	component.observe = function ( key, callback, options = {} ) {
		const group = options.defer ? observers.deferred : observers.immediate;

		( group[ key ] || ( group[ key ] = [] ) ).push( callback );
		if ( options.init !== false ) callback( state[ key ] );

		return {
			cancel () {
				const index = group[ key ].indexOf( callback );
				if ( ~index ) group[ key ].splice( index, 1 );
			}
		};
	};

	component.teardown = function teardown () {
		element_0.parentNode.removeChild( element_0 );
		state = {};
	};

	var element_0 = document.createElement( 'h1' );
	options.target.appendChild( element_0 );
	
	element_0.appendChild( document.createTextNode( "hello " ) );
	
	var text_0 = document.createTextNode( '' );
	element_0.appendChild( text_0 );
	
	element_0.appendChild( document.createTextNode( "!" ) );

	component.set( options.data );

	return component;
}

function renderMainFragment ( component, target ) {
	var h1 = document.createElement( 'h1' );
	
	h1.appendChild( document.createTextNode( "hello " ) );
	
	var text = document.createTextNode( '' );
	var text_value = '';
	h1.appendChild( text );
	
	h1.appendChild( document.createTextNode( "!" ) );
	
	target.appendChild( h1 );
	
	target.appendChild( document.createTextNode( "\n" ) );
	
	var h11 = document.createElement( 'h1' );
	
	h11.appendChild( document.createTextNode( "This is written by " ) );
	
	var text1 = document.createTextNode( '' );
	var text1_value = '';
	h11.appendChild( text1 );
	
	h11.appendChild( document.createTextNode( "!" ) );
	
	target.appendChild( h11 );

	return {
		update: function ( root ) {
			if ( root.name !== text_value ) {
				text_value = root.name;
				text.data = text_value;
			}
			
			if ( root.author !== text1_value ) {
				text1_value = root.author;
				text1.data = text1_value;
			}
		},

		teardown: function () {
			h1.parentNode.removeChild( h1 );
			
			h11.parentNode.removeChild( h11 );
		}
	};
}

export default function createComponent ( options ) {
	var component = {};
	var state = {};

	var observers = {
		immediate: Object.create( null ),
		deferred: Object.create( null )
	};

	function dispatchObservers ( group, newState, oldState ) {
		for ( const key in group ) {
			if ( !( key in newState ) ) continue;

			const newValue = newState[ key ];
			const oldValue = oldState[ key ];

			if ( newValue === oldValue && typeof newValue !== 'object' ) continue;

			const callbacks = group[ key ];
			if ( !callbacks ) continue;

			for ( let i = 0; i < callbacks.length; i += 1 ) {
				callbacks[i].call( component, newValue, oldValue );
			}
		}
	}

	component.get = function get ( key ) {
		return state[ key ];
	};

	component.set = function set ( newState ) {
		const oldState = state;
		state = Object.assign( {}, oldState, newState );
		
		dispatchObservers( observers.immediate, newState, oldState );
		mainFragment.update( state );
		dispatchObservers( observers.deferred, newState, oldState );
	};

	component.observe = function ( key, callback, options = {} ) {
		const group = options.defer ? observers.deferred : observers.immediate;

		( group[ key ] || ( group[ key ] = [] ) ).push( callback );
		if ( options.init !== false ) callback( state[ key ] );

		return {
			cancel () {
				const index = group[ key ].indexOf( callback );
				if ( ~index ) group[ key ].splice( index, 1 );
			}
		};
	};

	component.teardown = function teardown () {
		mainFragment.teardown();
		mainFragment = null;

		state = {};

		
	};

	let mainFragment = renderMainFragment( component, options.target );
	component.set( options.data );

	

	return component;
}

{
  html: {
    start: 1,
    end: 64,
    type: 'Fragment',
    children: [ [Object], [Object], [Object] ]
  },
  css: null,
  js: {
    start: 66,
    end: 221,
    attributes: [],
    content: Node {
      type: 'Program',
      start: 74,
      end: 211,
      body: [Array],
      sourceType: 'module'
    }
  }
}