New release with script setup

[vinyll]

Following the script setup feature initiated by @echb, a new feature branch is being initiated.

Here's the new syntax offered (notice it is fully backward compatible):

<script setup>
  const state = {
    time: new Date()
  }

  const nonReactiveTitle = "Welcome!"

  function updateTime() {
    this.render({ time: new Date() })
  }
</script>

<template>
  <h1>${ nonReactiveTitle }</h1>
  <p>Time is ${ state.time }</p>
  <button @click="updateTime">update the time</button>
</template>

A working branch is here: https://github.com/Polight/lego/tree/feature/setup.
Feel free to test, fix, improve, comment…

[vinyll]

The current version of Lego would be written as so:

<script>
  init() {
    this.state = {
      time: new Date()
    }

    this.nonReactiveTitle = "Welcome!"
  }

  updateTime() {
    this.render({ time: new Date() })
  }
</script>

<template>
  <h1>${ nonReactiveTitle }</h1>
  <p>Time is ${ state.time }</p>
  <button @click="updateTime">update the time</button>
</template>

Thumb up which version you prefer

[vinyll]

Here are some counterparts we're still looking for ways to improve where the current writing may be more clear.

Importing modules

Considering we would have a stringify() function in a utils module (just a made-up example)

Current version

<script>
  import { stringify } from 'utils'
  const str = utils.stringify('Some String')
</script>

New Setup Proposal

<script import>
  import { stringify } from 'utils'
</script>
<script setup>
  const str = utils.stringify('Some String')
</script>

Dynamic Reactive CSS

Current version

<script>
  init() {
    this.state = {
      height: 500
    }
  }
</script>

<style>
  section {
    max-height: ${ state.height }px;
  }
</style>

New Setup Proposal

<script setup>
  const state = {
    height: 500
  }
</script>

<style>
  section {
    max-height: ${ state.height }px;
  }
</style>

the state is passed to the style tag making it reactive.
However local variables and function are not accessible.

Accessing a Component Method

Current version

<script>
  connected() {
    console.info("component is connected")
  }
</script>

New Setup Proposal

<script setup>
  this.connected = () => {
    console.info("component is connected")
  }
</script>

[vinyll]

Here's a second option of writing

<script>
  import { slugify } from 'utils'

  const str = slugify('The Button')
  const state = { name: "world" }
  
  function clicked(event) {
    alert(`you clicked on ${event.target.name}`)
  }
</script>

<template>
  <h1>Hello ${ state.name }</h1>
  <button @click="clicked" name="${ str }">click me to alert</button>
</template>

The counterpart here is when extending native methods such as conntected(), setAttribute(), render()…
However this conterpart seems lighter as it is rare in facts that we do override these.

If would still be feasible with the current writing in 2 ways:

1. Defining a dedicated script tag

We could call it script component:

<script extend>
  export default class extends Lego {
    connected() {
      console.info(`${this.nodeName} was connected`)
    }
  }
</script>

2. Defining Specific Method Names

function connected(component) {
  console.info(`${component.nodeName} was connected`)
}

I have a feeling the 1st method is more explicit and less magic.

Opinions are welcome 👋

[vinyll]

A new version is here : #38
Pretty satisfying.
It was tested with projects written a few years back and it's still fully compatible 🚀