<br>

<p align="center">
	<a href="https://signalizejs.com" target="_blank" rel="noopener noreferrer">
		<picture>
			<source media="(prefers-color-scheme: dark)" srcset="https://signalizejs.com/images/logo/logo-dark.svg">
			<source media="(prefers-color-scheme: light)" srcset="https://signalizejs.com/images/logo/logo-light.svg">
			<img alt="Signalize logo" src="https://signalizejs.com/images/logo/logo-light.svg" height="112" width="300">
		</picture>
	</a>
</p>

<br>

<p align="center">
<a href="https://discord.com/invite/V82TvAVRKY"><img src="https://img.shields.io/badge/chat-on%20discord-7289da.svg?sanitize=true" alt="Chat"></a>
<a href="https://github.com/signalizejs/signalize/discussions"><img src="https://user-images.githubusercontent.com/14016808/132510133-76bb66a9-951f-4411-9236-140cac7b7472.png"></a>
<a href="https://twitter.com/signalizejs"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/signalizejs?style=social"></a>
<a href="https://github.com/signalizejs/signalize"><img alt="GitHub Org's stars" src="https://img.shields.io/github/stars/signalizejs/signalize?style=social"></a>
<a href="https://github.com/signalizejs/signalize/blob/master/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/signalizejs/signalize"></a>
<br>
<a href="(https://github.com/signalizejs/signalize/actions/workflows/tests.yaml"><img alt="GitHub Workflow Status (branch)" src="https://github.com/signalizejs/signalize/actions/workflows/tests.yaml/badge.svg"></a>
<a href="https://codecov.io/gh/signalizejs/signalize"><img src="https://codecov.io/gh/signalizejs/signalize/branch/master/graph/badge.svg?token=ZJLKX877DF"/></a>
<a href="https://github.com/signalizejs/signalize/issues"><img alt="GitHub issues" src="https://img.shields.io/github/issues/signalizejs/signalize"></a>
<a href="https://github.com/signalizejs/signalize"><img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/signalizejs/signalize"></a>
<a href="https://github.com/signalizejs/signalize/releases"><img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/signalizejs/signalize"></a>
<a href="https://github.com/signalizejs/signalize"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/signalizejs/signalize"></a>
</p>

## ✨ Introduction

SignalizeJS is a client-side, multipurpose, dependency-less, easily extensible, module based microframework that uses Signals and Events under the hood.
- 💎 Small learning curve
- 💎 Small size - Core 2 KB
- 💎 ES module based - import only what you need
- 💎 No dependencies

## 📦 Ecosystem
Signalize imports only a small 2 KB core and you decide what to import and when.
This makes the framework small, scalable and flexible.

| Package                |  Description                                                                                                           |
| -----------------------| -----------------------------------------------------------------------------------------------------------------------|
| [ajax]                 | A wrapper around the native JavaScript fetch API.                                                                      |
| [bind]                 | Bind signals and values to element attributes and properties.                                                          |
| [component]            | Create reusable web components with minimum effort.                                                                    |
| [dialog]               | Wrapper around native JavaScript dialog functionality.                                                                 |
| [directives]           | Attribute Directives inspired by Vue and Svelte.                                                                       |
| [dom/ready]            | DOM ready listener.                                                                                                    |
| [dom/traverser]        | Traverse DOM nodes asynchronously.                                                                                     |
| [evaluator]            | Javascript evaluator without unsafe eval.                                                                              |
| [event]                | Add event listener to an element or listen to global events.                                                           |
| [hyperscript]          | Hyperscript: create HTML elements easily with reactive data and attributes.                                            |
| [intersection-observer]| Observe changes in the element intersection with an ancestor element or with the document's viewport.                  |
| [logger]               | Wrapper around console (log, info, warning, error) for sending JS log info to the server.                              |
| [mutation-observer]    | Watch for changes being made to the DOM tree of the root or selected element.                                          |
| [offset]               | Get element coordinates.                                                                                               |
| [scope]                | An utility for safely attaching data to a node prototype.                                                              |
| [signal]               | Reactive primitive that can be watched, used to create stores, or bound to element properties and attributes.          |
| [sizes]                | Get computed element sizes.                                                                                            |
| [snippets]             | Redraw the current DOM elements based on string input.                                                                 |
| [spa]                  | Turn any website into a Single Page Application (SPA) in a minute.                                                     |
| [strings/cases]        | A set of utilities for convrting strings from one case to another.                                                     |
| [task]                 | Schedule tasks to be executed only if there is no pending user input. Used for breaking long tasks into smaller ones.  |
| [viewport]             | Retrieve element information relative to the current viewport.                                                         |
| [visibility]           | Retrieve information about HTML element visibility.                                                                    |

[ajax]: https://signalizejs/docs/modules/ajax
[bind]: https://signalizejs/docs/modules/bind
[component]: https://signalizejs/docs/modules/component
[dialog]: https://signalizejs/docs/modules/dialog
[directives]: https://signalizejs/docs/modules/directives
[dom/ready]: https://signalizejs/docs/modules/dom-ready
[dom/traverser]: https://signalizejs/docs/modules/dom-traverser
[evaluator]: https://signalizejs/docs/modules/evaluator
[event]: https://signalizejs/docs/modules/event
[hyperscript]: https://signalizejs/docs/modules/hyperscript
[intersection-observer]: https://signalizejs/docs/modules/intersection-observer
[logger]: https://signalizejs/docs/modules/logger
[mutation-observer]: https://signalizejs/docs/modules/mutation-observer
[offset]: https://signalizejs/docs/modules/offset
[scope]: https://signalizejs/docs/modules/scope
[signal]: https://signalizejs/docs/modules/signal
[sizes]: https://signalizejs/docs/modules/sizes
[snippets]: https://signalizejs/docs/modules/snippets
[spa]: https://signalizejs/docs/modules/spa
[strings/cases]: https://signalizejs/docs/modules/strings-cases
[task]: https://signalizejs/docs/modules/task
[viewport]: https://signalizejs/docs/modules/viewport
[visibility]: https://signalizejs/docs/modules/visibility

## Browsers Compatibility
- 0.5%
- Not dead

## 💡 Examples, Changelog, Issues
- Live examples and tutorials: [documentation](https://signalizejs.com/docs/get-started)
- Changelog and release changes: [releases](https://github.com/signalizejs/signalize/releases)
- Have an idea? Found a bug? Feel free to create an [issue](https://github.com/signalizejs/signalize/issues)

## 🤟 Stay In Touch

- Visit Signalize website [https://signalizejs.com](https://signalizejs.com).
- Follow Signalize on [Twitter](https://twitter.com/signalizejs).
- Join Signalize community on [Discord](https://discord.com/invite/V82TvAVRKY).

## 👷 Contributing
Please make sure to read the [Contributing Guide](https://github.com/signalizejs/signalize/blob/master/.github/CODE_OF_CONDUCT.md) before making a pull request.

## 📝 License

[MIT](https://opensource.org/licenses/MIT)

Copyright (c) 2024-present, Vladimír Macháček
