ember-twiddle-2-source-binding

components.my-component\.js

import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';

export default class extends Component {

    _myValue = new Map();
    
    get myValue() {
        let currentArg = this.args.stringArg || null;
        let guid = guidFor(currentArg);
        if (this._myValue.has(guid)) {
            return this._myValue.get(guid)
        }
        else {
            this._myValue.clear(); // avoid GUID reuse of primitive types (Strings)
            return currentArg;
        }
    }

    set myValue(value) {
        this._myValue.set(guidFor(this.args.stringArg || null), value);
    }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
  appInput = '';
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<p>
<h3>Injecting changing preset values into the getter/setter feedback loop of an interactive input element by GUID switch</h3>
<br>
<small>cf. <a href='https://stackoverflow.com/questions/71277266/how-to-replace-computed-with-setter-returning-new-value-with-new-native-sette'>https://stackoverflow.com/questions/71277266/how-to-replace-computed-with-setter-returning-new-value-with-new-native-sette</a></small>
</p>
<br>
<ul>
    <li><u>Application Input:</u> changing value overwrites manual input in MyComponent</li>
    <li><u>MyComponent Input:</u> manual input overwrites last injected preset value from Application </li>
</ul>
<label for="application-input">Application:</label> <Input @value={{mut this.appInput}} id='application-input' />
@arg ⟶ <MyComponent @stringArg={{this.appInput}} />
{{outlet}}
<br>
<br>

templates.components.my-component\.hbs

<label for="my-component-input">MyComponent:</label>
<Input @value={{mut this.myValue}} id='my-component-input' />
<strong>&gt;|<span style="font-weight: normal; white-space: pre;">{{this.myValue}}</span>|&lt;</strong>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": true,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": false
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}