Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/demoorjasper/parcel-plugin-svelte
A parcel plugin that enables svelte support
https://github.com/demoorjasper/parcel-plugin-svelte
hacktoberfest parcel svelte
Last synced: 5 days ago
JSON representation
A parcel plugin that enables svelte support
- Host: GitHub
- URL: https://github.com/demoorjasper/parcel-plugin-svelte
- Owner: DeMoorJasper
- License: mit
- Created: 2017-12-10T10:55:53.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-04T09:27:31.000Z (almost 3 years ago)
- Last Synced: 2024-12-21T17:39:37.582Z (5 days ago)
- Topics: hacktoberfest, parcel, svelte
- Language: JavaScript
- Homepage:
- Size: 448 KB
- Stars: 231
- Watchers: 7
- Forks: 31
- Open Issues: 12
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# parcel-plugin-svelte
[](https://dev.azure.com/DeMoorJasper/parcel-plugin-svelte/_build/latest?definitionId=3&branchName=master)
A parcel plugin that enables svelte support
## Getting Started
### Install dependencies
```bash
yarn add svelte parcel-bundler parcel-plugin-svelte @babel/polyfill -D
```
### Update the package.json
Update your `package.json` to contain these scripts (for more information on these commands, see: https://v1.parceljs.org/cli.html):
```json
{
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
}
}
```
### Create the files
Create an html file that will be used as the entrypoint, name it `index.html`:
```html
Parcel Plugin Svelte Example
```
Create a simple JavaScript file named `main.js`:
```Javascript
import '@babel/polyfill';
import App from './App.svelte';
new App({
target: document.getElementById('demo'),
props: {
name: 'world'
}
});
```
Create a Svelte file named `App.svelte`:
```svelte
Hello { name }, the time is { hours }:{ minutes }:{ seconds }
.the-time {
font-weight: bold;
}
import { onMount } from 'svelte';
export let name = 'Anonymous';
let time = new Date();
onMount(() => {
const timer = setInterval(() => {
time = new Date();
}, 1000)
return () => {
clearInterval(timer);
}
})
let hours, minutes, seconds;
$: {
hours = time.getHours();
minutes = time.getMinutes();
seconds = time.getSeconds();
}
```
### Further reading
To continue your journey into Svelte and Parcel please have a look at their documentation:
- https://svelte.dev/
- https://parceljs.org/
for configuring this plugin, please read [#Configuration](https://github.com/DeMoorJasper/parcel-plugin-svelte#Configuration)
## Configuration
The default configuration should work for most people but for anyone who would like to change the way svelte compiles the files there is the possibility to configure it.
This can be done though a `svelte.config.js` file, `.svelterc` file or `svelte` field in `package.json`.
For documentation on which parameters you can set and use look at the official [svelte docs](https://svelte.dev/docs#svelte_compile).
```Javascript
// Used by svelte.compilerOptions
compilerOptions: {
...
},
// Used by svelte.preprocess
preprocess: {
...
}
```
**_Note: the use of `compiler` property will be deprecated on the next major version, you should use the`compilerOptions` property instead._**
### CSS CompilerOptions
If you set `compilerOptions.css` to `false`, CSS will be bundled in a separate file. It also enables post-transformations provided by Parcel such as PostCSS and file resolution for `url()`.
## How does it work?
If you want to know how it works have a look at [my article](https://medium.com/@jasperdemoor/writing-a-parcel-plugin-3936271cbaaa) about this plugin, might help if you wanna fix a bug or write your own parcel-plugin.
## Any more questions?
Any more questions about how the plugin works internally or how to use it? Feel free to open an issue in the repository.
## License
This project is licensed under the MIT License