generouted - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

 {
   "name": "generouted",
-  "version": "1.0.0",
-  "description": "Generated file-based routes for React Location and Vite",
+  "version": "1.1.0",
+  "description": "Generated routes using React Location and Vite",
   "author": "Omar Elhawary <[e-mail]> (https://omarelhawary.me)",
@@ -28,10 +28,10 @@ "license": "MIT",
   "devDependencies": {
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "prettier": "^2.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-location": "^3.3.4",
-    "typescript": "^4.5.5",
-    "vite": "^2.7.13"
+    "typescript": "^4.6.3",
+    "vite": "^2.9.1"
   },
@@ -49,3 +49,3 @@ "peerDependencies": {
   },
-  "readme": "# Generouted\n"
+  "readme": "# Generouted\n\n**Gene**rate**d** **route**s using [React Location](https://react-location.tanstack.com) and [Vite](https://vitejs.dev)\n\n## Motivation\n\nVite is a next generation frontend tool and it is very fast, you can't go back xd. After discovering the possibility of accessing local project modules using Vite, I started writing a series about [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 I replaced React Router with React Location to support more features like data loaders and nested layouts that are inspired by [Remix](https://remix.run).\n\nThe final version of the series is now published as `generouted`.\n\n## How it works\n\n`generouted` is only one file that uses Vite APIs to list modules within `src/pages/` directory and iterates over them to build the routes passed to React Location.\n\n## Why to use it\n\n- Can be used with **any Vite project**\n- Declarative and **universal file-based routing** system\n- **Easier to migrated** when switching from or to Next.js\n\n## Features\n\n- **File-based routing** (Next.js conventions)\n- Route-based **code-splitting**\n- Routes **pre-loading**\n- Route-based **data loaders**\n- **Nested layouts** supporting data loaders\n\n## Usage\n\n### Installation\n\n```shell\nnpm install generouted\n# pnpm add generouted\n# yarn add generouted\n```\n\n### Setup\n\nWith a Vite and React project, render the `<Routes />` components from `generouted` directly or wrap it with other providers/components:\n\n#### React >= 17\n\n```tsx\nimport { render } from 'react-dom'\nimport { Routes } from 'generouted'\n\nconst container = document.getElementById('app')!\nrender(<Routes />, container)\n```\n\n#### React 18\n\n```tsx\nimport { createRoot } from 'react-dom/client'\nimport { Routes } from 'generouted'\n\nconst container = document.getElementById('app')!\ncreateRoot(container).render(<Routes />)\n```\n\n### Adding pages\n\nAdd your home page by creating `src/pages/index.tsx`:\n\n```tsx\n// src/pages/index.tsx\n\nexport default function Home() {\n  return <h1>Home</h1>\n}\n```\n\n## Examples\n\n- [Basic](./examples/basic)\n"
 }

readme.md

 # Generouted
+
+**Gene**rate**d** **route**s using [React Location](https://react-location.tanstack.com) and [Vite](https://vitejs.dev)
+
+## Motivation
+
+Vite is a next generation frontend tool and it is very fast, you can't go back xd. After discovering the possibility of accessing local project modules using Vite, I started writing a series about [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 I replaced React Router with React Location to support more features like data loaders and nested layouts that are inspired by [Remix](https://remix.run).
+
+The final version of the series is now published as `generouted`.
+
+## How it works
+
+`generouted` is only one file that uses Vite APIs to list modules within `src/pages/` directory and iterates over them to build the routes passed to React Location.
+
+## Why to use it
+
+- Can be used with **any Vite project**
+- Declarative and **universal file-based routing** system
+- **Easier to migrated** when switching from or to Next.js
+
+## Features
+
+- **File-based routing** (Next.js conventions)
+- Route-based **code-splitting**
+- Routes **pre-loading**
+- Route-based **data loaders**
+- **Nested layouts** supporting data loaders
+
+## Usage
+
+### Installation
+
+```shell
+npm install generouted
+# pnpm add generouted
+# yarn add generouted
+```
+
+### Setup
+
+With a Vite and React project, render the `<Routes />` components from `generouted` directly or wrap it with other providers/components:
+
+#### React >= 17
+
+```tsx
+import { render } from 'react-dom'
+import { Routes } from 'generouted'
+
+const container = document.getElementById('app')!
+render(<Routes />, container)
+```
+
+#### React 18
+
+```tsx
+import { createRoot } from 'react-dom/client'
+import { Routes } from 'generouted'
+
+const container = document.getElementById('app')!
+createRoot(container).render(<Routes />)
+```
+
+### Adding pages
+
+Add your home page by creating `src/pages/index.tsx`:
+
+```tsx
+// src/pages/index.tsx
+
+export default function Home() {
+  return <h1>Home</h1>
+}
+```
+
+## Examples
+
+- [Basic](./examples/basic)

src/index.d.ts

@@ -1,3 +0,1 @@
-import { Route } from 'react-location';
-export declare const routes: Route<import("react-location").DefaultGenerics>[];
 export declare const Routes: () => JSX.Element;

No alert changes

Improved metrics

Total package byte prevSize

41324

increased by126.63%

Number of package files

17

increased by142.86%

Lines of code

142

increased by47.92%

Number of lines in readme file

78

increased by3800%

No dependency changes