Fix magic export deprecation messaging (#4661)

* Revert "Deprecate all functions & types exported from `magicExports` (#3284)"

This reverts commit 848d8b0.

* Single deprecation warning per remix index file

* Revert "Single deprecation warning per remix index file"

This reverts commit 7774492.

* Add back in TS deprecation typings

* Warn on deprecated remix imports via esbuild plugin

* add chgangeset

.changeset/sharp-ears-begin.md

@@ -0,0 +1,6 @@
+---
+"remix": patch
+"@remix-run/dev": patch
+---
+
+Importing functions and types from the `remix` package is deprecated, and all exported modules will be removed in the next major release. For more details,[see the release notes for 1.4.0](https://github.com/remix-run/remix/releases/tag/v1.4.0) where these changes were first announced.

packages/remix-dev/compiler/compileBrowser.ts

@@ -11,6 +11,7 @@ import { loaders } from "./loaders";
 import { type CompileOptions } from "./options";
 import { browserRouteModulesPlugin } from "./plugins/browserRouteModulesPlugin";
 import { cssFilePlugin } from "./plugins/cssFilePlugin";
+import { deprecatedRemixPackagePlugin } from "./plugins/deprecatedRemixPackagePlugin";
 import { emptyModulesPlugin } from "./plugins/emptyModulesPlugin";
 import { mdxPlugin } from "./plugins/mdx";
 import { urlImportsPlugin } from "./plugins/urlImportsPlugin";
@@ -70,6 +71,7 @@ const createEsbuildConfig = (
   }
 
   let plugins = [
+    deprecatedRemixPackagePlugin(options.onWarning),
     cssFilePlugin(options),
     urlImportsPlugin(),
     mdxPlugin(config),

packages/remix-dev/compiler/compilerServer.ts

@@ -9,6 +9,7 @@ import { type AssetsManifest } from "./assets";
 import { loaders } from "./loaders";
 import { type CompileOptions } from "./options";
 import { cssFilePlugin } from "./plugins/cssFilePlugin";
+import { deprecatedRemixPackagePlugin } from "./plugins/deprecatedRemixPackagePlugin";
 import { emptyModulesPlugin } from "./plugins/emptyModulesPlugin";
 import { mdxPlugin } from "./plugins/mdx";
 import { serverAssetsManifestPlugin } from "./plugins/serverAssetsManifestPlugin";
@@ -47,6 +48,7 @@ const createEsbuildConfig = (
   let isDenoRuntime = config.serverBuildTarget === "deno";
 
   let plugins: esbuild.Plugin[] = [
+    deprecatedRemixPackagePlugin(options.onWarning),
     cssFilePlugin(options),
     urlImportsPlugin(),
     mdxPlugin(config),

packages/remix-dev/compiler/plugins/deprecatedRemixPackagePlugin.ts

@@ -0,0 +1,29 @@
+import path from "path";
+import type { Plugin } from "esbuild";
+
+/**
+ * A plugin to warn users when importing from the deprecated `remix` package
+ */
+export function deprecatedRemixPackagePlugin(
+  onWarning?: (warning: string, key: string) => void
+): Plugin {
+  return {
+    name: "deprecated-remix-package",
+    setup(build) {
+      build.onResolve({ filter: /.*/ }, ({ importer, path: filePath }) => {
+        // Warn on deprecated imports from the remix package
+        if (filePath === "remix") {
+          let relativePath = path.relative(process.cwd(), importer);
+          let warningMessage =
+            `WARNING: All \`remix\` exports are considered deprecated as of v1.3.3. ` +
+            `Please change your import in "${relativePath}" to come from the respective ` +
+            `underlying \`@remix-run/*\` package. ` +
+            `Run \`npx @remix-run/dev@latest codemod replace-remix-magic-imports\` ` +
+            `to automatically migrate your code.`;
+          onWarning?.(warningMessage, importer);
+        }
+        return undefined;
+      });
+    },
+  };
+}

rollup.utils.js

@@ -1,10 +1,10 @@
-const fs = require("fs");
-const path = require("path");
 const babel = require("@rollup/plugin-babel").default;
-const nodeResolve = require("@rollup/plugin-node-resolve").default;
-const fse = require("fs-extra");
 const { camelCase, upperFirst } = require("lodash");
 const copy = require("rollup-plugin-copy");
+const fs = require("fs");
+const fse = require("fs-extra");
+const nodeResolve = require("@rollup/plugin-node-resolve").default;
+const path = require("path");
 
 const REPO_ROOT_DIR = __dirname;
 
@@ -191,28 +191,11 @@ function magicExportsPlugin({ packageName, version }) {
         banner +
         "\n" +
         "'use strict';\n" +
-        "Object.defineProperty(exports, '__esModule', { value: true });\n\n";
+        "Object.defineProperty(exports, '__esModule', { value: true });\n";
 
       if (magicExports.values) {
-        let deprecationFunctions =
-          // eslint-disable-next-line no-template-curly-in-string
-          "const getDeprecatedMessage = (symbol, packageName) => `All \\`remix\\` exports are considered deprecated as of v1.3.3. Please import \\`${symbol}\\` from \\`${packageName}\\` instead. Run \\`npx @remix-run/dev@latest codemod replace-remix-magic-imports\\` to automatically migrate your code.`;\n" +
-          "const warn = (fn, message) => (...args) => {\n" +
-          "  console.warn(message);\n" +
-          "  return fn(...args);\n" +
-          "};\n\n";
-
-        esmContents +=
-          `import * as ${moduleName} from '${packageName}';\n` +
-          deprecationFunctions;
-        esmContents += magicExports.values
-          .map(
-            (symbol) =>
-              `/** @deprecated Import \`${symbol}\` from \`${packageName}\` instead. */\n` +
-              `const ${symbol} = warn(${moduleName}.${symbol}, getDeprecatedMessage('${symbol}', '${packageName}'));\n`
-          )
-          .join("\n");
-        esmContents += `\nexport { ${magicExports.values.join(", ")} };\n`;
+        let exportList = magicExports.values.join(", ");
+        esmContents += `export { ${exportList} } from '${packageName}';\n`;
 
         tsContents += `import * as ${moduleName} from '${packageName}';\n\n`;
         tsContents += magicExports.values
@@ -223,17 +206,15 @@ function magicExportsPlugin({ packageName, version }) {
           )
           .join("\n");
 
-        cjsContents +=
-          `var ${moduleName} = require('${packageName}');\n` +
-          deprecationFunctions;
-        cjsContents += magicExports.values
-          .map(
-            (symbol) =>
-              `/** @deprecated Import \`${symbol}\` from \`${packageName}\` instead. */\n` +
-              `const ${symbol} = warn(${moduleName}.${symbol}, getDeprecatedMessage('${symbol}', '${packageName}'));\n` +
-              `exports.${symbol} = ${symbol};\n`
-          )
-          .join("\n");
+        let cjsModule = camelCase(packageName.slice("@remix-run/".length));
+        cjsContents += `var ${cjsModule} = require('${packageName}');\n`;
+        for (let symbol of magicExports.values) {
+          cjsContents +=
+            `Object.defineProperty(exports, '${symbol}', {\n` +
+            "  enumerable: true,\n" +
+            `  get: function () { return ${cjsModule}.${symbol}; }\n` +
+            "});\n";
+        }
       }
 
       if (magicExports.types) {