speltkit 🌾🧰

A smaller, and simpler, SvelteKit

Please excuse the rough edges, I built this tool for myself.

Installation

npm install speltkit

Usage

Command line

# Shell
npm exec speltkit -- [OPTIONS] --project <project_path>

package.json

{
  "scripts": {
    "build": "speltkit [OPTIONS] --project <project_path>"
  }
}

Options:
--project <project_path>  path to SvelteKit project root (where svelte.config.js lives)
--development             build using development mode
--production              build using production mode
--[no-]minify             explicitly enable or disable minification [development: enabled, production: disabled]
--watch                   rebuild on filesystem changes

Environment Variables:
LOG_LEVEL   sets speltkit and esbuild log levels
NODE_ENV    build using specified mode
MINIFY      explicitly enable or disable minification [minify option takes precedence]

Goals

• Ease development and deployment of 'single-page app' SvelteKit projects
• Use esbuild for all bundling tasks, implementing missing functionality as needed
• Replace necessary Vite.js features with esbuild workflows
• Provide drop-in replacement for SvelteKit projects
• Coexist with Vite/SvelteKit in a project
  • i.e. Vite/SvelteKit used for development, speltkit used for production

Disclaimers

• Support matrix is not exhaustive, and may not be up to date

• Currently only compatible with SvelteKit 1.0 API

  • Support for SvelteKit 2.0 is planned

• Mostly supports SvelteKit alpha API (e.g. __layout.svelte, routes/page/index.svelte, etc.)

• Not all SvelteKit features are implemented (see: (supported)[#supported] and (not (yet) supported)[#not-yet-supported])

  • API tries to mirror SvelteKit but some behavior may be slightly different in edge cases
  • Only compatible with @sveltejs/adapter-static

• Some SvelteKit features are specifically not planned (see: (never supported)[#never-supported])

• Any supported modules without a sub-list can be assumed to be fully implemented

• Any not (yet) supported modules listed are missing exports not listed as supported

• All modules with a different alpha module name are available using their alpha module names as well to ensure compatibility (e.g. $app/environment -> $app/env)

Supported

• Layout
  • nested layouts
  • generic resets
• Routing
  • static routes
  • parameters
  • rest parameters
• Modules
  • $app/environment
  • $app/navigation
    • goto
    • afterNavigate
  • $app/paths
  • $app/stores
    • page
  • $lib
• Building (mostly provided by Vite)
  • import.meta.glob
  • import.meta.env.*
  • Rebuild on file changes (requires manual reload)
  • Building / bundling WebWorkers
  • Explicit URL import resolution (e.g. import myFilePath from 'path/to/my_file.png?url)
  • Copying kit.files.assets to kit.outDir

Supported svelte.config.js properties

compilerOptions: true
extensions: true
kit:
  adapter: only supports @sveltejs/adapter-static
  alias: true
  appDir: true
  csp: false
  csrf: false
  embedded: false
  env: false
  files:
    assets: true
    hooks:
      client: false
      server: never
    lib: true
    params: false
    routes: true
    serviceWorker: false
    appTemplate: true
    errorTemplate: false
  inlineStyleThreshold: false
  moduleExtensions: false
  outDir: true
  paths:
    assets: true
    base: true
  prerender: false
  serviceWorker: false
  version: false
package: never
preprocess: hardcoded to svelte-preprocess

Not (Yet) Supported

• Layout
  • layout/page groups
  • prerendering / hydration
• Routing
  • load in +layout.js or +page.js
  • optional parameters
  • parameters with matchers
  • 404 pages
• Modules
  • $app/forms
  • $app/stores
  • $env/dynamic/public
  • $env/static/public
  • $service-worker
• Building (mostly provided by Vite)
  • Hot module reloading
  • Any features not explicitly supported (i.e. most of Vite)
  • Other adapters that support client-side rendering

Never Supported

• Routes
  • +layout.server.js or +page.server.js
• Modules
  • $app/server
  • $env/dynamic/private
  • $env/static/private
• Building (mostly provided by Vite)
  • server-side rendering
  • plugins
• Adapters that run server-side code
• Packaging (use @sveltejs/package)