Universe alien-signals

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

Warning

While it should work fine for general use, it hasn't been fully tested. Please use with caution.

🛸 Features

• 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

🔌 Status

Framework	Status	SSR Support	Usage	Repo
React	✅	⚠️	🔗	🔗
Solid	✅	⚠️	🔗	🔗
Vue	✅	⚠️	🔗	🔗
Svelte	⌛️	⚠️	⌛️	⌛️

• ✅: Implemented
• 🛑: Not Implemented
• ⚠️: Not Verified
• ⌛️: Coming Soon

💻 Usage

React

Installation

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

Sample Code

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

const $count = signal(0);

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

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

Solid

Installation

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

Sample Code

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

const $count = signal(0);

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

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

Vue

Installation

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

Sample Code

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

const $count = signal(0);

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

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

📚 Roadmap

The following features and support will be added sequentially:

• Implementation of @gn8/alien-signals-svelte
• SSR verification and support
• Enhancement of test coverage
• Creation of Astro framework usage examples

💡 Inspiration

This project is inspired by the following amazing library:

Nanostores

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.

🎉 Acknowledgments

alien-signals

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