Skip to content

Commit

Permalink
docs: Update overview.md
Browse files Browse the repository at this point in the history
  • Loading branch information
dummdidumm authored Jun 20, 2023
1 parent 2388ff9 commit 02a5de1
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions docs/internal/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,15 @@ To get a holistic view of Svelte files, we have two options:
1. Write a language service ourselves which is capable of doing things like auto complete, go to definition, rename etc.
2. Convert the Svelte code to something an existing language service can process which then does auto complete, go to definition, rename etc for us.

We chose the second option because TypeScript provides a language service which can do all the heavy lifting for us: We give it some files and then invoke methods like `getQuickInfoAtPosition` for hover info. These files need to be in a format the language service can understand: A form of JavaScript or TypeScript. `svelte2tsx` is the package which does this transformation: Pass in Svelte code and get back JSX or TSX code, depending on whether or not you use TS in Svelte.
We chose the second option because TypeScript provides a language service which can do all the heavy lifting for us: We give it some files and then invoke methods like `getQuickInfoAtPosition` for hover info. These files need to be in a format the language service can understand: A form of JavaScript or TypeScript. `svelte2tsx` is the package which does this transformation: Pass in Svelte code and get back JS or TS code, depending on whether or not you use TS in Svelte.

`svelte2tsx` uses some [ambient definitions](/packages/svelte2tsx/svelte-shims.d.ts) which are loaded by the language server to do some of the transformations. It also provides [JSX definitions](/packages/svelte2tsx/svelte-jsx.d.ts) which are recognized by the TypeScript compiler and define intrinsic elements, attributes and events - so if you ever get an error that a DOM attribute is not assignable to a DOM element, it's likely a missing declaration in there.
`svelte2tsx` uses some [ambient definitions](/packages/svelte2tsx/svelte-shims.d.ts) which are loaded by the language server to do some of the transformations. It also provides [type definitions](/packages/svelte2tsx/svelte-jsx-v4.d.ts) which are recognized by the TypeScript compiler and define intrinsic elements, attributes and events - so if you ever get an error that a DOM attribute is not assignable to a DOM element, it's likely a missing declaration in there.

The code generated by `svelte2tsx` is not runnable in any way and does not actually exist at runtime when you run your app, it purely exists for the IntelliSense.

The code also returns source mappings so we know which position in the original code corresponds to which generated position.

There's a new transformation now which does the same but transforms the code to TS or JS, which makes it possible to write transformations in an easier way, preserving control flow for if, each etc more easily. It's hidden behind a flag for now but will be the new default soon.
> The package is called svelte2tsx because originally it transformed the code to jsx/tsx - but that's no longer the case.
### Integration of svelte2tsx into the language-server

Expand All @@ -74,17 +74,17 @@ This example shows how our `language-server` uses `svelte2tsx`:
<h1>hello {world}</h1>
```

2. Transform Svelte to TSX/JSX
2. Transform Svelte to TS/JS

```tsx
<></>;
function render() {
// -- the transformed script:
let world = 'name';
// -- the transformed template
<>
<h1>hello {world}</h1>
</>;
async () => {
{ svelteHTML.createElement("h1", {}); world; }
}
// -- obtained props, slots and events,
// to get intellisense for this component in other components
return { props: { world }, slots: {}, events: {} };
Expand Down

0 comments on commit 02a5de1

Please sign in to comment.