New Writing For Lego

[vinyll]

This may be a new major version of Lego as the default writing is changed, yet compatible with Lego so far.

<script>
  const title = "Hello Lego!"
  const titleColor = "purple"
  const state = {
    count: 0
  }

  function increment() {
    render({ count: state.count + 1 })
  }
</script>

<template>
  <h1>${ title }<h1>
  <button @click="increment">clicked ${ state.count } times</button>
</template>

<style>
  h1 {
    color: ${ titleColor };
  }
</style>

Extending the component itself is still accessible as before.
If using the new style writing, an "extend" will do the difference: <script extend>.
If you only use 1 single script tag then you can skip the attribute:

<script>
…
</script>
…
<script extend>
  export default class extends Lego {
    connected() {
      console.info('component is connected!')
    }
  }
</script>

<template>
…

The output that Lego generates is still very light, even more readable and therefore to debug:

import { h, Component } from '/dist/lego.min.js'

const title = "Hello Lego!"
const state = {
  count: 0
}

function increment() {
  render({ count: state.count + 1 })
}

const __template = function({ state }) {
  return [  
    h("h1", {}, `${ title }`),
    h("button", {"onclick": increment.bind(this)}, `clicked ${ state.count } times`)
  ]
}

const __style = function({ state }) {
  return h('style', {}, `
    h1 {
      color: purple;
    }
  `)
}

// -- Lego Core
let render = async (state) => {}

export default class Lego extends Component {
  constructor() {
    super()
    render = this.render
    try {
      this.__state = state
    } catch {}
  }
  get vdom() { return __template }
  get vstyle() { return __style }
}
// -- End Lego Core

[mlbiche]

Should this PR points to the v2 branch now?

[vinyll]

The v2 branch is already based on this PR 👍
Note that a deep change must be processed in order to fix a global state issue.

Currently the proposal looks like this:

<script>
  const state = { name: 'Joe' }

  function toggle() {
    this.render({ name: this.state === 'Joe' : 'Billy' : 'Joe' })
  }
</script>
<template>
  <button @click="toggle"></button>
</template>

this.render and this.state are made available to functions that are invoqued from the template.
That allows to evaluate the current state (this.state) and eventually re-render it.

state is this initial state of the component.
It's also the state shared by all instances.
So:

• changing state will change the value of all instances of that components
• changing this.state will change the state of the currenct instance of the component

thoughts are welcome 👐