Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ecmel/refable
Super simple JS framework.
https://github.com/ecmel/refable
framework npm-package stimulus
Last synced: 4 months ago
JSON representation
Super simple JS framework.
- Host: GitHub
- URL: https://github.com/ecmel/refable
- Owner: ecmel
- License: mit
- Created: 2023-01-01T16:35:23.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-29T08:09:43.000Z (about 1 year ago)
- Last Synced: 2024-05-01T13:45:21.607Z (9 months ago)
- Topics: framework, npm-package, stimulus
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/refable
- Size: 93.8 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Refable
Super simple JS framework inspired by [Stimulus](https://github.com/hotwired/stimulus).
## Installation
```bash
npm install refable --save-dev
```
## Application
Application is the main class for bootstrapping. Controllers are registered on an application instance. For registering glob of controllers please refer to your bundler's documentation.
```ts
import { Application } from "refable";
import Search from "./controllers/search";
const application = new Application();
application.register("search", Search);
application.run();
```
## Controllers
Controllers are instances of classes that you register in your application. Each controller class inherits from the Controller base class. Controllers can be nested within controllers and can be referenced in the parent controller.
```html
```
```ts
import { Controller } from "refable";
import Result from "./controllers/result";
export default class extends Controller {
declare readonly resultController: Result;
declare readonly resultControllers: Result[];
created() {
//
}
connected() {
//
}
disconnected() {
//
}
resultControllerConnected(result: Result) {
//
}
resultControllerDisconnected(result: Result) {
//
}
}
```
Controller classes are templated so more specific elements can be used if needed.
```ts
import { Controller } from "refable";
export default class extends Controller {
//
}
```
## Values
```html
```
```ts
import { Controller } from "refable";
export default class extends Controller {
declare readonly someValue: string;
someValueChanged(value: string) {
//
}
}
```
## Targets
Targets map important elements to controller properties.
```html
```
```ts
import { Controller } from "refable";
export default class extends Controller {
declare readonly resultTarget: Element;
declare readonly resultTargets: Element[];
resultTargetConnected(el: Element) {
//
}
resultTargetDisconnected(el: Element) {
//
}
}
```
## Actions
Actions are for handling DOM events in controllers.
```html
Find
```
```ts
import { Controller } from "refable";
export default class extends Controller {
find() {
//
}
}
```
### Action Options
You can append one or more action options to an action descriptor if you need to specify event listener options.
```html
Find
```
Following action options are supported:
```
:capture
:once
:passive
:stop
:prevent
```
## Events
The Controller class has a method called dispatch that fires custom events. It takes an event name and an optional payload as arguments.
```html
Find
```
```ts
import { Controller } from "refable";
export default class extends Controller {
find(event: Event) {
this.dispatch("found", { result: "found" });
}
}
```
The dispatched event can be catched with an action in a parent element and handled in a different controller like an action. Optional payload is in event parameter's detail property.
## Plain JS Example
```html
import {
Application,
Controller,
} from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
class Home extends Controller {
connected() {
console.log("Connected");
}
}
const application = new Application();
application.register("home", Home);
application.run();
```