TmRAaEx Simple React Framework

Version: 1.1.6

This is a simple React framework primarily created for personal use, but feel free to use it if it suits your needs!

Changes:

• Made rootLayout acctualy get passed to other routes. But now lyour nesting dosnt work. Work in progress

• Now you can have a root layout and create layouts inside subfolders BUT it will replace the root layout for that folder

• Now the default page file inside a folder an also be named "page" if that is prefered

• Rootlayout works now but child layouts dont

Features

• File-based routing: Automatically generate routes based on the file and folder structure.

⚠️ Important!

Vite Configuration

Make sure your vite.config.ts includes the following configuration:

// vite.config.ts
export default defineConfig({
  build: {
    target: "es2022", //or later
  },
  esbuild: {
    target: "es2022", //or later
  },
  optimizeDeps: {
    esbuildOptions: {
      target: "es2022", //or later
    },
  },
});

This is necessary to avoid the following error:

X [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

Usage

Once the configuration is set up, you can use the framework in your React app like this:

// App.tsx
import { fileRouter } from "@tmraaex/simpleframework";
import "./app.css";
import { RouterProvider } from "react-router";

const App = () => {
  return (
    <div>
      <RouterProvider router={fileRouter} />
    </div>
  );
};

export default App;

File Naming Convention

Page Files

All "page files" must be placed inside the src/pages directory to be properly recognized. And be default export

Example:

// src/pages/index.tsx
export default function Home() {
  return <>Home page</>;
}

NOTE:

Because the router uses dynamic imports (import.meta.glob), your components are automatically discovered.

Some Editors or tools such as Typescript or Eslint might give a warning like Unused default export Home This can safely be ignored.

• index.tsx: The default page file for a given folder. For example:

/src/pages/index.tsx will be displayed at http://yoursite.com/.

/src/pages/products/index.tsx will be the default page for the /products route.

• Folder Structure:

You can create folders inside /src/pages to group multiple pages under the same root route. For example, you can have multiple pages inside /src/pages/products/.

• layout File:

Note: this currently only works for "sub folders" inside /src/pages like /src/pages/dashboard working on fix for RootLayout

If you name a file layout.tsx, it will be treated as the layout component for that folder and used for all the nested pages.

• Error file:

If you create /src/pages/error.tsx it will be used as the error page for all routes on your site. Recommended in production!

• Slug Files:

If a file is named with square brackets (e.g., [yourSlug].tsx), it will be treated as a dynamic route (slug). The value of the slug can be retrieved using useParams() from react-router:

Example:

import { useParams } from "react-router";
const { yourSlug } = useParams();

Requirements

• React (Vite)

• react-router