https://github.com/sveiljs/sveil-cli
Sveil - svelte generation tool
https://github.com/sveiljs/sveil-cli
cli comand-line generation generator svelte sveltejs
Last synced: about 1 month ago
JSON representation
Sveil - svelte generation tool
- Host: GitHub
- URL: https://github.com/sveiljs/sveil-cli
- Owner: sveiljs
- License: mit
- Created: 2023-07-01T20:35:28.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-28T01:04:03.000Z (over 1 year ago)
- Last Synced: 2024-04-29T01:04:53.647Z (about 1 year ago)
- Topics: cli, comand-line, generation, generator, svelte, sveltejs
- Language: JavaScript
- Homepage:
- Size: 133 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sveil-cli
> ⚠️Alpha version. Still under development!
> Required node >= 16
FAQ
**What:**
The sveil. Generation tool for svelte. Sveil will generate svelte resources.
**Why:**
Why not? Svelte is pretty mature framework, but for some reason have no any generation tool that widely used. Generation tool could save some time, scale application, and set structure. I didn't find any other generation tools for svelte, only nx have one, but it's comes with monorepos only, nx workspace and other configs (and last time I tried it svelte plugin didn't work well). And Lets say, svelte plugin for nx isn't looks official, nx mostly focused on react or angular.
The Sveil on other hand is standalone tool that you can use without any config files.
---
TL;DR;
**Philosophy:**
Freedom without structure is chaos. Svelte let us decide how to organize project freely, there're only several restrictions/rules. Since svelte trying to bind to native js way without any built in design patterns, we as developers are on our own.
I see 3 main goals of sveil tool:
- Generation
- Structure
- Scale
For now it's limited generation, but with time sveil will get ability to structure svelte project and scale it (like nest or angular cli).
---
# Table of Content
- [sveil-cli](#sveil-cli)
- [Table of Content](#table-of-content)
- [Instalation](#instalation)
- [Getting started](#getting-started)
- [Usage](#usage)
- [Init](#init)
- [Generate](#generate)
- [Component](#component)
- [Component state](#component-state)
- [Examples](#examples)
---
## Instalation
```
npm i @sveil/cli -g
```
---
## Getting started
You can easily run:
```
sveil --help
```
In any situation to find desired command.
---
## Usage
Here's documentation, that you can run in any time:
```
sveil
Usage: sveil [options] [command]
Options:
-v, --version Show sveil version
-h, --help display help for command
Commands:
init|i [options] Init sveil and create sveil config
generate|g Generate sveil resource
help [command] display help for command
```
---
### Init
Command creates _sveil-cli.json_ in root directory.
> Not required in most cases. You need it only if your project using non standart named directories.
For example common path in svelte for lib is **src/lib/**, but if you have **src/library/**, then you need sveil configuration file (you can create it manually, doesn't matter really). Same for inner lib directories, like "components", "store", etc. Or even **source/** instead of **src/**, all path values are configurable.
In all other cases you don't need config file and nobody ever will know that you used sveil (●'◡'●)
```
sveil i --help
Usage: sveil init|i [options]
Init sveil and create sveil config
Options:
-d, --dry Run command dry-run(no changes will be applied)
-y, --skip Skip interactive tour and init with default values
-srcd, --source-dir Set source directory of project
-ld, --lib-dir Set lib directory of project
-cd, --components-dir Set components directory of project
-h, --help display help for command
```
---
### Generate
#### Component
```
sveil g c --help
Usage: sveil generate component|c [options]
Generate svelte component
Arguments:
componentName Component name
Options:
-d, --dry Run comman dry-run (no changes will be applied)
-sl, --script-language Set component script language (choices: "ts", "js")
-ce, --css-external Put component styles out of component
-cl, --css-language Set component style language, e.g. 'scss' (choices: "scss", "postcss")
-o, --overwrite WARNING: Overwriting existing component
-s, --separate Generate component in separate folder
-h, --help display help for command
```
#### Component state
> _Typescript only for now_
```
sveil g cs --help
Usage: sveil generate component-state|cs [options] [componentName]
Generate component state
Arguments:
componentName Target component name
Options:
-d, --dry Run command dry-run (no changes will be applied)
-s, --state add target stores
-n, --file-name [name] Custom file name
-h, --help display help for command
```
#### Examples
Generate Component
```
sveil g c main
```
OR
```
sveil generate component main
```
Output:
```
- file main.svelte generated in ...\src\lib\components\main.svelte
```
Basic svelte component template:
```
let name = "main";
{name}
.main {
margin: 0;
padding: 0;
}
```
By default sveil use plain css and js for component template, but if project use typescript - it automatically add lang="ts".
It's possible to overwrite default script/style languages with -sl and -cl options.
> Sveil supports typescript only in script languages and scss/postcss in style preprocessors (for now).
>
> Please, be aware there's no auto detection for style preprocessors yet.
You can move styles out of component with -ce option
```
sveil g c example -ce
```
Or create component in separate folder with -s option
```
sveil g c example -s
```
If component already existed, then you can use -o option with little confirmation prompt (need to write component name)
```
sveil g c example -o
```
Generate Component State
**[More info about output file](https://github.com/sveiljs/sveil?tab=readme-ov-file#basic-example)**
```
sveil g cs main
```
OR
```
sveil generate component-state main
```
Output:
```
- file main.ts generated in ...\src\lib\components\main\main.ts
```