publish-svelte
publish-svelte or "pelte" is a cli tool to easily compile, bundle and publish svelte components to npm. The bundle will contain both svelte files and vanilla js files, so the components can run "everywhere" no matter the framework. A readme file will also be published to npm, which will describe how to use the component.
"pelte" is optimal if you have an existing svelte project and you quickly want to share one of your components with the world. You don't need to extract the component from your project and fiddle with npm link and import statements.
Installation
npm install -g publish-svelte
Usage
Publish your svelte component to npm:
pelte ./MySvelteComponent.svelte
This will automatically compile, bundle and publish to npm. The first time you publish a component, "pelte" will be ask for a name and a version. You can just press enter if you like the suggestions.
"pelte" will create two files MySvelteComponent.md and MySvelteComponent.json. In the md-file you can describe your component and in the json-file you can change the name, version and more.
You can also increment the package version with patch, minor or major. Here the component is published with a patched version:
pelte ./MySvelteComponent.svelte --patch
Where is the bundle?
The bundle is removed after publish. You can examine the bundle without publishing to npm with:
pelte ./MySvelteComponent.svelte --skip-publish --keep-bundle
"--skip-publish" to skip publishing to npm and "--keep-bundle" will keep the bundle files which are otherwise cleaned.
For instance, you can open the index-example-umd.html and see your component in action.
Custom Elements (aka web components)
Pelte will automatically create a web component if your svelte component contains this line:
<svelte:options tag="my-svelte-component"/>Then you can use the web component like this:
<body>
<my-svelte-component></my-svelte-component>
</body>You can read more on the official svelte page svelte page
Programmatic Usage
In rare cases, you might want to run pelte programmatically.
const { pelte } = require('publish-svelte');
const options = {
srcFile: __dirname + '/Simple.svelte',
keepBundle: true,
skipPublish: true
}
pelte(options)Pelte also exports a generate function that will generate bundles in-memory, but not write them to a file. This can be used if you want fine-grained control of the output bundle.
Note: The keepBundle and skipPublish options are ignored by generate
const { generate } = require('publish-svelte');
const options = {
srcFile: __dirname + '/Simple.svelte',
}
generate(options).then(bundles => {
const umd = bundles.find(bundle => bundle.options.format === 'umd')
console.log('this is the umd bundle', umd)
})Help?
See other available arguments with:
pelte ./MySvelteComponent.svelte --help
FEATURES COMING SOON:
Soon I will add some other features:
- Better typescript support. There is some support but I have not tested more complex svelte components.
- A react adapter should be included. Likely by using svelte adapter
- Autogenerated typescript
- Angular adapter. If possible?
- Third party dependencies are added as optional dependencies. This is required for when a svelte project imports a pelte package.