glimmerjs/glimmer-experimental

A set of experimental high-level APIs built on Glimmer.js

glimmer-experimental's Issues

new glimmer project doesn't build with default babel rc

The app does build if i make the change as noted below:

.babelrc.js:

module.exports = function (api) {
  api.cache(true); // i had to add this line

  return {
    presets: ['@glimmer/babel-preset', '@babel/preset-env', '@babel/preset-typescript'],
  };
};

Inconsistent TypeScript declarations

I've noticed that @glimmerx/component ships with TypeScript declarations, by virtue of not having a files entry that excludes its index.ts from being published.

@glimmerx/modifier and @glimmerx/helper, on the other hand, exclude the .ts files they have that re-export from their corresponding @glimmer packages.

Is that distinction intentional, or are all the @glimmerx packages meant to include TypeScript support out of the box?

@ember/test-helpers render() style integration tests currently not possible

Hi there,

I've been experimenting with implementing emberx/router and emberx/test-helper library on top of glimmerx:
https://github.com/izelnakri/emberx

Currently there is an interesting roadblock for implementing readable and maintanable ember.js like import { render } from 'emberx/test-helpers', it could be a limitation of the current API. I'll explain the situation below, feel free to let me know if there are ways to implement this behavior, currently the documentation links are down.

In case if it doesn't exist, I would appreciate if we could implement it. Because otherwise it is currently not possible for one to write maintainable integration tests for glimmerx when they npm their way to ember from glimmer:

Intention:

import { module, test } from 'qunit';
import { render } from 'emberx/test-helpers';
import { setupRenderingTest } from 'emberx/test-helpers/setup';

import LinkTo from '../../src/components/LinkTo'; // NOTE: imported component to test

module('Integration | <LinkTo />', function (hooks) {
  setupRenderingTest(hooks);

  test('it works for a basic route without params', async function (assert) {
    await render('<LinkTo @route="public.index">Go to homepage</LinkTo>', LinkTo); // NOTE: currently 2nd argument needed unfortunately, explained below

    assert.dom('.ember-testing a').hasText('Go to homepage');
  });
});

Implementation and the roadblock(s):

// in package: emberx/src/test-helpers/index.js:

import GlimmerComponent, { hbs } from '@glimmerx/component';
import { renderComponent } from '@glimmerx/core';
import { getContext } from './context';

export function render(
  template: string,
  component: GlimmerComponent, // NOTE: normally we shouldn't need it if we could build an existing Component registry
  services: object | undefined
): Promise<any> {
  const context = getContext(); // NOTE: this just returns 'this' context of the test where its used
  const targetServices = context.services || services; // NOTE: this render API should be usable without implicit resolvers, thus needs an explicit way to set services context

  // testing something out:
  window.hbs = hbs`<LinkTo @route="something">Another</LinkTo>`; // NOTE: hbs is just a token currently, a precompile transpiler token, a babel plugin/addon 
  // thus no way to get an analysis of the dynamically provided template string in the `render(template)` argument.
  // we need that/or another function to return an AST with passed arguments, 
  // yield references as JS object when an hbs string is provided. 
  // Imported components inside the strings should be tokenized/included in the AST as well, somehow...
 
  console.log('template is', template); // this only gets transpiled when provided as hbs`` in the source file,
  // so as a string it loses the ComponentDefinition reference when its passed from another file, 
  // also imported Components inside this string miss their references, arguments, yielded state.

  // TODO: in other words we need to figure out a way to serialize template strings with passed in internal components, arguments and yielded context.
 
  return renderComponent(component, {
    element: document.getElementById('ember-testing'),
    args: Object.assign({}, context), // NOTE: I cant read the provided arguments from the template argument/string at the moment: I should be able to read { route: 'public.index', yield: ... }
    services: Object.assign({}, context, targetServices), // NOTE: interesting approach to make it ember.js compatible but also problematic
  }); 
  // NOTE: I can't read the yielded content in this API: 'Go to homepage' yielded string in this case. 
  // It could also be imported components with arguments/yields
}

