generouted - npm Package Compare versions

Comparing version 1.5.1 to 1.6.0

package.json

 {
   "name": "generouted",
-  "version": "1.5.1",
-  "description": "Generated file-based routes for React Location and Vite",
+  "version": "1.6.0",
+  "description": "Generated client-side file-based routes for Vite",
   "author": "Omar Elhawary <[e-mail]> (https://omarelhawary.me)",
@@ -11,3 +11,5 @@ "license": "MIT",
   "keywords": [
+    "actions",
     "code-splitting",
+    "data-loaders",
     "file-based-routing",
@@ -20,32 +22,70 @@ "generate",
     "react-location",
+    "react-router",
+    "react-router-dom",
     "router",
     "routes",
+    "solid",
+    "solid-router",
     "vite"
   ],
   "type": "module",
-  "main": "./src/index.tsx",
-  "exports": "./src/index.tsx",
-  "types": "./src/index.d.ts",
+  "exports": {
+    "./": {
+      "types": "./src/react-location.tsx",
+      "import": "./src/react-location.tsx"
+    },
+    "./react-location": {
+      "types": "./src/react-location.tsx",
+      "import": "./src/react-location.tsx"
+    },
+    "./react-router": {
+      "types": "./src/react-router.tsx",
+      "import": "./src/react-router.tsx"
+    },
+    "./solid-router": {
+      "types": "./src/solid-router.tsx",
+      "import": "./src/solid-router.tsx"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "react-location": [
+        "./src/react-location.tsx"
+      ],
+      "react-router": [
+        "./src/react-router.tsx"
+      ],
+      "solid-router": [
+        "./src/solid-router.tsx"
+      ]
+    }
+  },
   "files": [
     "src"
   ],
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "format": "prettier --write 'src/**/*.{ts,tsx}'",
+    "release": "np --no-cleanup --no-tests",
+    "prepare": "husky install"
+  },
   "devDependencies": {
+    "@commitlint/cli": "^17.2.0",
+    "@commitlint/config-conventional": "^17.2.0",
+    "@solidjs/router": "^0.5.0",
     "@tanstack/react-location": "^3.7.4",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "np": "^7.6.2",
     "prettier": "^2.7.1",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.4"
+    "react-router-dom": "^6.4.3",
+    "solid-js": "^1.6.1",
+    "typescript": "^4.8.4",
+    "vite": "^3.2.2"
   },
   "peerDependencies": {
-    "@tanstack/react-location": ">=3",
-    "react": ">=17",
-    "react-dom": ">=17",
-    "vite": ">=2"
-  },
-  "scripts": {
-    "prepublish": "tsc --emitDeclarationOnly; pnpm format",
-    "type-check": "tsc --noEmit",
-    "format": "prettier --write 'src/**/*.{ts,tsx}'"
+    "vite": ">=3"
   }
-}
+}

readme.md

 <br>
 <p align="center">
-  <img src="https://raw.githubusercontent.com/oedotme/generouted/main/public/assets/icons/logo.svg" alt="Generouted · Generated Routes" width="180"/>
+  <img src="https://raw.githubusercontent.com/oedotme/generouted/main/public/logo.svg" alt="Generouted · Generated Routes" width="180"/>
 </p>
@@ -14,3 +14,3 @@ <p align="center">
 
