Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lamualfa/routify-ts
Use Typescript in Routify Starter Template.
https://github.com/lamualfa/routify-ts
routify svelte typescript
Last synced: about 1 month ago
JSON representation
Use Typescript in Routify Starter Template.
- Host: GitHub
- URL: https://github.com/lamualfa/routify-ts
- Owner: lamualfa
- License: wtfpl
- Created: 2020-08-25T09:15:43.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-05T04:27:05.000Z (almost 3 years ago)
- Last Synced: 2024-11-03T14:03:43.433Z (about 2 months ago)
- Topics: routify, svelte, typescript
- Language: JavaScript
- Homepage:
- Size: 101 KB
- Stars: 19
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://npmjs.com/package/routify-ts)
[](https://npmjs.com/package/routify-ts)
[](https://github.com/lamualfa/routify-ts/blob/master/LICENSE)
[](https://github.com/lamualfa/routify-ts/blob/master/package.json)
# routify-ts
Use Typescript in [Routify Starter Template](https://github.com/roxiness/routify-starter).
## Important
- **This library does not have support for Routify v3 template project (_PR Welcome_)**.
- The script name has been changed from `setup-routify-ts` to `routify-ts`.
- This `routify-ts` script designed for [Routify Starter Template](https://github.com/roxiness/routify-starter). Not for [Svelte Template](https://github.com/sveltejs/template).
- This documentation is shown for `@sveltech/routify` version `2`. For versions below `2`, please visit [v1.0.0](https://github.com/lamualfa/routify-ts/tree/v1.0.0).
- Please backup your project folder before use `routify-ts convert` command. You don't need to do that for `init` command.
## Usage
We have 2 methods to add Typescript support to Routify Starter Template. You can choose whichever one suits your needs.
**Support methods:**
- [Create new Routify Starter Template from Scratch](https://github.com/lamualfa/routify-ts#Create-new-Routify-Starter-Template-from-Scratch)
- [Convert existing projects to Typescript](https://github.com/lamualfa/routify-ts#Convert-existing-projects-to-Typescript)
### Create new Routify Starter Template from Scratch
With this method, `routify-ts` will create a Routify Starter Template and then add additional configurations for Typescript purposes.
#### Command
```bash
npx routify-ts init [routify-init-args]
```
#### Arguments
- `project-name`: Your project name (will be used as the folder name).
- `routify-init-args`: Some arguments will be passed to `npx @sveltech/routify init` command. See [Routify Get Started](https://github.com/roxiness/routify-starter#starter-templates).
#### Example
```bash
npx routify-ts init my-routify-app
```
### Convert existing projects to Typescript
`routify-ts` will add additional configurations for Typescript needs to an existing project.
> **Important** - Try to do backups to prevent conflicts in case of conflicts with the configuration that you have made.
#### Command
```bash
npx routify-ts convert [project-directory]
```
#### Arguments
- `project-directory`: Path to your project folder. Default: `.`(Current folder).
#### Example
```bash
npx routify-ts convert /home/me/my-routify-app
```
## What we do
- Create new `tsconfig.json` file in root folder.
- Add `svelte-check` script & some `devDependencies` to `package.json`.
- Rename `src/main.js` to `src/main.ts`.
- Add `lang` property to `script` element in `src/App.svelte`.
- Add some plugins & configurations to `rollup.config.js` file.
- Create new `extensions.json` file in `.vscode` directory.
**Tested with `@roxi/[email protected]`**
## Related
- [routify-tailwind](https://github.com/lamualfa/routify-tailwind) - Use Tailwind CSS in Routify.
- [routify-twind](https://github.com/lamualfa/routify-twind) - Use Twind (Tailwind CSS in JS version) in Routify.
- [routify-windi](https://github.com/lamualfa/routify-windi) - Use Windi CSS (_Next generation of Tailwind CSS compiler_) in Routify.
- [routify-vite](https://github.com/lamualfa/routify-vite) Use Vite (_Next Generation Frontend Tooling_) in Routify.
- [routify-carbon](https://github.com/lamualfa/routify-carbon) - Use IBM Carbon Framework in Routify.