Giter Club home page Giter Club logo

glimmer.js's People

Contributors

asakusuma avatar chadhietala avatar chancancode avatar chiragpat avatar chriskrycho avatar dependabot[bot] avatar dfreeman avatar dgeb avatar gavinjoyce avatar givanse avatar josemarluedke avatar lifeart avatar locks avatar mmun avatar nicomihalich avatar nullvoxpopuli avatar ondrejsevcik avatar pablobm avatar pittst3r avatar pschutz93 avatar robbiewain avatar rondale-sc avatar rwjblue avatar simonihmig avatar smfoote avatar sohara avatar t-sauer avatar tomdale avatar turbo87 avatar wycats avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

glimmer.js's Issues

Passing arguments into components while testing.

Hi team!

Is it possible to pass arguments into components while rendering them for testing?

  test('it renders', async function(assert) {
    this.rating = 10;

    await this.render(hbs`<feedback-form rating={{rating}} />`);
}

I understand that this is a contrived example as I could just pass "10" directly, but I would also like to be able to pass closure actions (not in current documentation, I found an example here).

Warnings about unmet peer dependencies

Steps to reproduce:

  • ember new test-gjs -b @glimmer/blueprint
  • cd test-gjs && rm -rf node_modules yarn.lock
  • yarn

I can see those warnings in the output of yarn:

warning "@glimmer/[email protected]" has unmet peer dependency "@glimmer/compiler@> 0.23.0 || > 0.24.0-alpha.1 || > 0.25.0-alpha.1".
warning "@glimmer/[email protected]" has unmet peer dependency "@glimmer/component@>= 0.4.0".

Is it something I should worry about?

I tried to run:

yarn add -D @glimmer/component @glimmer/compiler

which installed versions:

$ grep -E "component|compiler" package.json
    "@glimmer/compiler": "^0.29.3",
    "@glimmer/component": "^0.6.0",

but the warning for @glimmer/test-helpers is still there…


$ ember -v
2.15.1
$ yarn -v
1.1.0

Nested components - help needed

Not sure if this is the right place to ask - I can't find any other discussion channels/forums for Glimmer.js yet.

I'm trying to achieve something like:

<TabComponent>
  <MyComponentA />
  <MyComponentB />
</TabComponent>

where the TabComponent would be able to iterate over child components and display them or not.

I've searched through documentation, but I'm not sure if this is a Glimmer thing or an Ember thing. I have a vague notion that I should be using yield but can't seem to find anything that tackles what I'm trying to do.

So, how do I access nested child components from the parent component. Are there any docs that explain how to do this?

Tracked properties not working as expected with array of arrays

I’ve just upgraded a glimmer project to 0.8 and just noticed a different behavior with a tracked property being an array of arrays. I have some code over Glimmer Playground to illustrate the issue.

It is a simple component including a each block where the length of each element of the tracked property is rendered.

Here is my initial implementation that used to work with <0.8: https://goo.gl/VTSyMw

Note we are adding elements into each individual array and trying to replace the value of the tracked property with a new array instance (so the components get updated after clicking the button). In 0.8 is not longer working.

In order to accomplish the missed behavior in 0.8, I had to reimplement it providing a “fresh instance” for each individual element of the array, not only the array instance as stated in the glimmer guides: https://goo.gl/hswPdE

Further information

The package.json of a glimmer project where the issue occurs (glimmer 0.8)

{
  "name": "my-component",
  ...
  },
  "scripts": {
    ....
  },
  "devDependencies": {
    "@glimmer/application": "^0.8.0",
    "@glimmer/application-pipeline": "^0.9.0",
    "@glimmer/blueprint": "^0.6.0",
    "@glimmer/component": "^0.8.0",
    "@glimmer/inline-precompile": "^1.0.0",
    "@glimmer/resolver": "^0.4.1",
    "@glimmer/test-helpers": "^0.30.0",
    "@glimmer/web-component": "^0.3.0",
    "@types/qunit": "^2.0.31",
    "broccoli-asset-rev": "^2.5.0",
    "ember-cli": "^2.14.0",
    "ember-cli-dependency-checker": "^2.0.1",
    "ember-cli-inject-live-reload": "^1.6.1",
    "ember-cli-sass": "^6.2.0",
    "ember-cli-uglify": "^2.0.0-beta.1",
    "qunitjs": "^2.3.3",
    "typescript": "^2.2.2"
  },
  ...
}

The package.json of a glimmer project where the issue does not occur (glimmer < 0.8)

{
  "name": "my-component",
  ...
  },
  "scripts": {
    ....
  },
  "devDependencies": {
    "@glimmer/application": "^0.7.2",
    "@glimmer/application-pipeline": "^0.8.0",
    "@glimmer/blueprint": "^0.5.0",
    "@glimmer/inline-precompile": "^1.0.0",
    "@glimmer/resolver": "^0.3.0",
    "@glimmer/test-helpers": "^0.30.0",
    "@glimmer/web-component": "^0.2.0",
    "@types/qunit": "^2.0.31",
    "broccoli-asset-rev": "^2.5.0",
    "ember-cli": "^2.14.0",
    "ember-cli-dependency-checker": "^2.0.1",
    "ember-cli-inject-live-reload": "^1.6.1",
    "ember-cli-sass": "^6.2.0",
    "ember-cli-uglify": "^2.0.0-beta.1",
    "qunitjs": "^2.3.3",
    "typescript": "^2.2.2"
  },
  ...
}

