@enhance/ssr
Advanced tools
Server sider render for custom elements.
Enhance enables a web component workflow that embraces templates and slots.
npm i @enhance/ssr
import HelloWorld from './path/to/elements/hello-world.mjs'
import enhance from '@enhance/ssr'
const html = enhance({
elements: {
'hello-world': HelloWorld
}
})
console.log(html`<hello-world greeting="Well hi!"></hello-world>`)
Attributes added to the custom element in your markup will be passed in the attrs object nested in the passed state object.
export default function HelloWorld({ html, state }) {
const { attrs } = state
const { greeting='Hello World' } = attrs
return html`
<style scope="global">
h1 {
color: red;
}
</style>
<h1>${greeting}</h1>
<script type=module>
class HelloWorld extends HTMLElement {
constructor () {
super()
const template = document.getElementById('hello-world-template')
this.attachShadow({ mode: 'open' })
.appendChild(template.content.cloneNode(true))
}
connectedCallback () {
console.log('Why hello there 👋')
}
}
customElements.define('hello-world', HelloWorld)
</script>
`
}
The template added to the server rendered HTML page
// Output
<head>
<style scope="global">
h1 {
color: red;
}
</style>
</head>
<body>
<script type="module">
class HelloWorld extends HTMLElement {
constructor () {
super()
const template = document.getElementById('hello-world-template')
this.attachShadow({ mode: 'open' })
.appendChild(template.content.cloneNode(true))
}
connectedCallback () {
console.log('Why hello there 👋')
}
}
customElements.define('hello-world', HelloWorld)
</script>
<template id="hello-world-template">
<h1>Hello World</h1>
</template>
</body>
If you author slotted elements they will be added to a template keyed by the custom element's id. If no id is authored one will be added during server side render.
You can extend @enhance/base-element to manage progressive enhancement of your custom element and cut down on boilerplate for your Web Component.
// Output
<head>
<style scope="global">
h1 {
color: red;
}
</style>
</head>
<body>
<hello-world>
<h1 slot="salutation">
Whattap!
</h1>
</hello-world>
<script type="module">
class HelloWorld extends BaseElement {
constructor () {
super()
}
connectedCallback () {
console.log('Why hello there 👋')
}
}
customElements.define('hello-world', HelloWorld)
</script>
<template id="hello-world-template">
<slot name="salutation">
<h1>Hello World</h1>
</slot>
</template>
</body>
Supply initital state to enhance and it will be passed along in a store object nested inside the state object.
import MyStoreData from './path/to/elements/my-store-data.mjs'
import enhance from '@enhance/ssr'
const html = enhance({
elements: {
'my-store-data': MyStoreData
},
initialState: { apps: [ { users: [ { name: 'tim', id: 001 }, { name: 'kim', id: 002 } ] } ] }
})
console.log(html`<my-store-data app-index="0" user-index="1"></my-store-data>`)
// Template
export default function MyStoreData({ html, state }) {
const { attrs, store } = state
const appIndex = attrs['app-index']
const userIndex = attrs['user-index']
const { id='', name='' } = store?.apps?.[appIndex]?.users?.[userIndex] || {}
return `
<div>
<h1>${name}</h1>
<h1>${id}</h1>
</div>
`
}
Attribute state can be used to pass default state to the backing Web Component. Store is used to pass previously stored data, in an easy to access way, to all components in the tree.
Enhance supports the use of slots in your custom element templates.
export default function MyParagraph({ html }) {
return html`
<p>
<slot name="my-text">
My default text
</slot>
</p>
`
}
You can override the default text by adding a slot attribute with a value that matches the slot name you want to replace.
<my-paragraph>
<span slot="my-text">Let's have some different text!</span>
</my-paragraph>
Enhance supports unnamed slots for when you want to create a container element that will exposes it's content from the Shadow DOM.
export default function MyParagraph({ html }) {
return html`
<p>
<slot>This will not render.</slot>
</p>
`
}
<my-paragraph>
This will render <strong>all</strong> authored children.
</my-paragraph>
Enhance supports the inclusion of script and style transform functions. You add a function to the array of scriptTransforms and/or styleTransforms and are able to transform the contents however you wish, just return the your desired output.
import enhance from '@enhance/ssr'
const html = enhance({
elements: {
'my-transform-script': MyTransformScript
},
scriptTransforms: [
function({ attrs, raw }) {
// raw is the raw text from inside the script tag
// attrs are the attributes from the script tag
return raw + ' yolo'
}
],
styleTransforms: [
function({ attrs, raw }) {
// raw is the raw text from inside the style tag
// attrs are the attributes from the style tag
const { scope } = attrs
return `
/* Scope: ${ scope } */
${ raw }
`
}
]
})
function MyTransformScript({ html }) {
return html`
<style scope="component">
:host {
display: block;
}
</style>
<h1>My Transform Script</h1>
<script type=module>
class MyTransformScript extends HTMLElement {
constructor() {
super()
}
}
customElements.define('my-transform-script', MyTransformScript)
</script>
`
}
console.log(html`<my-transform-script></my-transform-script>`)
P.S. Enhance works really well with Architect.
FAQs
Server-side rendering for custom elements with template and slots support
The npm package @enhance/ssr receives a total of 207 weekly downloads. As such, @enhance/ssr popularity was classified as not popular.
We found that @enhance/ssr demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.