Add refresh button to the api docs examples

[ST-DDT]

Clear and concise description of the problem

Currently, the documentation only provides a single example per invocation, this could result in wrong expectations of method return values.

See:

• The faker.phone.number() is returned differently than in the documentation. #3283

Suggested solution

Adding a refresh button to the example sections:

apidocs-refresh-button.mp4

For that to work, we have to

• trigger downloading of the latest faker version (on first press)
• change our apidocs json data to be js/ts, so that we can store actual code in there
• add a function () => unknown[] to the export data from the actual examples
• take each result JSON.stringify it and insert into the code block

Alternative

Add more examples for the no args examples.

Additional context

Original issue:

• The faker.phone.number() is returned differently than in the documentation. #3283

Original fix suggestion:

• docs(phone): update faker.phone.number() example #3284

Alternative suggestion for a fix:

• docs(phone): update faker.phone.number() example #3284 (comment)

[ST-DDT]

FFR: The preview in the video was created using this code:

<button style="border: none; background: none; cursor: pointer;" onclick="
var lines = this.nextElementSibling.children[0].children[2].children[0].children;
lines[0].children[3].innerText = '// '+JSON.stringify(faker.lorem.sentences());
lines[1].children[5].innerText = '// '+JSON.stringify(faker.lorem.sentences(2));
const parts = JSON.stringify(faker.lorem.sentences(2, '\n')).split('\\n');
lines[3].children[0].innerText = '// '+parts[0];
lines[4].children[0].innerText = '// '+parts[1];
lines[5].children[7].innerText = '// '+JSON.stringify(faker.lorem.sentences({ min: 1, max: 3 }));
">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Ic_refresh_48px.svg" alt="Refresh Icon" width="24" height="24" style="display: inline-block; vertical-align: middle;">
</button>

The actual code should be more dynamic, so that it works without any configuration (and use a different svg).

The x in lines[i].children[x] is always the last element in the array. If that isn't the comment, then comment is in the next line.

lines can probably be resolved more easily via this.nextElementSibling.querySelectorAll('.line'); (not tested)

No additional libraries needed.

[ST-DDT]

What do you think of this idea?

[sounmind]

Speaking as the author of the original issue, I think it's great idea.

[ST-DDT]

Team Decision

• We will try this
• There should be visual feedback while downloading the current faker version (spinner etc) for people with slow internet connections

[matthewmayer]

I think rather than just an icon it could be a smal button in the bottom right of the examples block like "Load more examples"

[ST-DDT]

Like this?

I'm unsure how this will look like if the example is only a single line.

Do you want to append or replace the new examples?

[matthewmayer]

Replace like in your video.