update examples to show all decorator usages, class components, and custom elements

README.md

@@ -43,8 +43,8 @@ signals, and for using `class`es as Solid.js components.
 # At a glance
 
 ```jsx
-import {createEffect, render, batch} from 'solid-js'
-import {component, signal, memo} from 'classy-solid'
+import {render, batch} from 'solid-js'
+import {component, signal, memo, effect, stopEffects} from 'classy-solid'
 
 //////////////////////////////////////////////////
 // Make plain classes reactive with Solid signals.
@@ -53,10 +53,20 @@ class Counter {
 	@signal count = 0
 	@signal num = 10
 
-	@memo get sum() {
+	@memo get #sum() {
 		return this.count + this.num
 	}
 
+	@effect #logCount() {
+		// Log the count whenever it changes.
+		console.log(`Count is: ${this.count}`)
+	}
+
+	@effect #logSum() {
+		// Log the sum whenever it changes.
+		console.log(`Sum is: ${this.#sum}`)
+	}
+
 	increment() {
 		this.count++
 	}
@@ -66,16 +76,6 @@ const counter = new Counter()
 
 setInterval(() => counter.increment(), 1000)
 
-createEffect(() => {
-	// Log the count whenever it changes.
-	console.log(`Count is: ${counter.count}`)
-})
-
-createEffect(() => {
-	// Log the sum whenever it changes.
-	console.log(`Sum is: ${counter.sum}`)
-})
-
 counter.count = 5 // Logs "Count is: 5" and "Sum is: 15"
 counter.num = 20 // Logs "Sum is: 25"
 
@@ -87,23 +87,25 @@ batch(() => {
 	counter.num = 15
 })
 
+// ...later, clean up when done...
+stopEffects(counter)
+
 //////////////////////////////////////////////////
 // Optionally use classes as Solid components.
 
 @component
 class MyComp {
 	@signal message = 'Hello, World!'
+	@signal name = 'Asa'
 
-	template(props) {
-		setTimeout(() => {
-			this.message = 'Hello after 3 seconds!'
-		}, 3000)
+	template() {
+		setTimeout(() => (this.message = 'Hello after 3 seconds!'), 3000)
 
 		return (
 			<div>
 				<h1>{this.message}</h1>
 
-				<p>My name is {props.name}.</p>
+				<p>My name is {this.name}.</p>
 
 				<p>The count is: {counter.count}</p>
 			</div>
@@ -114,6 +116,8 @@ class MyComp {
 render(() => <MyComp name="Joe" />, document.body)
 ```
 
+See the [live example](https://rawcdn.githack.com/lume/classy-solid/84a66ba70924f7a534792910aaeace3f594ff1db/example/index.html) and its [source code](https://github.com/lume/classy-solid/blob/84a66ba70924f7a534792910aaeace3f594ff1db/src/example.ts).
+
 # Install
 
 #### `npm install classy-solid`

dist/example.d.ts

@@ -1,7 +1,2 @@
-declare class Foo {
-    foo: number;
-    get lorem(): number;
-    set lorem(v: number);
-}
-export { Foo };
+export {};
 //# sourceMappingURL=example.d.ts.map