remix-run · F3n67u · May 19, 2022 · May 19, 2022 · MichaelDeBoey · May 19, 2022
diff --git a/integration/helpers/create-fixture.ts b/integration/helpers/create-fixture.ts
@@ -18,7 +18,7 @@ interface FixtureInit {
   buildStdio?: Writable;
   sourcemap?: boolean;
   files: { [filename: string]: string };
-  template?: "cf-template" | "deno-template" | "node-template";
+  template?: "cf-template" | "deno-template" | "node-template" | "node-javascript-template";
   setup?: "node" | "cloudflare";
 }
 

diff --git a/integration/helpers/node-javascript-template/.gitignore b/integration/helpers/node-javascript-template/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/integration/helpers/node-javascript-template/app/entry.client.jsx b/integration/helpers/node-javascript-template/app/entry.client.jsx
@@ -0,0 +1,4 @@
+import { RemixBrowser } from "@remix-run/react";
+import { hydrate } from "react-dom";
+
+hydrate(<RemixBrowser />, document);
diff --git a/integration/helpers/node-javascript-template/app/entry.server.jsx b/integration/helpers/node-javascript-template/app/entry.server.jsx
@@ -0,0 +1,20 @@
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+
+export default function handleRequest(
+  request,
+  responseStatusCode,
+  responseHeaders,
+  remixContext
+) {
+  let markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}
diff --git a/integration/helpers/node-javascript-template/app/root.jsx b/integration/helpers/node-javascript-template/app/root.jsx
@@ -0,0 +1,31 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export const meta = () => ({
+  charset: "utf-8",
+  title: "New Remix App",
+  viewport: "width=device-width,initial-scale=1",
+});
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
diff --git a/integration/helpers/node-javascript-template/jsconfig.json b/integration/helpers/node-javascript-template/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    }
+  }
+}
diff --git a/integration/helpers/node-javascript-template/package.json b/integration/helpers/node-javascript-template/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "remix-template-node-javascript",
+  "private": true,
+  "description": "",
+  "license": "",
+  "sideEffects": false,
+  "scripts": {
+    "build": "node ../../../build/node_modules/@remix-run/dev/cli.js build",
+    "dev": "node ../../../build/node_modules/@remix-run/dev/cli.js dev",
+    "start": "node ../../../build/node_modules/@remix-run/serve/cli.js build"
+  },
+  "dependencies": {
+    "@remix-run/node": "0.0.0-local-version",
+    "@remix-run/react": "0.0.0-local-version",
+    "@remix-run/serve": "0.0.0-local-version",
+    "react": "0.0.0-local-version",
+    "react-dom": "0.0.0-local-version"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "0.0.0-local-version"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}
diff --git a/integration/helpers/node-javascript-template/public/favicon.ico b/integration/helpers/node-javascript-template/public/favicon.ico
diff --git a/integration/helpers/node-javascript-template/remix.config.js b/integration/helpers/node-javascript-template/remix.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('@remix-run/dev').AppConfig}
+ */
+module.exports = {
+  ignoredRouteFiles: ["**/.*"],
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "build/index.js",
+  // publicPath: "/build/",
+};
diff --git a/integration/jsconfig-paths-test.ts b/integration/jsconfig-paths-test.ts
@@ -0,0 +1,105 @@
+import { test, expect } from "@playwright/test";
+
+import { createFixture, js, json, mdx } from "./helpers/create-fixture";
+import type { Fixture } from "./helpers/create-fixture";
+
+let fixture: Fixture;
+
+test.beforeAll(async () => {
+  fixture = await createFixture({
+    template: 'node-javascript-template',
+    files: {
+      "app/components/my-lib/index.js": js`
+        export const pizza = "this is a pizza";
+      `,
+
+      "app/routes/index.jsx": js`
+        import { pizza } from "@mylib";
+        import { json } from "@remix-run/node";
+        import { useLoaderData, Link } from "@remix-run/react";
+
+        export function loader() {
+          return json(pizza);
+        }
+
+        export default function Index() {
+          let data = useLoaderData();
+          return (
+            <div>
+              {data}
+            </div>
+          )
+        }
+      `,
+
+      "app/routes/tilde-alias.jsx": js`
+        import { pizza } from "~/components/my-lib";
+        import { json } from "@remix-run/node";
+        import { useLoaderData, Link } from "@remix-run/react";
+
+        export function loader() {
+          return json(pizza);
+        }
+
+        export default function Index() {
+          let data = useLoaderData();
+          return (
+            <div>
+              {data}
+            </div>
+          )
+        }
+      `,
+
+      "app/components/component.jsx": js`
+        export function PizzaComponent() {
+          return <span>this is a pizza</span>
+        }
+      `,
+
+      "app/routes/mdx.mdx": mdx`
+        ---
+        meta:
+          title: My First Post
+          description: Isn't this awesome?
+        headers:
+          Cache-Control: no-cache
+        ---
+
+        import { PizzaComponent } from "@component";
+
+        # Hello MDX!
+
+        This is my first post.
+
+        <PizzaComponent />
+      `,
+
+      "jsconfig.json": json({
+        compilerOptions: {
+          baseUrl: ".",
+          paths: {
+            "~/*": ["./app/*"],
+            "@mylib": ["./app/components/my-lib/index"],
+            "@component": ["./app/components/component.jsx"],
+          },
+        },
+      }),
+    },
+  });
+});
+
+test("import internal library via ~ alias", async () => {
+  let response = await fixture.requestDocument("/tilde-alias");
+  expect(await response.text()).toMatch("this is a pizza");
+});
+
+test("import internal library via alias other than ~", async () => {
+  let response = await fixture.requestDocument("/");
+  expect(await response.text()).toMatch("this is a pizza");
+});
+
+test("works for mdx files", async () => {
+  let response = await fixture.requestDocument("/mdx");
+  expect(await response.text()).toMatch("this is a pizza");
+});
diff --git a/integration/path-mapping-test.ts → integration/tsconfig-paths-test.ts b/integration/path-mapping-test.ts → integration/tsconfig-paths-test.ts