${title}
diff --git a/docs/components/sandbox/signal-counter.css b/docs/components/sandbox/signal-counter.css new file mode 100644 index 00000000..e4993039 --- /dev/null +++ b/docs/components/sandbox/signal-counter.css @@ -0,0 +1,19 @@ +:host, +:root { + text-align: center; +} + +.heading { + display: block; + text-decoration: underline; +} + +.even { + color: green; + display: block; +} + +.odd { + color: red; + display: block; +} diff --git a/docs/components/sandbox/signal-counter.jsx b/docs/components/sandbox/signal-counter.jsx new file mode 100644 index 00000000..db731a84 --- /dev/null +++ b/docs/components/sandbox/signal-counter.jsx @@ -0,0 +1,54 @@ +export const inferredObservability = true; + +export default class SignalCounter extends HTMLElement { + count; + parity; + isLarge; + + constructor() { + super(); + this.count = new Signal.State(0); + this.parity = new Signal.Computed(() => (this.count.get() % 2 === 0 ? 'even' : 'odd')); + this.isLarge = new Signal.Computed(() => + this.count.get() >= 100 ? 'Wow!!!' : 'Keep Going...', + ); + } + + // Light DOM + connectedCallback() { + this.render(); + } + + increment() { + this.count.set(this.count.get() + 1); + } + + decrement() { + this.count.set(this.count.get() - 1); + } + + double() { + this.count.set(this.count.get() * 2); + } + + render() { + const { count, parity, isLarge } = this; + + return ( +
+ My Signal Counter
+
+
+ {/* TODO: inline version breaks with effects */}
+ {/* */}
+
+
+ The count is {count.get()} ({parity.get()})
+
+
+ );
+ }
+}
+
+customElements.define('sb-signal-counter-jsx', SignalCounter);
diff --git a/docs/components/sandbox/signal-counter.tsx b/docs/components/sandbox/signal-counter.tsx
new file mode 100644
index 00000000..116821fe
--- /dev/null
+++ b/docs/components/sandbox/signal-counter.tsx
@@ -0,0 +1,68 @@
+import sheet from './signal-counter.css' with { type: 'css' };
+
+export const inferredObservability = true;
+
+export default class SignalCounter extends HTMLElement {
+ count;
+ parity;
+ isLarge;
+
+ constructor() {
+ super();
+ this.count = new Signal.State(0);
+ this.parity = new Signal.Computed(() => (this.count.get() % 2 === 0 ? 'even' : 'odd'));
+ this.isLarge = new Signal.Computed(() =>
+ this.count.get() >= 100 ? 'Wow!!!' : 'Keep Going...',
+ );
+ }
+
+ // Shadow DOM
+ connectedCallback() {
+ if (!this.shadowRoot) {
+ this.attachShadow({
+ mode: 'open',
+ });
+ this.render();
+ }
+
+ this.shadowRoot.adoptedStyleSheets = [sheet];
+ }
+
+ increment() {
+ this.count.set(this.count.get() + 1);
+ }
+
+ decrement() {
+ this.count.set(this.count.get() - 1);
+ }
+
+ double() {
+ this.count.set(this.count.get() * 2);
+ }
+
+ disconnectedCallback() {
+ console.log('Disconnected!');
+ }
+
+ render() {
+ const { count, parity, isLarge } = this;
+
+ return (
+ ({isLarge.get()})
+
+ My Signal Counter
+
+
+ {/* TODO: inline version breaks with effects */}
+ {/* https://github.com/ProjectEvergreen/wcc/issues/256 */}
+ {/* */}
+
+
+ The count is {count.get()} ({parity.get()})
+
+
+ );
+ }
+}
+
+customElements.define('sb-signal-counter-tsx', SignalCounter);
diff --git a/docs/components/sandbox/signal-greeting.tsx b/docs/components/sandbox/signal-greeting.tsx
new file mode 100644
index 00000000..87447c07
--- /dev/null
+++ b/docs/components/sandbox/signal-greeting.tsx
@@ -0,0 +1,30 @@
+export const inferredObservability = true;
+
+export default class SignalGreeting extends HTMLElement {
+ name;
+
+ constructor() {
+ super();
+ this.name = new Signal.State('World');
+ }
+
+ connectedCallback() {
+ if (!this.shadowRoot) {
+ this.attachShadow({ mode: 'open' });
+ }
+
+ this.render();
+ }
+
+ render() {
+ const { name } = this;
+
+ return (
+ ({isLarge.get()})
++ Hello {name.get()} 👋 +
+ ); + } +} + +customElements.define('sb-signal-greeting-jsx', SignalGreeting); diff --git a/docs/pages/docs.md b/docs/pages/docs.md index 55c2b444..d239bf87 100644 --- a/docs/pages/docs.md +++ b/docs/pages/docs.md @@ -551,53 +551,103 @@ Using, the Counter example from above, we would amend it like so: -### (Inferred) Attribute Observability +### Inferred Observability (Signals) -An optional feature supported by JSX based compilation is `inferredObservability`. With this enabled, WCC will read any `this` member references in your component's `render` function and map each member instance to: +An optional feature based on [TC39 Signals](https://github.com/tc39/proposal-signals) that when enabled, will map Signal reads in a component's JSX template to [observed attributes](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes). This feature is inspired by projects such as [**SolidJS**](https://www.solidjs.com/) and [**Svelte**](https://svelte.dev/). -1. an entry in the `observedAttributes` array -1. automatically handle `attributeChangedCallback` updates +The JSX transformation will now also do the following: -So taking the above counter example, and opting-in to this feature, we just need to enable the `inferredObservability` option in the component by exporting it as a `const`: +1. Map each Signal to an entry in the `observedAttributes` array +1. Automatically handle / generate `attributeChangedCallback` updates +1. Setup effects (and tear them down in `disconnectedCallback`) + +So taking the above counter example, enable the inferred observability behavior as an option in the component by exporting it as a `const`:
-
+
+
+
- You have clicked {count} times
+ The count is {count.get()} ({parity.get()})
-
);
}
}
+
+ customElements.define('wcc-counter', Counter);
```
WCC Sandbox
+JSX + DSD + inferredObservability (Greeting)
+ + ++ +
JSX + DSD + inferredObservability (Counter)
+ ++ +
+ <sb-signal-counter-tsx></sb-signal-counter-tsx> ++
+ <sb-signal-counter-tsx + count="3" + ></sb-signal-counter-tsx> ++ +
+
Light DOM (no JS)
Declarative Shadow DOM (has JS)
></sb-card> ++
HTML Web Component (Light DOM + has JS)
+
JSX + Declarative Shadow DOM (has JS)
JSX + Light DOM + inferredObservability (has JS)
-- <sb-counter-jsx - count="5" - ></sb-counter-jsx> -- -
- -
JSX + DSD + inferredObservability (has JS)
- -- <sb-counter-dsd-jsx - count="3" - ></sb-counter-dsd-jsx> -- -
TypeScript
- -- <sb-greeting-ts - name="TypeScript" - ></sb-greeting-ts> -- -
TSX
- -- <sb-counter-tsx - count="3" - ></sb-counter-tsx> -- -
TSX + DSD + inferredObservability
- -
- <sb-counter-dsd-tsx
+ <sb-signal-counter-jsx
count="3"
- ></sb-counter-dsd-tsx>
+ ></sb-signal-counter-jsx>