<script webc:setup> Expose JS defined in <script> tags to component's template

[georgedoescode]

It would be great if variables, functions, etc, that are defined in a .webc component's <script> tag could be referenced within that component's template. Similar to Vue's <script setup> Something like this:

<script>
const pageTitle = "Home";

function renderText() {
  return true;
}
</script>

<main>
  <h1 @text="pageTitle"></h1>
  <div webc:if="renderText()"></div>
</main>

It would also be great if we could reference global Eleventy data here, something like:

<script>
const blogPosts = data.blogPosts;
</script>

It could also be really interesting if the functions, variables, etc, defined in the <script> tag could be used both at build time, but also be carried over to the client for use with is-land and other interactive elements. I feel like this could be really powerful!

[zachleat]

Related https://github.com/11ty/webc/issues/87

[zachleat]

<script webc:setup> will ship with WebC v0.9.0.

Has access to the standard stuff from the WebC data cascade: global data (Eleventy’s data cascade), helper functions, etc.

A few test cases here: https://github.com/11ty/webc/blob/efe23f6c12ac8505c52f9cfedc0bce6f4d0ad750/test/stubs/setup-script/test.js

• Any variable declarations or functions declared here will be available in the component.
• Is async-friendly
• runs once per component (not once per instance, though the door is open for that later if we want it)

[zachleat]

cc @mayank99 who might be interested in this

[mayank99]

This is amazing!

Couple questions:

1. What would be the main difference between webc:setup and the older webc:type="js"?
2. How does it get access to global 11ty data? Asking because it would be useful to provide it global data in my vite plugin.

[zachleat]

This may feel like whiplash but personally I don’t think we need webc:type="js" or webc:type="render" with webc:setup around.

That said,

On data scoping

• webc:setup data is scoped to the component (exports all top level globals/functions).
• Variables in webc:type are scoped to that script and are not available in the component.

On rendering:

• webc:setup doesn’t render any html
• webc:type="js" renders whatever returns from the last line.
• webc:type="render" renders whatever returns from the function

Using webc:setup to render will look something like this (although I kinda wish we had an @outerhtml at this point):

<script webc:setup>
let myHtml = "<my-webc-component>";
</script>
<template @html="myHtml" webc:nokeep></template>

On data access:

• webc:setup has access to read the full Eleventy data cascade (they’re provided as a context to the script) but does not feed any data back into the cascade.
• Template front matter does feed into the Eleventy data cascade. As usual front matter is only available in Eleventy WebC pages and not in individual component files. We’ll have a similar javascript front matter type for front matter to solve this, see https://github.com/11ty/eleventy-plugin-webc/issues/45

[georgedoescode]

This is fantastic! Thank you so much for taking the time to implement this Zach ❤️ I can't wait to have a play!

[Paul-Hebert]

This is awesome! This is exactly what I needed for a project today. I'm excited to play with this. Thanks Zach!