You will notice that the ArrayList class has an items property that is an array type. Lit won’t let you do something like <array-list items = ['Item 1', 'Item 2', 'Item 3']></array-list> but it is fine with you passing it in using javascript. That means that myList.items = ['Item 1', 'Item 2', 'Item 3']; does the job, fine.
Earlier this week, when I wrote about how to build an autocomplete using Vue.js, it was less about exploring how to do it and more about documenting recent work that used Vuetify. I wanted to use today’s post to go in the other direction. Recently, I discovered the value of using Lit when writing Web Components. I wanted to see if we could go from the HTML / CSS example to a proper web component.
First crack at it
Lit is powerful. You can do a lot with it. Let’s start with a rewrite of Tuesday’s final example to one that uses just Lit.
The first thing that we do in this is to import LitElement, html, css from a CDN. Our CountySelector class extends LitElement and then customElements.define('county-selector', CountySelector) at the bottom of the page is what turns our class into a tag. The static styles definition is how you style the tag. You will notice that there aren’t any styles outside of that. The markup is all defined in render() near the bottom. The async fetchCounties() method gets the list of counties from the data.jws.app site that I created last week.
This works but web components are supposed to be reusable and this isn’t reusable enough, though.
You will notice that the big difference between this version and the first one is that we dropped the API call and replaced it with a countyList property that defines the options. We can do better, though.
In this next version, we eliminate all explicit references to counties since a person might presumably want to use the component for something other than counties. You might want to use it to prompt a user for ice cream flavors or pizza toppings.
How do you use Vue with a web component?
Unfortunately, you aren’t going to be able to use something like v-model with a web component. There are other ways to bind to form inputs, though. Let’s take a look.
In the above example, optionsList and selectedOption are defined as Refs. The ref object is mutable (you can assign new values to .value) and it is reactive (any read operations to .value are tracked, and write operations will trigger associated effects). The options list can be passed into the web component using the :optionsList property. You might notice, though that the example is using .join(', ') to convert the array to a comma-delimited list. That is because you can not pass an array directly into a web component. That is likely going to be the subject of a future article. You might also notice that it is triggering the when you click on a suggestion and onBlur. The dispatchEvent() method sends an event to the object, invoking the affected event listeners in the appropriate order. That should trigger updateSelectedOption when you select a county or finish typing one that isn’t in the list.
So, what do you think? Do you have any questions? Feel free to drop a comment, below.
This example defines <blog-feed></blog-feed> with a json parameter. Lit has a <a href="https://lit.dev/docs/components/lifecycle/#connectedcallback">connectedCallback()</a> lifecycle hook that is invoked when a component is added to the document’s DOM. Using that, we are running this.fetchBlogFeed() which in turn running await fetch(). It is then using https://lit.dev/docs/components/rendering/ to render the list items.
For a hackathon this weekend, we built a small application in #Kotlin, #Javalin and #Lit that uses #Tensorflow to detect if you're about to upload something you might want to reconsider, and then allows stripping Exif metadata for privacy.
We also looked at distorting the image to make it unusable for training an #AI. In one day we could just garble the image beyond human recognition, but a better option would be integrating #Glaze to distort it for AI yet not for the human eye.
"I knowed his ma. They was good folks. He was full a hell, sure, like a good boy oughta be…He done a bad thing an’ they hurt ‘im, caught ‘im an’ hurt him so he was mad, an’ the nex’ bad thing he done was mad, an’ they hurt ‘im again. An’ purty soon he was mean-mad."
- J.S.,who really just wanted to be a fucking marine biologist, as evidenced in his conributions to Between the Pacific Tides, by his friend Ed Ricketts, yet much to his chagrin was relegated to authorship in depression era grit fiction, notable for his brutally honest naturalism, social commentary on extreme hardship, heartache, and subsequently immortalized in pen and celluloid.
Now you fucking know, bitches.
#tallship#lit#history#memoriam and #heroes, both celebrated and vilified; yet still one of my all time great inspirations as an artist. But just who was it he invoked that was so injuriously transfigured?
Can you haz #Cheezburgerz? 🍔 Can you? I doubt it. lemme know :p
We’re going to be doing a bit with the Wails project this year, so let’s start off nice and slow with a small project to get our feet wet before diving in head first.
Wails is a project that enables you to write desktop applications using Go and web technologies. It’s a lightweight and fast Electron alternative for Go, allowing you to build applications with the flexibility and power of Go, combined with a rich, modern frontend. Wails uses a purpose-built library for handling native elements such as Window, Menus, Dialogs, etc., so you can build good-looking, feature-rich desktop applications.
The amount of Go and JavaScript required is minimal, at first, and you can 100% get by with Kagi, Perplexity, or just some keen internet searches (and poking through the Drop history for Go and JavaScript resources). I’ll prove this with the app you’re going to modify.
Wails use of these technologies means you can (for the most part) turn any web app you make into something that you can distribute as an actual app to folks. While I’m more of a fan of native apps, this can save a ton of time and reduce cognitive load…something I think we’ll all need this year.
app.go contains the Go back end functions we’ll be exposing to the JavaScript front end
frontend/index.html is the entry point for the app
my-element.js is the Lit web component that handles the interactivity (we’ll be renaming this).
In the default app, Greet in app.go is called by my-element.js. Here’s what that function looks like:
func (a *App) Greet(name string) string { return fmt.Sprintf("Hello %s, It's show time!", name)}
The func (a *App) Greet(name string) string is a function signature the Wails dev tools looks for. It will automagically generate glue code for the JavaScript parts, and you can use complex function parameters and return values. This one takes in a string, surrounds it with some basic text, then returns it.
You should take some time to change what’s in the Sprintf, rename Greet (and use the new imported name in the my-element.js) and tweak what the render() returns in my-element.js before continuing. It might also be a good idea to read through the official walkthrough.
I added some printing in there so you can see messages appear in the terminal console while the app is running.
When you run wails dev the glue code is, again, automagically generated so the JavaScript side can call that function via:
async fetchOG() { let thisURL = this.shadowRoot.querySelector('input#url').value console.log("fetchOG") FetchOpenGraphTags(thisURL).then(result => { console.log('fetch opengraph tags:', result) this.tags = result; this.requestUpdate(); });}// I’m showing this here, but we’ll talk about it in the next WPEasync connectedCallback() { super.connectedCallback();}
The fetchOG function is called in render() when the button is pressed:
You can use Developer Tools from the running app to watch the console messages go by (very useful for debugging).
Your Mission
Your goal is to (a) successfully get this modified app running and (b) utilize more OG tag fields and display the entire set of OG tags in a much nicer way. Extra points for adding another Golang back end function that you need to call from the JS side.
FIN
Today’s WPE sets a solid foundation for future ones, and we’ll be having tons of fun with it as we layer in DuckDB, SQLite, WebR, Pyodide, and more over the coming weeks/months. Give a shout-out or reply to this post if you have any questions/issues.
The first Bonus Drop goes out this weekend to paid subscribers! (The refunds from the transition from Nazistack should be out soon…I keep checking on the status and will follow up next week if there’s a delay.)
Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️
I've just started learning #webComponents and oh my days there seems to be a lot of ways to boilerplate this. Should I just use #Lit? It looks like I'd need a bundler which seems overkill for my tiny #11ty site.
"in a way you can think of a lit element is like a computed effect of a signals although our system kinda works like a push system instead of signals that often have a pull system" ~ @justinfagnani
I wish I understood why #Lit insists on ducking around with decorators. It just seems like a little syntactic sugar to me. I wonder what their rationale for depending on them so much is.