Is it possible to use hybrids without a build process ? #50

tovare · 2019-04-20T12:55:21Z

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

It would seem a nice workflow to use a component by just importing the pre-built js and import one or two components on the page and leverage caching for pages primarily consisting of the occasional component. ES6+ only is fine.

I read a couple of writeup for Vue, but I´m not skilled enough to translate into something that would apply to hybrids:
https://markus.oberlehner.net/blog/goodbye-webpack-building-vue-applications-without-webpack/
https://medium.com/@steveolensky/create-a-spa-vuejs-application-without-node-webpack-or-any-other-build-process-using-vue-router-b9bf8e36e958

I´m not sure if this is a reasonable way to go about it by referencing window.hybrids

<html>
    <head>
        <title>Test 2</title>
    </head>
    <body>
        <script src="https://unpkg.com/hybrids@2.0.2/dist/hybrids.js"></script>
        <p>Test this</p> 
        <simple-counter></simple-counter>
        <script type="module">
export function increaseCount(host) {
  host.count += 1;
}

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

window.hybrids.define('simple-counter', SimpleCounter);
        </script>
    </body>
</html>

Regards,

The text was updated successfully, but these errors were encountered:

smalluban · 2019-04-20T13:45:03Z

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/hybrids@2.0.2/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)

tovare · 2019-04-20T14:07:12Z

Thanks :-)

I like being able to refine and optimize at a later stage if needed.

smalluban · 2019-04-20T14:27:00Z

Feel free to reopen if you have any additional questions.

smalluban added help question ❓ labels Apr 20, 2019

smalluban closed this as completed Apr 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is it possible to use hybrids without a build process ? #50

Is it possible to use hybrids without a build process ? #50

tovare commented Apr 20, 2019 •

edited

Loading

smalluban commented Apr 20, 2019 •

edited

Loading

tovare commented Apr 20, 2019

smalluban commented Apr 20, 2019

Is it possible to use hybrids without a build process ? #50

Is it possible to use hybrids without a build process ? #50

Comments

tovare commented Apr 20, 2019 • edited Loading

smalluban commented Apr 20, 2019 • edited Loading

tovare commented Apr 20, 2019

smalluban commented Apr 20, 2019

tovare commented Apr 20, 2019 •

edited

Loading

smalluban commented Apr 20, 2019 •

edited

Loading