https://github.com/oscarmarina/lit-signals-material
Reactive State with Signals in Lit
https://github.com/oscarmarina/lit-signals-material
Last synced: 3 months ago
JSON representation
Reactive State with Signals in Lit
- Host: GitHub
- URL: https://github.com/oscarmarina/lit-signals-material
- Owner: oscarmarina
- License: mit
- Created: 2024-10-31T11:55:15.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-01-19T17:35:48.000Z (5 months ago)
- Last Synced: 2025-01-19T18:29:23.768Z (5 months ago)
- Language: TypeScript
- Homepage: https://stackblitz.com/github/oscarmarina/lit-signals-material?file=README.md
- Size: 522 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
To begin understanding the use and potential of signals with Lit, there’s nothing better than learning from experts.
I’ve combined different approaches from:
- [Reactive State with Signals in Lit by Justin Fagnani](https://justinfagnani.com/2024/10/09/reactive-state-with-signals-in-lit/)
- [Todo App - Lit & Signals](https://lit.dev/playground/#gist=278c5029024866a2cd4c99a7f6b25e44)
- [Todo App - Angular & Material](https://stackblitz.com/edit/stackblitz-starters-ielbus?file=src%2Fcomponents%2Ftodo-app%2Ftodo-app.html)
And tested using:
- [Signal-utils - effect](https://github.com/proposal-signals/signal-utils?tab=readme-ov-file#leaky-effect-via-queuemicrotask)
- [When to use Lit's computed, a.k.a. `willUpdate`, vs `signals`; for dark mode](https://lit.dev/docs/components/lifecycle/#willupdate)
- [Integrating Material Components](https://github.com/material-components/material-web)
### Demo
[](https://stackblitz.com/github/oscarmarina/lit-signals-material?file=README.md)
### `src/TodoApp.ts`:
#### class: `TodoApp`, `todo-app`
##### Mixins
| Name | Module | Package |
| --------------- | ------ | ----------------- |
| `SignalWatcher` | | @lit-labs/signals |
##### Fields
| Name | Privacy | Type | Default | Description | Inherited From |
| --------------------- | ------- | --------------------- | --------------- | ----------- | -------------- |
| `store` | | `Store` | `store` | | |
| `_currentColorScheme` | | | `'light'` | | |
| `_icon` | | `string` | `'light_mode'` | | |
| `_label` | | `string` | `'Light Theme'` | | |
| `todos` | | `Todo[] \| undefined` | | | |
##### Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
| ---------------------- | ------- | ----------- | ---------- | ------ | -------------- |
| `_onToggleColorScheme` | | | | | |
##### Attributes
| Name | Field | Inherited From |
| ------- | ----- | -------------- |
| `todos` | todos | |
Private API
##### Fields
| Name | Privacy | Type | Default | Description | Inherited From |
| -------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------- |
| `#colorSchemeToIcon` | private | `{
light: {icon: 'light_mode', label: 'Light Theme'},
dark: {icon: 'dark_mode', label: 'Dark Theme'},
auto: {icon: 'routine', label: 'System Theme'},
}` | `{ light: {icon: 'light_mode', label: 'Light Theme'}, dark: {icon: 'dark_mode', label: 'Dark Theme'}, auto: {icon: 'routine', label: 'System Theme'}, }` | | |
| `_colorSchemeTpl` | protected | | | | |
| `_progressTpl` | protected | | | | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | --------- | ----------- | -------------- | ------- |
| `js` | `TodoApp` | TodoApp | src/TodoApp.ts | |
### `src/index.ts`:
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | ----------- | ----------- | ------------------------- | ------- |
| `js` | `TodoApp` | TodoApp | ./TodoApp.js | |
| `js` | `ToDoList` | ToDoList | ./todo-list/ToDoList.js | |
| `js` | `ToDoField` | ToDoField | ./todo-field/ToDoField.js | |
### `src/store.ts`:
#### Variables
| Name | Description | Type |
| ------- | ----------- | ------- |
| `store` | | `Store` |
#### Functions
| Name | Description | Parameters | Return |
| ------------- | ----------- | --------------- | ------ |
| `createStore` | | `todos: Todo[]` | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | ------------- | ----------- | ------------ | ------- |
| `js` | `createStore` | createStore | src/store.ts | |
| `js` | `store` | store | src/store.ts | |
### `src/assets/icons.ts`:
#### Variables
| Name | Description | Type |
| ------ | ----------- | ---- |
| `up` | | |
| `down` | | |
| `bin` | | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | ------ | ----------- | ------------------- | ------- |
| `js` | `up` | up | src/assets/icons.ts | |
| `js` | `down` | down | src/assets/icons.ts | |
| `js` | `bin` | bin | src/assets/icons.ts | |
### `src/define/todo-app.ts`:
#### Exports
| Kind | Name | Declaration | Module | Package |
| --------------------------- | ---------- | ----------- | --------------- | ------- |
| `custom-element-definition` | `todo-app` | TodoApp | /src/TodoApp.js | |
### `src/define/todo-field.ts`:
#### Exports
| Kind | Name | Declaration | Module | Package |
| --------------------------- | ------------ | ----------- | ---------------------------- | ------- |
| `custom-element-definition` | `todo-field` | ToDoField | /src/todo-field/ToDoField.js | |
### `src/define/todo-list.ts`:
#### Exports
| Kind | Name | Declaration | Module | Package |
| --------------------------- | ----------- | ----------- | -------------------------- | ------- |
| `custom-element-definition` | `todo-list` | ToDoList | /src/todo-list/ToDoList.js | |
### `src/todo-field/ToDoField.ts`:
#### class: `ToDoField`, `todo-field`
##### Mixins
| Name | Module | Package |
| --------------- | ------ | ----------------- |
| `SignalWatcher` | | @lit-labs/signals |
##### Fields
| Name | Privacy | Type | Default | Description | Inherited From |
| ------- | ------- | ------- | ------- | ----------- | -------------- |
| `store` | | `Store` | `store` | | |
Private API
##### Fields
| Name | Privacy | Type | Default | Description | Inherited From |
| --------------- | --------- | ---- | ------- | ----------- | -------------- |
| `#inputRef` | private | | | | |
| `_textFieldTpl` | protected | | | | |
| `_summaryTpl` | protected | | | | |
##### Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
| ----------------- | ------- | ----------- | ------------------------------------------------ | ------ | -------------- |
| `_addTodoOnEnter` | private | | `ev: KeyboardEvent & {target: HTMLInputElement}` | | |
| `_addTodoOnClick` | private | | | | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | ----------- | ----------- | --------------------------- | ------- |
| `js` | `ToDoField` | ToDoField | src/todo-field/ToDoField.ts | |
### `src/styles/todo-app-styles.css.ts`:
#### Variables
| Name | Description | Type |
| -------- | ----------- | ---- |
| `styles` | | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | -------- | ----------- | --------------------------------- | ------- |
| `js` | `styles` | styles | src/styles/todo-app-styles.css.ts | |
### `src/todo-list/ToDoList.ts`:
#### class: `ToDoList`, `todo-list`
##### Mixins
| Name | Module | Package |
| --------------- | ------ | ----------------- |
| `SignalWatcher` | | @lit-labs/signals |
##### Fields
| Name | Privacy | Type | Default | Description | Inherited From |
| ------- | ------- | ------- | ------- | ----------- | -------------- |
| `store` | | `Store` | `store` | | |
Private API
##### Fields
| Name | Privacy | Type | Default | Description | Inherited From |
| ----------- | --------- | ---- | ------- | ----------- | -------------- |
| `_todosTpl` | protected | | | | |
##### Methods
| Name | Privacy | Description | Parameters | Return | Inherited From |
| ---------------- | --------- | ----------- | ------------------------------ | ------ | -------------- |
| `_todoItemTpl` | protected | | `todo: Todo` | | |
| `_toggleChecked` | private | | `todo: Todo, checked: boolean` | | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | ---------- | ----------- | ------------------------- | ------- |
| `js` | `ToDoList` | ToDoList | src/todo-list/ToDoList.ts | |
### `src/todo-field/styles/todo-field-styles.css.ts`:
#### Variables
| Name | Description | Type |
| -------- | ----------- | ---- |
| `styles` | | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | -------- | ----------- | ---------------------------------------------- | ------- |
| `js` | `styles` | styles | src/todo-field/styles/todo-field-styles.css.ts | |
### `src/todo-list/styles/todo-list-styles.css.ts`:
#### Variables
| Name | Description | Type |
| -------- | ----------- | ---- |
| `styles` | | |
#### Exports
| Kind | Name | Declaration | Module | Package |
| ---- | -------- | ----------- | -------------------------------------------- | ------- |
| `js` | `styles` | styles | src/todo-list/styles/todo-list-styles.css.ts | |