Modify Sample Code Based on Variables

[wspeirs]

What would you like?

The current version generates "static" code for each language, based only on the url and method. Unfortunately, the url is simply: const url = props.baseUrl + props.path. This has the issue that any path parameters are left as-is in the code.

It would be great if the sample code could be updated to include the variables in the "try it" box. This way the code sample would be "complete". I think this would be done in much the same was as the OACodeBlock currently computes the URL for curl

Why is this needed?

If you copy-and-paste the code sample as-is, you will end up with an invalid URL if there are path parameters.

Also, it would be nice to mix-and-match such that you can remove the try it portion of the playground, but keep the sample code. This way people can "build" a request in their language of choice based on the variables form.

How could it be implemented?

I think you would need to extract (or just duplicate?) the code used to compute the curl information:

const curl = computed(() => {
  const headers = request.value.headers
  if (!headers?.['Content-Type']) {
    headers['Content-Type'] = 'application/json'
  }

  return fetchToCurl({
    method: props.method.toUpperCase(),
    url: request.value.url,
    headers,
    body: request.value.body ? formatJson(request.value.body) : null,
  })
})

Then pass this as a parameter to generateCodeSamples so that it can generate each code sample appropriately.

Other information

It would also be awesome to select which languages you want to support, and possibly even some way to provide the template for each language. I realize this is above-and-beyond, but something to think about if you're changing this.