{"id":13630065,"url":"https://github.com/gobeli/eleventy-plugin-svelte","last_synced_at":"2025-04-12T09:30:41.636Z","repository":{"id":42793963,"uuid":"272744444","full_name":"gobeli/eleventy-plugin-svelte","owner":"gobeli","description":"Eleventy plugin to support svelte templates","archived":false,"fork":false,"pushed_at":"2023-01-27T01:32:29.000Z","size":832,"stargazers_count":44,"open_issues_count":18,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-26T04:33:24.337Z","etag":null,"topics":["11ty","eleventy","eleventy-plugin","svelte"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gobeli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-16T15:26:54.000Z","updated_at":"2024-01-20T22:50:14.000Z","dependencies_parsed_at":"2023-02-15T04:01:11.652Z","dependency_job_id":null,"html_url":"https://github.com/gobeli/eleventy-plugin-svelte","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gobeli%2Feleventy-plugin-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gobeli%2Feleventy-plugin-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gobeli%2Feleventy-plugin-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gobeli%2Feleventy-plugin-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gobeli","download_url":"https://codeload.github.com/gobeli/eleventy-plugin-svelte/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248545929,"owners_count":21122240,"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":["11ty","eleventy","eleventy-plugin","svelte"],"created_at":"2024-08-01T22:01:28.935Z","updated_at":"2025-04-12T09:30:41.310Z","avatar_url":"https://github.com/gobeli.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/dw/eleventy-plugin-svelte)](https://www.npmjs.com/package/eleventy-plugin-svelte)\n[![npm](https://img.shields.io/npm/v/eleventy-plugin-svelte)](https://www.npmjs.com/package/eleventy-plugin-svelte)\n\n# Eleventy Plugin to enable svelte\n\nHeavily inspired by [eleventy-plugin-vue](https://github.com/11ty/eleventy-plugin-vue).\n\n## Installation\n\n`npm install eleventy-plugin-svelte`\n\n- Requires experimental features in Eleventy, specifically: Custom File Extension Handlers feature from Eleventy. Opt in to experimental features on Eleventy by running `ELEVENTY_EXPERIMENTAL=true npx @11ty/eleventy`.\n\n## Features\n\n- Builds `*.svelte` single file components.\n- Emits client side JavaScript code which can be included on the site to enable hydration of the static HTML.\n- Data which is defined in the `data` function (module context) feeds into the data cascade.\n- Data is supplied via Svelte props, to use the data during runtime you have to define a `dataFn` which defines what will be provided as props at runtime. (see [example](example))\n\n### Not yet available\n\n- Svelte components as layouts\n\n## Usage\n\n```js\nconst eleventySvelte = require('eleventy-plugin-svelte')\n\nmodule.exports = function (eleventyConfig) {\n  // Use Defaults\n  eleventyConfig.addPlugin(eleventySvelte)\n}\n```\n\n### Customize with options\n\n```js\nconst eleventySvelte = require('eleventy-plugin-svelte')\n\nmodule.exports = function (eleventyConfig) {\n  // Use Defaults\n  eleventyConfig.addPlugin(eleventySvelte, {\n    // Directory to emit client side JS code\n    assetDir: 'assets',\n\n    // If false client side bundle is not generated\n    outputClient: true,\n\n    // Options for the rollup-plugin-svelte for prerendering\n    rollupPluginSvelteSSROptions: {},\n\n    // Options for the rollup-plugin-svelte for the client side code\n    rollupPluginSvelteClientOptions: {},\n\n    // Additional rollup plugins for prerendering\n    rollupSSRPlugins: [],\n\n    // Additional rollup plugins for the client side code\n    rollupClientPlugins: [],\n  })\n}\n```\n\n### Example Configuration\n\n```js\nconst eleventySvelte = require('eleventy-plugin-svelte')\nconst postcss = require('rollup-plugin-postcss')\nconst terser = require('rollup-plugin-terser').terser\n\nconst dev = process.env.NODE_ENV === 'development'\n\n// Example with prerendering the styles and omitting them in the client bundle.\nmodule.exports = function (eleventyConfig) {\n  eleventyConfig.addPlugin(eleventySvelte, {\n    rollupSSRPlugins: [postcss()],\n    rollupPluginSvelteClientOptions: {\n      emitCss: false,\n      compilerOptions: {\n        css: false\n      }\n    },\n    rollupClientPlugins: [!dev \u0026\u0026 terser()],\n  })\n}\n```\n\n### Template Variables and Functions\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    ...\n    \u003c!-- Adds content from svelte:head --\u003e\n    {{ content.head | safe }}\n    \n    \u003c!-- Adds prerendered css --\u003e\n    \u003cstyle\u003e\n      {{ content.css | safe }}\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    ....\n    \u003c!-- Adds prerendered html --\u003e\n    {{ content | safe }}  \n  \u003c/body\u003e\n  \u003cscript\u003e\n    // Provides the data used on the client side (dataFn is a function defining the used data)\n    {{ dataFn | svelteData | safe }}\n  \u003c/script\u003e\n  \u003c!-- Gets the svelte client side code for browsers which support es modules (\"app\" is the id of the HTMLElement the app is going to mount on) --\u003e\n  {% svelteClient 'app' %}\n  \u003c!-- The legacy bundle needs systemjs to be loaded --\u003e\n  \u003cscript nomodule src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.3.2/s.min.js\"\u003e\u003c/script\u003e\n  \u003c!-- Gets the svelte client side code for browsers do not support es modules (\"app\" is the id of the HTMLElement the app is going to mount on) --\u003e\n  {% svelteClientLegacy 'app' %}\n\u003c/html\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgobeli%2Feleventy-plugin-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgobeli%2Feleventy-plugin-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgobeli%2Feleventy-plugin-svelte/lists"}