Issues:

• How can I parse an hbs file/string dynamically to get passed in static and dynamic arguments, static html attributes, yielded test or components(that can be imported where they are defined, in another file)?

• renderComponent should accept strings or TemplateOnlyComponent with state(properties, yieldedData).

• renderComponent should accept yielded data to a component, behaving more like an outlet, thus this should also work:

interface ComponentRegistry {
   [componentName: string]: GlimmerComponent;
}

return renderComponent('<LinkTo @route={{this.targetRoute}}><Icon @name="arrow-right" /> Go to homepage</LinkTo>',
    element: document.getElementById('ember-testing'),
    properties: { targetRoute:  'public.index' },
    yieldContext: {}, // ComponentRegistry{'Icon': IconComponentDefinition, 'AnotherComponent': GlimmerComponentWithYieldedStateAndAttributesAndArguments }
    services: Object.assign({}, servicesInThisContext),
}); 

// or maybe some other function that has the same API, accepts similar arguments as renderComponent, 
// with additional properties, yieldContext option & keys provided above.

registerDestructor doesn't call on destruction

import { registerDestructor } from '@glimmer/destroyable';
// ..
registerDestructor(componentThis, () => {
    // This doesn't call
});

API to destroy rendered app

as I remember, there is no way to correctly destroy rendered app

APIs not working

Hello,

I have followed https://glimmerjs.com/ installation process and I had issues with dependencies being outdated and the default babel caching option wasn't set.

Alright, after fixing this issue I successfully ran the Glimmer project, but after I tried using hbs I got an error: "'hbs template should have been compiled at build time". Then I tried using {{on "click" this.increment}} within precompileTemplate and I got: "TypeError: Invalid value used as weak map key".

I have tried then running the Playground example from: https://github.com/glimmerjs/glimmer-experimental/tree/master/packages/examples and it worked flawlessly.

The guide on https://glimmerjs.com/ is outdated and it only helps you set up a corrupted Glimmer project that won't work. Feel free to try it for yourself, try to use any Glimmer API within the project.

My example: https://github.com/CROmartin/Glimmer-corrupted-example

Let me know your opinions, does the Ember team care anymore to make Glimmer a standalone framework or that is just a past idea that is slowly dying?

Best regards.

Way to access rendered component instance

wor web components usage and for inegration with different external APIS, it's will be grate to have official ability to access rendered glimmer app.

following examples:

import { renderComponent } from '@glimmerx/core';
// renderComponent(klass, opts) => Promise

is it possible to return component instance as resolved promise argument?
or opts = { connected(instance) {} }

Hot module replacement support? (way to hot-reload components)

https://webpack.js.org/guides/hot-module-replacement/
https://en.parceljs.org/hmr.html

We need way to get access into application instance, and reregister + rerender components

prettier-plugin: Improve implementation to work for import alias of hbs

Currently, for a component file, formatting will not apply if the tagged template expression is named anything other than hbs.

Improve the prettier plugin such renaming of the export still works.

Formats today

import Component, { hbs } from '@glimmex/component';

export default class Example extends Component {
  static template = hbs`
    <h1>
      Hello World
    </h1>
  `;
}

Currently does not format

import Component, { hbs as tpl } from '@glimmex/component';

export default class Example extends Component {
  static template = tpl`
    <h1>
      Hello World
    </h1>
  `;
}

BUG/Requirement: render() test-helper: currently impossible to set services & `this` context for templateOnlyComponents

I've done more investigation after my PR: #88 . I found that even my PR doesn't completely solve this problem, it seems like this is a limitation of our current compiler.

If I understood correctly our glimmerx babel plugin/compiler compiles the components with their scope: and services concatenated:

(compiledOutputWithScopesObj, serviceOne, serviceTwo)

