svelte web components template
1.0.0
Un modèle de base pour créer une bibliothèque de composants Web partageables à l'aide de Vite, Svelte et TypeScript.
Ces modèles génèrent des composants Web de vanille qui peuvent être utilisés avec un HTML ordinaire ou dans des cadres majeurs, tels que React, Angular, Vue ou Svelte (voir compatibilité).
Vous pouvez créer directement un nouveau repo GitHub à partir de ce modèle en sélectionnant le bouton Utiliser ce modèle sur GitHub.
Vous pouvez également le cloner localement avec les commandes suivantes:
npx degit sinedied/svelte-web-components-template#main my-component-lib
cd my-component-lib
npm install Le code source de vos composants vit dans le dossier lib/ . Seuls les composants avec l'extension .wc.svelte seront exportés sous forme de composants Web et disponibles dans votre bibliothèque. Cela signifie que vous pouvez également utiliser des composants svelte réguliers avec l'extension .svelte en tant que composants enfants pour vos détails d'implémentation.
Vous pouvez ajouter des composants supplémentaires en les ajoutant au dossier lib et en modifiant lib/index.js .
Vous pouvez démarrer un serveur de développement avec:
npm startOuvrez ensuite votre navigateur à LocalHost: 5173.
Cela créera l'application de démonstration située dans la demo/ dossier, dans laquelle vous pouvez utiliser et tester vos composants Web pendant le développement.
Si vous avez besoin de tests unitaires, vous pouvez jeter un œil à la bibliothèque de tests de plaisanterie et de plaisanterie.
L'application de démonstration est fournie pour le développement et les tests de vos composants, c'est pourquoi il importe directement les fichiers .svelte à partir du dossier lib/ par défaut.
Si vous préférez, vous pouvez importer les composants Web construits à partir du dossier dist/ , en modifiant demo/src/App.svelte et en remplaçant l' import '../../lib'; Instruction avec import '../../../dist/lib'; Si vous avez l'option bundleComponents activée ou importez individuellement vos composants avec import import '../../dist/MyComponent.wc.js'; sinon.
Vous devrez également vous assurer d'exécuter le script npm run build pour générer d'abord le dossier dist/lib/ .
La npm run build crémera la bibliothèque de composants Web dans le dossier dist/lib/ . Il crée à la fois un module ES ( dist/lib/<your-lib>.js ) adapté à Bundler (non-mini-mental), un module ES minifié ( dist/lib/<your-lib>.min.js ) et un script UMD régulier ( dist/lib/<your-lib>.umd.js ).
La build est automatiquement appelée lors de l'exécution de npm publish pour distribuer votre bibliothèque, grâce à la saisie de script prepublishOnly dans package.json .
Ce modèle ne fournit aucun composant Web Polyfills pour le support des navigateurs plus âgés. Il est généralement préférable de laisser cette tâche à l'application de l'hôte, d'où leur laissée.
Tous les accessoires acceptés par votre composant Web sont automatiquement transformés en attributs d'élément. Étant donné que Camelcase ou Pascalcase ne fonctionne pas en HTML, vous devez vous assurer de nommer vos accessoires en minuscules.
< script >
export let myvalue = "Default" ;
</ script > L'événement de syntaxe Svelte pour écouter des événements comme on:myevent ne fonctionne pas avec les événements envoyés à partir d'un composant Web Svelte (# 3119).
Vous devez utiliser une solution de contournement pour cela, en créant un CustomEvent et en le dépêchant.
Voici un exemple:
// MyComponent.wc.svelte
< svelte:options tag =" my-component " />
< script >
import { get_current_component } from "svelte/internal" ;
const component = get_current_component ( ) ;
// example function for dispatching events
const dispatchEvent = ( name , detail ) =>
component . dispatchEvent ( new CustomEvent ( name , { detail } ) ) ;
</ script >
< button on:click = {() = > dispatchEvent("test", "Hello!")} >
Click to dispatch event
</ button > Par défaut, ce modèle créera tous les composants en un seul module.
Si vous préférez construire chaque composant dans son propre module, vous pouvez le faire en définissant la variable d'environnement BUNDLE_COMPONENTS sur false , ou en modifiant vite.config.js et en définissant l'option bundleComponents sur false .
Ensuite, vous devez également remplacer le contenu des packages/lib/index.ts par:
export default ( ) => {
import ( './MyComponent.wc.svelte' ) ;
// Import each of your component this way
} ; Cela permettra le coup de code et générera un module ES pour chaque composant du dossier dist/lib/ .
Au fur et à mesure que vous avez changé la façon dont les composants sont exportés, vous devez également remplacer l' import '../../lib'; Instruction dans demo/src/App.svelte to import '../../lib/MyComponent.wc.svelte'; .
allowJs dans le modèle TS? Bien que allowJs: false empêcherait en effet l'utilisation des fichiers .js dans le projet, il n'empêche pas l'utilisation de la syntaxe JavaScript dans les fichiers .svelte . En outre, cela forcerait checkJs: false , apportant le pire des deux mondes: ne pas pouvoir garantir que la base de code entière est dactylographiée, et aussi avoir une époque pire pour le JavaScript existant. De plus, il existe des cas d'utilisation valides dans lesquels une base de code mixte peut être pertinente.
La préservation de l'État HMR est livrée avec un certain nombre de gotchas! Il a été désactivé par défaut dans svelte-hmr et @sveltejs/vite-plugin-svelte en raison de son comportement souvent surprenant. Vous pouvez lire les détails ici.
Si vous avez un état qui est important de conserver dans un composant, envisagez de créer un magasin externe qui ne serait pas remplacé par HMR.
// store.ts
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable ( 0 )
