ember-nav-stack 6.1.2 → 7.1.0

package/addon/components/to-nav-stack.js

@@ -1,32 +0,0 @@
-import { guidFor } from '@ember/object/internals';
-import Component from '@glimmer/component';
-// import { argument } from '@ember-decorators/argument';
-import { inject as service } from '@ember/service';
-
-export default class ToNavStack extends Component {
-  // @argument('number')
-  // layer;
-
-  // @argument('any')
-  // item = null;
-
-  // @argument('any')
-  // header = null;
-
-  @service('nav-stacks') service;
-
-  constructor() {
-    super(...arguments);
-    this.service.pushItem(
-      guidFor(this),
-      this.args.layer,
-      this.args.item,
-      this.args.header,
-    );
-  }
-
-  willDestroy() {
-    super.willDestroy(...arguments);
-    this.service.removeItem(guidFor(this));
-  }
-}

package/addon/helpers/nav-layer-indices.js

@@ -1,29 +0,0 @@
-/* eslint-disable ember/no-computed-properties-in-native-classes */
-/* eslint-disable ember/no-observers */
-import Helper from '@ember/component/helper';
-import { computed } from '@ember/object';
-import { observes } from '@ember-decorators/object';
-import { inject as service } from '@ember/service';
-export default class NavLayerIndices extends Helper {
-  @service
-  navStacks;
-
-  compute() {
-    let layerCount = this.layerCount;
-    let indices = [];
-    for (let i = 0; i < layerCount; i++) {
-      indices.push(i);
-    }
-    return indices;
-  }
-
-  @computed('navStacks.stacks')
-  get layerCount() {
-    return Object.keys(this.navStacks.stacks).length;
-  }
-
-  @observes('layerCount')
-  navStacksChanged() {
-    this.recompute();
-  }
-}

package/addon/routes/stackable-route.js

@@ -1,61 +0,0 @@
-import Route from '@ember/routing/route';
-import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
-
-export function getParentRoute(router, route) {
-  // eslint-disable-next-line ember/no-private-routing-service
-  let routerMicroLib = router._routerMicrolib;
-  let { routeInfos, handlerInfos } = routerMicroLib.state;
-  routeInfos = routeInfos || handlerInfos; // routeInfos is in newer Ember versions
-  if (!routeInfos) {
-    return;
-  }
-  let routes = routeInfos.map((hi) => hi._handler || hi._route);
-  let routeIndex = routes.indexOf(route);
-  if (routeIndex > 0) {
-    return routes[routes.indexOf(route) - 1];
-  }
-}
-
-export default class StackableRoute extends Route {
-  @service router;
-  templateName = 'stackable';
-
-  getRouteComponent(/* model */) {
-    return `routable-components/${(
-      this.routableTemplateName || this.routeName
-    ).replace(/\./g, '/')}`;
-  }
-
-  getHeaderComponent(model) {
-    return `${this.getRouteComponent(model)}/header`;
-  }
-
-  get layerIndex() {
-    let parentRoute = getParentRoute(this._router, this);
-    let parentRouteLayerIndex = parentRoute.get('layerIndex');
-    let currentLayerIndex = parentRouteLayerIndex || 0;
-    if (this.newLayer === true) {
-      return currentLayerIndex + 1;
-    }
-    return currentLayerIndex;
-  }
-
-  setupController(controller, model) {
-    super.setupController(controller, model);
-    controller.setProperties({
-      layerIndex: this.layerIndex,
-      routeComponent: this.getRouteComponent(model),
-      headerComponent: this.getHeaderComponent(model),
-      routeName: this.routeName,
-    });
-  }
-
-  getParentRouteName() {
-    return getParentRoute(this._router, this).routeName;
-  }
-
-  @action back() {
-    this.router.transitionTo(this.getParentRouteName());
-  }
-}

package/addon/services/nav-stacks.js

