npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lithium-framework/router-element

v1.0.2-1

Published

Le **Lithium Hash-router Element** est un composant Web léger conçu pour gérer la navigation dans une application Web en utilisant des **hashes** (`#`). Ce composant permet d'afficher dynamiquement des vues correspondant aux routes définies sans nécessite

Downloads

82

Readme

Lithium Hash-router Element

Le Lithium Hash-router Element est un composant Web léger conçu pour gérer la navigation dans une application Web en utilisant des hashes (#). Ce composant permet d'afficher dynamiquement des vues correspondant aux routes définies sans nécessiter de rechargement de page.

Développé avec Lithium Framework, il facilite la création d'applications mono-page (SPA) en offrant un contrôle précis sur le rendu des composants.

Installation

Assurez-vous que Lithium Framework est installé dans votre projet :

npm install @lithium-framework/core

Et installez le Lithium Hash-router Element :

npm install @lithium-framework/router-element

Utilisation

Exemple de base

Voici comment intégrer le Lithium Hash-router Element dans votre application :

Avec Lithium

import { render, html } from '@lithium-framework/core';

// Exemples de templates pour les différentes pages
const homeTemplate = html`
    <h1>Accueil</h1>
    <p>Bienvenue sur la page d'accueil</p>
`;

const aboutTemplate = html`
    <h1>À propos</h1>
    <p>Voici des informations sur nous.</p>
`;

const contactTemplate = html`
    <h1>Contact</h1>
    <p>Contactez-nous ici.</p>
`;

// Utiliser le hash-router
render(html`
    <hash-router>
        <hash-router-element path="#home" :element=${homeTemplate}></hash-router-element>
        <hash-router-element path="#about" :element=${aboutTemplate}></hash-router-element>
        <hash-router-element path="#contact" :element=${contactTemplate}></hash-router-element>
    </hash-router>
`);

HTML + JS Vanilla

<hash-router>
    <hash-router-element path="#home" id="homeRoute"></hash-router-element>
    <hash-router-element path="#about" id="aboutRoute"></hash-router-element>
    <hash-router-element path="#contact" id="contactRoute"></hash-router-element>
</hash-router>

<script>
    // Sélectionner les routes et définir les callbacks
    const homeRoute = document.getElementById('homeRoute');
    const aboutRoute = document.getElementById('aboutRoute');
    const contactRoute = document.getElementById('contactRoute');

    // Définir des callbacks pour chaque route
    homeRoute.setRenderCallback(() => {
        console.log("Rendering Home Page");
        homeRoute.innerHTML = `
            <h1>Accueil</h1>
            <p>Bienvenue sur la page d'accueil</p>
        `;
    });

    aboutRoute.setRenderCallback(() => {
        console.log("Rendering About Page");
        aboutRoute.innerHTML = `
            <h1>À propos</h1>
            <p>Voici des informations sur nous.</p>
        `;
    });

    contactRoute.setRenderCallback(() => {
        console.log("Rendering Contact Page");
        contactRoute.innerHTML = `
            <h1>Contact</h1>
            <p>Contactez-nous ici.</p>
        `;
    });
</script>

Fonctionnement

  • <hash-router> : Composant principal qui gère les différentes vues de l'application.
  • <hash-router-element> : Définit une vue liée à un path (hash) spécifique, comme #home ou #about. Utilise la méthode setElement() pour définir le modèle à rendre lorsque la route devient active.
  • Lorsqu'un utilisateur clique sur un lien ou modifie le hash de l'URL, le composant affiche dynamiquement la vue correspondante sans recharger la page.

Ajouter plus de routes

Vous pouvez ajouter d'autres vues en utilisant des hash-router-element supplémentaires :

const servicesTemplate = html`
    <h1>Nos Services</h1>
    <p>Découvrez nos services ici.</p>
`;

// Ajouter une nouvelle route
const servicesRoute = document.createElement('hash-router-element');
servicesRoute.path = "#services";
servicesRoute.setElement(servicesTemplate);
document.querySelector('hash-router').appendChild(servicesRoute);

Notes

  • Chaque hash-router-element doit avoir un path unique correspondant au hash de l'URL.
  • Les templates définis à l'aide de setElement() permettent un rendu dynamique lorsque la route devient active.
  • Si aucun hash ne correspond à une vue, celle-ci restera cachée par défaut.