Git Product home page Git Product logo

svelte-types-writer's Introduction

svelte-types-writer

A helper script to get you started with writing typescript declaration files for svelte apps. It creates typescript .d.ts based on svelte2tsx, which is used by the official vs code svelte plugin

Usage

Easiest usage is with npx

npx svelte-types-writer

to process the files directly you could run

node /svelte-types-writer/dist/index.js ./src/**/*.svelte --libs ./src/**/*.ts ./src/**/*.js

See end of file if you want to install local.

Options

--out : Set an output folder for the type declarations. --override: if existing types and js files should be overridden. --no-js: if set no forwarding javascript files are generated, next section "Typing Strategy". --debug: for debugging only.

Typing Strategy

A preferred solution would be to directly type the *.svelte file by adding a *.svelte.d.ts file with default export. Unfortunately that does not play well with vs code intellisense. While in normal .ts/.js files the types from the .svelte.d.ts files are used, in other .svelte files it does not seem to work (8/26/2020).

What seems to work is the following:

  1. by file: Let's say we want to have types for Example.svelte. svelte-types-writer would generate Example.d.ts in the same folder. What we then need is file Example.js in the same folder with the following content:
// ./Example.js
import Example from './Example.svelte';
export default Example;
now we can access the svelte component from other files by using 
// ./Test.svelte
<script>
    import Example from './Example';
</script>
<Example></Example>
  1. by folder: Let's say we have a subfolder "./Component" with the following files:

    ./Component
    Example1.svelte
    Example2.svelte
    Example1.d.ts
    Example2.d.ts

    we can add two files index.js:

// ./Component/index.js
import Example1 from 'Example1.svelte';
import Example2 from 'Example2.svelte';
export {Example1, Example2};
and index.d.ts:
// ./Component/index.d.ts
import Example1 from 'Example1';
import Example2 from 'Example2';
export {Example1, Example2};
then we can access the typed components eg.like that
// ./App.ts or ./App.js
import {Example1} from './Component';

const app = new Example1(...);
or 
// ./App.svelte
<script>
    import {Example2} from './Component';
</script>
<Example2 ...></Example2>

By default svelte-types-writer adds .js files Example1.js & Example2.js like above. You can turn this off with the --no-js option.

Typing and Commenting

Good written type declarations help the users to quickly use your library or module. General tips for writing .d.ts files can be found here. For now(8/26/2020) it seems most important to focus on the props of your component. Events and Slots are also generated, but by now they don't seem to show up in vs code intellisens. Vs code intellisense can show comments, which are formatted like this:

// Example.d.ts
import { SvelteTypedComponent } from 'svelte-typed-component';
/**
Put general information about the component here
 */
export default class Example extends SvelteTypedComponent<ExampleProps, ExampleEvents, ExampleSlots> {
}
declare const _ExampleProps: {
    /** Add information for certain props here*/
    t?: number;
    /** Add information for certain props here*/
    r?: any;
    /** Add information for certain props here*/
    a?: string;
    b?: string;
    c: number;
};
...

Alternative usage with local installation

npm install --save-dev svelte-types-writer

Then you can run:

node /svelte-types-writer/dist/index.js ./src/**/*.svelte --libs ./src/**/*.ts ./src/**/*.js

Declaration files are written directly next to the .svelte files. If you prefer to have them in an extra folder, use the --out option:

node /svelte-types-writer/dist/index.js ./**/*.svelte --libs ./**/*.ts ./**/*.js --out ./types

Then you have first class type definitions? No. You now basically got the output of what svelte2tsx generates to make svelte types intellisense-usable for vs code and other editors in a convenient format. See next chapter "Typing Strategy" on how to use the .d.ts files. See "Intellisense" to learn, how to add comments.

Removing and Dependencies for Alternative usage

Note: the dependency to svelte-typed-component was removed with version 1.0.2 since svelte now exposes the type SvelteComponentTyped. So the following only applies to prior versions: After using svelte-types-writer you can uninstall the package and all its dependencies with one exception. Make sure to keep a dependency to svelte-typed-component, since all generated declaration files depend on it.

npm install svelte-typed-component

For more information see this blog post.

svelte-types-writer's People

Contributors

micha-lmxt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.