Marko: Deprecate <script> with export and <script template-helpers>

[mlrawlings]

We've decided to stop hijacking the script tag and use concise style tags that look like JS instead.

Deprecate <script> with export

Old:

<script>
   module.exports = {
      handleClick() {
         alert('hi!')
      }
   }
</script>

<button on-click('handleClick')>Click me!</button>

New:

class {
   handleClick() {
      alert('hi!')
   }
}

<button on-click('handleClick')>Click me!</button>

Deprecate <script template-helpers>

Old:

<script template-helpers>
   function sum(a, b) {
      return a + b;
   }
</script>

<div>The sum of 1 + 2 is ${sum(1, 2)}</div>

New:

static function sum(a, b) {
   return a + b;
}

<div>The sum of 1 + 2 is ${sum(1, 2)}</div>

Moving to an external file

One concern you may have is that with the <script> with export approach, the only change required to move a component to an external .js file was copy and paste. Admittedly, it's not _quite_ that simple, but it's still really easy.

This template:

import sum from './helpers/sum';

class {
   handleClick(a, b) {
      console.log(sum(a, b))
   }
}

<button on-click('handleClick', 3, 4)>Click me!</button>

becomes these two files

_component.js_

import sum from './helpers/sum';

export default class {
   handleClick(a, b) {
      console.log(sum(a, b))
   }
}

_index.marko_

<button on-click('handleClick', 3, 4)>Click me!</button>

So we copied over _and had to add an export statement_. Still pretty simple.

[gilbert]

What does moving static functions over to component.js look like?

[patrick-steele-idem]

@mlrawlings Can you update this issue to also mention:

static {
  function myHelper() { ... }
  var foo = 'hello';
}

I wonder if it makes sense to recommend static { ... } because it makes it a little easier to move those functions how to a separate file if needed (only the block content needs to be copied out)

[patrick-steele-idem]

@mindeavor, @philidem and I had an impromptu discussion based on concerns raised in the Gitter chat room. The following proposal seemed to be liked by everyone:

static {
    function myHelper() {
         /* ... */ 
    }

    class ViewModel {
        constructor(data) {
            this.data = data;
        }

        get fullName() {
            return this.data.firstName + this.data.lastName;
        }
    }
}

component style lang="less" scoped {
    .foo {
        background-color: 'red';
    }
}

component class {
    onInput() { /* ... */ }
    handleButtonClick() { /* ... */ }
}

Reopening the issue for discussion. It's not too late to voice your approval or concerns.

[gilbert]

Although I find that syntax ok, my ideal syntax would still be something like this:

<script marko>
import helper from 'library';

class Component {
    onInput() { /* ... */ }
    handleButtonClick() { /* ... */ }
}

function myHelper() {
     /* ... */ 
}

class ViewModel {
    constructor(data) { /* ... */ }
    get fullName() { /* ... */ }
}
</script>


<style lang="less" scoped>
.foo {
    background-color: 'red';
}
</style>

<div class="the-component">
    <h1>${ state.name }</h1>
</div>

[Eldar-X]

I think it's not readable and clear like old syntax. Example if you are newbie in marko world and you see

<script template-helpers>
   function sum(a, b) {
      return a + b;
   }
</script>

You can easy understand that some logical operations is happen in script tags but if you see

static function sum(a, b) {
   return a + b;
}

You can think someone try to write in output "static function ... etc". Also if you need to write really to output something like this you need to wrap this code and it's not intuitive.

I like marko html syntax and custom tags because it make me fill everything is standard with some extra power.

Another thing why i like html syntax is if i have already written code in html it's really easy to integrate with my project without any other efforts but otherwise result can be unexpected.

I don't like concise, mix syntax and maybe i am wrong.

[Hesulan]

@Eldar-X
You're certainly not alone in preferring standard over concise syntax. I personally prefer concise, but I do feel that the official documentation should use HTML syntax whenever possible.

@mindeavor @patrick-steele-idem
I much prefer using a separate tag rather than hijacking <script>. Even with the template-helpers or marko-init attribute, the first time I saw that it took a while to click. Someone new to Marko might not realize that it transforms top-level <script> and <style> tags, but when I see something like <static> or static { /* ... */ } I immediately recognize that it's special.

@patrick-steele-idem
I really like this proposal. Correct me if I'm wrong, but I'm assuming the HTML syntax would look like:

<static {
    function myHelper() { /* ... */ }
} />
<component class {
    onInput() { /* ... */ }
} />

Would <static> still accept body content like <script marko-init> did?

<static>
    function myHelper() { /* ... */ }
</static>

[gilbert]

I think it's good and unsurprising that marko transforms <style> tags. I wouldn't want my styles to be inlined every time I use the component :)

If we really want to stay away from <script>, then we can use a different name instead:

<component>
import helper from 'library';

class {
    onInput() { /* ... */ }
    handleButtonClick() { /* ... */ }
}

function myHelper() {
     /* ... */ 
}

class ViewModel {
    constructor(data) { /* ... */ }
    get fullName() { /* ... */ }
}
</component>

My primary preference is to have a single tag for all my JS code if possible.