diff --git a/packages/pages/src/common/src/template/client.ts b/packages/pages/src/common/src/template/client.ts index 7852f557c..52db7700a 100644 --- a/packages/pages/src/common/src/template/client.ts +++ b/packages/pages/src/common/src/template/client.ts @@ -24,12 +24,11 @@ export const makeClientFiles = async (projectStructure: ProjectStructure) => { f !== "_client17.tsx" && f !== "_client.tsx" && f !== "_server.tsx" && - !f.includes(".client.") + !f.includes("client.tsx") ) .forEach(async (template) => { - const relativePath = path.join(templatePath.path, template); - fs.writeFileSync(formatClientPath(relativePath), ""); - await generateAndSaveClientHydrationTemplates(relativePath); + const templeFilePath = path.join(templatePath.path, template); + await generateAndSaveClientHydrationTemplates(templeFilePath); }); } } catch (err) { @@ -44,22 +43,25 @@ export const makeClientFiles = async (projectStructure: ProjectStructure) => { * @param path src/templates/.tsx */ const generateAndSaveClientHydrationTemplates = async (path: string) => { + const newPath = getClientPath(path); + fs.writeFileSync(newPath, ""); const sfp = new SourceFileParser(path, createTsMorphProject()); - const newSfp = new SourceFileParser( - formatClientPath(path), - createTsMorphProject() - ); + const newSfp = new SourceFileParser(newPath, createTsMorphProject()); const templateParser = new TemplateParser(sfp).makeClientTemplateFromSfp( newSfp ); templateParser.sourceFile.save(); }; -const formatClientPath = (clientPath: string): string => { - const templatePath = path.parse(clientPath); +/** + * @param templatePath /src/templates/location.tsx + * @returns clientPath /src/templates/location.client.tsx + */ +const getClientPath = (templatePath: string): string => { + const parsedPath = path.parse(templatePath); return path.join( - templatePath.dir, - templatePath.name + ".client" + templatePath.ext + parsedPath.dir, + parsedPath.name + ".client" + parsedPath.ext ); }; diff --git a/packages/pages/src/common/src/template/internal/getTemplateFilepaths.ts b/packages/pages/src/common/src/template/internal/getTemplateFilepaths.ts index d87c207ac..432d79b96 100644 --- a/packages/pages/src/common/src/template/internal/getTemplateFilepaths.ts +++ b/packages/pages/src/common/src/template/internal/getTemplateFilepaths.ts @@ -52,7 +52,7 @@ export const getTemplateFilepathsFromProjectStructure = ( const globalClientRenderFilename17 = "_client17.tsx"; const globalClientRenderFilename = "_client.tsx"; const globalServerRenderFilename = "_server.tsx"; -const globalHydrationClientFilename = ".client."; +const globalHydrationClientFilename = "client.tsx"; /** * Determines the client and server rendering templates to use. It first looks for a _client/server.tsx file in the scoped diff --git a/packages/pages/src/vite-plugin/build/build.ts b/packages/pages/src/vite-plugin/build/build.ts index 7f3c31ec4..2c855a638 100644 --- a/packages/pages/src/vite-plugin/build/build.ts +++ b/packages/pages/src/vite-plugin/build/build.ts @@ -94,7 +94,7 @@ const discoverInputs = async ( ) .forEach((template) => { const parsedPath = parse(template); - const bundlePath = template.includes(".client.") + const bundlePath = template.includes("client.tsx") ? projectStructure.config.subfolders.clientBundle : projectStructure.config.subfolders.serverBundle; const outputPath = `${bundlePath}/${parsedPath.name.replace( diff --git a/packages/pages/src/vite-plugin/build/buildStart/rendering/templateUtils.test.tsx b/packages/pages/src/vite-plugin/build/buildStart/rendering/templateUtils.test.tsx index 78ac93d9b..50bd6ab46 100644 --- a/packages/pages/src/vite-plugin/build/buildStart/rendering/templateUtils.test.tsx +++ b/packages/pages/src/vite-plugin/build/buildStart/rendering/templateUtils.test.tsx @@ -16,7 +16,7 @@ const baseTemplateModule: TemplateModuleInternal = { templateName: "template", config: { name: "name", - hydrate: true, + hydrate: false, }, getPath: () => { return "path"; diff --git a/packages/pages/src/vite-plugin/build/buildStart/rendering/wrapper.ts b/packages/pages/src/vite-plugin/build/buildStart/rendering/wrapper.ts index cd6f273b4..7a93c253d 100644 --- a/packages/pages/src/vite-plugin/build/buildStart/rendering/wrapper.ts +++ b/packages/pages/src/vite-plugin/build/buildStart/rendering/wrapper.ts @@ -39,16 +39,9 @@ export const reactWrapper = async ( let clientHydrationString; if (hydrate) { - const templatePath = - Object.keys(manifest.clientPaths).length === 0 - ? path.join( - projectStructure.config.subfolders.assets, - templateModuleInternal.path.replace("..", "") - ) - : manifest.clientPaths[templateModuleInternal.templateName]; clientHydrationString = getHydrationTemplate( pluginRenderTemplates.client, - templatePath, + manifest.clientPaths[templateModuleInternal.templateName], props ); } diff --git a/packages/pages/src/vite-plugin/build/closeBundle/manifest.ts b/packages/pages/src/vite-plugin/build/closeBundle/manifest.ts index 474478fe4..72c05f315 100644 --- a/packages/pages/src/vite-plugin/build/closeBundle/manifest.ts +++ b/packages/pages/src/vite-plugin/build/closeBundle/manifest.ts @@ -1,5 +1,5 @@ import fs from "fs-extra"; -import path from "path"; +import path from "node:path"; import { ProjectStructure } from "../../../common/src/project/structure.js"; import { convertToPosixPath } from "../../../common/src/template/paths.js"; import { Manifest } from "../../../common/src/template/types.js"; @@ -27,22 +27,24 @@ export const generateManifestFile = async ( ([name, path]) => [name, convertToPosixPath(distPath.getRelativePath(path))] ); - // Add the renderPaths to the manifest. This defines the _client and _server entries. - const renderPaths = glob.sync( - convertToPosixPath( - path.resolve( - projectStructure.config.rootFolders.dist, - projectStructure.config.subfolders.assets, - projectStructure.config.subfolders.renderBundle, - "**/*.js" + //Scans for paths in dist/assets/ and finds the paths and file names. + async function getAssetBundlePaths(assetPath: string): Promise { + const distPath = new Path(projectStructure.config.rootFolders.dist); + const filePaths = glob.sync( + convertToPosixPath( + path.resolve( + projectStructure.config.rootFolders.dist, + projectStructure.config.subfolders.assets, + assetPath, + "**/*.js" + ) ) - ) - ); - - const relativeRenderPaths = renderPaths.map((filepath) => [ - path.parse(filepath).name.split(".")[0], // get the name of the file without the hash or extension - convertToPosixPath(distPath.getRelativePath(filepath)), - ]); + ); + return filePaths.map((filepath) => [ + path.parse(filepath).name.split(".")[0], + convertToPosixPath(distPath.getRelativePath(filepath)), + ]); + } let bundlerManifest = Buffer.from("{}"); if (fs.existsSync(path.join(distPath.path, "manifest.json"))) { @@ -52,8 +54,12 @@ export const generateManifestFile = async ( } const manifest: Manifest = { serverPaths: Object.fromEntries(relativeBundlePaths), - clientPaths: Object.fromEntries(await getClientPaths(projectStructure)), - renderPaths: Object.fromEntries(relativeRenderPaths), + clientPaths: Object.fromEntries( + await getAssetBundlePaths(projectStructure.config.subfolders.clientBundle) + ), + renderPaths: Object.fromEntries( + await getAssetBundlePaths(projectStructure.config.subfolders.renderBundle) + ), projectStructure: projectStructure.config, bundlerManifest: JSON.parse(bundlerManifest.toString()), }; @@ -66,32 +72,6 @@ export const generateManifestFile = async ( fs.remove(path.resolve(distPath.path, "manifest.json")); }; -/** - * Scans for paths in dist/assets/client/ and finds the client template's - * path and feature name. - * @param projectStructure - * @returns Promise with the feature name and path - */ -const getClientPaths = async ( - projectStructure: ProjectStructure -): Promise => { - const distPath = new Path(projectStructure.config.rootFolders.dist); - const filePaths = glob.sync( - convertToPosixPath( - path.resolve( - projectStructure.config.rootFolders.dist, - projectStructure.config.subfolders.assets, - projectStructure.config.subfolders.clientBundle, - "**/*.js" - ) - ) - ); - return filePaths.map((filepath) => [ - path.parse(filepath).name.split(".")[0], - convertToPosixPath(distPath.getRelativePath(filepath)), - ]); -}; - // writeFile ensures that the directory of the filepath exists before writing the file. const writeFile = (filepath: string, contents: string) => { fs.mkdirSync(path.dirname(filepath), { recursive: true });