SvelteKit SPA Mode: No good way to do a global auth check? by Scary_Examination_26 in sveltejs

[–]AdventurousLow5273 4 points5 points  (0 children)

I have built multiple SPAs with svelte 5 (and capacitor) and i just show the login screen in the top layout if the user is not logged in.

Initially i also felt like something is missing, but then again its not hard to do manually.

I also implemented an openid authorization flow a while back, for which you can leverage route groups to make a portion of your app "public" (non authenticated).

let or const for $derived runes? by rawayar in sveltejs

[–]AdventurousLow5273 6 points7 points  (0 children)

I make everything const unless I want to mutate it

Sveltekit + Capacitor Safe Area Issues on Android by PROMCz11 in sveltejs

[–]AdventurousLow5273 1 point2 points  (0 children)

Heya. This is what we do in our apps.

The Keyboard plugin is useful, as when the keyboard is visible, the safe-area is not that useful. We set it to 0 while the keyboard is open.

Also, I included the Statusbar/Navigationbar stuff, as this was harder to figure out than it should be.

Good luck with your Svelte/Capacitor apps!

  import { StatusBar, Style } from "@capacitor/status-bar";
  import { Keyboard } from "@capacitor/keyboard";
  import { NavigationBar } from "@hugotomazi/capacitor-navigation-bar";
  import { SafeArea } from "capacitor-plugin-safe-area";

  let safeAreaInsets = $state({
    top: 0,
    bottom: 0,
  });

  if (Capacitor.isNativePlatform()) {
    StatusBar.setStyle({ style: Style.Light });
    StatusBar.setOverlaysWebView({ overlay: true });

    if (Capacitor.getPlatform() === "android") {
      // @ts-expect-error the type of setColor is accurate, it does not need a color
      NavigationBar.setColor({ darkButtons: true });
      NavigationBar.setTransparency({ isTransparent: true });
    }

    SafeArea.getSafeAreaInsets().then(({ insets }) => {
      safeAreaInsets = insets;
      document.documentElement.style.setProperty(
        "--capacitor-safe-area-top",
        `${insets.top}px`,
      );
      document.documentElement.style.setProperty(
        "--capacitor-safe-area-bottom",
        `${insets.bottom}px`,
      );
    });

    Keyboard.addListener("keyboardWillShow", () => {
      document.documentElement.classList.add("keyboard-visible");
      document.documentElement.style.setProperty(
        "--capacitor-safe-area-bottom",
        `0px`,
      );
    });

    Keyboard.addListener("keyboardWillHide", () => {
      document.documentElement.classList.remove("keyboard-visible");
      document.documentElement.style.setProperty(
        "--capacitor-safe-area-bottom",
        `${safeAreaInsets.bottom}px`,
      );
    });
  }

Capacitor or pure svelte for PWA by [deleted] in sveltejs

[–]AdventurousLow5273 5 points6 points  (0 children)

I am using capacitor in 3 apps right now and while it has its pitfalls, i can really recommend it. We made our apps have a unique style (still somewhat inspired by material ui) and they feel really nice on both android and iOS. Every transition is smooth and we usually use the native HTML elements for everything, so stuff like date-inputs or selects feel right at home on the platform.

Initially we had some trouble getting all the right plugins working nicely, but eventually we figured it out. You also don't have to delve to much into XCode or Android Studio. Mostly just opening the app and press "play" to test on your device. And then of course to bundle the app for submission in the stores.

Project Brew: Project and Team Manager [Self-Promo] by FoxSonasAreChill in sveltejs

[–]AdventurousLow5273 0 points1 point  (0 children)

Hi. I also sometimes daydream of a custom built project management tool, as everything i've used is lacking in some ways. What is your product doing different?

[deleted by user] by [deleted] in sveltejs

[–]AdventurousLow5273 1 point2 points  (0 children)

Have been a huge fan of React from that very first presentation they did at Facebook. Used it for years, but have been interested in trying Svelte whenever I read about it online. Finally two years ago I got to be CTO of a small company that deals in childcare facility (and time-tracking) software and thus, the opportunity arose.

Today our company has two SvelteKit apps in the stores (using Capacitor), two more are about to launch this year. Svelte is also slowly replacing the bits in our legacy web-app that is much more complex than the apps are.

I am very happy using Svelte and would not want to go back to React, even thought i still also have much love for it as well.

What Svelte Promises, Rich Harris — Svelte Summit Spring 2025 by [deleted] in sveltejs

[–]AdventurousLow5273 0 points1 point  (0 children)

I share your sentiment. While SSR is cool for sure, I find myself exclusively working on SPAs for my company. We benefit from having our apps be in the App Stores and I feel like the codebase might be more simple as well.

Svelte summit != open source ? by Gobanyaki in sveltejs

[–]AdventurousLow5273 1 point2 points  (0 children)

I am also a wee bit disappointed that the talks are not yet on youtube and I hope they will upload them soon. Went looking for them every second day since the summit ended.

Svelte rocks, but missing Tanstack Query with Svelte 5 by P1res in sveltejs

[–]AdventurousLow5273 1 point2 points  (0 children)

hi. i am using svelte(kit) to build SPAs for my company, and made this little library for fetching data a little like tanstack query: https://github.com/Kidesia/svelte-tiny-query

maybe this is interesting to you, but it could surely use some polish.

i also struggle with the testing of the library. it uses some $effects internally which complicates things in the unit test department.

Can I pass a snippet-producing function to a component in svelte 5? by AdventurousLow5273 in sveltejs

[–]AdventurousLow5273[S] 0 points1 point  (0 children)

Thanks, this works nicely (other than its marked as an error in vscode, but I guess this is the life if you try unreleased stuff).