Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 18 08:51
    smalluban closed #205
  • Jan 05 11:41
    smalluban labeled #205
  • Jan 04 18:13
    rubixibuc edited #205
  • Jan 04 18:12
    rubixibuc edited #205
  • Jan 04 16:28
    rubixibuc edited #205
  • Jan 04 16:28
    rubixibuc edited #205
  • Jan 04 16:25
    rubixibuc opened #205
  • Nov 17 2022 16:39
    smalluban closed #204
  • Nov 17 2022 16:33
    smalluban synchronize #204
  • Nov 17 2022 16:33
    smalluban synchronize #204
  • Nov 17 2022 16:31
    smalluban edited #204
  • Nov 17 2022 16:31
    smalluban synchronize #204
  • Nov 17 2022 16:31
    smalluban synchronize #204
  • Nov 17 2022 16:28
    smalluban opened #204
  • Nov 17 2022 13:50
    smalluban labeled #202
  • Nov 17 2022 13:50
    smalluban labeled #202
  • Nov 17 2022 12:14
    smalluban closed #203
  • Nov 17 2022 11:44
    Hyzual closed #202
  • Nov 17 2022 10:26
    smalluban synchronize #203
  • Nov 17 2022 10:10
    smalluban synchronize #203
Dominik Lubański
@smalluban
And it follows behavior of some of the built-in elements, as I wrote about <input>
Changing value attribute does not change the element value. It is only used once, when the element is created.
i18u
@iahu
ok, i got your concept
Dominik Lubański
@smalluban
However, especially for the styling purposes, lately I introduced back sync with the attribute when you change property value, so you can create selectors like this safely: :host([disabled]) {}
It works for selected types.
i18u
@iahu
so, all custom-element attributes are map to element-element properties, and can only accessed by property index way, right ?
and, i found anther issue, i set round="false" on my custom-button, but render out to round
Dominik Lubański
@smalluban
You should follow boolean type of attributes in HTML5
false -> no attribute, true -> any value
Inside of the template you can pass false or true, as it is controlled by the engine, and it removes or set attribute if needed.
It's everything explained in the docs, please read property factory section, especially here: https://hybrids.js.org/#/core-features/property?id=booleans
i18u
@iahu
ok, thanks, i just follow your doc to learning
Dominik Lubański
@smalluban
:)
i18u
@iahu
hi @smalluban, i found that HTML autofocus attribute seems not work
i18u
@iahu
and there is no way to set focus in render scope.
if (autofocus) {
    host.querySelector('button')?.focus({ preventScroll: true }) // button is null
}
Dominik Lubański
@smalluban
It works (at least on Chrome) - https://qt6xh.csb.app/ - I've changed codesandbox used before (https://codesandbox.io/s/custom-button-in-hybrids-qt6xh?file=/index.html)
when it's a static value... The dynamic value passed from the parent (custom-button) will not work, as it must be set when a button is created, but the template engine will set that value after that.
However, you can do it programmatically, as you wanted, but in a little bit different way:
const CustomButton = {
  autofocus: {
    ...property(false),
    observe(host, value) {
      if (value) {
        const button = host.render().querySelector("button");
        button.focus();
       }
    },
  },
  render: () => ...,
};
Dominik Lubański
@smalluban
By default render factory uses Shadow DOM, so your host.querySelector() can't find a button (it is not a children of custom-button element).
Austin Martin
@auzmartist
@smalluban - congrats on the 7.0.0 release! I'm already upgrading
Dominik Lubański
@smalluban
Thanks! Let me know if you have any issues with the upgrade, or some instructions are missing in the docs.
FreeVariable
@setunset:matrix.org
[m]
Hello, recently found out about Hybdrids -- kudos,this is an amazing approach! Very fond of the minimal and functional style it exhibits.
FreeVariable
@setunset:matrix.org
[m]

I am not really a front-end person so perhaps this question will sound silly but: why does html renders HTML template literals just fine when applied directly to a string, but renders HTML as plain text when the same string is passed from a property? Like when I do:

...
my_data: "<p>Hello Hybrids</p>"
render: ({ my_data }) => html `${my_data}`

it renders my_data as a plain string, when I would expect it renders it just fine, as when:

...
render: ({ my_data }) => html `<p>Hello Hybrids</p>`

?

FreeVariable
@setunset:matrix.org
[m]
Ah nvm I need to set/get the string withhtml
Doh.
Dominik Lubański
@smalluban
Hi @setunset:matrix.org . Welcome on the hybrids gitter. As I can see, you already answered your own question. If you need more help, feel free to text it here!
FreeVariable
@setunset:matrix.org
[m]
Thank you very much!
FreeVariable
@setunset:matrix.org
[m]
I don't get why multiple children are seen as just a single item (the first). The code below just prints "Getting contents for this id: summary".
import { children, define, html } from "hybrids";

const Tab = define({
    tag: "my-tab",
    id: "",
    showId: ({ id }) => `Getting contents for this id: ${id}`,
})

