SkateJS - 4.x -> 5.x changes

Skate-4-to-5-changes.md

Component base class

-import {h, Component, define} from 'skatejs'
+import {withComponent} from 'skatejs'
+import {h} from 'preact'
+import withPreact from '@skatejs/renderer-preact'

+const Component = withComponent(withPreact())

class MyElement extends Component {
  static is = 'x-hello'
  renderCallback() {
    return <div>Hello <slot/></div>
  }
}

define(MyElement)

props API

NOTE: ES language changes

• if you used before getters for defining props or is, that won't work anymore
• you have to provide just static class properties for both props and is

class extends Component {
-  static get is(){ return 'x-hello' }
+  static is = 'x-hello'
-  static get props() {
-   return {
-     who: prop.string()
-    }
-   }
+  static props = {
+   who: props.string
+  }
}

configure component props

-import {define, Component, prop} from 'skatejs'
+import {withComponent, props} from 'skatejs'
import {h} from 'preact'
import withPreact from '@skatejs/renderer-preact'

const Component = withComponent(withPreact())

class MyElement extends Component {
  static is = 'x-hello'
  static props = {
-   who: prop.string()
+   who: props.string
  }
  renderCallback() {
   return <div>Hello {this.who}</div>
   // or 
   // return <div>Hello {this.props.who}</div>
  }
}

define(MyElement)

overriding pre defined props

-import {define, Component, prop} from 'skatejs'
+import {withComponent, props} from 'skatejs'
import {h} from 'preact'
import withPreact from '@skatejs/renderer-preact'

const Component = withComponent(withPreact())

class MyElement extends Component {
  static is = 'x-hello'
  static props = {
-   who: prop.string({attributes:true})
+   who: { ...props.string, attributes:true }
  }
  renderCallback() {
   return <div>Hello {this.who}</div>
  }
}

define(MyElement)

props configuration

type PropOptions = {
  attribute?: PropOptionsAttribute,
  coerce?: Function,
  default?: any,
  deserialize?: (val: string) => mixed,
  serialize?: (val: mixed) => null | string
- get?: <R>(elem: El, data: { name: string; internalValue: T; }) => R;
- set?: (elem: El, data: { name: string; newValue: T | null | undefined; oldValue: T | null | undefined; }) => void;
- initial?: T | null | undefined | ((elem: El, data: { name: string; }) => T | null | undefined);
}

change/get props

-import {withComponent, props, prop} from 'skatejs'
+import {withComponent, props} from 'skatejs'
import {h} from 'preact'
import withPreact from '@skatejs/renderer-preact'

const Component = withComponent(withPreact())

class MyElement extends Component {
  static is = 'x-hello'
  static props = {
    myArray: props.array,
    myBoolean: props.boolean
  }
  
  // some internal property
  someNonPublicApiProp = 'Who are you?'
  
  _changeProps(){

-   props(this,{myBoolean: true})
+   this.props = {myBoolean: true}
    // Implementation detail -> props on the instance is getter/setter
    
    // or just directly
    this.myBoolean = true
    
-   console.log( props(this) ) // { myArray: [], myBoolean: true }
+   console.log( this.props ) // { myArray: [], myBoolean: true }

-   props( this, {myArray: ['hello']} )
+   this.props = { myArray: ['hello'] }
      // or just directly
    this.myArray = ['hello']

-   console.log(props(this)) // { myArray: ['hello'], myBoolean: true }
+   console.log(this.props) // { myArray: ['hello'], myBoolean: true }

    // this will not trigger re-render
    this.someNonPublicApiProp = 'Im David'
  }
  renderCallback() {
   return <div>Hello {this.myBoolean}</div>
  }
}

define(MyElement)

return array of VNodes with Preact as renderer

-import {h, Component, define} from 'skatejs'
+import {withComponent} from 'skatejs'
+import {h} from 'preact'
+import withPreact from '@skatejs/renderer-preact'

+const Component = withComponent(withPreact())

class MyElement extends Component {
  static is = 'x-hello'
  renderCallback() {
-    return [
-      <div>Hello <slot/></div>,
-      <div>Yo what's up?</div>
-    ]
+    return <div>
+      <div>Hello <slot/></div>
+      <div>Yo what's up?</div>
+    </div>
  }
}

define(MyElement)