feat: remix optional segments

.changeset/moody-pants-own.md

@@ -0,0 +1,25 @@
+---
+"@remix-run/dev": minor
+---
+
+feat: remix optional segments  
+
+Allows for the creation of optional route segments by using parenthesis. For example:
+Creating the following file routes in remix `/($lang)/about`
+this will match the following routes 
+```
+/en/about
+/fr/about
+/about
+```
+
+helpful for optional language paths.
+
+Another example `/(one)/($two)/(three).($four)` file routing would match
+```
+/
+/one
+/one/param1
+/one/param1/three
+/one/param1/three/param2
+```

contributors.yml

@@ -253,6 +253,7 @@
 - lili21
 - lionotm
 - liranm
+- lordofthecactus
 - lpsinger
 - lswest
 - lucasdibz

packages/remix-dev/__tests__/routesConvention-test.ts

@@ -36,6 +36,47 @@ describe("createRoutePath", () => {
       ["[index]", "index"],
       ["test/inde[x]", "test/index"],
       ["[i]ndex/[[].[[]]", "index/[/[]"],
+
+      // Optional segment routes
+      ["(routes)/$", "routes?/*"],
+      ["(routes)/($)", "routes?/*?"], // TODO: Fails, do we want to allow this?
+      ["(routes)/(sub)/$", "routes?/sub?/*"],
+      ["(routes).(sub)/$", "routes?/sub?/*"],
+      ["(routes.sub)/$", "routes?/sub?/*"], // TODO: Fails, do we want to allow this?
+      ["(routes)/($slug)", "routes?/:slug?"],
+      ["(routes)/sub/($slug)", "routes?/sub/:slug?"],
+      ["(routes).sub/($slug)", "routes?/sub/:slug?"],
+      ["($)", "*?"], // TODO: Fails, do we want to allow this?
+      ["(nested)/$", "nested?/*"],
+      ["(flat).$", "flat?/*"],
+      ["($slug)", ":slug?"],
+      ["(nested)/($slug)", "nested?/:slug?"],
+      ["(flat).($slug)", "flat?/:slug?"],
+      ["flat.(sub)", "flat/sub?"],
+      ["(nested)/(index)", "nested?"], // Fails with `"flat?/index?"`
+      ["(flat).(index)", "flat?"], // Fails with `"flat?/index?"`
+      ["(index)", undefined], // Fails with `"index?"`"
+      ["(__layout)/(index)", undefined], // Fails with __layout?/index?
+      ["__layout/(test)", "test?"],
+      ["__layout.(test)", "test?"],
+      ["__layout/($slug)", ":slug?"],
+      ["(nested)/__layout/($slug)", "nested?/:slug?"],
+      ["($slug[.]json)", ":slug.json?"],
+      ["(sub)/([sitemap.xml])", "sub?/sitemap.xml?"],
+      ["(sub)/[(sitemap.xml)]", "sub?/sitemap.xml?"], // TODO should this have been sub?/(sitemap.xml)
+      ["(posts)/($slug)/([image.jpg])", "posts?/:slug?/image.jpg?"],
+      [
+        "($[$dollabills]).([.]lol)[/](what)/([$]).($)", // TODO outputs ":$dollabills?/.lol?/what?/$?/:?"
+        ":$dollabills/.lol/what/$/*",
+      ],
+      ["(sub).([[])", "sub?/[?"],
+      ["(sub).(])", "sub?/)?"],
+      ["(sub).([([])])", "sub/[]"], // Fails with "sub?/([)]?"
+      ["(sub).([[])", "sub?/[?"],
+      ["(beef])", "beef]?"],
+      ["([index])", "index?"],
+      ["(test)/(inde[x])", "test?/index?"],
+      ["([i]ndex)/([[]).([[]])", "index?/[?/[]?"],
     ];
 
     for (let [input, expected] of tests) {

packages/remix-dev/config/routesConvention.ts

@@ -190,7 +190,20 @@ export function createRoutePath(partialRouteId: string): string | undefined {
     result = result.replace(/\/?index$/, "");
   }
 
-  return result || undefined;
+  return generateOptionalDynamicRoutes(result) || undefined;
+}
+
+function generateOptionalDynamicRoutes(routeId: string) {
+  let segments = routeId.split("/");
+
+  let newSegments = [];
+  for (let segment of segments) {
+    console.log(segment, "segment");
+    console.log(segment.replace(/^\((.+)\)$/, "$1"));
+    newSegments.push(segment.replace(/^\((.+)\)$/, "$1?"));
+  }
+
+  return newSegments.join("/");
 }
 
 function findParentRouteId(