{"id":28413278,"url":"https://github.com/vikbert/pixssvelte","last_synced_at":"2025-06-24T20:31:18.285Z","repository":{"id":57137068,"uuid":"338190184","full_name":"vikbert/pixssvelte","owner":"vikbert","description":null,"archived":false,"fork":false,"pushed_at":"2021-02-15T13:14:40.000Z","size":756,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-03T15:26:19.830Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vikbert.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"docs/CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-12T00:35:15.000Z","updated_at":"2021-02-15T13:14:42.000Z","dependencies_parsed_at":"2022-09-01T04:01:04.820Z","dependency_job_id":null,"html_url":"https://github.com/vikbert/pixssvelte","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vikbert/pixssvelte","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikbert%2Fpixssvelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikbert%2Fpixssvelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikbert%2Fpixssvelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikbert%2Fpixssvelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vikbert","download_url":"https://codeload.github.com/vikbert/pixssvelte/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikbert%2Fpixssvelte/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261751545,"owners_count":23204447,"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":[],"created_at":"2025-06-03T04:33:48.550Z","updated_at":"2025-06-24T20:31:18.278Z","avatar_url":"https://github.com/vikbert.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte 3 Component Template\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[![](https://badgen.net/dependabot/YogliB/svelte-component-template/?icon=dependabot)](https://dependabot.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. [Consuming components](#consuming-components)\n1. [Backward Compatibility](#backward-compatibility)\n1. [Preprocessors](#preprocessors)\n1. [Testing](#testing)\n1. [Publishing to npm](#publishing-to-npm)\n1. [Frequently Asked Questions](#frequently-asked-questions)\n1. [Credits \u0026 Inspiration](#credits-\u0026-inspiration)\n\n## Features\n\n-   Autoprefixing CSS\n-   Preprocessing\n-   Formating\n-   Linting\n-   Testing\n-   [Storybook](https://www.learnstorybook.com/intro-to-storybook/svelte/en/get-started/)\n\n## Getting Started\n\n1. Choose your template (regular/monorepo)\n\n1. Clone it with [degit](https://github.com/Rich-Harris/degit):\n\n```bash\nnpx degit YogliB/svelte-component-template my-new-component\nor\nnpx degit \"YogliB/svelte-component-template#monorepo\" my-new-component\n```\n\n3. `cd` into the folder and install the `node_modules`:\n\n```bash\ncd my-new-component\ngit init\n```\n\n```bash\nnpm install\n```\n\nor:\n```bash\nyarn\n```\n\n\n\n- For monorepo run:\n```bash\nnpm run bootstrap\n```\n\nor:\n```bash\nyarn bootstrap\n```\n\n4. Run `npm init`, to configure the project.\n\nYour component's source code lives in `src/components/[Footer].svelte`.\n\n## Developing\n\n1. Start [Rollup](https://rollupjs.org):\n\n```bash\nnpm run dev\n```\n\n2. Edit a component file in `src/components`, save it and watch the magic happens.\n\n3. Make sure your component is exported in `src/components/index.js`.\n\n4. Make sure your component is imported and nested in `src/App.svelte`, so you can preview and test it.\n\n5. Navigate to [localhost:5000](http://localhost:5000) to see your components live.\n\n## Consuming Components\n\nYour package.json has a `\"svelte\"` field pointing to `src/components/index.js`, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte) or [svelte-loader](https://github.com/sveltejs/svelte-loader) (where [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config includes `\"svelte\"`).\n\n## Backward Compatibility\n\nThis template uses [svelte-preprocess](https://github.com/kaisermann/svelte-preprocess) in order to integrate [PostCSS](https://postcss.org) auto-prefixing capabilities \u0026 [Babel](https://babeljs.io/)'s transpiling capabilities into the build process.\n\n### Browserlist\n\n`PostCSS` uses [browserlist](https://github.com/browserslist/browserslist) under the hood, in order to \"know\" what css to prefix.\n\nThe `browserlist` configuration is located inside the `package.json`.\n\n## Preprocessors\n\nThis template comes with the [svelte-preprocess](https://github.com/kaisermann/svelte-preprocess) by default, which simplifies the use of preprocessors in components.\n\n### Usage\n\n[Getting Started](https://github.com/sveltejs/svelte-preprocess/blob/master/docs/getting-started.md) with svelte-preprocess.\n\n-   To configure svelte-preprocess use the `sveltePreprocessConfig` variable in `./preprocess.js`\n\n## Testing\n\nThis template uses [Cypress](https://www.cypress.io/) \u0026 [testing-library](https://testing-library.com/docs/cypress-testing-library/intro) for testing.\n\nIt is highly recommended going through their docs if you intend on testing your components.\n\nYou can witness a simple example by running `npm run cy:open`.\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 { Footer, MyOtherComponent } from 'my-component-library';\n```\n\nInstead of:\n\n```javascript\nimport Footer from 'my-component-library/components/Footer.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\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\n## Credits \u0026 Inspiration\n\n-   Official [component-template](https://github.com/sveltejs/component-template) by @Rich-Harris\n-   Official [app-template](https://github.com/sveltejs/template) by @Rich-Harris\n-   [This](https://github.com/sveltejs/component-template/pull/5) PR by @sisou\n-   [This](https://github.com/sveltejs/component-template/pull/31) PR by @BlackFenix2\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikbert%2Fpixssvelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvikbert%2Fpixssvelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikbert%2Fpixssvelte/lists"}