Conditional root rendering about van

[Tao-VanJS]

I don't have a good idea about what's going wrong in your code. I don't think purely accessing the val property of a State object would cause an infinity loop. I suspect there could be other parts of the code that cause the infinity loop. I would suggest that you can start with some profiling tool (e.g.: https://developer.chrome.com/docs/devtools/memory-problems/allocation-profiler) to see what's going wrong in the web page.

[kwameopareasiedu]

@Tao-VanJS From the profile, and some logging, I think that's what's happening. The profiler shows an unending series of the calls setVal -> derive -> runAndCaptureDeps

[kwameopareasiedu]

However, if I move the state and Firebase auth callback outside the component, it works as expected.

AuthGuard

const authenticating = van.state(true);
const authenticated = van.state(false);

auth.onAuthStateChanged((user) => {
  console.log(user)
  if (user) authenticated.val = true;
  else navigate(LOGIN_ROUTE);
  authenticating.val = false;
});

export function AuthGuard(child: HTMLElement) {
  if (authenticating.val || !authenticated.val) {
    return div(
      { className: "w-full h-full grid place-items-center" },
      Text({ align: "center" }, "Authenticating. Please wait...")
    );
  } else return child;
}

App

export default function App() {
  return Router({
    className: "w-screen h-screen",
    routes: [
      { path: HOME_ROUTE, component: () => AuthGuard(HomePage()) },
      { path: LOGIN_ROUTE, component: LoginPage },
      { path: SIGNUP_ROUTE, component: SignupPage }
    ]
  });
}

Currently using version 1.2.7 of vanjs-core

[sirenkovladd]

Can you try

export function AuthGuard(child: HTMLElement) {
  const authenticating = van.state(true);
  const authenticated = van.state(false);

  auth.onAuthStateChanged((user) => {
    if (user) {
      authenticated.val = true;
    } else navigate(LOGIN_ROUTE);

    authenticating.val = false;
  });
  
  return () => {
    if (authenticating.val || !authenticated.val) {
      return div(
        { className: "w-full h-full grid place-items-center" },
        Text({ align: "center" }, "Authenticating. Please wait...")
      );
    } else return child;
  }
}

export default function App() {
  return Router({
    className: "w-screen h-screen",
    routes: [
      { path: HOME_ROUTE, component: AuthGuard(HomePage()) },
      { path: LOGIN_ROUTE, component: LoginPage },
      { path: SIGNUP_ROUTE, component: SignupPage }
    ]
  });
}

[kwameopareasiedu]

Unfortunately, this doesn't work since this calls the AuthGuard function instead of passing it as the component function to the router...

[sirenkovladd]

https://jsfiddle.net/Sirenko/jv29wexf/55/

Here's an example, + fixed a bug with the garbage collector for the HomePage (if there was reactivity on it, it would not work correctly after switching)