@tdi/svcli v0.0.24

Disclaimer

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

Commands

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

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