https://github.com/f1lt3r/hybrids-dynamic-load
Example of an unbundled Hybrids app with dynamic imports.
https://github.com/f1lt3r/hybrids-dynamic-load
dynamic-loading hybrids javascript javascript-modules web-components
Last synced: 26 days ago
JSON representation
Example of an unbundled Hybrids app with dynamic imports.
- Host: GitHub
- URL: https://github.com/f1lt3r/hybrids-dynamic-load
- Owner: F1LT3R
- License: mit
- Created: 2020-03-02T02:57:41.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-02T03:28:23.000Z (about 6 years ago)
- Last Synced: 2025-04-02T10:09:54.982Z (about 1 year ago)
- Topics: dynamic-loading, hybrids, javascript, javascript-modules, web-components
- Language: JavaScript
- Homepage: https://f1lt3r.github.io/hybrids-dynamic-load/
- Size: 6.84 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hybrids Dynamic Load
This codebase is an example of an unbundled [Hybrids](https://hybrids.js.org/) app with [dynamic module imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import).
Please visit the GitHub Pages to see this code in action: [https://f1lt3r.github.io/hybrids-dynamic-load/](https://f1lt3r.github.io/hybrids-dynamic-load/)
## The Page Module
```js
const name = 'welcome-page'
define(name, {
render: () =>
html`
Welcome Page
This Welcome page was dynamically loaded.
`,
})
// The name is exported for use as the custom element name
export default name
```
## The Main App Module
```js
// This dynamic load function fetches the module at run time
const load = async (host, event) => {
// Get the module URL from a DOM attribute
const pageUrl = event.target.getAttribute('page')
// Import the page and reference default (the custom element name)
const pageName = (await import(pageUrl)).default
// Set the page element on the Hybrid host
// This triggers a re-render
host.pageLoaded = `<${pageName}>${pageName}>`
}
// The main Hybrid component that drives the App
const HybridsApp = {
appName: 'Welcome to Hybrids!',
// Set default placeholder content
pageLoaded: 'No page loaded, yet.',
// Render the pageLoaded string
page: ({ pageLoaded }) => pageLoaded,
render: ({ appName, page }) => html`
${appName}
Example of an unbundled Hybrids app with dynamic imports.
Welcome Page
Other Page
`,
}
```