sveltejs / component-template

A base for building shareable Svelte components

Psst — looking for a more complete solution? Check out SvelteKit and its package command which gives you more built-in features like TypeScript transpilation, type definition generation and a built-in playground to test your library.

Looking for an app template instead? Go here --> sveltejs/template

---

component-template

A base for building shareable Svelte components. Clone it with degit:

npx degit sveltejs/component-template my-new-component
cd my-new-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.js to reexport them as named exports.

TODO

• some firm opinions about the best way to test components
• update degit so that it automates some of the setup work

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 or svelte-loader (where 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.

component-template's Issues

Custom Element build target is missing

If the Svelte component includes <svelte:options tag="my-element" />, then the following warning is shown with npm run build:

(!) Plugin svelte: The 'tag' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?
src/Component.svelte
1: <svelte:options tag="my-element" />

Changing the svelte plugin call in rollup.config.js (following the example in their own README) to this:

svelte({
	compilerOptions: {customElement: true}
}),

throws this error message:

% npm run build

> build
> rollup -c


src/index.js → dist/index.mjs, dist/index.js...
[!] (plugin svelte) Error: Unrecognized option 'compilerOptions'
src/Component.svelte
Error: Unrecognized option 'compilerOptions'
    at /Users/nileshtr/my-new-component/node_modules/svelte/compiler.js:31305:20

It's not clear what change is needed in rollup.config.js to get a custom element build by setting customElement: true compile option. Ideally, this template should be ready to export the components as custom elements. But at minimum, the README should document what change to make in the config to get a custom element build.

Build error: " `this` has been rewritten to `undefined` "

Hello! I've cloned the repo, run npm i and then saw the error:

"this has been rewritten to undefined"

accrording to the "Rollup" doc https://rollupjs.org/guide/en/#error-this-is-undefined we can use the options.context and options.moduleContext.

Should we set those options ?

ES5 transpiling ?

Thank you for the template @Rich-Harris !

I see that there is no Babel/Buble plugged to this template.

Do you think it should be done (for consumers who will use index.[m]js) ? Or should they implement it in their consumer stack ?

If you think it should be done in this repo, how would you define the supported browsers ?

Add a TypeScript component template

Is your feature request related to a problem? Please describe.
Many people want to use Svelte with TypeScript. With svelte-preprocess, a fitting rollup-config and Svelte extension from VSCode this is working good already.

Describe the solution you'd like
Add a sveltejs/typescript-component-template similar to https://github.com/sveltejs/component-template.

How important is this feature to you?
Important to get the word out that Svelte supports TypeScript in the component-template as well.

Related issues
This issue is based on the issue in the svelte/svelte repository. The app-template is already "migrated" to TypeScript, but this issue addresses the component-template.

some documentation suggestions

Should the documentation include these instructions?

Replace the content of src/index.js with a line like the following for each component:

export {default as MyComponentName} from './MyComponentName.svelte';

Edit package.json.

• Change the name property value to "library-name".
• Add a version property such as "version": "0.1.0",.

warning: option.name should be capitalized

With the default svelte field in package.json ("svelte": "index.svelte"), using the published component produce the following compiler warning: option.name should be capitalized.

Example in this REPL.

I changed index.svelte to SvelteKey.svelte in the following version, and the warning disappeared: updated REPL.

Upgrade template for v3 of Svelte

It would be great if this template is updated for v3. Also a custom element example would be awesome!

Advanced examples with multiple components?

I just follow the README and setup your template.

Now I'm facing a blank index.svelte file.

Having some documentation and example and how to export multiple templates would be welcomed! 👍

Local dev server for building and testing components

It would be great if we had tools and scripts for building and testing components within the component template itself so that it will be easy to author new components in Svelte.

Preprocessor support

If someone wants to publish a component that they've written that needs preprocessors, what they should be publishing is main/module pointing at a completely compiled version (like now), but svelte should point to the preprocesed component(s), not their original source. I'm not sure what the best way to do this is.

how to use it? what is .mjs file?

Repository as template

Hi, is it possible to set this option for this repository?

Document how to use a component outside of svelte

I'm not sure this is the good place, but as the documentation says we can use svelte component directly as JS, I think it would be useful to have some sample with at least vanillaJS and maybe some popular framework integration (jQuery, Vue, Angular, React...).

What is the meaning of these lines in rollup.config.js?

What is the meaning of these lines?

https://github.com/sveltejs/component-template/blob/master/rollup.config.js#L5-L8

const name = pkg.name
	.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
	.replace(/^\w/, m => m.toUpperCase())
	.replace(/-\w/g, m => m[1].toUpperCase());

Thanks.

Why does it need to be a template only project, why not a full CLI?

I was going to start a new component using svelte for a nice change of scenery, but after trying to set up, eslint + typescript + tailwind and so on, its just not worth it, time is money as many people say.

I understand that the template is more like to be a bare minimum to run svelte and so any developer can use any tool they want, but we all know that the bare minimum is never a thing.

Why not follow the vue way in this one, making a cli where you just need to click if you want or not some features, makes it easier for people to start using svelte without looking for 100 websites to find out that none of those actually work or are easy to set up.

Storybook implementation

As the main goal of this template is tool publish independent components, it would be a great addition to ship a ready-to-use storybook implementation on it.

Ref: https://storybook.js.org/

It may be optional on setup with a command or an indication on the documentation to properly remove it.

emitCss

I tried implement the pattern from this library but using https://github.com/sveltejs/template I did this because I wanted typescript and a dev server while developing the component.

I kept getting this error.

Identifier directly after number (Note that you need plugins to import files that are not JavaScript) 

Took me quite a while to figure out with rollup-plugin-svelte 7 you need emitCss: false.

    svelte({
      emitCss: false,
    }),

This might be obvious to other but as someone just starting with svelte it wasn't. Hopefully this might help someone else. It would be nice if this template was better aligned with https://github.com/sveltejs/template

Binding a DOM element doesn't work when imported in a different project

Hi,

I wrote the following component based on this template.

If I use the component directly in a component, it works fine. Before I was going to publish the component to npm, I did npm link to test it locally. In another svelte project, I ran npm link svelte-lazy-image-loader and used the component as outlined in the readme.

Unfortunately, it only shows the loader but does not load the actual image. In the console, it says that image is undefined.

The code of the component looks like this:

<script>
    import { onMount } from 'svelte';

    export let url = '';

    let image;

    onMount(() => {
        image.src = url;
    });
</script>

<img src="" bind:this={image} />

If I, however, copy the content of index.svelte directly into the other project, it works fine. What can I do to fix that? Thanks