matthewp · October 17, 2021 15:52 · Aug 19, 2019 · Aug 19, 2019
diff --git a/lit-haunted-element.js b/lit-haunted-element.js
@@ -10,6 +10,7 @@ export default class LitHauntedElement extends LitElement {
 
   update(changedProperties) {
     this.hauntedState.run(() => super.update(changedProperties));
+    this.hauntedState.runEffects();
   }
 }
 

diff --git a/skate-haunted-element.js b/skate-haunted-element.js
@@ -16,5 +16,6 @@ export default class extends Base {
 
   renderer(...args) {
     this.hauntedState.run(() => super.renderer(...args));
+    this.hauntedState.runEffects();
   }
 }
diff --git a/lit-haunted-element.js b/lit-haunted-element.js
@@ -0,0 +1,22 @@
+import { LitElement } from 'lit-element';
+import { State } from 'haunted';
+
+export default class LitHauntedElement extends LitElement {
+  constructor() {
+    super();
+
+    this.hauntedState = new State(() => this.requestUpdate(), this);
+  }
+
+  update(changedProperties) {
+    this.hauntedState.run(() => super.update(changedProperties));
+  }
+}
+
+export const litHaunted = (renderer) => {
+  return class extends LitHauntedElement {
+    render() {
+      return renderer.call(this, this);
+    }
+  }
+};
diff --git a/readme.md b/readme.md
@@ -0,0 +1,52 @@
+These are a couple of examples of base class integrations with Haunted. These could be starting points for developing more full fledged mixins.
+
+# LitElement
+
+The LitElement version can be used either as a base class, or as a mixin that takes a render function.
+
+```js
+import { html } from 'lit-element';
+import LitHauntedElement, { litHaunted } from './lit-haunted-element.js';
+import { useState } from 'haunted';
+
+class MyHooksElement extends LitHauntedElement {
+  render() {
+    const [count, setCount] = useState(0);
+
+    return html`Count: ${count}`;
+  }
+}
+
+// OR can be used like so:
+const MyHooksElement2 = litHaunted(() => {
+  const [count, setCount] = useState(0);
+
+  return html`Count: ${count}`;
+});
+```
+
+# SkateJS
+
+Another integration, this time with SkateJS and Preact.
+
+```js
+import { useState } from 'haunted';
+import SkateHauntedElement, { html } from './skate-haunted-element.js';
+
+class MyElement extends SkateHauntedElement {
+  render() {
+    const [count, setCount] = useState(0);
+
+    return html`
+      <div>
+        <p>A paragraph</p>
+        <button type="button" onClick=${() => setCount(count + 1)}>Increment</button>
+        
+        <p><strong>Count:</strong> ${count}</p>
+      </div>
+    `;
+  }
+}
+
+customElements.define('my-element', MyElement);
+```
diff --git a/skate-haunted-element.js b/skate-haunted-element.js
@@ -0,0 +1,20 @@
+import { withComponent } from 'skatejs';
+import  withPreact from '@skatejs/renderer-preact';
+import htm from 'htm';
+import { h } from 'preact';
+import { State } from 'haunted';
+
+export const html = htm.bind(h);
+
+const Base = withComponent(withPreact());
+
+export default class extends Base {
+  constructor() {
+    super();
+    this.hauntedState = new State(() => this.triggerUpdate(), this);
+  }
+
+  renderer(...args) {
+    this.hauntedState.run(() => super.renderer(...args));
+  }
+}
No results found