Passing Reactive value to other files

[leighton-tidwell]

I have a scenario where I am trying to create a little router using arrow-js. Perhaps I've missed the point entirely, but here is my setup:

import { html, ParentNode, reactive, watch } from "@arrow-js/core";
import { homePage, vipPage } from "./pages";
import { header } from "./components";
import "./style.css";

type Page = "Home" | "VIP";

export const navigationState = reactive({
  active: "Home" as Page,
});

const router = reactive({
  Home: homePage,
  VIP: vipPage,
});

const app = document.getElementById("app") as ParentNode;

const template = html`${header}${router[navigationState.active]}`;

const consoleLog = () => {
  console.log("active page changed to", navigationState.active);
};

watch(consoleLog);

template(app);

Basically, I am trying to change the page when a user clicks on a link in the header. inside of the header, I am importing the navigationState and setting active to 'VIP' when the user clicks on something. I see the console log pop up saying active page changed to VIP but the content does not change.

Anyone have a better idea on how to do this?

[leighton-tidwell]

Just wanted to post an update and say that the code works if I change

const template = html`${header}${router[navigationState.active]}`;

to

const template = html`${header}${() => router[navigationState.active]}`;

[Chaphasilor]

Yes, that is because it's only reactive if you pass a function as an expression. If you pass a value, things stay static.
From the docs on Reactivity:

Arrow makes a distinction between static expressions, and reactive expressions. Reactive expressions are callable functions, everything else is a static expression.

and

Arrow is static by default and reactive by choice

Hope that explains it!

[leighton-tidwell]

Perfect explanation, thank you.