add: feature setup on script tag

[echb]

with the setup prop inside script tag now you can add script outside class like so and it is not a breaking change 😃
Also i was thinking on allow .vue files alogside with {{ }} syntax and get autcomplete help from editor but I think for now it's ok

<script setup>
  let count = 0
  const state = { name: "World!", count: 0, k: { a: 'a', p: 0 } }

  function has(e) {
    count++
    state.count++
    console.log(e);
    this.render()
  }

  function gas() {
    state.k.p++
    this.render()
  }

</script>

<template>
  <div>
    <p @click="has">Hello ${ state.name } ${ state.count } ${ count }</p>
    <p @click="gas">
      ${ state.k.a } ${ state.k.p }
    </p>
  </div>
</template>

[echb]

Could this be a solution for #14 @vinyll ?

[vinyll]

Hey @echb!
Glad to see you around again ;)

As I also use Vue, I switched to the composition API as well with the script setup.
It is indeed clearer to read despite it carries even more magic.

It would be a great inspiration for sure to get the idea of flat variables and functions and use them in the components.

Does your PR work for you? I can't get a working component out.

Anyways, let's get a step further.
In order to think about the <script setup> approach, we need to think what we write and how it comes out.
Technically it means how to write the "brick" in HTML and how it works in the outputted JS component.

Example of input/output in current Lego

Once compiling an HTML input component the lego compiler creates a JS output into a file.
Here's an example

Input HTML brick in current Lego

<template>
    <h1>Hello ${ state.planet }</h1>
</template>

<script>
  init() {
    this.state = { planet: "world" }
  }
</script>

Ouput JS component in current Lego

// Lego version 1.8.3
import { h, Component } from 'https://cdn.jsdelivr.net/gh/Polight/lego@master/dist/lego.min.js'

class Lego extends Component {
  get vdom() {
    return () => [
      h("h1", {}, `${ state.planet }`)
    ]
  }
}

export default class extends Lego {
  init() {
    this.state = { planet: "world" }
  }
}

Thinking a a Script Setup

Now considering that simple example, here's an example of what we could have as input:

<script setup>
  const state = { planet: "world" }
</script>

<template>
  <section>
    <h1>Hello ${ state.planet }</h1>
  </section>
</template>

Where should we output the js script from the <script setup> content in such a context?

// Lego version 1.8.3
import { h, Component } from 'https://cdn.jsdelivr.net/gh/Polight/lego@master/dist/lego.min.js'

export default class extends Component {
  get vdom() {
    return () => [
      h("h1", {}, `${ state.planet }`)
    ]
  }
}

[vinyll]

Writing in the get dom() function would be a partial solution:

Exemple goal

<script setup>
  import yell from '../utils.js'
  const state = { name: "world" }
  function clicked(event) {
    alert(`clicked on `, event.target.nodeName)
  }
</script>

<template>
  <button @click="clicked">Hello ${ state.name }</button>
</template>

class Lego extends Component {
  get vdom() {
    import yell from '../utils.js'
    const state = { name: "world" }
    function clicked(event) {
      alert(`clicked on `, event.target.nodeName)
    }
    return () => [
      h("button", {"onclick":clicked.bind(this), `Hello ${ state.name }`)]
    }
}

This would work and would be easy and clean to implement.
However the import part would not.

My thought would be to have yet another <script import> that would be reserved for importing modules and would be at the start before the class.
However that would end up to be heavy for the developer:

<script import>
  import yell from '../utils.js'
</script>

<script setup>
  const state = { name: "world" }
  function clicked(event) {
    alert(`clicked on `, event.target.nodeName)
  }
</script>
…

That would be a clean solution but not a big fan as a Lego user.

Any thoughts?

[vinyll]

The discussion was moved to #34

[vinyll]

I achieved a satisfying stage here: #38 based on your suggestion and work.
@echb What do you think?

[vinyll]

Closing to merge into the v2 branch