0.5.0 • Published 4 years ago

pelte v0.5.0

Weekly downloads
1
License
ISC
Repository
github
Last release
4 years ago

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

Help?

See other available arguments with:

pelte ./MySvelteComponent.svelte --help

FEATURES COMING SOON:

Soon I will add some other features:

  • 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.