Component naming conventions in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to name the Svelte component correctly.

Svelte

<script>
  export let name = "World";
</script>

<h1>Hello, [1]!</h1>

Drag options to blanks, or click blank then click option'

Aname

B{name}

CName

DNAME

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces inside HTML content like in React.

Using uppercase variable names which are not declared.

In Svelte, component props are used as variables directly without braces inside HTML.

2fill in blank

medium

Complete the code to export a Svelte component with the correct file naming convention.

Svelte

<!-- File name: [1] -->
<script>
  export let message = "Hi!";
</script>
<p>{message}</p>

Drag options to blanks, or click blank then click option'

AhelloWorld.svelte

Bhello_world.svelte

Chelloworld.svelte

DHelloWorld.svelte

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or snake_case for component file names.

Omitting the .svelte extension.

Svelte components should be named with PascalCase and have the .svelte extension.

3fill in blank

hard

Fix the error in the component import statement by completing the blank.

Svelte

<script>
  import [1] from './button.svelte';
</script>

<Button />

Drag options to blanks, or click blank then click option'

AButton

Bbutton

CBUTTON

Dbtn

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for component imports.

Using names that do not match the component file name.

When importing a Svelte component, use the PascalCase name matching the component's file name.

4fill in blank

hard

Fill both blanks to define and use a Svelte component with correct naming conventions.

Svelte

<script>
  import [1] from './[2].svelte';
</script>

<[1] />

Drag options to blanks, or click blank then click option'

ACard

Bcard

CCardComponent

Dcardcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatch between import name and file name.

Using lowercase names for components.

Component names and file names should use PascalCase and match exactly.

5fill in blank

hard

Fill all three blanks to create a reusable Svelte component with proper naming and usage.

Svelte

<script>
  export let [1] = "";
</script>

<h2>[2]</h2>

<!-- Usage -->
<script>
  import [3] from './Title.svelte';
</script>

<[3] [1]="Welcome!" />

Drag options to blanks, or click blank then click option'

Atext

B{text}

CTitle

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase for prop names.

Not using curly braces to display prop values.

Using lowercase for component import names.

Props use lowercase names, displayed with curly braces, and component names use PascalCase.

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