From 8a61abc38aba7d112f59ce836ee3253f2ceced18 Mon Sep 17 00:00:00 2001 From: Andrew Jakubowicz Date: Wed, 5 Oct 2022 17:38:14 -0700 Subject: [PATCH 1/3] install labs observers package for type checking during build --- package-lock.json | 79 +++++++-------------------- packages/lit-dev-content/package.json | 1 + 2 files changed, 20 insertions(+), 60 deletions(-) diff --git a/package-lock.json b/package-lock.json index e5d667b4c..de40adc52 100644 --- a/package-lock.json +++ b/package-lock.json @@ -515,6 +515,14 @@ "lit": "^2.0.0" } }, + "node_modules/@lit-labs/observers": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@lit-labs/observers/-/observers-1.1.0.tgz", + "integrity": "sha512-+MbK+OD+Io9MvGIKY8HVB7vQVOpYxruChlw52OzHjAPl+cBPK8i+MKQ2OvH02LakRYloEc6u/Nuvz6+e8+qAbA==", + "dependencies": { + "@lit/reactive-element": "^1.1.0" + } + }, "node_modules/@lit-labs/react": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.8.tgz", @@ -10976,6 +10984,7 @@ "license": "BSD-3-Clause", "dependencies": { "@lit-labs/motion": "^1.0.1", + "@lit-labs/observers": "1.1.0", "@lit-labs/react": "^1.0.8", "@lit-labs/task": "^1.0.0", "@lit/localize": "^0.10.0", @@ -11027,42 +11036,6 @@ "dependencies": { "algoliasearch": "^4.14.2", "discord.js": "^14.3.0" - }, - "devDependencies": { - "typescript": "^4.8.2", - "wireit": "^0.7.1" - } - }, - "packages/lit-dev-discord-bot/node_modules/typescript": { - "version": "4.8.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz", - "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==", - "dev": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, - "packages/lit-dev-discord-bot/node_modules/wireit": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/wireit/-/wireit-0.7.1.tgz", - "integrity": "sha512-TwuKae0aHk06DZ2omLW6YF4Y74YxCyuRCcsjZMm+cUPRXhvxAU2JhYyuCvD9wIALWK+cQUpB9GjeRFPRAbKsdw==", - "dev": true, - "dependencies": { - "braces": "^3.0.2", - "chokidar": "^3.5.3", - "fast-glob": "^3.2.11", - "jsonc-parser": "^3.0.0", - "proper-lockfile": "^4.1.2" - }, - "bin": { - "wireit": "bin/wireit.js" - }, - "engines": { - "node": ">=14.14.0" } }, "packages/lit-dev-server": { @@ -11587,6 +11560,14 @@ "lit": "^2.0.0" } }, + "@lit-labs/observers": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@lit-labs/observers/-/observers-1.1.0.tgz", + "integrity": "sha512-+MbK+OD+Io9MvGIKY8HVB7vQVOpYxruChlw52OzHjAPl+cBPK8i+MKQ2OvH02LakRYloEc6u/Nuvz6+e8+qAbA==", + "requires": { + "@lit/reactive-element": "^1.1.0" + } + }, "@lit-labs/react": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.8.tgz", @@ -16796,6 +16777,7 @@ "@11ty/eleventy-plugin-rss": "^1.1.2", "@lit-labs/eleventy-plugin-lit": "^0.1.1", "@lit-labs/motion": "^1.0.1", + "@lit-labs/observers": "1.1.0", "@lit-labs/react": "^1.0.8", "@lit-labs/task": "^1.0.0", "@lit/localize": "^0.10.0", @@ -16839,30 +16821,7 @@ "version": "file:packages/lit-dev-discord-bot", "requires": { "algoliasearch": "^4.14.2", - "discord.js": "^14.3.0", - "typescript": "^4.8.2", - "wireit": "*" - }, - "dependencies": { - "typescript": { - "version": "4.8.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz", - "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==", - "dev": true - }, - "wireit": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/wireit/-/wireit-0.7.1.tgz", - "integrity": "sha512-TwuKae0aHk06DZ2omLW6YF4Y74YxCyuRCcsjZMm+cUPRXhvxAU2JhYyuCvD9wIALWK+cQUpB9GjeRFPRAbKsdw==", - "dev": true, - "requires": { - "braces": "^3.0.2", - "chokidar": "^3.5.3", - "fast-glob": "^3.2.11", - "jsonc-parser": "^3.0.0", - "proper-lockfile": "^4.1.2" - } - } + "discord.js": "^14.3.0" } }, "lit-dev-server": { diff --git a/packages/lit-dev-content/package.json b/packages/lit-dev-content/package.json index db8a7c63c..fb8072369 100644 --- a/packages/lit-dev-content/package.json +++ b/packages/lit-dev-content/package.json @@ -195,6 +195,7 @@ }, "dependencies": { "@lit-labs/motion": "^1.0.1", + "@lit-labs/observers": "1.1.0", "@lit-labs/react": "^1.0.8", "@lit-labs/task": "^1.0.0", "@lit/localize": "^0.10.0", From c73b4710eb05b970badb1bda6c8129d7addaa509 Mon Sep 17 00:00:00 2001 From: Andrew Jakubowicz Date: Wed, 5 Oct 2022 17:38:37 -0700 Subject: [PATCH 2/3] Add resize controller sample --- .../observers-resize-controller/index.html | 12 ++++ .../mock-drawer.ts | 57 +++++++++++++++++++ .../observers-resize-controller/project.json | 14 +++++ .../resize-demo.ts | 31 ++++++++++ .../observers-resize-controller/styles.ts | 57 +++++++++++++++++++ 5 files changed, 171 insertions(+) create mode 100644 packages/lit-dev-content/samples/examples/observers-resize-controller/index.html create mode 100644 packages/lit-dev-content/samples/examples/observers-resize-controller/mock-drawer.ts create mode 100644 packages/lit-dev-content/samples/examples/observers-resize-controller/project.json create mode 100644 packages/lit-dev-content/samples/examples/observers-resize-controller/resize-demo.ts create mode 100644 packages/lit-dev-content/samples/examples/observers-resize-controller/styles.ts diff --git a/packages/lit-dev-content/samples/examples/observers-resize-controller/index.html b/packages/lit-dev-content/samples/examples/observers-resize-controller/index.html new file mode 100644 index 000000000..9b7fb3cd2 --- /dev/null +++ b/packages/lit-dev-content/samples/examples/observers-resize-controller/index.html @@ -0,0 +1,12 @@ + + + + + + + diff --git a/packages/lit-dev-content/samples/examples/observers-resize-controller/mock-drawer.ts b/packages/lit-dev-content/samples/examples/observers-resize-controller/mock-drawer.ts new file mode 100644 index 000000000..a35d352fa --- /dev/null +++ b/packages/lit-dev-content/samples/examples/observers-resize-controller/mock-drawer.ts @@ -0,0 +1,57 @@ +import {LitElement, html, css} from 'lit'; +import {customElement, state} from 'lit/decorators.js'; +import {styleMap} from 'lit/directives/style-map.js'; + +// Material icon: https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Atouch_app%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4048 +const touch_app_svg = html` + +`; + +/** + * `mock-drawer` imitates a menu drawer on the page. Clicking this drawer + * expands and contracts it. +*/ +@customElement('mock-drawer') +export class MockDrawer extends LitElement { + @state() extended = false; + + toggleExtended() { + this.extended = !this.extended; + } + + render() { + return html` +
+ ${touch_app_svg} +
+ `; + } + + static styles = css` + :host { + display: flex; + height: calc(100vh - 90px); + } + div { + background-color: #324fff; + transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); + cursor: pointer; + display: flex; + align-items: center; + } + div:hover { + background-color: #101ccc; + } + `; +} diff --git a/packages/lit-dev-content/samples/examples/observers-resize-controller/project.json b/packages/lit-dev-content/samples/examples/observers-resize-controller/project.json new file mode 100644 index 000000000..815282d67 --- /dev/null +++ b/packages/lit-dev-content/samples/examples/observers-resize-controller/project.json @@ -0,0 +1,14 @@ +{ + "extends": "/samples/base.json", + "hide": true, + "title": "ResizeController", + "description": "@lit-labs/observers ResizeController example", + "section": "Observers", + "files": { + "resize-demo.ts": {}, + "styles.ts": {}, + "mock-drawer.ts": {}, + "index.html": {} + }, + "order": 0 +} diff --git a/packages/lit-dev-content/samples/examples/observers-resize-controller/resize-demo.ts b/packages/lit-dev-content/samples/examples/observers-resize-controller/resize-demo.ts new file mode 100644 index 000000000..9ca4f46b1 --- /dev/null +++ b/packages/lit-dev-content/samples/examples/observers-resize-controller/resize-demo.ts @@ -0,0 +1,31 @@ +import {html, LitElement} from 'lit'; +import {customElement} from 'lit/decorators.js'; +import {styles, svgCross} from './styles.js'; +import {ResizeController} from '@lit-labs/observers/resize_controller.js'; + +/** + * This example demonstrates a simple usage of the ResizeController exported + * from the `@lit-labs/observers` package. This element uses a resize controller + * to render its width and height. + * + * The controller automatically triggers a reactive update when a resize on the + * element is observed. + */ +@customElement('simple-resize-demo') +export class SimpleResizeDemo extends LitElement { + static styles = styles; + + private resizeController = new ResizeController(this, { + callback([entry]) { + return [entry.contentRect.width, entry.contentRect.height]; + }, + }); + + render() { + const [width, height] = this.resizeController.value ?? [0, 0]; + return html` + ${svgCross} + ${width.toFixed(0)}px by ${height.toFixed(0)}px + `; + } +} diff --git a/packages/lit-dev-content/samples/examples/observers-resize-controller/styles.ts b/packages/lit-dev-content/samples/examples/observers-resize-controller/styles.ts new file mode 100644 index 000000000..1d7c14bf8 --- /dev/null +++ b/packages/lit-dev-content/samples/examples/observers-resize-controller/styles.ts @@ -0,0 +1,57 @@ +import {css, html} from 'lit'; + +export const styles = css` + :host { + display: grid; + min-height: 100px; + width: 100%; + height: 100%; + font-size: 1.4rem; + } + + * { + grid-area: 1 / 1 / 1 / 1; + } + + span { + align-self: center; + justify-self: center; + color: white; + background-color: #324fff; + } + + svg { + color: #324fff; + border: 5px solid #324fff; + max-height: calc(100vh - 100px); + width: 100%; + } +`; + +export const svgCross = html` + + + + +`; From 9ca2f72c1e85f013dba30710d3a2d66651a4771e Mon Sep 17 00:00:00 2001 From: Andrew Jakubowicz Date: Wed, 12 Oct 2022 15:12:30 -0700 Subject: [PATCH 3/3] Feedback to update icon with arrows out and in for the drawer. --- .../mock-drawer.ts | 34 ++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/packages/lit-dev-content/samples/examples/observers-resize-controller/mock-drawer.ts b/packages/lit-dev-content/samples/examples/observers-resize-controller/mock-drawer.ts index a35d352fa..f04cd4033 100644 --- a/packages/lit-dev-content/samples/examples/observers-resize-controller/mock-drawer.ts +++ b/packages/lit-dev-content/samples/examples/observers-resize-controller/mock-drawer.ts @@ -2,8 +2,8 @@ import {LitElement, html, css} from 'lit'; import {customElement, state} from 'lit/decorators.js'; import {styleMap} from 'lit/directives/style-map.js'; -// Material icon: https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Atouch_app%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4048 -const touch_app_svg = html` +`; + +// Material icon: https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aunfold_less%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4048 +const unfold_less = html` + `; /** - * `mock-drawer` imitates a menu drawer on the page. Clicking this drawer - * expands and contracts it. -*/ + * `mock-drawer` imitates a menu on the page. Clicking this drawer expands and + * contracts it. + */ @customElement('mock-drawer') export class MockDrawer extends LitElement { @state() extended = false; @@ -33,7 +47,7 @@ export class MockDrawer extends LitElement { style=${styleMap({width: this.extended ? '200px' : '50px'})} @click=${this.toggleExtended} > - ${touch_app_svg} + ${this.extended ? unfold_less : unfold_more} `; } @@ -48,10 +62,14 @@ export class MockDrawer extends LitElement { transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; display: flex; - align-items: center; + flex-direction: row; + justify-content: end; } div:hover { background-color: #101ccc; } + svg { + rotate: 90deg; + } `; }