Specify the attribute to assign a value to Attr or Prop

[Himavanta]

I use CrankJS and Ionic to develop an H5 application. Ionic uses the WebComponent specification. I need to follow the official documentation to pass in certain properties as Prop instead of Attr. I checked the documentation of CrankJS and found no relevant content.

Here is the smallest display of the problem I am facing

I was wondering, if I didn't miss anything, whether there can be the following syntax for such a requirement to be handled clearly, just like the preact processing method, can it be considered? For now, I need it very much.

<div prop:demo1="demo1" attr:demo2="demo2"> test-div </div>

Preact support for prop: & attr: directives

[brainkim]

There is no way to specifically update element properties or attributes. Crank will try to choose the best option. You can see the code for updating props/attributes here:

https://github.com/bikeshaving/crank/blob/master/src/dom.ts#L79-L199

Typically Crank will try to update element properties before defaulting to using attributes, unless attributes is better. What is the specific problem you’re having with properties/attributes?

[Himavanta]

async function* App1() {
  customElements.define(
    "router-page",
    class extends HTMLElement {
      connectedCallback() {
        // console -> useHash undefined null undefined src
        console.log(
          "useHash",
          this.useHash,
          this.getAttribute("useHash"),
          this.src,
          this.getAttribute("src")
        );
      }
    }
  );

  let div;

  for await ({} of this) {
    yield (
      <div>
        <div src="src" useHashProp={false} ref={(el) => (div = el)}>
          div
        </div>
        <router-page src="src" useHash={false}>
          router-page
        </router-page>
      </div>
    );

    // console -> div undefined null undefined src
    console.log(
      "div",
      div.useHash,
      div.getAttribute("useHash"),
      div.src,
      div.getAttribute("src")
    );
  }
}

The running examples of the above content can be found here, and there is another part of the complete logic code for processing ion-route components here

For example, the useHash attribute of ino-router in this code seems to be neither bound to Prop. DocsLink

In development, I can only manually set this attribute to prop by creating ref and yield in for await ({} of this)

The same is true for the componentProps attribute of the ion-route component. DocsLink

This requires me to use native js syntax in jsx to insert dynamic ion-route components into the dom

I feel that the logic is a bit confusing. Can we consider this? I think it may not be so common to specify the location of the attribute binding, but once it is encountered, it will make developers feel painful. What do you think

[brainkim]

Assigning the useHash property should just work. In the example you provided, useHash isn’t set because it isn’t defined on the class:

class RouterPage extends HTMLElement {
  constructor() {
    this.useHash = true;
  }
}

When using the attribute, a false value calls removeAttribute for reasons.

[brainkim]

If you want to set an attribute to "false" you can use the string "false":

<my-el attr="false" />

[Himavanta]

My needs:
Explicitly bind useHash to Prop

Problems encountered:
The following two situations are not bound correctly

<ion-router useHash={false} />
<div useHash={false}>test</div>

My current treatment:
It is feasible to get Ref in the life cycle to set it manually

async function* App() {
  let router;
  let div;

  for await ({} of this) {
    yield (
      <>
        <ion-router ref={(el) => (router = el)} />
        <div ref={(el) => (div = el)}>test</div>
      </>
    );

    router.useHash = false;
    div.useHash = false;
  }
}

I think this is unreasonable. This is a common requirement in the use of WebComponent. The mainstream frameworks I understand seem to have relevant processing specifications, so I think it is possible to add functions to this in CrankJS. As for the specification, I recommend the PreactJS/SolidJS method.

VueJS v-bind :.prop / :.attr
PreactJS
SolidJS attr:*
SolidJS prop:*
SolidJS bool:*

[brainkim]

Right, what I’m saying is that independent of the prop/attr prefix, useHash should work. In the examples you provide, you put useHash on the ion-app element, and not the router, could that be causing the ion-router to still use hash routes ?

    <ion-app useHash={false}>
      <ion-router ref={(el) => (router = el)}>
        <ion-route></ion-route>
      </ion-router>
      <ion-router-outlet />
    </ion-app>

vs

    <ion-app>
      <ion-router useHash={false}>
        <ion-route></ion-route>
      </ion-router>
      <ion-router-outlet />
    </ion-app>

[Himavanta]

This is what I currently see after testing in the project

// If you write this way, hash-router is still used at runtime
<ion-router useHash={false} />


// If you write this way, you can correctly not use hash-router
<ion-router ref={(el) => (router = el)} />
router.useHash = false;

[brainkim]

Hmmm, I ran the example and the problem is that <ion-router> isn’t initialized the first time it’s rendered, so it appears as an HTMLUnknownElement or HTMLElement. That means the property useHash isn’t defined on the element object, and the presence of the property determines whether the prop is treated as a property or attribute. This is going to be a problem with all of Ionic custom elements insofar as they are lazily initialized. There are three workarounds I can think of:

1. Use a ref (what you’re doing already)
2. Use the provided attr instead: <ion-router use-hash="false">. Note that we pass the string "false" and not false to make sure the attribute appears.
3. Call customElements.whenDefined() to make sure the element is running:

   function* App() {
     const routes = ['/', '/page'];
   
     this.flush(async () => {
       await customElements.whenDefined('ion-router');
       this.refresh();
     });
     for ({} of this) {
       yield (
         <div>
           <ion-app>
             <ion-router useHash={false}>
               {
                 routes.map((route) => (
                   <ion-route url={route} component={route === "/" ? "home" : "page"} />
                 ))
               }
             </ion-router>
             <ion-router-outlet />
           </ion-app>
         </div>
       );
     }
   }
   

I suppose custom elements not being upgraded is a common problem and we can implement the prop: attr: prefixes.

[brainkim]

Implemented in 0.6.1