npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@agile-ts/core

v0.2.9

Published

Spacy, Simple, Scalable State Management Framework

Downloads

159

Readme

⚠️ No longer actively maintained. In case there will be a higher demand and more known bugs in the future, I will be happy to continue improving this project. But as for now its stable and can be used in any sort of project. In case you face any problem feel free open an issue.

❓ If you've any questions, don't hesitate to start a discussion.

🎇 Global State and Logic Library

// -- core.js ------------------------------------------

// 1️⃣ Create State with the initial value "Hello Friend!"
const MY_FIRST_STATE = createState("Hello Friend!");


// -- MyComponent.whatever ------------------------------------------

// 2️⃣ Bind initialized State to the desired UI-Component.
// And wolla, the Component is reactive. 
// Everytime the State mutates the Component re-renders.
const myFirstState = useAgile(MY_FIRST_STATE);
console.log(myFirstState); // Returns "Hello Friend!"

Want to learn how to implement AgileTs in your preferred UI-Framework? Check out our Quick Start Guides.

⛳️ Sandbox

Test AgileTs yourself in a codesandbox. It's only one click away. Just select your preferred Framework below.

More examples can be found in the Example section.

AgileTs is an atom based global State and Logic Library implemented in Typescript. It offers a reimagined API that focuses on developer experience and allows you to easily and flexible manage your application States. Besides States, AgileTs offers some other powerful APIs that make your life easier, such as Collections and Computed States. The philosophy behind AgileTs is simple:

🚅 Straightforward

Write minimalistic, boilerplate-free code that captures your intent.

// Create State with the inital value 'frank'
const MY_STATE = createState('frank');

// Update the State value from 'frank' to 'jeff'
MY_STATE.set('jeff');

// Undo the latest State value change
MY_STATE.undo();

// Reset the State value to its initial value
MY_STATE.reset();

// Permanently store the State value in an external Storage
MY_STATE.persist("storage-key"); 

🤸‍ Flexible

  • Works in nearly any UI-Framework (currently supported are React, React-Native and Vue).
  • Surly behaves with the workflow that suits you best. No need for reducers, actions, ..
  • Has 0 external dependencies.

⛳️ Centralize

AgileTs is designed to take all business logic out of the UI-Components and put them in a central place, often called core. The advantage of keeping logic separate to UI-Components, is that your code is more decoupled, portable, scalable, and above all, easily testable.

You can learn more about ways to centralize your application logic with AgileTs in our Style Guides.

🎯 Easy to Use

Learn the powerful tools of AgileTs in a short period of time. An excellent place to start are our Quick Start Guides, or if you don't like to follow tutorials, you can jump straight into the Example section.

In order to use AgileTs in a UI-Framework, we need to install two packages.

  • The core package contains the State Management Logic of AgileTs and therefore provides powerful classes like the State Class.

    npm install @agile-ts/core
  • A fitting Integration for the UI-Framework of your choice, on the other hand, is an interface to the actual UI and provides useful functionalities to bind States to UI-Components for reactivity. I prefer React, so let's go with the React Integration for now.

    npm install @agile-ts/react

Does AgileTs sound interesting to you? Take a look at our documentation, to learn more about its functionalities and capabilities. If you have any further questions, feel free to join our Community Discord. We will be happy to help you.

Get a part of AgileTs and start contributing. We welcome any meaningful contribution. 😀 To find out more about contributing, check out the CONTRIBUTING.md.

♥️ Contributors

Become a contributor

| Name | Latest Version | Description | | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | | @agile-ts/core | badge | State Manager Logic | | @agile-ts/react | badge | React Integration | | @agile-ts/vue | badge | Vue Integration | | @agile-ts/api | badge | Promise based API | | @agile-ts/multieditor | badge | Simple Form Manager | | @agile-ts/event | badge | Handy class for emitting UI Events | | @agile-ts/logger | badge | Logging API of AgileTs | | @agile-ts/utils | badge | Utilities of AgileTs | | @agile-ts/proxytree | badge | Proxy Tree for tracking accessed properties | |

AgileTs is inspired by MVVM Libraries like MobX and PulseJs.

🕐 Time spent building this project

wakatime