Comments (6)
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.
from van.
@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
from van.
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
ofvanjs-core
from van.
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 }
]
});
}
from van.
Unfortunately, this doesn't work since this calls the AuthGuard
function instead of passing it as the component function to the router...
from van.
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)
from van.
Related Issues (20)
- iOS usecase?
- Array type for properties values HOT 2
- A new version of the TodoList in Javascript with editable input fields
- vanjs-jsx Fragment missing HOT 6
- [vanjs-jsx] Add missing ./src/jsx-runtime.js HOT 3
- [vanjs-jsx] style property no more handled HOT 1
- Bad support on conditional rendering when return nulls HOT 4
- HTML Character Entity for " " not correctly loading rendering when using span() tag. HOT 2
- Element not rendering properly HOT 5
- Support JSR HOT 2
- Vanx.Reactive and Vanx.List doesn't work with objects with Uint8Array (and some other objects too?) as children HOT 2
- select({ value: "..." }) does not select default item? HOT 3
- Bug when deriving state inside an object HOT 12
- version 1.3.0 broke VanCone's detection of aria-current page HOT 3
- Raw form of reactive arrays do not support `length` or iteration HOT 4
- array function push, splice doesn't trigger state change and redraw HOT 1
- Possible size reduction HOT 8
- Some code doesn't work HOT 5
- Maybe some improvment to the tutorials HOT 13
- VanUI Toggle does not respond to first click when on is true HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from van.