Typescript library that offers a simple way to create a SPA with a MVC approach
Limbo-Ts is a web framework designed for vanilla developers who still find some resistance to embracing some other more famous web frameworks or developers who are tired of feeling constrained by these other web frameworks. It has the goal of offering you an MVC-like approach for your single-page applications that are simple to learn and implement.
In theory, you can use any local development server in NodeJs to serve your SPA using Limbo-Ts, but because I started this development from a Vite Vanilla Typescript project (https://vite.dev/guide), to minimize any unexpected issues, I advise you to get started from there. To create an empty Vite Vanilla Typescript project you can use this comand.
npm create vite@latest my-limbo-app -- --template vanilla-ts
After you have your project created you just have to get the Limbo-Ts library from npm.
npm i limbo-ts
After installing, you can start by creating some component add the reference to the Limbo-Ts framework.
index.html
<body>
<div id="app">
<div id="SomeComponent" data-limbo-component="SomeComponent"></div>
</div>
<script
type="module"
src="/src/main.ts"
></script>
</body>
src/main.ts
import { SomeComponent } from "./components/SomeComponent/SomeComponent";
import Limbo from "./lib";
import "./style.css";
(() => {
const appElement = document.querySelector<HTMLDivElement>("#app");
if (!appElement) {
throw new Error("div with id 'app' is necessary to start the Limbo Application");
}
Limbo.Bootstrap(appElement, {
components: {
SomeComponent,
},
limboRoutes: [],
});
})();
src/components/SomeComponent/SomeComponent.ts
import { LimboComponent, LimboComponentOptions } from "limbo-ts";
import "./SomeComponent.css";
import html from "./SomeComponent.html?raw";
type SomeComponentModel = {
title: string;
}
export class SomeComponent extends LimboComponent<SomeComponentModel> {
constructor(componentId: string, options?: LimboComponentOptions<SomeComponentModel>) {
super(componentId, html, options);
}
protected override onMount(): void {
this.setModelData({
title: "Hello World!"
});
console.log("SomeComponent mounting...");
}
protected override onUnmount(): void {
console.log("SomeComponent unmounting...");
}
}
src/components/SomeComponent/SomeComponent.html
<h1>{{model.title}}</h1>
for more docs you can go to Getting Started
I don't want the library to get too complicated or have a lot of features and tools that in the future could potentially turn into some kind of limitation or bottleneck on the development side. Having said this, additional code to handle Dependencies Injections, HTTP request calls, and others will be not taken into account for this library. I will add in the docs some suggestions to be followed but the purpose is to implement Front End applications your way, so I will only give attention to contributions or requests that will make the current Limbo-Ts library better.
If you appreciate my work and want to support me:
FAQs
Typescript library that offers a simple way to create a SPA with a MVC approach
The npm package limbo-ts receives a total of 81 weekly downloads. As such, limbo-ts popularity was classified as not popular.
We found that limbo-ts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.