docs: use embedded build for preview examples

Author: ST-DDT

.gitignore

@@ -86,6 +86,7 @@ versions.json
 !/docs/api/index.md
 /docs/api/api-search-index.json
 /docs/public/api-diff-index.json
+/docs/public/faker.js
 
 # Faker
 TAGS

docs/.vitepress/config.ts

@@ -3,6 +3,8 @@ import type { DefaultTheme } from 'vitepress/theme';
 import { apiPages } from './api-pages';
 import {
   algoliaIndex,
+  commitHash,
+  isReleaseBranch,
   version,
   versionBannerInfix,
   versionLabel,
@@ -13,7 +15,13 @@ type SidebarItem = DefaultTheme.SidebarItem;
 
 const description =
   'Generate massive amounts of fake (but reasonable) data for testing and development.';
-const image = 'https://fakerjs.dev/social-image.png';
+const socialImage = 'https://fakerjs.dev/social-image.png';
+const consoleDownload = isReleaseBranch
+  ? `https://cdn.jsdelivr.net/npm/@faker-js/faker@${version}/+esm`
+  : '/faker.js';
+const consoleVersion = isReleaseBranch
+  ? version
+  : `${version.replace(/-.*$/, '')}-preview+${commitHash}`;
 
 function getSideBarWithExpandedEntry(entryToExpand: string): SidebarItem[] {
   const links: SidebarItem[] = [
@@ -111,12 +119,12 @@ const config: UserConfig<DefaultTheme.Config> = {
     ['meta', { name: 'theme-color', content: '#40af7c' }],
     ['meta', { name: 'og:title', content: 'FakerJS' }],
     ['meta', { name: 'og:description', content: description }],
-    ['meta', { name: 'og:image', content: image }],
+    ['meta', { name: 'og:image', content: socialImage }],
     ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
     ['meta', { name: 'twitter:title', content: 'FakerJS' }],
     ['meta', { name: 'twitter:description', content: description }],
     ['meta', { name: 'twitter:site', content: '@faker_js' }],
-    ['meta', { name: 'twitter:image', content: image }],
+    ['meta', { name: 'twitter:image', content: socialImage }],
     ['meta', { name: 'twitter:image:alt', content: 'The FakerJS logo' }],
     ['link', { rel: 'me', href: 'https://fosstodon.org/@faker_js' }],
     [
@@ -127,9 +135,9 @@ const logStyle = 'background: rgba(16, 183, 127, 0.14); color: rgba(255, 255, 24
 console.log(\`%cIf you would like to test Faker in the browser console, you can do so using 'await enableFaker()'.
 If you would like to test Faker in a playground, visit https://new.fakerjs.dev.\`, logStyle);
 async function enableFaker() {
-  const imported = await import('https://cdn.jsdelivr.net/npm/@faker-js/faker@${version}/+esm');
+  const imported = await import('${consoleDownload}');
   Object.assign(globalThis, imported);
-  console.log(\`%cYou can now start using Faker v${version}:
+  console.log(\`%cYou can now start using Faker v${consoleVersion}:
 e.g. 'faker.food.description()' or 'fakerZH_CN.person.firstName()'
 For other languages please refer to https://fakerjs.dev/guide/localization.html#available-locales
 For a full list of all methods please refer to https://fakerjs.dev/api/\`, logStyle);

docs/.vitepress/versions.ts

@@ -8,6 +8,10 @@ function readBranchName(): string {
   );
 }
 
+function readCommitHash(): string {
+  return execSync('git rev-parse HEAD').toString('utf8').trim() || 'unknown';
+}
+
 function readOtherLatestReleaseTagNames(): string[] {
   const tags = execSync('git tag -l').toString('utf8').split('\n');
   const latestTagByMajor: Record<string, string> = {};
@@ -34,10 +38,11 @@ function readOtherLatestReleaseTagNames(): string[] {
 const {
   CONTEXT: deployContext = 'local',
   BRANCH: branchName = readBranchName(),
+  COMMIT_REF: commitRef = readCommitHash(),
 } = process.env;
 
 const otherVersions = readOtherLatestReleaseTagNames();
-const isReleaseBranch = /^v\d+$/.test(branchName);
+export const isReleaseBranch = /^v\d+$/.test(branchName);
 
 /**
  * The text of the version banner describing the current version.
@@ -65,6 +70,11 @@ export const versionBannerInfix: string | null = (() => {
  */
 export const version = version_;
 
+/**
+ * The commit hash of the current version.
+ */
+export const commitHash = commitRef.substring(0, 7);
+
 /**
  * The version label to display in the top-right corner of the site.
  */

package.json

@@ -10,10 +10,11 @@
     "generate": "run-s generate:locales generate:api-docs",
     "generate:api-docs": "tsx ./scripts/apidocs.ts",
     "generate:locales": "tsx ./scripts/generate-locales.ts",
-    "docs:build": "run-s generate:api-docs docs:build:run",
+    "docs:build": "run-s generate:api-docs docs:build:embedded docs:build:run",
+    "docs:build:embedded": "tsup-node --entry.faker src/index.ts --format esm --outDir docs/public --no-dts --no-splitting  --no-clean",
     "docs:build:run": "vitepress build docs",
     "docs:build:ci": "run-s build docs:build",
-    "docs:dev": "run-s generate:api-docs docs:dev:run",
+    "docs:dev": "run-s generate:api-docs docs:build:embedded docs:dev:run",
     "docs:dev:run": "vitepress dev docs",
     "docs:serve": "vitepress serve docs --port 5173",
     "docs:diff": "tsx ./scripts/diff.ts",

tsup.config.ts

@@ -14,4 +14,7 @@ export default defineConfig({
   minify: true,
   sourcemap: false,
   splitting: true,
+  esbuildOptions(options) {
+    options.charset = 'utf8'; // Prevent Unicode escaping
+  },
 });