Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(remix-dev): add warning when future.v2_routeConvention is not enabled #5606

Merged
merged 6 commits into from
Mar 6, 2023
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/lazy-dots-sip.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"remix": patch
"@remix-run/dev": patch
---

add warning when `future.v2_routeConvention` is not enabled
47 changes: 47 additions & 0 deletions integration/flat-routes-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,53 @@ test.describe("flat routes", () => {
}
});

test.describe("warns when v1 routesConvention is used", () => {
let buildStdio = new PassThrough();
let buildOutput: string;

let originalConsoleLog = console.log;
let originalConsoleWarn = console.warn;
let originalConsoleError = console.error;

test.beforeAll(async () => {
console.log = () => {};
console.warn = () => {};
console.error = () => {};
await createFixtureProject({
buildStdio,
files: {
"routes/index.tsx": js`
export default function () {
return <p>routes/index</p>;
}
`,
},
});

let chunks: Buffer[] = [];
buildOutput = await new Promise<string>((resolve, reject) => {
buildStdio.on("data", (chunk) => chunks.push(Buffer.from(chunk)));
buildStdio.on("error", (err) => reject(err));
buildStdio.on("end", () =>
resolve(Buffer.concat(chunks).toString("utf8"))
);
});
});

test.afterAll(() => {
console.log = originalConsoleLog;
console.warn = originalConsoleWarn;
console.error = originalConsoleError;
});

test("warns about conflicting routes", () => {
console.log(buildOutput);
expect(buildOutput).toContain(
`The old route convention has been deprecated in favor of "flat routes". Please enable it via your remix.config https://remix.run/docs/en/main/file-conventions/route-files-v2`
);
});
});

test.describe("emits warnings for route conflicts", async () => {
let buildStdio = new PassThrough();
let buildOutput: string;
Expand Down
5 changes: 3 additions & 2 deletions integration/hmr-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
appServerPort: options.appServerPort,
},
unstable_tailwind: true,
v2_routeConvention: true,
},
files: {
"package.json": `
Expand Down Expand Up @@ -124,7 +125,7 @@ let fixture = (options: { port: number; appServerPort: number }) => ({
);
}
`,
"app/routes/index.tsx": `
"app/routes/_index.tsx": `
import { useLoaderData } from "@remix-run/react";
export default function Index() {
const t = useLoaderData();
Expand Down Expand Up @@ -235,7 +236,7 @@ test("HMR", async ({ page }) => {
await counter.click();
await page.waitForSelector(`#root-counter:has-text("inc 1")`);

let indexPath = path.join(projectDir, "app", "routes", "index.tsx");
let indexPath = path.join(projectDir, "app", "routes", "_index.tsx");
let originalIndex = fs.readFileSync(indexPath, "utf8");
let counterPath = path.join(projectDir, "app", "components", "counter.tsx");
let originalCounter = fs.readFileSync(counterPath, "utf8");
Expand Down
5 changes: 4 additions & 1 deletion packages/remix-dev/__tests__/create-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import stripAnsi from "strip-ansi";

import { run } from "../cli/run";
import { server } from "./msw";
import { flatRoutesWarning } from "../config";

beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
afterAll(() => server.close());
Expand Down Expand Up @@ -347,7 +348,9 @@ describe("the create command", () => {
"--no-typescript",
]);
expect(output.trim()).toBe(
getOptOutOfInstallMessage() +
flatRoutesWarning +
"\n\n" +
getOptOutOfInstallMessage() +
"\n\n" +
getSuccessMessage(path.join("<TEMP_DIR>", "template-to-js"))
);
Expand Down
12 changes: 9 additions & 3 deletions packages/remix-dev/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -560,9 +560,14 @@ export async function readConfig(
root: { path: "", id: "root", file: rootRouteFile },
};

let routesConvention = appConfig.future?.v2_routeConvention
? flatRoutes
: defineConventionalRoutes;
let routesConvention: typeof flatRoutes;

if (appConfig.future?.v2_routeConvention) {
routesConvention = flatRoutes;
} else {
warnOnce(flatRoutesWarning, "v2_routeConvention");
routesConvention = defineConventionalRoutes;
}

if (fse.existsSync(path.resolve(appDirectory, "routes"))) {
let conventionalRoutes = routesConvention(
Expand Down Expand Up @@ -727,3 +732,4 @@ let listFormat = new Intl.ListFormat("en", {
});

export let serverBuildTargetWarning = `The "serverBuildTarget" config option is deprecated. Use a combination of "publicPath", "serverBuildPath", "serverConditions", "serverDependenciesToBundle", "serverMainFields", "serverMinify", "serverModuleFormat" and/or "serverPlatform" instead.`;
export let flatRoutesWarning = `The old route convention has been deprecated in favor of "flat routes". Please enable it via your remix.config https://remix.run/docs/en/main/file-conventions/route-files-v2`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we prefix this with `⚠️ DEPRECATED: or something to make it stand out a bit more?

Suggested change
export let flatRoutesWarning = `The old route convention has been deprecated in favor of "flat routes". Please enable it via your remix.config https://remix.run/docs/en/main/file-conventions/route-files-v2`;
export let flatRoutesWarning = `⚠️ DEPRECATED: The old nested folders route convention has been deprecated in favor of "flat routes. Please enable the new routing convention via the \`future.v2_routeConvention\` flag in your \`remix.config.js\` file. For more information, please see https://remix.run/docs/en/main/file-conventions/route-files-v2.`;

Eventually I'd love to see it in yellow via chalk or something but I know we have future CLI improvements in the pipeline so probably worth waiting for that before doing anything too wild.

Copy link
Contributor

@brophdawg11 brophdawg11 Mar 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we should also make sure we have a section in the new docs on "here's how to continue using the old nested folders version via defineRoutes"

Copy link
Collaborator Author

@mcansh mcansh Mar 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we should also make sure we have a section in the new docs on "here's how to continue using the old nested folders version via defineRoutes"

agreed, i ripped out the old convention as @mcansh/remix-v1-routes, but there may be further tweaking needed once #5649 and #5634 are done

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Eventually I'd love to see it in yellow via chalk or something but I know we have future CLI improvements in the pipeline so probably worth waiting for that before doing anything too wild.

we can do this if we either make all warnOnce uses yellow or an arg passed to it

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all uses of warnOnce could benefit from being yellow imo

  • sessions not being signed
  • cookies have expires setup
  • flat routes v2
  • serverBuildTarget