Component naming conventions in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why should Svelte components start with a capital letter?

In Svelte, why is it important to name components starting with a capital letter?

A Because lowercase names are reserved for CSS classes in Svelte.

B Because lowercase names cause the component to be ignored during compilation.

C Because only capitalized names can use reactive statements inside the component.

D Because Svelte treats capitalized names as components and lowercase as HTML elements.

💡 Hint

Think about how Svelte distinguishes between HTML tags and components.

Svelte uses capitalized names to identify components. If a component name starts with a lowercase letter, Svelte treats it as a regular HTML tag, which can cause errors or unexpected behavior.

📝 Syntax

intermediate

Identify the correctly named Svelte component file

Which of the following file names follows the recommended Svelte component naming conventions?

A UserProfile.svelte

B user_profile.svelte

C userProfile.svelte

D userprofile.svelte

💡 Hint

Component files should start with a capital letter and use PascalCase.

Svelte components should be named using PascalCase starting with a capital letter. This helps with clarity and matches the component naming conventions.

❓ component_behavior

advanced

What happens if you import a Svelte component with a lowercase name?

Consider this code snippet:

import header from './Header.svelte';

<header />

What will be the rendered output in the browser?

Svelte

import header from './Header.svelte';

<header />

A The browser renders the HTML <header> element, ignoring the imported component.

B The Header component renders correctly as expected.

C A runtime error occurs because the component name is lowercase.

D Nothing renders because the component is not recognized.

💡 Hint

Remember how Svelte treats lowercase tags in markup.

Svelte treats lowercase tags as native HTML elements. So <header /> renders the HTML header element, not the imported component named 'header'.

🔧 Debug

advanced

Find the error in this Svelte component import and usage

What error will this Svelte code produce?

import navbar from './Navbar.svelte';

<Navbar />

Svelte

import navbar from './Navbar.svelte';

<Navbar />

A No error; component renders correctly.

B SyntaxError due to incorrect component usage syntax.

C ReferenceError: Navbar is not defined because the import name is lowercase but usage is capitalized.

D TypeError: Cannot render component because of case mismatch.

💡 Hint

Check if the imported name matches the used component name exactly.

JavaScript is case-sensitive. Importing as 'navbar' but using <Navbar /> causes a ReferenceError because 'Navbar' is not defined.

❓ state_output

expert

What is the output of this Svelte component with mixed case naming?

Given the component file named MyButton.svelte with this code:

<script>
  export let label = 'Click';
</script>

<button>{label}</button>

And this usage in another component:

import mybutton from './MyButton.svelte';

<mybutton label="Press" />

What will be displayed on the page?

Svelte

import mybutton from './MyButton.svelte';

<mybutton label="Press" />

A The text 'Press' inside a button rendered by the MyButton component.

B Nothing renders because 'mybutton' is lowercase and treated as an unknown HTML tag.

C The literal text '<mybutton label="Press" />' appears on the page.

D A runtime error occurs due to incorrect component naming.

💡 Hint

Recall how Svelte treats lowercase tags in markup and component imports.

Svelte treats lowercase tags as native HTML elements. Since <mybutton /> is lowercase, it is not recognized as the imported component and renders nothing or an unknown tag.

Practice

1. Which naming style is recommended for Svelte component files and their names?

easy

A. kebab-case (e.g., my-component.svelte)

B. snake_case (e.g., my_component.svelte)

C. PascalCase (e.g., MyComponent.svelte)

D. all lowercase (e.g., mycomponent.svelte)

Solution

1. Step 1: Understand Svelte naming conventions

   Svelte recommends using PascalCase for component names and file names to clearly distinguish components from regular HTML tags.

2. Step 2: Compare naming styles

   PascalCase capitalizes the first letter of each word, making component names easy to read and recognize, unlike snake_case, kebab-case, or all lowercase.

3. Final Answer:

   PascalCase (e.g., MyComponent.svelte) -> Option C

4. Quick Check:

   Component names use PascalCase [OK]

