From 417cb8d838827a4f11eec6041718c4ee3ec899e9 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Tue, 1 Feb 2022 19:48:57 +0000 Subject: [PATCH] ui: attach-shadow modifier (#12207) * ui: attach-shadow modifier * ui: adopt-styles helper (#12208) --- .../consul-ui/app/helpers/adopt-styles.js | 18 ++++++++++++ .../consul-ui/app/helpers/adopt-styles.mdx | 28 +++++++++++++++++++ ui/packages/consul-ui/app/helpers/css.js | 8 ++++++ .../consul-ui/app/modifiers/attach-shadow.js | 23 +++++++++++++++ .../consul-ui/app/modifiers/attach-shadow.mdx | 28 +++++++++++++++++++ ui/packages/consul-ui/package.json | 3 +- ui/yarn.lock | 5 ++++ 7 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 ui/packages/consul-ui/app/helpers/adopt-styles.js create mode 100644 ui/packages/consul-ui/app/helpers/adopt-styles.mdx create mode 100644 ui/packages/consul-ui/app/helpers/css.js create mode 100644 ui/packages/consul-ui/app/modifiers/attach-shadow.js create mode 100644 ui/packages/consul-ui/app/modifiers/attach-shadow.mdx diff --git a/ui/packages/consul-ui/app/helpers/adopt-styles.js b/ui/packages/consul-ui/app/helpers/adopt-styles.js new file mode 100644 index 0000000000..4fd10a71bc --- /dev/null +++ b/ui/packages/consul-ui/app/helpers/adopt-styles.js @@ -0,0 +1,18 @@ +import Helper from '@ember/component/helper'; +import { assert } from '@ember/debug'; +import { adoptStyles } from '@lit/reactive-element'; + +export default class AdoptStylesHelper extends Helper { + /** + * Adopt/apply given styles to a `ShadowRoot` using constructable styleSheets if supported + * + * @param {[ShadowRoot, CSSResultGroup]} params + */ + compute([$shadow, styles], hash) { + assert( + 'adopt-styles can only be used to apply styles to ShadowDOM elements', + $shadow instanceof ShadowRoot + ); + adoptStyles($shadow, [styles]); + } +} diff --git a/ui/packages/consul-ui/app/helpers/adopt-styles.mdx b/ui/packages/consul-ui/app/helpers/adopt-styles.mdx new file mode 100644 index 0000000000..b2d09331bb --- /dev/null +++ b/ui/packages/consul-ui/app/helpers/adopt-styles.mdx @@ -0,0 +1,28 @@ +# adopt-styles + +Adopt/apply given styles to a `ShadowRoot` using constructable styleSheets if supported + +```hbs preview-template +
+ {{#if this.shadow}} + {{#in-element this.shadow}} + {{adopt-styles this.shadow (css ' + :host { + background-color: red; + width: 100px; + height: 100px; + } + ')}} + {{/in-element}} + {{/if}} +
+``` + +## Positional Arguments + +| Argument | Type | Default | Description | +| --- | --- | --- | --- | +| `params` | `[ShadowRoot, CSSResultGroup]` | | | + diff --git a/ui/packages/consul-ui/app/helpers/css.js b/ui/packages/consul-ui/app/helpers/css.js new file mode 100644 index 0000000000..35bb4aabad --- /dev/null +++ b/ui/packages/consul-ui/app/helpers/css.js @@ -0,0 +1,8 @@ +import Helper from '@ember/component/helper'; +import { css } from '@lit/reactive-element'; + +export default class ConsoleLogHelper extends Helper { + compute([str], hash) { + return css([str]); + } +} diff --git a/ui/packages/consul-ui/app/modifiers/attach-shadow.js b/ui/packages/consul-ui/app/modifiers/attach-shadow.js new file mode 100644 index 0000000000..94901c67d6 --- /dev/null +++ b/ui/packages/consul-ui/app/modifiers/attach-shadow.js @@ -0,0 +1,23 @@ +import { setModifierManager, capabilities } from '@ember/modifier'; + +export default setModifierManager( + () => ({ + capabilities: capabilities('3.13', { disableAutoTracking: true }), + + createModifier() {}, + + installModifier(_state, element, { positional: [fn, ...args], named }) { + let shadow; + try { + shadow = element.attachShadow({ mode: 'open' }); + } catch (e) { + // shadow = false; + console.error(e); + } + fn(shadow); + }, + updateModifier() {}, + destroyModifier() {}, + }), + class CustomElementModifier {} +); diff --git a/ui/packages/consul-ui/app/modifiers/attach-shadow.mdx b/ui/packages/consul-ui/app/modifiers/attach-shadow.mdx new file mode 100644 index 0000000000..3e973665ca --- /dev/null +++ b/ui/packages/consul-ui/app/modifiers/attach-shadow.mdx @@ -0,0 +1,28 @@ +# attach-shadow + +`{{attach-shadow (set this 'shadow')}}` attaches a `ShadowRoot` to the modified DOM element +and pass a reference to that `ShadowRoot` to the setter function. + + +Please note: This should be used as a utility modifier for when having access +to the shadow DOM is handy, not really for building full blown shadow DOM +based Web Components. + +```hbs preview-template +
+ {{#if this.shadow}} + {{#in-element this.shadow}} + + {{/in-element}} + {{/if}} +

Hello from the shadows!

+
+``` + +## Positional Arguments + +| Argument | Type | Default | Description | +| --- | --- | --- | --- | +| `setter` | `function` | | Usually `set` or `mut` or similar | diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json index 5c4035202e..18bb4e6ad6 100644 --- a/ui/packages/consul-ui/package.json +++ b/ui/packages/consul-ui/package.json @@ -63,6 +63,7 @@ "@glimmer/component": "^1.0.0", "@glimmer/tracking": "^1.0.0", "@hashicorp/ember-cli-api-double": "^3.1.0", + "@lit/reactive-element": "^1.2.1", "@mapbox/rehype-prism": "^0.6.0", "@xstate/fsm": "^1.4.0", "a11y-dialog": "^6.0.1", @@ -79,8 +80,8 @@ "chalk": "^4.1.0", "clipboard": "^2.0.4", "consul-acls": "*", - "consul-partitions": "*", "consul-nspaces": "*", + "consul-partitions": "*", "css.escape": "^1.5.1", "d3-array": "^2.8.0", "d3-scale": "^3.2.3", diff --git a/ui/yarn.lock b/ui/yarn.lock index e9d89fefac..d61667fbd7 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1560,6 +1560,11 @@ resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98" integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA== +"@lit/reactive-element@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.2.1.tgz#8620d7f0baf63e12821fa93c34d21e23477736f7" + integrity sha512-03FYfMguIWo9E1y1qcTpXzoO8Ukpn0j5o4GjNFq/iHqJEPY6pYopsU44e7NSFIgCTorr8wdUU5PfVy8VeD6Rwg== + "@mapbox/rehype-prism@^0.6.0": version "0.6.0" resolved "https://registry.yarnpkg.com/@mapbox/rehype-prism/-/rehype-prism-0.6.0.tgz#3d8a860870951d4354257d0ba908d11545bd5ed5"