Declarative UIs in Emacs with vui.el - System Crafters Live!

What's up everybody? Welcome to System Crafters Live. I'm David Wilson and we're back again with another live stream where I break everything right before the beginning of the stream. Uh, as it always is, especially at the last minute because it's what, uh, 15 minutes late for a 15 minute late stream. Yes, alternate V was right. The bot crashed and you know why? [clears throat] Because I integrated Sigil audio into the uh stream overlay and uh for some reason like I made some changes to the code and apparently I broke the Livecfter uh back end. So now when I press play it crashes the stream overlay. Luckily it doesn't crash the stream though. So, uh, the stream is still up, but then the audio goes away because of a dict filter function that's been moved somewhere else. I could try to fix that right now, but I'm not going to bore you with that. Uh, I'm just going to keep going because the chat's working. As you can see, we just saw Dave wave in the chat. Hey Dave, nice to see you. But, uh, not hi to Alternate V because Alternate V's just been giving me grief, uh, and taunting me the entire time. And that's not nice, you know, because I'm I'm trying really hard here to be on time 30 minutes late. Yeah, I know it's I know it's dead. Alternate bed. Obviously, it's dead. Now, I got to see if I can get MPV to run with the old uh Emacs code to see if I can get the audio up. Just give me a minute. All right. I know you all want to hear the same four tracks over and over and over again, just like the old days. Let me see if I can find it, though. All right. So, projects code How about that? [music] There you go. You're quitting what? What are you going to quit? You're going to quit coming to the streams. You're going to quit coming to the channel. You know that you can't get entertainment like this anywhere else. You can't get entertainment like this anywhere else. This is not foot term Trev. This is graphical Emacs. I think this is graphical Emacs, so don't get your hopes up. Okay, so where was I after I was being harassed as usual for being uh late on time? Yes, much better with background music. Yeah, I I can't stream without sound in the background now because it feels really strange to me. I feel like I'm talking to myself. At least if I have the music playing, I feel like I'm in the right headsp space to do this. Otherwise, it just gets really awkward. It feels like I'm talking to people um in front of a camera on the internet when there's no music playing in my headphones, which sounds insane thing to say because it's exactly what I'm doing. Late on time. That's right, Cal. Harassment. Yes, Leftpad. You're not the only one doing the harassing here. All right, so hello to Trev Cow 2001, alternate V. Uh, Techno, uh, Arno, Infreak, [music] uh, Rob, I saw Peter in there somewhere before, but I think I lost the back buffer of the chat. Uh, Leftpad, Ashraz, uh, let's see, who else am I missing here? Dave, I already said hello to Dave. Trev says, "Claude is talking in his headphones. He's just repeating. I wish it was so easy." Hello to Darshock. Uh, is anybody speaking on the uh YouTube or Twitch side? Because I have the stream chat stuff hooked up. Apparently not because uh from Sasha and straight in assistant crafters Emacs Friday says Chester Caster. Hello to RD. I didn't see that on the YouTube side. It's not coming through apparently. Hey Antarus, all kinds of problems here. Hey, Lord. Lord Devy as Copy's doing the job. Even though the It's not dead, is it? It's still running, dude. You see it? It's in the chat. It's there. Okay, I see it. I can see the program over here still running. The only time it crashes is when I try to play music right now. That's because I stupidly changed the library that a specific function comes out of, and I haven't updated this code yet. So, that's my mistake. Hello to Omniv. Try not to burn my tongue again this time. All right. So, um I'll try not to uh waste a lot of time here. Hey, Gun. Thanks. Uh thanks, Dave. I'm going to get that one first. Um I'll try not to waste too much time here. What's been happening? Oh, I I've had a 2 and 1 half-year-old home sick for like six, seven days from school. That's been fun. Now I'm sick because obviously if your kids bring home viruses from school, you're more than likely going to get them. So, that's the world we're living in right now. This is the post holiday funk where you get all the weird viruses uh and bacterium and all the things that you don't really want to have in your house. But it's what happens, you know. You got to send your kids to school so they can learn something. But then at the same time, they bring you home gifts like viruses and it's uh it's wonderful. So if you've never experienced that before, um be thankful, but probably one day you might experience it. So just just be warned. This is what happens. Morgan says, "Also in terms of news, summer EMAC confirmed alive and well." I guess Summer Emmex just likes to blow into the chat uh into the IRC some days and just like uh I don't want to say harass everybody, but just sort of like just ping a bunch of people and just cause a bunch of noise and then disappear again because she's off on some uh CIA mission. Trev says, "My wife said that you aren't sick if you can use the computer." Um I'd like to counter that statement with uh I'm going to use the computer anyway. It doesn't matter because I'm an addict addicted person. Like I this is where I feel comfortable sitting right here in this chair in front of these screens uh dealing with the stupid software choices that I've made. And this Oh, I didn't I didn't say that left pad. Um anyway, back to the point. Even if I'm sick, I'm going to be sitting at the computer because that's where I'm supposed to be, right? We're all here because we're the type of people who are supposed to be sitting in front of the computer for better or for worse. So, it's going to happen. All right. He says, "Emac is a smart choice." Uh, yeah, it is a smart choice. Yes. Peter says, "Your wife confuses sickness with death." [laughter] Exactly. If I'm dead, I probably won't be in front of the computer, but if I'm sick, I'm still going to be here. Ashra says, "I usually just stay in bed when I'm sick." Well, Ashraz, this is because you are one of the more uh conscientious and responsible people that shows up in this community. I am not one of those, okay? I'm not conscientious and responsible when it comes to things like that. Preaching. Come on now. Let's not go that far. Let's not go that far. All right? I'm not saying that people should do anything other than be on the computer when you're sick. Okay? Being sick is a consequence of my other choices. Now, I'm going to be on the computer anyway. We're changing to the Prime chat. How's that? It's not anything like that. Okay. [music] I don't know because I don't watch Prime that much. already says, "I'm never well. Always between sick and not sure of full health." Well, I guess that could be said for anyone. Let's see. All right. Oh, yeah. Alternate vet, thanks for bringing that up. PL said, "Mention those VC changes. We need to look at that, but I don't know how much time we're going to have to look at that." Not classy enough for what? Left pad. Trev says, "Should we leave and go watch this stream instead?" Do it. Go for it. All right, let's see. Uh, let me get the stream notes short start started up here. systemcrafters.net. Uh, find directory live streams. Streams streams. There they are. And then this is January, right? So, we were on January 9th the last time. And as I always do, I'm going to copy and paste. I'm going to copy and paste. Uh, Infree says, "Show us the new guey using Sigil." Can't really do it right now. Oh, I guess I can. Let me see. Let me make sure I don't have like my uh my bank accounts on the screen or anything before I do this. Is this going to work? Give me one second so you can see what I see. Where is screen capture? Watch this crash stream. Yeah, there you go. And boom. Look at that. That's the That's the the UI. Okay. Sigil isn't real, right? It's a meme. Well, it's real enough. See that? This This is the chat that I'm looking at right now. Got that? That's That's sigil web UI and it actually works. Alternative. I found it on this site sexed.com. Yeah, you put it there, buddy. It's not a meme language. It's a real language, but I don't re necessarily recommend people use it. All right, bye-bye. So, Lebad says, "Who in their right mind would program in a language that's called after oxidized rust, oxidized iron?" I don't know. I don't really want to program in that language though, regardless of the name, just because uh it seems like it makes me do a lot of work and I'm kind of lazy as if you haven't noticed. Rather just program and scheme. Okay, anyway, back to trying to make the show notes. I need to make this text bigger, too. Where the hell? There it is. Okay, so this is January what? 23rd. 23rd, 2023. 2023. Boy, I know exactly what year it is. What's a brain disease using Emacs? Declarative UIs in EMAC with uh voy.el. L and today is what? The 23rd. I don't know what day it is anymore. They all just blend together for me at this point. Okay, newses. Um, we're just going to get rid of these. There's a couple things geeks uh 1.5.0 is uh has been released. And then um check out new VC mode changes in Emac 31. I I haven't fully understood what the changes are yet. [music] I looked at the link that PCAL sent, but I didn't really understand. Escopy says, "Vos, I expect a pay raise. Your damn bot isn't reliable." So 60% sound. What? Uh, yes. For some reason, the reream chat API is not working now. It was working before it crashed the last time, but now it doesn't work. I do not advise that necessarily. You don't want to know my real opinion on that. So, get I keep hitting the wrong key binding to get back to the other screen. There we go. Very, very good. Okay. So, let's check out voy.el. So, emac voy.el. Let me just grab a link to that real quick. So, first of all, want to talk about uh Geeks 1.5.0. Uh this just got announced like left pad. This just got announced like what 2 hours ago, 1 hour ago. Yeah, it's the 23rd. Uh so, Geeks 1.5 is now out. Um has been 3 years since the previous release. Uh I know that because the last video that I made about installing Geeks used 1.4, before, I'm pretty sure, if I'm not mistaken. So, it's been a while. Um, [music] and if you know anything about Geeks, you know that it's like a a rolling release DRO where you're whenever you use Geeks Pull, you get the latest stuff that's in the master branch or the main branch of the the Geeks channel. But there is a staging branch that's being worked on uh on the side with a lot of updates to um kind of really wide ranging libraries like GTK or like the the Gnome interface and other things that would be difficult to update piece by piece. So larger releases like Geeks 1.5 are usually different than what you had been seeing previously with the individual commits that go into the the main Geeks channel. So, you may be thinking, "Oh, well, I already have all the stuff that's in Geeks 5.5." You probably don't. There's probably things in there that you don't have. So, if you haven't upgraded yet to Geeks 1.5, which you probably haven't cuz it just came out and I haven't either cuz I didn't want to do it before the stream and delay things even further because I already did delay it another 30 minutes, whatever. Um, you should check it out and see what's in there cuz I haven't actually checked it out yet. So that's a lot of time reflecting both the fact that as a rolling release user continuously to get new features and update by running geeks pull a lack of processes something we need to we had to address before another release could be made. Sure that makes sense. Uh Peter says isn't that more in the team branches? I don't know how much they use those. That's a really nice graphic by the way. Uh Luis Felipe Luis Felipe makes really good graphics for geeks. So adopted with uni unanimity unanimity consensus based decision-making process. Cool. Uh clear framework for any contributor to propose and implement important changes. So it's basically an RFC protocol I guess. Uh and it's called geeks consensus documents. Okay. [clears throat] They also migrated the codeberg which you know about release process. A planet website for geeks is now available. Is systemcrafters.net net on there. That's what we got to know. I see Dave on there. Okay, good. System crap is on there. Thank you, whoever put this together and and considered me. I think I know who did it. So, who else is on here? Jay Fred's on here. Yakamo, Futurisle, Fabio, Akites, Chris Baines, Aroon, Andrew. Yeah, of course. KD plasma login manager requires system D now. So most likely geeks won't get it. Um yeah, it could not. It could be that it won't work, but somebody could hack it to make it work. I mean, what does it really need? Cuz system D, they they pulled e-lod out of systemd for geeks. Probably for other dros, too. Maybe Gen 2 uses it. Anyway, point is the core stuff that's needed from systemd probably would work for KDE unless they really do need systemd. Oscar says, "Hm, there's a warning sign on Firefox hamburger menu. Seems like an extension needs new permissions." Probably. I don't care. It could stay that way. So, um, to start, KD Plasma 6.5 is now available. Okay. Uh, Gnome has been updated from 42 to 46 and now uses Whin by default. That's a big deal. Uh, Geek Systems using version 1.0 Shepard. Uh, 40 new system services, including a 4j runner, which is kind of cool. If you want to run a forio instance, you can have a runner also. Um, let's see what else. Yeah, we saw that one before. Set UID programs has been replaced with privilege programs. Uh, we introduced uh cooperation using teams. 50 teams distributing many aspects of uh many aspects of the distribution. Distributing the many aspects of the distribution. Okay. We have per language teams like Python, Rust and Zigg. Uh electronics team, science team, Rust team. Cool. Full full source bootstraps of Zig and Monocompiler is now available. That's cool. And the existing bootstrap of geeks has been reduced once again. All right. Great. Improved CLI. Geek shell containers have been uh improved with a nesting option. Yeah, I think I've used that before. Geeks locate commands now available to find which package provide a given file. That's been there for like two years though, I think. Like some of these things are um pretty old, but they're being mentioned because between 1.40 1.4.0 to 1.4.5 there's been a lot of changes. It's just that most of us have seen them already if you've been using Geeks dayto-day. Okay, what else? Widen architecture support fundraising campaign acknowledgements. Cool, cool, cool. All right, so anyway, if you're a Geeks user, go and Geeks pull. I'm not going to do it right now because I don't want to break the stream obviously any more than I've already done it. Uh, but yes, congratulations to all the Geeks contributors and and the uh um maintainer team to for releasing Geeks 1.5. Uh, obviously it's my favorite Dro. I'm using it right now and I'm, [music] you know, regularly breaking my system with it. So, kudos to everyone. Hello, Elephant Erggo. Excited about Planet Geeks. Yes, Planet Geeks is cool. All right. And yes, we mentioned Sigil before. I've released a couple updates to Sigil. It did not die. Alternate V, give me a break, buddy. It's just uh stopped for a moment because it's it's switching tracks. I'm pretty sure is still running. Give it a second. It'll be there in a moment. Anyway, Sigil development continues. Um, there have been some new developments on that front. Use sigil.orgrees if you want to see sort of what I'm talking about there. Uh, I've got 1.5 sort of halfway ready at this point. Sure. Listen. That's music, right? So, I've got more things happening, but I got sidetracked this week with, you know, sick kids and having to uh deal with a lot of stuff at my job. So, uh things slow down a little bit, but you know, we had a lot of progress recently. I don't want to talk about all that right now, but if you want to check it out, go look at the releases page and download the latest version and let me know if you run into any issues if you actually, you know, uh if you care to use it. Ultimate V says uh let's see we need Ashra says you need a win amp like equalizer on stream in the bottom bar. Ultimate V says so we have a have proof that music is still running. Who cares? Who cares if the music is running aside from me because I have to listen to it to not go crazy. All right. So let's check out voy.el. So uh how many of you love ReactJS? Have you used ReactJS? Do you love ReactJS? I can't say that I love ReactJS. It's interesting, but I think it's also has a tendency to be overly complex and um it does serve as a more or less functional UI paradigm. And I mean functional in the actual functional programming sense and not just it it functions. Uh, but it's cool, you know, but it actually actually is a little bit complicated and the um the patterns that you have to use are a little mystifying if you've been used to writing UI in other toolkits and platforms in the past. We're not really going to get into ReactJS itself, but uh the point is that there is now a library for Emacs called VUI or VUO I guess. uh which gives a react like componentdriven UI experience in Emacs. It doesn't mean that there's like you know graphical UIs and buttons and stuff like you would see in a normal desktop application but it is using a built-in library called widgets.l in Emacs which probably is being used in various other places like package.el package listings etc. [music] um to provide UI elements inside of Emacs. So uh effectively uh you can have something like a ReactJSbased UI, a functional UI in Emacs using this library. Now I will go ahead and say I have literally never used this thing other than just looking at this main readme page and just seeing a couple of examples. So we're all going to be figuring it out together today. Uh also this library has existed for about 2 months it seems because the get ignore file is from uh two months ago. It says chore initial LDEV project setup. So it's not very old. Um and as you can see our friend Claude is in the contributors list here. So I have a feeling that uh this [music] is rapidly developed using AI assistance which I'm not complaining about cuz I mean who am I to complain? I just wrote a whole freaking scheme implementation using Claude over the last few months. But just so you know it's been written with that. If it matters to you, then you think what you want, decide what you want about whether you should try this out. But since multiple people, including Morgan and alternate V in the IRC, recommended me to look at this and a related package, I figured why not take a look at it because it sounds interesting. I mean, why not look at a UI development library inside of Emacs and uh see how little progress we can make in the one hour that remains in the stream, right? Uh Peter says React accreted too much stuff during its lifetime. So if you have been watching React and this is not a React stream uh alternate v this is not a reaction stream where we react to things. We're going to be reacting to a react like library and writing some React code and reacting to what the React like code looks like in reaction to the changes we make to the state. you know, the components will react to the state changes and then we will react to what we see in the screen with this react like library. Uh, but this is not really a react stream. Okay, are we clear on that? Did did that make sense? Anyway, uh, Claude whispers, "Sweet, sweet nothings into your ears." Claude would have to tell me to say all those words that I just said because there's no way I could have just come up with that off the top of my head, right? Okay, where was I? I completely lost it. React is cool for a demo page, says Rob. Once it's on the real world web, it it is uh so complex that you lose which use effect broke what? Yes, exactly. Okay, that's where I was. So, uh Peter says React created so much stuff during its lifetime. Have you actually have you followed React since the beginning? They've changed patterns like five or six times and every time it was like this big announcement about here's the new way forward. It's almost like a Apple product announcements, you know? Uh, usually it's the kind of thing where you have like the hype machine of some technology where people are just like this is the new thing and it's like a religious event almost. Maybe I'm going a little bit too far in that. Cal has a very flat reaction to everything. Yes, you should. You should. Okay. Yes, Peter. Exactly. It's just like they they keep changing and changing. It's not changing so much now, I think, but it did go through quite a lot of changes in the past. Anyway, so let's take a look at the uh repo here just to get a little bit of a glimpse of what's in here. Declarative component-based UI framework for Emacs. Build reactive UIs in Emacs using familiar patterns from React and other modern UI frameworks. Define components with local state props life cycle hooks and automatic rerendering. So uh components, reusable UI building blocks, reactive state hooks. Uh yeah, we have use effect in Emacs now. Hooray. And use ref. Hooray. Great. Context. Share data across component trees without prop drilling. Is that illegal? I thought that prop drilling was illegal in many states because you're not supposed to be drilling under like the water table. Never mind. We're not reacting today. That's right. Stop reacting to React. Just stick to web components. It's already a W3C standard. Who uses standards? Don't we all just use the things that corporations give to us? Standards are not a part of this. You know, we have to have somebody to tell us what to use. And the only person who can do that or the only entity that can do that is a corporation, right? Anyway, sorry. Layout primitives, hstack, vstack, box, table, list, error boundaries, developer tools. Well, this is kind of a developer tool, right? Component inspector, timing profiler, debug, logging. Yeah, [music] in two months. Anyway, here's a quick example. We're requiring the voy library. We're defining a component using a macro voy def component counter. We have a state uh keyword. I guess we could say a starting state. And this looks like an al-ist, but it's probably not as much like an alist because there's no dot there. So, it's just a sublist with a key value pair. Uh, render. And I guess this is just an XML like thing. It's a component tree effectively. It's a fragment text new line and button. All right. And then there's an onclick handler with a lambda voy set state count uh one plus count. So is the value of count bound in the context of the function the render function? It must be. Maybe we'll macroexpand that see um uh maybe we'll uh macro expand it to see what it actually turns into. Alternate event says, "I love a quick example of a UI library without screenshots." Well, Claude can't do that, can he? Result, a buffer with text. Claude is explaining to us that it's a result, a buffer with text, count zero, and a clickable button. I can really imagine that, you know, like I'm inspired by the image that's in my head right now of this button that in increases a count. Uh, more examples, props and composition. I mean, it's good that we have examples, right? Altervest says, I guess Claude can't generate that. It will definitely generate you some asky uh mockups, that's for sure. I mean, it should be able to like launch Emacs and then run the code and take a screenshot, but you know, maybe we're asking too much at this point. Leftpad says, "Typical Emacs UI package code examples. Not a single frigin screenshot." Yep, that's the way it goes. All right, so [clears throat] it's a state management looks like. Is a state management looks ike. All right. Curses in PN. Yeah, we're definitely going to be cursing uh in the middle of PNS. Ashra says, "Compare that to GPTEL, which has lots of videos included." That's because Caric made it. And Caric makes really nice videos and demonstrations. So, [music] of course, he's going to have videos in his readme. There are many. Alter says, "Claude got people for that like David will." Yeah, I I'm just uh the uh the hands for the bot now, I guess. Right. I I just do what it says. Okay. Getting started. Are there actual full documentation pages? A wine tasting app. Okay. Actually, I know that the guy who made this has a like a wine tasting company, so that makes sense that he would have a wine tasting thing. File browser. There's a conversation to be had. Is this video sponsored by Claude? Why not? Uh, yeah. Yeah, that's not going to happen. There's a conversation to be had about how fast AI can produce libraries for for Emacs. I'm not going to go into that right now, but there's there's a conversation to be had there. It it's the implications are a little bit interesting and weird and maybe depressing in a way. It's not a claw stream. We're just complaining about Claude. Okay, it's not Cloud Stream. You don't see me using Claude, do you? You won't see me using Claude. I'm going to actually code this by hand, or at least copy and paste the examples by hand. And uh we're going to go with that. Uh, all right. So, anyway, file browser, dev component, breadcrumb, hstack text. I like the fact that there are examples here, so at least I'll be able to uh bang my head the way through it and figure something out. Where is my cursor now? Alternate says uh Ralph Wigum method. Yes, that is something that people do. Stupid keyboard. Wake up. There it is. Uh Rob says, "In my experience, chat GPT or cursor is pretty bad with Elisp or Gio scheme. It makes up things very frequently." Yes. Um it does. That's for sure. Even makes up things for sigil, too. But this is why I made an MCP server that gives it more information so that it makes up less things and actually gets it right. And also having it write code from inside of your original repository helps a lot too. Ashra says it's depressing and we're not going into that. Basically summarizes the current experience in soft software development field. Kind of does. Why is my keyboard no longer working? Come on, wake up. There it is. Okay. So, let's just uh try it out here. Uh this is maybe on Melpa. But maybe we can just pull it using um VC. Does it say Melpa somewhere? Melpa. Do I have Mela? I don't think I have Melpa in this config because I don't really use Mela anymore. Do I have Melpa in this config? Let's see.files emac.org. Melpa. Melpa. No. No. Melpa. Uh, Elpa. Ela. Ela. I don't have unit Elpa configuration here. Don't need it. Let's just use package VC. So, colon VC. VC. There's one. Let me just steal this little snippet. And I'm going to go over to the scratch buffer and paste that right there. Get out of here. All right. We'll straighten that up a little bit. Let me increase the size of the text, too. Default text scale increase. That's better, right? Okay. So, I'm going to pull. Is that right? And what ref are we using here? Do they have releases? Okay. 1.0. Cool. So, we got uh V1.0. That's the ref we're going to pull. I'm going to drop this in. Get [music] out of here. Right here. All right. So, now while to save. I keep hitting control S because that's just [music] the way things go here. Will you clone it for me? Thank you. Clone. Pull it. Error. cannot load. Open load file Buttercup. Okay, it's using Buttercup for testing. Uh, okay. So, package refresh. Package install. Buttercup. There you go. How about that? Uh, voy. Okay, there seems to be some voy things here. Let me just copy and paste this thing right over to the uh January org file. Let's do a little red thing here. Ret. Okay. Set up a llama. No. Why would I set up a llama just to install a package, dude? There ain't no way. Leftpad says, "You're going to take an AI generated Emacs package and run it unchecked on your machine." I've done worse than that, buddy. I've done way worse than that. Leftpad says, "We should have an IRC interface at all QMK ZMK firmware. Twitch plays David Will." Well, you definitely I could do that in the stream, which would be terrible. Hey, Andre. Andre says, "How is Greece in?" Ooh, sorry. [music] For a second, my screen went off and I thought that I forgot to plug in my laptop as usual. Uh, in Sweden, it's neg5 in snow. Well, it's not ne5 here. It's probably about uh somewhere 12. Altered, be quiet, dude. It is not dead. All right. Anyway, so back to the the uh the code. We're going to open up a little buffer here and uh let's just see how this works. Okay, I don't know exactly where the UI goes whenever you make some voy mount. Let's just take this example and run it. Lead says, "That was funny for a bit." It still is. It still It is, but it already was. It sounds too philosophical for me. Lead. All right. I'm going to define a component called counter. Then I'm going to execute the mount thing. Okay. So, it did what it said it would do. It made a counter UI. I click increment and uh error symbols value as variable is void. Count. Why? I'll bet you money is because I did it inside this buffer and lexical binding is not turned on. So maybe we need to put this in an actual file. Uh revert revert changes. Sure, I don't care. Let's go to um UI voy test.el because why not? Eval buffer. Now I'm going to click on it. Okay, it does work sort of. I clicked it once and it stopped incrementing. Is because I clicked it at a different location. What if I press enter? Okay. Okay. We're we're we're incrementing counter now. You see the counter being incremented. 10 subs to remap meta to uh [music] RM RF. No thank you. This is geek. It's not going to work anyway. Morgan says you should take online donations for where every $50 one of your keys gets remapped. Um, maybe one day we'll [music] try that cuz that would be pretty funny, I think. And uh, also not very lucrative because why would anybody want to do that more than once? Okay, so this example does work thankfully. Claude wrote code that works. Yes, it actually works. Uh, I'm shaking my head right now in disbelief. So, props and composition def component greeting voy text. uh hello name voy component greeting we got to refer to the components by a symbol not the actual binding name which is a little bit annoying in my opinion but I guess that's because it's uh a lisp two not a list one like scheme which is the [music] uh the uh the real ideal form of a lisp in my opinion that's just my opinion anyway so v component greeting name Alice named Bob okay cool let's just see can I run that to I guess I'll have to mount it, right? Leanti. So, we're going to mount app instead in this case. App, not CPP. I'm going to go run this snippet here with control alt X. And this one, too. And then this one. Okay. Hello, Alice. Hello, Bob. That does work. Cool. Cool. Great. Where? Yeah. Where's Fade? Where is Fade? Somebody go wake him up. I don't think he's sleeping, but you know, he's missing all the fighting words. Yeah, he knows. He knows what I'm saying. All right, name form. This is a form. It has a field. Oo, how about that? Let's try this out. We're going to pull this in. Once we get to something a little bit more meaty, we can try to actually uh explain what's happening here. So, name form. [music] Bade Ralpha. No, just fade. All right. So, enter name. How do I get to that field? Right here. Is that it? There we go. Uh, Fubert. Hello, Fubert. Hello, Jack Bower. Okay, so it does update. Cool. How about that? So, it's updating in real time when I type Good. Cal says, "Have you already talked about common list? It usually gets them onto the stage." Yeah, I'm making fun of common list right now. So, and also Emacs list by definition. So, let's take a look at this example real quick just to sort of uh see what's going on here because this has a little bit more to it than uh what we had seen pri prior to this. So, we have voy def component. Can I actually do like a macro expand? macro expand last s expression. So let we'll go through it as we uh look at the the example code. So we're defining a component a component called name form for state which state is basically the um the variables in a in a general sense that uh are related to this form. You can consider it like the parameters to the component the overall component. So there's a name that starts off as an empty string and it could have many values for the state for this component. Uh now we're telling it we want to render a fragment which is obviously not a whole user interface just some some subset of the UI. So we're saying this is a fragment we want want to render and then in this voy fragment we have the individual components that make up that fragment the fragment for the component. Okay, so we got just plain text, plain text label, enter name, then voy field, uh, which value comes from name. So I'm guessing that there's a binding here that we're tracking for the name that gets defined in the state. We pull the state in. We say that the size is 20. I guess that means the size of the field itself. And then on change when that value changes, we're going to call into voy set state using a lambda expression. Uh, and we're going to set name to v. Now, I don't like the fact that we're we're kind of switching modalities here in a way and using a keyword to refer to name instead of using a symbol to refer to name, but that's just the way it was designed. Uh it feels like a little bit of a um I don't know, something that we people would get wrong often in my opinion. You would you would think that you would just type in name here and not name or even like a symbol, not a keyword. I would I would expect to see this instead if anything, but that is what it is. Okay, so we're setting it the value to V. So whatever you type into this field, it automatically gets pushed to the state value of name, right? Then we have a new line cuz keep in mind we're basically rendering a text buffer here. Okay, so we've got text and then the field right after that. So they're all on the same line together and then we put in a new line after that. And then we put in voy text and we have some logic here apparently. So it's not just plain old string here. It's actually an expression that gets evaluated. So we evaluate this if statement that says if the string is empty put type something otherwise format the string to say hello and then whatever the value of the name state value currently is and that's how that component works. Now, the interesting thing to keep in mind here is that uh whenever this component needs to be rerendered, apparently it's deleting all of the text in the buffer at that location where that component lives and replacing it by basically rendering the text that represents this uh component and then placing it back in the buffer at the same location. So, it's not a user interface in the sense that it's like, you know, graphical windows and buttons and stuff. It's like everything else in EMX. textbased user interface that um for better or for worse works well in this environment. Okay. And we need to mount that somewhere. This a concept from React where whenever you actually want to put a React component into the UI or at least like a root level React component in the UI, you have to mount it somewhere. So you're basically telling it where to put it. Um and really what we're saying is we're going to mount that into a buffer. I don't know if mount has other options. Yeah, optional buffer name. Maybe we can just tell it nothing and it will just mount it wherever it wants. Yeah, it makes a voy buffer which I think is perfectly fine as a default. So we're saying we want to mount the voy component name form and what about um component v node. What is voy component return type props and children? Oh, can we give a default value? Wonder what it looks like. Let's do control hf. Uh, props to children is a P list of props optionally ending with children. Interesting. So, how about this? Let's do this name. Uh, there you go. RS didn't work. P list of props. So, is it like that instead. Uh wrong argument type number or marker P nil. What still didn't work? And that doesn't work either, does it? Did I break it entirely? That's interesting. Huh? I must have broken it. Anyway, all right. So, the point being that it's pretty straightforward to uh make a UI like that. Let's take a look at the macro expanded code then because uh the voy component is a macro that defines a component. So voy register component that actually takes a definition and then this is coming from the result of voy component def-create which looks like an internal well but I guess both of these technically are internal uh functions the package and it takes a basically a pist it seems or are these optional function parameters in e-isp uh yes keyword parameters in the function name doc string props All right. So, name name form dock string nil lambda props. Where's props coming from? Where is that coming from? And where is name being defined? Ignore props list name. Uhhuh. I think this is yeah the initial state function this is probably what receives a prop list that we pass into it. I guess render function props state. Why do they use this naming convention? That's insane. Ignore. What does ignore do? Ignore arguments do nothing and return nil. Why the hell would it even put that in there? Is it doing it to to uh satisfy a llinter name P list get state name? Okay, so it is is defining a binding here. That's where the binding comes in. We're doing a lexical scope binding defining name and then inside of the code that name binding becomes uh valid. So voy field value name. So here we can actually refer to name because this name symbol here gets eventually turned into a a let expression with a binding. Asha says why don't they use genim because Claude wrote it. That's what I think too Morgan would it would suppress compiler warnings for unused variables but they are used they're used in this function. Maybe they're not used all the time though but they are used enough that I would think that you would not have that problem. So why put it in all the time anyway? Whatever. So voy fragment which seems like a normal function here. So create a fragment v node containing children. And then we have voy text which is create a text v node with content. I'm kind of curious what that function looks like. And so the crap of software engineering dies maybe. Create a text vnode with content. All right. So voy v node text create content face key h. So if you put face and key at least face you can change the face of the text which is good. We might need that for our uh pomodoro timer that we'll never get to properties. Okay, we're using cl loop for key and value on props. Got it. So, we're looping through the P list unless me q k face key. I'm guessing unless it's one of those we append it to a list and we we skip those here because we've already extracted them in the P list get or face and key. All right, makes sense. Be quiet alternate v. I don't believe you. I hear the music myself, dude. Vi fragment vode fragment create children. Okay, that's pretty easy. These are all just public interface procedures or functions to internals. Slop craft with live. I'm not writing it. Okay, I didn't make this. I didn't make this today. Okay, we're not crafting slop. We're just consuming it, right? This is not a React stream. Anyway, uh buoy new line new line create. I love how we have to have a function to create a new line. Can't that just be a call down to the text component? All right. Uh, space create a space V node with spaces. All right, cool. It's because the volume is very low, Lord Devi, and I'm talking most of the time. It's probably why we why you don't hear it. Uh, voy button. All right, so here's where we get an actual uh widget probably. Voy node button create max width node decoration. Thank you Ash for bringing the sanity back into the equation here. Altern says that David Will is hearing Claude sing to them. Peter says is it is also not a cult. It's not a cult. Come on. I'm not playing hypnotic music to keep you in a suggestible state so I can sell you things like uh Claude Max subscriptions or something like that. It I would never do that. Would I? Maybe. So anyway, uh voy node button create voy.el. Where is it at? Meta dot. Okay. So node button I want to see where it actually uses the stuff this one right why is it sending me back to that function oh because the death strruct got it constructor for this strruct that looks so terrible left pad says maybe we'll just pivot to a zen stream and let us all meditate for one minute that would be so boring Man, I'm going to lead you on a guided meditation where we all just cry. What's a new language? Rust is better than skate cats. What are skate cats? It's a new language. What the hell is a skate cat? [laughter] Elephant Argo says that sounds really nice. I think we could all use that. I don't know if we want that. I guess if you just listen to the soundtrack here, you could meditate. Okay. All right. All right. All right. All right. So the the premise for the stream aside from looking at this package was to try to create something uh ourselves and the idea that I had was to create a simple uh pomodoro like user interface. Okay. So can we do that? I don't know. Let's see what would we need to create a pomodoro interface. Let me go back to my voy test.el library or function. Does this export to HTML? Why should it infreak? This is not an This is not an actual React interface. This is just inside of uh Emacs. Alternative says, "Are we testing Nerie? Do you see Neri? We're not very near to that." I'm not going to apologize for that. So, what would we want to see in a Pomodoro UI? Um, start timer button. Uh potentially that changes to stop. It's like f following a pasta trail. What does that mean? So what else? I mean, we obviously need to see the uh see the timer text on the screen. Can we center it? I wonder if we can actually center the text. Probably not. Uh what else? I mean start and stop. Sure. Uh maybe a list a list of completed timers. Maybe include cancelled. Something like that right simple. Alter says, "Are we writing an agent file to implement Pomodoro?" Uh do you want me to? I'll be the agent. I'll be the agent doing the work. All right. Voy defaf component pomodoro uh timer state remaining or how about this time text. Okay, time text uh is running nil. Um, will it support a list? I wonder. Uh, history timer history. Okay. Render voy fragment. Watch this be like a really easy and convenient way to make UI and Emacs. And I end up uh eating my hat. Not literally, you know, that's that's a turn of phrase. Uh, it's an idiom. because it ends up being like a pretty decent way to make UI in Emacs and you know we have to cry because Claude made it. All right, so voy fragment. Um the timer text would be first text I would actually just put the time text directly but we want to set the face and um I need to set create a face. I don't know like does it take a face spec I wonder we're going to have to test that and I don't remember exactly the right way to do that. Let me look at my Emacs config if I have that. So, set text properties. Properties. Anybody remember the syntax for set text properties? Set text properties. Cuz I don't. Somebody needs to give me an example of that. My cap is pretty nice. I don't want to taste it, dude. I think I'd rather eat uh spaghetti than eat a hat. And yummy, says Darshock. No. I don't think so. It's not bacon flavored. Other says it might has bugs here and there, but it looks interesting. At least some positivity. I appreciate that. Elephant Ergo says, "I mean, we could both be impressed by it working well and also be pained by the fact that it doesn't use gem sins for the macros." Well, it it is pretty ugly under the covers, but does it have to be pretty under the covers? I mean, isn't that just, you know, us being elitists and saying lisp has to be written a certain way? I don't know. Alternative says, "So, are you interested in Neri after all?" I mean, not really. What do I need it for, dude? I mean, look at what I'm looking at the whole day. I'm looking at one full screen window the entire day with no bar, no nothing. What you see is what I look at all day long. So, I don't think I really need Neri. Ashra says, "We're elitist because we don't do pull requests." Wait, what we do? Just commit direct directly to main. Who wants to work on slob? Well, aren't we all slobs in a way, you know? All right. Property is a new. It's a P list. Of course, I think the first one is uh nil, right? There's a text properties uh thing. Okay, here we go. Foreground green. Got it. All right. I think that works, right? The road to enlightenment starts with insight, David Will. What kind? What kind? And who who burned who? Alternate V. The chat is so behind. I can't tell if if I did it or someone did it to me. I mean, we we got to be up to date here. So, maybe I'll just try doing it that way. Then foreground, I'll make it like orange or something. I guess it should be red for uh Pomodoro, but I don't want to be too literal here. Uh red. Okay, maybe we'll start with that. Okay, let's just start simple. Let's start simple and we're going to say Pomodoro timer. Uh AD says Neri is pure awesomeness. Unsubscribed. I didn't say Neri is bad. I just say I don't need it. I don't personally need Neri now. It does look cool. It looks interesting. Um, so voy text maybe. That seems right. Right. Maybe maybe I didn't um Okay. All right. Got it. Got it. I didn't eval the component first. Now this text does not have the face that I asked for, which is kind of a problem. Should we? Let's get it working to a degree. First, I'm going to try to split this buffer here so we can u continue loading it. Can you What? Don't switch my buffer. Just go to the one that already exists. Okay, so [music] props is a P list. The thing is it's a rest parameter. So it's not really a P list. It's a it's a list of prop property value pairs. Base foreground red. Do I need to put nil here in front? Wrong argument. Why does it do that every other time I run it? Whatever. Let's throw a couple new lines in. Can I give it a number of new lines? Apparently not. Every second time I run it, it it gives me an error, which is really interesting. Okay, so uh let's not worry about the face just yet because the face is not working. But I'm going to try to make this render a button. This is probably not the right way to do this, but this is the way we're going to do it. Voy button. All right. So, voy button increment. So, um button label start That should work, right? On click lambda buoy set state um is running true. Now, now this obviously won't work correctly just yet because I need to have some uh state checking. In fact, I could probably say if uh is running text uh 25.0 oops o maybe that's enough otherwise I think this is an implicit prog at this point. So voy set state is running t voy set state uh time text well I mean it will do its own thing now we need the uh what's it called run uh at time there's another run function isn't there run with idle timer. Uh, perform an action after a delay of seconds. Perform an action the next time Emacs is idle. Okay. Run with timer. Perform an action. There's a repeat the action after every x seconds. So, seconds and then repeat. So, uh, run with timer one. One. Whoa. Okay. And then the next is the function. The next would be voy set state. I think this needs to be lambda. And it should be capturing the closure here where we can actually set the voy set state of time text. Um I need to have the start time too. So, in fact, maybe start time, excuse me, that was totally [music] unprofessional. All right, so uh you could bill me for that one. So, uh timer start. We're not going to have that anymore. Timer start. Whenever it's non nil, we're going to clear it. Uh todo cancel the existing timer. So timer start and I can't remember is it like current time is that an object? Yeah, it's a list. All right. So, we're setting the state to the current time. Um, I wonder Emacs timer math or time math. I don't remember exactly. time calculations. All right. Time subtract time add returns the time difference between two time values as a list time stamp. So if I want to have like timer start I'm trying to think like what is the right math for this? Do I need to to say what the the the stop time is and then subtract that from the current time to see what's left or subtract the current time from uh the start time? We we'll do that one just so I don't have to go like rewrite a bunch of stuff. All right. So, time text. Can we format the time? Emacs format time. We're doing this the oldfashioned way. We're searching the internet. Time parsing time display format. No. Format time string. Is that Is that the right one? Format time string. Format time string. Um what is it? Uh H M. No, no, no. MS. This is probably totally wrong. Uh current time. What is the format text? Do I need to use percent signs? There it is. M is month. H. M is the minute. S is the second. All right. So, percent M. Percent S. 3331. Got it. Okay. So, then we need and put this over here. Right there. Okay. So, set time text format time string. We're going to use the format string and then current time. Now, time subtract. Where was that? We saw Where did my freaking mouse cursor go? Once again, I keep having to restart the keyboard because he just like falls asleep. Time calculations. Time subtract T1 T2. So is that right? Meta said uh escopy says 25 minutes remaining. Thank you. So it's time for one pomodoro, right? Isn't that appropriate? Thank you uh escopy for uh making that joke work. I know you must have been thinking about that. Okay. So, current time from start time, we're just going to do we're going to do that. Okay. It's not going to be right. We're just going to do it. All right. Current time minus uh timer start. Let's see if this actually works. Where are we? Okay, there we are. Have I closed everything? I close everything. Esopic says, "Sorry, as a large Lcraftian monster, LLM, I cannot tell you my thinking process." Sure, you can't. [clears throat] Getting very horizontal. Yes, I know. Uh, cow, I need to break it a little bit. I just don't like breaking like this. You see that? You got one one. Do I really want to drop down lambda or do I really want to drop down one one so I can make the lambda go over? This is, you know, list problems. Okay. Let's start the timer and see if it actually does anything. Uh event error and on click symbols value as variable is void. Um and left pad says uh lift problem. Mhm. Oo says what do you mean? What do you mean? I don't know what we're talking about. Let's delete the other stuff in here. Okay. All right. Delete all the other stuff. Maybe I need to eval the buffer, but I don't know. Like, it should actually have alternative that says, "I hate the indentation." Do you have anything positive to say today? You just say that the music's gone and you hate the indentation. You have to read the message on IRC. I have no idea. Okay. So, Rust is better than basic. Well, yeah. I mean, come on. Still the same. So, symbols value as variable is void. Did I use the wrong variable name? Is that what happened? Timer start. No. That's valid. Okay. So why is it not capturing this timer start value? I mean presuming that this is where the error is coming from. Is it coming? Maybe it's coming from somewhere else actually. Voy event error in on click symbols value as variables void. That does sound like an emac error. This is not like a voy error. So, uh, timer start. Is there a function called that already somewhere else? No. Okay. Should be time text. Uh, oh, yeah, that's true. Thank you to uh Lo. That's correct. That should be different. I screwed that up. I also screwed that up here. But I think that this binding for timer start here is not being uh recognized. We want to macro expand that timer [music] start. Timer start. Timer start. Lambda nil. So are we not capturing the closure? Is it uh being set to nil on line 11? Hey Ed, if timer start. Let's go back to the code. If timer start. We saw that already. Oh, on click. You know, it could even be this one. Huh. That should work, shouldn't it? Like based on the examples we saw. Okay. Voy. No, no, no. On click. What other example did we see before? On click fun call. Set path. Set path target. Okay. On open entry. I'm not seeing access of that. on filter. I'm trying to see if there's an example of using a state variable in a click handler because currently I'm not seeing it. I'm not seeing an example that actually does it. On cancel. On cancel. Where's on cancel defined? Oh, whoa. What? Function parameters. Oh, so function uh component parameters is different than state left pad. Come on. We're having uh meta conversations across three personas here. All right. So, um, to-do app on click on click on toggle ID. Yeah. Okay. Here, look. ID is No, no, no. That's not state. That's a That's a let. Whoa, whoa, whoa, whoa, whoa, whoa, whoa, whoa, whoa. I'm getting real confused now. So far I am not seeing a click handler that reaches into a state value. Now here's one. So text is a state value and then yeah it's defined as as a state value and we're using it in on click. So it should be possible in terms of this library. Bryce says anyone know what the background music is? Look in the description the of the stream and at the very bottom there's links to all the tracks. They're all creative comments tracks. Okay, so clearly there should be a way to do this. And it must be my shoddy emac list coding that's causing the problem. Time subtract time start. Uh how about we just do this for now current time and see if that's the the culprit. Did I miss a pin? Looks like I did still symbols valable symbols value as variable is void. For some reason that is a very difficult sentence for me to read. Thank you. S copy. Um, is it this first if timer start? Did I do something wrong with the multiple bindings? I'm very confused as what hap what is happening here on click. What if I uh took all this out for now? Okay, we're just going to little write out a little message to the screen. That worked. All right, fine. Now, we got to go backwards and try to debug this thing. How about this? It probably won't work. Uhhuh. And why not? Are we not using it somewhere else? Thank you, sopy. I can't actually see the viewer count on my screen here. Um Peter says, "Neri is a window manager for the discerning audio file stream viewer." Got it. Thank you, Escopy, for being a smartass. Uh, all right. So, time text. Should I put time text? This is going to end up being something really stupid. I'm going to get pissed. No, it's the same. They're all having the same problem. Okay. Look, eval buffer. Sure. All right. Look, look, look, look, look, look. We're losing the lexical scoping somehow. I don't know if it's cuz I didn't eval the buffer the right way the first time, but lexical scoping was not turned on apparently and that's the reason why uh we lost the ability to do reach into bindings that are bound in the macro. So timer start. Let's see if it works now. That's so damn stupid. I really can't. I have to eval the whole thing. Whatever. That's fine. That's actually easier. Eval buffer. Okay. So, error running timer set state called outside of component context. Can you not run a timer? Is there a way to run timers in here? Guide. This is probably one of the places where we have to start doing hooks, isn't it? Runs code after re rendering optionally with cleanup. Use effect count change to Sure. Ah, here we go. Look at that. Return a function from the effect body to run cleanup. Use effect start timer voy with async context. So this is basically what we're doing already. So use effect. We have voy text that's using elapsed. It's using seconds. Cool. All right. So we're just going to do some little copy pasta here. And we're using a prog in in under the render to put multiple expressions in. Okay, that's fine. That makes sense. But hold up. Can't really do that though. When can we call use effect mutable value that persists across renders without causing rerenders when changed. Okay. Storing timer references. So we create a ref with a nil value. See that just gets more complicated, right? This is where the the React style of programming gets more complicated and it starts to make me uh make my brains boil a little bit. without voy use callback. Memorize call back callbacks. Stable function that only changes when dependencies change. Memoized values. Async data loading. Use async provides async data loading with loading error states and caching. Use a callback based API like promises to support synchronous and truly asynchronous operations. Okay. Truly nonb blocking make process multiple async calls pre-loading data async landscape. So, uh, timer, we don't want it to run the timer unless the the timer is supposed to be started. See, Ashraz, now who's going to copy the chat messages? Ashraz, just kidding. Peter says, "If you look at the market cap, it's more likely for uh uh Anthropic to buy Amazon." I don't know, man. Really? I guess. Clean up. Cancel timer. Okay. Let timer. Okay. just as an example, we could try to use this just to get things moving. And then maybe we can figure out how to uh make it work in the real context for what we're trying to accomplish. So we got that and now we're going to put this in as well. We're running two expressions as the body of this component. So when the component gets executed, it's going to do this uh voy use effect which creates a timer that runs once every second. Voy with async context voy set state. We're going to do the same thing we did before here. Setting the time text. I'm just going to delete this whole thing. And then I'm going to go drop it up here instead. Okay. How many pens are we needing here? There we go. We're going to delete that. Whoops. Hold up, hold up, hold up. Let me make sure I'm I'm getting this right. Timer. I see. We return a lambda from the let body as a cleanup function. Okay. And then this is what use effect. All right. So, that should be uh accurate. So, we're setting the state with a timer. And this is just going to start running. Okay. We're not going to worry about whether it started or stopped. Uh, we're going to remove this run with timer here. And we're going to just roll that back to the beginning like that. We're going to eval this buffer. Voy set state. Oh, look. It's doing something. It did something the first time, then it it choked. Okay. Um, current time. Can I do an addition? Oops. Can I do an addition of time? Time add returns. Oh, you can add seconds. Great. So, time add time seconds. Um, so, uh, timer start. So, current time and then time add uh, timer start. I know this is a terrible way to do this. times 2560. So 60 seconds times 25 minutes is that fulfill this. Okay. Now eval buffer set state called outside of component context again. What am I doing wrong? I'm doing the thing. Is that supposed to be a lambda? It looks like it should be a lander, right? Buoy with async context. What does this do? Capture current component. Is this a macro? Oh, it's a macro. That that explains it. Okay. So, it it captures the current context. It returns a function that when called restores the component context and executes body. Got it. All right. So, it basically is just reaching back into [music] the state that's uh been defined here. However, it still doesn't let me get access to that timer start variable. Why does it not like that? This is supposed to work according to the documentation. Time text. We're setting time text. And what did they not like? Uh buoy sets state called outside of component context. Is it not exactly like it's supposed to be done right here? Voy use effect. Yeah. And then we're running a timer. We're calling VU with with async context that returns a function that has access to these state values and we're calling voy set state. Yeah. Okay. Buy says what it doesn't like. Time text says expressing durations in terms of products is great. The few nanoc lost are worth the gains in readability. Well, sure. Yeah. Ah. You know what we need right now? We need Claude code to fix the code that Claude Code wrote or at least to understand the code that Claude Code wrote. But we're not going to [music] do that. So anyway, um it's not working for an undetermined reason. Now, what we could try to do actually is run this exact timer example and see if it works. How about that? Then maybe we will start to understand what I did wrong. So, we're going to change this to be Whoops. Uh what is it called? Timer example. And then we're going to eval that buffer. Um that's curious. Apparently the timer in my other voy is still running and it keeps changing the buffer. Huh. Interesting. But the the other timer is working correctly, which is really interesting. And it's still running in the background. Like it doesn't get cleaned up correctly. I don't know exactly how it's supposed to because there's a lambda here for canceling the timer. But when does that get executed? When would it get executed? Unless maybe elapse gets set back to zero manually or something. Anyway, my my Emac session is hosed now. Can I list all active timers in Emacs? Cancel. Oh, list timers right there. You have invoked the disabled command list timers. Beware. Manually cancelling timers can ruin your Emac session. No kidding. Yeah, enable it. Sure. No. Oh, wow. Uh, how did I kill it? Did I press K? No. How do I use this buffer? Crl Hm. Timer list mode. What? What bindings do we have? Cancel. Cancel. [music] Timer list. Cancel. C. How about that? Get out of here. Bye. Okay, that's better. Is this still running? It's still running. What's going on? This one right here. C. Okay, I think we're back to normal now. Uh, E val buffer. So, that works. That's okay. Yeah, we we didn't close all of them, but we got it now. So, now we got this one. I can list timers. I can go kill this timer so that we don't have to uh deal with it. And then we're going to go back to our previous code. We're just going to delete that. We don't need that anymore. The the point has been made that this should work. For whatever reason, it doesn't like uh my bindings. I wonder if it doesn't like hyphens in the names. That couldn't be, right? Could it be that weird? Oh, it works sort of. It stopped. Okay, so we had a bad timer in there somewhere and it was it was running things still and it was confusing us. Um, the timer should be working. Let me cancel this one and get out of here. Now, why did the text not update the next time? Is it because I'm doing a bad calculation in here? I'm subtract. I'm restart. So time subtract time add timer start 2560. Yeah. So that should give us the time at 25 minutes ahead and we're subtracting current time from that to get the current delta and we're printing it. But it it seems to keep printing the same thing back again. This should be repeating every time. Can I do this? Um delta is I mean it's probably not going to tell us anything, is it? It won't tell us anything. The only thing that it could tell us is that it's actually calculating something different every time. So maybe if I go here and mark this expression and copy it to paste it back in. I just screwed that up. There we go. Okay, so we have the delta potentially being written. We can eval this buffer and maybe we get some messages. Okay, so I see the the delta actually changing. For some reason, the uh printed value is not being changed. Unless I did something wrong with the uh component text. So let's go back and cancel that timer. Where are we? Right there. If timer start. That's fine. We got the VU button. Wait a minute. Wait a minute. That's fine. Um here time text. We're setting time text, but it's not being updated correctly. Apparently setting it is not enough to get the UI to update unless the time string is bogus because of bad calculation. I'm sure somebody can look at that and tell me that I'm doing something wrong. Delta is okay. So the string is wrong. And why? We're not changing uh timer start. Should I just do this and here I guess we Oh, actually that's what's going on. We haven't set this correctly. run with timer in uh does use effect change? Does it get recalled? Does it get called again when the values change? [snorts] I can't remember how that works. Let's try this. Um, voy set state timer start current time and then uh voy set state timer end. Okay. Timer end. Timer end. I don't know why we had to set timer start. Whatever. We're going to go back to list timers. We're going to end the stream now, but uh let me just see if we can get this to work. Out of curiosity. Oh, we went straight to zero. Fantastic. I'm not exactly sure why that would have been the case. Ah, because it's nil. That's why. Whoa. All right. So, let's get the timers out again. Cancel that timer. Get out of here. Okay. Eval buffer. Uh, macro expansion failure. I must have screwed up the invocation. I'm add I close this one off too early. That's what happened. Okay. What's happening? Current time um 2560 timer end. Ah. Hm. When you set state, does it do it immediately? I wonder. On Mount Hook, says Kister. You might be right. Yeah, you might be right. We're a little bit late for that now, though. I got to stop the stream in a second. Let's just look at the docs for a moment and see again where hooks runs code after rendering optionally with cleanup. Okay, so this is after rendering. Can I do that? Is that valid? No. Anyway, obviously I was not going to become a uh an expert. Actually, maybe it did work. I was not going to become an expert in this in one stream anyway. Not that I really need to become an expert in this. Um anyway, I mean that was interesting. So, what what is the conclusion we have here about uh the VUL library? Well, I think it has some potential. I think that if you learned how to use it effectively and if you were already maybe like an expert at writing ReactJS based user interfaces, maybe you would feel pretty comfortable here making um UIS for Emacs. I don't know that the average package developer would need this, but I don't know. It's just interesting. Like if you want something fun to hack on, you could make a UI using this. I think you could probably get pretty far with it. I don't see why not. It's better. It It could be better. I'm not going to say it's better. It could be better than writing a bunch of hand rolled uh buffer manipulation code to produce something that's like a UI. So, uh it could be nice for that if you actually wanted to do something that's a bit more elaborate compared to um just the basic things you could do with writing into a buffer. Like for instance, if you wanted to write an expandable user interface kind of like how Magic has whenever it uh has the different sections that have like your commit commit list, your diffs and everything in it. You could probably use this VUI library to do something like that. I don't know how efficient it would be, but you could actually use it for that if you wanted to. Other says, "Yeah, it looks like you know React, but you don't know Emacs enough to be able to write interface." Yes, it is kind of like that. Right. I mean, if you know React, then you still don't necessarily know how to use Emacs, use a a React like library in Emacs effectively. You need uh good forms for your package or something. Maybe. So, that was cool. I guess that was fun. Um, kudos to uh Boris, I think his name is, the author of the package. D12 Frosted, I believe. D12 Frosted, what did he have before? There was something people in the community were using from D12 Frosted at some point. Was it a Mac build of uh of Emacs? There was something that I remember downloading from D12 Frosted. Oh, D12 Frosted had like a homebrew cask or something. Ah, homebrew Emacs Plus. That's right. Okay. That's why I remember that name anyway. And it's still being updated, which is cool. So yes, you can write react style emac ui and emacs with vue.el if you want to if you want to try hard enough to actually learn how to use it effectively, which I mean it's doable apparently, but um I don't know that I'll bother. Um so yeah, check out the new Geeks release. As I mentioned, Geeks uh 1.5 is out now. Geeks 1.5 blog post. Go check that out if you're using Geeks. If you're not using geeks, then forget about it because you don't care. And um yeah, we'll figure out what we're going to do next week when we're back on the stream. As always, give me suggestions if you want to see certain things on the streams. I may not take them. I may do something completely different. It really just depends on my whims at the last minute for the week, but I always appreciate getting suggestions. So, thank you to those of you who suggest this uh alternate v and Morgan Were the ones who suggested it. VC updates. I can't do it right now, but maybe next week. So, remind me. Maybe we'll take a look at it. I've been using VC mode less because magic is just more convenient in a lot of ways and I've been looking at a lot of diffs. So yeah, music is not dead alternate fed. I can kill the stream though if you want and have the music be dead. All right, so uh thank you all for being here. I really appreciate your time and attention. Hope you all have a great weekend. Till next time, happy hacking. See you. Yes, [music] my back end didn't work to uh to make this. Thank you for watching stream come up. You're you're just you're seeing the back behind the scenes of the end here. Thank you, Alternate Ve, for telling me my stream is broken again. Bye-bye. See you later.

