@octree/svelte-components

Lancement en local

yarn
yarn storybook

Pusher des changements

Lorsque vous changez des composants dans la lib, une fois terminé, exécutez la commande suivante:

yarn build
yarn package

Cela permet de mettre à jour les fichiers build de vos composants afin de les rendre accessibles depuis un autre projet. Ensuite, il faut publier tout cela! Pour ça, il faut d'abord changer la version de votre package.json de votre lib:

{
	"name": "@octree/svelte-components",
	"version": "0.0.3"
}

Lancez:

npm publish --access public

Connectez-vous, entrez l'authentification reçue par message et voilà!

Installation dans un autre projet en local

Avant tout, installez le projet sur votre machine (idéalement dans le même dossier que le nouveau projet, sinon vous devrez redéfinir le lien relatif dans le package.json):

"dependencies": {
	"svelte-components": "link:../svelte-components",
	"yarn": "^1.22.21"
}

Ensuite, exécutez les commandes suivantes:

yarn -v
yarn set version 1.22.21
yarn link "sveltekit-components"
yarn
cd chemin/vers/svelte-components
yarn link
cd chemin/vers/votre/projet/frontend
yarn link "@octree/svelte-components"

Pour que les composants aient le style attendu, installez Tailwind CSS et suivez la documentation pour SvelteKit, ainsi que daisyUI. Une fois ces deux bibliothèques installées, vos composants n'arboreront pas encore le magnifique style de daisyUI. Ajoutez une ligne dans le fichier tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		'./node_modules/@octree/svelte-components/**/*.{html,js,svelte,ts}'
	],
	theme: {
		extend: {}
	},
	plugins: [require('daisyui')]
};

Puis exécutez :

yarn
yarn dev

Installation dans un autre projet depuis npm

yarn -v
yarn set version 1.22.21
yarn add @octree/svelte-components

Pour que les composants aient le style attendu, installez Tailwind CSS et suivez la documentation pour SvelteKit, ainsi que daisyUI. Une fois ces deux bibliothèques installées, vos composants n'arboreront pas encore le magnifique style de daisyUI. Ajoutez une ligne dans le fichier tailwind.config.js :

/** @type {import('tailwindcss').Config} */
export default {
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		'./node_modules/@octree/svelte-components/**/*.{html,js,svelte,ts}'
	],
	theme: {
		extend: {}
	},
	plugins: [require('daisyui')]
};

Puis exécutez :

yarn
yarn dev

Mise à jour de la lib

N'oubliez pas de vérifier la version de la lib. Si elle n'est pas à jour, changez la version dans le package.json de votre projet où vous souhaitez installer la lib :

"dependencies": {
    "@octree/svelte-components": "^0.0.3",
    "D": "^1.0.0",
    "autoprefixer": "^10.4.18",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1"
}

Puis exécutez, pour mettre à jour vos dépendances :

yarn
yarn dev

deployer la lib

creé un package

yarn build-storybook

run un server avec l'application

npx serve ./storybook-static/