define({
    tag: "my-tabs",
    tabs: children(Tab),
    render: ({ tabs }) => html `${tabs.map(t => t.showId)}`
});
<my-tabs>
    <my-tab id="summary"></tab>
    <my-tab id="tasks"></tab>
    <my-tab id="payments"></tab>
    <my-tab id="events"></tab>
</my-tabs>
I must be missing the obvious...
FreeVariable
@setunset:matrix.org
[m]
Sorry I guess it's another self-answered question: my browser was not rendering codesandbox properly. I hope my third question will repay for the time I made you lose reading :P
Dominik Lubański
@smalluban
It is not recommended to overwrite the built-in properties, the id is one of them. If you need to observe the value, create for example "name".
1 reply
FreeVariable
@setunset:matrix.org
[m]
Another thing. If I define component B as a child of component A, is there a built-in method I can use to reference a property of A from inside the definition of B, for example in a computed property of B that would depend on the value of the A's property?
Adding the converse relation (parent(A)) inside component B does not compile of course.
I'd like to avoid using document.getElementsByTagName...
FreeVariable
@setunset:matrix.org
[m]
:point_up: Edit: Another thing. If I define a property of A using children(B), is there a built-in method I can use to reference a property of A from inside the definition of B, for example in a computed property of B that would depend on the value of the A's property (not the same one, of course)?
:point_up: Edit: Using parent(A) inside component B does not compile of course.
:point_up: Edit: Using parent(A) inside component B does not work because it cannot be satisfied together with children(B) in A.
Dominik Lubański
@smalluban
I am not sure what you mean that it does not compile. If you define your both A and B components inside of one ES module, everything will work. The parent and children should be used for building complex UI structures (like tabs from your example), so then the components are strictly related and they can be defined inside of one file. if you need pass some data from one component to another, I suggest to use store model.
10 replies
setunset
@setunset:matrix.org
[m]

There are 2 issues, and I am not sure how to move forward.

  1. "An element with root router already connected to the document: \<my-app>" Probably trivial to solve, no idea though.
  2. The app's structure goes like:
<my-app>
    <my-account></my-account>
    <my-admin>
      <my-checkout></my-checkout>
      <my-tabs>
        <my-tab id="summary"></my-tab>
        <my-tab id="tasks"></my-tab>
        <my-tab id="users"></my-tab>
        <my-tab id="events"> </my-tab>
      </my-tabs>
    </my-admin>
</my-app>

'my-account' and 'my-admin' are two routes, with a router allowing to switch from the one to the other. Works. However, for a reason I don't understand, the 'my-tab' elements appear to be written over / destroyed when switching to the route that hosts them (the 'my-admin' route).

Not sure how to fix this and to have the routes and the tabs under the second route work together.
Dominik Lubański
@smalluban
Generally, you should not put your views inside by yourself. It is a router job to render current stack (view and optional dialogs) by putting the main router property into your template. It is best to think first what views your application needs. From your example above, I can see that you have "my-account" and "my-admin" pages, but the second has a multiple tabs - sections. Those you can implement in two ways. You can create a admin layout element, which has links to tabs and empty slot for the content, and create a saparate view for each tab, and use that element to highlight current section, so if you switch the view, the next view will re-render the container with correct section highlighted. Another way is to use nested router factory, and in "my-admin" view create this container thing, and put there nested views.
Dominik Lubański
@smalluban
About the problem with already connected router, I will check it out, but it must be a codesandbox HMR bug (or how it works). I recommend to use Vite or similar bundler locally, the HMR should work without any issue.
1 reply
setunset
@setunset:matrix.org
[m]
@smalluban: That's actually very kind of you thanks a lot!
I see you went with a nested router structure. That's cool. Is the structure I was trying to use hopeless for my purpose? I think I might be missing something fundamental in my understanding of Hybrids, because the structure I was going for seemed to be possible.
2 replies
FreeVariable
@setunset:matrix.org
[m]
👍👍
Thanks for the explanations!
setunset
@setunset:matrix.org
[m]
I am glad that -- thanks to your generous help -- I was able to finish up migrating our in-house app to hybrids. Do you by any chance have resources on deploying hybrids in a webpack-powered project? If not I will see how I can glue this together and make a PR targeting the hybrids docs.
1 reply
FreeVariable
@setunset:matrix.org
[m]
Nevermind, I wasn't sure whether Hybrids could be webpacked as is but it can no problem!
Austin Martin
@auzmartist

Hey @smalluban - any thoughts on supporting Hybrids in custom-elements-manifest with an analyzer plugin?
https://github.com/open-wc/custom-elements-manifest

I am advocating using Hybrids more broadly in my workplace but am fighting a slight uphill battle with the broad tooling ecosystem of other libraries.

Dominik Lubański
@smalluban
Hi there! It would be great, but it won't be trival, even though the declarative nature of hybrids components might help. If you use TS, I think it is possible to declare the custom element name and connect the interface, so some plugins for VS Code reads them, and then in html templates they provide hints about props etc.
However, if you have some time, please create an issue in the repository, I will put it on my todo list ;)