jong-router 0.1.12

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 josnin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,238 @@
+# JongRouter
+
+
+
+A lightweight and simple-to-use web components router in Vanilla JavaScript with support for guards, nested routes, page not found, passing query parameters to components, passing route parameters to components, passing route data to components, and a router link for single-page application navigation without reloading the page.
+
+
+
+## Features
+
+
+
+- **Routing**: Define routes and associate them with components.
+
+- **Guards**: Implement route guards to control navigation based on conditions. ([Example](https://github.com/josnin/jong-router/tree/main/samples/guards))
+
+- **Nested Routes**: Create hierarchical routes for nested components. ([Example](https://github.com/josnin/jong-router/tree/main/samples/nestedroutes))
+
+- **Page Not Found**: Handle routes that do not match any defined route. ([Example](https://github.com/josnin/jong-router/tree/main/samples/page-not-found))
+
+- **Query Parameters**: Pass query parameters to components. ([Example](https://github.com/josnin/jong-router/tree/main/samples/query-params))
+
+- **Route Parameters**: Extract and pass route parameters to components. ([Example](https://github.com/josnin/jong-router/tree/main/samples/route-params))
+
+- **Route Data**: Include additional data associated with each route. ([Example](https://github.com/josnin/jong-router/tree/main/samples/route-data))
+
+- **Router Link**: Use attr `router-link` to navigate without reloading the page. ([Example](https://github.com/josnin/jong-router/tree/main/samples/router-link))
+
+
+
+## Installation
+
+
+
+Include the `jong-router.js` script in your HTML file.
+
+### Plug & Play, Import directly from cdn
+
+```html
+<!-- via html -->
+<script type="module" src="https://cdn.jsdelivr.net/npm/jong-router@latest/dist/jong-router.min.js"></script>
+
+```
+
+```js
+// via js
+// latest 
+import JongRouter from 'https://cdn.jsdelivr.net/npm/jong-router@latest/dist/jong-router.min.js'
+
+// or specific version
+import JongRouter from 'https://cdn.jsdelivr.net/npm/jong-router@0.1.12/dist/jong-router.min.js'
+
+```
+
+### Or Install using NPM
+
+```js
+// or via npm
+npm i jong-router   
+```
+
+
+
+## Usage
+
+
+
+1. **Initialize the Router:**
+
+
+
+```javascript
+
+const router = new JongRouter([
+
+  { path: '/', component: import('./components/HomeComponent') },
+
+  { path: '/about', component: import('./components/AboutComponent') },
+
+  // Add more routes as needed
+
+], document.getElementById('app') );
+
+
+
+router.init();
+
+```
+
+
+
+2. **Create Components:**
+
+
+
+Create your web components for each route.
+
+
+
+```javascript
+
+// Example: HomeComponent.js
+
+class HomeComponent extends HTMLElement {
+
+  connectedCallback() {
+
+    this.innerHTML = '<h1>Home Component</h1>';
+
+  }
+
+}
+
+
+
+customElements.define('home-component', HomeComponent);
+
+```
+
+
+
+3. **Navigate with Router Links:**
+
+
+
+Use the `<router-link>` element to create navigation links.
+
+
+
+```html
+
+<!-- Example: index.html -->
+
+<a router-link href="/">Home</a>
+
+<a router-link href="/about">About</a>
+
+```
+
+
+
+4. **Guards**
+
+
+
+Implement guards for route conditions 
+
+
+
+```javascript
+
+const router = new JongRouter([
+
+  {
+
+    path: '/dashboard',
+
+    component: import('./components/DashboardComponent'),
+
+    guards: [() => isAuthenticated()],
+
+    redirect: '/login',  
+
+  },
+
+  { path: '/login', component: import('./components/LoginComponent') }, 
+  // ...other routes
+
+]);
+
+
+
+function isAuthenticated() {
+
+  // Your authentication logic here
+
+  return true;
+
+}
+
+```
+
+
+
+5. **Handle Route Parameters and Query Parameters:**
+
+
+
+Access route parameters and query parameters in your components.
+
+
+
+```javascript
+
+// Example: UserComponent.js
+
+class UserComponent extends HTMLElement {
+
+  connectedCallback() {
+
+    const routeParams = JSON.parse(this.getAttribute('route-params'));
+
+    const queryParams = JSON.parse(this.getAttribute('query-params'));
+
+
+
+    this.innerHTML = `<h1>User Details</h1>
+
+                      <p>User ID: ${routeParams.id}</p>
+
+                      <p>Query Param: ${queryParams.example}</p>`;
+
+  }
+
+}
+
+
+
+customElements.define('user-component', UserComponent);
+
+```
+
+## How to run development server? 
+```
+git clone git@github.com:josnin/jong-router.git 
+cd ~/Documents/jong-router/
+npm install
+npm run dev
+```
+
+## Help
+
+Need help? Open an issue in: [ISSUES](https://github.com/josnin/jong-router/issues)
+
+
+## Contributing
+Want to improve and add feature? Fork the repo, add your changes and send a pull request.
+

package/dist/jong-router.d.ts

@@ -0,0 +1,26 @@
+interface IRoute {
+    pattern: string;
+    component?: Promise<any>;
+    html?: string;
+    guards?: (() => boolean)[];
+    redirect?: string;
+    data?: any;
+}
+declare class JongRouter {
+    private routes;
+    private outlet;
+    private shadowRoot1;
+    constructor(routes: IRoute[], outlet: HTMLElement, shadowRoot1?: ShadowRoot | undefined);
+    init(): void;
+    private setupNavigation;
+    private navigate;
+    private loadContent;
+    private loadComponent;
+    private handleClick;
+    private matchRoute;
+    private extractQueryParams;
+    private extractRouteParams;
+    navigateTo(route: string): void;
+}
+export { IRoute };
+export default JongRouter;

package/dist/jong-router.min.js

@@ -0,0 +1,2 @@
+var a=class{routes;outlet;shadowRoot1;constructor(e,n,t){this.routes=e,this.outlet=n,this.shadowRoot1=t}init(){this.setupNavigation(),this.navigate()}setupNavigation(){window.addEventListener("popstate",()=>this.navigate()),document.addEventListener("click",e=>this.handleClick(e))}navigate(){let e=window.location.pathname,n=this.routes.find(o=>this.matchRoute(o.pattern,e));if(n){if(n.guards&&n.guards.every(s=>{let i=s.bind(this)();return i||(n.redirect?this.navigateTo(n.redirect):console.warn("Guard prevented navigation, and no redirect route specified!")),i===!0})===!1)return;n.component?this.loadComponent(n.component,this.extractRouteParams(n.pattern,e),n.data):n.html?this.loadContent(n.html):console.warn("no component or html route specified!");return}let t=this.routes.find(o=>o.pattern==="**");t&&(t.component?this.loadComponent(t.component,this.extractRouteParams(t.pattern,e),t.data):t.html&&this.loadContent(t.html))}loadContent(e){this.outlet.innerHTML=e}async loadComponent(e,n,t){e.then(o=>{let s=o.default,i=new s,r=this.extractQueryParams();n&&i.setAttribute("route-params",JSON.stringify(n)),t&&i.setAttribute("route-data",JSON.stringify(t)),r&&i.setAttribute("query-params",JSON.stringify(r)),i.router=this,this.outlet.innerHTML="",this.outlet.appendChild(i)}).catch(o=>{console.error(`Error loading component: ${o}`),this.outlet.innerHTML="Component not found"})}handleClick(e){let t=e.composedPath().includes(this.shadowRoot1)?e.composedPath()[0]:e.target;if((t instanceof HTMLAnchorElement||t instanceof HTMLButtonElement)&&t.hasAttribute("router-link")){e.preventDefault();let o=t.getAttribute("href");window.history.pushState({},"",o),this.navigate()}}matchRoute(e,n){let t=e.split("/").filter(s=>s!==""),o=n.split("/").filter(s=>s!=="");return t.length===o.length&&t.every((s,i)=>s.startsWith(":")||s===o[i])}extractQueryParams(){let e=window.location.search,n=new URLSearchParams(e),t={};return n.forEach((o,s)=>{t[s]=o}),t}extractRouteParams(e,n){return e.split("/").reduce((t,o,s)=>(o.startsWith(":")&&(t[o.slice(1)]=n.split("/")[s]),t),{})}navigateTo(e){window.history.pushState({},"",e),this.navigate()}},c=a;export{c as default};
+//# sourceMappingURL=jong-router.min.js.map

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "jong-router",
+  "version": "0.1.12",
+  "description": "A lightweight and simple-to-use web components router in Vanilla JavaScript with support for guards, nested routes, page not found, passing query parameters to components, passing route parameters to components, passing route data to components, and a router link for single-page application navigation without reloading the page.",
+  "keywords": [
+    "jong-router",
+    "web components router",
+    "custom elements"
+  ],
+  "main": "dist/jong-router.min.js",
+  "types": "dist/jong-router.d.ts",
+  "type": "module",
+  "engines": {
+    "node": ">=18.18.2"
+  },
+  "scripts": {
+    "dev": "node node_modules/vite/bin/vite.js",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rimraf src/*.js src/*/*.js samples/*.js samples/*/*.js *.d.ts src/*.d.ts src/*/*.d.ts",
+    "build": "npm run clean &&  tsc -w",
+    "bundle": "npx esbuild --bundle src/jong-router.js --minify --sourcemap --format=esm --outfile=dist/jong-router.min.js --target=es2022 && npm run copy",
+    "copy": "cp -rvf src/*.d.ts dist/."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/josnin/jong-router.git"
+  },
+  "author": "josnin",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/josnin/jong-router/issues"
+  },
+  "homepage": "https://github.com/josnin/jong-router#readme",
+  "devDependencies": {
+    "@types/node": "^18.11.14",
+    "esbuild": "^0.19.9",
+    "rimraf": "^4.1.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.8"
+  }
+}