ember-primitives 0.43.0 → 0.44.0

package/declarations/components/heading.d.ts

@@ -0,0 +1,14 @@
+import Component from "@glimmer/component";
+import type Owner from "@ember/owner";
+export declare class Heading extends Component<{
+    Element: HTMLElement;
+    Blocks: {
+        default: [];
+    };
+}> {
+    headingScopeAnchor: Text;
+    constructor(owner: Owner, args: object);
+    get level(): number;
+    get hLevel(): string;
+}
+//# sourceMappingURL=heading.d.ts.map

package/declarations/components/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../src/components/heading.gts"],"names":[],"mappings":"AAmEA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAI3C,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAyBtC,qBAAa,OAAQ,SAAQ,SAAS,CAAC;IACrC,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAC;CACzB,CAAC;IACA,kBAAkB,EAAE,IAAI,CAAC;gBACb,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM;IAMtC,IAAI,KAAK,WAWR;IAED,IAAI,MAAM,WAET;CAqBF"}

package/declarations/dom-context.d.ts

@@ -2,6 +2,11 @@ import Component from "@glimmer/component";
 import type { Newable } from "./type-utils";
 import type Owner from "@ember/owner";
 export declare class Provide<Data extends object> extends Component<{
+    /**
+     * The Element is not customizable
+     * (and also sometimes doesn't exist (depending on the `@element` value))
+     */
+    Element: null;
     Args: {
         /**
          * What data do you want to provide to the DOM subtree?
@@ -18,6 +23,20 @@ export declare class Provide<Data extends object> extends Component<{
          * With string keys, the `<Consume>` type will be unknown.
          */
         key?: string;
+        /**
+         * Can be used to either customize the element tag ( defaults to div )
+         * If set to `false`, we won't use an element for the Provider boundary.
+         *
+         * Setting this to `false` changes the DOM Node containing the Provider's data to be a text node -- which can be useful when certain CSS situations are needed.
+         *
+         * But setting to `false` has a hazard: it allows subsequent sibling subtrees to access adjacent providers.
+         *
+         * There is no way around caveat in library land, and in a framework implementation of context,
+         * it can only be solved by having render-tree context implemented, and ignoring DOM
+         *  (which then makes the only difference between DOM-Context and Context be whether or not
+         *    the context punches through Portals)
+         */
+        element?: keyof HTMLElementTagNameMap | false | undefined;
     };
     Blocks: {
         /**
@@ -27,11 +46,12 @@ export declare class Provide<Data extends object> extends Component<{
     };
 }> {
     get data(): Data;
-    element: Text;
+    element: Text | HTMLElement;
     constructor(owner: Owner, args: {
         data: Data | (() => Data) | Newable<Data>;
         key?: string;
     });
+    get useElementProvider(): boolean;
 }
 type DataForKey<Key> = Key extends string ? unknown : Key extends Newable<infer T> ? T : Key extends () => infer T ? T : Key;
 export declare class Consume<Key extends object | string> extends Component<{

package/declarations/dom-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom-context.d.ts","sourceRoot":"","sources":["../src/dom-context.gts"],"names":[],"mappings":"AAwLA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAM3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAmBtC,qBAAa,OAAO,CAAC,IAAI,SAAS,MAAM,CAAE,SAAQ,SAAS,CAAC;IAC1D,IAAI,EAAE;QACJ;;;;;WAKG;QACH,IAAI,EAAE,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAE1C;;;;;;WAMG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,MAAM,EAAE;QACN;;WAEG;QACH,OAAO,EAAE,EAAE,CAAC;KACb,CAAC;CACH,CAAC;IACA,IAAI,IAAI,SAcP;IAED,OAAO,EAAE,IAAI,CAAC;gBAGZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;KACd;CAiBJ;AAmCD,KAAK,UAAU,CAAC,GAAG,IAAI,GAAG,SAAS,MAAM,GACrC,OAAO,GACP,GAAG,SAAS,OAAO,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,GACD,GAAG,SAAS,MAAM,MAAM,CAAC,GACvB,CAAC,GACD,GAAG,CAAC;AAEZ,qBAAa,OAAO,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS,CAAC;IAClE,IAAI,EAAE;QACJ,GAAG,EAAE,GAAG,CAAC;KACV,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;aACvB;SACF,CAAC;KACH,CAAC;CACH,CAAC;IAES,OAAO,EAAG,MAAM,UAAU,CAAC,GAAG,CAAC,CAAC;IAEzC,OAAO,EAAE,IAAI,CAAC;gBAEF,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE;QAAE,GAAG,EAAE,GAAG,CAAA;KAAE;IAM5C,IACI,OAAO;uBAKK,UAAU,CAAC,GAAG,CAAC;MAa9B;CAOF"}
+{"version":3,"file":"dom-context.d.ts","sourceRoot":"","sources":["../src/dom-context.gts"],"names":[],"mappings":"AAqPA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAO3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAmBtC,qBAAa,OAAO,CAAC,IAAI,SAAS,MAAM,CAAE,SAAQ,SAAS,CAAC;IAC1D;;;OAGG;IACH,OAAO,EAAE,IAAI,CAAC;IACd,IAAI,EAAE;QACJ;;;;;WAKG;QACH,IAAI,EAAE,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAE1C;;;;;;WAMG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QAEb;;;;;;;;;;;;WAYG;QACH,OAAO,CAAC,EAAE,MAAM,qBAAqB,GAAG,KAAK,GAAG,SAAS,CAAC;KAC3D,CAAC;IACF,MAAM,EAAE;QACN;;WAEG;QACH,OAAO,EAAE,EAAE,CAAC;KACb,CAAC;CACH,CAAC;IACA,IAAI,IAAI,SAcP;IAED,OAAO,EAAE,IAAI,GAAG,WAAW,CAAC;gBAG1B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;KACd;IAyBH,IAAI,kBAAkB,YAErB;CAmBF;AAuCD,KAAK,UAAU,CAAC,GAAG,IAAI,GAAG,SAAS,MAAM,GACrC,OAAO,GACP,GAAG,SAAS,OAAO,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,GACD,GAAG,SAAS,MAAM,MAAM,CAAC,GACvB,CAAC,GACD,GAAG,CAAC;AAEZ,qBAAa,OAAO,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS,CAAC;IAClE,IAAI,EAAE;QACJ,GAAG,EAAE,GAAG,CAAC;KACV,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;aACvB;SACF,CAAC;KACH,CAAC;CACH,CAAC;IAES,OAAO,EAAG,MAAM,UAAU,CAAC,GAAG,CAAC,CAAC;IAEzC,OAAO,EAAE,IAAI,CAAC;gBAEF,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE;QAAE,GAAG,EAAE,GAAG,CAAA;KAAE;IAM5C,IACI,OAAO;uBAKK,UAAU,CAAC,GAAG,CAAC;MAa9B;CAOF"}

package/dist/components/heading.js

@@ -0,0 +1,52 @@
+
+import Component from '@glimmer/component';
+import { element } from 'ember-element-helper';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+const LOOKUP = new WeakMap();
+function levelOf(node) {
+  let parent = node.parentElement;
+  let level = 0;
+  while (parent) {
+    if (parent instanceof Element) {
+      if (parent.tagName.toLowerCase() === "section") {
+        level++;
+      }
+    }
+    if (parent instanceof ShadowRoot) {
+      parent = parent.host;
+    }
+    parent = parent.parentNode;
+  }
+  return level;
+}
+class Heading extends Component {
+  headingScopeAnchor;
+  constructor(owner, args) {
+    super(owner, args);
+    this.headingScopeAnchor = document.createTextNode("");
+  }
+  get level() {
+    const existing = LOOKUP.get(this.headingScopeAnchor);
+    if (existing) return existing;
+    const parentLevel = levelOf(this.headingScopeAnchor);
+    const myLevel = parentLevel + 1;
+    LOOKUP.set(this.headingScopeAnchor, myLevel);
+    return myLevel;
+  }
+  get hLevel() {
+    return `h${this.level}`;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("\n    {{this.headingScopeAnchor}}\n\n    {{#let (element this.hLevel) as |El|}}\n      <El ...attributes>\n        {{yield}}\n      </El>\n    {{/let}}\n  ", {
+      strictMode: true,
+      scope: () => ({
+        element
+      })
+    }), this);
+  }
+}
+
+export { Heading };
+//# sourceMappingURL=heading.js.map

package/dist/components/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/dom-context.js

@@ -2,6 +2,7 @@
 import Component from '@glimmer/component';
 import { tracked, cached } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
+import { isElement } from './narrowing.js';
 import { createStore } from './store.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
@@ -25,14 +26,26 @@ class Provide extends Component {
   element;
   constructor(owner, args) {
     super(owner, args);
-    const element = document.createTextNode("");
+    assert(`@element may only be \`false\` or a string (or undefined (default when not set))`, this.args.element === undefined || this.args.element === false || typeof this.args.element === "string");
+    if (this.useElementProvider) {
+      this.element = document.createElement(this.args.element || "div");
+      // This tells the browser to ignore everything about this element when it comes to styling
+      this.element.style.display = "contents";
+    } else {
+      this.element = document.createTextNode("");
+    }
     const key = this.args.key ?? this.args.data;
-    LOOKUP.set(element, [key, () => this.data]);
-    this.element = element;
+    LOOKUP.set(this.element, [key, () => this.data]);
+  }
+  get useElementProvider() {
+    return this.args.element !== false;
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    {{this.element}}\n    {{yield}}\n  ", {
-      strictMode: true
+    setComponentTemplate(precompileTemplate("\n    {{#if (isElement this.element)}}\n      {{this.element}}\n\n      {{#in-element this.element}}\n        {{yield}}\n      {{/in-element}}\n\n    {{else}}\n      {{!-- NOTE! This type of provider will _allow_ non-descendents using the same key to find the provider and use it.\n\n        For example:\n          Provider\n            Consumer\n\n          Consumer (finds Provider)\n      --}}\n\n      {{this.element}}\n      {{yield}}\n\n    {{/if}}\n  ", {
+      strictMode: true,
+      scope: () => ({
+        isElement
+      })
     }), this);
   }
 }
@@ -40,18 +53,21 @@ class Provide extends Component {
  * How this works:
  * - starting at some deep node (Text, Element, whatever),
  *   start crawling up the ancenstry graph (of DOM Nodes).
- * - for each DOM node crawled upward, check all previous siblings to see if one matches the requested *key*
  *
- *  - This algo "tops out" (since we traverse upwards (otherwise this would be "bottoming out")) at the HTMLDocument (parent of the HTML Tag)
+ * - This algo "tops out" (since we traverse upwards (otherwise this would be "bottoming out")) at the HTMLDocument (parent of the HTML Tag)
  *
  */
 function findForKey(startElement, key) {
   let parent = startElement;
   while (parent) {
     let target = parent;
-    while (target = target?.previousSibling) {
-      if (!(target instanceof Text)) continue;
+    while (target) {
+      if (!(target instanceof Element) && !(target instanceof Text)) {
+        target = target?.previousSibling;
+        continue;
+      }
       const maybe = LOOKUP.get(target);
+      target = target?.previousSibling;
       if (!maybe) {
         continue;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-primitives",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "description": "Making apps easier to build",
   "keywords": [
     "ember-addon"