Could you please provide a hint or two to write components without Webpack to get goin

Is it possible to use hybrids without a build process ? about hybrids HOT 3 CLOSED

hybridsjs commented on June 22, 2024

Is it possible to use hybrids without a build process ?

from hybrids.

Comments (3)

smalluban commented on June 22, 2024 2

Of course, you can :) Your example shows how to use hybrids in mode, which supports older browsers. However, it might not be the best option to create standalone web components with own entry.

If you target ES modules ready browsers, you can serve and use single file simple-counter.js like this:

import { define, html } from 'https://unpkg.com/[email protected]/src/index.js';

function increaseCount(host) {
  host.count += 1;
}

const SimpleCounter = {
  count: 0,
  render: ({ count }) => html`
    <button onclick="${increaseCount}">
      Count: ${count}
    </button>
  `,
};

define('simple-counter', SimpleCounter);

And simply use it in html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple Counter Example</title>
  <!-- IMPORT SIMPLE COUNTER -->
  <script type="module" src="https://your-domain.com/simple-counter.js"></script>
  <!-- IMPORT SIMPLE COUNTER -->
</head>
<body>
  <simple-counter count="10"></simple-counter>
</body>
</html>

Some highlights:

We are pointing src - yes, we can, because hybrids uses only implemented features, which all ES module ready browsers support already
Be aware of multiple files fetching (19 source files). If your server supports http/2 it should not be a problem, but it might be better to bundle that in larger applications
There is no entry, which is ES module ready, but served in one file - it has no sense eighter (how then modules would be separated - this is something that webpack does for us)

from hybrids.