{"id":20418424,"url":"https://github.com/firefish5000/svelte2dts","last_synced_at":"2025-04-12T17:33:57.516Z","repository":{"id":39724630,"uuid":"312517692","full_name":"firefish5000/svelte2dts","owner":"firefish5000","description":"Generates svelte.d.ts files to aid in creation of well typed sharable svelte components","archived":false,"fork":false,"pushed_at":"2023-01-07T22:13:28.000Z","size":1830,"stargazers_count":23,"open_issues_count":22,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T11:51:11.111Z","etag":null,"topics":["cli","command-line-tool","svelte","svelte-components","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/firefish5000.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-13T08:32:52.000Z","updated_at":"2023-07-26T08:45:24.000Z","dependencies_parsed_at":"2023-02-08T02:48:05.097Z","dependency_job_id":null,"html_url":"https://github.com/firefish5000/svelte2dts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefish5000%2Fsvelte2dts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefish5000%2Fsvelte2dts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefish5000%2Fsvelte2dts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firefish5000%2Fsvelte2dts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/firefish5000","download_url":"https://codeload.github.com/firefish5000/svelte2dts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248605128,"owners_count":21132116,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","command-line-tool","svelte","svelte-components","typescript"],"created_at":"2024-11-15T06:32:32.899Z","updated_at":"2025-04-12T17:33:57.491Z","avatar_url":"https://github.com/firefish5000.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"svelte2dts\n==========\n\nGenerate d.ts files from svelte files, creating truly sharable and well typed components!\n\n[![License](https://img.shields.io/static/v1?logo=github\u0026label\u0026message=svelte2dts\u0026style=for-the-badge\u0026logoColor=f00\u0026color=040)](https://github.com/firefish5000/svelte2dts)\n[![Version](https://img.shields.io/npm/v/svelte2dts?style=for-the-badge\u0026logo=npm\u0026label=npm)](https://npmjs.org/package/svelte2dts)\n[![Downloads/week](https://img.shields.io/npm/dw/svelte2dts?style=for-the-badge)](https://npmjs.org/package/svelte2dts)\n[![License](https://img.shields.io/npm/l/svelte2dts?style=for-the-badge)](https://github.com/firefish5000/svelte2dts/blob/master/package.json)\n[![GitHub Workflow](https://img.shields.io/github/workflow/status/firefish5000/svelte2dts/CI?style=for-the-badge\u0026logo=github\u0026label=CI\u0026logoColor=red)](https://github.com/firefish5000/svelte2dts)\n## Warning!\nThis package is still under heavy development.\nAs far as I am aware, it works as intended.\nAPI can be considered as non-existent.\nOnly the command has any level of support for now.\n\n## Installation\nInstall svelte2dts and its peer deps\n```sh\nnpm i -D svelte2dts svelte2tsx typescript\n```\n## Usage\nAfter installing, you can invoke the command via npx or package.json.\n\n### Via CLI\nRead all svelte files from `./src` and generate d.ts files in `./types`\n```sh\nnpx svelte2dts --overwrite --runOnTS --declarationDir ./types ./src\n```\nShow help\n```sh\nnpx svelte2dts --help\n```\n## Configuring\n### package.json\nPoint package.json to the declarationDir and outDir. This is required to get the svelte VS-Code extension working properly. Note that they should not point into the same directory\n```json\n{\n  ...\n  \"svelte\": \"./preprocessed/index.js\",\n  \"types\": \"./types/index.d.ts\",\n  ...\n}\n```\n### tsconfig.json\nBe sure to set declarationDir and outDir to different locations.\n```json\n{\n  \"compilerOptions\": {\n    \"strict\": true,\n    \"outDir\": \"./preprocessed\",\n    \"declaration\": true,\n    \"declarationDir\": \"./types\"\n  },\n}\n```\n\nNote that with the above setup, you no longer need to specify `--declarationDir` in the command!\n```sh\nnpx svelte2dts --overwrite --runOnTS ./src\n```\n\n## Purpose\nThe only type of svelte components that are truly sharable are\nones written in pure svelte, with no preprocessors such as typescript.\nAs such, it is necessary to preprocess your components before publishing them. But sadly, `svelte-preprocess` removes all typings and does not generate any d.ts files. This is where we come in. We generate d.ts files for your sharable svelte components so your typings do not go to waste!\n\n## PITAs\n#### Separate `types` directory is required\nYou ***MUST*** use a separate directory for types\nif you want the svelte plugin for vscode to work.\n\n#### Markup preprocessors are not supported\nIf you have configured svelte to use a markup preprosessor by default (such as pug), you will\nhave to:\n\n1) run the markup preprocessors\n2) run us on their output\n3) finish preprocessing to create your sharable component.\n\nI am considering writing a svelte preprocessor\nto intercept the code going into svelte-preprocess.typescript\nand generate the declarations from that.\n\n#### `tsc` is still required\nWe only emit declarations for now.\nWe *do not* compile your typescript into the configured outDir!\nAs there are no real limitations stopping us from doing so\nwe might add this feature in the future\n\n#### src/MyComponent.svelte.d.ts is not copied to declarationDir\nTypescript ***never*** copies d.ts files from src into declarationDir.\nWe are trying not to deviate from their decisions too much.\nAs such, if you want d.ts or svelte.d.ts files copied into declarationDir,\nyou will need to do so with separate command.\n\n#### My component is still not sharable!\nOur only goal is to generate the sharable typings for your code.\nYou will still require another package or script to generate a\nsharable component.\nA package that does both at the same time is next on my list to tackle\n\n## Q\u0026A\n#### My component is well typed in Vs-Code when used in `.ts` files, but not in `.svelte` files\nYour `types` directory should not contain anything other than `.d.ts` and `.svelte.d.ts` files. If both `Component.svelte` and `Component.svelte.d.ts` exist, the svelte plugin will load the types from `Component.svelte`. To further the confusion, typescript will properly load types from the `Component.svelte.d.ts` file, causing types to work in `.ts` files even though they would not in `.svelte` files.\n\nThe solution is to specify both\nthe `svelte` and `types` field in `package.json` [as documented here](#packagejson) and to ensure there are no `.svelte` files in the types directory.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirefish5000%2Fsvelte2dts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffirefish5000%2Fsvelte2dts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirefish5000%2Fsvelte2dts/lists"}