Confusing livereload server address is printed first

Got some feedback from someone playing with Glimmer.js for the first time. On booting the development server, the first message printed to stdout is:

Livereload server on http://localhost:7020

This is confusing because it seems like this is the URL you are supposed to open in your browser. However, if you open it, it will just print a JSON payload instead of the app you're expecting. The URL the livereload server is listening on is an implementation detail that we don't need to surface to users; particularly as the first thing they see.

`ember s` does not work out of the box

Hi everyone,

I just installed the ember-cli and tried to generate a glimmer project. the ember server command didn't work out of the box failing with the error message below. I'm using yarn 1.2.1 and the latest stable version of the ember-cli.

I was able to fix it by creating a .babelrc with the following content:

{
  "presets": [["es2015", { "modules": false }]]
}

Shouldn't this be shipped out of the box? Or at least in the setup instructions?

Cheers,
Dominik

Error Message:

$ ember server
Could not start watchman
Visit https://ember-cli.com/user-guide/#watchman for more info.
Livereload server on http://localhost:7020
The Broccoli Plugin: [BroccoliMergeTrees] failed with:
Error: Couldn't find preset "es2015" relative to directory "/Users/dkundel/dev"
    at error (/Users/dkundel/dev/glimmer-frameworks-special-demo/node_modules/rollup/dist/rollup.js:170:12)
    at /Users/dkundel/dev/glimmer-frameworks-special-demo/node_modules/rollup/dist/rollup.js:8937:6
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

The broccoli plugin was instantiated at: 
    at BroccoliMergeTrees.Plugin (/Users/dkundel/dev/glimmer-frameworks-special-demo/node_modules/broccoli-plugin/index.js:7:31)
    at new BroccoliMergeTrees (/Users/dkundel/dev/glimmer-frameworks-special-demo/node_modules/@glimmer/application-pipeline/node_modules/broccoli-merge-trees/index.js:16:10)
    at GlimmerApp.package (/Users/dkundel/dev/glimmer-frameworks-special-demo/node_modules/@glimmer/application-pipeline/dist/lib/broccoli/glimmer-app.js:270:23)
    at GlimmerApp.toTree (/Users/dkundel/dev/glimmer-frameworks-special-demo/node_modules/@glimmer/application-pipeline/dist/lib/broccoli/glimmer-app.js:301:28)
    at module.exports (/Users/dkundel/dev/glimmer-frameworks-special-demo/ember-cli-build.js:10:14)
    at Builder.setupBroccoliBuilder (/Users/dkundel/dev/glimmer-frameworks-special-demo/node_modules/ember-cli/lib/models/builder.js:56:19)
    at new Builder (/Users/dkundel/dev/glimmer-frameworks-special-demo/node_modules/ember-cli/lib/models/builder.js:30:10)
    at ServeTask.run (/Users/dkundel/dev/glimmer-frameworks-special-demo/node_modules/ember-cli/lib/tasks/serve.js:24:55)
    at Promise.resolve.then (/Users/dkundel/dev/glimmer-frameworks-special-demo/node_modules/ember-cli/lib/models/command.js:243:46)
    at tryCatcher (/Users/dkundel/dev/glimmer-frameworks-special-demo/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:329:19)

I'd like Unit Tests instead of Integration Tests

I understand that having a few integration tests through the browser is desirable, but am not at all sure they should be ran on npm test.

Standard unit tests are faster, easier to debug and have a far better developer experience. I think we should consider having them out of the box instead of integration tests which probably won't due to individual workstation configuration.

Failing that easily find-able instructions on how to switch.

"Cannot find module" in temp directory when '... new myapp -b @glimmer/blueprint' on Win10

Hi,

after I seen glimmer.js in action on jsconfeu last weekend I started to work through the guides from "glimmerjs.com". Installing on Win10 works fine:

> ember -v 
ember-cli: 2.14.0-beta.1
node: 6.10.3
os: win32 x64

But I got an error when creating a new app with ember new my-app -b @glimmer/blueprint:

Error creating new application. Removing generated directory `./my-app`
Cannot find module 'C:\Users\stste\AppData\Local\Temp\ember-cli11749-12384-ak8wi2.6h5llyp66r\node_modules\@glimmer\blueprint\package.json'
Error: Cannot find module 'C:\Users\stste\AppData\Local\Temp\ember-cli11749-12384-ak8wi2.6h5llyp66r\node_modules\@glimmer\blueprint\package.json'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at InstallBlueprintTask._validateNpmModule (C:\Users\stste\AppData\Local\Yarn\config\global\node_modules\ember-cli\lib\tasks\install-blueprint.js:128:15)
    at _createTempFolder.then.then.modulePath (C:\Users\stste\AppData\Local\Yarn\config\global\node_modules\ember-cli\lib\tasks\install-blueprint.js:91:14)
    at tryCatch (C:\Users\stste\AppData\Local\Yarn\config\global\node_modules\rsvp\dist\rsvp.js:539:12)
    at invokeCallback (C:\Users\stste\AppData\Local\Yarn\config\global\node_modules\rsvp\dist\rsvp.js:554:13)
    at publish (C:\Users\stste\AppData\Local\Yarn\config\global\node_modules\rsvp\dist\rsvp.js:522:7)
    at flush (C:\Users\stste\AppData\Local\Yarn\config\global\node_modules\rsvp\dist\rsvp.js:2414:5)

