{"id":15199957,"url":"https://github.com/metamodern-design/svelte-render","last_synced_at":"2025-10-02T15:30:58.006Z","repository":{"id":40774216,"uuid":"253332867","full_name":"metamodern-design/svelte-render","owner":"metamodern-design","description":"A friendly Jamstack-focused build tool for Svelte apps","archived":true,"fork":false,"pushed_at":"2023-01-06T03:13:02.000Z","size":697,"stargazers_count":6,"open_issues_count":15,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-24T02:02:04.980Z","etag":null,"topics":["build-tool","hydrate","hydration","jamstack","netlify","sapper","static-site","sveltejs","vercel"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metamodern-design.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":"2020-04-05T21:10:54.000Z","updated_at":"2023-10-06T02:26:01.000Z","dependencies_parsed_at":"2023-02-05T04:46:52.605Z","dependency_job_id":null,"html_url":"https://github.com/metamodern-design/svelte-render","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metamodern-design%2Fsvelte-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metamodern-design%2Fsvelte-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metamodern-design%2Fsvelte-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metamodern-design%2Fsvelte-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metamodern-design","download_url":"https://codeload.github.com/metamodern-design/svelte-render/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219875832,"owners_count":16554706,"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":["build-tool","hydrate","hydration","jamstack","netlify","sapper","static-site","sveltejs","vercel"],"created_at":"2024-09-28T02:22:39.251Z","updated_at":"2025-10-02T15:30:52.682Z","avatar_url":"https://github.com/metamodern-design.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @metamodern/svelte-render\n\n*A friendly Jamstack-focused build tool for Svelte apps*\n\nI created this utility to scaffold build configurations for my Svelte projects. Because I focus on modern static sites and client-side apps that can be deployed with Netlify, Sapper includes a lot of infrastructure for server-side development that I don't need. Svelte Kit is around the corner as a next-gen replacement for Sapper, but it may not be production-ready in the immediate future, so I will be maintaining this CLI tool until I have a solid replacement. \n\n## Features\n\nHere are some of the features that `svelte-render` adds on top of a starter Rollup configuration:\n- Assumes a sensible directory structure, but allows customization \n- Includes a CLI script with flags for common rendering options\n- Includes essential plugins out of the box\n- Supports a JavaScript configuration file to import additional plugins, etc.\n- Comes with a built-in Babel configuration (with option not to transpile)\n- Supports render hooks to automate additional build steps\n- ES modules everywhere – never `require()` again!\n\n\n## Install\n\n```sh\nnpm i @metamodern/svelte-render\n\n```\n\n## CLI Usage\n\nThe CLI script is released as an ES module only. Minimum Node.js version is 14 (latest LTS as of release date). \n\n```sh\nnpx svelte-render [context] [--key=value]\n\n# default to process.cwd() as context\ncd project\nnpx svelte-render [--key=value]\n\n# skip production optimizations\nnpx svelte-render --development\n\n# just output HTML from the entry file\nnpx svelte-render --client=0 --noCss\n\n# specify a custom directory structure\nnpx svelte-render --src=. --dist=public\n\n# specify the path to your config file\n# ** if not at ./render.config.js **\nnpx svelte-render --configFile=./config/svelte-render.js\n\n```\n\n\n## Configuration file\n\nOptions may be specified using a configuration file. The file should use ES module import/export syntax. Its default export should be a function that takes an object containing command-line options as its arugment and returns an object specifying additional options to pass to the rendering function.\n\nThe config file is expected to be found at `./render.config.js` (relative to `context`), but a custom path can be specified from the command line as shown above.\n\nSee below for a list of all options that may be passed to the rendering function.\n\n\n## JavaScript API \u0026 Configuration Options\n\nThe JavaScript API is released as an ES module only. CommonJS `require()` is not supported.\n\nThe module's default export is a function with the following parameters:\n\n```ts\nasync function(context: string, {\n  src = 'src',\n  assets = 'assets',\n  dist = 'dist',\n  entry = 'index.svelte',\n  client = 'client.js',\n  noCss = false,\n  development = false,\n  transpile = !development,\n  rollupInputPlugins = [],\n  rollupInputOptions = {},\n  compilerOptions = {},\n  sveltePreprocess = {},\n  svelteOptions = {},\n  terserOptions = {},\n  browsers = 'defaults',\n  babelPresets = [['@babel/preset-env', {\n    targets: browsers,\n    corejs: 3,\n    useBuiltIns: 'usage',\n  }]],\n  babelPlugins = [],\n  babelOptions = {},\n  before,\n  onRender,\n  after,\n} = {}): Promise\u003cnumber\u003e // returns 0 on success\n\n```\n\n#### Required\n\n- __context__: path to the project's root directory\n\n*Note: The `context` argument is only required when using the JavaScript API. When using the CLI script, `context` defaults to `process.cwd()`.*\n\n#### Configuring the Directory Structure\n\nThe following options may be specified as file names or paths and will be resolved relative to `context`.\n\n- __src__: parent directory of `entry` and `client` source files\n- __assets__: directory of static assets to be copied to `dist`\n- __dist__: public directory where web files will be served\n- __entry__: a Svelte file to be pre-rendered as the initial view (ignored when the `development` flag is on)\n- __client__: a JavaScript source file that will be rolled-up as the client-side script (to render static HTML only, set `client` to `false` and don't use the `development` flag)\n\n#### Setting Rendering Option Flags\n\n- __noCss__: don't output CSS generated from Svelte `\u003cstyle\u003e` blocks\n- __development__: skip production optimizations (pre-rendering markup, transpiling JS, minifying JS \u0026 CSS)\n- __transpile__: use Babel to transform/polyfill client-side JS as needed for target browsers (turned on by default, unless the `development` flag is passed)\n\n#### Advanced Rendering Options (for Rollup, Svelte, Terser)\n\n- __rollupInputPlugins__: input plugins ([official](https://github.com/rollup/plugins), [community](https://github.com/rollup/awesome)) to pass to Rollup\n- __rollupInputOptions__: additional [input options](http://rollupjs.org/guide/en/#inputoptions-object) to pass to Rollup\n- __compilerOptions__: [compiler options](https://svelte.dev/docs#svelte_compile) to pass to `rollup-plugin-svelte` (under the `compilerOptions` key)\n- __sveltePreprocess__: [preprocessing functions](https://svelte.dev/docs#svelte_preprocess) to pass to `rollup-plugin-svelte` (under the `preprocess` key)\n- __svelteOptions__: additional [options](https://github.com/sveltejs/rollup-plugin-svelte#usage) to pass to `rollup-plugin-svelte`\n- __terserOptions__: [options](https://github.com/terser/terser#minify-options) to pass to `rollup-plugin-terser`\n\n#### Transpiling Options (for Babel)\n\n- __browsers__: a valid Browserslist configuration\n- __babelPresets__: presets to pass to Babel\n- __babelPlugins__: plugins to pass to Babel\n- __babelOptions__: additional options to pass to Babel\n\n*Note: These options are ignored when `transpile` is set to `false`*\n\n#### Render Hooks\n\nRender hooks are functions to execute in tandem with the main rendering function. Each function will be passed the resolved `context` and the full options object. Async functions are supported.\n\n- __before__: function to invoke and await before rendering\n- __onRender__: function to invoke and await in parallel with Rollup build of client/entry scripts\n- __after__: function to invoke and await after rendering\n\n\n## License\n© 2020 Daniel C. Narey\n\nISC License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetamodern-design%2Fsvelte-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetamodern-design%2Fsvelte-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetamodern-design%2Fsvelte-render/lists"}