Parcel-transformer-svelte-4 NPM

parcel-transformer-svelte-4

A Parcel 2 transformer for Svelte 3 and 4.

Installation

npm install parcel-transformer-svelte-4 -D

After this you should configure in .parcelrc the transformation for Svelte files:

{
  "extends": ["@parcel/config-default"],
  "transformers": {
    "*.svelte": ["parcel-transformer-svelte"]
  }
}

To enable Svelte 4 support, you must also enable the Exports Map feature in Parcel 2.9+ by padding this to package.json
	"@parcel/resolver-default": {
		"packageExports": true
	},

Configuration

You can change Svelte options though a .svelterc, svelte.config.js file or svelte field in package.json.

For documentation on which options you can use look at the official svelte docs.

// Options used by svelte.compile
compilerOptions: {
  ...
},
// Preprocessors for svelte.preprocess
preprocessors: {
  ...
}

Usage

In order to use svelte inside of your project, all you need to do is initialise a small html file:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Svelte App</title>
  </head>
  <body class="">
    <script type="module" src="./main.ts"></script>
  </body>
</html>

And link it to a js (or ts) file where you import and run the app.svelte:

import App from './main.svelte';

const app = new App({
  target: document.body,
  props: {
    name: 'Svelte',
  },
});

export default app;

There you have it! That's all you need. If you are struggling feel free to open a discussion and I'll be right over to help you out!

License

MIT License

parcel transformer svelte svelte-4

@parcel/plugin @parcel/source-map @parcel/utils svelte

1.2.5

2 months ago

1.2.4

2 months ago

parcel-transformer-svelte-4 v1.2.5