This is not possible for a render() test-helper function since essentially we are passing down a glimmer templateOnlyComponent. I would appreciate if we could figure out a way to allow this in the glimmerx package or compiler level, so this context can be set directly in the renderComponent API:

  return renderComponent(hbs`
    <h1>{{this.someProperty}}</h1>
  `, {
    element: document.getElementById('ember-testing'),
    // thisContext or context or owner(which sets a context if thats what it does)
    args: argsContext
    services: servicesContextAssignedToThisContext
  });

Fresh app from blueprint doesn't build

Created a new app using the blueprint, and get this error on npm start. Using Node 12.22.1

➜  cogs git:(master) ✗ yarn start
yarn run v1.22.4
$ webpack-dev-server
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/iradchenko/sandbox/cogs/dist
✖ ｢wdm｣: Hash: 11a881d98d1e79d394b5
Version: webpack 4.46.0
Time: 1653ms
Built at: 04/27/2021 3:45:01 PM
               Asset       Size  Chunks             Chunk Names
       app.bundle.js    405 KiB     app  [emitted]  app
          index.html  535 bytes          [emitted]  
  public/favicon.png   2.04 KiB          [emitted]  
  public/logo192.png   5.96 KiB          [emitted]  
  public/logo512.png     17 KiB          [emitted]  
public/manifest.json  488 bytes          [emitted]  
   public/robots.txt   51 bytes          [emitted]  
     tests.bundle.js    406 KiB   tests  [emitted]  tests
    tests/index.html  377 bytes          [emitted]  
Entrypoint app = app.bundle.js
Entrypoint tests = tests.bundle.js
[1] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {app} [built]
[2] multi (webpack)-dev-server/client?http://localhost:8080 ./tests/rendering/App.test.js 40 bytes {tests} [built]
[./node_modules/ansi-html/index.js] 4.26 KiB {app} {tests} [built]
[./node_modules/html-entities/lib/index.js] 457 bytes {app} {tests} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {app} {tests} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {app} {tests} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 162 bytes {app} {tests} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {app} {tests} [built]
[./src/index.js] 2.92 KiB {app} [built] [failed] [1 error]
[./tests/rendering/App.test.js] 2.92 KiB {tests} [built] [failed] [1 error]
    + 22 hidden modules

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured
for various types of caching, using the first param of their handler functions:

module.exports = function(api) {
  // The API exposes the following:

  // Cache the returned value forever and don't call this function again.
  api.cache(true);

  // Don't cache at all. Not recommended because it will be very slow.
  api.cache(false);

  // Cached based on the value of some function. If this function returns a value different from
  // a previously-encountered value, the plugins will re-evaluate.
  var env = api.cache(() => process.env.NODE_ENV);

  // If testing for a specific env, we recommend specifics to avoid instantiating a plugin for
  // any possible NODE_ENV value that might come up during plugin execution.
  var isProd = api.cache(() => process.env.NODE_ENV === "production");

  // .cache(fn) will perform a linear search though instances to find the matching plugin based
  // based on previous instantiated plugins. If you want to recreate the plugin and discard the
  // previous instance whenever something changes, you may use:
  var isProd = api.cache.invalidate(() => process.env.NODE_ENV === "production");

  // Note, we also expose the following more-verbose versions of the above examples:
  api.cache.forever(); // api.cache(true)
  api.cache.never();   // api.cache(false)
  api.cache.using(fn); // api.cache(fn)

  // Return the value that will be cached.
  return { };
};
    at throwConfigError (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/config/files/configuration.js:280:9)
    at readConfigJS (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/config/files/configuration.js:198:43)
    at readConfigJS.next (<anonymous>)
    at Function.<anonymous> (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/gensync-utils/async.js:16:3)
    at Generator.next (<anonymous>)
    at step (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:261:32)
    at evaluateAsync (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:291:5)
    at Function.errback (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:113:7)
    at errback (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/gensync-utils/async.js:60:18)
    at async (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:188:31)
    at onFirstPause (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:216:13)
    at Generator.next (<anonymous>)
    at cachedFunction (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/config/caching.js:58:46)
    at cachedFunction.next (<anonymous>)
    at step (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:269:25)
    at evaluateAsync (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:291:5)

