{"_id":"@cover-slide/customelement-router","name":"@cover-slide/customelement-router","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cover-slide/customelement-router","version":"1.0.0","description":"A simple custom element-based router for web applications","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","test":"jest","prepublishOnly":"npm run build","prepare":"npm run build"},"keywords":["router","web-components","custom-elements","webcomponents","routing","spa"],"author":{"name":"rhoffman"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cover-slide/customelement-router.git"},"dependencies":{"@cover-slide/customelement":"^1.0.0"},"devDependencies":{"@types/jest":"^29.5.11","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","ts-jest":"^29.1.1","typescript":"^5.3.3"},"peerDependencies":{"@cover-slide/customelement":"^1.0.0"},"publishConfig":{"access":"public"},"engines":{"node":">=12.0.0"},"_id":"@cover-slide/customelement-router@1.0.0","bugs":{"url":"https://github.com/cover-slide/customelement-router/issues"},"homepage":"https://github.com/cover-slide/customelement-router#readme","_nodeVersion":"23.11.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-Un3N/XWjbB3Rfc7ip3UJpII0eQk+dhsE0HD2ykg8PMbCqsujetw/wWsR3yabuRosH4Vc8l6emCTOLgHAk53FvQ==","shasum":"85bbf9e4792f50483b0dad4a9a27a3ad2cef8c1f","tarball":"https://registry.npmjs.org/@cover-slide/customelement-router/-/customelement-router-1.0.0.tgz","fileCount":21,"unpackedSize":17171,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICVv4zQnOBW4CEzqF7GP3k+sWGY4ZVb83VPyBmmiEV2qAiEA5O/Rp+rOlVGwP+x3JJwJbaqyCWsw5P5+uECoj9wm2og="}]},"_npmUser":{"name":"coverslide","email":"coverslide@gmail.com"},"directories":{},"maintainers":[{"name":"coverslide","email":"coverslide@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/customelement-router_1.0.0_1746563271930_0.5044725979446538"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-06T20:27:51.816Z","1.0.0":"2025-05-06T20:27:52.097Z","modified":"2025-05-06T20:27:52.328Z"},"maintainers":[{"name":"coverslide","email":"coverslide@gmail.com"}],"description":"A simple custom element-based router for web applications","homepage":"https://github.com/cover-slide/customelement-router#readme","keywords":["router","web-components","custom-elements","webcomponents","routing","spa"],"repository":{"type":"git","url":"git+https://github.com/cover-slide/customelement-router.git"},"author":{"name":"rhoffman"},"bugs":{"url":"https://github.com/cover-slide/customelement-router/issues"},"license":"MIT","readme":"# Custom Element Router\n\nA simple custom element-based router for web applications.\n\n## Installation\n\n```bash\nnpm install @cover-slide/customelement-router\n```\n\n## Usage\n\n### Basic Setup\n\n```typescript\n// Import and register the router components\nimport { registerRouterElements } from '@cover-slide/customelement-router';\nregisterRouterElements();\n\n// Use the router in your HTML or in a template\nconst template = `\n<router-router>\n  <router-route route=\"/\" title=\"Home\">\n    <h1>Home Page</h1>\n  </router-route>\n  <router-route route=\"/about\" title=\"About\">\n    <h1>About Page</h1>\n  </router-route>\n  <router-route route=\"\" title=\"Default\">\n    <router-redirect path=\"/\"></router-redirect>\n  </router-route>\n</router-router>\n`;\n```\n\n### Navigation\n\n```typescript\nimport { updateRoute, routeListener } from '@cover-slide/customelement-router';\n\n// Programmatic navigation\nconst navigateButton = document.querySelector('#navigate-button');\nnavigateButton.addEventListener('click', () => {\n  updateRoute(navigateButton, '/about');\n});\n\n// Link-based navigation\nconst link = document.createElement('a');\nlink.setAttribute('href', '/about');\nlink.setAttribute('route', 'true');\nlink.textContent = 'Go to About';\nlink.addEventListener('click', routeListener);\n```\n\n## Components\n\n- `<router-router>`: Main router component that manages route navigation\n- `<router-route>`: Defines a route with path and content\n- `<router-redirect>`: Redirects to another route\n\n## API\n\n- `updateRoute(element, path)`: Programmatically navigate to a path\n- `routeListener(event)`: Event listener for handling link clicks with route attribute\n- `registerRouterElements()`: Register custom elements for routing\n\n## Example\n\n```typescript\nimport { registerRouterElements, updateRoute, routeListener } from '@cover-slide/customelement-router';\n\n// Register the router components\nregisterRouterElements();\n\n// Create a router programmatically\nconst router = document.createElement('router-router');\n\n// Home route\nconst homeRoute = document.createElement('router-route');\nhomeRoute.setAttribute('route', '/');\nhomeRoute.setAttribute('title', 'Home');\nhomeRoute.innerHTML = '<h1>Home Page</h1>';\n\n// About route\nconst aboutRoute = document.createElement('router-route');\naboutRoute.setAttribute('route', '/about');\naboutRoute.setAttribute('title', 'About');\naboutRoute.innerHTML = '<h1>About Page</h1>';\n\n// Add routes to router\nrouter.appendChild(homeRoute);\nrouter.appendChild(aboutRoute);\n\n// Add to document\ndocument.getElementById('app').appendChild(router);\n\n// Create navigation links\nconst homeLink = document.createElement('a');\nhomeLink.setAttribute('href', '/');\nhomeLink.setAttribute('route', 'true');\nhomeLink.textContent = 'Home';\nhomeLink.addEventListener('click', routeListener);\n\nconst aboutLink = document.createElement('a');\naboutLink.setAttribute('href', '/about');\naboutLink.setAttribute('route', 'true');\naboutLink.textContent = 'About';\naboutLink.addEventListener('click', routeListener);\n\n// Add links to navigation\nconst nav = document.createElement('nav');\nnav.appendChild(homeLink);\nnav.appendChild(document.createTextNode(' | '));\nnav.appendChild(aboutLink);\n\ndocument.getElementById('app').appendChild(nav);\n```\n\n## Requirements\n\nThis package depends on `@cover-slide/customelement` for the base custom element implementation.\n\n## License\n\nMIT","readmeFilename":"README.md","_rev":"1-ccaa5d675cf225146dd436d7eed5f4a8"}