// @ts-ignore
import { Component, render, html, useState } from 'uland'
import { define, svg, css } from 'uce'

const Counter = Component(initialState => {
  const [count, setCount] = useState(initialState)
  return html`
    <button onclick=${() => setCount(count + 1)}>
      Count: ${count}
    </button>
  `
})

customElements.whenDefined('uce-lib').then(() => {
  define('some-widget', {
    init() {
      this.html`
        <div>
          A bounce of counters.
          <hr />
          ${Counter(0)} ${Counter(1)}
        </div>
      `
    },

    render() {
      this.html`
        <div>
          A bounce of counters.
          <hr />
          ${Counter(0)} ${Counter(1)}
        </div>
      `
    },
  })
})

The code above doesn't work, how do I write it correctly? i.e. I want to create a custom element that uses another (virtual) component with hooks, but it is no longer renderable. And why such fragmentation?

Hi, I am playing around with uce, I am pretty beginner with custom elements so it could be a stupid question, but I noticed that events "attached" directly via ${this} and automagic on are fired twice.

It is a bug?

Here a replication of the problem:

https://codepen.io/ciaoben/pen/eYgwJWv

(look the console)

https://webreflection.github.io/uce/test/ gives a blank page (no errors in console) on Safari macOS and iOS

works ok on Chrome

the uce - lit-html comparison identifies SSR as a key feature of uce. Is there a SSR example somewhere?

Shouldn't style inject into the shadow, if attached, and selector could just be :host, and inject into the head like it does now otherwise.

Hi. It would be nice to have async methods that are ready to use before init, like other methods do for cleaner code. Thanks.

I am still just playing around with this, so far liking it very much. As a relatively inexperienced JS developer I just got bitten by the following (it took an hour until it dawned on me what was going on)

Consider the following:

define('my-app', {
    props: {
        foo: 42,
        bar: 23,
        items: []
    },

    // [...]

This worked just fine until I had the glorious idea of putting 2 instances of my-app into my html. The foo and bar properties were independent but the items array was shared between all instances.

I figured out this is because the array will be instantiated once during the call of define() already and then later a reference to it will be shared by all instances.

The only way around I have found is by creating it in the init() method. But should I then assign the array to this.props or only to this? Should i put an empty placeholder with the same name into props?

Or should I use props only for primitive types, because I also noticed it will not detect array manipulation via index or push, etc. and not trigger a render() anyway. My conclusion so far is I should not use props for any non-primitive types and live with that. Is this correct?

uce-template provides a helper for initializing custom elements from their initial content named slot:

https://github.com/WebReflection/uce-template/blob/bdf398340dbb9f60309663e131b2c011c2e5ddb4/esm/index.js#L77-L103

const queryHelper = (attr, arr) => element => {
  return [].reduce.call(
    element.querySelectorAll('[' + attr + ']'),
    (slot, node) => {
      let {parentNode} = node;
      do {
        if (parentNode === element) {
          const name = get(node, attr);
          slot[name] = arr ? [].concat(slot[name] || [], node) : node;
          break;
        }
        else if (/-/.test(parentNode.tagName) || get(parentNode, 'is'))
          break;
      } while (parentNode = parentNode.parentNode);
      return slot;
    },
    {}
  );
};


// preloaded imports
const virtualNameSpace = {
  define, render, html, svg, css,
  reactive: stateHandler({useState}),
  ref: queryHelper('ref', false),
  slot: queryHelper('slot', true)
};

Would you recommend replicating this helper for use with plain uce or using another method? (If the former, could slot be added to a future uce release?)

To use uce with TS, a types definition file would be useful. Would you be willing to add this?

Hi! A silly question: how to re-render a custom-element using props? Only with attributeChanged?

My attempt was that way:

And how to use the "props" attribute?

Pen for this: https://codepen.io/djalmajr/pen/qBZyeQO

Thanks in advance!

First, thanks for this fantastic minimalistic Custom Element library!

My question is: are you planning to support a similar functionality to React/Svelte Context, where you set a value on the Context in the parent element and the value is available in child components without explicitly passing it down?
The aim would be to easily integrate uce components with any kind of Redux style store implementation.