It seems that the generating of a temp directory during the blueprint install does not work - I guess on Win10 only? The ember-cli... directory is really not in ...AppData\Local\Temp\ in the file system.

Can someone help? Thanks.

Turn on `noImplicitAny`

If an application chooses to use the noImplicitAny they will have a really bad time with packages coming from this mono repo. While we have done a decent job at typing, we should turn on noImplicitAny in the monorepo and fix forward. The largest offender are the test. This issue can be addressed file by file.

How To Help

  1. Locally change noImplicitAny in tsconfig.json to true.
  2. Run yarn run problems
  3. See failures
  4. Pick a file to fix the type errors
  5. Turn noImplicitAny back to false
  6. Create PR

We will turn on noImplicitAny once we have resolved the issue

Using `tracked` without decorators

It could be useful to have docs about using tracked in function form instead of decorator form. experimentalDecorators from TypeScript and decorators from ECMAScript proposal are not the same thing. Also it'll be useful for people who prefer to use current version of JavaScript.

2018 Roadmap

I want to get feedback on what folks think should be our priorities in the new year. We invested heavily in R&D and performance in 2017, and I think that paid dividends, but in 2018 I'd like to focus on turning the more experimental stuff into production-ready, easy-to-adopt tools. I think we also need to follow through on our promise of uniting the Ember and Glimmer worlds.

