npm - reroute-js - Versions diffs - 0.6.0 → 0.7.0 - Mend

reroute-js 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/README.md +1 -0
package/_/basic/package.json +4 -4
package/_/basic/src/client/index.html +1 -1
package/_/basic/src/index.ts +1 -3
package/_/blog/package.json +4 -4
package/_/blog/src/client/App.tsx +1 -0
package/_/blog/src/client/index.html +1 -1
package/_/blog/src/client/routes/blog/content/1-hello-world.tsx +1 -1
package/_/blog/src/client/routes/blog/content/3-markdown-with-syntax-highlighting.mdx +213 -0
package/_/blog/src/client/routes/blog/content/4-content-in-markdown.md +143 -0
package/_/blog/src/client/routes/blog/content/5-mdx-with-components.mdx +267 -0
package/_/blog/src/client/routes/blog/index.tsx +59 -0
package/_/blog/src/client/routes/client.tsx +564 -0
package/_/blog/src/client/routes/docs.tsx +670 -0
package/_/blog/src/client/routes/index.tsx +37 -0
package/_/blog/src/client/routes/markdown-demo.md +169 -0
package/_/blog/src/client/routes/markdown.tsx +160 -0
package/_/blog/src/index.ts +5 -2
package/_/store/package.json +4 -4
package/_/store/src/client/index.html +1 -1
package/_/store/src/index.ts +1 -1
package/cli/bin.d.ts +1 -1
package/cli/bin.js +806 -14
package/cli/bin.js.map +11 -7
package/cli/index.d.ts +1 -1
package/cli/index.js +52 -3
package/cli/index.js.map +4 -3
package/cli/src/cli.d.ts +1 -1
package/cli/src/commands/boot.d.ts +1 -1
package/cli/src/commands/build.d.ts +19 -0
package/cli/src/commands/build.d.ts.map +1 -0
package/cli/src/commands/dev.d.ts +18 -0
package/cli/src/commands/dev.d.ts.map +1 -0
package/cli/src/commands/gen.d.ts +1 -1
package/cli/src/commands/init.d.ts +1 -1
package/cli/src/commands/start.d.ts +19 -0
package/cli/src/commands/start.d.ts.map +1 -0
package/cli/src/libs/index.d.ts +2 -1
package/cli/src/libs/index.d.ts.map +1 -1
package/cli/src/libs/log.d.ts +46 -0
package/cli/src/libs/log.d.ts.map +1 -0
package/cli/src/libs/markdown-processor.d.ts +1 -1
package/cli/src/libs/markdown.d.ts +1 -1
package/cli/src/libs/tailwind.d.ts +1 -1
package/cli/src/libs/version.d.ts +1 -1
package/core/index.d.ts +1 -1
package/core/index.js +5 -5
package/core/index.js.map +3 -3
package/core/src/bundler/hash.d.ts +1 -1
package/core/src/bundler/index.d.ts +1 -1
package/core/src/bundler/transpile.d.ts +1 -1
package/core/src/content/discovery.d.ts +1 -1
package/core/src/content/index.d.ts +1 -1
package/core/src/content/metadata.d.ts +1 -1
package/core/src/content/registry.d.ts +1 -1
package/core/src/index.d.ts +1 -1
package/core/src/ssr/data.d.ts +1 -1
package/core/src/ssr/index.d.ts +1 -1
package/core/src/ssr/modules.d.ts +1 -1
package/core/src/ssr/render.d.ts +1 -1
package/core/src/ssr/seed.d.ts +1 -1
package/core/src/template/html.d.ts +1 -1
package/core/src/template/index.d.ts +1 -1
package/core/src/types.d.ts +1 -1
package/core/src/utils/cache.d.ts +1 -1
package/core/src/utils/compression.d.ts +1 -1
package/core/src/utils/index.d.ts +1 -1
package/core/src/utils/mime.d.ts +1 -1
package/core/src/utils/path.d.ts +1 -1
package/elysia/index.d.ts +1 -1
package/elysia/index.js +5 -5
package/elysia/index.js.map +3 -3
package/elysia/src/index.d.ts +1 -1
package/elysia/src/libs/http.d.ts +1 -1
package/elysia/src/libs/image.d.ts +1 -1
package/elysia/src/plugin.d.ts +1 -1
package/elysia/src/routes/artifacts.d.ts +1 -1
package/elysia/src/routes/content.d.ts +1 -1
package/elysia/src/routes/dev.d.ts +1 -1
package/elysia/src/routes/image.d.ts +1 -1
package/elysia/src/routes/ssr.d.ts +1 -1
package/elysia/src/routes/static.d.ts +1 -1
package/elysia/src/types.d.ts +1 -1
package/package.json +6 -1
package/react/index.d.ts +1 -1
package/react/index.js +50 -24
package/react/index.js.map +3 -3
package/react/src/components/ClientOnly.d.ts +1 -1
package/react/src/components/ContentRoute.d.ts +1 -1
package/react/src/components/Image.d.ts +1 -1
package/react/src/components/Link.d.ts +1 -1
package/react/src/components/Markdown.d.ts +1 -1
package/react/src/components/Outlet.d.ts +1 -1
package/react/src/components/index.d.ts +1 -1
package/react/src/hooks/index.d.ts +1 -1
package/react/src/hooks/useContent.d.ts +1 -1
package/react/src/hooks/useData.d.ts +1 -1
package/react/src/hooks/useNavigate.d.ts +1 -1
package/react/src/hooks/useParams.d.ts +1 -1
package/react/src/hooks/useRouter.d.ts +1 -1
package/react/src/hooks/useSearchParams.d.ts +1 -1
package/react/src/index.d.ts +1 -1
package/react/src/providers/ContentProvider.d.ts +1 -1
package/react/src/providers/RerouteProvider.d.ts +1 -1
package/react/src/providers/RouterProvider.d.ts +1 -1
package/react/src/providers/RouterProvider.d.ts.map +1 -1
package/react/src/providers/index.d.ts +1 -1
package/react/src/types/any.d.ts +1 -1
package/react/src/types/index.d.ts +1 -1
package/react/src/types/router.d.ts +1 -1
package/react/src/utils/content.d.ts +1 -1
package/react/src/utils/head.d.ts +1 -1
package/react/src/utils/index.d.ts +1 -1
package/_/blog/src/client/components/Counter.tsx +0 -14

