Allow tweaking component element, closes #22

lolmaus · Jun 24, 2021 · e65f40a · e65f40a
1 parent b0d774f
commit e65f40a
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,7 @@ See [detailed comparison](#comparison) with code samples.
   - [Customizing attribute prefix](#customizing-attribute-prefix)
   - [Using multiple modifiers on the same element](#using-multiple-modifiers-on-the-same-element)
   - [Disabling](#disabling)
+  - [Customizing component element](#customizing-component-element)
   - [FastBoot fallback](#fastboot-fallback)
 - [Browser support](#browser-support)
 - [Alternatives](#alternatives)
@@ -93,9 +94,10 @@ This addon is in active development.
   * [x] Accepts `sizes`
   * [x] Accepts `prefix`
   * [x] Accepts `dimension`
+  * [x] Accepts `tagName`
   * [x] Disabling
-* [ ] Expose types
-* [ ] CI
+* [x] Expose types
+* [x] CI
 * [ ] npm package
 * [ ] Documentation
   * [x] Concept
@@ -572,6 +574,25 @@ Pass a truthy value into `isDisabled` to disable element query functionality:
 
 
 
+### Customizing component element
+
+The `<ElementQuery>` component accepts a `@tagName` argument that allows tweaking the component's root tag:
+
+```hbs
+<ElementQuery @tagName="aside">
+  The sidebar
+</ElementQuery>
+```
+
+This wouuld result in the followingg HTML rendered (element query tags not shown):
+
+```html
+<aside>
+  The sidebar
+</aside>
+```
+
+
 ### FastBoot fallback
 
 Unfortunately, FastBoot does not have information about user's screen size. When a user vistis a FastBoot-driven website, they initially see a page without any `ember-element-query` attributes. When FastBoot rehydrates, element queries kick in. As a result, page layout may suddenly change after the user has already started reading and scrolling, causing frustration.

diff --git a/app/templates/components/element-query.hbs b/app/templates/components/element-query.hbs
@@ -1,16 +1,18 @@
-<div
-  class="ElementQuery"
+{{#let (element (or @tagName "div")) as |Tag|}}
+  <Tag
+    class="ElementQuery"
 
-  {{element-query
-    dimension=@dimension
-    isDisabled=@isDisabled
-    prefix=@prefix
-    sizes=@sizes
-    sizesHeight=@sizesHeight
-    onResize=this.onResize
-  }}
+    {{element-query
+      dimension=@dimension
+      isDisabled=@isDisabled
+      prefix=@prefix
+      sizes=@sizes
+      sizesHeight=@sizesHeight
+      onResize=this.onResize
+    }}
 
-  ...attributes
->
-  {{yield this.eqInfo.attributesRecord this.eqInfo}}
-</div>
+    ...attributes
+  >
+    {{yield this.eqInfo.attributesRecord this.eqInfo}}
+  </Tag>
+{{/let}}
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "ember-cli-babel": "^7.26.3",
     "ember-cli-htmlbars": "5.7.1",
     "ember-cli-typescript": "^4.2.1",
+    "ember-element-helper": "^0.5.5",
     "ember-modifier": "^2.1.2",
     "ember-resize-observer-modifier": "^1.1.1",
     "ember-window-mock": "^0.7.2"

diff --git a/tests/integration/component-test.ts b/tests/integration/component-test.ts
@@ -1065,4 +1065,14 @@ module('Integration | Component | element-query', function (hooks) {
     m = 'If clause';
     assert.ok(find('[data-test-combined-2]'), m);
   });
+
+  test("Tweaking component's tag", async function (assert) {
+    await render(hbs`
+        <ElementQuery @tagName="aside"/>
+    `);
+
+    const element = find('aside') as HTMLElement | null;
+
+    assert.dom(element).hasClass('ElementQuery');
+  });
 });
diff --git a/yarn.lock b/yarn.lock
@@ -1872,6 +1872,31 @@
     resolve "^1.8.1"
     semver "^7.3.2"
 
+"@embroider/macros@0.41.0":
+  version "0.41.0"
+  resolved "https://registry.yarnpkg.com/@embroider/macros/-/macros-0.41.0.tgz#3e78b6f388d7229906abf4c75edfff8bb0208aca"
+  integrity sha512-QISzwEEfLsskZeL0jyZDs1RoQSotwBWj+4upTogNHuxQP5j/9H3IMG/3QB1gh8GEpbudATb/cS4NDYK3UBxufw==
+  dependencies:
+    "@embroider/shared-internals" "0.41.0"
+    assert-never "^1.1.0"
+    ember-cli-babel "^7.23.0"
+    lodash "^4.17.10"
+    resolve "^1.8.1"
+    semver "^7.3.2"
+
+"@embroider/shared-internals@0.41.0":
+  version "0.41.0"
+  resolved "https://registry.yarnpkg.com/@embroider/shared-internals/-/shared-internals-0.41.0.tgz#2553f026d4f48ea1fd11235501feb63bf49fa306"
+  integrity sha512-fiqUVB6cfh2UBEFE4yhT5EzagkZ1Q26+OhBV0nJszFEJZx4DqVIb3pxSSZ8P+HhpxuJsQ2XpMA/j02ZPFZfbdQ==
+  dependencies:
+    ember-rfc176-data "^0.3.17"
+    fs-extra "^7.0.1"
+    lodash "^4.17.10"
+    pkg-up "^3.1.0"
+    resolve-package-path "^1.2.2"
+    semver "^7.3.2"
+    typescript-memoize "^1.0.0-alpha.3"
+
 "@embroider/test-setup@^0.42.2":
   version "0.42.2"
   resolved "https://registry.yarnpkg.com/@embroider/test-setup/-/test-setup-0.42.2.tgz#d7b04e8081c4adb598f554448bc49fe1bbcc6253"
@@ -1880,6 +1905,15 @@
     lodash "^4.17.21"
     resolve "^1.20.0"
 
+"@embroider/util@^0.39.1 || ^0.40.0 || ^0.41.0":
+  version "0.41.0"
+  resolved "https://registry.yarnpkg.com/@embroider/util/-/util-0.41.0.tgz#5324cb4742aa4ed8d613c4f88a466f73e4e6acc1"
+  integrity sha512-ytA3J/YfQh7FEUEBwz3ezTqQNm/S5et5rZw3INBIy4Ak4x0NXV/VXLjyL8mv3txL8fGknZTBdXEhDsHUKIq8SQ==
+  dependencies:
+    "@embroider/macros" "0.41.0"
+    broccoli-funnel "^3.0.5"
+    ember-cli-babel "^7.23.1"
+
 "@eslint/eslintrc@^0.4.2":
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179"
@@ -4282,7 +4316,7 @@ broccoli-funnel@^2.0.0, broccoli-funnel@^2.0.1, broccoli-funnel@^2.0.2:
     symlink-or-copy "^1.0.0"
     walk-sync "^0.3.1"
 
-broccoli-funnel@^3.0.3, broccoli-funnel@^3.0.6:
+broccoli-funnel@^3.0.3, broccoli-funnel@^3.0.5, broccoli-funnel@^3.0.6:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/broccoli-funnel/-/broccoli-funnel-3.0.8.tgz#f5b62e2763c3918026a15a3c833edc889971279b"
   integrity sha512-ng4eIhPYiXqMw6SyGoxPHR3YAwEd2lr9FgBI1CyTbspl4txZovOsmzFkMkGAlu88xyvYXJqHiM2crfLa65T1BQ==
@@ -5938,7 +5972,7 @@ ember-cli-babel@^7.0.0, ember-cli-babel@^7.10.0, ember-cli-babel@^7.13.0, ember-
     rimraf "^3.0.1"
     semver "^5.5.0"
 
-ember-cli-babel@^7.13.2, ember-cli-babel@^7.22.1, ember-cli-babel@^7.23.0, ember-cli-babel@^7.23.1, ember-cli-babel@^7.26.2, ember-cli-babel@^7.26.3, ember-cli-babel@^7.26.6:
+ember-cli-babel@^7.13.2, ember-cli-babel@^7.17.2, ember-cli-babel@^7.22.1, ember-cli-babel@^7.23.0, ember-cli-babel@^7.23.1, ember-cli-babel@^7.26.2, ember-cli-babel@^7.26.3, ember-cli-babel@^7.26.6:
   version "7.26.6"
   resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.26.6.tgz#322fbbd3baad9dd99e3276ff05bc6faef5e54b39"
   integrity sha512-040svtfj2RC35j/WMwdWJFusZaXmNoytLAMyBDGLMSlRvznudTxZjGlPV6UupmtTBApy58cEF8Fq4a+COWoEmQ==
@@ -5987,7 +6021,7 @@ ember-cli-get-component-path-option@^1.0.0:
   resolved "https://registry.yarnpkg.com/ember-cli-get-component-path-option/-/ember-cli-get-component-path-option-1.0.0.tgz#0d7b595559e2f9050abed804f1d8eff1b08bc771"
   integrity sha1-DXtZVVni+QUKvtgE8djv8bCLx3E=
 
-ember-cli-htmlbars@5.7.1, ember-cli-htmlbars@^5.3.1, ember-cli-htmlbars@^5.7.1:
+ember-cli-htmlbars@5.7.1, ember-cli-htmlbars@^5.1.0, ember-cli-htmlbars@^5.3.1, ember-cli-htmlbars@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-5.7.1.tgz#eb5b88c7d9083bc27665fb5447a9b7503b32ce4f"
   integrity sha512-9laCgL4tSy48orNoQgQKEHp93MaqAs9ZOl7or5q+8iyGGJHW6sVXIYrVv5/5O9HfV6Ts8/pW1rSoaeKyLUE+oA==
@@ -6366,6 +6400,15 @@ ember-disable-prototype-extensions@^1.1.3:
   resolved "https://registry.yarnpkg.com/ember-disable-prototype-extensions/-/ember-disable-prototype-extensions-1.1.3.tgz#1969135217654b5e278f9fe2d9d4e49b5720329e"
   integrity sha1-GWkTUhdlS14nj5/i2dTkm1cgMp4=
 
+ember-element-helper@^0.5.5:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/ember-element-helper/-/ember-element-helper-0.5.5.tgz#4a9ecb4dce57ee7f5ceb868a53c7b498c729f056"
+  integrity sha512-Tu3hsI+/mjHBUvw62Qi+YDZtKkn59V66CjwbgfNTZZ7aHf4gFm1ow4zJ4WLnpnie8p9FvOmIUxwl5HvgPJIcFA==
+  dependencies:
+    "@embroider/util" "^0.39.1 || ^0.40.0 || ^0.41.0"
+    ember-cli-babel "^7.17.2"
+    ember-cli-htmlbars "^5.1.0"
+
 ember-export-application-global@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/ember-export-application-global/-/ember-export-application-global-2.0.1.tgz#b120a70e322ab208defc9e2daebe8d0dfc2dcd46"