t1

controllers.application\.js

import Controller from '@ember/controller';

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

s.component\.js

import Component from '@glimmer/component';

export default class extends Component {
}

s.template\.hbs

<p>in S</p>
{{yield}}
<TS
  @people={{array
    'Tom Dale'
    'Yehuda Katz'
    this.myOtherPerson
  }}
/>
{{!--!  
{{#let (capitalize this.person.firstName) (capitalize this.person.lastName)
  as |firstName lastName|
}}
  Welcome back {{concat firstName ' ' lastName}}

  Account Details:
  First Name: {{firstName}}
  Last Name: {{lastName}}
{{/let}}
!--}}

t-s.component\.js

import Component from '@glimmer/component';

export default class extends Component {
}

t-s.template\.hbs

<hr />
l={{@people.length}}
<ol>
  {{#each @people as |person|}}
    <li>{{person}}</li>
  {{/each}}
</ol>
{{yield}}

t-t.component\.js

import Component from '@glimmer/component';
import EmberObject, { computed } from '@ember/object';
//import { computed } from '@ember/object';

export default class extends Component {
  todos=null;

  constructor() {
    super(...arguments);
    this.todos=[
//  init() {
//    this.set('todos', [
      EmberObject.create({ isDone: true }),
      EmberObject.create({ isDone: false }),
      EmberObject.create({ isDone: true }),
  ]
//    ]);
  }
  incomplete=computed('[email protected]', function() {
    return this.todos.filterBy('isDone', false);
  })
  h1=Object.prototype.toString.call(this.incomplete);
/**
 * Return array paraments of a function
 * @param  {[function]} func function
 * @return {[array]}      parameters the functions
 *
 */
/* const */
// https://stackoverflow.com/questions/8639010/how-to-get-all-properties-of-an-object
  getFunctionParameters = (func) => {
    if (typeof func !== 'function') {
        throw new Error('A argument is not function.');
    }
    const args = func.toString().match(/\((.*)\)/)[1];
    return args.split(',').map((arg) => {
        if (arg.indexOf('=') === -1) return arg.trim();
        return arg
            .split('=')
            .map(val => val.trim())
            .join(' = ');
    });
};
  h2=this.getFunctionParameters(this.incomplete);
  f4=()=>{return 'hallo';}
  h4=this.f4();

/**
 * Return array paraments of a function
 * @param  {[function]} func function
 * @return {[array]}      parammeters the functions
 *
 
const 
*/
getFunctionParameters = (func) => {
    if (typeof func !== 'function') {
        throw new Error('A argument is not function.');
    }
    const args = func.toString().match(/\((.*)\)/)[1];
    return args.split(',').map((arg) => {
        if (arg.indexOf('=') === -1) return arg.trim();
        return arg
            .split('=')
            .map(val => val.trim())
            .join(' = ');
    });
};

/**
 * Display details about an object at run-time
 * @param  {[any]} target Any object
 * @return Nothing, all information will be display
*/
//
// local test, is OK   function b() { function c(){return 6}; return c()}
//
 introspect = (target) => {
   let m=[];
   this.l=(msg)=>{/*console.log(msg);*/ m.push(msg); return msg;}
   this.t=(msg)=>{this.l('');this.l(msg);this.l('----------------');}

    // get type of a target
    const typeTarget = typeof target;
   
    // variable for type attribute of the target
    let typeAttr;

    // for properties and methods of the target
    let properties = [];
    let methods = [];
    // if target is array, keep names all enumerable properties, simple put - numbers of indexes
    // otherwise set to null
    const enumerableProperties = Array.isArray(target) ? Object.keys(target) : null;

    // determination functions and properties of the target by a parent object
    Object.getOwnPropertyNames(Object.getPrototypeOf(target)).forEach((name) => {
        if (typeof target[name] === 'function') {
            methods.push(name);
        } else if (target.hasOwnProperty(name) && properties.indexOf(name) === -1) {
            properties.push(name);
        }
    });

    // determination other functions and properties of the target
    // filter it, if a name already added or if it is an array - filter all values of the indexes
    Object.getOwnPropertyNames(target).forEach((name) => {
        if (enumerableProperties !== null && enumerableProperties.indexOf(name) !== -1) {
            return;
        }
        if (typeof target[name] === 'function') {
            methods.push(name);
        } else if (target.hasOwnProperty(name) && properties.indexOf(name) === -1) {
            properties.push(name);
        }
    });

    // order properties and methods by name in reverse
    properties = properties.reverse();
    methods = methods.reverse();


    // display an obtained information by groups
    this.t('Definition: ');
    this.l(`${typeTarget}: "${target}"`);

		this.t(`Properties: ${properties.length}`);
    for (let i = properties.length - 1; i >= 0; i -= 1) {
        typeAttr = typeof target[properties[i]];
        this.l(`\t\t${properties[i]} --> ${typeAttr}`);
    }

    this.l(`Methods: ${methods.length}`);
for (let i = methods.length - 1; i >= 0; i -= 1) {
        let args = 
            // functools.
        this.getFunctionParameters(target[methods[i]]);
        args = args.join(', ');
        this.l(`\t\t${methods[i]} (${args})`);    
    }
   return {properties,methods,m};
};

  h3=this.introspect(this.incomplete);

}

t-t.template\.hbs

{{yield}}
<br />
List todos L={{todos.length}}
<ol>
  {{#each todos as |qi|}}
    <li>{{qi.isDone}}</li>
  {{/each}}
</ol>
<hr />
{{h4}}
i:{{incomplete.length}}
List of incompleted
Type:{{incomplete.typeof}}<br />
Object.prototype.toString.call(incomplete):{{h1}}
{{h2.length}}
<ol>
  {{#each h2 as |qi|}}
    <li>{{qi}}</li>
  {{/each}}
</ol>
<hr />
<h3>H3</h3>
<!--!
P={{h3.properties}}<br />
M={{h3.methods}}<br />
L={{h3.m.length}}<br />
!-->
<ul style="list-style-type: none;">
  {{#each h3.m as |qi|}}
    <li>{{qi}}</li>
  {{/each}}
</ul>
<hr />
<ol>
  {{#each incomplete as |qi|}}
    <li>{{qi.isDone}}</li>
  {{/each}}
</ol>
{{incomplete}}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<S>A:<p>b</p></S>
<Sl2 />
<br />
<br />
More: <TT>in tt</TT>
{{outlet}}
<TS
  @people={{array
    'Tom Dale'
    'Yehuda Katz'
    this.myOtherPerson
  }}
/>

<br />
<br />

twiddle\.json

{
  "version": "0.17.0",
  "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.3.1/jquery.js",
    "ember": "3.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}