upgrading-from-3.x-to-4.x.md

Upgrading from major version 3 to major version 4

Class Operation

In version 4.x the call signature of the class operation have been changed to better alight with other operations (ex: id & do).

// IN 3.x
render(_=>_
  .class([ 'foo', 'bar' ])
  .class([ 'biz' ])
);

// IN 4.x
render(_=>_
  .class('foo', 'bar')
  .class('biz')
);

Custom Operations

In version 4.x custom operations have been dropped in favor of functional builders and the "do" syntax.

// IN 3.x
import { render, extend } from 'brynja';

extend('myOperation', (name: string = 'World') => _=>_
  .child('span', _=>_
    .text(`Hello ${name}!`)
  )
);

render(_=>_
  .myOperation()
  .myOperation('Brynja')
);

// IN 4.x
import { render, createComponent } from 'brynja';

const Greeter = createComponent((name: string = 'World') => _=>_
  .child('span', _=>_
    .text(`Hello ${name}!`)
  )
);

render(_=>_
  .do(
    Greeter(),
    Greeter('Brynja'),
  )
);

Peek Operation

In version 4.x the children property on the ctx copy returned from the peek operation has been limited to only the "length" and numbered properties.

// IN 3.x
render(_=>_
  .peek(ctx => {
    ctx.children.push({});
    // Will run, but won't change the underlying vdom.
  })
);

// IN 4.x
render(_=>_
  .peek(ctx => {
    ctx.children.push({});
    // Will throw. Error: Illegal Operation
  })
);