tastejs · christian-bromann · Aug 3, 2022 · julienw · May 23, 2023
diff --git a/examples/lit/index.html b/examples/lit/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Lit • TodoMVC</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+    <link rel="stylesheet" media="screen" href="node_modules/todomvc-app-css/index.css" />
+    <script type="module" src="out/index.js"></script>
+</head>
+<body>
+    <section class="todoapp">
+        <todo-app></todo-app>
+    </section>
+
+    <footer class="info">
+        <p>Double-click to edit a todo</p>
+        <p>Created by <a href="http://github.com/christian-bromann/">christian-bromann</a></p>
+        <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+    </footer>
+
+    <script src="node_modules/todomvc-common/base.js"></script>
+</body>
+</html>
diff --git a/examples/lit/js/components/App.js b/examples/lit/js/components/App.js
@@ -0,0 +1,76 @@
+import { connect } from 'pwa-helpers'
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { when } from 'lit/directives/when.js';
+
+import { store, getTodos } from '../store.js'
+import './TodoForm.js';
+import './TodoList.js';
+import './Footer.js';
+
+import { appCSSRules, baseCSSRules } from '../constant.js'
+
+export class TodoApp extends connect(store)(LitElement) {
+    static styles = [
+        css`:host(:focus) { box-shadow: none!important }`,
+        ...baseCSSRules.map((r) => unsafeCSS(r)),
+        ...appCSSRules.map((r) => unsafeCSS(r))
+    ]
+
+    static getFilter () {
+        return location.hash.includes('#/')
+            ? location.hash.replace('#/', '')
+            : 'all'
+    }
+
+    constructor (...args) {
+        super(...args)
+
+        this.filter = TodoApp.getFilter()
+        window.addEventListener('hashchange', () => {
+            this.filter = TodoApp.getFilter()
+            this.requestUpdate()
+        })
+    }
+
+    stateChanged() {
+        this.requestUpdate()
+    }
+
+    get todos () {
+        return getTodos(this.filter)
+    }
+
+    get itemsLeft () {
+        const state = store.getState()
+        console.log('!!', state.todos);
+        return this.totalItems - state.completed.length
+    }
+
+    get totalItems () {
+        const state = store.getState()
+        return Object.keys(state.todos).length
+    }
+
+    render () {
+        return html`
+        <section class="todoapp">
+            <header class="header">
+                <h1>todos</h1>
+                <todo-form></todo-form>
+            </header>
+            <section class="main">
+                <todo-list todos=${JSON.stringify(this.todos)}></todo-list>
+            </section>
+            ${when(this.totalItems > 0, () => html`
+                <todo-footer
+                    itemsLeft=${this.itemsLeft}
+                    totalItems=${this.totalItems}
+                    selectedFilter=${this.filter}>
+                </todo-footer>
+            `)}
+        </section>
+        `
+    }
+}
+customElements.define('todo-app', TodoApp)
+
diff --git a/examples/lit/js/components/Footer.js b/examples/lit/js/components/Footer.js
@@ -0,0 +1,67 @@
+import { html, css, LitElement, unsafeCSS } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { when } from 'lit/directives/when.js';
+
+import { deleteCompleted } from '../store.js'
+import { appCSSRules, baseCSSRules } from '../constant.js'
+
+function filterLink({ text, filter, selectedFilter }) {
+    return html`<a
+        class="${classMap({ selected: filter === selectedFilter })}"
+        href="#/${filter}"
+    >${text}</a>`;
+}
+
+export class Footer extends LitElement {
+    static properties = {
+        itemsLeft: { type: Number },
+        totalItems: { type: Number },
+        selectedFilter: { type: String }
+    }
+
+    static styles = [
+        css`:host(:focus) { box-shadow: none!important }`,
+        ...baseCSSRules.map((r) => unsafeCSS(r)),
+        ...appCSSRules.map((r) => unsafeCSS(r))
+    ]
+
+    render () {
+        return html`
+        <footer class="footer">
+            <span class="todo-count">
+                <strong>${this.itemsLeft}</strong>
+                items left
+            </span>
+            <ul class="filters">
+                <li>
+                    ${filterLink({
+                        text: 'All',
+                        filter: 'all',
+                        selectedFilter: this.selectedFilter
+                    })}
+                </li>
+                <li>
+                    ${filterLink({
+                        text: 'Active',
+                        filter: 'active',
+                        selectedFilter: this.selectedFilter
+                    })}
+                </li>
+                <li>
+                    ${filterLink({
+                        text: 'Completed',
+                        filter: 'completed',
+                        selectedFilter: this.selectedFilter
+                    })}
+                </li>
+            </ul>
+            ${when(this.totalItems !== this.itemsLeft, () => (
+                html`
+                <button @click=${deleteCompleted} class="clear-completed">
+                    Clear Completed
+                </button>`
+            ))}
+        </footer>`
+    }
+}
+customElements.define('todo-footer', Footer)
diff --git a/examples/lit/js/components/TodoForm.js b/examples/lit/js/components/TodoForm.js
@@ -0,0 +1,36 @@
+import { html, css, LitElement, unsafeCSS } from 'lit'
+
+import { addTodoByText } from '../store.js'
+import { appCSSRules, baseCSSRules } from '../constant.js'
+
+export class TodoForm extends LitElement {
+    static styles = [
+        css`:host(:focus) { box-shadow: none!important }`,
+        ...baseCSSRules.map((r) => unsafeCSS(r)),
+        ...appCSSRules.map((r) => unsafeCSS(r))
+    ]
+
+    render () {
+        return html`
+            <form @submit=${this.handleSubmit.bind(this)}>
+            <input
+                class="new-todo"
+                autofocus="autofocus"
+                autocomplete="off"
+                placeholder="what needs to be done?"
+            />
+            </form>
+        `;
+    }
+
+    handleSubmit (event) {
+        event.preventDefault()
+        if (event.target[0].value.length <= 0) {
+            return
+        }
+
+        addTodoByText(event.target[0].value)
+        event.target[0].value = ''
+    }
+}
+customElements.define('todo-form', TodoForm)
diff --git a/examples/lit/js/components/TodoItem.js b/examples/lit/js/components/TodoItem.js
@@ -0,0 +1,97 @@
+import { connect } from 'pwa-helpers'
+import { html, css, LitElement, unsafeCSS } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+
+import { store, setEdit, setTodo, toggleTodos, leaveEdit, deleteTodo } from '../store.js'
+import { appCSSRules, baseCSSRules } from '../constant.js'
+
+const ESCAPE_KEY = 27;
+
+export class TodoItem extends connect(store)(LitElement) {
+    static properties = {
+        todo: { type: Object }
+    }
+
+    static styles = [
+        css`
+        :host(:focus) { box-shadow: none!important; }
+        .todo-list li:last-child {
+            border-bottom: 1px solid #ededed!important;
+        }
+        `,
+        ...baseCSSRules.map((r) => unsafeCSS(r)),
+        ...appCSSRules.map((r) => unsafeCSS(r))
+    ]
+
+    get isEditing () {
+        const state = store.getState()
+        return this.todo.id === state.editingTodo
+    }
+
+    stateChanged() {
+        this.requestUpdate()
+    }
+
+    beginEdit(event) {
+        setEdit(this.todo.id)
+        event.target.closest('li').lastElementChild[0].select()
+    }
+
+    finishEdit(event) {
+        event.preventDefault()
+
+        const text = event.target[0].value
+        setTodo({ ...this.todo, text })
+        leaveEdit()
+    }
+
+    abortEdit(event) {
+        event.target.value = this.todo.text
+        leaveEdit()
+    }
+
+    captureEscape(event) {
+        if (event.which === ESCAPE_KEY) {
+            abortEdit(event)
+        }
+    }
+
+    render() {
+        const itemClassList = {
+            todo: true,
+            completed: this.todo.completed,
+            editing: this.isEditing
+        }
+        return html`
+        <ul class="todo-list">
+            <li class="${classMap(itemClassList)}">
+                <div class="view">
+                    <input
+                        class="toggle"
+                        type="checkbox"
+                        .checked=${this.todo.completed}
+                        @change=${()=> toggleTodos([this.todo.id])}
+                    />
+                    <label @dblclick=${this.beginEdit.bind(this)}>
+                        ${this.todo.text}
+                    </label>
+                    <button
+                        @click=${()=> deleteTodo(this.todo.id)}
+                        class="destroy"
+                    ></button>
+                </div>
+                <form @submit=${this.finishEdit.bind(this)}>
+                    <input
+                        class="edit"
+                        type="text"
+                        @keyup=${this.captureEscape.bind(this)}
+                        @blur=${this.abortEdit.bind(this)}
+                        value=${this.todo.text}
+                    />
+                </form>
+            </li>
+        </ul>
+      `
+    }
+}
+customElements.define('todo-item', TodoItem)
diff --git a/examples/lit/js/components/TodoList.js b/examples/lit/js/components/TodoList.js
@@ -0,0 +1,40 @@
+import { html, css, LitElement, unsafeCSS } from "lit";
+import { when } from 'lit/directives/when.js';
+import { appCSSRules, baseCSSRules } from '../constant.js'
+
+import { markAll } from '../store.js'
+import './TodoItem.js';
+
+export class TodoList extends LitElement {
+    static properties = {
+        todos: { type: Object }
+    }
+
+    static styles = [
+        css`:host(:focus) { box-shadow: none!important }`,
+        ...baseCSSRules.map((r) => unsafeCSS(r)),
+        ...appCSSRules.map((r) => unsafeCSS(r))
+    ]
+
+    render () {
+        return html`
+            ${when(Object.keys(this.todos).length > 0, () => html`
+                <input
+                    @change=${markAll}
+                    id="toggle-all"
+                    type="checkbox"
+                    class="toggle-all"
+                />
+                <label for="toggle-all">
+                    Mark all as complete
+                </label>`
+            )}
+            <ul class="todo-list">
+                ${Object.values(this.todos).map((todo) => html`
+                    <todo-item todo=${JSON.stringify(todo)}></todo-item>
+                `)}
+            </ul>
+        `
+    }
+}
+customElements.define('todo-list', TodoList)
diff --git a/examples/lit/js/constant.js b/examples/lit/js/constant.js
@@ -0,0 +1,13 @@
+const baseStyleSheet = [].slice
+    .call(document.styleSheets)
+    .find((file) => file.href && file.href.endsWith('todomvc-common/base.css'))
+export const baseCSSRules = [].slice
+    .call(baseStyleSheet.cssRules)
+    .map(({ cssText }) => cssText)
+
+const appStyleSheet = [].slice
+    .call(document.styleSheets)
+    .find((file) => file.href && file.href.endsWith('todomvc-app-css/index.css'))
+export const appCSSRules = [].slice
+    .call(appStyleSheet.cssRules)
+    .map(({ cssText }) => cssText)
diff --git a/examples/lit/js/index.js b/examples/lit/js/index.js
@@ -0,0 +1 @@
+import './components/App.js'