Single File Components
Every modern web framework has the concept of a component. Most require you to learn a non-standard dialect in order to use them though. Enhance enables you to write single-file components with the same benefits of co-location and ease of reuse while leveraging the skills you already have.
Wouldn’t it be nice if you could author components like HTML pages? Well that’s what you get with Enhance single-file components.
It’s just HTML
Author your component as an HTML custom element.
<hello-world greeting="Hello World"></hello-world>
Pure function
Define a pure function that returns the HTML markup you want your custom element to encapsulate.
export default function HelloWorld({ html, state }) {
const { attrs } = state
const { greeting='Hello World' } = attrs
return html`<h1>${greeting}</h1>`
}
Style
Styles are added by inserting a standard <style>
tag.
Styles are scoped to your custom element by default, or you can add scope="global"
to the style tag to make styles available to the global scope.
export default function HelloWorld({ html, state }) {
const { attrs } = state
const { greeting='Hello World' } = attrs
return html`
<style scope="global">
body {
color: #222;
}
</style>
<h1>${greeting}</h1>
`
}
Any valid CSS will work.
Skip ahead to Style Transforms to learn about how it works and pseudo selectors like :host
and ::slotted()
.
Script
Add functionality to your component by adding a <script>
tag.
You can either author JavaScript directly in this script tag or link to an external source.
The /public
folder in Enhance projects is preconfigured to serve files from /_public
.
<script src="/_public/my-script.mjs"></script>
That’s it
You get to author components as individual HTML pages with web standard HTML, CSS and JavaScript while Enhance delivers a progressively enhanced experience to your users.