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?

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.

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: https://github.com/tomwayson/esri-glimmer-example/issues/1

With the recent Glimmer VM changes to adopt IndustryStandardCase, Glimmer.js components now relax the requirement of a template having a single root element. In addition to having multiple elements, this also means that a template may have top-level nodes such as CommentNodes or TextNodes.

This change renders the previous element API incoherent because there is no guarantee of a single "main" element for a template. Instead, we now set the bounds property of a component, which contains pointers to the first node and last node.

This is obviously less convenient for cases where you do just have a single conceptual main element. For example, if you have a template with a single root element, you would probably prefer to use this.element instead of this.bounds.firstNode or this.bounds.lastNode.

We could automatically determine the "single element" case and assign element automatically, but we were afraid that it would become a refactoring hazard. If you had a template with a single root element, wrote a bunch of code that used this.element, and then someone came along and added a comment to the beginning, all of that code would suddenly stop working.

Instead, you can now indicate which element is the conceptual "main" element by using ...attributes, which also is the location where invocation-side attributes will get splatted into. For example:

{{!-- MyComponent.hbs --}}
<h1>Title</h1>
<div class="content" ...attributes>
</div>

In this example, this.element would be the <div> element. If you invoked this component with <MyComponent id="component-id" />, this <div> would also receive the id attribute.

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.

The refactor to use a proxy for tracking individual updates to args requires us to make some changes here in how we assign arguments. Also adds the updateHook option to capabilities. This solution should be compatible with Ember pre and post enabling the tracked canary flag, but can be made better with ember-compatibility-helpers once we have a version of Ember to target.

Hi,

I'm still being hit by an issue that looks very much like https://github.com/glimmerjs/glimmer-component/issues/66

Manually hacking fix in seems to have solved the issue.

Opening issue due to the issue no longer being part of the history (as it's moved to this monorepo) and maybe the fix has been lost somehow (or maybe we need a new release).

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).

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)

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.

Most of the diff is from the yarn.lock file

The commits show a progression of why or what changed if you like reviewing that way. I'm also happy to squash if that's what folks would like.

Summary

• changes supported ember version to 3.12, 3.16 to 3.28, 3.24
  • (canary, beta, release, default) still present
• updates @glimmer/component's dependencies to be compatible with the newer ember versions
  • mainly: ember-auto-import@v2 is required for ember 4+
• applied addon blueprint over @glimmer/component (for the specified ember-source in that package.json) -- most of the diff is from these sorts of changes
• upgrades @glimmer/vm (and related dependencies)
• ember-component-manager changed from using Ember global apis to @ember/destroyable
  • I've been under the impression that this is the correct way to handle destruction
• ember-qunit and related changes are part of the v5 upgrade
• html-inlen-precomile premoved in favor of ember-cli-htmlbars
• minimum typescript version changed from 3.1 to 4.0 https://github.com/glimmerjs/glimmer.js/pull/379/files#diff-f17a36b7758421e673e4dae6c85e48d2a576da5bf873a4582ea563bcd2e5d742

Points of Interest

• modifiers test bumped capabilities: https://github.com/glimmerjs/glimmer.js/pull/379/files#diff-167ae90f1eff8de3995ae4a358d0719e15e69a218958bb2c20d67a4217ac4125
• lookupPartial removed: https://github.com/glimmerjs/glimmer.js/pull/379/files#diff-61c001d9dd145b884ddcc7008409f0a351989c201ba14647457d03490ffd0e1f
• change in destruction https://github.com/glimmerjs/glimmer.js/pull/379/files#diff-0d4d98f5acbcd1563d48f203d36e82c39815d1a0c7eea0321fba0bfae3b81483

What this PR Unblocks

• https://github.com/glimmerjs/glimmer.js/pull/358

Bumps express from 4.17.2 to 4.18.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps loader-utils from 1.4.0 to 1.4.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps socket.io-parser from 4.0.4 to 4.0.5.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps parse-url from 6.0.0 to 6.0.5.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps terser from 4.8.0 to 4.8.1.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.