TypeScript & NPM
Powered by Vite. Organize your logic in the
ts/ directory and tap into the massive NPM ecosystem.
1
The ts/ Directory
For best practices and code organization, all your TypeScript logic should
reside in the
root ts/ directory. Vite watches this folder
and automatically compiles your code for production.
ts/to-money.ts
export
function
toMoney(
value: number
): string {
return `$${value.toFixed(2)}`;
}
value: number
): string {
return `$${value.toFixed(2)}`;
}
2
Use Any NPM Package
Because Caspian uses Vite, you have full access to the Node ecosystem. Install any package and import it directly into your files.
➜
npm install date-fns
ts/date-utils.ts
import { format }
from
"date-fns";
export function getToday() {
return format(new Date(), "yyyy-MM-dd");
}
export function getToday() {
return format(new Date(), "yyyy-MM-dd");
}
3
Register in Main
Import your utilities in the entry file ts/main.ts and
register them.
ts/main.ts
import { createGlobalSingleton }
from
"./global-functions";
import { toMoney } from "./to-money";
createGlobalSingleton("toMoney", toMoney);
import { toMoney } from "./to-money";
createGlobalSingleton("toMoney", toMoney);
4
Usage
Your registered functions are now available globally in Mustache templates and PulsePoint scripts.
src/index.html
<!-- Mustache -->
<p>To Money: {toMoney(1234.56)}</p>
<p>My Money: {myMoney}</p>
<!-- Script -->
<script>
const [myMoney, setMyMoney] = pp.state(toMoney(15245));
</script>
<p>To Money: {toMoney(1234.56)}</p>
<p>My Money: {myMoney}</p>
<!-- Script -->
<script>
const [myMoney, setMyMoney] = pp.state(toMoney(15245));
</script>