Docs - Add sandbox compilation script to new website

Author: davidjerleke

scripts/create-sandboxes/clean-existing.ts

@@ -0,0 +1,31 @@
+import fs from 'fs'
+import path from 'path'
+
+export function cleanExistingSandboxDist(
+  contentPath: string,
+  sandboxFilesDist: string
+): void {
+  fs.readdirSync(contentPath, { withFileTypes: true }).forEach((entry) => {
+    if (!entry.isDirectory()) return
+    emptySandboxFilesDist(path.join(contentPath, entry.name), sandboxFilesDist)
+  })
+}
+
+function emptySandboxFilesDist(
+  dirPath: string,
+  sandboxFilesDist: string
+): void {
+  fs.readdirSync(dirPath, { withFileTypes: true }).forEach((entry) => {
+    if (!entry.isDirectory()) return
+
+    const entryPath = path.join(dirPath, entry.name)
+
+    if (entry.name === sandboxFilesDist) {
+      fs.rmSync(entryPath, { recursive: true, force: true })
+      fs.mkdirSync(entryPath)
+      return
+    }
+
+    emptySandboxFilesDist(entryPath, sandboxFilesDist)
+  })
+}

scripts/create-sandboxes/collect-dist-paths.ts

@@ -0,0 +1,22 @@
+import fs from 'fs'
+import path from 'path'
+
+export function collectSandboxDistPaths(
+  contentPath: string,
+  sandboxFilesDist: string,
+  result: string[] = []
+): string[] {
+  fs.readdirSync(contentPath, { withFileTypes: true }).forEach((entry) => {
+    if (!entry.isDirectory()) return
+
+    const entryPath = path.join(contentPath, entry.name)
+
+    if (entry.name === sandboxFilesDist) {
+      result.push(entryPath)
+      return
+    }
+
+    collectSandboxDistPaths(entryPath, sandboxFilesDist, result)
+  })
+  return result
+}

scripts/create-sandboxes/copy-from-src-to-dist.ts

@@ -0,0 +1,52 @@
+import fs from 'fs'
+import path from 'path'
+
+export function copySandboxesFromSrcToDist(
+  contentPath: string,
+  sandboxFilesSrc: string,
+  sandboxFilesDist: string
+): void {
+  fs.readdirSync(contentPath, { withFileTypes: true }).forEach((entry) => {
+    if (!entry.isDirectory()) return
+    findAndCopySandboxFiles(
+      path.join(contentPath, entry.name),
+      sandboxFilesSrc,
+      sandboxFilesDist
+    )
+  })
+}
+
+function findAndCopySandboxFiles(
+  dirPath: string,
+  sandboxFilesSrc: string,
+  sandboxFilesDist: string
+): void {
+  fs.readdirSync(dirPath, { withFileTypes: true }).forEach((entry) => {
+    if (!entry.isDirectory()) return
+
+    const entryPath = path.join(dirPath, entry.name)
+
+    if (entry.name === sandboxFilesSrc) {
+      const distPath = path.join(dirPath, sandboxFilesDist)
+      copyDirectory(entryPath, distPath)
+      return
+    }
+
+    findAndCopySandboxFiles(entryPath, sandboxFilesSrc, sandboxFilesDist)
+  })
+}
+
+function copyDirectory(srcPath: string, destPath: string): void {
+  fs.mkdirSync(destPath, { recursive: true })
+
+  fs.readdirSync(srcPath, { withFileTypes: true }).forEach((entry) => {
+    const srcEntry = path.join(srcPath, entry.name)
+    const destEntry = path.join(destPath, entry.name)
+
+    if (entry.isDirectory()) {
+      copyDirectory(srcEntry, destEntry)
+    } else {
+      fs.copyFileSync(srcEntry, destEntry)
+    }
+  })
+}

scripts/create-sandboxes/index.ts

@@ -3,20 +3,41 @@ import path from 'path'
 import { tsCompile } from './ts-compile'
 import { CONSOLE_FONT_COLORS } from '../utils/consoleFontColors'
 import { readFiles } from '../utils/readFiles'
+import { copySandboxesFromSrcToDist } from './copy-from-src-to-dist'
+import { cleanExistingSandboxDist } from './clean-existing'
+import { collectSandboxDistPaths } from './collect-dist-paths'
+
+const SANDBOX_FILES_CONTENT_PATH = path.join(
+  process.cwd(),
+  'website',
+  'src',
+  'content'
+)
+const SANDBOX_FILES_DIST_FOLDER_NAME = 'SandboxFilesDist'
+const SANDBOX_FILES_SRC_FOLDER_NAME = 'SandboxFilesSrc'
 
 const EXTENSION_REGEX = {
   DECLARATION: /\.d\.ts$/,
   TSX: /\.tsx$/,
   TS: /\.ts$/
 }
 
-const PATHS_TO_SANDBOX_FILES: string[] = [
-  path.join(process.cwd(), 'src/components/Sandbox/Vanilla/SandboxFilesDist'),
-  path.join(process.cwd(), 'src/components/Sandbox/React/SandboxFilesDist')
-]
-
 function main(): void {
-  PATHS_TO_SANDBOX_FILES.forEach((pathToSandboxFile) => {
+  cleanExistingSandboxDist(
+    SANDBOX_FILES_CONTENT_PATH,
+    SANDBOX_FILES_DIST_FOLDER_NAME
+  )
+  copySandboxesFromSrcToDist(
+    SANDBOX_FILES_CONTENT_PATH,
+    SANDBOX_FILES_SRC_FOLDER_NAME,
+    SANDBOX_FILES_DIST_FOLDER_NAME
+  )
+  const pathsToSandboxFiles = collectSandboxDistPaths(
+    SANDBOX_FILES_CONTENT_PATH,
+    SANDBOX_FILES_DIST_FOLDER_NAME
+  )
+
+  pathsToSandboxFiles.forEach((pathToSandboxFile) => {
     try {
       readFiles(
         `${pathToSandboxFile}/`,

website/package.json

@@ -17,7 +17,10 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "predeploy:sandboxfiles-build": "npx ts-node --project ../scripts/tsconfig.node.json ../scripts/create-sandboxes/index.ts",
+    "predeploy:format": "yarn workspace embla-carousel-monorepo run format",
+    "predeploy": "npm-run-all predeploy:sandboxfiles-build predeploy:format"
   },
   "dependencies": {
     "@mdx-js/loader": "^3.1.1",
@@ -57,6 +60,7 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
+    "npm-run-all": "^4.1.5",
     "type-fest": "^3.2.0",
     "typescript": "^5"
   }

yarn.lock

@@ -10439,6 +10439,7 @@ __metadata:
     hast: ^1.0.0
     hastscript: ^9.0.1
     next: 16.1.6
+    npm-run-all: ^4.1.5
     prism-react-renderer: ^1.3.5
     prismjs: 1.30.0
     raw-loader: ^4.0.2