rgh-feature-descriptions - Extract svelte component#9632
Conversation
| import RelatedIssuesCount from '../helpers/related-issues-count.svelte'; | ||
|
|
||
| // eslint-disable-next-line no-undef -- Global | ||
| const {id, meta}: {id: string; meta: FeatureMeta | undefined} = $props(); |
There was a problem hiding this comment.
For simplicity, this PR keeps the component as is, accepting the data as props.
In the future I'll explore having the feature extract these values from the URL and update its contents autonomously for:
| return {destroy: () => element.remove()}; | ||
| }; | ||
| </script> | ||
| <span use:mount></span> |
There was a problem hiding this comment.
Hopefully Svelte won't hate us for injecting random elements into the DOM, but this is the solution to React/dom-chef components reuse (which it's just the icons for 98% of the case)
{@html icon.outerHTML} would be an alternative but it doesn't offer the ability to append classes and change attributes, which we use a lot for icons.
| const container = <div />; | ||
| mount(Description, {target: container, props: {id, meta}}); | ||
| anchor.before(container); |
There was a problem hiding this comment.
At this point, Svelte components require an additional wrapper. If this becomes annoying/troublesome we can look into alternative solutions.
We could also look into this library to just be able to use custom elements, although loading a bunch of code is never my favorite solution: w3c/webextensions#210 (comment)
| 'https://github.com/refined-github/refined-github/issues/new', | ||
| ); | ||
| url.searchParams.set('template', '1_bug_report.yml'); | ||
| url.searchParams.set('title', `\`${id}\` `); |
There was a problem hiding this comment.
Sigh, Claude dropped all comments...
- Restore comments in a followup PR
1 participant
rgh-feature-descriptionsinto a Svelte component #9357rgh-feature-descriptionsfor ⚠️ React-based views don't correctly update features #6554Screenshots