@@ -1,157 +0,0 @@
-import { A } from '@ember/array';
-import Service from '@ember/service';
-import { next, scheduleOnce } from '@ember/runloop';
-import EmberObject from '@ember/object';
-import { Promise as EmberPromise } from 'rsvp';
-import { buildWaiter } from '@ember/test-waiters';
-import { set } from '@ember/object';
-let transitionWaiter = buildWaiter('ember-nav-stack:transition');
-let stackWaiter = buildWaiter('ember-nav-stack:stack-update');
-
-export default class NavStacks extends Service {
-  transitionToken;
-  _stackUpdateToken;
-  _initialRenderToken;
-
-  constructor() {
-    super(...arguments);
-    set(this, 'stacks', EmberObject.create());
-    this._listeners = A([]);
-    this._itemsById = {};
-    this._counter = 1;
-    this._runningTransitions = 0;
-    this.isInitialRender = true;
-    this._initialRenderToken = stackWaiter.beginAsync();
-  }
-
-  pushItem(sourceId, layer, component, headerComponent) {
-    this._itemsById[sourceId] = {
-      layer,
-      component,
-      headerComponent,
-      order: this._counter++,
-    };
-    this._schedule();
-  }
-
-  removeItem(sourceId) {
-    delete this._itemsById[sourceId];
-    this._schedule();
-  }
-
-  register(layerContainerComponent) {
-    this._listeners.pushObject(layerContainerComponent);
-  }
-
-  unregister(layerContainerComponent) {
-    this._listeners.removeObject(layerContainerComponent);
-  }
-
-  notifyTransitionStart() {
-    this._runningTransitions++;
-    if (this._runningTransitions === 1) {
-      this.transitionToken = transitionWaiter.beginAsync();
-    }
-  }
-
-  notifyTransitionEnd() {
-    this._runningTransitions--;
-    if (this._runningTransitions < 0) {
-      this._runningTransitions = 0;
-    }
-    if (this._runningTransitions === 0) {
-      if (this.transitionToken) {
-        transitionWaiter.endAsync(this.transitionToken);
-      }
-      this.transitionToken = undefined;
-    }
-    next(() => {
-      this._maybeResolveIdle();
-    });
-  }
-
-  runningTransitions() {
-    return this._runningTransitions;
-  }
-
-  isRunningTransitions() {
-    return this._runningTransitions > 0;
-  }
-
-  waitUntilTransitionIdle() {
-    if (this._waitingPromise) {
-      return this._waitingPromise;
-    }
-    return (this._waitingPromise = new EmberPromise((resolve) => {
-      this._resolveWaiting = resolve;
-      next(() => {
-        this._maybeResolveIdle();
-      });
-    }));
-  }
-
-  didUpdate() {} // hook
-
-  _maybeResolveIdle() {
-    if (
-      this._runningTransitions === 0 &&
-      !this._stackUpdateToken &&
-      !this._initialRenderToken &&
-      this._resolveWaiting
-    ) {
-      let resolveWaiting = this._resolveWaiting;
-      this._resolveWaiting = null;
-      this._waitingPromise = null;
-      resolveWaiting();
-    }
-  }
-
-  _schedule() {
-    if (!this._stackUpdateToken) {
-      this._stackUpdateToken = stackWaiter.beginAsync();
-    }
-    scheduleOnce('afterRender', this, this._process);
-  }
-
-  _process() {
-    let newStacks = {};
-    let itemsById = this._itemsById;
-    let wasInitialRender = this.isInitialRender === true;
-
-    for (var sourceId in itemsById) {
-      let { layer, component, headerComponent, order } = itemsById[sourceId];
-      let layerName = `layer${layer}`;
-      newStacks[layerName] = newStacks[layerName] || A();
-      let newItem = component ? { component, headerComponent, order } : null;
-
-      newStacks[layerName].push(newItem);
-    }
-    for (var layerName in newStacks) {
-      newStacks[layerName] = newStacks[layerName].sortBy('order');
-    }
-    set(this, 'stacks', EmberObject.create(newStacks));
-    if (this.isInitialRender === true) {
-      next(this, this._clearIsInitialRender);
-    }
-    this._listeners.invoke('stackItemsDidChange');
-    this.didUpdate();
-    next(() => {
-      if (wasInitialRender && this._initialRenderToken) {
-        stackWaiter.endAsync(this._initialRenderToken);
-        this._initialRenderToken = undefined;
-      }
-      if (this._stackUpdateToken) {
-        stackWaiter.endAsync(this._stackUpdateToken);
-        this._stackUpdateToken = undefined;
-      }
-      this._maybeResolveIdle();
-    });
-  }
-
-  _clearIsInitialRender() {
-    if (this.isDestroyed || this.isDestroying) {
-      return;
-    }
-    set(this, 'isInitialRender', false);
-  }
-}

