diff --git a/babel.config.js b/babel.config.js index be0d07d35023..5df4f8da9566 100644 --- a/babel.config.js +++ b/babel.config.js @@ -103,6 +103,7 @@ module.exports = { version: packageJSON.devDependencies['@babel/runtime-corejs3'], }, ], + '@babel/plugin-syntax-import-attributes', ], overrides: [ // ** WEB PACKAGES ** diff --git a/packages/vite/src/buildRouteManifest.ts b/packages/vite/src/buildRouteManifest.ts index 98dc23e136e1..818c501966e0 100644 --- a/packages/vite/src/buildRouteManifest.ts +++ b/packages/vite/src/buildRouteManifest.ts @@ -1,5 +1,6 @@ -import fs from 'fs/promises' -import path from 'path' +import fs from 'node:fs/promises' +import path from 'node:path' +import url from 'node:url' import type { Manifest as ViteBuildManifest } from 'vite' @@ -13,30 +14,12 @@ import type { RWRouteManifest } from './types' * Generate a route manifest file for the web server side. */ export async function buildRouteManifest() { - const webRouteManifest = getPaths().web.routeManifest - - // TODO When https://github.com/tc39/proposal-import-attributes and - // https://github.com/microsoft/TypeScript/issues/53656 have both landed we - // should try to do this instead: - // const clientBuildManifest: ViteBuildManifest = await import( - // path.join(getPaths().web.dist, 'client-build-manifest.json'), - // { with: { type: 'json' } } - // ) - // NOTES: - // * There's a related babel plugin here - // https://babeljs.io/docs/babel-plugin-syntax-import-attributes - // * Included in `preset-env` if you set `shippedProposals: true` - // * We had this before, but with `assert` instead of `with`. We really - // should be using `with`. See motivation in issues linked above. - // * With `assert` and `@babel/plugin-syntax-import-assertions` the - // code compiled and ran properly, but Jest tests failed, complaining - // about the syntax. - const manifestPath = path.join( - getPaths().web.dist, - 'client-build-manifest.json' - ) - const buildManifestStr = await fs.readFile(manifestPath, 'utf-8') - const clientBuildManifest: ViteBuildManifest = JSON.parse(buildManifestStr) + const buildManifestUrl = url.pathToFileURL( + path.join(getPaths().web.dist, 'client-build-manifest.json') + ).href + const clientBuildManifest: ViteBuildManifest = ( + await import(buildManifestUrl, { with: { type: 'json' } }) + ).default const routesList = getProjectRoutes() @@ -66,6 +49,7 @@ export async function buildRouteManifest() { console.log('routeManifest', JSON.stringify(routeManifest, null, 2)) + const webRouteManifest = getPaths().web.routeManifest return fs.writeFile(webRouteManifest, JSON.stringify(routeManifest, null, 2)) } diff --git a/packages/vite/src/runFeServer.ts b/packages/vite/src/runFeServer.ts index 6e0168a63ec3..625a0f1623d8 100644 --- a/packages/vite/src/runFeServer.ts +++ b/packages/vite/src/runFeServer.ts @@ -5,8 +5,8 @@ // UPDATE: We decided to name the package @redwoodjs/web-server instead of // fe-server. And it's already created, but this hasn't been moved over yet. -import fs from 'fs/promises' -import path from 'path' +import path from 'node:path' +import url from 'node:url' import { createServerAdapter } from '@whatwg-node/server' // @ts-expect-error We will remove dotenv-defaults from this package anyway @@ -61,32 +61,21 @@ export async function runFeServer() { } } - // TODO When https://github.com/tc39/proposal-import-attributes and - // https://github.com/microsoft/TypeScript/issues/53656 have both landed we - // should try to do this instead: - // const routeManifest: RWRouteManifest = await import( - // rwPaths.web.routeManifest, { with: { type: 'json' } } - // ) - // NOTES: - // * There's a related babel plugin here - // https://babeljs.io/docs/babel-plugin-syntax-import-attributes - // * Included in `preset-env` if you set `shippedProposals: true` - // * We had this before, but with `assert` instead of `with`. We really - // should be using `with`. See motivation in issues linked above. - // * With `assert` and `@babel/plugin-syntax-import-assertions` the - // code compiled and ran properly, but Jest tests failed, complaining - // about the syntax. - const routeManifestStr = await fs.readFile(rwPaths.web.routeManifest, 'utf-8') - const routeManifest: RWRouteManifest = JSON.parse(routeManifestStr) - - // TODO See above about using `import { with: { type: 'json' } }` instead - const manifestPath = path.join(rwPaths.web.dist, 'client-build-manifest.json') - const buildManifestStr = await fs.readFile(manifestPath, 'utf-8') - const buildManifest: ViteBuildManifest = JSON.parse(buildManifestStr) + const routeManifestUrl = url.pathToFileURL(rwPaths.web.routeManifest).href + const routeManifest: RWRouteManifest = ( + await import(routeManifestUrl, { with: { type: 'json' } }) + ).default + + const buildManifestUrl = url.pathToFileURL( + path.join(rwPaths.web.dist, 'client-build-manifest.json') + ).href + const buildManifest: ViteBuildManifest = ( + await import(buildManifestUrl, { with: { type: 'json' } }) + ).default if (rwConfig.experimental?.rsc?.enabled) { console.log('='.repeat(80)) - console.log('buildManifest', buildManifest) + console.log('buildManifest', buildManifest.default) console.log('='.repeat(80)) }