feat(remix-dev): add .node file support for Node based platforms

contributors.yml

@@ -38,6 +38,7 @@
 - axel-habermaier
 - BasixKOR
 - BenMcH
+- benwis
 - bmarvinb
 - bmontalvo
 - bogas04

docs/guides/native-node-modules.md

@@ -0,0 +1,31 @@
+---
+title: Native Node Modules
+toc: false
+---
+
+# Native Node Modules
+
+Some node packages contain a binary `.node` file that contains code that is usually written in another language and that interacts with Node through the [Node-API](https://nodejs.org/api/n-api.html) foreign function interface. This can offer substantial benefits in speed, easy concurrency/multithreading, access to native interfaces, and/or interoperability with other languages. A popular example is the `Sharp` image processing library, which uses `libvips`, a C library, to increase performance.
+
+## Limitations
+
+Because these files use the Node FFI, they will only run on servers or edge environments that run Node.
+
+The browser does not run Node, so their use is limited to Loaders and Actions, or other server side code.
+
+# Setup
+
+Remix should work with these files out of the box, but you'll want to export the package that contains them from a `.server.{ts,js}` file and then import them from that file in your loaders and actions. This prevents them from being included in the browser bundle and causing errors.
+
+## Creating Native Node Modules
+
+If you're interested in creating a package with Node modules, look for a package that interacts with the Node API in your language of choice. 
+Here are some examples:
+
+*Rust:*
+- [napi-rs](https://napi.rs/) 
+- [neon](https://neon-bindings.com/)
+
+*C++* 
+- [Node Addon API](https://github.com/nodejs/node-addon-api).
+

packages/remix-dev/compiler.ts

@@ -17,6 +17,7 @@ import { loaders } from "./compiler/loaders";
 import { browserRouteModulesPlugin } from "./compiler/plugins/browserRouteModulesPlugin";
 import { emptyModulesPlugin } from "./compiler/plugins/emptyModulesPlugin";
 import { mdxPlugin } from "./compiler/plugins/mdx";
+import { nativeNodeModulesPlugin } from "./compiler/plugins/nativeNodeModules";
 import type { AssetsManifestPromiseRef } from "./compiler/plugins/serverAssetsManifestPlugin";
 import { serverAssetsManifestPlugin } from "./compiler/plugins/serverAssetsManifestPlugin";
 import { serverBareModulesPlugin } from "./compiler/plugins/serverBareModulesPlugin";
@@ -261,7 +262,7 @@ export async function watch(
     });
 
   return async () => {
-    await watcher.close().catch(() => {});
+    await watcher.close().catch(() => { });
     disposeBuilders();
   };
 }
@@ -424,6 +425,9 @@ function createServerBuild(
   if (config.serverPlatform !== "node") {
     plugins.unshift(NodeModulesPolyfillPlugin());
   }
+  if (config.serverPlatform == "node") {
+    plugins.unshift(nativeNodeModulesPlugin());
+  }
 
   return esbuild
     .build({
@@ -435,17 +439,17 @@ function createServerBuild(
       conditions: isCloudflareRuntime
         ? ["worker"]
         : isDenoRuntime
-        ? ["deno", "worker"]
-        : undefined,
+          ? ["deno", "worker"]
+          : undefined,
       platform: config.serverPlatform,
       format: config.serverModuleFormat,
       treeShaking: true,
       minify: options.mode === BuildMode.Production && isCloudflareRuntime,
       mainFields: isCloudflareRuntime
         ? ["browser", "module", "main"]
         : config.serverModuleFormat === "esm"
-        ? ["module", "main"]
-        : ["main", "module"],
+          ? ["module", "main"]
+          : ["main", "module"],
       target: options.target,
       inject: config.serverBuildTarget === "deno" ? [] : [reactShim],
       loader: loaders,
@@ -508,6 +512,15 @@ async function writeServerBuildResult(
       let contents = Buffer.from(file.contents).toString("utf-8");
       contents = contents.replace(/"route:/gm, '"');
       await fse.writeFile(file.path, contents);
+    } else if (file.path.endsWith(".node")) {
+      // Check for and make _assets folder if it does not exist in the directory
+      // I suspect this is usually done elsewhere
+      let parentFolderPath = file.path.slice(0, file.path.lastIndexOf("/"))
+      if (!fse.existsSync(parentFolderPath)) {
+        fse.mkdirSync(parentFolderPath, { recursive: true });
+      }
+
+      await fse.writeFile(file.path, file.contents)
     }
   }
 }

packages/remix-dev/compiler/loaders.ts

@@ -19,6 +19,7 @@ export const loaders: { [ext: string]: esbuild.Loader } = {
   ".mdx": "jsx",
   ".mp3": "file",
   ".mp4": "file",
+  ".node": "file",
   ".ogg": "file",
   ".otf": "file",
   ".png": "file",

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

@@ -0,0 +1,42 @@
+import type esbuild from "esbuild";
+import * as path from "path";
+// See https://github.com/evanw/esbuild/issues/1051#issuecomment-806325487
+export function nativeNodeModulesPlugin(): esbuild.Plugin {
+    return {
+        name: 'native-node-modules',
+        setup(build) {
+            // If a ".node" file is imported within a module in the "file" namespace, resolve
+            // it to an absolute path and put it into the "node-file" virtual namespace.
+            build.onResolve({ filter: /\.node$/, namespace: 'file' }, args => ({
+                path: require.resolve(args.path, { paths: [args.resolveDir] }),
+                namespace: 'node-file',
+            }))
+
+            // Files in the "node-file" virtual namespace call "require()" on the
+            // path from esbuild of the ".node" file in the output directory.
+            build.onLoad({ filter: /.*/, namespace: 'node-file' }, args => ({
+                contents: `
+        import * as path from "path";
+        import modulePath from ${JSON.stringify(args.path)}
+
+        // Esbuild gives a package path, so we want to convert to an absolute one
+        let projectRoot = "${path.resolve()}";
+        let absolutePath = path.join(projectRoot, modulePath)
+
+        try { module.exports = require(absolutePath) }
+        catch (error){
+          console.error(error)
+        }
+      `,
+            }))
+
+            // If a ".node" file is imported within a module in the "node-file" namespace, put
+            // it in the "file" namespace where esbuild's default loading behavior will handle
+            // it. It is already an absolute path since we resolved it to one above.
+            build.onResolve({ filter: /\.node$/, namespace: 'node-file' }, args => ({
+                path: args.path,
+                namespace: 'file',
+            }))
+        },
+    }
+}