Refactor internal structure of svelte2tsx

[dummdidumm]

svelte2tsx has grown a lot recently and line numbers keep climbing up because we dump many of the things into the main files. I would like to change that in a way that

• makes it more clear what the code pieces are about
• seperates concerns in a way that a transformation for slots don't live in the same file as an unrelated transformation for attributes
• makes it clear where to put new code/behavior

My proposed solution:

• The main svelte2tsx and main htmlx2jsx files get their own folders
• svelte2tsx is broken up. Processing of instance script and module script go into separate files
• Walk of the htmlx tree inside svelte2tsx moves into htmlx2jsx folder
• Walk of the htmlx tree is split up. Unrelated transformations now live in seperate files and are called from the main htmlx2jsx file.

Rough folder structure

index.ts
svelte2tsx
    index.ts
    instanceScriptTransform.ts
    moduleScriptTransform.ts
html2jsx
    index.ts
    nodes
        await-block.ts
        each-block.ts
        event-handlers.ts
        ...

How the main htmlx2jsx file could look like

export function htmlx2jsx(..): .. {
    const awaitBlockHandler = new AwaitBlock(...);
    const eachBlockHandler = new EachBlock(...);
    ...

    walk((..) => {
       ...
       switch (node.type) {
           case 'Await':
               this.awaitBlockHandler(...);
               break;
           case 'Each':
               // multiple, unrelated handlers can be invoked
               this.eachBlockHandler(...);
               this.scope(...);
               this.someOtherHandler(...);
               break;
           ...
     });
     
     return {
           ...
     };
}

@jasonlyu123 @halfnelson what do you think?

[jasonlyu123]

I overall agree with sperate concern. But there might be some cases where it's a little bit hard to cut clean, such as the template scope, and the resolving of slot props.
About walking HTMLx maybe we could add another category to sperate some it from html2jsx, like those transforming that are mostly for typing and type-checking purpose.

[dummdidumm]

I overall agree with sperate concern. But there might be some cases where it's a little bit hard to cut clean, such as the template scope, and the resolving of slot props.

I agree, the lines are blurry sometimes. In these cases, something like this would be my solution (similar to how you did it already with scope for slots):

const scope = new Scope();
const slots = new Slots(scope); // <-- dependency

...
case 'Each':
    this.scope...;
case 'Slot':
    this.slots...; // slots can access stuff from scope because it was injected at the start

About walking HTMLx maybe we could add another category to sperate some it from html2jsx, like those transforming that are mostly for typing and type-checking purpose.

Could you specifiy what exactly you mean and how you would split it out?

[jasonlyu123]

Could you specifiy what exactly you mean and how you would split it out?

After thinking about it further. there are not many things that suit the description. I got something mixed up. Originally thinking about those in walking in the svelte2tsx.

[dummdidumm]

👍 I'll see if I have time to get at this in the next days then.