-**Gene**rate**d** file-based **route**s for [React Location](https://react-location.tanstack.com) and [Vite](https://vitejs.dev)
+**Gene**rate**d** file-based **route**s for [Vite](https://vitejs.dev)
 
@@ -33,5 +33,93 @@ <br>
 - **Easier to migrate** when switching from or to Next.js
+- [Automatic route-based code-splitting and pre-loading](#route-based-code-splitting-and-pre-loading)
+- [Route-based data loaders](#route-based-data-loaders)
+- [Route-based actions](#route-based-actions)
 
 <br>
 
+## Framework support
+
+- React with [TanStack's React Location](https://react-location.tanstack.com)
+- React with [React Router](https://reactrouter.com)
+- Solid with [Solid Router](https://github.com/solidjs/solid-router)
+
+## Getting started
+
+In case you don't have a Vite project with React and TypeScript, check [Vite documentation to start a new project](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).
+
+### React Location
+
+#### Installation
+
+```shell
+pnpm add generouted @tanstack/react-location
+```
+
+#### Usage
+
+```tsx
+// src/main.tsx
+
+import { createRoot } from 'react-dom/client'
+import { Routes } from 'generouted/react-location'
+
+const container = document.getElementById('app')!
+createRoot(container).render(<Routes />)
+```
+
+### React Router
+
+#### Installation
+
+```shell
+pnpm add generouted react-router-dom
+```
+
+#### Usage
+
+```tsx
+// src/main.tsx
+
+import { createRoot } from 'react-dom/client'
+import { Routes } from 'generouted/react-router'
+
+const container = document.getElementById('app')!
+createRoot(container).render(<Routes />)
+```
+
+### Solid Router
+
+If you're using Solid, check out their [getting started guide](https://www.solidjs.com/guides/getting-started#try-solid) to start a new project.
+
+#### Installation
+
+```shell
+pnpm add generouted @solidjs/router
+```
+
+#### Usage
+
+```tsx
+// src/main.tsx
+
+import { render } from 'solid-js/web'
+import { Routes } from 'generouted/solid-router'
+
+render(Routes, document.getElementById('app')!)
+```
+
+### Adding pages
+
+Add the home page by creating a new file `src/pages/index.tsx` **→** `/`, then export a default component:
+
+```tsx
+export default function Home() {
+  return <h1>Home</h1>
+}
+```
+
+See more about `generouted` [routing conventions below](#conventions).
+
+<br>
+
 ## Features
@@ -41,3 +129,4 @@
 - [Route-based code-splitting and pre-loading](#route-based-code-splitting-and-pre-loading)
-- [Route-based data loaders](#route-based-data-loaders)
+- [Route-based data loaders and actions](#route-based-data-loaders)
+- [Route-based actions](#route-based-actions)
 - [Nested layouts](#nested-layouts)
@@ -53,25 +142,8 @@
 - Custom 404 page at `src/pages/404.tsx` _(optional)_
-- Navigation between routes using [React Location's `<Link />` component](https://react-location.tanstack.com/docs/api#link)
+- Navigation between routes using the routing library `Link` or `A` component
 
-#### Conventions
-
-##### Index routes
-
-- `src/pages/index.tsx` **→** `/`
-- `src/pages/posts/index.tsx` **→** `/posts`
-
-##### Nested routes
-
-- `src/pages/posts/2022/index.tsx` **→** `/posts/2022`
-- `src/pages/posts/2022/resolutions.tsx` **→** `/posts/2022/resolutions`
-
-##### Dynamic routes
-
-- `src/pages/posts/[slug].tsx` **→** `/posts/:slug`
-- `src/pages/posts/[slug]/tags.tsx` **→** `/posts/:slug/tags`
-- `src/pages/posts/[...all].tsx` **→** `/posts/*`
-
 ### Route-based code-splitting and pre-loading
 
-- Includes routes components and data loaders
+- Includes routes components, data loaders and actions
+- Pre-loading is only available for TanStack's React Location
 
@@ -84,67 +156,81 @@ ### Route-based data loaders
 
+### Route-based actions
+
+- Actions are only available for React Router
+- By exporting a named function `Action` from a page: `export const Action = async () => ({...})`
+
 ### Nested layouts
 
 - [Remix inspired](https://remix.run/docs/en/v1/guides/routing#what-is-nested-routing)
-- Adding a layout for a group of routes by naming a file same as their parent directory
+- Adding a layout for a group of routes by naming a file same as their parent directory or using a `_layout.tsx` file inside of the nested directory
 - Supports data loaders
-- Requires React Location's `<Outlet />` component to render its children
+- Requires `<Outlet />` component to render its children
 
-#### Conventions
+<br>
 
-##### Enable for all directory routes
+## Conventions
 
-Add a layout for all the routes within `src/pages/posts` directory by adding `src/pages/posts.tsx` layout:
+### Index routes
 
+- `src/pages/index.tsx` **→** `/`
 - `src/pages/posts/index.tsx` **→** `/posts`
+
+### Nested routes
+
 - `src/pages/posts/2022/index.tsx` **→** `/posts/2022`
+- `src/pages/posts/2022/resolutions.tsx` **→** `/posts/2022/resolutions`
+
+### Dynamic routes
+
 - `src/pages/posts/[slug].tsx` **→** `/posts/:slug`
+- `src/pages/posts/[slug]/tags.tsx` **→** `/posts/:slug/tags`
+- `src/pages/posts/[...all].tsx` **→** `/posts/*`
 
-##### Exclude a route - URL nesting without layout nesting
+### Nested layouts
 
-Replace regular file name with directory nesting by adding dots, it will be converted to forward slashes:
+#### Enable for all directory routes
 
+Add a layout for all the routes within `src/pages/posts` directory by adding `src/pages/posts.tsx` or `src/pages/posts/_layout.tsx`:
+
+- `src/pages/posts.tsx` or `src/pages/posts/_layout.tsx`
+  - `src/pages/posts/index.tsx` **→** `/posts`
+  - `src/pages/posts/2022/index.tsx` **→** `/posts/2022`
+  - `src/pages/posts/[slug].tsx` **→** `/posts/:slug`
+
+#### Exclude a route - URL nesting without layout nesting
+
+Add a file outside of the directory with a nested layout, then name the file by adding a dot between each segment, it will be converted to forward slashes:
+
 - `src/pages/posts.nested.as.url.not.layout.tsx` **→** `/posts/nested/as/url/not/layout`
 
-<br>
+### Ignored routes - co-locating non-pages files inside the pages directory
 
-## Getting started
+Any directory or a file starts with `_` will be ignored
 
-If you have an existing Vite project setup with React you can skip this section and go to the [installation section](#installation).
+- `src/pages/_ignored.tsx`
+- `src/pages/posts/_components/button.tsx`
+- `src/pages/posts/_components/link.tsx`
 
-Otherwise you can [scaffold a new Vite project](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) with React and TypeScript:
+<br>
 
-```shell
-npm create vite@latest react-file-based-routing -- --template react-ts   # npm 7+
-```
+## API
 
-## Installation
+### React Location
 
-```shell
-npm install generouted @tanstack/react-location
-```
+#### `<Routes />`
 
-## Usage
+`<Routes />` component accepts all [React Location's `RouterProps`](https://react-location.tanstack.com/docs/api#router) except `children`, `location` and `routes` props.
 
-Render the `<Routes />` component from `generouted` at the app entry _(you'd mostly wrap it with other providers/components)_:
+### React Router
 
-```tsx
-// src/main.tsx
+#### `<Routes />`
 
-import { render } from 'react-dom'
-import { Routes } from 'generouted'
+No available props.
 
-const container = document.getElementById('app')!
-render(<Routes />, container)
-```
+### Solid Router
 
-### Adding pages
+#### `<Routes />`
 
-Add the home page by creating a new file `src/pages/index.tsx` **→** `/`, then export a default component:
+No available props.
 
-```tsx
-export default function Home() {
-  return <h1>Home</h1>
-}
-```
-
 <br>
@@ -154,14 +240,18 @@
 
-- [Basic](./examples/basic)
-- [Data loaders](./examples/data-loaders)
-- [Nested layouts](./examples/nested-layouts)
+### React Location
 
-<br>
+- [Basic](./examples/react-location/basic)
+- [Data loaders](./examples/react-location/data-loaders)
+- [Modals](./examples/react-location/modals)
+- [Nested layouts](./examples/react-location/nested-layouts)
 
-## API
+### React Router
 
-### `<Routes />`
+- [Basic](./examples/react-router/basic)
+- [Nested layouts](./examples/react-router/nested-layouts)
 
-`<Routes />` component accepts all [React Location's `RouterProps`](https://react-location.tanstack.com/docs/api#router) except `children`, `location` and `routes` props.
+### Solid Router
 
+- [Basic](./examples/solid-router/basic)
+
 <br>
@@ -168,0 +258,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17288

increased by60.97%

Dependency count

1

decreased by-75%

Number of package files

7

increased by40%

Lines of code

143

increased by110.29%

Number of lines in readme file

256

increased by54.22%

Worsened metrics

Dev dependency count

14

increased by133.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes