https://github.com/mattjennings/svelte-typescript-component-template

A Svelte component template with Typescript
https://github.com/mattjennings/svelte-typescript-component-template

Last synced: about 8 hours ago
JSON representation

A Svelte component template with Typescript

• Host: GitHub
• URL: https://github.com/mattjennings/svelte-typescript-component-template
• Owner: mattjennings
• Created: 2020-10-18T21:51:23.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-03-11T00:43:52.000Z (over 3 years ago)
• Last Synced: 2023-03-05T14:09:00.751Z (over 1 year ago)
• Language: JavaScript
• Size: 21.5 KB
• Stars: 30
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte-typescript-component-template

A base for building shareable Svelte components written in Typescript.

This is based on [sveltejs/component-template](https://github.com/sveltejs/component-template) and allows consumers to import the .svelte components without requiring Typescript (see ["Consuming Components"](#consuming-components) below).

```bash

npx degit mattjennings/svelte-typescript-component-template#main my-component

cd my-component

npm install # or yarn

```

Your component's source code lives in `src/Component.svelte`.

You can create a package that exports multiple components by adding them to the `src` directory and editing `src/index.ts` to reexport them as named exports.

## Setting Up

- Run `npm init` (or `yarn init`)

- Replace this README with your own

## Consuming Components

Your package.json has a `"svelte"` field pointing to `src/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/sveltejs/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"`). **This is recommended.**

For everyone else, `npm run build` will bundle your component's source code into a plain JavaScript module (`dist/index.mjs`) and a UMD script (`dist/index.js`). This will happen automatically when you publish your component to npm, courtesy of the `prepublishOnly` hook in package.json.