From 15910ce71be29c1cc4be4647b9455383383bc65e Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Wed, 29 Nov 2023 15:13:38 +0100 Subject: [PATCH 1/9] Use TS 5.3 import attributes --- packages/vite/src/buildFeServer.ts | 28 +++++---------------------- packages/vite/src/buildRscFeServer.ts | 24 +++++------------------ 2 files changed, 10 insertions(+), 42 deletions(-) diff --git a/packages/vite/src/buildFeServer.ts b/packages/vite/src/buildFeServer.ts index 80c04f906234..88c1c7e9be4e 100644 --- a/packages/vite/src/buildFeServer.ts +++ b/packages/vite/src/buildFeServer.ts @@ -118,30 +118,12 @@ export const buildFeServer = async ({ verbose, webDir }: BuildOptions = {}) => { outdir: rwPaths.web.distRouteHooks, }) - // Step 3: Generate route-manifest.json - - // 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' + // Generate route-manifest.json + + const clientBuildManifest: ViteBuildManifest = await import( + path.join(getPaths().web.dist, 'client-build-manifest.json'), + { with: { type: 'json' } } ) - const buildManifestStr = await fs.readFile(manifestPath, 'utf-8') - const clientBuildManifest: ViteBuildManifest = JSON.parse(buildManifestStr) const routesList = getProjectRoutes() diff --git a/packages/vite/src/buildRscFeServer.ts b/packages/vite/src/buildRscFeServer.ts index 2cd3db4c8dfc..23c899a8ac4f 100644 --- a/packages/vite/src/buildRscFeServer.ts +++ b/packages/vite/src/buildRscFeServer.ts @@ -4,6 +4,7 @@ import path from 'path' import type { Manifest as ViteBuildManifest } from 'vite' import type { RouteSpec } from '@redwoodjs/internal/dist/routes' +import { getPaths } from '@redwoodjs/project-config' import { rscBuildAnalyze } from './rsc/rscBuildAnalyze' import { rscBuildClient } from './rsc/rscBuildClient' @@ -65,25 +66,10 @@ export const buildRscFeServer = async ({ webDistServerEntries ) - // 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(webDist, 'client-build-manifest.json') - const manifestStr = await fs.readFile(manifestPath, 'utf-8') - const clientBuildManifest: ViteBuildManifest = JSON.parse(manifestStr) + const clientBuildManifest: ViteBuildManifest = await import( + path.join(getPaths().web.dist, 'client-build-manifest.json'), + { with: { type: 'json' } } + ) // TODO (RSC) We don't have support for a router yet, so skip all routes const routesList = [] as RouteSpec[] // getProjectRoutes() From c86fa0630441f65a73657871660ec9f1e181af3e Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Wed, 29 Nov 2023 15:50:17 +0100 Subject: [PATCH 2/9] Add babel plugin --- babel.config.js | 1 + packages/vite/src/runFeServer.ts | 32 +++++++++----------------------- 2 files changed, 10 insertions(+), 23 deletions(-) diff --git a/babel.config.js b/babel.config.js index 621506d13d6a..ba2485181909 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/runFeServer.ts b/packages/vite/src/runFeServer.ts index 37655cf1da47..e0c8d9a43805 100644 --- a/packages/vite/src/runFeServer.ts +++ b/packages/vite/src/runFeServer.ts @@ -5,7 +5,6 @@ // 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 { createServerAdapter } from '@whatwg-node/server' @@ -61,28 +60,15 @@ 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 routeManifest: RWRouteManifest = await import( + rwPaths.web.routeManifest, + { with: { type: 'json' } } + ) + + const buildManifest: ViteBuildManifest = await import( + path.join(rwPaths.web.dist, 'client-build-manifest.json'), + { with: { type: 'json' } } + ) if (rwConfig.experimental?.rsc?.enabled) { console.log('='.repeat(80)) From 2fb7ad9a19ca1805055e7a6d5b3f95b31bafd281 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Sun, 17 Dec 2023 23:32:11 +0100 Subject: [PATCH 3/9] buildRouteManifest --- packages/vite/src/buildRouteManifest.ts | 27 ++++--------------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/packages/vite/src/buildRouteManifest.ts b/packages/vite/src/buildRouteManifest.ts index 98dc23e136e1..553e6af05fa4 100644 --- a/packages/vite/src/buildRouteManifest.ts +++ b/packages/vite/src/buildRouteManifest.ts @@ -13,30 +13,10 @@ 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 clientBuildManifest: ViteBuildManifest = await import( + path.join(rwPaths.web.dist, 'client-build-manifest.json'), + { with: { type: 'json' } } ) - const buildManifestStr = await fs.readFile(manifestPath, 'utf-8') - const clientBuildManifest: ViteBuildManifest = JSON.parse(buildManifestStr) const routesList = getProjectRoutes() @@ -66,6 +46,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)) } From f2bcf882e5522fa9da8bae9f2a233bdd13795208 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Sun, 17 Dec 2023 23:58:32 +0100 Subject: [PATCH 4/9] getPaths() --- packages/vite/src/buildRouteManifest.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/buildRouteManifest.ts b/packages/vite/src/buildRouteManifest.ts index 553e6af05fa4..cc5e14693a9f 100644 --- a/packages/vite/src/buildRouteManifest.ts +++ b/packages/vite/src/buildRouteManifest.ts @@ -14,7 +14,7 @@ import type { RWRouteManifest } from './types' */ export async function buildRouteManifest() { const clientBuildManifest: ViteBuildManifest = await import( - path.join(rwPaths.web.dist, 'client-build-manifest.json'), + path.join(getPaths().web.dist, 'client-build-manifest.json'), { with: { type: 'json' } } ) From 63523b6fada330d69905908f8c57a5cd22730a91 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Mon, 18 Dec 2023 07:33:12 +0100 Subject: [PATCH 5/9] .default --- packages/vite/src/buildRouteManifest.ts | 2 +- packages/vite/src/runFeServer.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/vite/src/buildRouteManifest.ts b/packages/vite/src/buildRouteManifest.ts index cc5e14693a9f..df59b56b90d8 100644 --- a/packages/vite/src/buildRouteManifest.ts +++ b/packages/vite/src/buildRouteManifest.ts @@ -16,7 +16,7 @@ export async function buildRouteManifest() { const clientBuildManifest: ViteBuildManifest = await import( path.join(getPaths().web.dist, 'client-build-manifest.json'), { with: { type: 'json' } } - ) + ).default const routesList = getProjectRoutes() diff --git a/packages/vite/src/runFeServer.ts b/packages/vite/src/runFeServer.ts index 116e02798031..dbae5c700bab 100644 --- a/packages/vite/src/runFeServer.ts +++ b/packages/vite/src/runFeServer.ts @@ -63,12 +63,12 @@ export async function runFeServer() { const routeManifest: RWRouteManifest = await import( rwPaths.web.routeManifest, { with: { type: 'json' } } - ) + ).default const buildManifest: ViteBuildManifest = await import( path.join(rwPaths.web.dist, 'client-build-manifest.json'), { with: { type: 'json' } } - ) + ).default if (rwConfig.experimental?.rsc?.enabled) { console.log('='.repeat(80)) From 51d749916d15e88a0225cabbe79cd0391729eef3 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Mon, 18 Dec 2023 07:43:32 +0100 Subject: [PATCH 6/9] .default after await --- packages/vite/src/buildRouteManifest.ts | 4 ++-- packages/vite/src/runFeServer.ts | 14 ++++++++------ 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/vite/src/buildRouteManifest.ts b/packages/vite/src/buildRouteManifest.ts index df59b56b90d8..9006df4f2ef3 100644 --- a/packages/vite/src/buildRouteManifest.ts +++ b/packages/vite/src/buildRouteManifest.ts @@ -16,7 +16,7 @@ export async function buildRouteManifest() { const clientBuildManifest: ViteBuildManifest = await import( path.join(getPaths().web.dist, 'client-build-manifest.json'), { with: { type: 'json' } } - ).default + ) const routesList = getProjectRoutes() @@ -24,7 +24,7 @@ export async function buildRouteManifest() { acc[route.pathDefinition] = { name: route.name, bundle: route.relativeFilePath - ? clientBuildManifest[route.relativeFilePath]?.file ?? null + ? clientBuildManifest.default[route.relativeFilePath]?.file ?? null : null, matchRegexString: route.matchRegexString, // NOTE this is the path definition, not the actual path diff --git a/packages/vite/src/runFeServer.ts b/packages/vite/src/runFeServer.ts index dbae5c700bab..2d6d9a583333 100644 --- a/packages/vite/src/runFeServer.ts +++ b/packages/vite/src/runFeServer.ts @@ -63,7 +63,7 @@ export async function runFeServer() { const routeManifest: RWRouteManifest = await import( rwPaths.web.routeManifest, { with: { type: 'json' } } - ).default + ) const buildManifest: ViteBuildManifest = await import( path.join(rwPaths.web.dist, 'client-build-manifest.json'), @@ -72,13 +72,15 @@ export async function runFeServer() { if (rwConfig.experimental?.rsc?.enabled) { console.log('='.repeat(80)) - console.log('buildManifest', buildManifest) + console.log('buildManifest', buildManifest.default) console.log('='.repeat(80)) } - const indexEntry = Object.values(buildManifest).find((manifestItem) => { - return manifestItem.isEntry - }) + const indexEntry = Object.values(buildManifest.default).find( + (manifestItem) => { + return manifestItem.isEntry + } + ) if (!indexEntry) { throw new Error('Could not find index.html in build manifest') @@ -113,7 +115,7 @@ export async function runFeServer() { const getStylesheetLinks = () => indexEntry.css || [] const clientEntry = '/' + indexEntry.file - for (const route of Object.values(routeManifest)) { + for (const route of Object.values(routeManifest.default)) { // if it is a 404, register it at the end somehow. if (!route.matchRegexString) { continue From d1c7f903dd033885d94854034a7557170bc61c53 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Mon, 18 Dec 2023 07:59:46 +0100 Subject: [PATCH 7/9] .default :uno-reverse: --- .vscode/settings.json | 16 +++++++++++++++- packages/vite/src/buildRouteManifest.ts | 11 ++++++----- packages/vite/src/runFeServer.ts | 24 +++++++++++------------- 3 files changed, 32 insertions(+), 19 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index b14985ca9431..1b14c5b28785 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,7 +8,21 @@ "workbench.colorCustomizations": { "statusBar.background": "#b85833", "statusBarItem.hoverBackground": "#ce7350", - "statusBar.foreground": "#e7e7e7" + "statusBar.foreground": "#e7e7e7", + "activityBar.activeBackground": "#ce7350", + "activityBar.background": "#ce7350", + "activityBar.foreground": "#15202b", + "activityBar.inactiveForeground": "#15202b99", + "activityBarBadge.background": "#82dc9b", + "activityBarBadge.foreground": "#15202b", + "commandCenter.border": "#e7e7e799", + "sash.hoverBorder": "#ce7350", + "statusBarItem.remoteBackground": "#b85833", + "statusBarItem.remoteForeground": "#e7e7e7", + "titleBar.activeBackground": "#b85833", + "titleBar.activeForeground": "#e7e7e7", + "titleBar.inactiveBackground": "#b8583399", + "titleBar.inactiveForeground": "#e7e7e799" }, "search.exclude": { "**/dist": true, diff --git a/packages/vite/src/buildRouteManifest.ts b/packages/vite/src/buildRouteManifest.ts index 9006df4f2ef3..a93eb664f9a7 100644 --- a/packages/vite/src/buildRouteManifest.ts +++ b/packages/vite/src/buildRouteManifest.ts @@ -13,10 +13,11 @@ import type { RWRouteManifest } from './types' * Generate a route manifest file for the web server side. */ export async function buildRouteManifest() { - const clientBuildManifest: ViteBuildManifest = await import( - path.join(getPaths().web.dist, 'client-build-manifest.json'), - { with: { type: 'json' } } - ) + const clientBuildManifest: ViteBuildManifest = ( + await import(path.join(getPaths().web.dist, 'client-build-manifest.json'), { + with: { type: 'json' }, + }) + ).default const routesList = getProjectRoutes() @@ -24,7 +25,7 @@ export async function buildRouteManifest() { acc[route.pathDefinition] = { name: route.name, bundle: route.relativeFilePath - ? clientBuildManifest.default[route.relativeFilePath]?.file ?? null + ? clientBuildManifest[route.relativeFilePath]?.file ?? null : null, matchRegexString: route.matchRegexString, // NOTE this is the path definition, not the actual path diff --git a/packages/vite/src/runFeServer.ts b/packages/vite/src/runFeServer.ts index 2d6d9a583333..16d33f497caa 100644 --- a/packages/vite/src/runFeServer.ts +++ b/packages/vite/src/runFeServer.ts @@ -60,14 +60,14 @@ export async function runFeServer() { } } - const routeManifest: RWRouteManifest = await import( - rwPaths.web.routeManifest, - { with: { type: 'json' } } - ) + const routeManifest: RWRouteManifest = ( + await import(rwPaths.web.routeManifest, { with: { type: 'json' } }) + ).default - const buildManifest: ViteBuildManifest = await import( - path.join(rwPaths.web.dist, 'client-build-manifest.json'), - { with: { type: 'json' } } + const buildManifest: ViteBuildManifest = ( + await import(path.join(rwPaths.web.dist, 'client-build-manifest.json'), { + with: { type: 'json' }, + }) ).default if (rwConfig.experimental?.rsc?.enabled) { @@ -76,11 +76,9 @@ export async function runFeServer() { console.log('='.repeat(80)) } - const indexEntry = Object.values(buildManifest.default).find( - (manifestItem) => { - return manifestItem.isEntry - } - ) + const indexEntry = Object.values(buildManifest).find((manifestItem) => { + return manifestItem.isEntry + }) if (!indexEntry) { throw new Error('Could not find index.html in build manifest') @@ -115,7 +113,7 @@ export async function runFeServer() { const getStylesheetLinks = () => indexEntry.css || [] const clientEntry = '/' + indexEntry.file - for (const route of Object.values(routeManifest.default)) { + for (const route of Object.values(routeManifest)) { // if it is a 404, register it at the end somehow. if (!route.matchRegexString) { continue From 42d33b84ee7db38cffdb1f56e754a17a71c812d3 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Mon, 18 Dec 2023 08:42:04 +0100 Subject: [PATCH 8/9] pathToFileURL --- packages/vite/src/buildRouteManifest.ts | 12 +++++++----- packages/vite/src/runFeServer.ts | 13 ++++++++----- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/vite/src/buildRouteManifest.ts b/packages/vite/src/buildRouteManifest.ts index a93eb664f9a7..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,10 +14,11 @@ import type { RWRouteManifest } from './types' * Generate a route manifest file for the web server side. */ export async function buildRouteManifest() { + const buildManifestUrl = url.pathToFileURL( + path.join(getPaths().web.dist, 'client-build-manifest.json') + ).href const clientBuildManifest: ViteBuildManifest = ( - await import(path.join(getPaths().web.dist, 'client-build-manifest.json'), { - with: { type: 'json' }, - }) + await import(buildManifestUrl, { with: { type: 'json' } }) ).default const routesList = getProjectRoutes() diff --git a/packages/vite/src/runFeServer.ts b/packages/vite/src/runFeServer.ts index 16d33f497caa..625a0f1623d8 100644 --- a/packages/vite/src/runFeServer.ts +++ b/packages/vite/src/runFeServer.ts @@ -5,7 +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 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 @@ -60,14 +61,16 @@ export async function runFeServer() { } } + const routeManifestUrl = url.pathToFileURL(rwPaths.web.routeManifest).href const routeManifest: RWRouteManifest = ( - await import(rwPaths.web.routeManifest, { with: { type: 'json' } }) + 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(path.join(rwPaths.web.dist, 'client-build-manifest.json'), { - with: { type: 'json' }, - }) + await import(buildManifestUrl, { with: { type: 'json' } }) ).default if (rwConfig.experimental?.rsc?.enabled) { From 8304cab4db573f7e731c3b9cab4cd198c1ebae6e Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Mon, 18 Dec 2023 08:43:40 +0100 Subject: [PATCH 9/9] Revert changes to .vscode/settings.json --- .vscode/settings.json | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 1b14c5b28785..b14985ca9431 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,21 +8,7 @@ "workbench.colorCustomizations": { "statusBar.background": "#b85833", "statusBarItem.hoverBackground": "#ce7350", - "statusBar.foreground": "#e7e7e7", - "activityBar.activeBackground": "#ce7350", - "activityBar.background": "#ce7350", - "activityBar.foreground": "#15202b", - "activityBar.inactiveForeground": "#15202b99", - "activityBarBadge.background": "#82dc9b", - "activityBarBadge.foreground": "#15202b", - "commandCenter.border": "#e7e7e799", - "sash.hoverBorder": "#ce7350", - "statusBarItem.remoteBackground": "#b85833", - "statusBarItem.remoteForeground": "#e7e7e7", - "titleBar.activeBackground": "#b85833", - "titleBar.activeForeground": "#e7e7e7", - "titleBar.inactiveBackground": "#b8583399", - "titleBar.inactiveForeground": "#e7e7e799" + "statusBar.foreground": "#e7e7e7" }, "search.exclude": { "**/dist": true,