Merge pull request #109 from atellmer/signals

Add Signals

Author: atellmer

README.md

@@ -32,6 +32,7 @@ The lightweight and powerful UI rendering engine without dependencies and writte
 - 🎀 Suspense fallbacks
 - 🧲 Error boundaries
 - ☄️ Hot module replacement
+- 🔔 Signals
 - 💅 Styled components
 - 💃🏼 Spring animations
 - 💽 Server-side rendering
@@ -100,8 +101,8 @@ If you liked the project, please rate it with a star ⭐, it gives me inspiratio
 
 ## Ecosystem
 
-| Package                          | Description                                                      | URL                                                                            |
-|----------------------------------|------------------------------------------------------------------|--------------------------------------------------------------------------------|
+| Package                          | Description                                                      | URL                                      |
+|----------------------------------|------------------------------------------------------------------|------------------------------------------|
 | `@dark-engine/core`              | Abstract core with main functionality                            | [Link](https://github.com/atellmer/dark/tree/master/packages/core)             |
 | `@dark-engine/platform-browser`  | Renderer for browser (Single-Page apps)                          | [Link](https://github.com/atellmer/dark/tree/master/packages/platform-browser) |
 | `@dark-engine/platform-server`   | Renderer for Node.js (Multi-Page, Static-Gen and Universal apps) | [Link](https://github.com/atellmer/dark/tree/master/packages/platform-server)  |
@@ -112,6 +113,7 @@ If you liked the project, please rate it with a star ⭐, it gives me inspiratio
 | `@dark-engine/animations`        | Spring based animations                                          | [Link](https://github.com/atellmer/dark/tree/master/packages/animations)       |
 | `@dark-engine/styled`            | Styled components                                                | [Link](https://github.com/atellmer/dark/tree/master/packages/styled)           |
 | `@dark-engine/data`              | Declarative queries and mutations                                | [Link](https://github.com/atellmer/dark/tree/master/packages/data)             |
+| `@dark-engine/signals`           | Signals, computed signals and signal effects                     | [Link](https://github.com/atellmer/dark/tree/master/packages/signals)             |
 
 ## Usage
 

examples/10k-rows/index.tsx

@@ -1,15 +1,6 @@
-import {
-  type WritableAtom,
-  Text,
-  TagVirtualNode,
-  TextVirtualNode,
-  Flag,
-  component,
-  memo,
-  useMemo,
-  atom,
-} from '@dark-engine/core';
+import { Text, TagVirtualNode, TextVirtualNode, component, memo, useMemo } from '@dark-engine/core';
 import { type SyntheticEvent as E, createRoot, table, tbody, div, button } from '@dark-engine/platform-browser';
+import { type Signal, signal, useSelected } from '@dark-engine/signals';
 
 const createMeasurer = () => {
   let startTime: number;
@@ -46,11 +37,11 @@ const buildData = (count, prefix = ''): Array<DataItem> => {
     .fill(0)
     .map(() => ({
       id: ++nextId,
-      name$: atom(`item: ${nextId} ${prefix}`),
+      name$: signal(`item: ${nextId} ${prefix}`),
     }));
 };
 
-type DataItem = { id: number; name$: WritableAtom<string> };
+type DataItem = { id: number; name$: Signal<string> };
 
 type HeaderProps = {
   onCreate: (e: E<MouseEvent>) => void;
@@ -104,25 +95,26 @@ const Header = component<HeaderProps>(
 const MemoHeader = memo(Header, () => false);
 
 type NameProps = {
-  name$: WritableAtom<string>;
+  name$: Signal<string>;
 };
 
-const Name = component<NameProps>(({ name$ }) => new TextVirtualNode(name$.val()));
+const Name = component<NameProps>(({ name$ }) => new TextVirtualNode(name$.get()));
 
 type RowProps = {
   id: number;
-  name$: WritableAtom<string>;
-  selected$: WritableAtom<number>;
+  name$: Signal<string>;
+  selected$: Signal<number>;
   onRemove: (id: number, e: E<MouseEvent>) => void;
   onHighlight: (id: number, e: E<MouseEvent>) => void;
 };
 
-const Row = component<RowProps>(({ id, selected$, name$, onRemove, onHighlight }) => {
+const Row = component<RowProps>(({ id, name$, selected$, onRemove, onHighlight }) => {
+  const isSelected = useSelected(selected$, id) === id;
+
   return new TagVirtualNode(
     'tr',
     {
-      class: selected$.val(null, id) === id ? 'selected' : undefined,
-      [Flag.STATIC_SLOT_OPT]: true,
+      class: isSelected ? 'selected' : undefined,
     },
     [
       new TagVirtualNode('td', {}, [Name({ name$ })]),
@@ -138,15 +130,17 @@ const Row = component<RowProps>(({ id, selected$, name$, onRemove, onHighlight }
 
 const MemoRow = memo(Row, () => false);
 
+const equal = () => false;
+
 type State = {
-  data$: WritableAtom<Array<DataItem>>;
-  selected$: WritableAtom<number>;
+  data$: Signal<Array<DataItem>>;
+  selected$: Signal<number>;
 };
 
 const App = component(() => {
-  const state = useMemo<State>(() => ({ data$: atom([]), selected$: atom() }), []);
+  const state = useMemo<State>(() => ({ data$: signal([], { equal }), selected$: signal(undefined) }), []);
   const { data$, selected$ } = state;
-  const items = data$.val();
+  const data = data$.get();
 
   const handleCreate = (e: E<MouseEvent>) => {
     measurer.start('create');
@@ -157,23 +151,23 @@ const App = component(() => {
   const handlePrepend = (e: E<MouseEvent>) => {
     measurer.start('prepend');
     e.stopPropagation();
-    const data = data$.get();
+    const data = data$.peek();
     data.unshift(...buildData(1000, '^^^'));
     data$.set(data);
     measurer.stop();
   };
   const handleAppend = (e: E<MouseEvent>) => {
     measurer.start('append');
     e.stopPropagation();
-    const data = data$.get();
+    const data = data$.peek();
     data.push(...buildData(1000, '^^^'));
     data$.set(data);
     measurer.stop();
   };
   const handleInsertDifferent = (e: E<MouseEvent>) => {
     measurer.start('insert different');
     e.stopPropagation();
-    const data = data$.get();
+    const data = data$.peek();
     data.splice(0, 0, ...buildData(5, '***'));
     data.splice(8, 0, ...buildData(2, '***'));
     data$.set(data);
@@ -182,17 +176,18 @@ const App = component(() => {
   const handleUpdateAll = (e: E<MouseEvent>) => {
     measurer.start('update every 10th');
     e.stopPropagation();
-    const data = data$.get();
+    const data = data$.peek();
 
     for (let i = 0; i < data.length; i += 10) {
       data[i].name$.set(x => x + '!!!');
     }
+
     measurer.stop();
   };
   const handleRemove = (id: number, e: E<MouseEvent>) => {
     measurer.start('remove');
     e.stopPropagation();
-    const data = data$.get();
+    const data = data$.peek();
     const idx = data.findIndex(x => x.id === id);
     idx !== -1 && data.splice(idx, 1);
     data$.set(data);
@@ -205,7 +200,7 @@ const App = component(() => {
     measurer.stop();
   };
   const handleSwap = (e: E<MouseEvent>) => {
-    const data = data$.get();
+    const data = data$.peek();
     if (data.length === 0) return;
     measurer.start('swap');
     e.stopPropagation();
@@ -235,9 +230,8 @@ const App = component(() => {
     table({
       class: 'table',
       slot: tbody({
-        key: items.length > 0 ? 1 : 2,
-        [Flag.MEMO_SLOT_OPT]: true,
-        slot: items.map(item => {
+        key: data.length > 0 ? 1 : 2,
+        slot: data.map(item => {
           const { id, name$ } = item;
 
           return MemoRow({

examples/1k-components/index.tsx

@@ -1,6 +1,6 @@
 import { interpolateViridis } from 'd3-scale-chromatic';
 
-import { component, useState, useEffect, useMemo, useUpdate, Flag, TagVirtualNode } from '@dark-engine/core';
+import { component, useState, useEffect, useMemo, useUpdate, TagVirtualNode } from '@dark-engine/core';
 import { createRoot } from '@dark-engine/platform-browser';
 
 const Demo = component(() => {
@@ -38,8 +38,6 @@ const Layout = {
 
 const LAYOUT_ORDER = [Layout.PHYLLOTAXIS, Layout.SPIRAL, Layout.PHYLLOTAXIS, Layout.GRID, Layout.WAVE];
 
-const flagProps = { [Flag.SKIP_SCAN_OPT]: true };
-
 type VizDemoProps = {
   count: number;
 };
@@ -106,8 +104,8 @@ const VizDemo = component<VizDemoProps>(({ count }) => {
   };
 
   return (
-    <svg class='demo' {...flagProps}>
-      <g {...flagProps}>{map(scope.points, renderPoint)}</g>
+    <svg class='demo'>
+      <g>{map(scope.points, renderPoint)}</g>
     </svg>
   );
 });

examples/1k-components/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "start": "npm run dev",
     "build": "npx webpack --env production",
-    "dev": "npx webpack-dev-server --env development"
+    "dev": "npx webpack-dev-server --env production"
   },
   "devDependencies": {
     "ts-loader": "9.4.2",

examples/atoms.ts

@@ -3,8 +3,7 @@ import { createRoot } from '@dark-engine/platform-browser';
 import { type Routes, Router, NavLink } from '@dark-engine/web-router';
 import { createGlobalStyle, styled } from '@dark-engine/styled';
 
-import { PageTransition } from '../spring-router/page-transition';
-import { Pending } from './pending';
+import { isPending$, Pending } from './pending';
 
 const Home = lazy(() => import('./home'));
 const About = lazy(() => import('./about'));
@@ -64,7 +63,7 @@ type ShellProps = {
 const Shell = component<ShellProps>(
   ({ slot }) => {
     return (
-      <PageTransition>
+      <>
         <header>
           <NavLink to='/home'>Home</NavLink>
           <NavLink to='/about'>About</NavLink>
@@ -75,7 +74,7 @@ const Shell = component<ShellProps>(
           <Content>{slot}</Content>
         </Suspense>
         <SlowContent />
-      </PageTransition>
+      </>
     );
   },
   { displayName: 'Shell' },
@@ -85,7 +84,7 @@ const App = component(() => {
   return (
     <>
       <GlobalStyle />
-      <Router routes={routes} mode='concurrent'>
+      <Router routes={routes} mode='concurrent' onChangePending={isPending => isPending$.set(isPending)}>
         {slot => <Shell>{slot}</Shell>}
       </Router>
     </>

examples/concurrent-router/index.tsx

@@ -1,10 +1,12 @@
 import { component } from '@dark-engine/core';
 import { type DarkJSX } from '@dark-engine/platform-browser';
-import { usePending } from '@dark-engine/web-router';
 import { styled } from '@dark-engine/styled';
+import { signal } from '@dark-engine/signals';
+
+const isPending$ = signal(false);
 
 const Pending = component(() => {
-  const isPending = usePending();
+  const isPending = isPending$.get();
 
   return (
     <>
@@ -26,4 +28,4 @@ const Overlay = styled.div<{ isPending: boolean } & DarkJSX.Elements['div']>`
   background-color: #fff;
 `;
 
-export { Pending };
+export { isPending$, Pending };

examples/concurrent-router/pending.tsx

@@ -1,4 +1,4 @@
-import { component, useAtom } from '@dark-engine/core';
+import { component, useState } from '@dark-engine/core';
 import { View, Text } from '@dark-engine/platform-native';
 
 import { Button } from './button';
@@ -8,7 +8,7 @@ type CardProps = {
 };
 
 const Card = component<CardProps>(({ isLast }) => {
-  const count$ = useAtom(0);
+  const [count, setCount] = useState(0);
 
   return (
     <View
@@ -23,9 +23,9 @@ const Card = component<CardProps>(({ isLast }) => {
       alignItems='center'
       marginBottom={isLast ? 66 : 8}>
       <Text fontSize={20} marginBottom={8}>
-        Count is {count$.val()}
+        Count is {count}
       </Text>
-      <Button label='Press me' onPress={() => count$.set(x => x + 1)} />
+      <Button label='Press me' onPress={() => setCount(x => x + 1)} />
     </View>
   );
 });