package/addon/utils/component.js

@@ -1,40 +0,0 @@
-export function extractComponentKey(componentRef) {
-  if (!componentRef) {
-    return 'none';
-  }
-  let result = getComponentRefName(componentRef);
-  let modelId = getComponentRefModelId(componentRef);
-  if (modelId) {
-    result += `:${modelId}`;
-  }
-  return result;
-}
-
-function getComponentRefName(componentRef) {
-  let componentRefInner =
-    componentRef.inner?.name ||
-    componentRef[
-      Object.getOwnPropertySymbols(componentRef).find(
-        (s) => s.description === 'INNER',
-      )
-    ];
-  let result = componentRef.name || componentRefInner?.name;
-  return result;
-}
-
-function getComponentRefModelId(componentRef) {
-  let componentRefArgs =
-    componentRef.args ||
-    componentRef[
-      Object.getOwnPropertySymbols(componentRef).find(
-        (s) => s.description === 'ARGS',
-      )
-    ];
-  if (componentRefArgs.named.has && componentRefArgs.named.has('model')) {
-    let model = componentRefArgs.named.get('model').value();
-    if (model) {
-      return model.id;
-    }
-  }
-  return;
-}

package/app/components/nav-stack/component.js

@@ -1 +0,0 @@
-export { default } from 'ember-nav-stack/components/nav-stack/component';

package/app/components/nav-stack/template.js

@@ -1 +0,0 @@
-export { default } from 'ember-nav-stack/components/nav-stack/template';

package/app/components/to-nav-stack.js

@@ -1 +0,0 @@
-export { default } from 'ember-nav-stack/components/to-nav-stack';

package/app/helpers/nav-layer-indices.js

@@ -1 +0,0 @@
-export { default } from 'ember-nav-stack/helpers/nav-layer-indices';

package/app/services/gesture.js

@@ -1 +0,0 @@
-export { default } from 'ember-nav-stack/services/gesture';

package/app/services/nav-stacks.js

@@ -1 +0,0 @@
-export { default } from 'ember-nav-stack/services/nav-stacks';

package/app/styles/nav-stack.scss

