v6.0.4 - Patch Update

Change Log

internal

• Fix: Wrong tplid assignments on [html-if] elements that was not components. ( No impact on end users )

v6.0.3 - Patch Update

Change Log

internal

• Making components visible to multiple Jails builds.

v6.0.2 - Patch Update

Change Log

• Fixing export of jails-js/html.
• Updating idiomorph.

v6.0.1 - Major Update

Poseidon

This version and the others aim to primarily simplify and improve the previous version in terms of performance and consistency, adding important elements to maintain both, and removing elements that could impact these two pillars.

Poseidon King of the sea

• Rewritten from scratch in Typescript.
• Improving Performance.
• Making <template> tags compatible with directives: html-for, html-if, html-inner...
• Adding state.protected() to avoid parent -> child prop overrides.
• Hidding leaking abstractions on native node elements.
• Improving memory leak managment.
• Improving consistency over many rendering edge cases.
• Removing scope from html rendering and keeping it on memory ( Performance ).
• Removing onupdate function to keep simplicity and avoid inconsistency on rendering.
• Simplifying way to get functionalities from jails by making them destructurable on import: import { start, register } from 'jails-js'
• Model now accepts a Function that provides elm element to provide data from html to be used on initial state.

v5.9.0 - Minor Update

Minor Update

⚠️ Breaking Change

The default template delimiters was changed to mustache {{ variable }}.
This is to avoid conflict with Astro meta-framework and also with Template Strings used in export const template().

Old ❌

<my-component>
   <h1>Hello, ${name}</h1>
</my-component>

New ✅

<my-component>
   <h1>Hello, {{name}}</h1>
</my-component>

v5.8.7 - Patch Update

Change Log

Consistency

Improving the latest bug fix regarding rendering issues with idiomorph.

v5.8.6 - Patch Update

Change Log

Consistency, Extensability

1. Bug fix: There are some very edge cases cenarios where updating state from parent by emiting event from child onmount was rendering unexpected html output results. Adding a quick fix for those cases.

2. Template "children" support.
   For cases where user wants to chare a web component using jails, There wasn't a easy way to wrap children with html code just like React and other frameworks does with children or slot features.
   So it was added on this version, a children prop for export const template() function in order to access children data from server rendered html.

Example

Consider a web component that have to wrap the default html children.

import { html } from 'jails-js/html'

export default function appTitle({ main }) {
  //
  main(() => {
      
  })
}

export const template = ({ children }) => {
  return html`
    <section>
      <h1>${children}</h1>
    </section>
  `
}

  import jails from 'jails-js'
  import * as appTitle from 'components/app-title'
  jails.register('app-title', appTitle)
  jails.start()

<app-title>My Title</app-title>

Output

<section>
  <h1>My Title</h1>
</section>

v5.8.5 - Patch Update

Change Log

Reusability, Interoperability

Adding html and attributes template tags to use for SPA and SSR cenarios.

Use case

There are sometimes where we want to share functionality between 2 or more applications.
The most obvious ways is to use template literals because it's compatible with node & browser systems.
html, attributes are directives to be used on this context and we want more advanced features on template strings.

import { html, attributes } from 'jails-js/html'

export default function banner ({ attrs = [] }) {
  return html`
    [1, 2, 3].map( n => html`
      <h1 ${ attributes( attrs ) }>
        ${n}
      </h1>
    `)
  `
}

banner({ 
  attrs : [{ title: 'Hello' }] 
})

Output

  <h1 title="Hello">1</h1>
  <h2 title="Hello">2</h2>
  <h3 title="Hello">3</h3>

v5.8.3 - Patch Update

Change Log

consistency

Fixing an edge case when dom element was queried inside the high order component function on page load.
The fix is to render component before running the high order function.

v5.8.2 - Patch Update

Change Log

• Fixing innerHTML feature. It was broken for elements outside body tree. Like html, head etc. The alternative has also improve performance for this kind of operation.