routify-ts

Use Typescript in Routify Starter Template.

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. Not for Svelte Template.
• This documentation is shown for @sveltech/routify version 2. For versions below 2, please visit 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
• 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

npx routify-ts init <project-name> [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.

Example

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

npx routify-ts convert [project-directory]

Arguments

• project-directory: Path to your project folder. Default: .(Current folder).

Example

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/routify@v2.8.5

Related

• routify-tailwind - Use Tailwind CSS in Routify.
• routify-twind - Use Twind (Tailwind CSS in JS version) in Routify.
• routify-windi - Use Windi CSS (Next generation of Tailwind CSS compiler) in Routify.
• routify-vite Use Vite (Next Generation Frontend Tooling) in Routify.
• routify-carbon - Use IBM Carbon Framework in Routify.