From 9bd9874322b799f67f752706db2489fcaf33ecb6 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Mon, 13 Nov 2023 14:12:07 +0000 Subject: [PATCH 1/4] feat(remix): Add Vite support. --- src/remix/remix-wizard.ts | 65 ++++++++++++++++++++++++++++++--------- src/remix/sdk-setup.ts | 52 +++++++++++++++++++++++++++++++ 2 files changed, 102 insertions(+), 15 deletions(-) diff --git a/src/remix/remix-wizard.ts b/src/remix/remix-wizard.ts index 75201314..03a074c2 100644 --- a/src/remix/remix-wizard.ts +++ b/src/remix/remix-wizard.ts @@ -22,11 +22,14 @@ import { instrumentRootRoute, isRemixV2, loadRemixConfig, + runRemixReveal, + modifyViteConfig, } from './sdk-setup'; import { debug } from '../utils/debug'; import { traceStep, withTelemetry } from '../telemetry'; import { isHydrogenApp } from './utils'; import { DEFAULT_URL } from '../../lib/Constants'; +import { findFile } from '../utils/ast-utils'; export async function runRemixWizard(options: WizardOptions): Promise { return withTelemetry( @@ -55,7 +58,7 @@ async function runRemixWizardWithTelemetry( // We expect `@remix-run/dev` to be installed for every Remix project await ensurePackageIsInstalled(packageJson, '@remix-run/dev', 'Remix'); - const { selectedProject, authToken, sentryUrl } = + const { selectedProject, authToken, sentryUrl, selfHosted } = await getOrAskForProjectData(options, 'javascript-remix'); await installPackage({ @@ -67,24 +70,46 @@ async function runRemixWizardWithTelemetry( const isTS = isUsingTypeScript(); const isV2 = isRemixV2(remixConfig, packageJson); + const viteConfig = findFile('vite.config'); await addSentryCliConfig({ authToken }, rcCliSetupConfig); - await traceStep('Update build script for sourcemap uploads', async () => { - try { - await updateBuildScript({ - org: selectedProject.organization.slug, - project: selectedProject.name, - url: sentryUrl === DEFAULT_URL ? undefined : sentryUrl, - isHydrogen: isHydrogenApp(packageJson), - }); - } catch (e) { - clack.log - .warn(`Could not update build script to generate and upload sourcemaps. + if (viteConfig) { + await traceStep( + 'Update vite configuration for sourcemap uploads', + async () => { + try { + await modifyViteConfig( + selectedProject, + sentryUrl, + authToken, + selfHosted, + ); + } catch (e) { + clack.log + .warn(`Could not update vite configuration to generate and upload sourcemaps. + Please update your vite configuration manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/sourcemaps/`); + debug(e); + } + }, + ); + } else { + await traceStep('Update build script for sourcemap uploads', async () => { + try { + await updateBuildScript({ + org: selectedProject.organization.slug, + project: selectedProject.slug, + url: sentryUrl === DEFAULT_URL ? undefined : sentryUrl, + isHydrogen: isHydrogenApp(packageJson), + }); + } catch (e) { + clack.log + .warn(`Could not update build script to generate and upload sourcemaps. Please update your build script manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/sourcemaps/`); - debug(e); - } - }); + debug(e); + } + }); + } await traceStep('Instrument root route', async () => { try { @@ -96,6 +121,16 @@ async function runRemixWizardWithTelemetry( } }); + traceStep('Reveal missing entry files', () => { + try { + runRemixReveal(isTS); + } catch (e) { + clack.log.warn(`Could not run 'npx remix reveal'. + Please create your entry files manually`); + debug(e); + } + }); + await traceStep('Initialize Sentry on client entry', async () => { try { await initializeSentryOnEntryClient(dsn, isTS); diff --git a/src/remix/sdk-setup.ts b/src/remix/sdk-setup.ts index aa01fede..eb2941a9 100644 --- a/src/remix/sdk-setup.ts +++ b/src/remix/sdk-setup.ts @@ -8,6 +8,7 @@ import type { ProxifiedModule } from 'magicast'; import * as fs from 'fs'; import * as path from 'path'; import * as url from 'url'; +import * as childProcess from 'child_process'; // @ts-expect-error - clack is ESM and TS complains about that. It works though import clack from '@clack/prompts'; @@ -22,6 +23,7 @@ import { instrumentRootRouteV1 } from './codemods/root-v1'; import { instrumentRootRouteV2 } from './codemods/root-v2'; import { instrumentHandleError } from './codemods/handle-error'; import { getPackageDotJson } from '../utils/clack-utils'; +import { configureVitePlugin } from '../sourcemaps/tools/vite'; export type PartialRemixConfig = { unstable_dev?: boolean; @@ -36,6 +38,52 @@ export type PartialRemixConfig = { }; const REMIX_CONFIG_FILE = 'remix.config.js'; +const REMIX_REVEAL_COMMAND = 'npx remix reveal'; + +export function runRemixReveal(isTS: boolean): void { + // Check if entry files already exist + const clientEntryFilename = `entry.client.${isTS ? 'tsx' : 'jsx'}`; + const serverEntryFilename = `entry.server.${isTS ? 'tsx' : 'jsx'}`; + + const clientEntryPath = path.join(process.cwd(), 'app', clientEntryFilename); + const serverEntryPath = path.join(process.cwd(), 'app', serverEntryFilename); + + if (fs.existsSync(clientEntryPath) && fs.existsSync(serverEntryPath)) { + clack.log.info( + `Found entry files ${chalk.cyan(clientEntryFilename)} and ${chalk.cyan( + serverEntryFilename, + )}.`, + ); + } else { + clack.log.info( + `Couldn't find entry files in your project. Trying to run ${chalk.cyan( + REMIX_REVEAL_COMMAND, + )}...`, + ); + + childProcess.execSync(REMIX_REVEAL_COMMAND, { + stdio: 'inherit', + }); + } +} + +export async function modifyViteConfig( + selectedProject: { + organization: { slug: string }; + slug: string; + }, + sentryUrl: string, + authToken: string, + selfHosted: boolean, +): Promise { + await configureVitePlugin({ + orgSlug: selectedProject.organization.slug, + projectSlug: selectedProject.slug, + url: sentryUrl, + selfHosted, + authToken, + }); +} function insertClientInitCall( dsn: string, @@ -192,6 +240,10 @@ export async function updateBuildScript(args: { buildCommand, instrumentedBuildCommand, ); + } else { + throw new Error( + "`build` script doesn't contain a known build command. Please update it manually.", + ); } await fs.promises.writeFile( From 177ab2b598bdce4853138b4e04bce989c3f5f9db Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Wed, 15 Nov 2023 09:19:17 +0000 Subject: [PATCH 2/4] Call `configureVitePlugin` directly. --- src/remix/remix-wizard.ts | 13 +++++++------ src/remix/sdk-setup.ts | 19 ------------------- 2 files changed, 7 insertions(+), 25 deletions(-) diff --git a/src/remix/remix-wizard.ts b/src/remix/remix-wizard.ts index 03a074c2..8853f693 100644 --- a/src/remix/remix-wizard.ts +++ b/src/remix/remix-wizard.ts @@ -23,13 +23,13 @@ import { isRemixV2, loadRemixConfig, runRemixReveal, - modifyViteConfig, } from './sdk-setup'; import { debug } from '../utils/debug'; import { traceStep, withTelemetry } from '../telemetry'; import { isHydrogenApp } from './utils'; import { DEFAULT_URL } from '../../lib/Constants'; import { findFile } from '../utils/ast-utils'; +import { configureVitePlugin } from '../sourcemaps/tools/vite'; export async function runRemixWizard(options: WizardOptions): Promise { return withTelemetry( @@ -79,12 +79,13 @@ async function runRemixWizardWithTelemetry( 'Update vite configuration for sourcemap uploads', async () => { try { - await modifyViteConfig( - selectedProject, - sentryUrl, - authToken, + await configureVitePlugin({ + orgSlug: selectedProject.organization.slug, + projectSlug: selectedProject.slug, + url: sentryUrl, selfHosted, - ); + authToken, + }); } catch (e) { clack.log .warn(`Could not update vite configuration to generate and upload sourcemaps. diff --git a/src/remix/sdk-setup.ts b/src/remix/sdk-setup.ts index eb2941a9..a5a0c472 100644 --- a/src/remix/sdk-setup.ts +++ b/src/remix/sdk-setup.ts @@ -23,7 +23,6 @@ import { instrumentRootRouteV1 } from './codemods/root-v1'; import { instrumentRootRouteV2 } from './codemods/root-v2'; import { instrumentHandleError } from './codemods/handle-error'; import { getPackageDotJson } from '../utils/clack-utils'; -import { configureVitePlugin } from '../sourcemaps/tools/vite'; export type PartialRemixConfig = { unstable_dev?: boolean; @@ -67,24 +66,6 @@ export function runRemixReveal(isTS: boolean): void { } } -export async function modifyViteConfig( - selectedProject: { - organization: { slug: string }; - slug: string; - }, - sentryUrl: string, - authToken: string, - selfHosted: boolean, -): Promise { - await configureVitePlugin({ - orgSlug: selectedProject.organization.slug, - projectSlug: selectedProject.slug, - url: sentryUrl, - selfHosted, - authToken, - }); -} - function insertClientInitCall( dsn: string, originalHooksMod: ProxifiedModule, From a184b9f1915ef27ef8a309d69d3afeb39c8f5101 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Wed, 15 Nov 2023 10:51:44 +0000 Subject: [PATCH 3/4] Pipe `npx remix reveal` output to clack. --- src/remix/sdk-setup.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/remix/sdk-setup.ts b/src/remix/sdk-setup.ts index a5a0c472..45bdb92e 100644 --- a/src/remix/sdk-setup.ts +++ b/src/remix/sdk-setup.ts @@ -60,9 +60,7 @@ export function runRemixReveal(isTS: boolean): void { )}...`, ); - childProcess.execSync(REMIX_REVEAL_COMMAND, { - stdio: 'inherit', - }); + clack.log.info(childProcess.execSync(REMIX_REVEAL_COMMAND).toString()); } } From 25b2e750a8ea6e0ddfb7aa377c9d5f043241998a Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Wed, 15 Nov 2023 15:27:17 +0000 Subject: [PATCH 4/4] Update CHANGELOG --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3b25d958..5f0f6aca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## Unreleased + +- feat(remix): Add Vite support (#495) + ## 3.16.3 - fix(sourcemaps): Re-read package.json when modifying build command #493