@@ -1,117 +0,0 @@
-:root {
-  --nav-stack-header-height: 44px;
-  --nav-stack-footer-height: 50px;
-}
-
-$easing: cubic-bezier(.23, 1, .32, 1);
-
-.NavStack {
-  position: absolute;
-  left: 0px;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  will-change: transform;
-  overflow: hidden;
-
-  &--layer0 {
-    transform: translateY(0);
-    z-index: 1;
-  }
-  &--layer1 {
-    transform: translateY(100%);
-    z-index: 2;
-  }
-  &--layer2 {
-    transform: translateY(200%);
-    z-index: 3;
-  }
-  &-itemContainer {
-    position: absolute;
-    top: var(--nav-stack-header-height);
-    bottom: 0;
-    left: 0;
-    width: 500%;
-  }
-
-  &--withFooter &-itemContainer {
-    bottom: var(--nav-stack-footer-height);
-  }
-
-  &-item {
-    position: absolute;
-    width: 20%;
-    top: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    overflow:hidden;
-
-    @for $i from 0 through 100 {
-      &-#{$i} { left: 20% * $i; }
-    }
-  }
-
-  &-header {
-    position: absolute;
-    height: var(--nav-stack-header-height);
-    box-sizing: content-box;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: rgba(0,0,0,.2);
-  }
-
-  &-headerContainer {
-    position: relative;
-  }
-
-  &-headerComponent, &-headerContainerComponent {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-
-  &-headerContainerComponent {
-    will-change: opacity transform;
-  }
-
-  &-parentItemHeaderContainer {
-    opacity: 0;
-  }
-
-  &-footer {
-    position: absolute;
-    bottom: 0;
-    height: var(--nav-stack-footer-height);
-    box-sizing: content-box;
-    left: 0;
-    right: 0;
-    background: rgba(0,0,0,.2);
-  }
-
-  &.is-birdsEyeDebugging {
-    $item-width: 320px;
-    $item-height: 480px;
-    width: $item-width;
-    height: $item-height;
-
-    &.NavStack--layer1 {
-      transform: translateY($item-height);
-    }
-
-    &.NavStack--layer2 {
-      transform: translateY($item-height * 2);
-    }
-
-    .NavStack-itemContainer {
-      left: 0px;
-      width: $item-width * 5;
-    }
-
-    .NavStack-item {
-      border: 1px dashed blue;
-    }
-  }
-}

package/app/templates/stackable.hbs

@@ -1,8 +0,0 @@
-<ToNavStack
-  @layer={{this.layerIndex}}
-  @item={{component this.routeComponent model=this.model controller=this}}
-  @header={{component this.headerComponent model=this.model controller=this}}
-/>
-
-
-{{outlet}}

package/app/utils/animation.js

@@ -1 +0,0 @@
-export { default } from 'ember-nav-stack/utils/animation';

package/config/deploy.js

@@ -1,29 +0,0 @@
-/* eslint-env node */
-'use strict';
-
-module.exports = function (deployTarget) {
-  let ENV = {
-    build: {},
-    // include other plugin configuration that applies to all deploy targets here
-  };
-
-  if (deployTarget === 'development') {
-    ENV.build.environment = 'development';
-    // configure other plugins for development deploy target here
-  }
-
-  if (deployTarget === 'staging') {
-    ENV.build.environment = 'production';
-    // configure other plugins for staging deploy target here
-  }
-
-  if (deployTarget === 'production') {
-    ENV.build.environment = 'production';
-    // configure other plugins for production deploy target here
-  }
-
-  // Note: if you need to build some configuration asynchronously, you can return
-  // a promise that resolves with the ENV object instead of returning the
-  // ENV object synchronously.
-  return ENV;
-};

package/config/environment.js

@@ -1,5 +0,0 @@
-'use strict';
-
-module.exports = function (/* environment, appConfig */) {
-  return {};
-};

package/config/release.js

@@ -1,21 +0,0 @@
-/* jshint node:true */
-// var RSVP = require('rsvp');
-
-// For details on each option run `ember help release`
-module.exports = {
-  // local: true,
-  // remote: 'some_remote',
-  // annotation: "Release %@",
-  // message: "Bumped version to %@",
-  // manifest: [ 'package.json', 'bower.json', 'someconfig.json' ],
-  // publish: true,
-  // strategy: 'date',
-  // format: 'YYYY-MM-DD',
-  // timezone: 'America/Los_Angeles',
-  //
-  // beforeCommit: function(project, versions) {
-  //   return new RSVP.Promise(function(resolve, reject) {
-  //     // Do custom things here...
-  //   });
-  // }
-};

package/docs/ember-nav-stack-waiters-plan.md

@@ -1,125 +0,0 @@
-# Ember Nav Stack – Robust Test Waiters Plan
-
-## Goal
-
-- Make `ember-nav-stack`’s waiter coverage fully robust so `@ember/test-helpers` built-in waiting (from `visit`, `click`, etc.) is sufficient. Downstream apps should not need custom helpers like `waitForNavStackIdle` nor ad hoc `waitFor`/`waitUntil` for nav stabilization.
-
-## Background
-
-- Current service file: `ember-nav-stack/addon/services/nav-stacks.js`.
-- Today it creates a single waiter (`buildWaiter('ember-nav-stack:transition-waiter')`) and brackets only animation transitions via `notifyTransitionStart`/`notifyTransitionEnd`.
-- Pushing/removing items drives updates through `scheduleOnce('afterRender', this, this._process)`, which recomputes `stacks`, notifies listeners, and toggles `isInitialRender`.
-- Gaps:
-  - No waiter covers the coalesced “stack recompute + listener render” cycle triggered by `pushItem`/`removeItem`.
-  - No waiter covers the very first materialization (“initial render”) of the stack DOM.
-- Consequence in consumers: tests inject extra waits (custom helpers and repeated `waitFor` calls) to stabilize views after navigation.
-- Ember test semantics: `visit`/`click` already await “settled” (routing + runloop + registered waiters). If nav-stack marks all relevant async spans, tests can assert immediately after these helpers.
-
-## Design Overview
-
-- Introduce a second waiter to cover stack recompute + render: “stack-update waiter”.
-- Keep a dedicated “transition waiter” for CSS/animation-driven transitions (rename for clarity).
-- Add a one-time “initial render” waiter so tests don’t race the first DOM materialization.
-- End the stack waiter only after the listener-rendered DOM is visible (i.e., after `afterRender` and one `next()` tick).
-- Maintain aggregated semantics:
-  - Transitions: first start begins the waiter; last end closes it.
-  - Stack updates: coalesced updates begin once and end once per `_process` batch.
-
-## Detailed Changes (Service)
-
-- File: `addon/services/nav-stacks.js`
-
-### Waiters and Tokens
-
-- Module scope:
-  - `let transitionWaiter = buildWaiter('ember-nav-stack:transition');`
-  - `let stackWaiter = buildWaiter('ember-nav-stack:stack-update');`
-- Class state:
-  - `transitionToken` (replaces generic `waiterToken`).
-  - `_stackUpdateToken` (undefined when no coalesced update is pending).
-  - `_initialRenderToken` (undefined after first materialization completes).
-  - `_runningTransitions` counter (kept as-is).
-
-### Initial Render Coverage
-
-- In `constructor()`:
-  - `this._initialRenderToken = stackWaiter.beginAsync();`
-  - Keep `this.isInitialRender = true` as today.
-- In `_process()` (after recomputing `stacks` and notifying listeners):
-  - Schedule `next(() => { if (this.isInitialRender && this._initialRenderToken) { stackWaiter.endAsync(this._initialRenderToken); this._initialRenderToken = undefined; } this._maybeResolveIdle(); })`.
-  - Keep the existing `next(this, this._clearIsInitialRender)` behavior.
-
-### Stack Recompute + Render Coverage
-
-- In `_schedule()`:
-  - Keep `scheduleOnce('afterRender', this, this._process)`.
-  - Begin the stack-update waiter when scheduling a batch (if not already begun):
-    - `if (!this._stackUpdateToken) { this._stackUpdateToken = stackWaiter.beginAsync(); }`
-- In `_process()` (after setting stacks and notifying listeners):
-  - End the coalesced batch on the next tick to ensure DOM is fully flushed:
-    - `next(() => { if (this._stackUpdateToken) { stackWaiter.endAsync(this._stackUpdateToken); this._stackUpdateToken = undefined; } this._maybeResolveIdle(); })`
-
-### Transition Waiter Semantics
-
-- `notifyTransitionStart()`:
-  - `if (++this._runningTransitions === 1) { this.transitionToken = transitionWaiter.beginAsync(); }`
-- `notifyTransitionEnd()`:
-  - `if (--this._runningTransitions === 0) { transitionWaiter.endAsync(this.transitionToken); this.transitionToken = undefined; }`
-  - `next(() => this._maybeResolveIdle());`
-- Optional: guard negative counts defensively if a caller misorders starts/ends.
-
-## Why This Works
-
-- `@ember/test-helpers` waits for registered waiters between async helpers. With transitions and stack recompute wrapped, `visit`/`click` will naturally pause until:
-  - Routing settles.
-  - Data sources settle (handled by consumers’ waiters like Orbit).
-  - Nav-stack animations settle (transition waiter).
-  - Nav-stack recompute + listener render fully flush (stack-update waiter).
-- Tests can assert immediately after `await visit()` / `await click()` with no additional `settled()`/`waitFor`.
-
-## Test Plan (Within ember-nav-stack)
-
-- Initial render waiter:
-  - Mount a listener that renders an item. Assert `hasPendingWaiters()` is true until first flush completes.
-- Coalesced stack updates:
-  - Call `pushItem` twice in one runloop; assert one `_process` and a single waiter span; no pending waiters after the `next` tick.
-- Transition waiter behavior:
-  - Call `notifyTransitionStart()` n times, then `notifyTransitionEnd()` n times; assert waiter opens on first and closes on last.
-- Black-box flow:
-  - Simulate a click that causes a stack push; after `await click`, assert DOM reflects new item without extra waits.
-
-## Consumer Implications (e.g., yapp-core)
-
-- After upgrading ember-nav-stack:
-  - Remove custom `waitForNavStackIdle` helper usages.
-  - Remove redundant `waitFor`/`waitUntil` after navigation actions.
-  - Continue relying on existing data-source waiters (e.g., Orbit) and ensure other async (e.g., translations) is wrapped by test-waiters (outside nav-stack scope).
-
-## Performance & Production Impact
-
-- Waiter tokens are opened only on meaningful work (transition start, coalesced stack update, initial render) and coalesce naturally.
-- `@ember/test-waiters` strips most behavior in production builds, so runtime impact remains negligible in prod.
-
-## Risks & Edge Cases
-
-- Ensure all transitions reliably call `notifyTransitionStart/End` (including cancellation/unmount paths).
-- Third-party animations not integrated with nav-stack are not covered; prefer routing/transitions to go through nav-stack or add integration points.
-- If a listener performs DOM-affecting async outside Ember’s runloop, either bring it into the runloop or instrument it with a narrow waiter in that component.
-
-## Deliverables Checklist
-
-- [ ] Add `transitionWaiter` and `stackWaiter` in `addon/services/nav-stacks.js`.
-- [ ] Add `transitionToken`, `_stackUpdateToken`, `_initialRenderToken` fields.
-- [ ] Begin `_initialRenderToken` in `constructor`.
-- [ ] Begin `_stackUpdateToken` in `_schedule` (if absent).
-- [ ] End `_stackUpdateToken` and `_initialRenderToken` inside `next()` in `_process`.
-- [ ] Keep transition waiter around `notifyTransitionStart/End` (rename field for clarity).
-- [ ] Add unit/integration tests for the behaviors above.
-- [ ] README/Docs note: “With robust waiters, `visit`/`click` do not require extra waits.”
-
-## Acceptance Criteria
-
-- In a consumer app: after `await visit()` or `await click()`, nav-stack content is immediately assertable without extra waits.
-- Reduction in test flakiness associated with navigation and stack updates.
-- No regressions in production behavior.
-

package/index.js

@@ -1,15 +0,0 @@
-'use strict';
-
-module.exports = {
-  name: require('./package').name,
-  options: {
-    autoImport: {
-      exclude: ['wobble'],
-    },
-  },
-  included(app) {
-    this._super.included.apply(this, arguments);
-    app.import('vendor/wobble-shim.js');
-    app.import('node_modules/wobble/dist/wobble.browser.js');
-  },
-};

package/tsconfig.json

@@ -1,6 +0,0 @@
-{
-    "compilerOptions": {
-        "experimentalDecorators": true,
-        "allowJs": true
-    }
-}

package/vendor/wobble-shim.js

@@ -1,3 +0,0 @@
-define('wobble', function() {
-  return Wobble;
-});