@a11d/lit 0.2.6 → 0.2.7

package/README.md

@@ -2,179 +2,7 @@
 
 A thin wrapper around the Lit library consisting of some additional features:
 
-# `updated` Decorator (along with upgraded `state` and `property` decorators)
-
-The `updated` decorator allows you to define a method on a reactive property that will be called after the component has been updated due to a change in the property. This is useful for dispatching events or performing other actions **after** the component has been updated.
-
-```ts
-import { component, Component, html, state, updated } from '@a11d/lit'
-
-@component('lit-data')
-class Data extends Component {
-	@updated(async function(this: Data) {
-		await this.fetch()
-	})
-	@state() code?: string
-
-	private fetch() {
-		if (this.code) {
-			this.data = await fetch(`https://api.example.com/${this.code}`)
-		}
-	}
-
-	get template() {
-		return html`
-			<input placeholder='code' .value=${this.count} @change=${(e: Event) => this.count = Number((e.target as HTMLInputElement).value)} />
-			${this.data.map(item => html`<div>${item}</div>`)}
-		`;
-	}
-}
-```
-
-Additionally the `state` and `property` decorators have been upgraded to allow for an `updated` callback directly an a property. The below example is equivalent to the above example.
-
-```ts
-import { component, Component, html, state, updated } from '@a11d/lit'
-
-@component('lit-data')
-class Data extends Component {
-	@state({
-		async updated(this: Data) {
-			await this.fetch()
-		}
-	}) code?: string
-
-	private fetch() {
-		if (this.code) {
-			this.data = await fetch(`https://api.example.com/${this.code}`)
-		}
-	}
-
-	get template() {
-		return html`
-			<input placeholder='code' .value=${this.count} @change=${(e: Event) => this.count = Number((e.target as HTMLInputElement).value)} />
-			${this.data.map(item => html`<div>${item}</div>`)}
-		`;
-	}
-}
-```
-
-# `event` Decorator
-
-The `event` decorator allows you to make a class field an event dispatcher. This is useful for dispatching custom events on your components.
-
-```ts
-import { component, Component, html, event } from '@a11d/lit'
-
-@component('lit-event')
-class Event extends Component {
-	@event() readonly delete!: EventDispatcher<'single' | 'all'>
-
-	get template() {
-		return html`
-			<button @click=${() => this.delete.dispatch('single')}>Delete Single</button>
-			<button @click=${() => this.delete.dispatch('all')}>Delete All</button>
-		`;
-	}
-}
-```
-
-The `event` decorator will convert the field into a getter that returns an instance of either `HTMLEventDispatcher<T>` or `PureEventDispatcher<T>` based on the context it's used in. Both of which implement the `EventDispatcher<T>` interface.
-
-## Options
-
-The `event` decorator accepts an options object of type `EventInit` as its first argument. The following options are available:
-- `bubbles` - A boolean value indicating whether the event bubbles. The default is false.
-- `cancelable` - A boolean value indicating whether the event can be cancelled. The default is false.
-- `composed` - A boolean value indicating whether the event will trigger listeners outside of a shadow root. The default is false.
-
-```ts
-import { component, Component, html, event } from '@a11d/lit'
-
-@component('lit-event-bubbles')
-class EventBubbles extends Component {
-	@event({ bubbles: true, composed: true }) readonly delete!: EventDispatcher<'single' | 'all'>
-
-	get template() {
-		return html`
-			<button @click=${() => this.delete.dispatch('single')}>Delete Single</button>
-			<button @click=${() => this.delete.dispatch('all')}>Delete All</button>
-		`;
-	}
-}
-```
-
-# `eventListener` Decorator
-
-The `eventListener` decorator allows you to make a method to be an event listener.
-
-```ts
-import { component, Component, html, eventListener } from '@a11d/lit'
-
-@component('lit-event-listener')
-class EventListener extends Component {
-	@eventListener('delete')
-	private handleClick(e: CustomEvent<'single' | 'all'>) {
-		// This should have been (hopefully!) dispatched by the `lit-event-bubbles` component
-	}
-
-	get template() {
-		return html`
-			<lit-event-bubbles></lit-event-bubbles>
-			<lit-event-bubbles></lit-event-bubbles>
-			<lit-event-bubbles></lit-event-bubbles>
-		`;
-	}
-}
-```
-
-Providing a shorthand parameter of type `string` will automatically add an event listener to the root component. This can be customized by providing an object with the following properties:
-
-
-```ts
-import { component, Component, html, eventListener } from '@a11d/lit'
-
-@component('lit-event-listener')
-class EventListener extends Component {
-	@eventListener({
-		type: 'delete',
-		async target(this: EventListener) {
-			await this.updateComplete
-			return this.renderRoot.querySelectorAll('lit-event')
-		},
-	})
-	private handleDelete(e: CustomEvent<'single' | 'all'>) {
-		// Now we know for sure that this event was dispatched by a `lit-event` components belonging to this component
-	}
-
-	@eventListener({ type: 'keydown', target: document })
-	private handleDocumentClick(e: PointerEvent) {
-		// Demonstration of listening to events on the document
-	}
-
-	get template() {
-		return html`
-			<lit-event></lit-event>
-			<lit-event></lit-event>
-			<lit-event></lit-event>
-		`;
-	}
-}
-```
-
-# `style` Directive
-
-The `style` directive allows you to define styles for the underlying element.
-
-```ts
-import { component, Component, html, style } from '@a11d/lit'
-
-@component('lit-style')
-class Style extends Component {
-	get template() {
-		return html`
-			<div ${style({ color: 'red' })}>Hello World</div>
-		`;
-	}
-}
-```
+- ### [`updated` Decorator (along with upgraded `state` and `property` decorators)](./src/updated/README.md)
+- ### [`event` Decorator](./src/event/README.md)
+- ### [`eventListener` Decorator](./src/eventListener/README.md)
+- ### [`style` Directive](./src/style/README.md)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@a11d/lit",
-	"version": "0.2.6",
+	"version": "0.2.7",
 	"description": "A thin wrapper around the Lit library",
 	"repository": {
 		"type": "git",