glimmerjs / glimmer.js Goto Github PK
View Code? Open in Web Editor NEWCentral repository for the Glimmer.js project
Home Page: https://glimmerjs.com
License: MIT License
Central repository for the Glimmer.js project
Home Page: https://glimmerjs.com
License: MIT License
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).
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
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?
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"
},
...
}
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.
According to the documentation (https://www.w3.org/TR/SVG/interact.html), svg has onclick
. Here is my try.glimmer example: http://tinyurl.com/y7bdn3n7
Relates to emberjs/ember.js#13420
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
$ 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 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.
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.
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.
noImplicitAny
in tsconfig.json
to true
.yarn run problems
noImplicitAny
back to falseWe will turn on noImplicitAny
once we have resolved the issue
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.
It is possible to create components that have no component.ts
in their folder. When a {{debugger}}
helper is added to the template, get('this')
returns null and there is no context
object in scope.
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:
{{
triggers an autocomplete instead of a syntax error.yarn install
a package and import it into their Glimmer.js app without having to jump through hoops.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.
Given:
class Foo {
foo = 'Foo'
@tracked('foo')
get bar() {
return `${this.foo}-bar`
}
}
In the example about the bar
getter 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.
Hi,
I'm still being hit by an issue that looks very much like glimmerjs/glimmer-component#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).
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!
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?
Reproduction: http://tinyurl.com/y79q85ss
When trying to do contextual components that have arguments curried, like so:
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)
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?
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.
Current app.import
comment is wrong, as it only applies to Ember, but we could have some useful stuff in there.
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
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.
class Component<TComponentArguments = any> {
get args() {
return this.__args__;
}
private __args__: TComponentArguments | null = null;
// omitted rest of code
}
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
}
}
What if I have shared components in multiple applications, can I just reference them by doing import ".../.../rootdirectory/application2/src/ui/component2"?
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 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:
Or better yet:
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..?
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:
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.
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
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
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
To make sure we can keep the blueprints in lockstep with the library we should migrate https://github.com/glimmerjs/glimmer-blueprint to the monorepo. This is pretty straightforward with the migration script in this repo.
Installing glimmer, I got this warning:
npm WARN deprecated [email protected]: Please replace with usage of fs.existsSync
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.
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.
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?
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 😄
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:
Regards,
Martin
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)
😈
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.
See emberjs/ember.js#16301 for the related quest issue in Ember.js.
@glimmer/component
as an Ember addon
import Component from '@glimmer/component'
provides plain JavaScript base classimport Component from '@glimmer/component/compat'
provides Ember.Object
base classcomponentManager
annotation when consumed from EmberCustomComponentManager
implementation should be discoverable via Ember’s container lookup (i.e. the custom component manager delegate should be registered as a 'component-manager'
)create(injections)
didInsertElement``()
willDestroy()
didUpdate()
click()
etc.) should not be triggeredthis.bounds
this.element
computed property alias to this.bounds
this.args
is available in the constructorthis.args
is updated before didUpdate
is calledthis.args
should not trigger an infinite re-render cycleargs
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)
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.lastNode
contains 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.
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
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';
}
}
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>
`)
How can we share components across multiple glimmer apps?
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:
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.