Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[Refactor] TabsComponent to CodeComponent custom element #969

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 5 commits into from
Apr 20, 2020
Merged

[Refactor] TabsComponent to CodeComponent custom element #969

merged 5 commits into from
Apr 20, 2020

Conversation

BrunnerLivio
Copy link
Member

@BrunnerLivio BrunnerLivio commented Feb 2, 2020 •
edited
Loading

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[x] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] Other... Please describe:

What is the current behavior?

In the future, the HTML shall be appended to the DOM dynamically (pre-compile Markdown to HTML using Dgeni, dynamically request the HTML page). The TabsComponent is an Angular component - and the easiest way to say to Angular "hey, in this HTML I dynamically loaded is a component", is to simply convert the Angular component to a Custom Element / Webcomponent. Angular.io uses the same technique.

Related Issue Number: #549

What is the new behavior?

Simplified the interface of the code/switcher component & converted it to a custom element.

<code-element filename="cat.service">
  <pre slot="ts" class="language-typescript">
    <code class="language-typescript">
console.log("Hello");
    </code>
  </pre>
  <pre slot="js" class="language-javascript">
    <code class="language-javascript">
console.log("Hello");
    </code>
  </pre>
</code-element>

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

The [appAnchor] directive will need to be converted to a native element to enable #549. This will be done in a follow-up PR.

@BrunnerLivio BrunnerLivio changed the title Refactor/code component [Refactor] TabsComponent to CodeComponent custom element Feb 2, 2020
@BrunnerLivio BrunnerLivio force-pushed the refactor/code-component branch 4 times, most recently from 6aa23e1 to a7cf8f0 Compare February 2, 2020 19:26
@BrunnerLivio
Copy link
Member Author

With this PR we could also completely remove @@switch & @@filename markdown syntax sugar. I could improve the PR so it works like MDX:

## Here is some code

<code-element>
  <slot name=“js”>
console.log(“Hello World”)
  </slot>
  ...
</code-element>

Up to you if you want to keep it :)

@kamilmysliwiec
Copy link
Member

Perhaps, I'm missing the point. Why do we want to use a custom element in this app?

@BrunnerLivio
Copy link
Member Author

BrunnerLivio commented Feb 3, 2020 •
edited
Loading

@kamilmysliwiec

Perhaps, I'm missing the point. Why do we want to use a custom element in this app?

With #549 we want to remove all the src/app/pages/* components. This means we request the HTML document (which was generated using the Dgeni Markdown compiler) dynamically.

NestJSdocrequest

Since we dynamically append the content with innerHTML, we can't use Angular Component in the generated HTML document (Angular can't render components if it is not a template inside @Component-decorator). To bypass this we create custom elements beforehand, which enables this

This PR does not bring any value right now, apart from enabling #549. I try to simplify #549, so it is simpler to review.

@kamilmysliwiec
Copy link
Member

Makes sense now @BrunnerLivio! Thanks for the explanation. I'll review it shortly

@BrunnerLivio BrunnerLivio force-pushed the refactor/code-component branch from a7cf8f0 to 1f7cf9e Compare February 7, 2020 09:00
@BrunnerLivio
Copy link
Member Author

@kamilmysliwiec any plans to revisit this PR sometime soon?

@BrunnerLivio BrunnerLivio mentioned this pull request Apr 7, 2020
Closed
1 task
@BrunnerLivio BrunnerLivio force-pushed the refactor/code-component branch from 1f7cf9e to da50f64 Compare April 19, 2020 19:38
@BrunnerLivio
Copy link
Member Author

@kamilmysliwiec passive-aggressive bump #2 :)

@kamilmysliwiec kamilmysliwiec merged commit d2b7f10 into nestjs:master Apr 20, 2020
@kamilmysliwiec
Copy link
Member

Finally found some time :) Apologies for the delay!

Great contribution!

@kamilmysliwiec
Copy link
Member

kamilmysliwiec commented Apr 21, 2020 •
edited
Loading

@BrunnerLivio after merging this PR, I've noticed that some examples are missing.

image

https://docs.nestjs.com/techniques/validation#transform-payload-objects

See the missing code snippet below the This can be done at a method level: sentence. :(

EDIT:

Another missing example: #1183

Let me temporarily revert this PR until we figure out what this issue is about #1184

@kamilmysliwiec kamilmysliwiec mentioned this pull request Apr 21, 2020
Merged
@BrunnerLivio
Copy link
Member Author

BrunnerLivio commented Apr 21, 2020 •
edited
Loading

@kamilmysliwiec alright let me look into it. Thanks for reverting it real quick!

@kamilmysliwiec
Copy link
Member

Thanks @BrunnerLivio 🔥 💪

@BrunnerLivio BrunnerLivio mentioned this pull request May 2, 2020
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@BrunnerLivio @kamilmysliwiec