Dynamic Content Router

This package provides a dynamic content router for single-page applications, enabling seamless routing and navigation within a web application. It leverages client-side JavaScript to dynamically fetch and inject content into the DOM, using custom navigation logic. The package handles fetching remote content, managing routes, and updating browser history, while also offering utility functions to add paths dynamically.

Features

• Dynamic Content Injection: Fetch and inject content into the DOM based on the current route.
• Path Normalization: Ensures consistent routing by normalizing paths.
• Custom Navigation Handling: Uses custom navigation for internal links without refreshing the page.
• History API: Integrates with the browser's history to enable forward/backward navigation using the pushState API.
• Support for Static and Remote Content: Handles both inline content and external content (via HTTP requests).
• Dynamic Route Addition: Allows adding new routes dynamically.

Installation

To use this package in your project, either get syflare.js from GitHub or do

npm install syflare-router

This package does not have any external dependencies.

Usage

Initialize

As a module in index.js:

import SyflareRouter from './syflare.js';

SyflareRouter.addPath('./routes/main.html', '/');
SyflareRouter.addPath('./routes/content.html', '/content');
SyflareRouter.addPath('./routes/test.html', '/test');

SyflareRouter.router();

note that if you install this via npm you need to:

import SyflareRouter from "./node_modules/syflare-router/syflare.js"

in HTML:

<syflare-router>
  //content will be loaded here
</syflare-router>

Navigation

either use:

<a href="/">Home</a>
<a href="/test">Test</a>
<a href="/thanks">Thanks</a>

or directly use the navigate function:

<button onclick="navigate('/test')"></button>