create hook to use dollars.js

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atomico/hooks",
   "description": "Series of utilities in hooks format to extend the operation of Atomico",
-  "version": "3.19.2",
+  "version": "3.20.0",
   "type": "module",
   "workspaces": [
     "src/**/*"

src/use-dollars/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "dollars.js": "^0.6.1"
+  }
+}

src/use-dollars/use-dollars.js

@@ -0,0 +1,31 @@
+import { useHost, useEffect } from "atomico";
+import { useSlot } from "../use-slot/use-slot";
+import { State, Host } from "dollars.js";
+
+class AtomicoState extends State {
+  init(state) {
+    return state;
+  }
+}
+
+export function useDollars(ref, config = { prefix: "$" }) {
+  const childNodes = useSlot(ref);
+  const host = useHost();
+
+  useEffect(() => {
+    ref.states = childNodes
+      .filter((el) => el instanceof Element)
+      .map((element) => {
+        const state = new AtomicoState(host.current);
+        const isTemplate = element instanceof HTMLTemplateElement;
+        new Host(isTemplate ? element.content : element, state, config);
+        if (isTemplate)
+          element.parentElement.insertBefore(element.content, element);
+        return state;
+      });
+  }, childNodes);
+
+  ref?.states?.forEach((state) => state.update());
+
+  return ref;
+}