diff --git a/packages/dev-scripts/examples/gen.ts b/packages/dev-scripts/examples/gen.ts index 71f538e59f..41226b6994 100644 --- a/packages/dev-scripts/examples/gen.ts +++ b/packages/dev-scripts/examples/gen.ts @@ -1,10 +1,16 @@ +import { fileURLToPath, pathToFileURL } from "node:url"; import * as glob from "glob"; import * as fs from "node:fs"; import * as path from "node:path"; import prettier from "prettier"; import React from "react"; import ReactDOM from "react-dom/server"; -import { Project, getExampleProjects, groupProjects } from "./util"; +import { + Project, + getExampleProjects, + groupProjects, + replacePathSepToSlash, +} from "./util"; /** * This script reads the examples in the /examples folder. These folders initially only need an App.tsx, .bnexample.json and README.md file. @@ -17,10 +23,10 @@ import { Project, getExampleProjects, groupProjects } from "./util"; * (The downside of this is that we have some almost duplicate, generated files in the repo, * but the upside is anyone can run npm start in any of the examples (and that we can point a codesandbox / repl to the examples directory)) */ -const dir = path.parse(import.meta.url.replace("file://", "")).dir; +const dir = path.parse(fileURLToPath(import.meta.url)).dir; async function writeTemplate(project: Project, templateFile: string) { - const template = await import(templateFile); + const template = await import(pathToFileURL(templateFile).toString()); const ret = await template.default(project); const targetFilePath = path.join( @@ -57,7 +63,7 @@ async function writeTemplate(project: Project, templateFile: string) { async function generateCodeForExample(project: Project) { const templates = glob.sync( - path.resolve(dir, "./template-react/*.template.tsx") + replacePathSepToSlash(path.resolve(dir, "./template-react/*.template.tsx")) ); for (const template of templates) { diff --git a/packages/dev-scripts/examples/genDocs.ts b/packages/dev-scripts/examples/genDocs.ts index 22f791afdd..34063d4328 100644 --- a/packages/dev-scripts/examples/genDocs.ts +++ b/packages/dev-scripts/examples/genDocs.ts @@ -1,3 +1,4 @@ +import { fileURLToPath } from "node:url"; import * as fs from "node:fs"; import * as path from "node:path"; import { @@ -13,8 +14,7 @@ import { `genDocs` generates the nextjs example blocks for the website docs. Note that these files are not checked in to the repo, so this command should always be run before running / building the site */ - -const dir = path.parse(import.meta.url.replace("file://", "")).dir; +const dir = path.parse(fileURLToPath(import.meta.url)).dir; const getLanguageFromFileName = (fileName: string) => fileName.split(".").pop(); diff --git a/packages/dev-scripts/examples/util.ts b/packages/dev-scripts/examples/util.ts index f3b500a7c8..78e1040a23 100644 --- a/packages/dev-scripts/examples/util.ts +++ b/packages/dev-scripts/examples/util.ts @@ -1,8 +1,9 @@ import glob from "fast-glob"; import * as fs from "node:fs"; import * as path from "node:path"; +import { fileURLToPath } from "node:url"; -const dir = path.parse(import.meta.url.replace("file://", "")).dir; +const dir = path.parse(fileURLToPath(import.meta.url)).dir; export type Project = { /** @@ -114,7 +115,7 @@ export type Files = Record< export function getProjectFiles(project: Project): Files { const dir = path.resolve("../../", project.pathFromRoot); - const files = glob.globSync(dir + "/**/*", { + const files = glob.globSync(replacePathSepToSlash(dir + "/**/*"), { ignore: ["**/node_modules/**/*", "**/dist/**/*"], }); const passedFiles = Object.fromEntries( @@ -140,7 +141,11 @@ export function getProjectFiles(project: Project): Files { */ export function getExampleProjects(): Project[] { const examples: Project[] = glob - .globSync(path.join(dir, "../../../examples/**/*/.bnexample.json")) + .globSync( + replacePathSepToSlash( + path.join(dir, "../../../examples/**/*/.bnexample.json") + ) + ) .map((configPath) => { const config = JSON.parse(fs.readFileSync(configPath, "utf-8")); const directory = path.dirname(configPath); @@ -162,9 +167,8 @@ export function getExampleProjects(): Project[] { .split(path.sep); const group = { - pathFromRoot: path.relative( - path.resolve("../../"), - path.join(directory, "..") + pathFromRoot: replacePathSepToSlash( + path.relative(path.resolve("../../"), path.join(directory, "..")) ), // remove optional 01- prefix slug: groupDir.replace(/^\d{2}-/, ""), @@ -174,7 +178,9 @@ export function getExampleProjects(): Project[] { const project = { projectSlug, fullSlug: `${group.slug}/${projectSlug}`, - pathFromRoot: path.relative(path.resolve("../../"), directory), + pathFromRoot: replacePathSepToSlash( + path.relative(path.resolve("../../"), directory) + ), config, title, group, @@ -196,3 +202,13 @@ export function getExampleProjects(): Project[] { // }); return examples; } + +export function replacePathSepToSlash(path: string) { + const isExtendedLengthPath = path.startsWith("\\\\?\\"); + + if (isExtendedLengthPath) { + return path; + } + + return path.replace(/\\/g, "/"); +}