Docs · @astro-dx/core

@astro-dx/core

Reactive primitives — signal, computed, effect — and lifecycle hooks for ViewTransitions.

signal()

 example.ts 
 "code-keyword">import { signal } "code-keyword">from '@astro-dx/core';

"code-keyword">const count = "code-function">signal(0);

console."code-function">log("code-function">count());        // 0
count."code-function">set(5);                // set to 5
count."code-function">update(v => v + 1);    // increment
count."code-function">subscribe(v => console."code-function">log(v)); // listen "code-keyword">for changes 

computed()

 example.ts 
 "code-keyword">import { signal, computed } "code-keyword">from '@astro-dx/core';

"code-keyword">const count = "code-function">signal(0);
"code-keyword">const double = "code-function">computed(() => "code-function">count() * 2);

console."code-function">log("code-function">double());  // 0
count."code-function">set(3);
console."code-function">log("code-function">double());  // 6 

effect()

 example.ts 
 "code-keyword">import { signal, effect } "code-keyword">from '@astro-dx/core';

"code-keyword">const count = "code-function">signal(0);

"code-keyword">const stop = "code-function">effect(() => {
  console."code-function">log('Count is:', "code-function">count());
});

// Later, cleanup
count."code-function">set(1);  // Logs: "Count is: 1"
"code-function">stop();        // Stop listening 

onPageLoad() / onBeforeSwap()

Lifecycle hooks for Astro ViewTransitions. Fall back gracefully without ViewTransitions.

 example.ts 
 "code-keyword">import { onPageLoad, onBeforeSwap } "code-keyword">from '@astro-dx/core';
"code-keyword">import { getElement, destroyAll } "code-keyword">from '@astro-dx/dom';

"code-function">onPageLoad(() => {
  // Initialize after page load
  "code-keyword">const btn = "code-function">getElement('#btn');
  btn?."code-function">on('click', () => { 
    console."code-function">log('clicked');
  });
});

"code-function">onBeforeSwap(() => {
  // Cleanup before navigation
  "code-function">destroyAll();
}); 

Services

Share state across Astro islands with dependency injection.

 cart.service.ts 
 "code-keyword">import { signal, computed } "code-keyword">from '@astro-dx/core';

"code-keyword">export "code-keyword">class CartService {
  #items = signal<"code-type">string[]>([]);

  readonly total = "code-function">computed(() => "code-keyword">this.#"code-function">items().length);

  "code-function">add(item: "code-type">string) {
    "code-keyword">this.#items."code-function">update(prev => [...prev, item]);
  }

  "code-function">clear() {
    "code-keyword">this.#items."code-function">set([]);
  }
} 

 island-a.astro 
 "code-keyword">import { register, inject } "code-keyword">from '@astro-dx/core';
"code-keyword">import { CartService } "code-keyword">from './cart.service';

// Register once
"code-function">register([CartService]);

"code-keyword">const cart = "code-function">inject(CartService);
cart."code-function">add('Product A'); 