In this stream, we'll explore vui.el, a new library that brings React-like declarative UI patterns to Emacs using the built-in widgets.el. We'll learn the basics of components, state, and lifecycle hooks by building a simple Pomodoro timer from scratch. If you've ever wished Emacs had a more modern approach to building interactive interfaces, this one's for you! #emacs #react #ui #programming SUPPORT THE CHANNEL: 👍 Support My Work: https://systemcrafters.net/how-to-help/#support-my-work 📰 Subscribe to the Newsletter: https://systemcrafters.net/newsletter/ 👕 Check out the Store: https://systemcrafters.store 📘 Get Your Copy of Mastering Emacs: https://www.masteringemacs.org/r/systemcrafters?utm_source=yt&utm_medium=desc&utm_campaign=scme SHOW NOTES: https://systemcrafters.net/live-streams/january-23-2026/ JOIN THE COMMUNITY: https://systemcrafters.net/community/ (Forum and IRC chat!) https://fosstodon.org/@daviwil MY CONFIGURATION: (This site is currently down but will be back up soon!) https://config.daviwil.com https://config.daviwil.com/emacs https://config.daviwil.com/systems (Guix) OTHER SERIES: - Emacs Essentials: https://www.youtube.com/watch?v=48JlgiBpw_I&list=PLEoMzSkcN8oPZvSdewHG8uApD7THlLLCV - Emacs From Scratch: https://www.youtube.com/watch?v=74zOY-vgkyw&list=PLEoMzSkcN8oPH1au7H6B7bBJ4ZO7BXjSZ - Emacs Tips: https://www.youtube.com/watch?v=wKTKmE1wLyw&list=PLEoMzSkcN8oMHJ6Xil1YdnYtlWd5hHZql - Emacs Desktop Environment: https://www.youtube.com/watch?v=f7xB2fFk1tQ&list=PLEoMzSkcN8oNPbEMYEtswOVTvq7CVddCS - Emacs IDE: https://www.youtube.com/watch?v=E-NAM9U5JYE&list=PLEoMzSkcN8oNvsrtk_iZSb94krGRofFjN - Emacs Mail: https://www.youtube.com/watch?v=yZRyEhi4y44&list=PLEoMzSkcN8oM-kA19xOQc8s0gr0PpFGJQ - Learning Emacs Lisp: https://www.youtube.com/watch?v=RQK_DaaX34Q&list=PLEoMzSkcN8oPQtn7FQEF3D7sroZbXuPZ7 - Craft Your System with GNU Guix: https://www.youtube.com/watch?v=iBaqOK75cho&list=PLEoMzSkcN8oNxnj7jm5V2ZcGc52002pQU CREDITS: Coriolis Effect by logos feat. stefsax, licensed Creative Commons 3.0 CC-BY http://ccmixter.org/files/mseq/26296 reNovation by airtone, licensed Creative Commons 3.0 CC-BY http://ccmixter.org/files/airtone/60674 ukeSounds by airtone, licensed Creative Commons 3.0 CC-BY http://ccmixter.org/files/airtone/32655 Between Worlds (Instrumental) by Aussens@iter, licensed Creative Commons 3.0 CC-BY http://ccmixter.org/files/tobias_weber/56664