typed

Web Applications with Effect-TS

MIT License

Downloads
12K
Stars
193
Committers
2

Bot releases are hidden (Show)

typed - @typed/fp Alpha

Published by TylorS almost 2 years ago

@typed/fp alpha release

The first published versions of these packages are here!

This marks the first time I think all of the modules together are working well enough for other people to try it out and see how well its working for them too and gather feedback.

All of the packages depend on the latest alpha/beta releases of fp-ts and Effect-TS

Packages

@typed/[email protected]

Fx, short-hand for the Effects, The core abstraction added to the wider effect-ts ecosystem is push-based reactive streams. They are built directly atop Effect-TS and inherit all of its capabilities. Utilize dependency injection, type-safe errors, logging, and so much more from Effect in a declarative format designed heavily after most.js.

@typed/[email protected]

The core abstraction of all of the higher-level modules is aimed square at making the DOM itself the main point of contact. This includes a wide range of services to utilize dependency injection to access common DOM APIs like window, document, globalThis, navigator and more. This allows easily running your application both within a browser context and a server context.

@typed/[email protected]

The Route module exposes an Effect-TS based abstraction designed around a type-safe DSL for path-to-regexp. This ensures that at compile time it really knows what parameters will and won't be available.

@typed/[email protected]

The Router module exposes a router that provides an Fx-based interface with support for Route, layouts, fallback, redirects, and outlets. It builds atop of @typed/dom to access History, Location, and Document.

It also has support for <base href="/path" /> tags in your HTM to configure the root router.

@typed/[email protected]

A direct Effect-TS port of uhtml lifted to have support for Effect-TS and @typed/fx.

@typed/[email protected] & @typed/[email protected]

The framework module provides helpful tools for constructing web applications utilizing the above abstractions in both a browser and server environment.

When utilized with our Vite plugin, you can use a conventions-based way to automate the building of your application which further minimizes boilerplate around constructing + using our router as well as providing resources to your applications with support for layouts and multiple entry points.

This utilizes Rollup/Vite virtual modules to allow you to point to the directory where your Routes and main functions, and optionally environments defined a Effect-TS Layers and layouts are defined in .ts or .tsx files.

There is special support in a directory for layout.ts files which can provide layouts to all sibling files and sub-directories which do not themselves export a layout or have their own layout.ts file in their directory.

There is also special support for a fallback.ts file at the root of your directory which can define a 404 to render or a redirect to another page.

Checkout our example folder and vite.config.ts to see all of this working in action!

Discord

Join us in Discord to chat about anything and everything related to these projects! https://discord.gg/kpPHEvkaAv