Off the top of my head, these are some of the things I'd like to get done this year:

  1. Streamline and document server-side rendering, particularly with rehydration.
  2. Land binary bytecode compilation as the default mode for new Glimmer.js apps (i.e. integrate the existing work into the blueprint).
  3. Much, much better error messages. By the end of 2018, I'd like all error messages to include template source rather than VM internals. In other words, treat error handling like a real programming language.
  4. Better integration with the Ember language server, so you get nice things like autocomplete/IntelliSense in your editor. Doing this robustly requires a Handlebars parser that can recover gracefully from errors, so typing {{ triggers an autocomplete instead of a syntax error.
  5. Interoperability with the wider JavaScript ecosystem that "just works." Developers should be able to yarn install a package and import it into their Glimmer.js app without having to jump through hoops.
  6. Bite the bullet and start documenting and talking about the webpack plugin, which we've now used in production.

These are the things that stand out for me based on my experience building a production Glimmer app in the second half of last year. I'd love to know what else we need to get a polished experience that you would feel confident recommending to your friends.

Better Warning For @tracked properties

Given:

class Foo {
  foo = 'Foo'

  @tracked('foo')
  get bar() {
    return `${this.foo}-bar`
  }
}

In the example about the bargetter has a dependency on foo however foo cannot change. I believe the correct thing to do here is give a nice warning message about the dependency not being @tracked. This will allow users know why exactly things are not updating.

The option '--web-component' is not registered with the new command

Hi,

I installed Ember CLI 2.13.0-beta.3 and when running the following:

ember new meet-n-greet-widget -b @glimmer/blueprint --web-component

the application is created, but I see the following warning:

The option '--web-component' is not registered with the new command. Run ember new --help for a list of supported options.

Version info:

$ember -v
ember-cli: 2.13.0-beta.3
node: 7.8.0
os: darwin x64

Thanks!

IE & Edge Support

Hi,

a new untouched glimmerjs app with ember new my-app -b @glimmer/blueprint runs in firefox and chrome but not in ie or edge.

Edge gives me following error:

SCRIPT1028: Expected identifier, string or number: 
app.js (3386,11)

IE11:

SCRIPT1002: Syntaxfehler
app.js (7,1)

Is this an known issue?
Does GlimemrJS support MS Browsers at all?

Nested component helper does not support currying

Reproduction: http://tinyurl.com/y79q85ss

When trying to do contextual components that have arguments curried, like so:

{{yield (component 'ThirdComponent' name="Chad")}}

The following errors appear:

8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1 TypeError: Cannot read property '0' of null
    at 8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1
    at t.compile (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at expr (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at e.t.compileParams (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at e.t.compileArgs (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at e.t.yield (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at 8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1
    at t.compile (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at compileStatement (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at t.compile (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
TypeError: Cannot add property 0, object is not extensible
    at Array.push (<anonymous>)
    at t.merge (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at t.unwrap (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at 8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1
    at t.evaluate (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at t.next (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at t.next (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at r.t._render (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at r._render (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)
    at r.t.boot (8c2da3fb3527a231df5545a8bddd9850d9f0d8ab.js:1)

[Q] Custom dirty tracking with Glimmer

Hi

I have objects for keeping model data. I call them domain objects. They are instances of classes corresponding to model entities. Like you know Department, Employee, User and so on. These objects have nothing to do with the UI layer. But they can be used as a model for UI components.
Let's imagine we have a Glimmer component (e.g. "Editor") that should provide UI for editing some domain object (e.g. User).
These objects already have a mechanism for dirty tracking. For every entity property in model there's a function like prop() that can be used as set/get accessor and on property value change there're events on object ("change" and "change:prop"). I guess it's similar to old Ember.

So now I'm thinking can I use these objects with Glimmer and how.

Can I integrate my dirty tracking with Glimmer? And how could it be approached?

How to add babel-polyfills or any other js library

Hi all,

in #8 we were talking about IE compabilities where it was suggested to add babel-polyfills.
I already asked in the #8 issue about what would be the right way in glimmerjs to add the library, but I didn't get an answer yet and anyhow it got lost in comments I guess.

So I guess it's better to move this question to a seperate issue, so other peaple can find it easier if they are facing the same problem.

The way I did it is just add the js file as an external script in my index.html, but I'm sure there is a better way to include it.

npm install babel-polyfill and adding require('babel-polyfill') to the ember-cli-build.js file did not help.

Also using ember-cli-babel plugin and add 'ember-cli-babel': { includePolyfill: true } to the ember-cli-build.js resulted in an error as glimmerjs does not support app.import.

Would be great if someone could tell me how to add libraries the right way to a glimmerjs app.

Can a glimmer addon be created to pull in 3rd party code?

I want to use greensock in a glimmer component. There is ember-gsap - if I npm install this will it work?

There are no docs regarding installing addons - it would be useful to know what one needs to do with initialisers etc to set up an addon for glimmer

Turning Glimmer Component into a generic class

Hi everyone,

I'm currently taking a stab at my first Glimmer application. One thing I realized is that Component right now isn't a generic class. I think it would be useful to turn it into a generic to be able to type the arguments. This could later also help since we could write an extension that enables type checking on the handlebar templates for valid arguments.
I would be happy to do the work on turning this into a generic class. We could type the default still as any to make it backwards compatible.

Let me know what you think :)

Cheers,
Dominik

Some code for explanation.

  1. Turn class into generic:
class Component<TComponentArguments = any> {
  get args() {
    return this.__args__;
  }
  private __args__: TComponentArguments | null = null;

  // omitted rest of code
}
  1. Usage:
{{!--  template.hbs --}}
<SomeComponent @example="foo" />
interface SomeComponentArguments {
  example: string;
}
class SomeComponent extends Component<SomeComponentArguments> {
  didInsertElement() {
    const example = this.args.example;
    console.log(this.args.foo); // will break since foo is not a property of SomeComponentArguments
  }
}

Full re-render on any tracked property change

I've noticed that if I change any tracked property all the tracked properties seem to be updated. This only happens with @glimmer/application >= 0.7.0.

This demo expresses the problem by rendering an audio element.

When getMetaData or onCanPlay gets called then setting this.duration = this.audio.duration; or this.canPlay = true; causes the fileUrl on the audio element to also be changed, which triggers getMetaData and onCanPlay again.

Reverting to @glimmer/application 0.6.0 fixes the issue. Also just making the audio elements src static mitigates the issue (not really a solution though).

Promise values & suspend rendering

I tried finding any docs on to what extend this is supported by glimmer right now but didn't have any luck.

I'm currently working on a concept for using glimmer bytecode server-side. One important requirement is being able to suspend rendering until certain pieces of data are available. Is this something that is currently supported by glimmer? E.g. as a straw man:

Some static bits that could be flushed right now
{{await someSignal}}
{{lazyData.foo}}
{{await anotherSignal}}
{{moreLazyData.bar}}

Or better yet:

Some static bits that could be flushed right now
{{#await lazyData}}
{{foo}}
{{/await}}
{{#await moreLazyData}}
{{bar}}
{{/await}}

Also, it sounds like somewhere out there exists a solution to render glimmer bytecode to a stream server-side. But it seems like I can only find nebulous references to it..?

Proposal to optimize build bundle size

At the moment (@glimmer/[email protected]) glimmer application creates one bundle during the build. This bundle is self-sufficient and can be used without any additional dependencies in any application. The bundle contains glimmer.js lib, 3rd party libraries and code of the component(s) it exports.

But if I want to use several bundles in one application that uses, for example, webpack, I can't optimize resulting bundle size because glimmer.js bundles are exported as single CJS module without any dependencies specified. In this case code of libraries that is provisioned with glimmer.js bundle is duplicated as many times as many glimmer bundles I use in my application.

I propose to change the build process in such a way when build produces:

  1. self-sufficient bundle (exactly the same that build process does right now)
  2. Module that represent pure component(s) code with dependencies to glimmer.js library and the rest of 3rd party libs.

Such solution allows to specify all the dependencies in package.json and export as NPM package and then projects that runs js build with webpack or another bundler can optimize final bundle size when multiple glimmer bundles are used in one application.

PS: the same issue is also relevant for case when one glimmer.js bundle should be reused inside another one.

ember test broken with latest stable blueprint

I found the command ember test blows up using both node 8.9 and node 7.5 with both ember-cli 2.16.2 and 2.17.0-beta.2

To reproduce this simply spin up a new glimmer app like so

ember new demo -b @glimmer/blueprint

Then run ember test and you will see an exception complaining that @glimmer/test-helpers cannot find setApp in the dist/modules/es2017/index.js file

screen shot 2017-11-11 at 8 30 26 am

Taking a quick look at the commits for glimmer-test-helpers and it seems like not much has changed. When I dove into the node_modules folder itself @glimmer/test-helpers/dist/modules/es2017/index.js this is what I found

export { assertIsElement, assertNodeTagName, assertNodeProperty, equalInnerHTML, equalHTML, equalTokens, generateSnapshot, equalSnapshots, normalizeInnerHTML, isCheckedInputHTML, getTextContent, strip, stripTight, trimLines, blockStack, assertSerializedInElement } from './lib/helpers';
export { TestDynamicScope, equalsElement, inspectHooks, regex, classes } from './lib/environment';
export * from './lib/render-test';
export * from './lib/suites';
export { HelperReference } from './lib/environment/helper';
export { default as TestMacros } from './lib/environment/macros';
export { default as AbstractTestEnvironment } from './lib/environment/environment';
export * from './lib/environment/modifier';
export { default as LazyTestEnvironment, default as TestEnvironment } from './lib/environment/modes/lazy/environment';
export { NodeLazyRenderDelegate, NodeEagerRenderDelegate } from './lib/environment/modes/ssr/environment';
export { default as EagerRenderDelegate } from './lib/environment/modes/eager/render-delegate';
export { default as LazyRenderDelegate } from './lib/environment/modes/lazy/render-delegate';
export { debugRehydration } from './lib/environment/modes/rehydration/debug-builder';
export { default as EagerTestEnvironment } from './lib/environment/modes/eager/environment';
export * from './lib/environment/components';

Below is the broken example app for reference but honestly you should be able to create this yourself using the very latest stable blueprint with any recent ember-cli

https://github.com/toranb/busted-glimmer

How to install dependencies from npm?

I need to figure out how to load libraries from npm in a glimmer app.

For example, in my glimmer app, after running yarn add esri-loader and then using an import statement in my component, I get the following error when trying to run ember s.

The Broccoli Plugin: [RollupWithDependencies] failed with:
Error: Could not resolve 'esri-loader'

For details, see: tomwayson/esri-glimmer-example#1

Better error message when using a missing helper.

Currently, if I use a helper that doesn't exist, I get this error in the browser console:

Uncaught TypeError: func is not a function
at Blocks.compile (concat.ts:6)
at STATEMENTS.add (concat.ts:6)
at Compilers.compile (concat.ts:6)
at compileStatement (concat.ts:6)
at CompilableTemplate.compile (concat.ts:6)
at RuntimeResolver.compileTemplate (concat.ts:6)
at ComponentManager.getLayout (concat.ts:6)
at CompileTimeLookup.getLayout (concat.ts:6)
at STATEMENTS.add (concat.ts:6)
at Compilers.compile (concat.ts:6)

It would be nice if it could catch this during compilation or if that's not possible, then have an error message that's easier to comprehend and actionable.

Error running `ember new my-app -b @glimmer/blueprint`

Edit: Perhaps this is an issue for the ember-cli repo?

Below is the output to my terminal. Am I doing something wrong?

[dc] ~/Projects/web  % ember -v
ember-cli: 2.15.1
node: 6.9.1
os: darwin x64
[dc] ~/Projects/web  % ember new my-app -b @glimmer/blueprint
installing blueprint
  create .editorconfig
  create .watchmanconfig
  create README.md
  create config/environment.js
  create config/module-map.d.ts
  create config/resolver-configuration.d.ts
  create config/targets.js
  create ember-cli-build.js
  create .gitignore
  create package.json
  create public/robots.txt
  create src/index.ts
  create src/main.ts
  create src/ui/components/my-app/component-test.ts
  create src/ui/components/my-app/component.ts
  create src/ui/components/my-app/template.hbs
  create src/ui/index.html
  create src/ui/styles/app.scss
  create src/utils/test-helpers/test-helper.ts
  create testem.json
  create tsconfig.json
  create yarn.lock
Error creating new application. Removing generated directory `./my-app`
Command failed: yarn install --ignore-optional --non-interactive
warning "[email protected]" has incorrect peer dependency "@glimmer/compiler@> 0.26.0".
warning "@glimmer/[email protected]" has incorrect peer dependency "@glimmer/compiler@> 0.23.0 || > 0.24.0-alpha.1 || > 0.25.0-alpha.1".
warning "[email protected]" has incorrect peer dependency "@glimmer/compiler@> 0.23.0 || > 0.24.0-alpha.1 || > 0.25.0-alpha.1".
warning "@glimmer/[email protected]" has incorrect peer dependency "@glimmer/component@>= 0.4.0".
error /Users/dc/Projects/web/my-app/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/install.js
Arguments:
Directory: /Users/dc/Projects/web/my-app/node_modules/node-sass
Output:
module.js:471
    throw err;
    ^

Error: Cannot find module 'process-nextick-args'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/dc/Projects/web/my-app/node_modules/readable-stream/lib/_stream_readable.js:26:23)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

yarn install v1.0.2
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
[5/5] Building fresh packages...
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

[Q] Component dynamic content and 3rd-party components

Hi.

Next question is about dynamic content. Components can have nested components obviously. Let's suppose that our App has three components: Toolbar, Main content, Footer. But App doesn't know about what main content will be, it should be specified in runtime. So we can't put component invocation in App's template.

<App>
  <Toolbar></Toolbar>
  <???>
  <Footer></Footer>
</App>

Instead I need a way to tell Glimmer - take an value from App's property and treat it as a component instance (or class!).
How can it be implemented?

Another use case would be when an object in component's property isn't a Glimmer component at all but some 3rd party component with render method that expects DOMElement. For example it's a vanilla js object building DOM via jQuery. How can I use it?

Unable to run ember s in newly created Glimmer project

Hello,
I'm just trying out the Glimmer by following the Getting Started guide on the website.
After generating a new project and trying to run ember s to start the server, I get a blank terminal output, like it's trying to process something.
After a while, if I cancel the ember s command, I get this output:

Looks like you have a different program called watchman.
Visit https://ember-cli.com/user-guide/#watchman for more info.
Livereload server on http://localhost:7020
cleaning up...
Cannot stop: not the current node.
Cannot stop: not the current node.
Cannot stop: not the current node.
Build Canceled

I have watchman installed via brew

Output of ember --version:

ember-cli: 2.16.2
node: 6.9.1
os: darwin x64

Output of watchman --version
4.9.0

Output of which -a watchman:
/usr/local/bin/watchman

It seems the issue might be with the ember command, but I'm not sure the right place to report it.

At this point I'm not sure what else to try to get the basic version working. Any ideas would be very welcome 😄

Dom update gets slower after continuous updates

Hi everyone,

I am currently testing the performance of Glimmer and how fast are the DOM updates. I create a test with 5000 labels which are continuously rerendered. I ran some tests in the Chrome's Profiler and I noticed that the longer test runs, the bigger time is taken for an update.

Steps to reproduce:

  1. Checkout https://github.com/MapTo0/Simple-glimmer-app
  2. npm install
  3. Run the app (ember s)
  4. Run the profiler
  5. Wait some time - you will see that in the code updates are done for a minute
  6. Check the Profiler - the updates in the beginning are a lot faster than these in the end

Regards,
Martin

BUG: Cannot getting started due to error while installation on Windows 10

I tried on both Active LTS and Current Stable version of Node.js, still meet this issue.

PS C:\Users\Red\Desktop> ember new my-app -b @glimmer/blueprint
WARNING: Node v9.2.0 is not tested against Ember CLI on your platform. We recommend that you use the most-recent "Active LTS" version of Node.js. See https://git.io/v7S5n for details.
installing blueprint
  create .editorconfig
  create .ember-cli
  create .watchmanconfig
  create README.md
  create config\environment.js
  create config\module-map.d.ts
  create config\resolver-configuration.d.ts
  create config\targets.js
  create ember-cli-build.js
  create .gitignore
  create package.json
  create public\robots.txt
  create src\index.ts
  create src\main.ts
  create src\ui\components\MyApp\component-test.ts
  create src\ui\components\MyApp\component.ts
  create src\ui\components\MyApp\template.hbs
  create src\ui\index.html
  create src\ui\styles\app.scss
  create src\utils\test-helpers\test-helper.ts
  create testem.json
  create tsconfig.json
  create tslint.json
  create yarn.lock
Error creating new application. Removing generated directory `./my-app`
Command failed: yarn install --ignore-optional --non-interactive
warning [email protected]: 2.4.1 is the last version where QUnit will be published as 'qunitjs'. To receive future updates, you will need to change the package name to 'qunit'.
warning "@glimmer/application-pipeline > [email protected]" has unmet peer dependency "@glimmer/compiler@> 0.26.0".
warning " > @glimmer/[email protected]" has unmet peer dependency "@glimmer/compiler@> 0.23.0 || > 0.24.0-alpha.1 || > 0.25.0-alpha.1".
warning "@glimmer/inline-precompile > [email protected]" has unmet peer dependency "@glimmer/compiler@> 0.23.0 || > 0.24.0-alpha.1 || > 0.25.0-alpha.1".
error C:\Users\Red\Desktop\my-app\node_modules\node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: C:\Users\Red\Desktop\my-app\node_modules\node-sass
Output:
Building: C:\nodejs\node.exe C:\Users\Red\Desktop\my-app\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ 'C:\\nodejs\\node.exe',
gyp verb cli   'C:\\Users\\Red\\Desktop\\my-app\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library=' ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\Red\Desktop\my-app\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Red\Desktop\my-app\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Red\Desktop\my-app\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Red\Desktop\my-app\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Red\Desktop\my-app\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Red\Desktop\my-app\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:166:21)
gyp verb `which` failed  python2 { Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\Red\Desktop\my-app\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Red\Desktop\my-app\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Red\Desktop\my-app\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Red\Desktop\my-app\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Red\Desktop\my-app\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Red\Desktop\my-app\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:166:21)
gyp verb `which` failed   stack: 'Error: not found: python2\n    at getNotFoundError (C:\\Users\\Red\\Desktop\\my-app\\node_modules\\which\\which.js:13:12)\n    at F (C:\\Users\\Red\\Desktop\\my-app\\node_modules\\which\\which.js:68:19)\n    at E (C:\\Users\\Red\\Desktop\\my-app\\node_modules\\which\\which.js:80:29)\n    at C:\\Users\\Red\\Desktop\\my-app\\node_modules\\which\\which.js:89:16\n    at C:\\Users\\Red\\Desktop\\my-app\\node_modules\\isexe\\index.js:42:5\n    at C:\\Users\\Red\\Desktop\\my-app\\node_modules\\isexe\\windows.js:36:5\n    at FSReqWrap.oncomplete (fs.js:166:21)',
gyp verb `which` failed   code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` succeeded python C:\Python36\python.EXE
gyp verb check python version `C:\Python36\python.EXE -c "import platform; print(platform.python_version());"` returned: "3.6.3\r\n"
gyp verb could not find "C:\Python36\python.EXE". checking python launcher
gyp verb could not find "C:\Python36\python.EXE". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "C:\Python36\python.EXE", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Users\Red\Desktop\my-app\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Users\Red\Desktop\my-app\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack     at C:\Users\Red\Desktop\my-app\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:166:21)
gyp ERR! System Windows_NT 10.0.16299
gyp ERR! command "C:\\nodejs\\node.exe" "C:\\Users\\Red\\Desktop\\my-app\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\Red\Desktop\my-app\node_modules\node-sass
gyp ERR! node -v v9.2.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed with error code: 1

yarn install v1.3.2
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
[5/5] Building fresh packages...
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Error: Command failed: yarn install --ignore-optional --non-interactive
warning [email protected]: 2.4.1 is the last version where QUnit will be published as 'qunitjs'. To receive future updates, you will need to change the package name to 'qunit'.
warning "@glimmer/application-pipeline > [email protected]" has unmet peer dependency "@glimmer/compiler@> 0.26.0".
warning " > @glimmer/[email protected]" has unmet peer dependency "@glimmer/compiler@> 0.23.0 || > 0.24.0-alpha.1 || > 0.25.0-alpha.1".
warning "@glimmer/inline-precompile > [email protected]" has unmet peer dependency "@glimmer/compiler@> 0.23.0 || > 0.24.0-alpha.1 || > 0.25.0-alpha.1".
error C:\Users\Red\Desktop\my-app\node_modules\node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: C:\Users\Red\Desktop\my-app\node_modules\node-sass
Output:
Building: C:\nodejs\node.exe C:\Users\Red\Desktop\my-app\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ 'C:\\nodejs\\node.exe',
gyp verb cli   'C:\\Users\\Red\\Desktop\\my-app\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library=' ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\Red\Desktop\my-app\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Red\Desktop\my-app\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Red\Desktop\my-app\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Red\Desktop\my-app\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Red\Desktop\my-app\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Red\Desktop\my-app\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:166:21)
gyp verb `which` failed  python2 { Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\Red\Desktop\my-app\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Red\Desktop\my-app\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Red\Desktop\my-app\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Red\Desktop\my-app\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Red\Desktop\my-app\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Red\Desktop\my-app\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:166:21)
gyp verb `which` failed   stack: 'Error: not found: python2\n    at getNotFoundError (C:\\Users\\Red\\Desktop\\my-app\\node_modules\\which\\which.js:13:12)\n    at F (C:\\Users\\Red\\Desktop\\my-app\\node_modules\\which\\which.js:68:19)\n    at E (C:\\Users\\Red\\Desktop\\my-app\\node_modules\\which\\which.js:80:29)\n    at C:\\Users\\Red\\Desktop\\my-app\\node_modules\\which\\which.js:89:16\n    at C:\\Users\\Red\\Desktop\\my-app\\node_modules\\isexe\\index.js:42:5\n    at C:\\Users\\Red\\Desktop\\my-app\\node_modules\\isexe\\windows.js:36:5\n    at FSReqWrap.oncomplete (fs.js:166:21)',
gyp verb `which` failed   code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` succeeded python C:\Python36\python.EXE
gyp verb check python version `C:\Python36\python.EXE -c "import platform; print(platform.python_version());"` returned: "3.6.3\r\n"
gyp verb could not find "C:\Python36\python.EXE". checking python launcher
gyp verb could not find "C:\Python36\python.EXE". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "C:\Python36\python.EXE", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Users\Red\Desktop\my-app\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Users\Red\Desktop\my-app\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack     at C:\Users\Red\Desktop\my-app\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:166:21)
gyp ERR! System Windows_NT 10.0.16299
gyp ERR! command "C:\\nodejs\\node.exe" "C:\\Users\\Red\\Desktop\\my-app\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\Red\Desktop\my-app\node_modules\node-sass
gyp ERR! node -v v9.2.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed with error code: 1

yarn install v1.3.2
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
[5/5] Building fresh packages...
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

    at Promise.all.then.arr (C:\Users\Red\AppData\Local\Yarn\config\global\node_modules\execa\index.js:236:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Passing Properties to Webcomponents

I am trying to build a wc which loads data according to an id passed into the wc as a property:
<glimmer-wc @id=54></glimmer-wc>

Since options.args always returns {} i am unable to retrieve the id.

[QUEST] export `Component` from `@glimmer/component` (and `@glimmer/component/compat`)

See emberjs/ember.js#16301 for the related quest issue in Ember.js.

  • Support using @glimmer/component as an Ember addon
    • Preserve existing behavior when consumed from Glimmer.js
    • import Component from '@glimmer/component' provides plain JavaScript base class
    • import Component from '@glimmer/component/compat' provides Ember.Object base class
    • Base classes should import and add componentManager annotation when consumed from Ember
    • CustomComponentManager implementation should be discoverable via Ember’s container lookup (i.e. the custom component manager delegate should be registered as a 'component-manager')
  • Lifecycle Hooks
    • static create(injections)
    • didInsertElement``()
    • willDestroy()
    • didUpdate()
    • Event delegation-invoked methods (click() etc.) should not be triggered
  • Element Access
    • this.bounds
    • this.element computed property alias to this.bounds
  • Arguments
    • this.args is available in the constructor
    • this.args is updated before didUpdate is called
    • this.args should not trigger an infinite re-render cycle
  • Documentation
    • How to install
    • Caveats
      • Canary-only
      • Pre-1.0
    • Ember-Glimmer “compat” components
      • Outer HTML templates
      • Lifecycle hooks
      • Defining computed properties
        • How to depend on args

Error running `ember test` with --filter

The options filter and module for the command ember test are not properly working in a glimmerjs project.

Steps to reproduce

ember new glimmer-app -b @glimmer/blueprint
cd glimmer-app
ember test -f 'match a phrase in test description(s)'

Expected result

It should run only the tests with description that matches the provided filter, without errors.

Actual result

/tmp/glimmer-app git:(master) ember test -f 'match a phrase in test description(s)'
cleaning up...
Built project successfully. Stored in "/private/tmp/glimmer-app/tmp/class-tests_dist-0WaZxTfL.tmp".
/private/tmp/glimmer-app/node_modules/bluebird/js/release/async.js:61
        fn = function () { throw arg; };
                           ^

TypeError: Parameter "url" must be a string, not undefined
    at Url.parse (url.js:81:11)
    at Object.urlParse [as parse] (url.js:75:5)
    at Config.mergeUrlAndQueryParams (/private/tmp/glimmer-app/node_modules/testem/lib/config.js:202:20)
    at /private/tmp/glimmer-app/node_modules/testem/lib/config.js:225:17
    at Array.map (native)
    at Config.getTestPage (/private/tmp/glimmer-app/node_modules/testem/lib/config.js:224:19)
    at Config.get (/private/tmp/glimmer-app/node_modules/testem/lib/config.js:253:19)
    at /private/tmp/glimmer-app/node_modules/testem/lib/app.js:334:35
    at Config.getWantedLaunchers (/private/tmp/glimmer-app/node_modules/testem/lib/config.js:346:3)
    at /private/tmp/glimmer-app/node_modules/testem/lib/config.js:304:10
    at /private/tmp/glimmer-app/node_modules/testem/lib/config.js:293:5
    at tryCatcher (/private/tmp/glimmer-app/node_modules/bluebird/js/release/util.js:16:23)
    at Promise.successAdapter [as _fulfillmentHandler0] (/private/tmp/glimmer-app/node_modules/bluebird/js/release/nodeify.js:23:30)
    at Promise._settlePromise (/private/tmp/glimmer-app/node_modules/bluebird/js/release/promise.js:566:21)
    at Promise._settlePromise0 (/private/tmp/glimmer-app/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/private/tmp/glimmer-app/node_modules/bluebird/js/release/promise.js:693:18)

Accessing this.element throws exception for single root element with extra whitespace

With the following template:

<div class="container">
  <h1>My App</h1>
</div>

Trying to access this.element in the didInsertElement Lifecycle Hooks throws an error:

Uncaught Error: The 'element' property can only be accessed on components that contain a single root element in their template. Try using 'bounds' instead to access the first and last nodes.

I found out that this is because of the newline at the end of the file, which is treated as a separate node.
this.bounds.lastNodecontains a separate node with the content "↵"
Even adding a singe whitespace character at the end of the div node makes this.element access fail.

This behavior seems kind of unintuitive, since according to my first impression of this, this should be considered to be a single root element.
Would you say this is expected behavior, or is it recommended to always use this.bounds instead?


To reproduce:
Add a single space immediately after the end of this template i.e. after </nav>
https://github.com/glimmerjs/glimmer.js/blob/master/packages/%40glimmer/component/test/browser/element-test.ts#L50
Once you re-run the tests, the 'elements are supported' test fails.

Missing E2E Testing

Hey Guys,
First thx for your great work. Is there a list of todos ? maybe then this issue is obsolete, or what about e2e testing in the future plans of glimmerjs ?

thx

set props when tracked invoked

i want to change attributes when tracked invoked using set, but its does'nt work.
did my syntax is wrong..

import Component, {tracked} from '@glimmer/component';

export default class ComponentFoo extends Component {
  public name: string;

  @tracked
  public name2: string = 'uhaudhwuhdaw';

  @tracked('args')
  // set doesnt work
  set attrsFooFormated(args) {
    this.name2 = args.attrs.foo + 'ddw';
  }
  get attrsFooFormated(): any {
    return this.args.attrs.foo + ' hehehe';
  }
}

code to ast, how?

I just want to use glimmer for generating Code to Ast! where can i find a description for that?

Something like this:

let ast = glimmer.parse(`
    <ul class="people_list a b">
         {{#each people}}
              <li>{{this}}</li>
         {{/each}}
     </ul>
`)

Working with Custom Elements and Events

I'm having a bit of trouble working with custom elements in an Ember app, and I think it comes from some assumptions that Glimmer makes about angle-bracket components.

If I have some custom element (say os-modal for example) that I want to bind a custom event listener do, I want to do something like this:

<os-modal {{action 'onModalClose' on='modalclose'}}>
  Some modal content
</os-modal>

However, I get an error from Glimmer:

Element modifiers are not allowed in components

The problem is that Glimmer has no way (that I know of) to tell the compiler that os-modal is not a Glimmer component, and to treat it like any other HTML element.

Is there actually a way to tell Glimmer (or Ember) about non-Glimmer custom elements? If not, what would the steps be to work on that, and RFC for Glimmer? For Ember?

Original issue: ember-cli/ember-cli#6925

Issue for tracking per-package dependencies in tests

From #3

Packages are installed here by Lerna during lerna bootstrap. Duplicates are indeed concatted, which is allowed by our AMD loader so long as it duplicates are registered before the module is reified. This is obviously not ideal, but requires a mechanism for having per-package dependencies in the tests. I wanted to get something working landed and then iterate on resolving that problem.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.