{ skate . define ( 'x-hello' , { props : { name : { attribute : true } } , render ( elem ) { return skate . h ( 'div' , `Hello, ${ elem . name }` ) ; } } ) ; } { const sym = Symbol ( ) ; skate . define ( 'x-counter' , { props : { count : skate . prop . number ( { attribute : true } ) } , attached ( elem ) { elem [ sym ] = setInterval ( ( ) => ++ elem . count , 1000 ) ; } , detached ( elem ) { clearInterval ( elem [ sym ] ) ; } , render ( elem ) { return skate . h ( 'div' , 'Count ' , elem . count ) ; } } ) ; } const { define , Component } = skate ; { const MyComponent = define ( 'my-component' , class extends Component { } ) ; } { const MyComponent = define ( 'my-component' , { } ) ; } { const MyComponent = define ( 'my-component' , Component . extend ( { } ) ) ; } { const MyComponent1 = define ( 'my-component-1' , { } ) ; const MyComponent2 = define ( 'my-component-2' , MyComponent1 . extend ( { } ) ) ; } { const MyComponent = define ( 'my-component' , { } ) ; const myElement = new MyComponent ( ) ; } { skate . define ( 'my-component' , { prototype : { get someProperty ( ) { return null ; } , set someProperty ( v ) { } , someMethod ( ) { } , } } ) ; } { let props ; skate . define ( 'my-component' , { props : { ... props } } ) ; } { const Elem = skate . define ( 'x-component' , { props : { str : skate . prop . string ( ) , arr : skate . prop . array ( ) , } , render ( ) { } , } ) ; const elem = new Elem ( ) ; elem . str = 'updated' ; elem . arr . push ( 'something' ) ; elem . arr = elem . arr . concat ( 'something' ) ; } { skate . define ( 'my-component' , class extends skate . Component { static updated ( elem , prev ) { return true ; } } ) ; } { skate . define ( 'my-component' , { props : { name : skate . prop . string ( ) } , updated ( elem , prev ) { if ( prev . name !== elem . name ) { skate . emit ( elem , 'name-changed' , { detail : prev } ) ; } } } ) ; } { skate . define ( 'my-component' , { render ( elem ) { return skate . h ( 'p' , `My name is ${ elem . tagName }.` ) ; } } ) ; } { skate . define ( 'my-component' , { render ( elem ) { return [ skate . h ( 'paragraph 1' ) , skate . h ( 'paragraph 2' ) , ] ; } } ) ; } { skate . define ( 'my-component' , { attached ( elem ) { } } ) ; } { skate . define ( 'my-component' , { detached ( elem ) { } } ) ; } { skate . define ( 'my-component' , { attributeChanged ( elem , data ) { if ( data . oldValue === undefined ) { } else if ( data . newValue === undefined ) { } else { } } } ) ; } { skate . define ( 'my-component' , { observedAttributes : [ 'some-attribute' ] , attributeChanged ( ) { } } ) ; } { skate . define ( 'my-component' , { props : { someAttribute : { attribute : true } } } ) ; } { skate . define ( 'x-tabs' , { render ( elem ) { return skate . h ( 'x-tab' , { onSelect : ( ) => { } } ) ; } } ) ; const { emit } = skate ; skate . define ( 'x-tab' , { render ( elem ) { return skate . h ( 'a' , { onClick : ( ) => emit ( elem , 'select' ) } ) ; } } ) ; } { let elem = null as any ; skate . emit ( elem , 'event' , { composed : false , bubbles : false , cancelable : false } ) ; } { let elem = null as any ; skate . emit ( elem , 'event' , { detail : { data : 'my-data' } } ) ; } { skate . define ( 'my-input' , { props : { value : { attribute : true } } , render ( elem ) { return skate . h ( 'input' , { onChange : skate . link ( elem ) , type : 'text' } ) ; } } ) ; } { let elem = null as any ; skate . h ( 'input' , { name : 'someValue' , onChange : skate . link ( elem ) , type : 'text' } ) ; } { let elem = null as any ; skate . link ( elem , 'someValue' ) ; } { let elem = null as any ; skate . link ( elem , 'obj.someValue' ) ; } { let elem = null as any ; skate . h ( 'input' , { name : 'someValue' , onChange : skate . link ( elem , 'obj.' ) , type : 'text' } ) ; } { let elem = null as any ; const linkage = skate . link ( elem , 'obj.' ) ; skate . h ( 'input' , { name : 'someValue1' , onChange : linkage , type : 'text' } ) ; skate . h ( 'input' , { name : 'someValue2' , onChange : linkage , type : 'checkbox' } ) ; skate . h ( 'input' , { name : 'someValue3' , onChange : linkage , type : 'radio' } ) ; skate . h ( 'select' , { name : 'someValue4' , onChange : linkage } , skate . h ( 'option' , { value : 2 } , 'Option 2' ) , skate . h ( 'option' , { value : 1 } , 'Option 1' ) ) ; } { skate . prop . boolean ( ) ; } { skate . prop . boolean ( { coerce ( ) { return true ; } , set ( ) { } } ) ; } { const { define , props } = skate ; const Elem = define ( 'my-element' , { props : { prop1 : null } } ) ; const elem = new Elem ( ) ; props ( elem , { prop1 : 'value 1' , prop2 : 'value 2' } ) ; props ( elem ) ; } { const MyComponent1 = skate . define ( 'my-component' , { } ) ; console . log ( MyComponent1 [ skate . symbols . name ] ) ; const MyComponent2 = skate . define ( 'my-component' , { } ) ; console . log ( MyComponent2 [ skate . symbols . name ] ) ; } { skate . define ( 'my-component' , { render ( ) { return skate . h ( 'p' , 'test' ) ; } , ready ( elem ) { } } ) ; } { skate . define ( 'my-component' , { render ( ) { return skate . h ( 'p' , { style : { fontWeight : 'bold' } } , 'Hello!' ) ; } } ) ; } { define ( 'my-component' , { render ( ) { return < p > Hello ! < /p>; } } ) ; } { const { vdom } = skate ; const h = vdom . builder ( ) ; define ( 'my-component' , { render ( ) { return h ( 'div' , { id : 'test' , } , h ( 'p' , 'test' ) ) ; } } ) ; } { const [ div , p ] = skate . vdom . builder ( 'div' , 'p' ) ; define ( 'my-component' , { render ( ) { return div ( { id : 'mydiv' } , p ( 'test' ) ) ; } } ) ; } { const MyElement = skate . define ( 'my-element' ) ; skate . h ( MyElement ) ; } { const MyElement = skate . define ( 'my-element' ) ; skate . vdom . elementOpen ( MyElement ) ; } { const MyElement = ( ) => skate . h ( 'div' , 'Hello, World!' ) ; skate . h ( MyElement ) ; } { const MyElement = ( props ) => skate . h ( 'div' , `Hello, ${ props . name }!` ) ; skate . h ( MyElement , { name : 'Bob' } ) ; } { const MyElement = ( props , chren ) => skate . h ( 'div' , 'Hello, ' , chren , '!' ) ; skate . h ( MyElement , 'Mary' ) ; } { skate . h ( 'ul' , skate . h ( 'li' , { key : 0 } ) , skate . h ( 'li' , { key : 1 } ) ) ; } { const onClick = console . log ; skate . h ( 'button' , { onClick } ) ; skate . h ( 'button' , { 'on-click' : onClick } ) ; } { const onClick = console . log ; skate . h ( 'button' , { onclick : onClick } ) ; } { skate . define ( 'x-element' , { created ( elem ) { elem . addEventListener ( 'change' , elem . handleChange ) ; } , prototype : { handleChange ( e ) { } } } ) ; } { const ref = ( button ) => button . addEventListener ( 'click' , console . log ) ; skate . h ( 'button' , { ref } ) ; } { const ref = console . log ; skate . define ( 'my-element' , { render ( ) { return skate . h ( 'div' , { ref } ) ; } } ) ; } { skate . define ( 'my-element' , { render ( ) { const ref = console . log ; return skate . h ( 'div' , { ref } ) ; } } ) ; } { skate . h ( 'div' , { ref : ( e ) => ( e . innerHTML = '<p>oh no you didn\'t</p>' ) , skip : true } ) ; } { skate . h ( 'div' , { statics : [ 'attr1' , 'prop2' ] } ) ; } { skate . define ( 'my-component' , { props : { name : { attribute : true } } } ) ; } { skate . define ( 'my-component' , { props : { values : { attribute : true , deserialize ( val ) { return val . split ( ',' ) ; } , serialize ( val ) { return val . join ( ',' ) ; } } } } ) ; } { const scoped = function scoped ( elem ) { } ; skate . define ( 'x-element' , { created ( elem ) { scoped ( elem ) ; elem . _privateButNotReally ( ) ; } , prototype : { _privateButNotReally ( ) { } } } ) ; } { const sym = Symbol ( ) ; skate . define ( 'x-element' , { created ( elem ) { elem [ sym ] ( ) ; } , prototype : { [ sym ] ( ) { } } } ) ; } { const map = new WeakMap ( ) ; skate . define ( 'x-element' , { created ( elem ) { map . set ( elem , 'some data' ) ; } , render ( elem ) { return skate . h ( 'div' , map . get ( elem ) ) ; } } ) ; } { skate . define ( 'x-form' , { render ( ) { return ( < form > < slot /> < /form>); } } ) ; skate . define ( 'x-button' , { render ( ) { return ( < button > < slot /> < /button>); } } ) ; } { const onclick = function onclick ( e ) { if ( e . target . getAttribute ( 'type' ) === 'submit' ) { } } ; skate . define ( 'x-form' , { render ( ) { return ( < form onClick = { onclick } > < /form>); } } ) ; } { skate . define ( 'x-component' , { updated ( elem , prev ) { const canRender = skate . emit ( elem , 'updated' , { detail : prev } ) ; return canRender && skate . Component . updated ( elem , prev ) ; } } ) ; } { skate . define ( 'x-component' , { render ( ) { return [ skate . h ( 'style' , '.my-class { display: block; }' ) , skate . h ( 'div' , { class : 'my-class' } ) , ] ; } } ) ; } { skate . define ( 'x-component' , class extends skate . Component { static created ( elem ) { } static attached ( elem ) { } static detached ( elem ) { } } ) ; } { skate . define ( 'x-component' , class extends skate . Component { static get props ( ) { return { myProp : { attribute : true } } ; } } ) ; } { skate . define ( 'x-component' , class extends skate . Component { static props = { myProp : { attribute : true } } ; } ) ; } { skate . define ( 'x-component' , class extends skate . Component { myProp1 = 'some value' ; get myProp2 ( ) { return 'another value' ; } myMethod ( ) { } } ) ; }