ERROR in ./tests/rendering/App.test.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured
for various types of caching, using the first param of their handler functions:

module.exports = function(api) {
  // The API exposes the following:

  // Cache the returned value forever and don't call this function again.
  api.cache(true);

  // Don't cache at all. Not recommended because it will be very slow.
  api.cache(false);

  // Cached based on the value of some function. If this function returns a value different from
  // a previously-encountered value, the plugins will re-evaluate.
  var env = api.cache(() => process.env.NODE_ENV);

  // If testing for a specific env, we recommend specifics to avoid instantiating a plugin for
  // any possible NODE_ENV value that might come up during plugin execution.
  var isProd = api.cache(() => process.env.NODE_ENV === "production");

  // .cache(fn) will perform a linear search though instances to find the matching plugin based
  // based on previous instantiated plugins. If you want to recreate the plugin and discard the
  // previous instance whenever something changes, you may use:
  var isProd = api.cache.invalidate(() => process.env.NODE_ENV === "production");

  // Note, we also expose the following more-verbose versions of the above examples:
  api.cache.forever(); // api.cache(true)
  api.cache.never();   // api.cache(false)
  api.cache.using(fn); // api.cache(fn)

  // Return the value that will be cached.
  return { };
};
    at throwConfigError (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/config/files/configuration.js:280:9)
    at readConfigJS (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/config/files/configuration.js:198:43)
    at readConfigJS.next (<anonymous>)
    at Function.<anonymous> (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/gensync-utils/async.js:16:3)
    at Generator.next (<anonymous>)
    at step (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:261:32)
    at evaluateAsync (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:291:5)
    at Function.errback (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:113:7)
    at errback (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/gensync-utils/async.js:60:18)
    at async (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:188:31)
    at onFirstPause (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:216:13)
    at Generator.next (<anonymous>)
    at cachedFunction (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/config/caching.js:58:46)
    at cachedFunction.next (<anonymous>)
    at step (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:269:25)
    at evaluateAsync (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:291:5)
 @ multi ./tests/rendering/App.test.js tests[0]
Child HtmlWebpackCompiler:
     2 assets
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_1 = __child-HtmlWebpackPlugin_1
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 751 bytes {HtmlWebpackPlugin_0} [built]
    [./node_modules/html-webpack-plugin/lib/loader.js!./tests/index.html] 588 bytes {HtmlWebpackPlugin_1} [built]
ℹ ｢wdm｣: Failed to compile.

Inconsistency between function and non-function scope binding

Expected: any value in scope is accessible in templates.

Actual: functions in scope are accessible (as modifiers or helpers), but other values are not.

Here's a minimal reproduction playground.

Promise rejected during "a component can render with helpers": (destructured parameter) is not iterable

Yarn test in root

Future ESLint plugin improvments

Opening this issue with the one that I've thought of so far, but anyone who has suggestions for future plans is welcome to weigh in.

• ember-template-linter support for glimmerx templates.
• Correct line/col for actual tokens instead of template string

Typescript: Bug during parsing components inside components

// on a typescript component:
import Component, { hbs, tracked } from '@glimmerx/component';
import Another from './Another';

export default class App extends Component {
  @tracked dynamicObject;

  constructor() {
    // console.log(Another);
    window.setInterval(() => {
      this.dynamicObject = {
        dynamicDate: new Date().toString(),
      };
    }, 200);
  }

  static template = hbs`
    <div id="intro">
      <h3>Cool</h3>
      <Another @text="hello" @dynamicObject={{this.dynamicObject}}/>
    </div>
  `;
}

The component above only works if I uncomment the console log above, the resolver cannot find/parse components imports correctly by just ts import Component from ./component or using it inside the hbs template, it needs the code to be referenced inside the Component js, even a useless console.log(Component) make that component render correctly.

Currently in the code above, without the console.log, render fails/app breaks with not a very helpful error:

setComponentManager.js:18 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
    at Function.getPrototypeOf (<anonymous>)
    at getComponentManager (setComponentManager.js:18)
    at createComponentDefinition (definitions.js:33)
    at definitionForComponent (definitions.js:15)
    at CompileTimeResolver.lookupComponent (CompileTimeResolver.js:43)
    at DefaultCompileTimeResolverDelegate.lookupComponent (delegate.js:68)
    at resolveLayoutForTag (resolver.js:11)
    at ifResolvedComponent (push-compile.js:150)
    at compileOp (push-compile.js:64)
    at pushCompileOp (push-compile.js:26)

When I turn the files into JS from TS everything works correctly, as expected.

• Component parsing needs to be fixed in TS.
• We should improve error messages such as this one.

eslint-plugin doesn't support {{yield}}

In my component:

export default class Form extends Component {
  static template = hbs`<form ...attributes>
  {{yield}}
</form>`;
}

I get an error:

Token yield is used in an hbs tagged template literal, but is not definedeslint(@glimmerx/template-vars)

I have fixed it using the rules in my .eslintrc.js with the following as a work around:
'@glimmerx/template-vars': ['error', 'all', { nativeTokens: ['yield'] }],

{{yield}} needs to be added to the default set of helpers.

Module not found: Error: Can't resolve '@glimmer/bundle-compiler'

Using @glimmerx/blueprint app throws errors in Ubuntu

OS version (Ubuntu 20.04 LTS)

$ uname -a
Linux inspiron 5.4.0-37-generic #41-Ubuntu SMP Wed Jun 3 18:57:02 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

Node version

$ node -v
v12.18.1

Yarn version

$ yarn -v
1.22.4

Console output

$ yarn start
✖ ｢wdm｣: Hash: 81ecc0f034a5da4b974f
Version: webpack 4.43.0
Time: 15998ms
Built at: 06/29/2020 5:45:37 AM
                                      Asset       Size  Chunks             Chunk Names
                              app.bundle.js   2.46 MiB     app  [emitted]  app
images/e14e33bc4ea14463b5e068ac55c6081f.svg   1.04 KiB          [emitted]  
                                 index.html  545 bytes          [emitted]  
                         public/favicon.png   2.04 KiB          [emitted]  
                         public/logo192.png   5.96 KiB          [emitted]  
                         public/logo512.png     17 KiB          [emitted]  
                       public/manifest.json  498 bytes          [emitted]  
                          public/robots.txt   51 bytes          [emitted]  
                            tests.bundle.js   2.73 MiB   tests  [emitted]  tests
                           tests/index.html  387 bytes          [emitted]  
Entrypoint app = app.bundle.js
Entrypoint tests = tests.bundle.js
 [1] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {app} [built]
