Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var HelloWorld = (function () { 'use strict';
- var template = (function () {
- return {
- methods: {
- foo: function ( event ) {
- this.set({count: Math.random()})
- },
- bar: function(event) {
- console.log('bar', event)
- }
- }
- };
- }());
- function renderMainFragment ( root, component ) {
- var h1 = createElement( 'h1' );
- appendNode( createText( "Hello " ), h1 );
- var text1 = createText( root.name );
- appendNode( text1, h1 );
- var text2 = createText( "\n" );
- var p = createElement( 'p' );
- appendNode( createText( "Count: " ), p );
- var text4 = createText( root.count );
- appendNode( text4, p );
- var text5 = createText( "\n" );
- var button = createElement( 'button' );
- function clickHandler ( event ) {
- var root = this.__svelte.root;
- component.set({ count: root.count + 1 });
- }
- addEventListener( button, 'click', clickHandler );
- button.__svelte = {
- root: root
- };
- appendNode( createText( "+1" ), button );
- var text7 = createText( "\n" );
- var ifBlock_anchor = createComment();
- function getBlock ( root ) {
- if ( root.count ) return renderIfBlock_0;
- return null;
- }
- var currentBlock = getBlock( root );
- var ifBlock = currentBlock && currentBlock( root, component );
- var text8 = createText( "\n" );
- var input = createElement( 'input' );
- var input_updating = false;
- function inputChangeHandler () {
- input_updating = true;
- component.set({ name: input.value });
- input_updating = false;
- }
- addEventListener( input, 'input', inputChangeHandler );
- input.value = root.name;
- function keyupHandler ( event ) {
- component.bar(event);
- }
- addEventListener( input, 'keyup', keyupHandler );
- input.placeholder = "enter your name";
- var text9 = createText( "\n" );
- var p1 = createElement( 'p' );
- appendNode( createText( "Hello " ), p1 );
- var text11 = createText( root.name || 'stranger' );
- appendNode( text11, p1 );
- appendNode( createText( "!" ), p1 );
- return {
- mount: function ( target, anchor ) {
- insertNode( h1, target, anchor );
- insertNode( text2, target, anchor );
- insertNode( p, target, anchor );
- insertNode( text5, target, anchor );
- insertNode( button, target, anchor );
- insertNode( text7, target, anchor );
- insertNode( ifBlock_anchor, target, anchor );
- if ( ifBlock ) ifBlock.mount( ifBlock_anchor.parentNode, ifBlock_anchor );
- insertNode( text8, target, anchor );
- insertNode( input, target, anchor );
- insertNode( text9, target, anchor );
- insertNode( p1, target, anchor );
- },
- update: function ( changed, root ) {
- text1.data = root.name;
- text4.data = root.count;
- button.__svelte.root = root;
- var _currentBlock = currentBlock;
- currentBlock = getBlock( root );
- if ( _currentBlock === currentBlock && ifBlock) {
- ifBlock.update( changed, root );
- } else {
- if ( ifBlock ) ifBlock.teardown( true );
- ifBlock = currentBlock && currentBlock( root, component );
- if ( ifBlock ) ifBlock.mount( ifBlock_anchor.parentNode, ifBlock_anchor );
- }
- if ( !input_updating ) input.value = root.name;
- text11.data = root.name || 'stranger';
- },
- teardown: function ( detach ) {
- removeEventListener( button, 'click', clickHandler );
- if ( ifBlock ) ifBlock.teardown( detach );
- removeEventListener( input, 'input', inputChangeHandler );
- removeEventListener( input, 'keyup', keyupHandler );
- if ( detach ) {
- detachNode( h1 );
- detachNode( text2 );
- detachNode( p );
- detachNode( text5 );
- detachNode( button );
- detachNode( text7 );
- detachNode( ifBlock_anchor );
- detachNode( text8 );
- detachNode( input );
- detachNode( text9 );
- detachNode( p1 );
- }
- }
- };
- }
- function renderIfBlock_0 ( root, component ) {
- var button = createElement( 'button' );
- function clickHandler ( event ) {
- component.foo(event);
- }
- addEventListener( button, 'click', clickHandler );
- appendNode( createText( "foo" ), button );
- return {
- mount: function ( target, anchor ) {
- insertNode( button, target, anchor );
- },
- update: noop,
- teardown: function ( detach ) {
- removeEventListener( button, 'click', clickHandler );
- if ( detach ) {
- detachNode( button );
- }
- }
- };
- }
- function HelloWorld ( options ) {
- options = options || {};
- this._state = options.data || {};
- this._observers = {
- pre: Object.create( null ),
- post: Object.create( null )
- };
- this._handlers = Object.create( null );
- this._root = options._root;
- this._yield = options._yield;
- this._fragment = renderMainFragment( this._state, this );
- if ( options.target ) this._fragment.mount( options.target, null );
- }
- HelloWorld.prototype = template.methods;
- HelloWorld.prototype.get = function get( key ) {
- return key ? this._state[ key ] : this._state;
- };
- HelloWorld.prototype.fire = function fire( eventName, data ) {
- var handlers = eventName in this._handlers && this._handlers[ eventName ].slice();
- if ( !handlers ) return;
- for ( var i = 0; i < handlers.length; i += 1 ) {
- handlers[i].call( this, data );
- }
- };
- HelloWorld.prototype.observe = function observe( key, callback, options ) {
- var group = ( options && options.defer ) ? this._observers.pre : this._observers.post;
- ( group[ key ] || ( group[ key ] = [] ) ).push( callback );
- if ( !options || options.init !== false ) {
- callback.__calling = true;
- callback.call( this, this._state[ key ] );
- callback.__calling = false;
- }
- return {
- cancel: function () {
- var index = group[ key ].indexOf( callback );
- if ( ~index ) group[ key ].splice( index, 1 );
- }
- };
- };
- HelloWorld.prototype.on = function on( eventName, handler ) {
- var handlers = this._handlers[ eventName ] || ( this._handlers[ eventName ] = [] );
- handlers.push( handler );
- return {
- cancel: function () {
- var index = handlers.indexOf( handler );
- if ( ~index ) handlers.splice( index, 1 );
- }
- };
- };
- HelloWorld.prototype.set = function set( newState ) {
- this._set( newState );
- ( this._root || this )._flush();
- };
- HelloWorld.prototype._flush = function _flush() {
- if ( !this._renderHooks ) return;
- while ( this._renderHooks.length ) {
- var hook = this._renderHooks.pop();
- hook.fn.call( hook.context );
- }
- };
- HelloWorld.prototype._set = function _set ( newState ) {
- var oldState = this._state;
- this._state = Object.assign( {}, oldState, newState );
- dispatchObservers( this, this._observers.pre, newState, oldState );
- if ( this._fragment ) this._fragment.update( newState, this._state );
- dispatchObservers( this, this._observers.post, newState, oldState );
- };
- HelloWorld.prototype.teardown = function teardown ( detach ) {
- this.fire( 'teardown' );
- this._fragment.teardown( detach !== false );
- this._fragment = null;
- this._state = {};
- };
- function dispatchObservers( component, group, newState, oldState ) {
- for ( var key in group ) {
- if ( !( key in newState ) ) continue;
- var newValue = newState[ key ];
- var oldValue = oldState[ key ];
- if ( newValue === oldValue && typeof newValue !== 'object' ) continue;
- var callbacks = group[ key ];
- if ( !callbacks ) continue;
- for ( var i = 0; i < callbacks.length; i += 1 ) {
- var callback = callbacks[i];
- if ( callback.__calling ) continue;
- callback.__calling = true;
- callback.call( component, newValue, oldValue );
- callback.__calling = false;
- }
- }
- }
- function createElement( name ) {
- return document.createElement( name );
- }
- function detachNode( node ) {
- node.parentNode.removeChild( node );
- }
- function insertNode( node, target, anchor ) {
- target.insertBefore( node, anchor );
- }
- function appendNode( node, target ) {
- target.appendChild( node );
- }
- function createText( data ) {
- return document.createTextNode( data );
- }
- function addEventListener( node, event, handler ) {
- node.addEventListener ( event, handler, false );
- }
- function removeEventListener( node, event, handler ) {
- node.removeEventListener ( event, handler, false );
- }
- function noop() {}
- function createComment() {
- return document.createComment( '' );
- }
- return HelloWorld;
- }());
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement