glimmerjs / glimmer-website Goto Github PK

Like we do with the Ember guides

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();
  }
}

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

It'd be lovely to have examples in the guides for this

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

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.

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! 😃

We want a basic website for the standalone Glimmer brand that highlights:

• How easy it is to get started and how approachable it is
• The fact that it's performant and light-weight
• That you're not locked in once you decide you need more (like a router or data)

Here is an initial stab at the basics:

Will continue to iterate tomorrow.

The website should document the upgrade steps:

yarn upgrade
ember init -b @glimmer/blueprint

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

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

Feature Request

404 page doesn't have header and footer for navigating through website & doesn't have link to homepage.

glimmer 404

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}})
• inline if
• <angle-bracket> invocation
• {{action}}
• "contextual components"
• attributes in HTML

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

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.

And an explanation of where they go. Probably worth putting in the components page?

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.

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…

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.

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.

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.

Are the actions for glimmer the same as those for ember?

Apparently only some of them are built right now: glimmerjs/glimmer-component#16

The API docs simply don't show up. It was reported in the Slack help channel. Confirmed in Chrome, Firefox, and Safari. No errors in the console.

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

See glimmerjs/glimmer-application-pipeline@12aeb59

With the basic discussion of how to deploy

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

See feedback from #27 that prompted this

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

1. Installing
2. Getting Started
3. Filesystem Layout
4. Component Basics
   • Show a component class and template that has the speakers properties and loops through them
5. Component Arguments & Validation
   • Introduce component arguments and how they are used internally and in templates
   • Introduce some basics of typescript, focusing on argument typing
6. Component Interactivity
   • Introduce the basics of tracked properties and actions
7. Component Lifecycle Hooks
   • Move lifecycle documentation here and expand on it
8. Using Glimmer as Web Components
9. In Depth: Change Tracking with Tracked Properties
   • Either make a new "In Depth" or "Advanced" heading or simply prepend it. This guide is super helpful, but was overkill for my first pass through the guides trying to make sense of everything.

I'm willing to take a stab at the changes, but I'd love some feedback on this before tackling it.

Hi

The Try and Guides links point to Github repositories, are the really supposed to?

Kind regards
Bent Bracke

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)

Currently the GitHub org looks unofficial due to no official logo and website.

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.

There was a good and thoughtful issue opened at glimmerjs/glimmer-component#29 that has some good suggestions we should address:

• UI components for what? Visitors should get this clear immediately
• "Attention to detail of ember" - is that a quality comparison, or is it only for ember framework?
• UI projects should have at least one or two screenshots
  Should mention at least one actual feature or component
• GitHub link doesn't go to a repo. Instead it's a list of repos that you have to click around in to find the main project.
• API docs link goes to a page that is blank except for another link to the actual API docs. If docs are not ready better to just link to "#", avoid frustration

We support either SASS or will concatenate CSS: glimmerjs/glimmer-application-pipeline#35

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.

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:

• Brief Introduction to Typescript (#65)
• Creating Your Glimmer App
• Planning Your App
• Build a modal component that shows a property detail view
• Build a component to filter properties
• Deploying (http://rwjblue.com/2017/04/18/deploying-glimmer-apps/)

This is a known thing we want to do, just waiting for things to calm down a bit before we do

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.

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.

Seems like Copyrights year still not updated to 2018 from 2017.

That explains the build process, basics of Broccoli, imports, etc

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

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

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.

In latest Chrome and FireFox on Mac OSX, this link:

https://glimmerjs.com/api/

Is not showing the table of contents that it refers to.