WIP - Feat/cli

[kaisermann]

Closes #256, #255

Related to: sveltejs/component-template#31 and sveltejs/component-template#8

Opening it as a draft and with no implementation. I'm currently studying the available routes we can take here.

[lukeed]

Anything I can help with?

[kaisermann]

@lukeed 🤔 We need to decide what route we should take here. Initially, I was thinking of a very simple CLI that would just preprocess something(s) from --src and output it(them) to --output

$ svelte-preprocess --src src/*.svelte --out dist/

This can be enough for some (most?) cases, but as @dummdidumm noted here, a component can import some, i.e ts module and that obviously wouldn't work from the consumer perspective. Bundling/transpiling these modules don't seem to be the correct way forward to me. Maybe it's just a matter of limiting the scope of what the CLI does.

[lukeed]

I would 100% just worry about compiling standalone files. I'm pretty sure the old svelte CLI did this too.
Otherwise, yeah, you definitely encroach on being a full bundler/Rollup wrapper.

If output is targeting ESM, then it's easy to position this as a "prepare your component for bundling" step, since the output is pure JS, CSS, HTML

[kaisermann]

@lukeed I like the idea of positioning the CLI as a bundling "preparation" step, sparing us from dealing with all the minutia of js bundling. However, if we follow this path we should create at least some examples, one simple and another a bit more complex. Maybe the component-template can be used as the example itself, not sure.

Anyways, do you (or anyone else) have thoughts about the CLI API? For now, I was thinking of:

--input | --src - required
Glob(?) of svelte files to be preprocessed

--output - required
Output directory of preprocessed components.
I thought of following the same file structure found in --input, but if the components reside in an src/components, how could one make the components be output to the root of a dist/ directory?

--config - optional
Path to a svelte.config.js. Defaults to process.cwd()/svelte.config.js

[firefish5000]

Exert of relative code from @tdi/svcli for reference. https://gist.github.com/firefish5000/372ec181a5c47ac5190358639182310f
There is not to much special going on compared to the component-template or the code I stole from here somewhere. It also copies files based off of a glob (which is not necessary by any means). But if this only deals with svelte files we need to be sure to mention how to fix *.js imports (along with custom imports which need their own preprocessors).

Note the main thing it adds that I think is necessary is an extensions field which allows custom extensions like .svx. A input glob would work just as well.

I am also of the opinion that this should only deal with svelte files (ideally with customizable extensions) as anything more than that quickly turns it into a task runner like gulp.