feat(fs-router): change dollar to at in special filenames (#2269)

vaadin · Mar 27, 2024 · f24b157 · f24b157
1 parent 230ed13
commit f24b157
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/packages/ts/file-router/src/vite-plugin/collectRoutesFromFS.ts b/packages/ts/file-router/src/vite-plugin/collectRoutesFromFS.ts
@@ -50,9 +50,9 @@ const warningFor = ['.ts', '.js'];
 /**
  * Collect route metadata from the file system and build a route tree.
  *
- * It accepts files that start with `$` as special files.
- * - `$layout` contains a component that wraps the child components.
- * - `$index` contains a component that will be used as the index page of the directory.
+ * It accepts files that start with `@` as special files.
+ * - `@layout` contains a component that wraps the child components.
+ * - `@index` contains a component that will be used as the index page of the directory.
  *
  * It accepts files that start with `_` as private files. They will be ignored.
  *
@@ -76,18 +76,18 @@ export default async function collectRoutesFromFS(
       const file = new URL(d.name, dir);
       const name = basename(d.name, extname(d.name));
 
-      if (name.startsWith('$')) {
-        if (name === '$layout') {
+      if (name.startsWith('@')) {
+        if (name === '@layout') {
           layout = file;
-        } else if (name === '$index') {
+        } else if (name === '@index') {
           children.push({
             path: '',
             file,
             children: [],
           });
         } else {
           throw new Error(
-            'Symbol "$" is reserved for special directories and files; only "$layout" and "$index" are allowed',
+            'Symbol "@" is reserved for special directories and files; only "@layout" and "@index" are allowed',
           );
         }
       } else if (!name.startsWith('_')) {

diff --git a/packages/ts/file-router/test/utils.tsx b/packages/ts/file-router/test/utils.tsx
@@ -42,7 +42,7 @@ export async function createTestingRouteFiles(dir: URL): Promise<void> {
   ]);
   await Promise.all([
     appendFile(
-      new URL('profile/account/$layout.tsx', dir),
+      new URL('profile/account/@layout.tsx', dir),
       "export const config = { title: 'Account' };\nexport default function AccountLayout() {};",
     ),
     appendFile(new URL('profile/account/security/password.jsx', dir), 'export default function Password() {};'),
@@ -55,7 +55,7 @@ export async function createTestingRouteFiles(dir: URL): Promise<void> {
       new URL('profile/account/security/two-factor-auth-ignored.ts', dir),
       'export default function TwoFactorAuthIgnored() {};',
     ),
-    appendFile(new URL('profile/friends/$layout.tsx', dir), 'export default function FriendsLayout() {};'),
+    appendFile(new URL('profile/friends/@layout.tsx', dir), 'export default function FriendsLayout() {};'),
     appendFile(
       new URL('profile/friends/list.jsx', dir),
       "export const config = { title: 'List' };\nexport default function List() {};",
@@ -69,7 +69,7 @@ export async function createTestingRouteFiles(dir: URL): Promise<void> {
       "export const config = { title: 'User' };\nexport default function User() {};",
     ),
     appendFile(
-      new URL('profile/$index.tsx', dir),
+      new URL('profile/@index.tsx', dir),
       "export const config = { title: 'Profile' };\nexport default function Profile() {};",
     ),
     appendFile(new URL('profile/index.css', dir), ''),
@@ -103,10 +103,10 @@ export function createTestingRouteMeta(dir: URL): RouteMeta {
       {
         path: 'profile',
         children: [
-          { path: '', file: new URL('profile/$index.tsx', dir), children: [] },
+          { path: '', file: new URL('profile/@index.tsx', dir), children: [] },
           {
             path: 'account',
-            layout: new URL('profile/account/$layout.tsx', dir),
+            layout: new URL('profile/account/@layout.tsx', dir),
             children: [
               {
                 path: 'security',
@@ -127,7 +127,7 @@ export function createTestingRouteMeta(dir: URL): RouteMeta {
           },
           {
             path: 'friends',
-            layout: new URL('profile/friends/$layout.tsx', dir),
+            layout: new URL('profile/friends/@layout.tsx', dir),
             children: [
               {
                 path: 'list',

diff --git a/packages/ts/file-router/test/vite-plugin/createRoutesFromMeta.spec.ts b/packages/ts/file-router/test/vite-plugin/createRoutesFromMeta.spec.ts
@@ -27,13 +27,13 @@ describe('@vaadin/hilla-file-router', () => {
 
       expect(generated).to.equal(`import { createRoute } from "@vaadin/hilla-file-router/runtime.js";
 import * as Page0 from "../views/nameToReplace.js";
-import * as Page1 from "../views/profile/$index.js";
+import * as Page1 from "../views/profile/@index.js";
 import * as Page2 from "../views/profile/account/security/password.js";
 import * as Page3 from "../views/profile/account/security/two-factor-auth.js";
-import * as Layout5 from "../views/profile/account/$layout.js";
+import * as Layout5 from "../views/profile/account/@layout.js";
 import * as Page6 from "../views/profile/friends/list.js";
 import * as Page7 from "../views/profile/friends/{user}.js";
-import * as Layout8 from "../views/profile/friends/$layout.js";
+import * as Layout8 from "../views/profile/friends/@layout.js";
 import * as Page11 from "../views/test/{{optional}}.js";
 import * as Page12 from "../views/test/{...wildcard}.js";
 import * as Page13 from "../views/test/no-default-export.js";
@@ -46,7 +46,7 @@ export default routes;
       const metaWithDuplicatedPaths = createTestingRouteMeta(new URL('./views/', dir));
       metaWithDuplicatedPaths.children.push({
         path: 'profile',
-        file: new URL('profile/$index.tsx', dir),
+        file: new URL('profile/@index.tsx', dir),
         children: [],
       });
       const generated = createRoutesFromMeta(metaWithDuplicatedPaths, runtimeUrls);