[feat] Implement AtomicRelay and AtomicStore

Author: peterver

src/components/atoms/Game.tsx

@@ -1,30 +1,35 @@
 import { CFG, css } from '~/css';
 import { GameCanvas } from './GameCanvas';
-import { type RelayEvents, Script } from '~/script';
+import { Script } from '~/script';
 import { GameCountdown } from './GameCountdown';
 
 type GameOptions = {
-  sound: RelayEvents['audio:register'];
+  sound: AtomicRelay['audio:register'];
   columns: number;
   rows: number;
   children: any;
-  evtStart: keyof RelayEvents;
-  evtPause: keyof RelayEvents;
-  evtOver: keyof RelayEvents;
+  evtStart: keyof AtomicRelay;
+  evtPause: keyof AtomicRelay;
+  evtOver: keyof AtomicRelay;
 };
 
-export type GameStore = {
+type GameStore = {
   gameConfig: {
     music: 'on' | 'off';
     difficulty: 'beginner' | 'intermediate' | 'expert';
   };
 };
 
-export type GameEvents = {
+type GameEvents = {
   'game:evt:boot': void;
   'game:evt:countdown': void;
 };
 
+declare global {
+  interface AtomicRelay extends GameEvents {}
+  interface AtomicStore extends GameStore {}
+}
+
 export function Game({
   sound,
   columns,

src/components/atoms/GameCanvas.tsx

@@ -5,6 +5,10 @@ export type CanvasEvents = {
   'canvas:draw': { fn?: (ctx: CanvasRenderingContext2D) => void };
 };
 
+declare global {
+  interface AtomicRelay extends CanvasEvents {}
+}
+
 type CanvasOptions = {
   columns: number;
   rows: number;

src/components/atoms/GameCountdown.tsx

@@ -1,8 +1,8 @@
 import { css } from '~/css';
-import {type RelayEvents, Script} from '~/script';
+import {Script} from '~/script';
 
 type GameCountdownProps = {
-  evtStart:keyof RelayEvents;
+  evtStart:keyof AtomicRelay;
 };
 
 export function GameCountdown ({evtStart}:GameCountdownProps) {

src/components/atoms/GameSidebar.tsx

@@ -1,12 +1,11 @@
 import { css } from '~/css';
-import { type RelayEvents } from '~/script';
 import { GameStartButton } from './GameStartButton';
 
 type GameSidebarOptions = {
   width?: number;
   children: any;
-  evtStart: keyof RelayEvents;
-  evtEnd: keyof RelayEvents;
+  evtStart: keyof AtomicRelay;
+  evtEnd: keyof AtomicRelay;
 };
 
 export function GameSidebar({

src/components/atoms/GameStartButton.tsx

@@ -1,10 +1,10 @@
 import { css } from '~/css';
-import { Script, type RelayEvents } from '~/script';
+import { Script } from '~/script';
 
 type GameStartButtonOptions = {
   timer: number;
-  eventStart: keyof RelayEvents;
-  eventOver: keyof RelayEvents;
+  eventStart: keyof AtomicRelay;
+  eventOver: keyof AtomicRelay;
   style?: Record<string, unknown>;
 };
 

src/components/modules/AudioPlayer.tsx

@@ -1,6 +1,6 @@
 import { Module } from '~/script';
 
-export type AudioPlayerEvents = {
+type AudioPlayerEvents = {
   'audio:register': { track: string[]; fx: Record<string, string> };
   'audio:enable': void;
   'audio:disable': void;
@@ -11,6 +11,10 @@ export type AudioPlayerEvents = {
   'audio:stop': void;
 };
 
+declare global {
+  interface AtomicRelay extends AudioPlayerEvents {}
+}
+
 export function AudioPlayer() {
   return (
     <Module name="audio">

src/components/modules/Modal.tsx

@@ -1,12 +1,16 @@
 import {css} from "~/css";
 import {Module, Script} from "~/script";
 
-export type ModalEvents = {
+type ModalEvents = {
   'modal:open': {frag:string};
   'modal:replace': {frag:string};
   'modal:close': void;
 };
 
+declare global {
+  interface AtomicRelay extends ModalEvents {}
+}
+
 export function Modal () {
   const cls = css.use('f', 'fv', 'fa_c', 'fj_c', {
     position: 'absolute',

src/routes/breakout/Game.tsx

@@ -16,7 +16,7 @@ import { GameSidebar } from '~/components/atoms/GameSidebar';
 import { KeyArrowsHorizontal } from '~/components/atoms/Keys';
 
 /* Defines all event types the Breakout game will use. */
-export type BreakoutGameEvents = {
+type BreakoutGameEvents = {
   'breakout:start': void;
   'breakout:pause': void;
   'breakout:gameover': void;
@@ -39,6 +39,10 @@ export type BreakoutGameEvents = {
   'breakout:cleared': void;
 };
 
+declare global {
+  interface AtomicRelay extends BreakoutGameEvents {}
+}
+
 export function BreakoutGame() {
   const gameBoardId = css.cid();
 

src/routes/index.tsx

@@ -14,10 +14,14 @@ import { AudioPlayer } from '~/components/modules/AudioPlayer';
 
 const PREVIEWS = [BreakoutPreview, TetrisPreview, SnakePreview];
 
-export type SystemEvents = {
+type SystemEvents = {
   'sys:randomgame': number;
 };
 
+declare global {
+  interface AtomicRelay extends SystemEvents {}
+}
+
 export async function routes<State extends Record<string, unknown>>(
   r: Router<State>
 ) {

src/routes/snake/Game.tsx

@@ -14,7 +14,7 @@ import { GameModal } from '~/components/atoms/GameModal';
 type Dir = 'up' | 'down' | 'left' | 'right';
 
 /* Defines all event types the Snake game will use. */
-export type SnakeGameEvents = {
+type SnakeGameEvents = {
   'snake:start': void;
   'snake:pause': void;
   'snake:gameover': void;
@@ -26,6 +26,10 @@ export type SnakeGameEvents = {
   };
 };
 
+declare global {
+  interface AtomicRelay extends SnakeGameEvents {}
+}
+
 export function SnakeGame() {
   return (
     <GameModal columns={SNAKE_CFG.COLS}>