From 17a46d9da595835ac83eabfc3d8d7a432976a805 Mon Sep 17 00:00:00 2001 From: Matias Pequeno Date: Thu, 21 Mar 2024 17:58:03 +0100 Subject: [PATCH] React server component support (#121) * Add 'use client' to each file that interacts with a rollbar context * Add rollup plugin to preserve use client directives --- examples/nextjs/package-lock.json | 2 +- examples/react-17/package-lock.json | 2 +- examples/typescript/package-lock.json | 2 +- package-lock.json | 14 +++++++++++ package.json | 1 + rollup.config.mjs | 32 +++++++++++++++++++++++--- src/error-boundary.js | 2 ++ src/hooks/use-rollbar-capture-event.js | 2 ++ src/hooks/use-rollbar-config.js | 2 ++ src/hooks/use-rollbar-context.js | 2 ++ src/hooks/use-rollbar-logs.js | 2 ++ src/hooks/use-rollbar-person.js | 2 ++ src/hooks/use-rollbar.js | 2 ++ src/hooks/use-scoped-rollbar-config.js | 2 ++ src/provider.js | 2 ++ src/rollbar-configuration.js | 2 ++ src/rollbar-context.js | 2 ++ 17 files changed, 69 insertions(+), 6 deletions(-) diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json index 0e3bac6..32bd9ba 100644 --- a/examples/nextjs/package-lock.json +++ b/examples/nextjs/package-lock.json @@ -24,7 +24,7 @@ } }, ".yalc/@rollbar/react": { - "version": "0.11.2+64a145e4", + "version": "0.11.2+6492a69d", "license": "MIT", "dependencies": { "tiny-invariant": "^1.1.0" diff --git a/examples/react-17/package-lock.json b/examples/react-17/package-lock.json index acbd5b7..d9fcdc5 100644 --- a/examples/react-17/package-lock.json +++ b/examples/react-17/package-lock.json @@ -85,7 +85,7 @@ } }, ".yalc/@rollbar/react": { - "version": "0.11.2+64a145e4", + "version": "0.11.2+6492a69d", "license": "MIT", "dependencies": { "tiny-invariant": "^1.1.0" diff --git a/examples/typescript/package-lock.json b/examples/typescript/package-lock.json index d61741a..2ee6fff 100644 --- a/examples/typescript/package-lock.json +++ b/examples/typescript/package-lock.json @@ -33,7 +33,7 @@ } }, ".yalc/@rollbar/react": { - "version": "0.11.2+64a145e4", + "version": "0.11.2+6492a69d", "license": "MIT", "dependencies": { "tiny-invariant": "^1.1.0" diff --git a/package-lock.json b/package-lock.json index 37bf3d6..5244b8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,6 +52,7 @@ "rollbar": "^2.26.3", "rollup": "^4.12.0", "rollup-plugin-peer-deps-external": "^2.2.4", + "rollup-plugin-preserve-directives": "^0.4.0", "ts-jest": "^29.1.2", "ts-node": "^10.9.2", "typescript": "^5", @@ -11986,6 +11987,19 @@ "rollup": "*" } }, + "node_modules/rollup-plugin-preserve-directives": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-preserve-directives/-/rollup-plugin-preserve-directives-0.4.0.tgz", + "integrity": "sha512-gx4nBxYm5BysmEQS+e2tAMrtFxrGvk+Pe5ppafRibQi0zlW7VYAbEGk6IKDw9sJGPdFWgVTE0o4BU4cdG0Fylg==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.1.0", + "magic-string": "^0.30.5" + }, + "peerDependencies": { + "rollup": "2.x || 3.x || 4.x" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", diff --git a/package.json b/package.json index 34a1f44..6933426 100644 --- a/package.json +++ b/package.json @@ -94,6 +94,7 @@ "rollbar": "^2.26.3", "rollup": "^4.12.0", "rollup-plugin-peer-deps-external": "^2.2.4", + "rollup-plugin-preserve-directives": "^0.4.0", "ts-jest": "^29.1.2", "ts-node": "^10.9.2", "typescript": "^5", diff --git a/rollup.config.mjs b/rollup.config.mjs index ebf5cc3..5dd6e48 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -6,6 +6,7 @@ import resolve from '@rollup/plugin-node-resolve'; import peerDepsExternal from 'rollup-plugin-peer-deps-external'; import babel from '@rollup/plugin-babel'; import pkg from './package.json' assert { type: 'json' }; +import preserveDirectives from 'rollup-plugin-preserve-directives'; const COMMON_PLUGINS = [ resolve(), @@ -14,6 +15,22 @@ const COMMON_PLUGINS = [ babel({ babelHelpers: 'bundled', exclude: ['node_modules/**'] }), ]; +const entryFileNames = (chunkInfo) => { + if (chunkInfo.name.includes('node_modules')) { + return chunkInfo.name.replace(/node_modules/g, 'external') + '.js'; + } + + return '[name].js'; +}; + +const onwarn = (warning, warn) => { + if (warning.code === 'MODULE_LEVEL_DIRECTIVE') { + return; + } + + warn(warning); +}; + export default [ { input: 'src/index.js', @@ -30,6 +47,7 @@ export default [ }, }, plugins: [...COMMON_PLUGINS, commonjs()], + onwarn, }, { @@ -51,16 +69,24 @@ export default [ dir: pkg.module, format: 'es', sourcemap: true, - entryFileNames: '[name].js', + preserveModules: true, + preserveModulesRoot: 'src', + entryFileNames, }, { dir: pkg.main, format: 'cjs', sourcemap: true, - entryFileNames: '[name].js', exports: 'named', + preserveModules: true, + preserveModulesRoot: 'src', + entryFileNames }, ], - plugins: [...COMMON_PLUGINS], + plugins: [ + ...COMMON_PLUGINS, + preserveDirectives({ suppressPreserveModulesWarning: true }), + ], + onwarn, }, ]; diff --git a/src/error-boundary.js b/src/error-boundary.js index 34dd196..afbbc7a 100644 --- a/src/error-boundary.js +++ b/src/error-boundary.js @@ -1,3 +1,5 @@ +'use client'; + import React, { Component } from 'react'; import PropTypes from 'prop-types'; import invariant from 'tiny-invariant'; diff --git a/src/hooks/use-rollbar-capture-event.js b/src/hooks/use-rollbar-capture-event.js index 03a752e..e01536c 100644 --- a/src/hooks/use-rollbar-capture-event.js +++ b/src/hooks/use-rollbar-capture-event.js @@ -1,3 +1,5 @@ +'use client'; + import { useEffect } from 'react'; import invariant from 'tiny-invariant'; import { LEVEL_INFO } from '../constants'; diff --git a/src/hooks/use-rollbar-config.js b/src/hooks/use-rollbar-config.js index 2b6d480..27d732b 100644 --- a/src/hooks/use-rollbar-config.js +++ b/src/hooks/use-rollbar-config.js @@ -1,3 +1,5 @@ +'use client'; + import { useRollbar } from './use-rollbar'; export function useRollbarConfiguration(config) { diff --git a/src/hooks/use-rollbar-context.js b/src/hooks/use-rollbar-context.js index 022480e..46b6a2b 100644 --- a/src/hooks/use-rollbar-context.js +++ b/src/hooks/use-rollbar-context.js @@ -1,3 +1,5 @@ +'use client'; + import invariant from 'tiny-invariant'; import { useEffect, useLayoutEffect } from 'react'; import { useRollbar } from './use-rollbar'; diff --git a/src/hooks/use-rollbar-logs.js b/src/hooks/use-rollbar-logs.js index d7dc426..b045d75 100644 --- a/src/hooks/use-rollbar-logs.js +++ b/src/hooks/use-rollbar-logs.js @@ -1,3 +1,5 @@ +'use client'; + // EXPERIMENTAL // NOT EXPORTED AS PART OF PUBLIC API YET // NO TEST COVERAGE diff --git a/src/hooks/use-rollbar-person.js b/src/hooks/use-rollbar-person.js index 4bb6f3d..bb19854 100644 --- a/src/hooks/use-rollbar-person.js +++ b/src/hooks/use-rollbar-person.js @@ -1,3 +1,5 @@ +'use client'; + import { useRollbarConfiguration } from './use-rollbar-config'; export function useRollbarPerson(person) { diff --git a/src/hooks/use-rollbar.js b/src/hooks/use-rollbar.js index 666b52f..b528335 100644 --- a/src/hooks/use-rollbar.js +++ b/src/hooks/use-rollbar.js @@ -1,3 +1,5 @@ +'use client'; + import { useContext } from 'react'; import { Context, getRollbarFromContext } from '../provider'; diff --git a/src/hooks/use-scoped-rollbar-config.js b/src/hooks/use-scoped-rollbar-config.js index 793c19d..b381e90 100644 --- a/src/hooks/use-scoped-rollbar-config.js +++ b/src/hooks/use-scoped-rollbar-config.js @@ -1,3 +1,5 @@ +'use client'; + // EXPERIMENTAL // NOT EXPORTED AS PART OF PUBLIC API YET // NO TEST COVERAGE diff --git a/src/provider.js b/src/provider.js index ae0ad40..86a7945 100644 --- a/src/provider.js +++ b/src/provider.js @@ -1,3 +1,5 @@ +'use client'; + import React, { Component, createContext } from 'react'; import PropTypes from 'prop-types'; import Rollbar from 'rollbar'; diff --git a/src/rollbar-configuration.js b/src/rollbar-configuration.js index 1b99e8d..4899ddd 100644 --- a/src/rollbar-configuration.js +++ b/src/rollbar-configuration.js @@ -1,3 +1,5 @@ +'use client'; + // EXPERIMENTAL // NOT EXPORTED AS PART OF PUBLIC API YET: no current test coverage diff --git a/src/rollbar-context.js b/src/rollbar-context.js index fd56962..df1394c 100644 --- a/src/rollbar-context.js +++ b/src/rollbar-context.js @@ -1,3 +1,5 @@ +'use client'; + import { Component } from 'react'; import PropTypes from 'prop-types'; import { Context, getRollbarFromContext } from './provider';