Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/gn8-ai/universe-alien-signals below:

gn8-ai/universe-alien-signals: A library that enables simple use of the Alien Signals state management system in modern frontend frameworks.

A library that enables simple use of the alien-signals state management system in modern frontend frameworks.

• Simple: Easy to implement with minimal code
• Flexible: Reuse a single signal across multiple frameworks
• Type Safe: Full TypeScript support
• Best Reactivity: Leverages alien-signals efficient signal management
• Tree Shakable: Bundle only the code you need

• ✅: Implemented
• 🔼: Avoidable
• ⚠️ : Unverified
• ⌛️: Coming Soon

npm install alien-signals @gn8/alien-signals-react

import { useSignal } from '@gn8/alien-signals-react';
import { signal } from 'alien-signals';

const countSignal = signal(0);

export default function Counter() {
  const [count, setCount] = useSignal(countSignal);

  return (
    <button onClick={() => setCount(count + 1)}>
      count is {count}
    </button>
  );
}

npm install alien-signals @gn8/alien-signals-solid

import { useSignal } from '@gn8/alien-signals-solid';
import { signal } from 'alien-signals';

const countSignal = signal(0);

export default function Counter() {
  const [count, setCount] = useSignal(countSignal);

  return (
    <button onClick={() => setCount(count() + 1)}>
      count is {count()}
    </button>
  );
}

npm install alien-signals @gn8/alien-signals-vue

<script setup>
import { useSignal } from '@gn8/alien-signals-vue';
import { signal } from 'alien-signals';

const countSignal = signal(0);

const count = useSignal(countSignal);
</script>

<template>
  <button @click="count++">
    count is {{ count }}
  </button>
</template>

npm install alien-signals @gn8/alien-signals-svelte

<script>
  import { useSignal } from '@gn8/alien-signals-svelte';
  import { signal } from 'alien-signals';

  const countSignal = signal(0);

  const count = useSignal(countSignal);
</script>

<button on:click={() => $count++}>
  count is {$count}
</button>

The following features and support will be added sequentially:

• Documentation and solutions for handling SSR hydration errors
• Enhancement of test coverage
• Implementation of @gn8/alien-signals-svelte
• Creation of Astro framework usage examples

This project is inspired by the following amazing library:

I have been a long-time user of Nanostores with Astro and was impressed by its ease of use. When I learned about alien-signals, I wanted to utilize its reactivity with the same user experience as Nanostores, which led to the development of this library.

Thanks to Nanostores' excellent implementation approach, we were able to quickly progress with support for various frameworks. Much of our code structure and design patterns are based on insights learned from Nanostores.

We deeply thank the Nanostores team for providing the inspiration and knowledge to start this project.

Most of this library's power comes from alien-signals. We thank the developers of alien-signals.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4