Add lazy loadable faker to our documentation

[ST-DDT]

Continuation of #2426

• window.faker on faker.dev website #2426

I sometimes like to test a few possibilities before suggesting them. However, I don't always have access to my main computer to launch my local playground, so I usually use my browser/our website to copy and use the browser usage to the console to run the scripts.
Since the playground embeds the output into the website, it feels more complicated than just using the browser console.
How about adding a console log to our website that explains how to test faker code from anywhere on the website?

console.warn("If you would like to test faker in the browser console, you can do so using `enableFaker()`");
console.warn("If you would like to test faker in a playground, visit https://new.fakerjs.dev");
async function enableFaker() {
    const imported = await import('https://cdn.jsdelivr.net/npm/@faker-js/faker@'+version+'/+esm');
    Object.assign(window, imported);
    console.log("You can now start using faker:");
    console.log("e.g. `faker.food.description()` or `fakerZH_CN.person.firstName()`");
    console.log("For other languages please refer to https://fakerjs.dev/guide/localization.html#available-locales");
    return imported;
}

Lazy loading faker like this would avoid issues caused by the large package size.

I'm not sure, where we would have to place this snippet for vitepress to pick it up, but I would like to hear your feedback first.

[Shinigami92]

Why is StackBlitz or pressing . not enough for your use-cases?

[xDivisionByZerox]

I can see that this would be more of a convenience thing.

While stackblitz is great for full examples, it brings a lot of bloat as well. I usually have to wait for around 30 seconds until I see the first results in the stackblitz browser view. Additionally, when you only want to log the result of a script, you have to do some extra steps to view the console output (open in separate window, connect, then view console). Alternatively, you throw the result into the html. Then, you might run into problems with the format of the stringified result ([object Object]). You would also be missing the convenience of dsv tools , such as region collapsing.

The github web editor works well for testing simple use cases on the type level where you don't have to run the actual code. Using terminals is not possible in the integrated GitHub web editor (without having to set up a codespace) which makes it impossible to run small scripts (like verifying that a workaround actually works).

[xDivisionByZerox]

I can see that this would be more of a convenience thing.

While stackblitz is great for full examples, it brings a lot of bloat as well. I usually have to wait for around 30 seconds until I see the first results in the stackblitz browser view. Additionally, when you only want to log the result of a script, you have to do some extra steps to view the console output (open in separate window, connect, then view console). Alternatively, you throw the result into the html. Then, you might run into problems with the format of the stringified result ([object Object]). You would also be missing the convenience of dsv tools , such as region collapsing.

The github web editor works well for testing simple use cases on the type level where you don't have to run the actual code. Using terminals is not possible in the integrated GitHub web editor (without having to set up a codespace) which makes it impossible to run small scripts (like verifying that a workaround actually works).

[ST-DDT]

Also in stackblitz working with the result is hard. Like when you want to explore the result of your statement to check for the next thing to call, you have to print it somewhere in order to look at it. In the console you can just expand the sections you are interested in.

Also different security rules apply in browsers vs "node".

[matthewmayer]

While I think the idea is good I feel this is very undiscoverable. We could add a new page like Try it > Browser console and then add instructions on that page how to open the developer tools and load the library.

[ST-DDT]

Even if you add the instructions to a new link (which is a good idea by the way), the easiest instructions are:

• press F12
• run enableFaker()
• and start playing.

Any other instructions are more complicated or have other restrictions. Aka:

• making sure its esm
• conflicting content policies
• importing the right thing and assigning it the right name (const faker = await import(...) is wrong)
• ...

We partially have these instructions already on the usage guide.
But if I know the console will tell me them as well there is no need to look them up every time.

[matthewmayer]

Yea agreed. It should work on every page under fakerjs.dev

Just for first time discovery it would be better to have a dedicated page explaining this. Because most people would never think to look in the console.

[xDivisionByZerox]

[...] Because most people would never think to look in the console.

I'm not sure if this is true. Otherwise, we wouldn't have gotten issue #2426 in the first place. 🤔

[Shinigami92]

I tried to run const imported = await import('https://cdn.jsdelivr.net/npm/@faker-js/[email protected]/+esm'); in my console and I get an error:

VM1291:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/@faker-js/[email protected]/+esm' because it violates the following Content Security Policy directive: "script-src github.githubassets.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

So it this even possible?
I thought instead of wrapping it in a function, we could just provide a copy&paste solution that a user can just insert in their console.

[ST-DDT]

So it this even possible?

This script only works on our website, not on Github and other "secure" domains.

I thought instead of wrapping it in a function, we could just provide a copy&paste solution that a user can just insert in their console.

Of course you could just print Object.assign(window, await import('https://cdn.jsdelivr.net/npm/@faker-js/faker@'+version+'/+esm')); for copying + usage examples into the console.