Topics

SolidJS•17mo ago

DaOfficialWizard🧙

Tauri

Alright, i decided to crate a suppport thread for this -as i have multiple questions. For starters i have migrated the app and the router from solid-start to solidjs with success. All of the previous issues i mentioned are now solved and working as expected. I have a new issue, two in fact. One major and one minor. I'll start with the major one. tauri uses data-params on the html elements to allow attaching certain html elements to the rust backend - this workedfine inreact. It not longer works as expected in solidjs. What i mean by this is the following. Take this example html:

<div class="main-div">
  <div data-tauri-drag-region class="titlebar" style="position:relative; z-index:10">
    <div class="titlebar-button" id="titlebar-minimize">
      <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
    </div>
    <div class="titlebar-button" id="titlebar-maximize">
      <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
     </div>
     <div class="titlebar-button" id="titlebar-close">
       <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
     </div>
   </div>
   <div id="root"></div>
</div>

<div class="main-div">
  <div data-tauri-drag-region class="titlebar" style="position:relative; z-index:10">
    <div class="titlebar-button" id="titlebar-minimize">
      <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
    </div>
    <div class="titlebar-button" id="titlebar-maximize">
      <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
     </div>
     <div class="titlebar-button" id="titlebar-close">
       <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
     </div>
   </div>
   <div id="root"></div>
</div>

This is all i should need to create a custom titlebar. Now, the titlebar renders correctly, however there is no functionality. I should be able to click on the html element, minimize for example, and it minimizes the app. This does not happen, in fact nothing happens. However, i can click and drag on the titlebar and move the window around - so that is one functionality that is working correctly. I can also resize the window, though resizing the window is much less responsive than it should be.

42 Replies

DaOfficialWizard🧙•17mo ago

The second issue i am facing, much lower on the proirity list, is that the window can not be made transparent. The body is black, no matter what i do. I need a transparent window so that i set the corners as rounded. I did this in the react version of my app by setting the body to no color and rounding the corners of a wrapper div in the html (main-div in the example above). This used to work, now it does not.

foolswisdom•17mo ago

Regarding the titlebar, can you verify that the html rendered by solid (in the DOM) is the same (or different) than that rendered by react Regarding the second issue, something probably has a color set somewhere that shouldn't...

DaOfficialWizard🧙•17mo ago

since i made this post i have verified that the html is the same - the issue lies in the custom JS. in my react-app i use a custom.js file to register the button events. Seems i am not implementing this correctly for solid so, it's my mistake

REEEEE•17mo ago

I have done exactly what you're trying to do 😅 https://github.com/dev-rb/glass If you need reference for how to make it work

DaOfficialWizard🧙•17mo ago

cheers, thank you for the link This will help a lot xD okay, and i see my mistake Nice to know i got 99% of the way there though

REEEEE•17mo ago

what was the issue?

DaOfficialWizard🧙•17mo ago

i am not setting up the transparency correctly, and i was not setting the event listeners onMount seems you are using Solid itself to set the event listeners - i was trying to import a global script custom.js

REEEEE•17mo ago

ahh yeah that could be why

DaOfficialWizard🧙•17mo ago

actually, i just cloned your repo to test it your titlebar buttons do not work either

REEEEE•17mo ago

I think I didn't enable them 😅 I forgot about that

DaOfficialWizard🧙•17mo ago

ah, okay. That makes sense It's supposed to just render the titlebar, right? As you made the main window transparent?

REEEEE•17mo ago

I made the titlebar and window transparent from what I remember 🤔 Only the titlebar buttons are visible

DaOfficialWizard🧙•17mo ago

yeah, that's all i get. Flourescent yellow titlebar

REEEEE•17mo ago

You can right click on the titlebar

DaOfficialWizard🧙•17mo ago

alright, cool. neat - i like the menu design

REEEEE•17mo ago

oh oop I was testing stuff and left the yellow 🤦‍♂️

DaOfficialWizard🧙•17mo ago

ooooh, you smart cookie. You're using the winAPI on the rust side I was wondering about that as well

REEEEE•17mo ago

I tried 😅 It was very confusing I couldn't get exactly what I wanted so I kind of abandoned the project

DaOfficialWizard🧙•17mo ago

fair

REEEEE•17mo ago

I'll go back to it eventually but the winAPI was hurting my head after a few days

DaOfficialWizard🧙•17mo ago

tauri is really awesome - but super finicky. I am trying to use it to teach myself front-end design. I am used to c++ and rust backend.

REEEEE•17mo ago

It was my first project with tauri I mostly used electron

DaOfficialWizard🧙•17mo ago

i hear that - its a nightmare i want to like electron .... but i dont xD lmfao tried it so many times

REEEEE•17mo ago

Tauri didn't exist when I started playing around with desktop apps So electron was good enough Plus, rust is scary 😂

DaOfficialWizard🧙•17mo ago

still is, i have nothing bad to say - don't know it well enough. I just always found it super bloated and annoyed that it packaged chromium everytime i tried to build an app but those are personal gripes

REEEEE•17mo ago

Honestly, it can be an advantage to have chromium shipped with it You can use chrome apis that don't exist in other browsers

DaOfficialWizard🧙•17mo ago

🤔 fair point, you are not bound to browser support issues

REEEEE•17mo ago

I needed local font access for a previous project and since I was using electron and because chromium was shipped with it, I had access to the Local Fonts Access api If it was tauri, I wouldn't have had that access

DaOfficialWizard🧙•17mo ago

yeah, that is true. Tauri does expose the browser native api's - but you,as the dev, have to be aware of the browser your app is intended to run in For me, i havent explored beyond windows (yet) - so accessing Edge's apis from webView hasn't been too bad.

REEEEE•17mo ago

Same here

DaOfficialWizard🧙•17mo ago

I'll try electron soon with a fresher mindset. I do like rust though xD - hard to move away from rust for me.

REEEEE•17mo ago

I need to learn rust but I haven't found a use case for it yet Also, I just pushed changes to add the functionality for the titlebar and fix the color issue

DaOfficialWizard🧙•17mo ago

i work in embedded development - so it's a given for me.

REEEEE•17mo ago

Yeah that's what I want to learn it for, but I haven't started working with embedded tech yet soon though

DaOfficialWizard🧙•17mo ago

will pull now, thanks again.

REEEEE•17mo ago

np

DaOfficialWizard🧙•17mo ago

Ah, no more flourescent yellow screaming at me. woah o.o the always on top setting is super funky haha- i assume it's not supposed to behave like that, but interesting none the less

REEEEE•17mo ago

Oh, the always on top is intended. The window should be above everything else

DaOfficialWizard🧙•17mo ago

mm, it is, but you can't click on anything inside of the window

REEEEE•17mo ago

Yeah I couldn't figure that part out 😅 That's what I was trying to figure out with the win api Technically I had it so you could click through the window but I was trying to figure out how to isolate the titlebar so you could at least drag it around too But the only way to do it was through hotkeys but I also wanted a way for the user to use the mouse

DaOfficialWizard🧙•17mo ago

yeah, now that's some complex UX i like the vision

REEEEE•17mo ago

thanks 😄

Solid is a declarative reactive Javascript library for creating user interfaces.

11KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

Argument of type 'string' is not assignable to parameter of type 'never'.When using setState in a provider I get this error since the new update, is there any way to fix it Accessing cookies in routeData()Is there any method to access cookies within createRouteData within routeData?Testing SolidStart routes with VitestHello! I'm using SolidStart and Vitest to test the components. But I didn't manage to find a way to NativeScript + SolidJSWhat's the current state on this? I found this library https://github.com/nativescript-community/so Creating a generic based componentMost of the examples I see for typing components look like this: ```ts interface MyComponentProps { Context hierarchyI was using the create context and such, and found a weird behaviour that even with a context hierar Info from Children to ParentHi guys sorry for my noobish question, i came from svelte where to pass something from the children Facebook/Twitter share implementation?Hi guys! I've never had to do this before, and I'm wondering if maybe someone had an example of impl renderStream not working after buildHey, I've switched to `renderStream` and I've made an artificially delayed `routeData` with an `<Sus How to handler this standard ReactJS pattern?In React, I would normally do something like this: ```ts <For each={autoCompleteStore.options}> {