Hint: Always capitalize each word in component names [OK]

Common Mistakes:

• Using kebab-case which is for HTML attributes
• Using snake_case which is uncommon in Svelte
• Using all lowercase which looks like regular HTML tags

2. Which of the following is a correct Svelte component file name?

easy

A. userprofile.svelte

B. user_profile.svelte

C. user-profile.svelte

D. UserProfile.svelte

Solution

1. Step 1: Check file naming rules for Svelte components

   Svelte components should be named using PascalCase to clearly identify them as components.

2. Step 2: Identify the PascalCase option

   Among the options, only UserProfile.svelte uses PascalCase correctly.

3. Final Answer:

   UserProfile.svelte -> Option D

4. Quick Check:

   PascalCase file name = UserProfile.svelte [OK]

Hint: Look for capital letters starting each word in the file name [OK]

Common Mistakes:

• Using lowercase or underscores instead of PascalCase
• Confusing kebab-case with component file naming
• Mixing styles inconsistently

3. Given the component file named LoginForm.svelte, which is the correct way to import and use it in another Svelte file?

medium

A. import LoginForm from './LoginForm.svelte';
<LoginForm />

B. import loginform from './LoginForm.svelte';
<LoginForm />

C. import LoginForm from './loginform.svelte';
<loginForm />

D. import loginForm from './LoginForm.svelte';
<loginForm />

Solution

1. Step 1: Match import name with component file name

   The import name should match the PascalCase component file name exactly, including capitalization.

2. Step 2: Use the imported component with correct casing

   In Svelte, component tags must start with uppercase letters matching the import name.

3. Final Answer:

   import LoginForm from './LoginForm.svelte'; <LoginForm /> -> Option A

4. Quick Check:

   Import and usage use PascalCase consistently [OK]

Hint: Import and use components with exact PascalCase names [OK]

Common Mistakes:

• Importing with lowercase names
• Using lowercase component tags
• Mismatching import path casing

4. What is wrong with this Svelte component file name and usage?

Filename: userprofile.svelte
Usage: <UserProfile />

medium

A. The filename should be PascalCase to match the component usage.

B. The component tag should be lowercase to match the filename.

C. The filename should use kebab-case instead of lowercase.

D. There is no issue; this is valid Svelte usage.

Solution

1. Step 1: Check filename casing

   The filename userprofile.svelte is all lowercase, which is not recommended for Svelte components.

2. Step 2: Check component usage casing

   The usage <UserProfile /> uses PascalCase, which expects the filename to match in PascalCase.

3. Final Answer:

   The filename should be PascalCase to match the component usage. -> Option A

4. Quick Check:

   Filename and usage casing must match PascalCase [OK]

Hint: Filename and usage must both be PascalCase [OK]

Common Mistakes:

• Using lowercase filenames with PascalCase tags
• Assuming kebab-case is valid for component files
• Ignoring case sensitivity in imports

5. You have two components: NavBar.svelte and navBar.svelte. What problem might this cause in a Svelte project on a case-sensitive file system?

hard

A. The project will fail to compile due to duplicate component names.

B. Only one component will be recognized; the other will be ignored or cause confusion.

C. Both components will work fine since Svelte ignores filename case.

D. The components will merge automatically into one component.

Solution

1. Step 1: Understand case sensitivity in file systems

   On case-sensitive systems (like Linux), NavBar.svelte and navBar.svelte are different files but can cause confusion in imports.

2. Step 2: Recognize Svelte import and usage issues

   Importing components with inconsistent casing can cause one component to be ignored or cause runtime errors because Svelte expects consistent PascalCase naming.

3. Final Answer:

   Only one component will be recognized; the other will be ignored or cause confusion. -> Option B

4. Quick Check:

   Case-sensitive filenames cause import confusion [OK]

Hint: Avoid similar names differing only by case [OK]

Common Mistakes:

• Assuming case-insensitive systems behave the same everywhere
• Using inconsistent casing in imports and filenames
• Expecting automatic merging of components