{"id":13426103,"url":"https://github.com/DeMoorJasper/parcel-plugin-svelte","last_synced_at":"2025-03-15T20:32:02.063Z","repository":{"id":44618736,"uuid":"113742591","full_name":"DeMoorJasper/parcel-plugin-svelte","owner":"DeMoorJasper","description":"A parcel plugin that enables svelte support","archived":false,"fork":false,"pushed_at":"2022-02-04T09:27:31.000Z","size":459,"stargazers_count":231,"open_issues_count":12,"forks_count":31,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-07T09:35:14.223Z","etag":null,"topics":["hacktoberfest","parcel","svelte"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DeMoorJasper.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-10T10:55:53.000Z","updated_at":"2024-08-12T17:04:58.000Z","dependencies_parsed_at":"2022-09-14T18:40:30.511Z","dependency_job_id":null,"html_url":"https://github.com/DeMoorJasper/parcel-plugin-svelte","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeMoorJasper%2Fparcel-plugin-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeMoorJasper%2Fparcel-plugin-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeMoorJasper%2Fparcel-plugin-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeMoorJasper%2Fparcel-plugin-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DeMoorJasper","download_url":"https://codeload.github.com/DeMoorJasper/parcel-plugin-svelte/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243521280,"owners_count":20304186,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","parcel","svelte"],"created_at":"2024-07-31T00:01:26.375Z","updated_at":"2025-03-15T20:31:57.030Z","avatar_url":"https://github.com/DeMoorJasper.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Plugins"],"sub_categories":["Frameworks"],"readme":"# parcel-plugin-svelte\n\n[![Build Status](https://dev.azure.com/DeMoorJasper/parcel-plugin-svelte/_apis/build/status/DeMoorJasper.parcel-plugin-svelte?branchName=master)](https://dev.azure.com/DeMoorJasper/parcel-plugin-svelte/_build/latest?definitionId=3\u0026branchName=master)\n\nA parcel plugin that enables svelte support\n\n## Getting Started\n\n### Install dependencies\n\n```bash\nyarn add svelte parcel-bundler parcel-plugin-svelte @babel/polyfill -D\n```\n\n### Update the package.json\n\nUpdate your `package.json` to contain these scripts (for more information on these commands, see: https://v1.parceljs.org/cli.html):\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"parcel index.html\",\n    \"build\": \"parcel build index.html\"\n  }\n}\n```\n\n### Create the files\n\nCreate an html file that will be used as the entrypoint, name it `index.html`:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" /\u003e\n    \u003ctitle\u003eParcel Plugin Svelte Example\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"demo\"\u003e\u003c/div\u003e\n\n    \u003c!-- This script tag points to the source of the JS file we want to load and bundle --\u003e\n    \u003cscript src=\"main.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nCreate a simple JavaScript file named `main.js`:\n\n```Javascript\nimport '@babel/polyfill';\nimport App from './App.svelte';\n\nnew App({\n  target: document.getElementById('demo'),\n  props: {\n    name: 'world'\n  }\n});\n```\n\nCreate a Svelte file named `App.svelte`:\n\n```svelte\n\u003cp\u003e\n  Hello { name }, the time is \u003cspan class=\"the-time\"\u003e{ hours }:{ minutes }:{ seconds }\u003c/span\u003e\n\u003c/p\u003e\n\n\u003cstyle\u003e\n  .the-time {\n    font-weight: bold;\n  }\n\u003c/style\u003e\n\n\u003cscript\u003e\n  import { onMount } from 'svelte';\n\n  export let name = 'Anonymous';\n  let time = new Date();\n\n  onMount(() =\u003e {\n    const timer = setInterval(() =\u003e {\n      time = new Date();\n    }, 1000)\n\n    return () =\u003e {\n      clearInterval(timer);\n    }\n  })\n\n  let hours, minutes, seconds;\n\n  $: {\n    hours = time.getHours();\n    minutes = time.getMinutes();\n    seconds = time.getSeconds();\n  }\n\u003c/script\u003e\n```\n\n### Further reading\n\nTo continue your journey into Svelte and Parcel please have a look at their documentation:\n\n- https://svelte.dev/\n- https://parceljs.org/\n\nfor configuring this plugin, please read [#Configuration](https://github.com/DeMoorJasper/parcel-plugin-svelte#Configuration)\n\n## Configuration\n\nThe 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.\n\nThis can be done though a `svelte.config.js` file, `.svelterc` file or `svelte` field in `package.json`.\n\nFor documentation on which parameters you can set and use look at the official [svelte docs](https://svelte.dev/docs#svelte_compile).\n\n```Javascript\n// Used by svelte.compilerOptions\ncompilerOptions: {\n  ...\n},\n// Used by svelte.preprocess\npreprocess: {\n  ...\n}\n```\n\n**_Note: the use of `compiler` property will be deprecated on the next major version, you should use the`compilerOptions` property instead._**\n\n### CSS CompilerOptions\n\nIf 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()`.\n\n## How does it work?\n\nIf 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.\n\n## Any more questions?\n\nAny more questions about how the plugin works internally or how to use it? Feel free to open an issue in the repository.\n\n## License\n\nThis project is licensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDeMoorJasper%2Fparcel-plugin-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDeMoorJasper%2Fparcel-plugin-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDeMoorJasper%2Fparcel-plugin-svelte/lists"}