likely we need to get testem setup from emeber

refs: https://github.com/testem/testem

Later, it could be replaced, or modified to support playwright

Refs: https://github.com/rwjblue/ember-cli/blob/8466e4cd2fd24c69c89f7a9af9c9b5ca3ed6a01d/lib/tasks/test.js,
https://github.com/ember-cli/ember-cli/pulls?page=8&q=is%3Apr+testem+is%3Aclosed

It would be great to have https://github.com/ember-template-lint/ember-template-lint in our app

https://github.com/embroider-build/embroider/blob/main/packages/router/src/index.ts

I don't think we planning to implement it.

But, here is reference: https://github.com/lifeart/els-addon-glint/pull/3/files

https://github.com/slothsoft/qunit-reporter/blob/master/src/export/log-export.js

we need to have sample application-wide modifier, in our codebase

Modifier could listen for body clicks and show message if user clicked inside or outside node.

Helper should be located in src/modifiers/click-tracker.ts
It should be registered in registry as modifier:click-tracker

We could update main route template to use it.

We need to add ember-simple-auth app.

• App should have lazy-loaded private profile route.
• App should have login route with Login component.
• App should have logout route to log-out user (if route visited) and redirect it to main route.

At the moment, if we expose global ember, ember-inspector fails with:

It's semi-expected, because we trying to don't use amd logic from ember.

To reproduce issue find setupApplicationGlobals function and assing window.Ember instead of window._Ember

Related to #64

We need it to get rid of patching https://github.com/lifeart/demo-ember-vite/pull/71/files#diff-3fa761be8c391be9f799c2d7e81a6f29d72718623aaa04c734f3e2b2cfae6bf1

Extending #54

Some refs about old implementations: https://github.com/lifeart/ember-ast-hot-load/blob/master/addon/services/hot-loader.js#L148

But at the moment, renderTemplate is not available https://github.com/emberjs/ember.js/pull/19659/files#diff-d933badede0c63e738ba4ef11ac2b7f9b4aa04b40cee6b8d71f97d0ba9a2ce63.

It seems we need to create wrapper for registry to handle it (now)

We could hook into register method of application and wrap route templates.

  register(
    key: `${string}:${string}`,
    value: object | any,
    options?: any
  ): void {
    if (key.startsWith('template:')) {
      // hot-reload hook
      console.log('hot-reload', key, value);
    }
    return super.register(key, value, options);
  }

But, it seems (in general), we need more metadata for props forwarding.

Hot wrapper may looks like:

<Hot @component={{template}} as |Template|>
    <Template @model={{@model}} />
</Hot>

In short, we need kinda props forwarding. And we have to collect it from original template. (@model, this....), but, this is not rally forward-able.

to reload route we could try to use refresh key
https://github.com/mixonic/ember.js/blob/8547049f81ec0f0928bc5786e9687f86f0f54f1a/packages/%40ember/-internals/routing/lib/system/route.ts#L1034

to support basic ember addons, we need 2 things

• land #4 to be able to resolve hbs files
• import addon components/services/routes/controllers into registry (if not used in strict mode)
• if addon is used in strict mode, and don't rely on ember resolution, registry registration is not nessesary
• support decorators compilation from node_modules path

how it should look like for global app usage

/* src/config/registry.ts */

import CalendarTemplate from 'ember-power-calendar/addon/components/calendar/template.hbs';
import CalendarComponent from 'ember-power-calendar/addon/components/calendar/component';

function registry(): IRegistry {
    return {
        'component:calendar': setComponentTemplate(CalendarComponent,  CalendarTemplate),
    };
}

how it should look like for scoped usage

/* src/components/calendar.ts */

import Component from "@glimmer/component";
import { precompileTemplate } from "@ember/template-compilation";
import CalendarTemplate from "ember-power-calendar/addon/components/calendar/template.hbs";
import CalendarComponent from "ember-power-calendar/addon/components/calendar/component";

export default class Calendar extends Component {
  static template = precompileTemplate(
    `
       <CalendarComponent @theme="dark" />
    `,
    {
      isStrictMode: true,
      scope: () => ({
        CalendarComponent,
      }),
    }
  );
}

it will be cool if we able to add glint here and fix found typings issues

we need to get ember testing setup working with vite
we could take ember testing stack and port it to vite

we could take a look at https://github.com/izelnakri/qunitx

https://github.com/ijlee2/ember-container-query

it would be great to have such amazing trio in our app

we need to have sample application-wide helper, in our codebase

Helper could show current page memory and update every second

Helper should be located in src/helpers/memory-usage.ts
It should be registered in registry as helper:memory-usage

We could update main route template to use it.

Right now, all project files are created manually. It is not friendly. We need a cli tool. This is not a nearby issue; we need to create it when all file structures and concepts will be stable. But some suggestions now can reduce refactoring in the future.

The goal is to reduce amount of manual work for repeated actions like to generate a new route or component (as @lifeart have suggested in #30)

My thought:

• the commands should be similar ember-cli
• the project file structure shouldn't be hardcoded
• be as simple as possible, but has a modular structure, and anyone can simply extend logic, override settings and create new commands in the project.
• should be out of the box. It can be an external package, (may be in the monorepo with this demo), it allows to execute it from node_modules/bin/ or npx

Any other ideas?

we need to have sample logic, powered by https://github.com/NullVoxPopuli/ember-resources#example-async-utility

Let's assume we would like to run tests without "ember" magic, just have same exp as our application users.

For this purpose, we have to add proper playwright setup:

• Create playwright config
• Add sample e2e tests
• Verify it's working on ci
• Process coverage information from tests #50
• Add code coverage reporter on ci #45
• Capture test coverage from playwright 27fce1d

https://github.com/tracked-tools/tracked-toolbox

https://github.com/ember-animation/ember-animated

https://github.com/mainmatter/qunit-dom/releases/tag/v3.0.0

refs:

https://github.com/ember-template-imports/ember-template-imports
https://github.com/lifeart/vite-plugin-glimmerx

https://github.com/elwayman02/ember-user-activity

https://github.com/emberjs/ember-inspector/pull/2475/files#diff-b563250ea6955e99d6516e76c1e20fa93b64802e1e0158ff6f4fcd83cbb1c6d1R34

It will be great to have github CI integration to do in parallel:

1. Linting files
2. Having yarn build without errors

We already have it in app, just lack of samples

https://github.com/ember-template-imports/ember-template-imports

Sample yaml handing from vue: https://www.npmjs.com/package/@vitejs/plugin-vue
Or https://github.com/Modyfi/vite-plugin-yaml

import vue from '@vitejs/plugin-vue'
import yaml from 'js-yaml'

const vueI18nPlugin = {
  name: 'vue-i18n',
  transform(code, id) {
    if (!/vue&type=i18n/.test(id)) {
      return
    }
    if (/\.ya?ml$/.test(id)) {
      code = JSON.stringify(yaml.load(code.trim()))
    }
    return `export default Comp => {
      Comp.i18n = ${code}
    }`
  },
}

export default {
  plugins: [vue(), vueI18nPlugin],
}

In general, main approach should remain.

We need to do:

• apply proper patch for this version of ember-source. Samples: (#53), bump ember from 5.1 to 5.4 #82
• create ember-data configuration based on (#29) or maybe from scratch (should be simplier)

Here is glimmerjs ssr sample: https://github.com/lifeart/glimmerx-workshop/blob/master/server/index.js