update deps

.github/workflows/browsers.json

@@ -52,4 +52,4 @@
 			}
 		}
 	]
-}
+}

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-dist/
+
+.DS_Store

.npmignore

@@ -0,0 +1 @@
+examples/

.prettierignore

@@ -1,5 +1,6 @@
 dist/
 examples/
 
+*.bundled.js
 *.html
 package-lock.json

README.md

@@ -54,24 +54,24 @@ Now the button dispatches ActionEvents when clicked.
 
 ## Listen
 
-The `useSuperAction` hook connects action events to react-land.
+The `useAction` hook connects action events to react-land.
 
 ```tsx
 import React, { useState } from "react";
-import { ActionInterface, useSuperAction } from "@w-lfpup/react-superaction";
+import { useAction } from "@w-lfpup/react-superaction";
 
 export function Counter() {
 	let [count, setCount] = useState(0);
 
-	useSuperAction((action: ActionInterface) => {
+	useAction((action) => {
 		if ("increment" === action.type) setCount(count + 1);
 	});
 
 	return <button click-="increment">{count}</button>;
 }
 ```
 
-The action object has several properties related to an action event including:
+An action has several properties related to an action event including:
 
 - the action type
 - the original dom event
@@ -163,9 +163,6 @@ So the syntax for `superaction` in react is limited to:
 <button click-="do_something">click me!</button>
 ```
 
-I think it's very stupid to invent a syntax that's impossible to keep up your
-render target but this is the world and I'm not trying to argue too much.
-
 ## License
 
 React-superaction is released under the BSD-3 Clause License.

dist/context.d.ts

@@ -0,0 +1,2 @@
+import type { ActionInterface } from "@w-lfpup/superaction";
+export declare const SuperContext: import("react").Context<ActionInterface | undefined>;

dist/context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const SuperContext = createContext(undefined);

dist/hook.d.ts

@@ -0,0 +1,5 @@
+import { ActionInterface } from "@w-lfpup/superaction";
+type Cb = (action: ActionInterface) => void;
+export declare function useSuperAction(cb: Cb): void;
+export declare function useAction(type: string, cb: Cb): void;
+export {};

dist/hook.js

@@ -0,0 +1,20 @@
+import { useContext, useState } from "react";
+import { SuperContext } from "./provider.js";
+export function useSuperAction(cb) {
+    let action = useContext(SuperContext);
+    let [prevAction, setPrevAction] = useState(undefined);
+    if (action === prevAction)
+        return;
+    setPrevAction(action);
+    if (action)
+        cb(action);
+}
+export function useAction(type, cb) {
+    let action = useContext(SuperContext);
+    let [prevAction, setPrevAction] = useState(undefined);
+    if (action === prevAction || type === action?.type)
+        return;
+    setPrevAction(action);
+    if (action)
+        cb(action);
+}

dist/hooks.d.ts

@@ -0,0 +1,6 @@
+import { ActionInterface } from "@w-lfpup/superaction";
+interface HookCallback {
+    (action: ActionInterface): void;
+}
+export declare function useAction(cb: HookCallback, args?: [string]): void;
+export {};

dist/hooks.js

@@ -0,0 +1,13 @@
+import { useContext, useState } from "react";
+import { SuperContext } from "./context.js";
+export function useAction(cb, args) {
+    let action = useContext(SuperContext);
+    let [prevAction, setPrevAction] = useState(undefined);
+    if (action === prevAction)
+        return;
+    if (args && action && args[0] !== action.type)
+        return;
+    setPrevAction(action);
+    if (action)
+        cb(action);
+}

dist/mod.d.ts

@@ -0,0 +1,3 @@
+export type * from "@w-lfpup/superaction";
+export * from "./hooks.js";
+export * from "./provider.js";

dist/mod.js

@@ -0,0 +1,2 @@
+export * from "./hooks.js";
+export * from "./provider.js";

dist/provider.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import React from "react";
+interface ProviderProps {
+    eventNames: string[];
+    children: ReactNode;
+    host?: EventTarget;
+    target?: EventTarget;
+}
+export declare function SuperActionProvider(props: ProviderProps): React.JSX.Element;
+export {};

dist/provider.js

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from "react";
+import { SuperAction, ActionEvent, } from "@w-lfpup/superaction";
+import { SuperContext } from "./context.js";
+export function SuperActionProvider(props) {
+    let { eventNames, children, host = document, target } = props;
+    let [value, setValue] = useState(undefined);
+    useEffect(function () {
+        let superAction = new SuperAction({
+            infix: "-",
+            host,
+            target,
+            eventNames,
+        });
+        function cb(e) {
+            if (e instanceof ActionEvent)
+                setValue(e.action);
+        }
+        superAction.connect();
+        host.addEventListener("#action", cb);
+        return function () {
+            superAction.disconnect();
+            host.removeEventListener("#action", cb);
+        };
+    }, [host, target, eventNames]);
+    return (React.createElement(SuperContext.Provider, { value: value }, children));
+}