The source for the Glimmer website.
The homepage and guides are powered by Harp and the API docs are vendored in as a compiled Glimmer app.
yarn
yarn run dev
Through the magic of the ☁️, master
deploys automatically.
Website for the Glimmer.js project
Home Page: https://glimmerjs.com
The source for the Glimmer website.
The homepage and guides are powered by Harp and the API docs are vendored in as a compiled Glimmer app.
yarn
yarn run dev
Through the magic of the ☁️, master
deploys automatically.
With the basic discussion of how to deploy
Thanks to some encouragement from @locks in slack, I was looking into where and how I could add some documentation about component argument validation with Typescript's class property typing. However, based on the current structure, there is no clear place to add it. After thinking it through for a little while, I think I've come up with a clearer progression guides, but I wanted to discuss it here before starting on the work.
Here my prosal with some notes
I'm willing to take a stab at the changes, but I'd love some feedback on this before tackling it.
Since Glimmer has a number of extensions to vanilla Handlebars (and people might not be familiar with Handlebars anyway) that overlap but are not identical to Ember, we need a templating guide focused on how to understand Glimmer templates.
Some notable examples of extension syntax:
@
-syntax (and the relationship to this.args
in component classes){{yield}}
{{has-block}}
(and lesser priority {{has-block-params}}
)if
<angle-bracket>
invocation{{action}}
In tracked-properties.md
:
Note: To get async/await to work you must create your project with the --web-component option, or add @glimmer/web-component to your package.json.
I think this is bad advice. This solves the problem by avoiding es5 compilation, which is a terribly broken thing that I think should go away (no prod builds; no minification). Also, installing a package that you don't need to alter the build pipeline in a mysterious way seems bobo to me.
I think what we should be doing is recommending they install babel-polyfill, which directly solves the problem of not having regeneratorRuntime
.
Per @rwjblue in glimmerjs/glimmer.js#8 (comment), he thought Glimmer was only supposed to support the browsers in the default targets.js
file
https://github.com/glimmerjs/glimmer-blueprint/blob/master/files/config/targets.js
It would be good to document that on the website somewhere so folks know what to expect when using Glimmer ...
Do we have to name all components TS files component.ts
and all components HB template files template.hbs
?
This is not practical when searching for the source file of a given component in IDEs... It would be more practical if the files were named like this : MyComponent.ts
and MyComponent.hbs
, under a MyComponent
folder.
Otherwise with the current recommandation(?) you end up with N files all named component.ts/template.hbs
....
We support either SASS or will concatenate CSS: glimmerjs/glimmer-application-pipeline#35
Hi
The Try and Guides links point to Github repositories, are the really supposed to?
Kind regards
Bent Bracke
In https://emberjs.github.io/rfcs/0308-deprecate-property-lookup-fallback.html the recommendation is for component templates to use the "this" prefix when referencing component properties. The current docs don't follow this convention.
There was a good and thoughtful issue opened at glimmerjs/glimmer-component#29 that has some good suggestions we should address:
See feedback from #27 that prompted this
The website should document the upgrade steps:
yarn upgrade
ember init -b @glimmer/blueprint
There seems to be an issue with auto-deployments. After merging glimmerjs/glimmer-api-docs#14, glimmerjs/glimmer-api-docs#13, glimmerjs/glimmer-api-docs#15 (in that order I think), the glimmer-api-docs app in this repo looks like this when run locally with yarn run dev
:
but it looks like this on glimmerjs.com/api/:
It seems like the update resulting from merging glimmerjs/glimmer-api-docs#14 was successfully deployed but glimmerjs/glimmer-api-docs#13 and glimmerjs/glimmer-api-docs#15 were not…
We want a basic website for the standalone Glimmer brand that highlights:
Here is an initial stab at the basics:
Will continue to iterate tomorrow.
Brand newbie (to Ember, and Glimmer) looking for clarity in the guides. Some things that happened on my first pass through the Glimmer guides today:
The tree for my project didn’t match what the guides had (including omitting a styles folder), though I didn’t notice until a bit after the fact. After uninstalling yarn and also ember-cli (someone in the announcements channel suggested that second one, if folks were using yarn), I was able to get the tree to match.
In File System Layout, it references hello-again
, though the earlier step created hello-portland
.
in Templates and helpers, there seems to be a need to be a closing tag for <conference-speaker @name="Tom" @status="Speaking">
. Until I added one, my localhost was telling me the build failed.
In general, the guides don’t explain where to put code for the different components as they are being built, in order to not break the build. For example:
This then allows us to use that component as a top-level component in our my-app/template.hbs file:
In the context of the guides, does that mean I should put <hello-portland />
in the my-app/template.hbs file? This is one example, but this happens with conference-speaker as well. I found myself throwing different tags like <hello-portland />
and <conference-speaker />
in different files just to see if I could get it to work. My attempts end up breaking the build, making the screen appear white, or having it continue to say “Welcome to Glimmer.” The last one sorta feels successful, as it means I figured out how I broke it -- but learning where to put these things would be even better. 😄
This should not at all read as complaining — I just thought, “hey, you likely don’t get brand newbies that can report things like this very often,” and figured it would help. I was stoked to try this out as my first attempt in the Emberverse — especially after this morning’s talks — but the guides aren’t enough to address the newbie ramp up yet. I hope this helps! 😃
Found here: https://github.com/tildeio/glimmer/blob/master/guides/04-references.md We'd like to see them on the sidebar under an Internals header that hides them by default (with a Normal header above our normal pages)
Are the actions for glimmer the same as those for ember?
Apparently only some of them are built right now: glimmerjs/glimmer-component#16
Currently the GitHub org looks unofficial due to no official logo and website.
Seems like Copyrights year still not updated to 2018 from 2017.
This is a bit of a super-nitpick, but there's a part on the "Installing" page that makes my brain skip a beat.
The page (rather clearly) explains we need a Canary version of Ember CLI for Glimmer, and walks us through the process of installing it, like so:
To install Ember CLI Canary, run the following command...
So far, so good. But then we get to the bottom of the page and read this:
Ember CLI doesn't have the concept of Canary versions...
It doesn't? Then what did I just install? 😕
[I imagine this is one of those cases where the wording is technically correct and accurate to what's actually going on, but it's really confusing from a "user" perspective.]
Like we do with the Ember guides
Hi There! As a newcomer to Ember, I found the Ember Tutorial quite helpful. I'm wondering if there's any interest in having a similar tutorial written using Glimmer? I'd be happy to jumpstart it if there is.
The sections could be something like:
<script src="my-new-container-name.js"></script>
should be <script src="conference-speaker.js"></script>
.
Guides also state that you need to wrap components in a containing element, which is not necessary.
I can make these changes and submit a PR.
https://github.com/glimmerjs/glimmer-website/blob/master/src/guides/components-and-actions.md
At the bottom $
is used without being installed and imported. This causes runtime errors.
import Component from '@glimmer/component';
export default class extends Component {
didInsertElement() {
$(this.element).pickadate();
}
}
Spent ages trying to figure this out... someone somewhere said {{each-in
would work, but it doesn't appear to be implemented :-(
Maybe this is known for people who are coming with an Ember background, I do not have an Ember background. It also doesn't appear to be documented anywhere.
Common refrain I read after the announcement of Glimmer was that (non-Ember) devs went to the site, saw Ember / Ember-CLI and got the impression that Glimmer runs on top of Ember. The site homepage should make this explicitly clear that this is a stand-alone library that, while it uses the Ember-CLI, does not require Ember itself at all. It should be clear without people watching the video.
I'm happy to try my hand at a few small edits to the home page copy to make this clear.
https://glimmer-playground.netlify.com/?app=JTdCJTIyY29tcG9uZW50cyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJHbGltbWVyQXBwJTIyJTJDJTIydGVtcGxhdGUlMjIlM0ElN0IlMjJmaWxlTmFtZSUyMiUzQSUyMnNyYyUyRnVpJTJGY29tcG9uZW50cyUyRkdsaW1tZXJBcHAlMkZ0ZW1wbGF0ZS5oYnMlMjIlMkMlMjJzb3VyY2VUZXh0JTIyJTNBJTIyJTNDaDElM0VXZWxjb21lJTIwdG8lMjB0aGUlMjBHbGltbWVyJTIwUGxheWdyb3VuZCElM0MlMkZoMSUzRSU1Q24lM0NwJTNFWW91JTIwaGF2ZSUyMGNsaWNrZWQlMjB0aGUlMjBidXR0b24lMjAlN0IlN0Jjb3VudCU3RCU3RCUyMHRpbWVzLiUzQyUyRnAlM0UlNUNuJTNDcCUzRSUyMENvdW50JTIwcGx1cyUzQSUyMCU3QiU3QmNvdW50UGx1cyU3RCU3RCUyMCUzQyUyRnAlM0UlNUNuJTNDYnV0dG9uJTIwb25jbGljayUzRCU3QiU3QmFjdGlvbiUyMGluY3JlbWVudCU3RCU3RCUzRUNsaWNrJTNDJTJGYnV0dG9uJTNFJTVDbiUyMiU3RCUyQyUyMmNvbXBvbmVudCUyMiUzQSU3QiUyMmZpbGVOYW1lJTIyJTNBJTIyc3JjJTJGdWklMkZjb21wb25lbnRzJTJGR2xpbW1lckFwcCUyRmNvbXBvbmVudC50cyUyMiUyQyUyMnNvdXJjZVRleHQlMjIlM0ElMjJpbXBvcnQlMjBDb21wb25lbnQlMkMlMjAlN0IlMjB0cmFja2VkJTIwJTdEJTIwZnJvbSUyMCclNDBnbGltbWVyJTJGY29tcG9uZW50JyUzQiU1Q25leHBvcnQlMjBkZWZhdWx0JTIwY2xhc3MlMjBleHRlbmRzJTIwQ29tcG9uZW50JTIwJTdCJTVDbiUyMCUyMCU1Q24lMjAlMjAlNDB0cmFja2VkJTIwY291bnQlMjAlM0QlMjAxJTNCJTVDbiU1Q24lMjAlMjAlNDB0cmFja2VkJTIwZ2V0JTIwY291bnRQbHVzKCklMjAlN0IlNUNuJTIwJTIwJTIwJTIwcmV0dXJuJTIwdGhpcy5jb3VudCUyMCUyQiUyMDUlM0IlNUNuJTIwJTIwJTdEJTVDbiUyMCUyMGluY3JlbWVudCgpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMHRoaXMuY291bnQlMkIlMkIlM0IlNUNuJTIwJTIwJTdEJTVDbiU1Q24lN0QlMjIlN0QlN0QlNUQlMkMlMjJoZWxwZXJzJTIyJTNBJTVCJTVEJTdE
I expected countPlus
to render 8, but it did not update with count
whenever clicking the button. This works as expected locally using the glimmer blueprint.
On an "Additional Reading" page under "Internals"? The level of detail for the Module RFC may be daunting to folks looking for a simple view library: https://github.com/emberjs/rfcs/blob/master/text/0143-module-unification.md
In latest Chrome and FireFox on Mac OSX, this link:
Is not showing the table of contents that it refers to.
The guides could use an early (optional) introduction to TypeScript and link to more resources.
Probably a link to Tom's blog post and some of its content would be appropriate.
We should probably not fully outsource the docs; the details of how to use TS with Glimmer don't require learning all of TypeScript, and a guide focused on what you need to be quickly productive in using Glimmer with TypeScript (focused on examples you'd really write) is important to avoid users feeling overwhelmed.
We should also likely give people advice about using TypeScript with VSCode if they don't already have a strong editor preference.
404 page doesn't have header and footer for navigating through website & doesn't have link to homepage.
After following the steps from glimmerjs.com
I get error while serving ember app
Error: The collection 'components' is not configured to contain a collection
Navigating to https://glimmerjs.com/api/ gives a 404 error. As of writing this is the first result I get when I google "glimmerjs api".
Navigating to https://glimmerjs.com/, I no longer see a link to the API doc.
The closest to an API doc I was able to get my hands on is at https://api.emberjs.com/ember/release/modules/@glimmer%2Fcomponent, but it's not as detailed as what used to be on the GlimmerJS website.
In glimmer's #each block how do I access the index of the item? I believe that in full handlebars/ember this is @index
?
Many thanks.
In the Glimmer intro video it seems to suggest that you can just use async/await out of the box without setup. Unfortunately when you try to use async/await you get errors where regeneratorRuntime
is undefined.
Safari: ReferenceError: Can't find variable: regeneratorRuntime
Chrome: Uncaught ReferenceError: regeneratorRuntime is not defined
It would be nice if there was explanation as to how to set this up, or, if this is a bug with Glimmer, perhaps an issue should be opened on its repository. I think the video is causing some confusion as it is right now.
Perhaps this may be covered as the API docs are expanded.
Correcting an oversight from launch :) Please let me know if y'all have the vector files you need to correct the logo itself, or if you need it.
For convenience of reference, the Ember color hex value you want is #E04E39.
Put this at the bottom of the template / helper page.
Usage: ember g glimmer-helper name
Landed in this PR: glimmerjs/glimmer-application-pipeline#30
That explains the build process, basics of Broccoli, imports, etc
Hi,
I expected to find how to do this in the docs or at least be told you cannot do this...
{{#each the array key="@index" as |item|}
{{@index}}}
{{#each}}
}```
Does not work, perhaps it is not meant to... But it seems perfectly reasonable to want to be able to reference an item in an array by a position, rather than having to `find()` or `filter()` on an artificially added property of that item.
It'd be lovely to have examples in the guides for this
This is a known thing we want to do, just waiting for things to calm down a bit before we do
I was able to eventually run multiple apps on the same page, which is key for larger companies with different teams working on different services. However, I couldn't find documentation on how to implement this, as it's a little different than changing the rootElement
in an Ember app.
I'm not sure if this is a possible intended use for Glimmer Apps, but it seems like it should be to me.
And an explanation of where they go. Probably worth putting in the components page?
I tried @tracked('@somearg')
and @tracked('args.somearg')
and neither seemed to work. Do I have to use a lifecycle hook and assign it to an internal property?
I suggest in the hero, even at the risk of losing more distracted people that click on it and then decide to check out Ember :P
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.