Disclaimer

This is no more than a POC. A quickly written temporary solution for basic common setups until better tools arrive.

Commands

command | description |----|----| npx @tdi/svcli --setup | Interactively initialize/configure a svelte package with a few modular template options. npx @tdi/svcli --preprocess | Preprocess svelte files. Requires a svelte.config.js file which is created by npx @tdi/svcli --setup

Purpose

We aid in configuring a few basics for svelte-preprocess, postcss, tailwind, typescript, eslint, mdsvex, and svelte-check. Additionally, we try to preprocess your svelte files so they can be truly sharable.

We install npm packages, create initial config files or interactive diff update existing files. Some things, notably rollup, will have a config snippets dumped to terminal for copy/paste into actual config since we do not currently support updating them directly.

svelte.config.js

We currently add a few non-standard properties to svelte.config.js. Note that their names may spontaneously change in future versions. The reasoning behind their inclusion are below

Property | Type | Description |------|----|---| outDir | string | Where to output/save the preprocessed files. srcDir | string | Where to look for the original source files to process. Note that we search a directory for all matching files. This is vastly different than webpack/rollup which are given entrypoint files and walk all imports. extensions | string[] | File extensions to preprocess. copyFileGlob | Glob[] | Globs matching all files we should copy over to the output directory. This will only match files inside srcDir and will not match any files we preprocess nor any that match the copyExcludeFileGlob. If you have js files, you will need ./**/*.js in here. Any non svelte import that isn't handled by another preprocessor will need a glob to copy it. copyExcludeFileGlob | Glob[] | Globs matching all files we should not copy over, even if they match a copyFileGlob. Exists to allow copyFileGlob to be more permissive and match everything if need be. This should be set to match any files a preprocessor will run on, like ./**/*.ts.

Note that unless copyFileGlob only matches js files, your component is likely not sharable without the end dev modifying their bundler. Unfortunately, svelte's ecosystem is small for more than 1 reason atm, and shareability of components is certainly 1 of them. If you have css/image/audio/video/json/etc imports, you should be able to utilize svelte-preprocess's babel support to eliminate them instead of your bundler.

copyFileGlob/copyExcludeFileGlob will be renamed or removed in future version. They will exist until I figure out how to handel non svelte/js imports properly (ie. until I learn how to babel like a madman). Utilizing babel for imports might hurt chunking performance since the goto solution involves inlining.

Note that the end dev's bundler configuration will run on us as well, including their svelte preprocessors. There is currently no way to scope svelte preprocessors to your own project in rollup. This probably isn't a big deal for most use cases, but could cause problems.

Preprocessing Example

Create the svelte.config.js file appropriately

// svelte.config.js
const sveltePreprocess = require("svelte-preprocess")
const {mdsvex} = require("mdsvex")

const createPreprocessors = ({sourceMap}={})=>{
  return [
    sveltePreprocess({
      sourceMap: sourceMap ?? false,
      typescript: true,
      postcss:true
    }),
    mdsvex()
  ]
}
module.exports={
  "createPreprocessors": createPreprocessors,
  "preprocess": createPreprocessors({sourceMap: true}),
  "extensions": [".svelte",".svx"],
  "outDir": "./out",
  "srcDir": "./src",
  "copyFileGlob": [
    "./src/**/*.js",
  ],
  "copyExcludeFileGlob": [
    "./src/**/*.ts",
    "./src/**/*.tsx",
    "./src/**/*.css",
    "./src/**/*.pcss",
    "./node_modules/**/*",
  ] ,
}

Once configured, you can simply run svcli

# Clear the output directory. (currently a required step)
npx @tdi/svcli --clean
# Preprocess all svelte files. (also copies any file matching copyFileGlob)
npx @tdi/svcli --preprocess
# Compile any other files you require, such as typescript, with the appropriate tools.
tsc --outDir ./out