generouted - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

package.json

 {
   "name": "generouted",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Generated file-based routes for React Location and Vite",
@@ -31,8 +31,8 @@ "author": "Omar Elhawary <[e-mail]> (https://omarelhawary.me)",
   "devDependencies": {
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.1",
-    "prettier": "^2.6.2",
-    "react-location": "^3.3.4",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.5"
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "prettier": "^2.7.1",
+    "@tanstack/react-location": "^3.7.4",
+    "typescript": "^4.7.4",
+    "vite": "^2.9.14"
   },
@@ -42,3 +42,3 @@ "peerDependencies": {
     "react-dom": ">=17",
-    "react-location": ">=3",
+    "@tanstack/react-location": ">=3",
     "vite": ">=2"
@@ -50,4 +50,3 @@ },
     "format": "prettier --write 'src/**/*.{ts,tsx}'"
-  },
-  "readme": "<br>\n<p align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/oedotme/generouted/main/public/assets/icons/logo.svg\" alt=\"Generouted · Generated Routes\" width=\"180\"/>\n</p>\n<p align=\"center\">\n  <a href=\"https://npmjs.com/package/generouted\">\n    <img src=\"https://img.shields.io/npm/v/generouted.svg\" alt=\"generouted on npm\">\n  </a>\n</p>\n<br>\n\n# Generouted\n\n**Gene**rate**d** file-based **route**s for [React Location](https://react-location.tanstack.com) and [Vite](https://vitejs.dev)\n\n<br>\n\n## Motivation\n\nI enjoyed working with file-based routing since started using it with Next.js. After trying the same concept with Vite, I started a series of blog posts covering [client-side file-based routing with React Router](https://omarelhawary.me/blog/file-based-routing-with-react-router) inspired by [Next.js](https://nextjs.org). Later, in the last two posts, I replaced React Router with React Location to add more features like data loaders and nested layouts that are inspired by [Remix](https://remix.run). The final version covered in the blog posts is now published as `generouted`, see all the [available features](#features) below.\n\n## How\n\n`generouted` is only one _source code_ file, with **no dependencies or build step**. It uses [Vite's glob import API](https://vitejs.dev/guide/features.html#glob-import) to list the modules within `src/pages` directory to be used as React Location's routes.\n\n## Why\n\n- **Declarative and universal file-based routing** system\n- **Automatically update routes** by adding/removing/renaming files at the `src/pages` directory\n- Can be used with **any Vite project**\n- **Easier to migrate** when switching from or to Next.js\n\n<br>\n\n## Features\n\n- [File-based routing](#file-based-routing)\n- [Route-based code-splitting and pre-loading](#route-based-code-splitting-and-pre-loading)\n- [Route-based data loaders](#route-based-data-loaders)\n- [Nested layouts](#nested-layouts)\n\n### File-based routing\n\n- [Next.js inspired](https://nextjs.org/docs/routing/introduction)\n- Supports `.tsx` extensions\n- Custom app at `src/pages/_app.tsx` _(optional)_\n- Custom 404 page at `src/pages/404.tsx` _(optional)_\n- Navigation between routes using [React Location's `<Link />` component](https://react-location.tanstack.com/docs/api#link)\n\n#### Conventions\n\n##### Index routes\n\n- `src/pages/index.tsx` **→** `/`\n- `src/pages/posts/index.tsx` **→** `/posts`\n\n##### Nested routes\n\n- `src/pages/posts/2022/index.tsx` **→** `/posts/2022`\n- `src/pages/posts/2022/resolutions.tsx` **→** `/posts/2022/resolutions`\n\n##### Dynamic routes\n\n- `src/pages/posts/[slug].tsx` **→** `/posts/:slug`\n- `src/pages/posts/[slug]/tags.tsx` **→** `/posts/:slug/tags`\n- `src/pages/posts/[...all].tsx` **→** `/posts/*`\n\n### Route-based code-splitting and pre-loading\n\n- Includes routes components and data loaders\n\n### Route-based data loaders\n\n- [Remix inspired](https://remix.run/docs/en/v1/guides/data-loading)\n- By exporting a named function `loader` from a page: `export const loader = async () => ({...})`\n- [React Location's route loaders guide](https://react-location.tanstack.com/guides/route-loaders)\n\n### Nested layouts\n\n- [Remix inspired](https://remix.run/docs/en/v1/guides/routing#what-is-nested-routing)\n- Adding a layout for a group of routes by naming a file same as their parent directory\n- Supports data loaders\n- Requires React Location's `<Outlet />` component to render its children\n\n#### Conventions\n\n##### Enable for all directory routes\n\nAdd a layout for all the routes within `src/pages/posts` directory by adding `src/pages/posts.tsx` layout:\n\n- `src/pages/posts/index.tsx` **→** `/posts`\n- `src/pages/posts/2022/index.tsx` **→** `/posts/2022`\n- `src/pages/posts/[slug].tsx` **→** `/posts/:slug`\n\n##### Exclude a route - URL nesting without layout nesting\n\nReplace regular file name with directory nesting by adding dots, it will be converted to forward slashes:\n\n- `src/pages/posts.nested.as.url.not.layout.tsx` **→** `/posts/nested/as/url/not/layout`\n\n<br>\n\n## Getting started\n\nIf you have an existing Vite project setup with React you can skip this section and go to the [installation section](#installation).\n\nOtherwise you can [scaffold a new Vite project](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) with React and TypeScript:\n\n```shell\nnpm create vite@latest react-file-based-routing -- --template react-ts   # npm 7+\n```\n\n## Installation\n\n```shell\nnpm install generouted react-location\n```\n\n## Usage\n\nRender the `<Routes />` component from `generouted` at the app entry _(you'd mostly wrap it with other providers/components)_:\n\n```tsx\n// src/main.tsx\n\nimport { render } from 'react-dom'\nimport { Routes } from 'generouted'\n\nconst container = document.getElementById('app')!\nrender(<Routes />, container)\n```\n\n### Adding pages\n\nAdd the home page by creating a new file `src/pages/index.tsx` **→** `/`, then export a default component:\n\n```tsx\nexport default function Home() {\n  return <h1>Home</h1>\n}\n```\n\n<br>\n\n## Examples\n\n- [Basic](./examples/basic)\n- [Data loaders](./examples/data-loaders)\n- [Nested layouts](./examples/nested-layouts)\n\n<br>\n\n## API\n\n### `<Routes />`\n\nThat's the only export at the moment. Could add some customization options in the future.\n\n<br>\n\n## License\n\nMIT\n"
+  }
 }

readme.md

@@ -116,3 +116,3 @@ <br>
 ```shell
-npm install generouted react-location
+npm install generouted @tanstack/react-location
 ```
@@ -119,0 +119,0 @@

src/index.d.ts

@@ -1,2 +0,2 @@
-import { RouterProps } from 'react-location'
+import { RouterProps } from '@tanstack/react-location'
 export declare const Routes: (config?: Omit<RouterProps, 'location' | 'children' | 'routes'>) => JSX.Element

No alert changes

Worsened metrics

Total package byte prevSize

10521

decreased by-34%

No dependency changes