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

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.

[patrick-steele-idem]

Would a backslash $ allow you to insert literal dollar sign characters?

Yup, that’s what I am thinking and that is what we allow if you need to escape placeholders.

If you are good with it, then I propose we move forward with $ <code_block> and $${ <code_block> }.

If anyone has any last minute objections please let us know!

/cc @austinkelleher @philidem @mlrawlings @Hesulan @Eldar-X

[mlrawlings]

@Hesulan What I meant is that the single line version, because we allow continuing, is also the multiline version. So If we wanted to have a different symbol (like $$) and didn’t want the single $ to allow multiline, it would take more work.

Your logic is pretty much how I implemented it: https://github.com/marko-js/htmljs-parser/commit/21958233e1c4c442e8e338dc14c537b813ffab2a#diff-61eec70114a46820c77ce5879a128729R658

I’m going to close this as the work has been completed. Thank you everyone for your feedback and help in reaching this point!