separate superaction

README.md

@@ -27,16 +27,23 @@ The `SuperActionProvider` component below listens for click events. React develo
 ```tsx
 import React from "react";
 import ReactDOM from "react-dom/client";
+
+import { SuperAction } from "@w-lfpup/superaction";
 import { SuperActionProvider } from "@w-lfpup/react-superaction";
 import { Counter } from "./counter.js";
 
 let rootEl = document.querySelector("#root")!;
-const root = ReactDOM.createRoot(rootEl);
 
-let eventNames: string[] = ["click"];
+let _superAction = new SuperAction({
+	host: rootEl,
+	eventNames: ["click"],
+	connected: true,
+	infix: "-", // react-safe-html-attributes
+});
 
+const root = ReactDOM.createRoot(rootEl);
 root.render(
-	<SuperActionProvider eventNames={eventNames}>
+	<SuperActionProvider target={rootEl}>
 		<Counter />
 	</SuperActionProvider>,
 );

dist/provider.d.ts

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

dist/provider.js

@@ -1,26 +1,18 @@
 import React, { useEffect, useState } from "react";
-import { SuperAction, ActionEvent, } from "@w-lfpup/superaction";
+import { ActionEvent } from "@w-lfpup/superaction";
 import { SuperContext } from "./context.js";
 export function SuperActionProvider(props) {
-    let { eventNames, children, host = document, target } = props;
+    let { children, 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);
+        target.addEventListener("#action", cb);
         return function () {
-            superAction.disconnect();
-            host.removeEventListener("#action", cb);
+            target.removeEventListener("#action", cb);
         };
-    }, [host, target, eventNames]);
+    }, [target]);
     return (React.createElement(SuperContext.Provider, { value: value }, children));
 }

examples/counter/bundled.js

@@ -30244,18 +30244,6 @@ function requireClient () {
 var clientExports = requireClient();
 var ReactDOM = /*@__PURE__*/getDefaultExportFromCjs(clientExports);
 
-const SuperContext = reactExports.createContext(undefined);
-
-function useAction(cb, args) {
-    let action = reactExports.useContext(SuperContext);
-    let [prevAction, setPrevAction] = reactExports.useState(undefined);
-    if (action === prevAction)
-        return;
-    setPrevAction(action);
-    if (action)
-        cb(action);
-}
-
 class ActionEvent extends Event {
     action;
     constructor(action, eventInit) {
@@ -30322,27 +30310,31 @@ function dispatch(params, event) {
     }
 }
 
+const SuperContext = reactExports.createContext(undefined);
+
+function useAction(cb, args) {
+    let action = reactExports.useContext(SuperContext);
+    let [prevAction, setPrevAction] = reactExports.useState(undefined);
+    if (action === prevAction)
+        return;
+    setPrevAction(action);
+    if (action)
+        cb(action);
+}
+
 function SuperActionProvider(props) {
-    let { eventNames, children, host = document, target } = props;
+    let { children, target } = props;
     let [value, setValue] = reactExports.useState(undefined);
     reactExports.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);
+        target.addEventListener("#action", cb);
         return function () {
-            superAction.disconnect();
-            host.removeEventListener("#action", cb);
+            target.removeEventListener("#action", cb);
         };
-    }, [host, target, eventNames]);
+    }, [target]);
     return (React.createElement(SuperContext.Provider, { value: value }, children));
 }
 
@@ -30361,10 +30353,15 @@ function Counter() {
         React.createElement("p", null, count)));
 }
 
-let eventNames = ["click"];
 let rootEl = document.querySelector("#root");
 if (rootEl) {
+    new SuperAction({
+        host: rootEl,
+        eventNames: ["click"],
+        connected: true,
+        infix: "-", // react safe
+    });
     const root = ReactDOM.createRoot(rootEl);
-    root.render(React.createElement(SuperActionProvider, { eventNames: eventNames },
+    root.render(React.createElement(SuperActionProvider, { target: rootEl },
         React.createElement(Counter, null)));
 }

examples/counter/root.js

@@ -1,11 +1,17 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { SuperAction } from "@w-lfpup/superaction";
 import { SuperActionProvider } from "../../dist/mod.js";
 import { Counter } from "./counter.js";
-let eventNames = ["click"];
 let rootEl = document.querySelector("#root");
 if (rootEl) {
+    let _superAction = new SuperAction({
+        host: rootEl,
+        eventNames: ["click"],
+        connected: true,
+        infix: "-", // react safe
+    });
     const root = ReactDOM.createRoot(rootEl);
-    root.render(React.createElement(SuperActionProvider, { eventNames: eventNames },
+    root.render(React.createElement(SuperActionProvider, { target: rootEl },
         React.createElement(Counter, null)));
 }

examples/counter/root.tsx

@@ -1,15 +1,21 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { SuperAction } from "@w-lfpup/superaction";
 import { SuperActionProvider } from "../../dist/mod.js";
 import { Counter } from "./counter.js";
 
-let eventNames: string[] = ["click"];
-
 let rootEl = document.querySelector("#root");
 if (rootEl) {
+	let _superAction = new SuperAction({
+		host: rootEl,
+		eventNames: ["click"],
+		connected: true,
+		infix: "-", // react safe
+	});
+
 	const root = ReactDOM.createRoot(rootEl);
 	root.render(
-		<SuperActionProvider eventNames={eventNames}>
+		<SuperActionProvider target={rootEl}>
 			<Counter />
 		</SuperActionProvider>,
 	);

examples/form/bundled.js

@@ -30244,18 +30244,6 @@ function requireClient () {
 var clientExports = requireClient();
 var ReactDOM = /*@__PURE__*/getDefaultExportFromCjs(clientExports);
 
-const SuperContext = reactExports.createContext(undefined);
-
-function useAction(cb, args) {
-    let action = reactExports.useContext(SuperContext);
-    let [prevAction, setPrevAction] = reactExports.useState(undefined);
-    if (action === prevAction)
-        return;
-    setPrevAction(action);
-    if (action)
-        cb(action);
-}
-
 class ActionEvent extends Event {
     action;
     constructor(action, eventInit) {
@@ -30322,27 +30310,31 @@ function dispatch(params, event) {
     }
 }
 
+const SuperContext = reactExports.createContext(undefined);
+
+function useAction(cb, args) {
+    let action = reactExports.useContext(SuperContext);
+    let [prevAction, setPrevAction] = reactExports.useState(undefined);
+    if (action === prevAction)
+        return;
+    setPrevAction(action);
+    if (action)
+        cb(action);
+}
+
 function SuperActionProvider(props) {
-    let { eventNames, children, host = document, target } = props;
+    let { children, target } = props;
     let [value, setValue] = reactExports.useState(undefined);
     reactExports.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);
+        target.addEventListener("#action", cb);
         return function () {
-            superAction.disconnect();
-            host.removeEventListener("#action", cb);
+            target.removeEventListener("#action", cb);
         };
-    }, [host, target, eventNames]);
+    }, [target]);
     return (React.createElement(SuperContext.Provider, { value: value }, children));
 }
 
@@ -30365,10 +30357,15 @@ function Form() {
         React.createElement("pre", null, formAsJSON)));
 }
 
-let eventNames = ["submit"];
 let rootEl = document.querySelector("#root");
 if (rootEl) {
+    new SuperAction({
+        host: rootEl,
+        eventNames: ["submit"],
+        connected: true,
+        infix: "-", // react safe
+    });
     const root = ReactDOM.createRoot(rootEl);
-    root.render(React.createElement(SuperActionProvider, { eventNames: eventNames },
+    root.render(React.createElement(SuperActionProvider, { target: rootEl },
         React.createElement(Form, null)));
 }

examples/form/root.js

@@ -1,11 +1,17 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { SuperAction } from "@w-lfpup/superaction";
 import { SuperActionProvider } from "../../dist/mod.js";
 import { Form } from "./form.js";
-let eventNames = ["submit"];
 let rootEl = document.querySelector("#root");
 if (rootEl) {
+    let _superAction = new SuperAction({
+        host: rootEl,
+        eventNames: ["submit"],
+        connected: true,
+        infix: "-", // react safe
+    });
     const root = ReactDOM.createRoot(rootEl);
-    root.render(React.createElement(SuperActionProvider, { eventNames: eventNames },
+    root.render(React.createElement(SuperActionProvider, { target: rootEl },
         React.createElement(Form, null)));
 }

examples/form/root.tsx

@@ -1,15 +1,21 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { SuperAction } from "@w-lfpup/superaction";
 import { SuperActionProvider } from "../../dist/mod.js";
 import { Form } from "./form.js";
 
-let eventNames: string[] = ["submit"];
-
 let rootEl = document.querySelector("#root");
 if (rootEl) {
+	let _superAction = new SuperAction({
+		host: rootEl,
+		eventNames: ["submit"],
+		connected: true,
+		infix: "-", // react safe
+	});
+
 	const root = ReactDOM.createRoot(rootEl);
 	root.render(
-		<SuperActionProvider eventNames={eventNames}>
+		<SuperActionProvider target={rootEl}>
 			<Form />
 		</SuperActionProvider>,
 	);