From 175c346e7d154933b26024e3708c3bc2bad584cc Mon Sep 17 00:00:00 2001 From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com> Date: Thu, 17 Oct 2024 21:52:46 -0400 Subject: [PATCH 1/2] Grr --- pnpm-lock.yaml | 51 ++++++++++++++ pnpm-workspace.yaml | 1 + primitives/package.json | 13 ++++ primitives/src/index.js | 0 primitives/src/switch.js | 93 ++++++++++++++++++++++++++ test-app/ember-cli-build.js | 4 +- test-app/package.json | 1 + test-app/tests/primitives/wip-test.gts | 30 +++++++++ 8 files changed, 191 insertions(+), 2 deletions(-) create mode 100644 primitives/package.json create mode 100644 primitives/src/index.js create mode 100644 primitives/src/switch.js create mode 100644 test-app/tests/primitives/wip-test.gts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 85a2d9e09..4a83c37c6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -558,8 +558,17 @@ importers: specifier: ^5.3.3 version: 5.6.3 + primitives: + dependencies: + lit: + specifier: ^3.2.1 + version: 3.2.1 + test-app: dependencies: + '@nullvoxpopuli/primitives': + specifier: workspace:* + version: link:../primitives ember-primitives: specifier: workspace:* version: file:ember-primitives(n4m76eelt2spybryswdcxrenru) @@ -1810,6 +1819,12 @@ packages: resolution: {integrity: sha512-F5z53uvRIF4dYfFfJP3a2Cqg+4P1dgJchJsFnsZE0eZp0LK8X7g2J0CsJHRgns+skpXOlM7n5vFGwkWCWj8qJg==} engines: {node: 12.* || >= 14} + '@lit-labs/ssr-dom-shim@1.2.1': + resolution: {integrity: sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==} + + '@lit/reactive-element@2.0.4': + resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==} + '@manypkg/find-root@2.2.3': resolution: {integrity: sha512-jtEZKczWTueJYHjGpxU3KJQ08Gsrf4r6Q2GjmPp/RGk5leeYAA1eyDADSAF+KVCsQ6EwZd/FMcOFCoMhtqdCtQ==} engines: {node: '>=14.18.0'} @@ -2540,6 +2555,9 @@ packages: '@types/symlink-or-copy@1.2.2': resolution: {integrity: sha512-MQ1AnmTLOncwEf9IVU+B2e4Hchrku5N67NkgcAHW0p3sdzPe0FNMANxEm6OJUzPniEQGkeT3OROLlCwZJLWFZA==} + '@types/trusted-types@2.0.7': + resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} + '@types/unist@2.0.11': resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} @@ -6273,6 +6291,15 @@ packages: linkify-it@5.0.0: resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==} + lit-element@4.1.1: + resolution: {integrity: sha512-HO9Tkkh34QkTeUmEdNYhMT8hzLid7YlMlATSi1q4q17HE5d9mrrEHJ/o8O2D0cMi182zK1F3v7x0PWFjrhXFew==} + + lit-html@3.2.1: + resolution: {integrity: sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==} + + lit@3.2.1: + resolution: {integrity: sha512-1BBa1E/z0O9ye5fZprPtdqnc0BFzxIxTTOO/tQFmyC/hj1O3jL4TfmLBw0WEwjAokdLwpclkvGgDJwTIh0/22w==} + livereload-js@3.4.1: resolution: {integrity: sha512-5MP0uUeVCec89ZbNOT/i97Mc+q3SxXmiUGhRFOTmhrGPn//uWVQdCvcLJDy64MSBR5MidFdOR7B9viumoavy6g==} @@ -11345,6 +11372,12 @@ snapshots: tslib: 2.8.0 upath: 2.0.1 + '@lit-labs/ssr-dom-shim@1.2.1': {} + + '@lit/reactive-element@2.0.4': + dependencies: + '@lit-labs/ssr-dom-shim': 1.2.1 + '@manypkg/find-root@2.2.3': dependencies: '@manypkg/tools': 1.1.2 @@ -12244,6 +12277,8 @@ snapshots: '@types/symlink-or-copy@1.2.2': {} + '@types/trusted-types@2.0.7': {} + '@types/unist@2.0.11': {} '@types/unist@3.0.3': {} @@ -17298,6 +17333,22 @@ snapshots: dependencies: uc.micro: 2.1.0 + lit-element@4.1.1: + dependencies: + '@lit-labs/ssr-dom-shim': 1.2.1 + '@lit/reactive-element': 2.0.4 + lit-html: 3.2.1 + + lit-html@3.2.1: + dependencies: + '@types/trusted-types': 2.0.7 + + lit@3.2.1: + dependencies: + '@lit/reactive-element': 2.0.4 + lit-element: 4.1.1 + lit-html: 3.2.1 + livereload-js@3.4.1: {} load-json-file@6.2.0: diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 0819cda54..dd4678b70 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,5 +1,6 @@ packages: - 'ember-primitives' + - 'primitives' - 'test-app' - 'docs-app' - 'dev' diff --git a/primitives/package.json b/primitives/package.json new file mode 100644 index 000000000..9cfded624 --- /dev/null +++ b/primitives/package.json @@ -0,0 +1,13 @@ +{ + "name":"@nullvoxpopuli/primitives", + "dependencies":{"lit":"^3.2.1"}, + "files": ["src"], + "exports": { + ".": { + "default": "./src/index.js" + }, + "./*": { + "default": "./src/*" + } + } +} diff --git a/primitives/src/index.js b/primitives/src/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/primitives/src/switch.js b/primitives/src/switch.js new file mode 100644 index 000000000..390947e7f --- /dev/null +++ b/primitives/src/switch.js @@ -0,0 +1,93 @@ +import { html, LitElement } from 'lit'; + +let i = 0; +function uniqueId() { + i++; + return `primitiveId-${i}`; +} + +function getContext(startAt) { + let node; + while ((node = startAt)) { + let parent = node.parentElement; + if (!parent) return; + + if (parent.tagName === 'primitive-switch') { + return parent; + } + } +} + +/** + * emits "change" event + */ +class Switch extends HTMLElement { + static properties = { + checked: { type: Boolean }, + }; + + id = uniqueId(); + + handleChange = (event) => { + this.dispatchEvent( + new CustomEvent('change', { + detail: { + checked: event.target.checked, + }, + bubbles: true, + }) + ); + }; + + render() { + return html`
`; + } +} + +class Control extends HTMLElement { + get id() { + return getContext(this).id; + } + + constructor() { + super(); + + console.log('id', this.id); + this.setAttribute('id', this.id); + this.innerHTML = ``; + } + + render() { + return html``; + } +} + +class Label extends HTMLElement { + get id() { + return getContext(this).id; + } + + constructor() { + super(); + + console.log('id', this.id); + this.setAttribute('for', this.id); + this.innerHTML = ``; + } + // render() { + // return html``; + // } +} + +Switch.Control = Control; +Switch.Label = Label; + +customElements.define('primitive-switch', Switch); +customElements.define('primitive-switch-control', Switch.Control); +// either: +// +// or +//