F1LT3R / hybrids-dynamic-load

Example of an unbundled Hybrids app with dynamic imports.

Hybrids Dynamic Load

This codebase is an example of an unbundled Hybrids app with dynamic module imports.

Please visit the GitHub Pages to see this code in action: https://f1lt3r.github.io/hybrids-dynamic-load/

The Page Module

const name = 'welcome-page'

define(name, {
  render: () =>
    html`
      <div>
        <h2>Welcome Page</h2>
        <p>This Welcome page was dynamically loaded.</p>
      </div>
    `,
})

// The name is exported for use as the custom element name
export default name

The Main App Module

// 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: '<span>No page loaded, yet.</span>',

    // Render the pageLoaded string
    page: ({ pageLoaded }) => pageLoaded,

    render: ({ appName, page }) => html`
      <div>
        <h1>${appName}</h1>

        <p>Example of an unbundled Hybrids app with dynamic imports.</p>

        <div>
          <button onclick="${load}" page="./pages/Welcome.mjs">
            Welcome Page
          </button>
          <button onclick="${load}" page="./pages/Other.mjs">
            Other Page
          </button>
        </div>

        <hr />

        <!-- Render the page using Hybrids innerHTML feature -->
        <article innerHTML="${page}"></article>
      </div>
    `,
}