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.

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

feat(types)!: use Component type for type definitions #203

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
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
14 changes: 5 additions & 9 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -59,12 +59,12 @@ export const buildIcons = async () => {
await $`mkdir lib`;

let libExport = "";
let definitions = `import type { SvelteComponentTyped } from "svelte";
let definitions = `import type { Component } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";

type RestProps = SvelteHTMLElements["svg"];
type $RestProps = SvelteHTMLElements["svg"];

export interface CarbonIconProps extends RestProps {
type $Props = {
/**
* Specify the icon size.
* @default 16
@@ -80,11 +80,7 @@ export interface CarbonIconProps extends RestProps {
[key: \`data-\${string}\`]: any;
}

export declare class CarbonIcon extends SvelteComponentTyped<
CarbonIconProps,
Record<string, any>,
{}
> {}\n\n`;
export type CarbonIconProps = Omit<$RestProps, keyof $Props> & $Props;\n\n`;

type Size = "glyph" | "icon";

@@ -122,7 +118,7 @@ export declare class CarbonIcon extends SvelteComponentTyped<

byModuleName[name] = templateSvg(icon);
libExport += `export { default as ${name} } from "./${name}.svelte";\n`;
definitions += `export declare class ${name} extends CarbonIcon {}\n`;
definitions += `export declare const ${name}: Component<CarbonIconProps>;\n`;

const fileName = `lib/${name}.svelte`;

35 changes: 0 additions & 35 deletions tests/svelte@3/Icons.svelte

This file was deleted.

Binary file removed tests/svelte@3/bun.lockb
Binary file not shown.
15 changes: 0 additions & 15 deletions tests/svelte@3/package.json

This file was deleted.

16 changes: 0 additions & 16 deletions tests/svelte@3/tsconfig.json

This file was deleted.

23 changes: 19 additions & 4 deletions tests/svelte@4/Icons.svelte
Original file line number Diff line number Diff line change
@@ -12,15 +12,30 @@
} from "carbon-icons-svelte";
import type { CarbonIconProps } from "carbon-icons-svelte";
import Icon from "carbon-icons-svelte/lib/Accessibility.svelte";
import { mount } from "svelte";

const props: CarbonIconProps = {
// Use the exported `CarbonIconProps` type for typing objects since the
// idiomatic `ComponentProps` utility is not compatible with `Component` in Svelte 4.
const props = {
size: 32,
fill: "red",
};
"data-test": "id",
} satisfies CarbonIconProps;

const icon = new Icon({ target: document.body, props });
// Instead, you can use a const assertion for type safety.
const component_props = {
size: 16,
fill: "red",
"data-test": "id",
} as const;

// @ts-expect-error (Svelte components are no longer classes)
// See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
const icon_class = new Icon({ target: document.body, props });

// Instead, use the `mount` function to manually instantiate the component.
mount(Icon, { target: document.body, props: component_props });

$: console.log(icon.$$prop_def);
$: console.log(typeof Assembly);
</script>

27 changes: 23 additions & 4 deletions tests/svelte@5/Icons.svelte
Original file line number Diff line number Diff line change
@@ -13,15 +13,29 @@
import type { CarbonIconProps } from "carbon-icons-svelte";
import Icon from "carbon-icons-svelte/lib/Accessibility.svelte";
import { mount } from "svelte";
import type { ComponentProps } from "svelte";

const props: CarbonIconProps = {
// You can use the exported `CarbonIconProps` type.
const props = {
size: 32,
fill: "red",
};
"data-test": "id",
} satisfies CarbonIconProps;

const icon = mount(Icon, { target: document.body, props });
// Or, you can use the idiomatic `ComponentProps` utility.
const component_props = {
size: 16,
fill: "red",
"data-test": "id",
} satisfies ComponentProps<typeof Icon>;

// @ts-expect-error (Svelte components are no longer classes)
// See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes
const icon_class = new Icon(props);

// Instead, use the `mount` function to manually instantiate the component.
mount(Icon, { target: document.body, props: component_props });

$: console.log(icon.$$prop_def);
$: console.log(typeof Assembly);
</script>

@@ -33,4 +47,9 @@
<Plan />
<ZSystems />
<BatchJob />

<!--
Note that `svelte:component` is no longer needed in Svelte 5.
https://svelte.dev/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode-svelte:component-is-no-longer-necessary
-->
<svelte:component this={Beta} />