Advanced Query Params

controllers.-base\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default class extends Controller {
  @service('query-params') params;

  // queryParams = this.params.buildControllerParams('application', {
  //   composeWith: [this.params.getDatatableParams('controls')]
  // });
}

routes.application\.js

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { dependentKeyCompat } from '@ember/object/compat';
import { tracked } from '@glimmer/tracking';

class BaseRoute extends Route {
  @service('query-params') params;
  controllerName = '-base';
}

export default class extends BaseRoute {
  myModel = this.params.createParams('model', { name: 'Chris' });
  dataTableParams = this.params.getDatatableParams('controls');
  other = this.params.createParams('other', { name: 'Matt' });
  
  @tracked queryParams = this.params.buildRouteParams(
    'application',
    { sources: [this.dataTableParams, this.myModel] }
  );

 
  model() {
    setTimeout(() => {
       this.queryParams = this.params.buildRouteParams(
         'application',
         {},
         { composeWith: [this.dataTableParams, this.myModel, this.other] }
       );
    }, 1000);
    return {
      other: this.params.getParams('other'),
      params: this.params.getParams('model'),
      dt: this.params.getDatatableParams('controls')
    };
  }
}

services.query-params\.js

import { tracked } from '@glimmer/tracking';

class Tag {
  @tracked ref = 0;
}

class Params {
  constructor(obj) {
    const tag = new Tag();
    return new Proxy(this, {
      get(target, k) {
        tag.ref;
        return obj[k];
      },
      set(target, k, v) {
        tag.ref = 0;
        obj[k] = v;
        return true;
      }
    });
  }
}

export default class {
  _params = new Map();
  // this allows finding the param object instance based on key
  _keys = new Map();
  // this is what the param path lookup will use from the contoller
  _keyed = {};

  // this allows finding the key in _keys based on the param object instance
  _keyLookup = new Map();

  getParams(key) {
    return this._params.get(key);
  }

  getDatatableParams(key) {
    const name = `datatable_${key}`;
    if (this._params.has(name)) {
      return this._params.get(name);
    }
    return this.createParams(name, {filter: '', sort: 'asc', limit: 25 });
  }

  createParams(key, obj) {
    const params = new Params(obj);
    this._params.set(key, params);
    this._keys.set(key, Object.keys(obj));
    this._keyed[key] = params;
    this._keyLookup.set(params, key);
    return params;
  }

  _buildRouteParams(name, serviceProp) {
    const keys = this._keys.get(name);
    const config = {};
    keys.forEach(key => {
      config[`${serviceProp}._keyed.${name}.${key}`] = { as: key, refreshModel: true, replace: true };
    });
    return config;
  }

  buildRouteParams(name, options, serviceProp = 'params') {
    this.createParams(name, {});
    const config = this._buildRouteParams(name, serviceProp);
    options?.sources.forEach(params => {
    	Object.assign(config, this._buildRouteParams(this._keyLookup.get(params), serviceProp));
    });
console.log(config);
    return config;
  }

  _buildControllerParams(name, serviceProp) {
    const keys = this._keys.get(name);
    const config = keys.map(k => `${serviceProp}._keyed.${name}.${k}`);
 
    return config;
  }
  buildControllerParams(name, options, serviceProp = 'params') {
    const keys = this._keys.get(name);
    const config = this._buildControllerParams(name, serviceProp);

    options?.composeWith.forEach(params => {
      const k = this._keyLookup.get(params);
      config.push(...this._buildControllerParams(k, serviceProp));
    });

    return config;
  }
  
  constructor(args) {
    Object.assign(this, args);
  }
  static create(args) {
    return new this(args);
  }
}

templates.application\.hbs

<h1>Welcome</h1>
<br>
<br>
Name: {{@model.params.name}}<br>
Update Name:<Input @value={{@model.params.name}} /><br>
Other Name: {{@model.other.name}}<br>
Update Other Name:<Input @value={{@model.other.name}} /><br>
Filter: {{@model.dt.filter}}<br>
Update Filter: <Input @value={{@model.dt.filter}} />
<br>
<br>
<br>
{{outlet}}
<br>
<br>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}