Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[QUEST] Glimmer #1

Open
jgwhite opened this issue Jun 19, 2019 · 26 comments

Comments

Projects
None yet
9 participants
@jgwhite
Copy link
Owner

commented Jun 19, 2019

Objective

We want to get Prettier’s support for Ember templates up to the point where it is complete and maintainable enough to be officially released.

This quest issue was created to track the outstanding work required to meet this objective and to help volunteers coordinate to get the work done.

Contributing

The easiest way to contribute is to try Prettier’s Ember template support out in your apps and report any unwanted, incomplete, or otherwise wonky behaviour as a comment on this issue so it can be added to the quest. To do this:

$ yarn add -D prettier
$ yarn prettier '**/*.hbs' --parser glimmer

Or

$ npm i --save-dev prettier
$ npm run prettier '**/*.hbs' --parser glimmer

Then check the changes and look for stuff that makes you frown!

When you’re ready to contribute some code, identify an unowned item on the list below and leave a comment stating that you intend to work on it. We’ll tag the item with your handle. Once you have a PR that we can reference, leave another comment so we can link the item to the PR.

If you decide for whatever reason that you no longer wish to pursue the work, leave another comment and we’ll remove your handle from it. This is absolutely fine and you shouldn’t feel any regret if things don’t pan out.

Tasks

prettier/prettier

glimmerjs/glimmer-vm

emberjs/rfcs

Why does this quest issue live on a fork of prettier/prettier?

We’re trying it out as an experiment so we can easily add administrators on this issue.

@rwjblue

This comment has been minimized.

Copy link
Collaborator

commented Jun 19, 2019

RE: the entity escaping, we really need to avoid the escaping all together (see prettier#4533 (comment) for more details)

@GavinJoyce

This comment has been minimized.

Copy link
Collaborator

commented Jun 19, 2019

I'm working on fixing the HTML entities here: prettier#6234

@GavinJoyce GavinJoyce referenced this issue Jun 19, 2019

Merged

[Glimmer] preserve HTML entities #6234

4 of 4 tasks complete
@tchak

This comment has been minimized.

Copy link
Collaborator

commented Jun 19, 2019

@jgwhite if you add me to this fork it will be easier for me to copy the source markdown to the upstream issue

@GavinJoyce

This comment has been minimized.

Copy link
Collaborator

commented Jun 20, 2019

Perhaps it would be better to just have a single quest issue? Perhaps we should just use this one as we can have multiple editors? We could link to this issue from prettier#4908

@jgwhite perhaps you could give me edit access to this issue too?

@tchak

This comment has been minimized.

Copy link
Collaborator

commented Jun 20, 2019

I just linked the main issue to this one

@dcyriller

This comment has been minimized.

Copy link

commented Jun 20, 2019

I've opened a PR to fix a bug: prettier is a bit eager regarding whitespaces between text and helpers prettier#6239

// Input
{{#component propA}}
    for {{propB}}  do {{propC}} f
{{/component}}

// Output (Prettier stable)
{{#component propA}}
  for{{propB}}do{{propC}}f
{{/component}}

// Output (Prettier the PR)
{{#component propA}}
  for {{propB}}  do {{propC}} f
{{/component}}

@GavinJoyce I hope it won't conflict with what your current work 😅

@Alonski

This comment has been minimized.

Copy link

commented Jun 20, 2019

@dcyriller Do you rely on this whitespace? I personally would like a more verbose way to specify significant whitespace. Maybe I'm wrong 😅

@jgwhite

This comment has been minimized.

Copy link
Owner Author

commented Jun 20, 2019

@dcyriller added to the tracking info description. Nice one!

Personally I’d like Prettier to behave like this:

Before:

<p>Hello   {{name}}   happy   {{age}}    birthday!</p>

<pre>
  Name: {{name}}
  Age:  {{age}}
</pre>

After:

<p>Hello {{name}} happy {{age}} birthday!</p>

<pre>
  Name: {{name}}
  Age:  {{age}}
</pre>

i.e. don’t mess with whitespace instead <pre> tags.

Edit:

Though it now occurs to me that there’d be no way for Prettier to know about components like:

<CodeBlock @format="plain">
  Name: {{name}}
  Age:  {{age}}
</CodeBlock>
@GavinJoyce

This comment has been minimized.

Copy link
Collaborator

commented Jun 20, 2019

Though it now occurs to me that there’d be no way for Prettier to know about components like:

I think we'll need to add support for {{!-- prettier-ignore --}}:

{{!-- prettier-ignore --}}
<CodeBlock @format="plain">
  Name: {{name}}
  Age:  {{age}}
</CodeBlock>
@dcyriller

This comment has been minimized.

Copy link

commented Jun 20, 2019

Reading your comments I understand we should have:

// Input
{{#component propA}}
    for {{propB}}  do {{propC}} f
{{/component}}

// Output (Prettier stable)
{{#component propA}}
  for{{propB}}do{{propC}}f
{{/component}}

// Output (Prettier the PR)
{{#component propA}}
  for {{propB}} do {{propC}} f
{{/component}}

I'll update my PR tomorrow to reflect that!

Also, we should implement {{!-- prettier-ignore --}} for handlebars (most probably in an other PR).

Thank you for your feedbacks!

EDIT: just saw that you opened a new PR two hours before mine @GavinJoyce 😬. So, I'll close it for now. Once yours is merged, I'll be able to rebase and open mine (if still necessary).

@GavinJoyce

This comment has been minimized.

Copy link
Collaborator

commented Jun 21, 2019

@dcyriller please feel free to land anything you like, I'm going to switch focus this weekend and try an experiment to rebuild prettier's glimmer printer from first principles. I doubt that it will come to anything, but I think it will be useful in learning prettier's internals.

@jgwhite

This comment has been minimized.

Copy link
Owner Author

commented Jun 21, 2019

@GavinJoyce I sense a future emberconf talk in the making…

@efx

This comment has been minimized.

Copy link

commented Jun 21, 2019

@GavinJoyce I'm in the peanut gallery here, but I'm curious if there is any overlap with @rwjblue 's ember-template-recast. If anything another implementation to compare.

@jgwhite

This comment has been minimized.

Copy link
Owner Author

commented Jun 21, 2019

And also @code0100fun’s ember-template-rewrite.

@dcyriller

This comment has been minimized.

Copy link

commented Jun 27, 2019

I opened a PR to add trailing newline to hbs files: prettier#6243 (my IDE adds a final newline on every opened files so I had git changes every time I opened a file 😛. Also, Prettier adds final newline for every other language.)

@jgwhite

This comment has been minimized.

Copy link
Owner Author

commented Jun 27, 2019

@dcyriller fantastic. This is one of the major roadblocks we ran into as well.

@jgwhite

This comment has been minimized.

Copy link
Owner Author

commented Jun 27, 2019

I wonder if it’d be worth announcing this quest in the Ember Times? It’d be awesome to get the community trying out the current glimmer support and shaking loose more todos for the quest.

@Alonski

This comment has been minimized.

Copy link

commented Jun 27, 2019

@jgwhite Good idea :) I will see if anyone can write something up for this.
Would you be willing to write a short section?

@laurmurclar

This comment has been minimized.

Copy link

commented Jun 27, 2019

Is there an expected timeline for this work? I'd love to work on "Improve curly/text spacing" but it'll probably be the weekend before I could make significant progress on it

@jgwhite

This comment has been minimized.

Copy link
Owner Author

commented Jun 27, 2019

Is there an expected timeline for this work?

@laurmurclar no timeline, please jump in! 👍

I'd love to work on "Improve curly/text spacing" but it'll probably be the weekend before I could make significant progress on it

I’ll tag that item with your name. @dcyriller are you happy with that?

@dcyriller

This comment has been minimized.

Copy link

commented Jun 27, 2019

I’ll tag that item with your name. @dcyriller are you happy with that?

Sure thing. Also, I think there are a few things to fix around curly/text spacing.

@jgwhite

This comment has been minimized.

Copy link
Owner Author

commented Jun 29, 2019

Now this has appeared in the Ember Times I’ve added some more guidance to the readme. @GavinJoyce would you mind adding a line or two on how to use the Prettier playground for Glimmer?

@dcyriller

This comment has been minimized.

Copy link

commented Jun 29, 2019

FWIW I’ve run Prettier against two codebases. You can find these examples here: https://github.com/dcyriller/ember-template-lint-plugin-prettier#examples

@samselikoff

This comment has been minimized.

Copy link

commented Jun 29, 2019

Trying this out on some templates in EmberMap's codebase, very nice work y'all!

Biggest unwanted behavior is definitely (1) single blank newlines used for visual clarity and (2) single blank spaces between words and expressions.

Before:

{{ui-video-hero
  video=model
  on-end=(action 'playNextVideo')
  on-play=(action 'turnOnAutoplay')
  on-pause=(action 'turnOffAutoplay')}}

{{#ui-container}}
  <main class="my-4 pb-2 lg:flex justify-between">
    <article class="w-full lg:w-3/5 flex-no-shrink">
      {{#ui-title style='headline'}}
        {{model.title}}
      {{/ui-title}}

      {{#ui-p data-test-id="series-description"}}
        {{model.description}}
      {{/ui-p}}

      {{video-extras clip=model belongsToSeries=true}}
    </article>

    {{#if screen.isLargeAndUp}}
      <div class="w-2/5 max-w-390">
        <div class="mb-4 pl-3">
          {{topics/topic/video/components/series-playlist
            series=model.series
            activeClip=model}}
        </div>
      </div>
    {{/if}}

  </main>
{{/ui-container}}

{{questions-pancake}}

After:

{{ui-video-hero
  video=model
  on-end=(action "playNextVideo")
  on-play=(action "turnOnAutoplay")
  on-pause=(action "turnOffAutoplay")
}}
{{#ui-container}}
  <main class="my-4 pb-2 lg:flex justify-between">
    <article class="w-full lg:w-3/5 flex-no-shrink">
      {{#ui-title style="headline"}}
        {{model.title}}
      {{/ui-title}}
      {{#ui-p data-test-id="series-description"}}
        {{model.description}}
      {{/ui-p}}
      {{video-extras clip=model belongsToSeries=true}}
    </article>
    {{#if screen.isLargeAndUp}}
      <div class="w-2/5 max-w-390">
        <div class="mb-4 pl-3">
          {{topics/topic/video/components/series-playlist
            series=model.series
            activeClip=model
          }}
        </div>
      </div>
    {{/if}}
  </main>
{{/ui-container}}
{{questions-pancake}}

Everything else seems to be pretty spot on!

@laurmurclar

This comment has been minimized.

Copy link

commented Jul 9, 2019

Very sorry folks, haven't had much of a chance to work on this! I probably won't for a while either. Mind removing my name from that task? 😞

@jgwhite

This comment has been minimized.

Copy link
Owner Author

commented Jul 10, 2019

@laurmurclar no problem at all, and no need to apologize.

pichfl added a commit to simplabs/simplabs.github.io that referenced this issue Jul 12, 2019

ghislaineguerin added a commit to simplabs/simplabs.github.io that referenced this issue Jul 15, 2019

Navigation active state (#611)
* Navigation active state

This enables the active state in the main navigation on larger screens. Narrow screens will receive a different treatment.

* Adjust mobile typography

* Underline nav items on narrow screens

* Make header label more prominent

* Ignore Header component template in Prettier

See jgwhite/prettier#1

* Use eq as nested helper inside if helper

* Don't try to add active states for floating pages

* Rephrase label for case studies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.