Skip to content

Injects module scripts into your html to load any local custom elements that are used on the page

Notifications You must be signed in to change notification settings

defx/customelementincludes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

customelementincludes

An async function that you can use before returning html from your application server to dynamically inject component definitions into the page....

import { customElementIncludes } from "customelementincludes"

/* ... */

app.use(async function (req, res, next) {
    /* ... */
    res.send(await customElementIncludes(html))
}

customelementincludes will glob all project files matching _components/\*\*/_.js** (you can configure this path via process.env.components) so that it knows what your local components are called. It assumes each component .js file lives in a directory matching the components name, so your directory structure might look something like...

components/
    hello-world/
        index.js
    foo-bar/
        index.js

...when you invoke the customElementIncludes function it will search the html you pass it for any Custom Element tags, and then inject module scripts to load any tags that have matching component files.

Note that this process isn't recursive...if one component relies on another component then you must ensure that it loads that component via a side-effect import

About

Injects module scripts into your html to load any local custom elements that are used on the page

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published