package/README.md CHANGED Viewed

@@ -14,6 +14,7 @@ Reroute is a dead-simple file-based routing framework for building full-stack Re
 ### 🛠️ CLI Tools
 - 🚀 **`reroute init`** - Scaffold new projects with templates (basic, blog, store)
 - 🔨 **`reroute gen`** - Generate content registry and route artifacts
+- ⚡ **`reroute dev`** - Start development environment with side-by-side logs and colored output
 ### 📄 Content Management
 - 📚 **Content Collections** - Organize content by collections (blog posts, docs, etc.)

package/_/basic/package.json CHANGED Viewed

@@ -3,10 +3,10 @@
 	"description": "A Reroute application",
 	"version": "0.0.0",
 	"scripts": {
-		"postinstall": "reroute-js boot",
-		"start": "reroute gen && bun src/index.ts",
-		"dev": "reroute gen --watch & bun --watch src/index.ts",
-		"build": "reroute gen && bun build src/index.ts --target bun --compile --outfile ./dist/app"
+		"types": "tsc --noEmit",
+		"start": "reroute start",
+		"dev": "reroute dev",
+		"build": "reroute build"
 	},
 	"private": true,
 	"dependencies": {

package/_/basic/src/client/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<title>{{PROJECT_NAME}}</title>
+		<title>Reroute Basic Example</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	</head>
 	<body>

package/_/basic/src/index.ts CHANGED Viewed

@@ -15,6 +15,4 @@ const app = new Elysia()
 	.get('/api/message', () => ({ message: 'Hello from server' }))
 	.listen(Number(Bun.env.PORT || '3000'));
-console.log(
-	`🦊 Reroute is running at ${app.server?.hostname}:${app.server?.port}`,
-);
+console.log(`[reroute] Running at ${app.server?.hostname}:${app.server?.port}`);

package/_/blog/package.json CHANGED Viewed

@@ -3,10 +3,10 @@
 	"description": "A Reroute application",
 	"version": "0.0.0",
 	"scripts": {
-		"postinstall": "reroute-js boot",
-		"start": "reroute gen && bun src/index.ts",
-		"dev": "reroute gen --watch & bun --watch src/index.ts",
-		"build": "reroute gen && bun build src/index.ts --target bun --compile --outfile ./dist/app"
+		"types": "tsc --noEmit",
+		"start": "reroute start",
+		"dev": "reroute dev",
+		"build": "reroute build"
 	},
 	"private": true,
 	"dependencies": {

package/_/blog/src/client/App.tsx CHANGED Viewed

@@ -6,5 +6,6 @@ interface AppProps {
 }
 export default function App({ pathname }: AppProps = {}) {
+	console.log('[app] app mounted');
 	return <RerouteProvider from={{ pathname, ...artifacts }} />;
 }

package/_/blog/src/client/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <title>{{PROJECT_NAME}}</title>
+        <title>Reroute App</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     </head>

package/_/blog/src/client/routes/blog/content/1-hello-world.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ function BlogPost() {
 	return (
 		<div>
 			<h1>Hello World</h1>
-			<p>Welcome to my blog!!</p>
+			<p>Welcome to my blog!!!</p>
 		</div>
 	);
 }

package/_/blog/src/client/routes/blog/content/3-markdown-with-syntax-highlighting.mdx ADDED Viewed

@@ -0,0 +1,213 @@
+---
+title: Markdown with Syntax Highlighting
+description: Learn how to use markdown with beautiful syntax highlighting powered by Shiki
+excerpt: A complete guide to using markdown in Reroute with Shiki syntax highlighting
+date: 2025-11-04
+---
+# Markdown with Syntax Highlighting
+Reroute now supports **native markdown rendering** with beautiful syntax highlighting powered by [Shiki](https://shiki.style/)!
+## Features
+- ✅ **GitHub Flavored Markdown** - Tables, task lists, strikethrough, and more
+- ✅ **Syntax Highlighting** - Powered by Shiki with VS Code themes
+- ✅ **Zero Config** - Works out of the box when packages are installed
+- ✅ **Optional** - Only included when you need it
+## Installation
+To use markdown in your Reroute project:
+```bash
+# Required: Markdown renderer
+bun add react-markdown
+# Optional: GitHub Flavored Markdown support
+bun add remark-gfm
+# Optional: Syntax highlighting
+bun add -d @shikijs/rehype
+```
+## Basic Usage
+Import the Markdown component and pass your content as children:
+```tsx
+import { Markdown } from 'reroute-js/react';
+export default function MyPost() {
+  return (
+    <Markdown>
+      {/* Your markdown content here */}
+      # Hello World
+      This is **bold** and this is *italic*.
+    </Markdown>
+  );
+}
+```
+## Code Highlighting
+Shiki provides beautiful syntax highlighting for many languages:
+### TypeScript Example
+```typescript
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+async function fetchUser(id: number): Promise<User> {
+  const response = await fetch(`/api/users/${id}`);
+  return response.json();
+}
+```
+### React Component
+```tsx
+import { useState } from 'react';
+import { Link } from 'reroute-js/react';
+export default function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <h2>Count: {count}</h2>
+      <button onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
+      <Link to="/">Home</Link>
+    </div>
+  );
+}
+```
+### Python Example
+```python
+def fibonacci(n: int) -> list[int]:
+    """Generate fibonacci sequence up to n terms."""
+    if n <= 0:
+        return []
+    elif n == 1:
+        return [0]
+    sequence = [0, 1]
+    for i in range(2, n):
+        sequence.append(sequence[i-1] + sequence[i-2])
+    return sequence
+# Generate first 10 fibonacci numbers
+print(fibonacci(10))
+```
+## GitHub Flavored Markdown
+With `remark-gfm`, you get additional features:
+### Tables
+| Feature | Status | Notes |
+|---------|--------|-------|
+| Markdown | ✅ | react-markdown |
+| Syntax Highlighting | ✅ | Shiki |
+| GFM Support | ✅ | remark-gfm |
+| Auto Detection | ✅ | CLI integration |
+### Task Lists
+- [x] Install react-markdown
+- [x] Add optional Shiki support
+- [x] Create example blog post
+- [ ] Write more documentation
+### Strikethrough
+~~This is outdated information~~ Use the new Markdown component instead!
+### Autolinks
+Check out the docs at https://github.com/stewones/reroute
+## Advanced Configuration
+You can customize the Markdown component with various options:
+```tsx
+<Markdown
+  theme="github-light"
+  gfm={true}
+  highlight={true}
+  className="prose prose-slate"
+>
+  {markdownContent}
+</Markdown>
+```
+## Custom Components
+Override default HTML elements with your own components:
+```tsx
+<Markdown
+  components={{
+    h1: ({ children }) => (
+      <h1 className="text-4xl font-bold mb-4">
+        {children}
+      </h1>
+    ),
+    a: ({ href, children }) => (
+      <Link to={href} className="text-blue-500 hover:underline">
+        {children}
+      </Link>
+    ),
+  }}
+>
+  {content}
+</Markdown>
+```
+## Performance
+The Markdown component uses dynamic imports to avoid bundling dependencies you don't need:
+- **react-markdown**: Only loaded if you use the component
+- **remark-gfm**: Only loaded if GFM features are enabled
+- **shiki**: Only loaded if syntax highlighting is enabled
+This keeps your bundle size minimal! 📦
+## Integration with Content Collections
+Markdown works seamlessly with Reroute's content system:
+```tsx
+import { useContent } from 'reroute-js/react';
+import { Markdown } from 'reroute-js/react';
+export default function BlogPost() {
+  const posts = useContent('blog');
+  const post = posts[0];
+  return (
+    <article>
+      <h1>{post.meta.title}</h1>
+      <Markdown>{post.content}</Markdown>
+    </article>
+  );
+}
+```
+## Conclusion
+With markdown support, Reroute makes it easy to create content-rich applications with beautiful code examples. The optional nature of the dependencies means you only pay for what you use!
+Happy writing! 🎉

package/_/blog/src/client/routes/blog/content/4-content-in-markdown.md ADDED Viewed

@@ -0,0 +1,143 @@
+---
+title: Content in Markdown
+description: Learn how to use markdown files in Reroute content collections for easy blog authoring
+date: 2025-11-05
+excerpt: Markdown files work seamlessly in content collections - no JSX needed!
+---
+# Writing Blog Posts in Markdown
+This blog post is written entirely in **markdown** and lives in the `content/` directory as a `.md` file. No JSX, no React components - just pure markdown!
+## Content Collections + Markdown
+Reroute's content system now supports markdown files natively. Simply drop a `.md` or `.mdx` file in your content collection directory:
+```bash
+src/client/routes/blog/content/
+├── 1-hello-world.tsx          # Traditional TSX
+├── 2-what-is-reroute.tsx      # Traditional TSX
+├── 3-markdown-with-syntax.tsx # TSX with Markdown component
+└── 4-content-in-markdown.md   # 🎉 Pure markdown!
+```
+## The Best of Both Worlds
+You get all the benefits of content collections:
+✅ **Automatic indexing** - Appears in `useContent('blog')`
+✅ **Frontmatter metadata** - Title, description, date, etc.
+✅ **Type-safe routing** - Works with `<ContentRoute>`
+✅ **Code splitting** - Individual chunk per post
+✅ **Syntax highlighting** - Beautiful code blocks with Shiki
+But with the simplicity of markdown authoring!
+## Writing Content
+### Headings and Text
+Use standard markdown syntax. Text can be **bold**, *italic*, or ***both***. You can also use ~~strikethrough~~ and `inline code`.
+### Code Blocks
+Syntax highlighting works automatically:
+```typescript
+import { useContent } from 'reroute-js/react';
+export default function BlogIndex() {
+  const posts = useContent('blog');
+  return (
+    <div>
+      {posts.map(post => (
+        <article key={post.slug}>
+          <h2>{post.meta.title}</h2>
+          <p>{post.meta.excerpt}</p>
+        </article>
+      ))}
+    </div>
+  );
+}
+```
+```javascript
+// Works with any language
+const greet = (name) => {
+  console.log(`Hello, ${name}!`);
+};
+greet('Markdown');
+```
+### Lists
+**Task lists:**
+- [x] Add markdown support to routes
+- [x] Add markdown support to content collections
+- [x] Write example blog post
+- [ ] Write more posts!
+**Regular lists:**
+1. Write your post in markdown
+2. Save it to the content directory
+3. Run `reroute gen`
+4. Your post is live!
+### Tables
+| Feature | Markdown | TSX |
+|---------|----------|-----|
+| Syntax | Simple | Verbose |
+| Learning Curve | Easy | React knowledge needed |
+| Flexibility | Good | Excellent |
+| Speed | Fast | Fast |
+### Blockquotes
+> "Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format."
+> — John Gruber, creator of Markdown
+## How It Works
+When you run `reroute gen`:
+1. The CLI scans for markdown files in content directories
+2. Parses frontmatter for metadata
+3. Converts to a React component wrapper
+4. Builds it like any other content file
+5. Available via `useContent()` or `<ContentRoute>`
+## When to Use Markdown
+**Use markdown files when:**
+- ✅ Writing blog posts or articles
+- ✅ Creating documentation
+- ✅ Content-focused pages
+- ✅ Quick authoring without React complexity
+**Use TSX files when:**
+- 🎯 Need custom components or interactivity
+- 🎯 Complex layouts or data fetching
+- 🎯 Dynamic content with state management
+- 🎯 Integration with external APIs
+## Mixing and Matching
+The beauty of Reroute is that you can mix both approaches:
+```
+blog/content/
+├── simple-post.md        # Pure markdown
+├── interactive-demo.tsx  # Full React component
+└── hybrid-post.mdx       # Markdown with JSX (coming soon!)
+```
+Use the right tool for each piece of content!
+## Conclusion
+Markdown support in content collections makes Reroute even more powerful for content-driven sites. Write your content in the format that makes sense for each piece.
+Happy blogging! 🚀