Update svelte config to compile web components and svelte components #234
Conversation
|
This pull request has been linked to Shortcut Story #74676: Update svelte config to compile one parent web component and other nested components as svelte components. |
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/nylas/components/Wd6LXumu2BMDNBQF7rgS9C9swrtU [Deployment for 3c952b0 failed] |
| import NError from "./components/NError.svelte"; | ||
| void NError; |
There was a problem hiding this comment.
not sure if this is the right change to have made here
There was a problem hiding this comment.
I ran yarn start to do a quick smoke test against the components and it seems like most are broken with this change (to be expected). The immediate ones are NError needing to be imported now since it's not available globally and things like get_current_component().shadowRoot in HTMLEditor` not working since svelte components no longer have a shadow DOM when imported.
Also, I noticed that some of the components didn't get renamed properly (I think renaming files has always been an issue with git) - ie. Availability, Mailbox
| @@ -1313,7 +1313,7 @@ | |||
| } | |||
| </style> | |||
|
|
|||
| <nylas-error {id} /> | |||
| <NError {id} /> | |||
There was a problem hiding this comment.
I think this needs to be imported in now. Caught an error when yarn start.
There was a problem hiding this comment.
Imported NError to all the components, this should be resolved now. Thanks for catching this!
… appendStyles function to commons
| const style = document.createElement("style"); | ||
| style.innerHTML = styleContent; | ||
| host.shadowRoot.appendChild(style); | ||
| } |
There was a problem hiding this comment.
It would probably be helpful to leave a comment or link to the comment that suggested this workaround. It seems like in order to retain the functionality of svelte components, we have to lose the scoped component styles feature. Since this change seems to be more permanent (I don't see interest from svelte team to fix this in the near future) it'd be nice to hear thoughts from the rest of the team.
Essentially, I think this means:
- all child svelte component styles need to be in their own file
- child component styles can now conflict since they're not scoped by the compiler
- child components lose they're reusability since we have to inject styles into their specific parent shadow dom
Code changes
Added different svelte configs for web components and svelte components per svelte issue comment
Removed custom element tags from svelte components, e.g.
<svelte:options tag="...">Renamed web components to lowercase kebab case
Readiness checklist
License
I confirm that this contribution is made under the terms of the MIT license and that I have the authority necessary to make this contribution on behalf of its copyright owner.