Adding a component to extract values from a remote file #2554
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Instead of hard-coding values from an external file (e.g.
kickstart.json
), we can now use the<RemoteValue>
component with a selector to extract the value from it.Usage
The syntax for the component (which will cover most cases) is:
Props
url
(required): remote URL to fetch the file fromselector
(required): parsed-dependent syntax to extract the value from the remote fileparser
(optional): value from theParser
enum object exported by the componentdefaultValue
(optional): default value if we cannot retrieve the element (otherwise, we'll render "not available")codeRenderer
(optional): to render the value inside a<Code>
component as described in Rendering inside a code componentcodeLang
(optional):lang
attribute to be passed to the<Code>
component as described in Rendering inside a code componentParsers
Currently, we only support JSON files, but the component is ready to support other extensions in the future (e.g. YAML or XML files), so in the future we could have something like this:
Selectors
The
selector
can either be astring
or afunction
.Selector Strings
When using
string
, you need to check the specific documentation for the parser we use. As we only have JSON right now, please checkjsonpath-plus
, which implements an XPath-based syntax.Selector Functions
When using
function
, we'll pass the parsed file (e.g. the JSON object) as an argument and the function should return the value.Selector Examples
So these elements will render the same value:
Common rendering scenarios
Rendering inside a
<Code>
componentUnfortunately, Astro doesn't support passing component directly as props, so it doesn't allow us to do something like
<Code code=`CLIENT_SECRET=${clientSecret} some command`}
. I tried a couple of different approaches (e.g. using astro's<slot>
to render children elements) and ended up with this:This will be converted to:
Rendering inside inline backticks
Use HTML's
<code>
element instead of backticks:Reusing components
Even though astro caches
fetch
requests (and we cache the parsed object), you can reuse components like this: