Mary Lark - Full Stack Engineer

How many parts to a svelte file

3: <script>, markup, <style>

How do you make this string print properly when in the markup?

                        <script>
                          let string=`Some <strong>string < /> with html.`;
                        <script />

Precede the string with @html: <p> {@html string} < /p>

How do you build a project without creating minified files?

npm build -- --minify=false

How do you manually force a rerender?

$$invalidate(0, <varName>);

In the following statement, what will count render as in the string?

                            <script>
                            let count = 0;
                            let string = `Count = ${count}`;
                            $: count = count + 1;
                            < /script>
                            <p>{string}< /p>

How do you write a conditional reactive statement?

$: if (count > 5) { console.log(`The count is ${count}`); }

What will the following value of count be in the following statement:

                            let count = 0;
                            function getTotal() { count = count + 1; return count };
                            $: console.log(`Count = ${getTotal}`);

Check this: This console.log should never print because there is no state variables directly referenced on the right hand side of the statement.

What will the string print for count2 in the following:

                            $: string = `Count 2 is ${count2}.`;
                            $: setCount2(count1);

The string will print the original state of count2 before setCount2 is called. Reactive statements are fired in order.

How would you fix the following so that count2 will always update within string?

                        $: string = `Count 2 is ${count2}.`;
                        $: setCount2(count1);

                            $: setCount2(count1);
                            $: string = `Count 2 is ${count2}.`;

This way when count2 is changed in the setCount2 function, it will then always trigger the string to update.

How do you pass literal values of variables to the child component?

                                <ChildComp initialCount={3}, maxCount={10} />

What needs to be in the child component in order to take use of the following variables?

                            <ChildComp initialCount={3}, maxCount={10} />

Inside the script section of the child component you need the following:

                                export let initialCount;
                                export let maxCount;

You have an object you want to pass to the child component. The object keys have the same name as the variables in the child component. How do you pass these variables?

                                <ChildComponent key1, key2 / >

You have counter and hasDisplayed variables in the parent component. However, the child component has exported two variables that will serve the same purpose called count and display. How do you pass these variable?

                                <ChildComponent count={counter}, hasDisplayed={display}/ >

Remember, values passed to components must be in the javascript {} notation.

What is wrong with the following statement?

                            <ChildComponent key1=2, key2=2 / >

The assignment must be in braces: key1={2}, key2={3};

How do you set default values in the child component so you are not required to pass in values when calling the child component?

                                export let var1 = undefined;
                                export let var2 = 'My default string if none is provided';

You are passing all of an objects key/value pairs to a child component. How would you do this?

                                <ChildComponent {...objName}/ >

You need to verify the props passed to the child component. You only want to see the props that were not expected. How would you console.log this?

                                console.log(`RestProps:  `, $$restProps);

You want to console.log ALL of the props received by the child component. How would you do this?

                                console.log(`Props:  `, $$props);

You have a base component, call it Buttons.svelte where the markup uses the base element button that you want to make flexible for any button title, but you do not want to pass props down to this base component. You decide to use slots to accomplish this. For this question, we just want to pass in the text that a button would have, and have a default text appear on the button if none is passed in. How would you do this without passing a prop?

Slots go inside the markup area of the component. To use a slot, you might prepare it as follows:
Parent Component:

                                <Button>My Button Title< /Button>

Child Button Component:

                                <button><slot>Button Lavel< /slot>< /button>

As long a slot element appears in the child element you have the ability to pass in variable text or other elements into the slot.

If you have a prop you want to pass to your slot, and it is not a named slot, where would you place the prop?

Put the prop inside the component call: <Button title={"My Title"} />

You have a prop you want to pass to your named slot, where must you put the prop?

You must put the prop in the element where the slot resides: <div slot="leftContent let:x={"y"} />

You have many components that make use of your base button component. Each of the calling (parent) components will have a different way of processing the button click. Without writing a custom event handler, how would you write this in both the parent, and the child components?

Parent Component: You define the function you will call here. Then use that function on the on:click event on that component: <Button on:click={() => alert(true)}>

Child component: You simply call the function on:click: <button on:click>

What are two ways use an event modifier?

add the modifier directly to the component call: <Button event.preventDefault()>
use pipes to add the modifier: <Button on:click|once={(event) => {eventFn}}>
Note: Not all event modifiers can be passed in via pipes. I only know of once. preventDefault cannot.

What are $$respProps?

Any props that are not defined in our child component's export let block

How do you create unique uuid's? Name the install package, the import syntax, and the use.

                                npm install uuid;
                                import {v4 as uuidj } from "uuid";
                                id: uuid(); // creates a unique uuid;

How do you write a forEach block in the markup section of a .svelte file?

{#each todos as todo}{/each}

Lets say todos is an object like:

                            todos = [{
                                id: uuid();
                                title: event.details.id;
                                complete: false;
                            }]

How would you include the line number for this todo, the id for this todo, and the title for this todo? Remember, you do not want the id to be displayed.

                                {#each todos as todo, index (id)}
                                     <li>{index + 1} - {todo.title}</li>
                                {/each}

In the following forEach block in the markup section, how would you replace "index + 1" with a constant?

                        {#each todos as todo, index (id)}
                        <li>{index + 1} - {todo.title}</li>
                         {/each}

                            {#each todos as todo, index (id)}
                                  {@const number = index + 1}
                            <li>{number} - {todo.title}</li>
                             {/each}

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

QUESTION

ANSWER

Svelte Quiz