fix: windows gen file (#970)

* fix: windows gen file

* fix: win32

* fix: template

* add util replacePathSepToSlash

---------

Co-authored-by: willliu <willliu@distinctclinic.com>

Author: jkcs

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) {

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();
 

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, "/");
+}