[11] multi (webpack)-dev-server/client?http://localhost:8080 ./tests/rendering/App.test.js 40 bytes {tests} [built]
 [./node_modules/@glimmerx/core/dist/modules/index.js] 522 bytes {app} {tests} [built]
 [./node_modules/strip-ansi/index.js] 162 bytes {app} {tests} [built]
 [./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {app} {tests} [built]
 [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {app} {tests} [built]
 [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {app} {tests} [built]
 [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {app} {tests} [built]
 [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {app} {tests} [built]
 [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {app} {tests} [built]
 [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {app} {tests} [built]
 [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {app} {tests} [built]
 [./src/App.js] 1.17 KiB {app} {tests} [built]
 [./src/index.js] 171 bytes {app} [built]
 [./tests/rendering/App.test.js] 362 bytes {tests} [built]
    + 444 hidden modules

ERROR in ./node_modules/@glimmer/opcode-compiler/dist/modules/es2017/lib/program-context.js
Module not found: Error: Can't resolve '@glimmer/bundle-compiler' in '/home/rajasegar/Public/www/hello-glimmerx/node_modules/@glimmer/opcode-compiler/dist/modules/es201
7/lib'                                                                                                                                                                 
 @ ./node_modules/@glimmer/opcode-compiler/dist/modules/es2017/lib/program-context.js 3:0-58
 @ ./node_modules/@glimmer/opcode-compiler/dist/modules/es2017/index.js
 @ ./node_modules/@glimmerx/core/dist/modules/src/renderComponent/CompileTimeResolver.js
 @ ./node_modules/@glimmerx/core/dist/modules/index.js
 @ ./src/index.js

ERROR in ./node_modules/@glimmerx/component/dist/modules/src/GlimmerComponentManager.js
Module not found: Error: Can't resolve '@glimmerx/service' in '/home/rajasegar/Public/www/hello-glimmerx/node_modules/@glimmerx/component/dist/modules/src'
 @ ./node_modules/@glimmerx/component/dist/modules/src/GlimmerComponentManager.js 3:0-76 25:38-64 28:6-17
 @ ./node_modules/@glimmerx/component/dist/modules/src/Component.js
 @ ./node_modules/@glimmerx/component/dist/modules/index.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./node_modules/@glimmerx/core/dist/modules/src/renderComponent/index.js
Module not found: Error: Can't resolve '@glimmerx/service' in '/home/rajasegar/Public/www/hello-glimmerx/node_modules/@glimmerx/core/dist/modules/src/renderComponent'
 @ ./node_modules/@glimmerx/core/dist/modules/src/renderComponent/index.js 8:0-63 97:7-33
 @ ./node_modules/@glimmerx/core/dist/modules/index.js
 @ ./src/index.js
Child HtmlWebpackCompiler:
     2 assets
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_1 = __child-HtmlWebpackPlugin_1
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 772 bytes {HtmlWebpackPlugin_0} [built]
    [./node_modules/html-webpack-plugin/lib/loader.js!./tests/index.html] 609 bytes {HtmlWebpackPlugin_1} [built]
(node:5630) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/initrd.img'
(node:5630) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, o
r by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=str
ict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)                                                                            
(node:5630) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js
 process with a non-zero exit code.                                                                                                                                    
(node:5630) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/initrd.img.old'
(node:5630) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, o
r by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=str
ict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)                                                                            
(node:5630) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/vmlinuz'
(node:5630) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, o
r by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=str
ict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)                                                                            
(node:5630) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/vmlinuz.old'
(node:5630) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, o
r by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=str
ict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)                                                                            

Using `{{yield}}` in component prevents usage of `{{on}}` modifier

Example https://github.com/knownasilya/book-search/blob/8aeadfd413643448420aa87ec87e720bedd77db8/src/Books.ts#L72

In the example above, if I uncomment {{yield}} and then try to click on one of the buttons in the list, nothing happens (debugger isn't hit). Removing the yield fixes the issue.

expose cache and storage primitives

Currently the following packages are not available, and don't seem to work with glimmerx

import { createCache, getValue } from '@glimmer/tracking/primitives/cache';

And

import {
  createStorage,
  getValue,
  setValue,
  TrackedStorage,
} from '@glimmer/tracking/primitives/storage';

Integration with other projects

My understanding was that the goal for Glimmer was that people shouldn't need to use all of Ember, instead they could also opt for only lightweight Glimmer components (maybe as a part of a bigger app).

Somewhat related, there is a new project from the Snowpack crew/company, where the intent is to make a tool for rendering (mostly) vanilla HTML/CSS/JS out of JS frameworks.

Seems like their goal has some overlap with that of Glimmer. Maybe it would be a better idea to rely on their project for heavy work, and only prove the thin translation layer (renderer) for Glimmer/Ember.

Just wanted to put the idea out there. Don't know if this is a good idea or not.

withastro/astro#350

Issue with Template Tag within storybook

Description

• If the component has a template tag, the actual element is inserted as a sibling instead of being a child of #document-fragment

Screenshots

Actual render

Expected render

parcel issue + missing plugin-proposal-class-properties

{
    "presets": [
      "@babel/preset-env"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@glimmerx/babel-plugin-component-templates"
    ]
  }