⏩ Extend renderers to allow for kind/subtypes #460
Conversation
🦋 Changeset detectedLatest commit: 5fbaeb0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 12 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| 'link[protocol=rrid]': RRIDLinkRenderer, | ||
| 'link[protocol=ror]': RORLinkRenderer, | ||
| // Put the kinds last as they will match first in the future | ||
| 'link[kind=github]': GithubLinkRenderer, |
There was a problem hiding this comment.
Prepares for:
There was a problem hiding this comment.
I think this makes sense. Now, instead of a simple type: renderer lookup, we have a more complex type: { renderers } structure where the basic renderer is under base and other renderers are under selector keys.
Keying off selector strings seems a little complicated (as opposed to, say, just kind or something) but it is quite flexible and powerful. Some of this logic is a little hard to parse without a bit more docstring-level documentation, though.
| export function selectRenderer(renderers: NodeRenderersValidated, node: GenericNode) { | ||
| const componentRenderers = renderers[node.type] ?? renderers['DefaultComponent']; | ||
| const SpecificComponent = Object.entries(componentRenderers) | ||
| .reverse() |
| return validatedRenderers; | ||
| } | ||
|
|
||
| export function mergeRenderers(renderers: NodeRenderers[], validate: true): NodeRenderersValidated; |
There was a problem hiding this comment.
A few more docstrings - particularly for the functions in this file - would be helpful.
| @@ -10,17 +12,25 @@ function DefaultComponent({ node }: { node: GenericNode }) { | |||
| ); | |||
| } | |||
|
|
|||
| export function selectRenderer(renderers: NodeRenderersValidated, node: GenericNode) { | |||
| const componentRenderers = renderers[node.type] ?? renderers['DefaultComponent']; | |||
| const SpecificComponent = Object.entries(componentRenderers) | |||
There was a problem hiding this comment.
| const SpecificComponent = Object.entries(componentRenderers) | |
| const specificComponent = Object.entries(componentRenderers) |
| const LINK_RENDERERS = { | ||
| link, | ||
| const LINK_RENDERERS: NodeRenderers = { | ||
| link: { |
There was a problem hiding this comment.
I don't quite see why we need this nested structure as opposed to:
{
link: SimpleLink,
'link[protocol=github]': GithubLinkRenderer,
'link[protocol=wiki]': WikiLinkRenderer,
...
}I guess the nesting lets us first narrow down based on type so we are not doing selector checks against all the renderers?
There was a problem hiding this comment.
My next question is: would this work the same if we did something like:
{
link: {
base: SimpleLink,
'[protocol=github]': GithubLinkRenderer,
'[protocol=wiki]': WikiLinkRenderer,
...
}
}i.e. we don't need to repeat "link" since we are only dealing with link nodes at this point?
This allows for multiple renderers to be attached to a single node, based on a match of the kind.
For example you can now add a specific renderer for a
link[kind=github]. This allows for inheriting these renderers and then extending or overriding them independently.