Skip to content

Components with dot notation does not work #1701

@N00nDay

Description

@N00nDay

Describe the bug

I am building a svelte component library that utilizes dot notation for component composition. I have dot notation working as it should but when I type a . instead of showing only the possible child components it acts like I just typed a < and started a new tag. I have the following component:

import OriginalButton from './Button.svelte';
import Icon from './Icon.svelte';

const Button = OriginalButton as ButtonStatic;
Button.Icon = Icon;
Button.Leading = Icon;
Button.Trailing = Icon;

export default Button;

export interface ButtonStatic {
    new (...args: ConstructorParameters<typeof OriginalButton>): OriginalButton;
    Icon: typeof Icon;
    Leading: typeof Icon;
    Trailing: typeof Icon;
}

When I type <Button. I would like autocomplete/intellisense to show me Icon, Leading, or Trailing but instead it is showing me all available components.

bVFcL

Reproduction

Create a SvelteKit Project

npm create svelte@latest my-app
cd my-app
npm install

Install STWUI

npm i -D stwui

Install TailwindCSS

npx svelte-add@latest tailwindcss
npm install

Modily `tailwind.config.cjs

module.exports = {
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		'./node_modules/stwui/**/*.{svelte,js,ts,html}
	],
	plugins: [
		require('@tailwindcss/forms'),
		require('stwui/plugin')
	],
	darkMode: 'class',
};
  • Open root +page.svelte
  • import { Button } from "stwui"
  • Type <Button.

Expected behaviour

The expected behavior is that only the child components Leading, Trailing, and Icon would be listed or at least at the top of the list.

System Info

  • OS: Mac
  • IDE: VSCode

Which package is the issue about?

No response

Additional Information, eg. Screenshots

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions