Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(rework) extend from svelte2tsx base class #386

Merged
merged 8 commits into from
Aug 6, 2020
Merged

(rework) extend from svelte2tsx base class #386

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8b61eb7
(rework) extend from svelte2tsx base class
Jul 30, 2020
378ca19
update/consolidate typings
Aug 3, 2020
9a72b7b
tsdoc
Aug 3, 2020
7d5eedb
finalize
Aug 4, 2020
e50f943
Merge branch 'master' into rework-svelte2tsx-class-generation
Aug 4, 2020
d415a53
fix test
Aug 4, 2020
6c47d3e
tweak $on
Aug 5, 2020
6052efa
better defaults
Aug 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions packages/svelte2tsx/src/svelte2tsx.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -534,7 +534,7 @@ function processInstanceScriptContent(str: MagicString, script: Node): InstanceS
if (
(ts.isPrefixUnaryExpression(parent) || ts.isPostfixUnaryExpression(parent)) &&
parent.operator !==
ts.SyntaxKind.ExclamationToken /* `!$store` does not need processing */
ts.SyntaxKind.ExclamationToken /* `!$store` does not need processing */
) {
let simpleOperator: string;
if (parent.operator === ts.SyntaxKind.PlusPlusToken) {
Expand Down Expand Up @@ -861,11 +861,10 @@ function addComponentExport(
const doc = formatComponentDocumentation(componentDocumentation);

const statement =
`\n\n${doc}export default class ${
`\nconst _${className} = createSvelte2TsxComponent(render);\n\n${doc}export default class ${
className ? `${className} ` : ''
}{\n $$prop_def = ${propDef}\n $$slot_def = render().slots` +
} extends _${className} {` +
createClassGetters(getters) +
`\n $on = __sveltets_eventDef(render().events)` +
'\n}';

str.append(statement);
Expand Down Expand Up @@ -949,7 +948,7 @@ function createRenderFunction({

const returnString =
`\nreturn { props: ${exportedNames.createPropsStr(
isTsFile
isTsFile,
)}, slots: ${slotsAsDef}, getters: ${createRenderFunctionGetterStr(getters)}` +
`, events: ${eventMapToString(events)} }}`;

Expand Down Expand Up @@ -1043,6 +1042,6 @@ export function svelte2tsx(
return {
code: str.toString(),
map: str.generateMap({ hires: true, source: options?.filename }),
exportedNames
exportedNames,
};
}
14 changes: 14 additions & 0 deletions packages/svelte2tsx/svelte-shims.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@ declare module '*.svelte' {
$$prop_def: any;
$$slot_def: any;

// https://svelte.dev/docs#Client-side_component_API
$on(event: string, handler: (e: Event) => any): () => void
$set(props: any): void;
$destroy(): void;
}
}

Expand Down Expand Up @@ -94,3 +97,14 @@ declare function __sveltets_each<T>(
array: ArrayLike<T>,
callbackfn: (value: T, index: number) => any
): any;

declare class Svelte2TsxComponent<Props = {}, Slots = {}, Events = {}> {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it would be ideal for this to also extend SvelteComponent, maybe this can be an interface instead?
We want instanceOf checks to work instead of returning ("This can never be true"), it would also make our exported .d.ts files generated from this compatible with the svelte component api
(I know the old code didn't do this, but that was due to type conflicts I was having with svelte @types, I think this was resolved)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah was thinking the same, we should extend from the base class

Copy link
Member Author

@dummdidumm dummdidumm Aug 3, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mhm, we cannot extend from it, because we need to redeclare the component ourselves at the top. But we can at least copy the interface and constructor, so they are structurally (almost) the same (except for $$prop_def / $$slot_def).

$$prop_def: Props;
$$slot_def: Slots;
// https://svelte.dev/docs#Client-side_component_API
$on: SvelteOnAllEvent<Events>;
$destroy(): void;
$set(props: Partial<Props>): void;
}
declare type Constructor<T = {}> = new (...args: any[]) => T;
declare function createSvelte2TsxComponent<Props = {}, Slots = {}, Events = {}>(render: () => {props?: Props, slots?: Slots, events?: Events }): Constructor<Svelte2TsxComponent<Props, Slots, Events>>;