{"id":13630130,"url":"https://github.com/YogliB/svelte-component-template","last_synced_at":"2025-04-17T13:31:35.889Z","repository":{"id":37251587,"uuid":"189659554","full_name":"YogliB/svelte-component-template","owner":"YogliB","description":"A highly-opinionated base for building shareable Svelte 3 components","archived":true,"fork":false,"pushed_at":"2023-07-06T20:30:00.000Z","size":5447,"stargazers_count":339,"open_issues_count":11,"forks_count":19,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-08-01T22:45:30.398Z","etag":null,"topics":["ci","components","library","svelte","template"],"latest_commit_sha":null,"homepage":"https://svelte-component-template.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YogliB.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-05-31T21:17:22.000Z","updated_at":"2024-07-16T14:59:28.000Z","dependencies_parsed_at":"2024-01-06T01:20:11.600Z","dependency_job_id":null,"html_url":"https://github.com/YogliB/svelte-component-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YogliB%2Fsvelte-component-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YogliB%2Fsvelte-component-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YogliB%2Fsvelte-component-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YogliB%2Fsvelte-component-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YogliB","download_url":"https://codeload.github.com/YogliB/svelte-component-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223757175,"owners_count":17197509,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ci","components","library","svelte","template"],"created_at":"2024-08-01T22:01:31.078Z","updated_at":"2024-11-08T21:30:51.447Z","avatar_url":"https://github.com/YogliB.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","templates"],"sub_categories":["editor tools"],"readme":"# Svelte 3 Component Template\n\n## A highly-opinionated base for building shareable Svelte 3 components\n\n[![](https://github.com/YogliB/svelte-component-template/workflows/Node%20CI/badge.svg)](https://github.com/YogliB/svelte-component-template/actions?query=workflow%3A%22Node+CI%22)\n[![Known Vulnerabilities](https://snyk.io/test/github/YogliB/svelte-component-template/badge.svg)](https://snyk.io/test/github/YogliB/svelte-component-template)\n[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n\n## Table of Contents\n\n1. [Features](#features)\n1. [Getting started](#getting-started)\n1. [Developing](#developing)\n1. [Preprocessors](#preprocessors)\n1. [Testing](#testing)\n1. [Publishing to npm](#publishing-to-npm)\n1. [Frequently Asked Questions](#frequently-asked-questions)\n\n## Features\n\n-   [Preprocessing](https://github.com/sveltejs/svelte-preprocess/blob/main/README.md)\n-   [Formating](https://github.com/sveltejs/prettier-plugin-svelte)\n-   [Linting](https://github.com/sveltejs/eslint-plugin-svelte3)\n-   [Storybook](https://storybook.js.org/docs/svelte/get-started/introduction)\n-   [Testing](https://storybook.js.org/docs/svelte/workflows/testing-with-storybook)\n\n## Getting Started\n\n1. Clone the template:\n\nOption #1: Clone it with Github's \"Use this template\" option:\n\n[![image](https://user-images.githubusercontent.com/10498929/131304421-07a7f57c-4faa-4900-9a09-f7a1067e886c.png)](https://github.com/YogliB/svelte-component-template/generate)\n\nOption #2: Clone this repository with [degit](https://github.com/Rich-Harris/degit):\n\n```bash\nnpx degit YogliB/svelte-component-template `my-new-component`\n```\n\n2. Enter the folder:\n\n```bash\ncd my-new-component\n```\n\n2. Initiate [Git](https://git-scm.com/):\n\n```bash\ngit init\n```\n\n3. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Configure `package.json`:\n\n```bash\nnpm init\n```\n\n4. Start coding:\n\n```bash\ncode .\n```\n\n-   Your component's source code lives in `src/lib/[MyComponent]/[MyComponent].svelte`.\n\n## Developing\n\n1. Start [SvelteKit](https://kit.svelte.dev/):\n\n```bash\nnpm run dev\n```\n\n2. Edit a component file in `src/lib`, save it and watch the magic happens.\n\n3. Export your components in `src/lib/index.js`.\n\n4. Import your components in `src/routes/index.svelte` from `$lib$, so you can preview and test it.\n\n5. Navigate to [localhost:3000](http://localhost:3000) to see your components live.\n\n## Preprocessors\n\nAll preprocessing is handled with [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess).\nConfigure it in [`svelte.config.js`](https://kit.svelte.dev/docs#configuration).\n\n## Testing\n\n### Interaction testing\n\nThis is a simple and intuitive method that can be done through Storybook, with the help of [Cypress](https://cypress.io).\nAnd example and pre-made test scripts can be found in this repository, and more info can be found in [Storybook's docs](https://storybook.js.org/docs/svelte/workflows/interaction-testing).\n\n### Snapshot testing\n\nIn this repo you'll find a [basic workflow](.github/chromatic.yml) that uses [Chromatic](https://www.chromatic.com/) for snapshot testing.\n\n## Frequently Asked Questions\n\n### What's the `index.js` file for?\n\nIt's for Svelte to be able to import multiple components from a single source.\n\nFor instance, it lets the user do:\n\n```javascript\nimport { MyComponent, MyOtherComponent } from 'my-component-library';\n```\n\nInstead of:\n\n```javascript\nimport MyComponent from 'my-component-library/components/MyComponent.svelte';\nimport MyOtherComponent from 'my-component-library/components/MyOtherComponent';\n```\n\n### How do I include 3'rd party css in my components?\n\nThere are a few options to do this:\n\n1. Don't include 3'rd party css and just tell your users to do that (Probably using PostCSS).\n2. Include it via a cdn, like so:\n\n```css\n@import url('https://unpkg.com/@scope/package/main.min.css');\n```\n\n## Publishing to [npm](https://www.npmjs.com)\n\n1. Prepare the package for publishing:\n\n```bash\nnpm run package\n```\n\n2. Publish the package:\n\n```bash\ncd package\nnpm run publish\n```\n\n-   [Creating and publishing scoped public packages](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages)\n-   [Creating and publishing unscoped public packages](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYogliB%2Fsvelte-component-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FYogliB%2Fsvelte-component-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYogliB%2Fsvelte-component-template/lists"}