TypeScript & NPM
Powered by Vite. Organize browser
utilities in the ts/ directory and use the
NPM ecosystem from Caspian's optional TypeScript frontend path.
ts/ and Vite workflow applies when
caspian.config.json has
"typescript": true. This documentation
project currently has TypeScript disabled, so enable the feature and run the
Caspian project update workflow before expecting generated TypeScript entry
files or build scripts.
The ts/ Directory
Keep application TypeScript in the root ts/
directory. The enabled frontend toolchain watches this directory and
compiles its entry graph for the browser.
export function toMoney(value: number): string return `$value.toFixed(2)`;
Use Any NPM Package
Install packages with NPM, then import them from TypeScript files in the enabled Vite entry graph.
import format from "date-fns"; export function getToday() return format(new Date(), "yyyy-MM-dd");
Register In Main
Import utilities in ts/main.ts and register
functions that should be available to PulsePoint component expressions.
import createGlobalSingleton from "./global-functions"; import toMoney from "./to-money"; createGlobalSingleton("toMoney", toMoney);
Use It In Caspian Markup
Registered functions are available in PulsePoint expressions and component
scripts. The markup remains inside the route or component's Python
html(...) template.
<section> <p>To Money: toMoney(1234.56)</p> <p>My Money: myMoney</p> <script> const [myMoney, setMyMoney] = pp.state(toMoney(15245)); </script> </section>