Suggestions to improve components customization

[mathieumahe]

Hi,

First of all, thanks for the great work! I’ve tried several components and they work really well. It’s super easy to add the library in a Rails project and get it running.

I have a few ideas for customization that would be really helpful for my needs:

• ShareComponent: currently it can only share the current URL. It would be great if we could add custom parameters, or the url of an asset or something.
• SearchComponent: the “Search” placeholder cannot be translated, which makes it harder for multilingual apps. Or make the placeholder more precise (like "Search for a movie...").
• SearchComponent: it seems impossible to set a default value in the input. For example, in my app I have a list of countries — if I search for one, click on it, then go back, the search field is empty and I cannot pre-fill it.

I hope these suggestions help!
Thanks again for the great work

[joemasilotti]

Great suggestions! I just updated the Share Component in v0.9.1.

And great call on the two Search Components - I'll take a look at those next.

[joemasilotti]

Excellent!

Can you try hardcoding the placeholder via {placeholder: "test string"} and see if that works? It is working on my Android emulator.

And yes, JavaScript events definitely feel like the right approach. But all events would focus on those triggered from the bridge components, so nothing related to visiting pages or switching tabs.

The JavaScript package hasn't been updated because it hasn't been changed since 0.8.3. I'll cut a new "catch up" release when the library hits 1.0 if it is still behind.

[mathieumahe]

Even with the hardcoded string, it’s still not working. The code works fine on iOS, so I guess the issue is somewhere else. I’ll try to find some time this weekend to debug it — it’ll be easier that way. Time to learn a bit more Kotlin 😄

When I mentioned the “visiting pages” or “switching tabs” events, I was referring to the iOS/Android side. For example, I added a view in my Android app that increases the screen brightness of the phone when displaying a QR code (thanks to a BridgeComponent) and resets it when the user leaves the page. But it doesn’t work when the user switches tabs.

I was thinking about using your new Bridgework.observe to broadcast the tab change event across all the Kotlin code, but I think this could also be an event broadcasted by default by the hotwire-native libraries. I feel like it's quite common to need to know when the user switches tabs or pages.

I hope that makes sense!

[joemasilotti]

Even with the hardcoded string, it’s still not working. The code works fine on iOS, so I guess the issue is somewhere else. I’ll try to find some time this weekend to debug it — it’ll be easier that way. Time to learn a bit more Kotlin 😄

Odd! Especially if it is working on iOS. Try finding the SearchComponent.kt file and check to see if the placeholder is in there. Maybe you have something cached in Android Studio?

When I mentioned the “visiting pages” or “switching tabs” events, I was referring to the iOS/Android side. For example, I added a view in my Android app that increases the screen brightness of the phone when displaying a QR code (thanks to a BridgeComponent) and resets it when the user leaves the page. But it doesn’t work when the user switches tabs.

For the screen brightness component you could try overriding onStop(). I think that should be called when tabs are switched.

I was thinking about using your new Bridgework.observe to broadcast the tab change event across all the Kotlin code, but I think this could also be an event broadcasted by default by the hotwire-native libraries. I feel like it's quite common to need to know when the user switches tabs or pages.

Ah, gotcha! Yeah, I think there might be something there. Emitting and listening for events directly to/from the library could be quite powerful.

[mathieumahe]

Ok, I found the issue.

As we can see above, my MySearchBridgeController extends your SearchBridgeController, and I call super.connect(), so the JS sends two "connect" events. The first one is without the placeholder (by the way, this is something that changed in the JS since 0.8.3 that hasn’t been released yet 😄), and the second one is with the correct placeholder. And only the first call is used to create the Android search bar (which makes sense) so the placeholder was not displayed.

Now, I’m only extending BridgeComponent and it works as expected!

Thanks again for the new features 🙂

[joemasilotti]

Ah! That makes sense. Even if it is a little confusing. :D