What is Svelte and how is it different from other frameworks?
Svelte is a compiler that creates reactive JavaScript modules. Unlike React or Vue that do most of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app, resulting in highly optimized vanilla JavaScript with minimal runtime overhead.
How do you create a basic Svelte component?
A Svelte component is created in a .svelte file with three main sections: <script> for JavaScript logic, <style> for component-scoped CSS, and the template section for HTML markup. Styles are automatically scoped to the component.
How do you declare reactive variables in Svelte?
Reactive variables in Svelte are declared using the let keyword in the <script> section. Any variables used in the template are automatically reactive. Example: let count = 0. When count changes, the UI automatically updates.
What is the purpose of the $ syntax in Svelte?
The $ prefix in Svelte is a special syntax that marks a statement as reactive. It automatically re-runs the code whenever any referenced values change. It's commonly used with derived values and store subscriptions.
How do you include conditional rendering in Svelte?
Svelte uses #if, :else if, and :else blocks for conditional rendering. Example: {#if condition}...{:else if otherCondition}...{:else}...{/if}. These blocks can contain any valid HTML or component markup.
How do you create loops in Svelte templates?
Svelte uses the #each block for iteration. Syntax: {#each items as item, index}...{/each}. Supports destructuring, key specification, and else blocks for empty arrays. Example: {#each users as {id, name} (id)}.
What is the purpose of export keyword in Svelte?
The export keyword in Svelte is used to declare props that a component can receive. Example: export let name; Makes the variable available as a prop when using the component: <Component name='value' />.
How do you handle basic events in Svelte?
Events in Svelte are handled using the on: directive. Example: <button on:click={handleClick}>. Supports modifiers like preventDefault using |. Example: <form on:submit|preventDefault={handleSubmit}>.
What is component composition in Svelte?
Component composition in Svelte involves building larger components from smaller ones. Components can be imported and used like HTML elements. Example: import Child from './Child.svelte'; then use <Child /> in template.
How do you add styles to Svelte components?
Styles are added in the <style> block and are automatically scoped to the component. Global styles can be added using :global() modifier. Supports regular CSS with automatic vendor prefixing.
How do you implement two-way binding in Svelte?
Two-way binding is implemented using the bind: directive. Common with form elements. Example: <input bind:value={name}>. Supports binding to different properties like checked for checkboxes.
How do you handle component initialization logic?
Component initialization is handled in the <script> section. Can use onMount lifecycle function for side effects. Top-level code runs on component creation. Support async initialization using IIFE or onMount.
What are derived stores in Svelte?
Derived stores are created using derived() function, combining one or more stores into a new one. Values update automatically when source stores change. Support synchronous and asynchronous derivation.
How do you implement dynamic component loading?
Dynamic components can be loaded using svelte:component directive. Example: <svelte:component this={dynamicComponent} />. Support lazy loading using import(). Handle loading states.
What are actions in Svelte?
Actions are reusable functions that run when an element is created. Used with use: directive. Can return destroy function. Example: <div use:tooltip={params}>. Support custom DOM manipulation.
How do you handle component composition patterns?
Component composition patterns include slots, context API, event forwarding. Support nested components, higher-order components. Handle component communication through props and events.
What is the purpose of reactive statements?
Reactive statements ($:) automatically re-run when dependencies change. Used for derived calculations and side effects. Support multiple dependencies. Handle complex reactive computations.
How do you implement component interfaces?
Component interfaces use TypeScript with props and events. Define prop types using export let prop: Type. Support interface inheritance. Handle optional props and default values.
What are component lifecycle methods?
Lifecycle methods include onMount, onDestroy, beforeUpdate, afterUpdate. Handle component initialization, cleanup, updates. Support async operations. Manage side effects.
How do you handle component state persistence?
State persistence uses local storage, session storage, or external stores. Implement auto-save functionality. Handle state rehydration. Support offline state management.
How do you implement advanced component patterns?
Advanced patterns include compound components, render props, higher-order components. Handle complex state sharing. Support flexible component composition. Implement reusable logic.
How do you optimize component rendering?
Optimize rendering using keyed each blocks, memoization, lazy loading. Implement virtual scrolling. Handle large lists. Optimize reactive updates. Monitor performance metrics.
How do you implement component testing strategies?
Testing strategies include unit tests, integration tests, component tests. Use testing library/svelte. Implement test utilities. Handle async testing. Support snapshot testing.
How do you implement component state machines?
State machines handle complex component states. Implement finite state automata. Handle state transitions. Support parallel states. Manage side effects in state changes.
How do you implement component code splitting?
Code splitting uses dynamic imports, route-based splitting. Implement lazy loading strategies. Handle loading states. Optimize bundle size. Support prefetching.
How do you implement advanced reactivity patterns?
Advanced reactivity includes custom stores, derived state, reactive declarations. Handle complex dependencies. Implement reactive cleanup. Support async reactivity.
How do you implement component error boundaries?
Error boundaries catch and handle component errors. Implement error recovery. Support fallback UI. Handle error reporting. Manage error state.
How do you implement component accessibility?
Accessibility implementation includes ARIA attributes, keyboard navigation, screen reader support. Handle focus management. Implement semantic HTML. Support a11y testing.
How do you implement component internationalization?
Internationalization handles multiple languages, RTL support, number/date formatting. Implement translation loading. Support locale switching. Handle dynamic content.
How do you implement component performance monitoring?
Performance monitoring tracks render times, memory usage, bundle size. Implement performance metrics. Handle performance optimization. Support monitoring tools.
What is reactivity in Svelte?
Reactivity in Svelte is the automatic updating of the DOM when data changes. It's handled through assignments to declared variables and the $: syntax. Svelte's compiler creates the necessary code to update the DOM when dependencies change.
How do you create a writable store in Svelte?
Writable stores are created using writable() from svelte/store. Example: const count = writable(0). Provides methods like set() and update() to modify the store value. Subscribe to changes using subscribe() method.
What are reactive declarations in Svelte?
Reactive declarations use the $: syntax to automatically recompute values when dependencies change. Example: $: doubled = count * 2. They run whenever any referenced values change.
How do you update arrays reactively in Svelte?
Arrays must be updated using assignment for reactivity. Use methods like [...array, newItem] for additions, array.filter() for removals, or array.map() for updates. Assignment triggers reactivity.
What is the difference between writable and readable stores?
Writable stores can be modified using set() and update(), while readable stores are read-only. Readable stores are created using readable() and only change through their start function.
How do you subscribe to stores in Svelte?
Stores can be subscribed to using subscribe() method or automatically in templates using $ prefix. Example: $store in template or store.subscribe(value => {}) in script.
What is auto-subscription in Svelte?
Auto-subscription happens when using $ prefix with stores in components. Svelte automatically handles subscribe and unsubscribe. No manual cleanup needed. Works in template and reactive statements.
How do you handle derived values in Svelte?
Derived values can be created using reactive declarations ($:) or derived stores. They automatically update when dependencies change. Used for computed values that depend on other state.
What is the purpose of the set function in stores?
The set function directly sets a new value for a writable store. Example: count.set(10). Triggers store updates and notifies all subscribers. Used for direct value updates.
How do you update objects reactively in Svelte?
Objects must be updated through assignment for reactivity. Use spread operator or Object.assign for updates. Example: obj = {...obj, newProp: value}. Assignment triggers reactivity.
How do you implement derived stores?
Derived stores are created using derived() from svelte/store. Take one or more stores as input. Transform values using callback function. Update automatically when source stores change.
How do you handle async derived stores?
Async derived stores handle asynchronous transformations. Use derived with set callback. Handle loading states. Support cancellation. Manage async dependencies.
How do you implement custom stores?
Custom stores implement subscribe function. Can add custom methods. Handle internal state. Support custom update logic. Implement cleanup on unsubscribe.
How do you handle store initialization?
Store initialization can be synchronous or async. Handle initial values. Support lazy initialization. Manage loading states. Handle initialization errors.
How do you implement store persistence?
Store persistence uses localStorage or sessionStorage. Implement auto-save functionality. Handle serialization. Support state rehydration. Manage persistence errors.
How do you handle store subscriptions cleanup?
Store subscriptions cleanup happens automatically with $ prefix. Manual cleanup needs unsubscribe call. Handle cleanup in onDestroy. Prevent memory leaks.
How do you implement store composition?
Store composition combines multiple stores. Create higher-order stores. Handle dependencies between stores. Support store chaining. Manage composite updates.
How do you handle store error states?
Store error handling includes error states. Implement error recovery. Support error notifications. Handle async errors. Manage error boundaries.
How do you implement store middleware?
Store middleware intercepts store operations. Implement custom behaviors. Handle side effects. Support middleware chain. Manage middleware order.
How do you optimize store updates?
Store optimization includes batching updates. Implement update debouncing. Handle performance bottlenecks. Support selective updates. Monitor update frequency.
How do you implement store time-travel?
Store time-travel tracks state history. Implement undo/redo. Handle state snapshots. Support history compression. Manage memory usage.
How do you implement store synchronization?
Store synchronization handles multiple instances. Implement cross-tab sync. Support real-time updates. Handle conflicts. Manage sync state.
How do you implement store migrations?
Store migrations handle version changes. Implement data transforms. Support backward compatibility. Handle migration errors. Manage migration state.
How do you implement store encryption?
Store encryption secures sensitive data. Implement encryption/decryption. Handle key management. Support secure storage. Manage encrypted state.
How do you implement store validation?
Store validation ensures data integrity. Implement validation rules. Handle validation errors. Support schema validation. Manage validation state.
How do you implement store compression?
Store compression reduces data size. Implement compression algorithms. Handle serialization. Support decompression. Manage compressed state.
How do you implement store monitoring?
Store monitoring tracks store usage. Implement metrics collection. Handle performance tracking. Support debugging tools. Manage monitoring state.
How do you implement store testing?
Store testing verifies store behavior. Implement test utilities. Handle async testing. Support mocking. Manage test state.
How do you implement store documentation?
Store documentation describes store usage. Implement documentation generation. Handle API documentation. Support examples. Manage documentation state.
How do you declare props in Svelte components?
Props are declared using the export keyword in the script section. Example: export let propName. Optional props can have default values: export let propName = defaultValue. Props are passed to components as attributes.
How do you pass props to child components?
Props are passed to child components as attributes in the markup. Example: <ChildComponent propName={value} />. Can use shorthand when prop name matches variable: <ChildComponent {value} />.
What are spread props in Svelte?
Spread props allow passing multiple props using spread syntax. Example: <Component {...props} />. Useful when forwarding many props. All properties of the object become individual props.
How do you handle prop validation in Svelte?
Prop validation can be handled through TypeScript types or runtime checks. Use if statements or assertions in component initialization. Can throw errors for invalid props.
How do components communicate events to parents?
Components dispatch custom events using createEventDispatcher. Parent listens using on:eventName. Example: dispatch('message', data). Events bubble by default.
What is event forwarding in Svelte?
Event forwarding passes events up through components using on:eventName. Component can forward DOM events or custom events. Use on:message|stopPropagation to prevent bubbling.
How do you bind to component props?
Two-way binding on props uses bind:propName. Example: <Input bind:value={name} />. Component must export the prop. Updates flow both ways between parent and child.
What are reactive statements in component communication?
Reactive statements ($:) respond to prop changes. Can trigger side effects or derive values. Example: $: console.log(propName). Runs whenever referenced props update.
How do you pass HTML attributes through to elements?
HTML attributes can be forwarded using $$props or $$restProps. Useful for wrapper components. Example: <div {...$$restProps}>. Passes any unhandled props to element.
What is prop destructuring in Svelte?
Props can be destructured in export statement. Example: export let { name, age } = data. Supports default values and renaming. Makes prop handling more concise.
How do you implement prop type checking?
Prop types can be checked using TypeScript or runtime validation. Define interfaces for props. Implement validation in onMount or initialization. Handle type errors appropriately.
How do you handle async props?
Async props can be handled using promises or async/await. Handle loading states. Use reactive statements for async updates. Manage error states for async props.
What are computed props?
Computed props derive values from other props using reactive declarations. Example: $: fullName = `${firstName} ${lastName}`. Update automatically when dependencies change.
How do you implement prop watchers?
Prop watchers use reactive statements to observe changes. Can trigger side effects or validations. Handle prop updates asynchronously. Support complex watch conditions.
How do you handle prop defaults?
Prop defaults are set in export statement or computed. Consider component initialization. Handle undefined values. Support dynamic defaults. Validate default values.
What are event modifiers?
Event modifiers customize event behavior. Include preventDefault, stopPropagation, once, capture. Used with on: directive. Example: on:click|preventDefault. Support multiple modifiers.
How do you implement prop transformation?
Prop transformation converts prop values before use. Use computed properties or methods. Handle data formatting. Support bi-directional transformation. Validate transformed values.
What are dynamic event handlers?
Dynamic event handlers change based on props or state. Use computed values for handlers. Support conditional events. Handle dynamic binding. Manage handler lifecycle.
How do you implement prop persistence?
Prop persistence saves prop values between renders. Use stores or local storage. Handle persistence lifecycle. Support value restoration. Manage persistence errors.
What are compound components?
Compound components share state through context. Implement parent-child communication. Handle component composition. Support flexible APIs. Manage shared state.
How do you implement advanced prop validation?
Advanced validation uses custom validators or schemas. Handle complex validation rules. Support async validation. Implement validation pipelines. Manage validation state.
How do you implement prop inheritance?
Prop inheritance passes props through component hierarchy. Handle prop overrides. Support default inheritance. Implement inheritance rules. Manage inheritance chain.
How do you implement prop versioning?
Prop versioning handles breaking changes. Implement version migration. Support backwards compatibility. Handle version conflicts. Manage version state.
How do you implement prop serialization?
Prop serialization handles complex data types. Implement custom serializers. Support bi-directional conversion. Handle serialization errors. Manage serialized state.
How do you implement prop documentation?
Prop documentation uses JSDoc or TypeScript. Generate documentation automatically. Support example usage. Handle deprecated props. Manage documentation updates.
How do you implement prop testing?
Prop testing verifies component behavior. Implement test utilities. Handle edge cases. Support integration testing. Manage test coverage.
How do you implement prop monitoring?
Prop monitoring tracks prop usage and changes. Implement monitoring tools. Handle performance tracking. Support debugging. Manage monitoring state.
How do you implement prop optimization?
Prop optimization improves performance. Handle prop memoization. Implement update batching. Support selective updates. Manage update frequency.
How do you implement prop security?
Prop security prevents injection attacks. Implement sanitization. Handle sensitive data. Support encryption. Manage security policies.
How do you implement prop migrations?
Prop migrations handle schema changes. Implement migration strategies. Support data transformation. Handle migration errors. Manage migration state.
What are lifecycle methods in Svelte?
Lifecycle methods in Svelte are functions that execute at different stages of a component's existence. Main lifecycle methods include onMount, onDestroy, beforeUpdate, and afterUpdate. They help manage side effects and component behavior.
What is onMount in Svelte?
onMount is a lifecycle function that runs after the component is first rendered to the DOM. It's commonly used for initialization, data fetching, and setting up subscriptions. Returns a cleanup function optionally.
What is onDestroy in Svelte?
onDestroy is called when a component is unmounted from the DOM. Used for cleanup like unsubscribing from stores, clearing intervals, or removing event listeners. Prevents memory leaks.
What is beforeUpdate in Svelte?
beforeUpdate runs before the DOM is updated with new values. Useful for capturing pre-update state, like scroll position. Can be used multiple times in a component.
What is afterUpdate in Svelte?
afterUpdate runs after the DOM is updated with new values. Used for operations that require updated DOM state, like updating scroll position or third-party libraries.
How do you handle async operations in onMount?
Async operations in onMount use async/await or promises. Handle loading states and errors appropriately. Example: onMount(async () => { const data = await fetchData(); })
What is the execution order of lifecycle methods?
Lifecycle methods execute in order: 1. Component creation, 2. beforeUpdate, 3. onMount, 4. afterUpdate. onDestroy runs when component is unmounted. Updates trigger beforeUpdate and afterUpdate.
How do you clean up resources in lifecycle methods?
Resource cleanup is done in onDestroy or by returning cleanup function from onMount. Clear intervals, timeouts, event listeners, and subscriptions to prevent memory leaks.
What are lifecycle guarantees in Svelte?
Svelte guarantees that onMount runs after DOM is ready, onDestroy runs before unmount, beforeUpdate before DOM updates, and afterUpdate after DOM updates. Component initialization always runs.
How do lifecycle methods work with SSR?
During SSR, onMount and afterUpdate don't run. Other lifecycle methods run normally. Client-side hydration triggers lifecycle methods appropriately. Handle SSR-specific logic.
How do you handle errors in lifecycle methods?
Error handling uses try/catch blocks or error boundaries. Handle async errors appropriately. Implement error recovery strategies. Support error reporting.
How do you manage state initialization in lifecycle methods?
State initialization happens in component creation or onMount. Handle async initialization. Support loading states. Implement initialization strategies.
How do lifecycle methods interact with stores?
Store subscriptions are typically set up in onMount and cleaned in onDestroy. Handle store updates. Support auto-subscription. Manage subscription lifecycle.
How do you handle DOM measurements in lifecycle methods?
DOM measurements use afterUpdate for accurate values. Cache measurements when needed. Handle resize events. Support responsive measurements.
How do you implement initialization patterns?
Initialization patterns include lazy loading, conditional initialization, and dependency injection. Handle initialization order. Support async initialization.
How do you handle prop changes in lifecycle methods?
Prop changes trigger beforeUpdate and afterUpdate. Implement prop watchers. Handle derived values. Support prop validation in lifecycle.
How do you manage side effects in lifecycle methods?
Side effects management includes cleanup, ordering, and dependencies. Handle async side effects. Support cancellation. Implement side effect tracking.
How do lifecycle methods work with animations?
Animations interact with beforeUpdate and afterUpdate. Handle transition states. Support animation cleanup. Implement animation queuing.
How do you implement lifecycle hooks?
Lifecycle hooks extend default lifecycle behavior. Implement custom hooks. Support hook composition. Handle hook dependencies.
How do you handle component transitions?
Component transitions use lifecycle methods for coordination. Handle mount/unmount animations. Support transition states. Implement transition hooks.
How do you implement advanced initialization patterns?
Advanced initialization includes dependency graphs, async loading, and state machines. Handle complex dependencies. Support initialization rollback.
How do you implement lifecycle monitoring?
Lifecycle monitoring tracks method execution and performance. Implement monitoring tools. Handle performance tracking. Support debugging.
How do you implement lifecycle testing?
Lifecycle testing verifies method execution and timing. Implement test utilities. Handle async testing. Support integration testing.
How do you implement lifecycle optimization?
Lifecycle optimization improves performance and efficiency. Handle method batching. Implement update optimization. Support selective updates.
How do you implement lifecycle documentation?
Lifecycle documentation describes method behavior and usage. Generate documentation automatically. Support example usage. Handle versioning.
How do you handle complex cleanup scenarios?
Complex cleanup handles nested resources and dependencies. Implement cleanup ordering. Support partial cleanup. Handle cleanup failures.
How do you implement lifecycle error boundaries?
Error boundaries catch and handle lifecycle errors. Implement recovery strategies. Support fallback content. Handle error reporting.
How do you implement lifecycle state machines?
State machines manage complex lifecycle states. Handle state transitions. Support parallel states. Implement state persistence.
How do you implement lifecycle debugging?
Lifecycle debugging tracks method execution and state. Implement debugging tools. Support breakpoints. Handle debugging output.
How do you implement lifecycle security?
Lifecycle security prevents unauthorized access and manipulation. Handle sensitive operations. Support access control. Implement security policies.
How do you handle DOM events in Svelte?
DOM events in Svelte are handled using the on: directive. Example: <button on:click={handleClick}>. Supports all standard DOM events like click, submit, input, etc. Event handler receives the event object as parameter.
What are event modifiers in Svelte?
Event modifiers customize event behavior using | symbol. Common modifiers include preventDefault, stopPropagation, once, capture. Example: <form on:submit|preventDefault={handleSubmit}>.
How do you create custom events in Svelte?
Custom events are created using createEventDispatcher. Import from svelte, initialize in component, then dispatch events. Example: const dispatch = createEventDispatcher(); dispatch('custom', data);
How do you listen to component events?
Component events are listened to using on:eventName. Parent components can listen to dispatched events. Example: <Child on:custom={handleCustom}>. Events bubble by default.
What is event forwarding in Svelte?
Event forwarding passes events up through components using on:eventName. No handler needed for forwarding. Example: <button on:click>. Useful for bubbling events through component hierarchy.
How do you handle inline event handlers?
Inline handlers can be defined directly in the on: directive. Example: <button on:click={() => count += 1}>. Good for simple operations but avoid complex logic.
What is event delegation in Svelte?
Event delegation handles events at a higher level using bubbling. Attach single handler to parent for multiple children. Use event.target to identify source. Improves performance for many elements.
How do you pass data with custom events?
Data is passed as second argument to dispatch. Example: dispatch('custom', { detail: value }). Accessed in handler through event.detail. Supports any serializable data.
What is the event object in Svelte?
Event object contains event details passed to handlers. Includes properties like target, currentTarget, preventDefault(). Available as first parameter in event handlers.
How do you handle multiple events on one element?
Multiple events use multiple on: directives. Example: <div on:click={handleClick} on:mouseover={handleHover}>. Each event can have its own modifiers and handlers.
How do you implement event debouncing?
Event debouncing delays handler execution. Use timer to postpone execution. Clear previous timer on new events. Example: implement custom action or store for debouncing.
How do you implement event throttling?
Event throttling limits execution frequency. Implement using timer and last execution time. Ensure minimum time between executions. Support custom throttle intervals.
How do you handle keyboard events?
Keyboard events use on:keydown, on:keyup, on:keypress. Access key information through event.key. Support key combinations. Handle keyboard navigation.
How do you handle drag and drop events?
Drag and drop uses dragstart, dragover, drop events. Set draggable attribute. Handle data transfer. Support drag visualization. Implement drop zones.
How do you handle form events?
Form events include submit, reset, change. Prevent default submission. Handle validation. Collect form data. Support dynamic forms.
How do you implement custom event modifiers?
Custom modifiers use actions (use:). Implement modifier logic. Support parameters. Handle cleanup. Share across components.
How do you handle outside clicks?
Outside clicks check event.target relationship. Implement using actions. Handle document clicks. Support multiple elements. Clean up listeners.
How do you handle touch events?
Touch events include touchstart, touchmove, touchend. Handle gestures. Support multi-touch. Implement touch feedback. Handle touch coordinates.
How do you handle scroll events?
Scroll events track scroll position. Implement scroll handlers. Support infinite scroll. Handle scroll optimization. Manage scroll restoration.
How do you handle window events?
Window events use svelte:window component. Listen to resize, scroll, online/offline. Handle cleanup. Support event parameters.
How do you implement complex event patterns?
Complex patterns combine multiple events. Handle event sequences. Implement state machines. Support event composition. Manage event flow.
How do you implement event middleware?
Event middleware intercepts and transforms events. Implement custom logic. Support middleware chain. Handle async middleware. Manage middleware order.
How do you implement event logging?
Event logging tracks event occurrences. Implement logging system. Handle event details. Support filtering. Manage log storage.
How do you implement event replay?
Event replay records and replays events. Store event sequence. Handle timing. Support playback control. Manage replay state.
How do you implement event tracking?
Event tracking monitors user interactions. Implement analytics. Handle custom events. Support tracking parameters. Manage tracking data.
How do you handle cross-component events?
Cross-component events use stores or context. Handle event routing. Support event broadcasting. Implement event hierarchy. Manage event scope.
How do you implement event testing?
Event testing verifies event handling. Implement test utilities. Mock events. Support integration testing. Handle async events.
How do you implement event documentation?
Event documentation describes event behavior. Generate documentation automatically. Support example usage. Handle event versioning.
How do you handle event errors?
Event error handling catches and processes errors. Implement error boundaries. Support error recovery. Handle error reporting.
How do you optimize event performance?
Event optimization improves handling efficiency. Implement event pooling. Handle event batching. Support event prioritization.
What are Svelte stores?
Stores in Svelte are reactive data containers that can be shared across components. They provide a way to manage global state and notify subscribers when data changes. Created using writable(), readable(), or derived().
How do you create a writable store?
Writable stores are created using writable() from svelte/store. Example: const count = writable(0). They provide set() and update() methods to modify values, and subscribe() to react to changes.
What is the store contract in Svelte?
The store contract requires an object with subscribe method that takes a callback and returns unsubscribe function. Any object meeting this contract can be used as a store with $ prefix.
How do you subscribe to store changes?
Store changes can be subscribed to using subscribe method or $ prefix in components. Example: count.subscribe(value => console.log(value)) or use $count directly in template.
What are readable stores?
Readable stores are created using readable() and are read-only. They can only be updated through their start function. Useful for external data sources that components shouldn't modify.
How do you use derived stores?
Derived stores are created using derived() and compute values based on other stores. Example: const doubled = derived(count, $count => $count * 2). Update automatically when source stores change.
What is auto-subscription in Svelte?
Auto-subscription happens when using $ prefix with stores in components. Svelte automatically handles subscribe and unsubscribe. No manual cleanup needed. Works in template and script.
How do you update store values?
Store values can be updated using set() or update() methods. Example: count.set(10) or count.update(n => n + 1). Updates notify all subscribers automatically.
What is store initialization?
Stores are initialized with initial value in creation. Example: writable(initialValue). Can be undefined. Support synchronous and asynchronous initialization.
How do stores work with reactivity?
Stores integrate with Svelte's reactivity system. Changes trigger reactive updates. Work with reactive declarations ($:). Support reactive dependencies tracking.
How do you implement custom stores?
Custom stores implement subscribe method. Can add custom methods. Handle internal state. Example: function createCustomStore() { const { subscribe, set } = writable(0); return { subscribe, increment: () => update(n => n + 1) }; }
How do you handle async stores?
Async stores handle asynchronous data. Support loading states. Handle errors. Example: const data = writable(null); async function fetchData() { const response = await fetch(url); data.set(await response.json()); }
How do you implement store persistence?
Store persistence saves state to storage. Implement auto-save. Handle state rehydration. Example: Subscribe to changes and save to localStorage. Load initial state from storage.
How do you handle store dependencies?
Store dependencies use derived stores or reactive statements. Handle update order. Manage circular dependencies. Support dependency tracking.
How do you implement store middleware?
Store middleware intercepts store operations. Implement custom behaviors. Handle side effects. Example: Create wrapper store with logging or validation.
How do you handle store errors?
Store error handling catches and processes errors. Implement error states. Support error recovery. Example: Try-catch in store operations, maintain error state.
How do you implement store validation?
Store validation ensures valid state. Implement validation rules. Handle validation errors. Example: Create wrapper store that validates updates.
How do you optimize store updates?
Store optimization includes batching updates, debouncing, throttling. Handle performance bottlenecks. Example: Implement update batching or debounced updates.
How do you implement store composition?
Store composition combines multiple stores. Create higher-order stores. Handle store relationships. Example: Combine multiple stores into single interface.
How do you manage store lifecycles?
Store lifecycle management handles initialization, updates, cleanup. Support store creation/destruction. Example: Implement cleanup in onDestroy, handle store initialization.
How do you implement advanced store patterns?
Advanced patterns include state machines, event sourcing, command pattern. Handle complex state management. Example: Implement store as state machine.
How do you implement store synchronization?
Store synchronization handles multiple instances. Implement cross-tab sync. Handle conflicts. Example: Use broadcast channel for cross-tab communication.
How do you implement store time travel?
Store time travel tracks state history. Implement undo/redo. Handle state snapshots. Example: Maintain history of states, implement restore functionality.
How do you implement store encryption?
Store encryption secures sensitive data. Implement encryption/decryption. Handle key management. Example: Encrypt data before storage, decrypt on retrieval.
How do you implement store migrations?
Store migrations handle version changes. Implement data transforms. Support backwards compatibility. Example: Define migration strategies between versions.
How do you implement store monitoring?
Store monitoring tracks store usage. Implement metrics collection. Handle debugging. Example: Create monitoring wrapper for stores, track operations.
How do you implement store testing?
Store testing verifies store behavior. Implement test utilities. Handle async testing. Example: Create test helpers, mock store functionality.
How do you implement store documentation?
Store documentation describes store usage. Generate documentation automatically. Support examples. Example: Create documentation generator for stores.
How do you implement store security?
Store security prevents unauthorized access. Implement access control. Handle sensitive data. Example: Create secure store wrapper with access checks.
How do you optimize store performance?
Store performance optimization includes selective updates, memoization, lazy loading. Handle large datasets. Example: Implement selective update mechanism.
What are transitions in Svelte?
Transitions in Svelte are built-in animations that play when elements are added to or removed from the DOM. They are added using the transition: directive, with built-in functions like fade, fly, slide, etc.
How do you use the fade transition?
Fade transition is used with transition:fade directive. Example: <div transition:fade>. Can accept parameters like duration and delay. Animates opacity from 0 to 1 or vice versa.
What is the difference between in: and out: directives?
in: and out: directives specify different transitions for entering and leaving. Example: <div in:fade out:fly>. Allows different animations for element addition and removal.
What are transition parameters?
Transition parameters customize animation behavior. Example: transition:fade={{duration: 300, delay: 100}}. Include properties like duration, delay, easing function.
How do you use the fly transition?
Fly transition animates position and opacity. Example: <div transition:fly={{y: 200}}>. Parameters include x, y coordinates, duration, opacity settings.
What is the slide transition?
Slide transition animates element height. Example: <div transition:slide>. Useful for collapsible content. Can customize duration and easing.
How do you use easing functions?
Easing functions define animation progression. Import from svelte/easing. Example: transition:fade={{easing: quintOut}}. Affects animation timing and feel.
What is transition:local modifier?
transition:local restricts transitions to when parent component is added/removed. Prevents transitions during internal state changes. Example: <div transition:fade|local>.
How do you use the scale transition?
Scale transition animates size and opacity. Example: <div transition:scale>. Parameters include start, opacity, duration. Useful for pop-in effects.
What is the draw transition?
Draw transition animates SVG paths. Example: <path transition:draw>. Parameters include duration, delay, easing. Useful for path animations.
How do you create custom transitions?
Custom transitions are functions returning animation parameters. Include css and tick functions. Handle enter/exit animations. Support custom parameters.
How do you handle transition events?
Transition events include introstart, introend, outrostart, outroend. Listen using on: directive. Example: <div transition:fade on:introend={handleEnd}>.
What are CSS animations in Svelte?
CSS animations use standard CSS animation properties. Can be combined with transitions. Example: <div animate:flip>. Support keyframes and animation properties.
How do you use the flip animation?
Flip animation smoothly animates layout changes. Example: <div animate:flip>. Parameters include duration, delay. Useful for list reordering.
How do you handle multiple transitions?
Multiple transitions can be combined using different directives. Handle timing coordination. Support transition groups. Manage transition order.
How do you implement spring animations?
Spring animations use spring() function. Handle physics-based animations. Support stiffness and damping. Example: spring(value, {stiffness: 0.3}).
How do you handle transition crossfade?
Crossfade creates smooth transitions between elements. Use crossfade() function. Handle element replacement. Support key-based transitions.
How do you optimize transition performance?
Optimize using CSS transforms, will-change property. Handle hardware acceleration. Manage animation frame rate. Monitor performance metrics.
How do you handle transition groups?
Transition groups coordinate multiple transitions. Handle group timing. Support synchronized animations. Manage group lifecycle.
How do you implement deferred transitions?
Deferred transitions delay animation start. Handle transition timing. Support conditional transitions. Manage transition state.
How do you implement complex animation sequences?
Complex sequences combine multiple animations. Handle timing coordination. Support sequential and parallel animations. Manage animation state.
How do you implement animation middleware?
Animation middleware intercepts and modifies animations. Handle animation pipeline. Support middleware chain. Manage animation flow.
How do you implement animation state machines?
Animation state machines manage complex animation states. Handle state transitions. Support parallel states. Manage animation logic.
How do you implement animation presets?
Animation presets define reusable animations. Handle preset parameters. Support preset composition. Manage preset library.
How do you implement animation testing?
Animation testing verifies animation behavior. Handle timing tests. Support visual regression. Manage test assertions.
How do you implement animation debugging?
Animation debugging tracks animation state. Handle debugging tools. Support timeline inspection. Manage debug output.
How do you implement animation optimization?
Animation optimization improves performance. Handle frame rate. Support GPU acceleration. Manage rendering pipeline.
How do you implement animation documentation?
Animation documentation describes animation behavior. Generate documentation automatically. Support example animations. Manage documentation updates.
How do you implement animation monitoring?
Animation monitoring tracks animation performance. Handle metrics collection. Support performance analysis. Manage monitoring data.
What are slots in Svelte?
Slots are placeholders in components that allow parent components to pass content. Defined using <slot> element. Enable component composition and content projection. Basic slots receive any content passed between component tags.
How do you define a default slot?
Default slots provide fallback content. Example: <slot>Default content</slot>. Content appears when parent doesn't provide slot content. Useful for optional content.
What are named slots?
Named slots target specific slot locations using name attribute. Example: <slot name='header'>. Content provided using slot='header' attribute. Allows multiple distinct content areas.
How do you pass content to named slots?
Content is passed to named slots using slot attribute. Example: <div slot='header'>Header content</div>. Must match slot name in component. Can pass any valid HTML or components.
What are slot props?
Slot props pass data from child to parent through slots. Use let:propertyName directive. Example: <slot name='item' let:item>. Enables parent to access child component data.
How do you check if slot has content?
Use $$slots object to check slot content. Example: {#if $$slots.header}. Available in component script and template. Useful for conditional rendering.
What is slot fallback content?
Fallback content appears when slot is empty. Defined between slot tags. Example: <slot>Fallback</slot>. Provides default UI when parent doesn't provide content.
How do slots work with component composition?
Slots enable flexible component composition. Support content injection at multiple points. Allow component reuse with different content. Enable layout component patterns.
What is the scope of slot content?
Slot content maintains parent component scope. Can access parent variables and functions. Cannot directly access child component state. Uses parent component context.
How do you style slot content?
Slot content can be styled in both parent and child. Child styles using :slotted() selector. Parent styles apply normally. Support style encapsulation.
How do you implement conditional slots?
Conditional slots use if blocks around slots. Handle slot presence checks. Support dynamic slot selection. Example: {#if condition}<slot></slot>{/if}
How do you handle dynamic slot names?
Dynamic slot names use computed values. Support runtime slot selection. Handle dynamic content projection. Example: <slot name={dynamicName}>
How do you implement slot validation?
Slot validation checks content type and structure. Handle invalid content. Support content restrictions. Implement validation logic.
How do you handle slot events?
Slot events bubble through component hierarchy. Handle event forwarding. Support event modification. Manage event propagation.
How do you implement slot middleware?
Slot middleware processes slot content. Handle content transformation. Support content filtering. Implement middleware chain.
How do you handle slot lifecycles?
Slot lifecycles manage content updates. Handle content mounting/unmounting. Support cleanup operations. Manage slot state.
How do you implement slot composition?
Slot composition combines multiple slots. Handle nested slots. Support slot inheritance. Implement composition patterns.
How do you optimize slot performance?
Slot optimization improves rendering efficiency. Handle content caching. Support lazy loading. Manage update frequency.
How do you handle slot error boundaries?
Error boundaries catch slot content errors. Handle error recovery. Support fallback content. Manage error state.
How do you implement slot monitoring?
Slot monitoring tracks content changes. Handle performance metrics. Support debugging tools. Manage monitoring state.
How do you implement advanced slot patterns?
Advanced patterns include render props, compound slots. Handle complex compositions. Support pattern libraries. Implement reusable patterns.
How do you implement slot testing?
Slot testing verifies content projection. Handle integration testing. Support unit tests. Implement test utilities.
How do you implement slot documentation?
Slot documentation describes usage patterns. Generate documentation automatically. Support example usage. Manage documentation updates.
How do you implement slot security?
Slot security prevents content injection. Handle content sanitization. Support content restrictions. Implement security policies.
How do you implement slot versioning?
Slot versioning handles API changes. Implement version migration. Support backwards compatibility. Manage version state.
How do you implement slot debugging?
Slot debugging tracks content flow. Handle debugging tools. Support breakpoints. Manage debug output.
How do you implement slot optimization strategies?
Optimization strategies improve slot performance. Handle content caching. Support virtual slots. Implement update strategies.
How do you implement slot state management?
State management handles slot-specific state. Implement state containers. Support state sharing. Manage state updates.
How do you implement slot accessibility?
Slot accessibility ensures content is accessible. Handle ARIA attributes. Support screen readers. Implement a11y patterns.
What are slots in Svelte?
Slots are placeholders in components that allow parent components to pass content. Defined using <slot> element. Enable component composition and content projection. Basic slots receive any content passed between component tags.
How do you define a default slot?
Default slots provide fallback content. Example: <slot>Default content</slot>. Content appears when parent doesn't provide slot content. Useful for optional content.
What are named slots?
Named slots target specific slot locations using name attribute. Example: <slot name='header'>. Content provided using slot='header' attribute. Allows multiple distinct content areas.
How do you pass content to named slots?
Content is passed to named slots using slot attribute. Example: <div slot='header'>Header content</div>. Must match slot name in component. Can pass any valid HTML or components.
What are slot props?
Slot props pass data from child to parent through slots. Use let:propertyName directive. Example: <slot name='item' let:item>. Enables parent to access child component data.
How do you check if slot has content?
Use $$slots object to check slot content. Example: {#if $$slots.header}. Available in component script and template. Useful for conditional rendering.
What is slot fallback content?
Fallback content appears when slot is empty. Defined between slot tags. Example: <slot>Fallback</slot>. Provides default UI when parent doesn't provide content.
How do slots work with component composition?
Slots enable flexible component composition. Support content injection at multiple points. Allow component reuse with different content. Enable layout component patterns.
What is the scope of slot content?
Slot content maintains parent component scope. Can access parent variables and functions. Cannot directly access child component state. Uses parent component context.
How do you style slot content?
Slot content can be styled in both parent and child. Child styles using :slotted() selector. Parent styles apply normally. Support style encapsulation.
How do you implement conditional slots?
Conditional slots use if blocks around slots. Handle slot presence checks. Support dynamic slot selection. Example: {#if condition}<slot></slot>{/if}
How do you handle dynamic slot names?
Dynamic slot names use computed values. Support runtime slot selection. Handle dynamic content projection. Example: <slot name={dynamicName}>
How do you implement slot validation?
Slot validation checks content type and structure. Handle invalid content. Support content restrictions. Implement validation logic.
How do you handle slot events?
Slot events bubble through component hierarchy. Handle event forwarding. Support event modification. Manage event propagation.
How do you implement slot middleware?
Slot middleware processes slot content. Handle content transformation. Support content filtering. Implement middleware chain.
How do you handle slot lifecycles?
Slot lifecycles manage content updates. Handle content mounting/unmounting. Support cleanup operations. Manage slot state.
How do you implement slot composition?
Slot composition combines multiple slots. Handle nested slots. Support slot inheritance. Implement composition patterns.
How do you optimize slot performance?
Slot optimization improves rendering efficiency. Handle content caching. Support lazy loading. Manage update frequency.
How do you handle slot error boundaries?
Error boundaries catch slot content errors. Handle error recovery. Support fallback content. Manage error state.
How do you implement slot monitoring?
Slot monitoring tracks content changes. Handle performance metrics. Support debugging tools. Manage monitoring state.
How do you implement advanced slot patterns?
Advanced patterns include render props, compound slots. Handle complex compositions. Support pattern libraries. Implement reusable patterns.
How do you implement slot testing?
Slot testing verifies content projection. Handle integration testing. Support unit tests. Implement test utilities.
How do you implement slot documentation?
Slot documentation describes usage patterns. Generate documentation automatically. Support example usage. Manage documentation updates.
How do you implement slot security?
Slot security prevents content injection. Handle content sanitization. Support content restrictions. Implement security policies.
How do you implement slot versioning?
Slot versioning handles API changes. Implement version migration. Support backwards compatibility. Manage version state.
How do you implement slot debugging?
Slot debugging tracks content flow. Handle debugging tools. Support breakpoints. Manage debug output.
How do you implement slot optimization strategies?
Optimization strategies improve slot performance. Handle content caching. Support virtual slots. Implement update strategies.
How do you implement slot state management?
State management handles slot-specific state. Implement state containers. Support state sharing. Manage state updates.
How do you implement slot accessibility?
Slot accessibility ensures content is accessible. Handle ARIA attributes. Support screen readers. Implement a11y patterns.
What is SvelteKit routing?
SvelteKit provides file-based routing where files in the routes directory automatically become pages. URLs correspond to file paths. Supports dynamic routes, nested layouts, and route parameters.
How do you create a basic route in SvelteKit?
Create a route by adding a +page.svelte file in the routes directory. Example: src/routes/about/+page.svelte becomes '/about'. File structure mirrors URL structure.
What are dynamic routes in SvelteKit?
Dynamic routes use square brackets in file names. Example: [slug]/+page.svelte creates dynamic segment. Parameters available through page store. Support multiple dynamic segments.
How do you access route parameters?
Route parameters accessed through page.params. Example: export let data; const { slug } = data. Available in +page.svelte and +page.server.js files.
What is a layout file in SvelteKit?
Layout files (+layout.svelte) provide shared UI for multiple routes. Define common elements like navigation, footer. Support nested layouts. Content injected via <slot>.
How do you handle navigation in SvelteKit?
Navigation uses <a> tags or programmatic goto function. SvelteKit handles client-side navigation. Supports prefetching with data attribute. Maintains scroll position.
What are route groups in SvelteKit?
Route groups organize routes using (group) syntax. Don't affect URL structure. Share layouts within groups. Support multiple groups. Help organize large applications.
How do you implement loading data?
Data loading uses +page.js or +page.server.js files. Export load function for data fetching. Returns props for page component. Supports server-side loading.
What is the error page in SvelteKit?
Error page (+error.svelte) handles route errors. Displays when errors occur. Access error details through error prop. Support custom error handling.
How do you handle redirects?
Redirects use redirect function from @sveltejs/kit. Can redirect in load functions or actions. Support temporary/permanent redirects. Handle authentication redirects.
How do you implement route guards?
Route guards protect routes using load functions. Check authentication/authorization. Return redirect for unauthorized access. Support async checks.
How do you handle nested layouts?
Nested layouts use multiple +layout.svelte files. Each level adds layout. Support layout inheritance. Handle layout data. Share layout between routes.
How do you implement route preloading?
Preloading uses data-sveltekit-preload attribute. Fetches data before navigation. Support hover preloading. Handle preload strategies. Optimize performance.
How do you handle route transitions?
Route transitions use page transitions API. Support enter/leave animations. Handle transition lifecycle. Implement custom transitions. Manage transition state.
How do you implement route middleware?
Route middleware uses hooks.server.js file. Handle request/response. Support authentication. Implement custom logic. Manage middleware chain.
How do you handle route caching?
Route caching implements caching strategies. Handle data caching. Support page caching. Implement cache invalidation. Manage cache lifecycle.
How do you implement route validation?
Route validation handles parameter validation. Support request validation. Implement validation rules. Handle validation errors. Manage validation state.
How do you handle route state?
Route state management uses stores or context. Handle state persistence. Support state sharing. Implement state updates. Manage state lifecycle.
How do you optimize route performance?
Route optimization includes code splitting, preloading. Handle lazy loading. Support route prioritization. Implement performance monitoring.
How do you implement advanced routing patterns?
Advanced patterns include nested routes, parallel routes. Handle complex navigation. Support route composition. Implement routing strategies.
How do you handle route internationalization?
Route i18n supports multiple languages. Handle URL localization. Support language switching. Implement i18n patterns. Manage translations.
How do you implement route testing?
Route testing verifies routing behavior. Handle navigation testing. Support integration testing. Implement test utilities. Manage test coverage.
How do you implement route monitoring?
Route monitoring tracks navigation patterns. Handle analytics integration. Support performance tracking. Implement monitoring tools. Manage monitoring data.
How do you implement route security?
Route security prevents unauthorized access. Handle authentication flows. Support authorization rules. Implement security measures. Manage security policies.
How do you implement route documentation?
Route documentation describes routing structure. Generate documentation automatically. Support example routes. Manage documentation updates. Handle versioning.
How do you implement route debugging?
Route debugging tracks routing issues. Handle debugging tools. Support state inspection. Implement debug logging. Manage debug output.
How do you implement route accessibility?
Route accessibility ensures accessible navigation. Handle focus management. Support screen readers. Implement a11y patterns. Manage announcements.
How do you implement route error handling?
Error handling manages routing errors. Handle error boundaries. Support error recovery. Implement error logging. Manage error state.
How do you implement route code splitting?
Code splitting optimizes route loading. Handle chunk generation. Support dynamic imports. Implement splitting strategies. Manage bundle size.
What is the Context API in Svelte?
The Context API allows passing data through the component tree without prop drilling. Uses setContext and getContext functions. Context is available to component and its descendants. Useful for sharing data/functionality.
How do you set context in Svelte?
Context is set using setContext function from svelte. Example: setContext('key', value). Must be called during component initialization. Value can be any type including functions.
How do you get context in Svelte?
Context is retrieved using getContext function. Example: const value = getContext('key'). Must use same key as setContext. Available in component and child components.
What is context key uniqueness?
Context keys must be unique within component tree. Often use symbols for guaranteed uniqueness. Example: const key = Symbol(). Prevents key collisions between different contexts.
How do you handle context lifecycle?
Context exists throughout component lifecycle. Created during initialization. Available until component destruction. Cannot be changed after initialization. New values require component reinitialization.
What are typical context use cases?
Common uses include theme data, localization, authentication state, shared functionality. Useful for cross-cutting concerns. Avoids prop drilling. Supports component composition.
How do you share functions via context?
Functions can be shared through context. Example: setContext('api', { method: () => {} }). Allows child components to access shared methods. Supports dependency injection pattern.
What is the context scope?
Context is scoped to component and descendants. Not available to parent or sibling components. Multiple instances create separate contexts. Follows component hierarchy.
How do you handle missing context?
getContext returns undefined if context not found. Should handle undefined case. Can provide default values. Consider error handling for required context.
What is context vs stores?
Context is static, set during initialization. Stores are reactive, can change over time. Context good for static values/dependencies. Stores better for changing state.
How do you implement context patterns?
Context patterns include provider components, dependency injection, service locator. Handle context composition. Support context inheritance. Implement context strategies.
How do you handle context updates?
Context updates require component reinitialization. Can combine with stores for reactive updates. Handle update propagation. Manage update lifecycle.
How do you implement context validation?
Context validation ensures valid context values. Handle type checking. Support validation rules. Implement error handling. Manage validation state.
How do you handle context dependencies?
Context dependencies manage relationships between contexts. Handle dependency order. Support circular dependencies. Implement dependency resolution.
How do you implement context composition?
Context composition combines multiple contexts. Handle context merging. Support context inheritance. Implement composition patterns.
How do you handle context initialization?
Context initialization sets up initial context state. Handle async initialization. Support initialization order. Implement initialization strategies.
How do you implement context middleware?
Context middleware processes context operations. Handle context transformation. Support middleware chain. Implement middleware patterns.
How do you handle context errors?
Context error handling manages error states. Handle missing context. Support error recovery. Implement error boundaries.
How do you optimize context usage?
Context optimization improves performance. Handle context caching. Support selective updates. Implement optimization strategies.
How do you handle context cleanup?
Context cleanup manages resource disposal. Handle cleanup order. Support cleanup hooks. Implement cleanup strategies.
How do you implement advanced context patterns?
Advanced patterns include context injection, service location, dependency trees. Handle complex dependencies. Support pattern composition.
How do you implement context testing?
Context testing verifies context behavior. Handle test isolation. Support integration testing. Implement test utilities.
How do you implement context monitoring?
Context monitoring tracks context usage. Handle performance tracking. Support debugging tools. Implement monitoring strategies.
How do you implement context documentation?
Context documentation describes context usage. Generate documentation automatically. Support example usage. Manage documentation updates.
How do you implement context versioning?
Context versioning handles API changes. Implement version migration. Support backwards compatibility. Manage version state.
How do you implement context security?
Context security prevents unauthorized access. Handle access control. Support security policies. Implement security measures.
How do you implement context debugging?
Context debugging tracks context issues. Handle debugging tools. Support state inspection. Implement debug logging.
How do you implement context performance monitoring?
Performance monitoring tracks context efficiency. Handle metrics collection. Support performance analysis. Implement optimization strategies.
How do you implement context dependency injection?
Dependency injection manages component dependencies. Handle injection patterns. Support service location. Implement injection strategies.
How do you implement context type safety?
Type safety ensures correct context usage. Handle TypeScript integration. Support type checking. Implement type definitions.
What are bindings in Svelte?
Bindings create two-way data flow between DOM elements and variables using bind: directive. Example: <input bind:value={text}>. Updates flow both ways, DOM to variable and variable to DOM.
What are the basic form input bindings?
Basic form bindings include value for text inputs, checked for checkboxes, group for radio/checkbox groups. Example: <input bind:value>, <input type='checkbox' bind:checked>.
What is the use: directive?
use: directive attaches actions (reusable DOM node functionality) to elements. Example: <div use:action>. Actions can have parameters. Support cleanup through returned function.
What is the class: directive?
class: directive conditionally applies CSS classes. Example: <div class:active={isActive}>. Shorthand available when variable name matches class name.
How do you bind to custom components?
Custom component binding uses bind: on exported props. Component must export the variable. Example: <CustomInput bind:value>. Supports two-way binding.
What is the style: directive?
style: directive sets inline styles conditionally. Example: <div style:color={textColor}>. Can use shorthand when variable name matches style property.
How do you bind to select elements?
Select elements bind using value or selectedIndex. Example: <select bind:value={selected}>. Supports multiple selection with array binding.
What is the this binding?
this binding references DOM element or component instance. Example: <div bind:this={element}>. Useful for direct DOM manipulation or component method access.
What is the bind:group directive?
bind:group groups radio/checkbox inputs. Binds multiple inputs to single value/array. Example: <input type='radio' bind:group={selected} value='option'>.
How do you bind to contenteditable elements?
Contenteditable elements bind using textContent or innerHTML. Example: <div contenteditable bind:textContent={text}>. Supports rich text editing.
How do you implement custom actions?
Custom actions are functions returning optional destroy method. Handle DOM node manipulation. Support parameters. Example: use:customAction={params}.
How do you handle binding validation?
Binding validation ensures valid values. Handle input constraints. Support custom validation. Implement error handling. Manage validation state.
How do you implement binding middleware?
Binding middleware processes binding operations. Handle value transformation. Support validation chain. Implement middleware pattern.
How do you handle binding dependencies?
Binding dependencies manage related bindings. Handle dependency updates. Support dependency tracking. Implement dependency resolution.
How do you optimize binding performance?
Binding optimization improves update efficiency. Handle update batching. Support selective updates. Implement performance monitoring.
How do you implement custom directives?
Custom directives extend element functionality. Handle directive lifecycle. Support directive parameters. Implement cleanup methods.
How do you handle binding errors?
Binding error handling manages invalid states. Handle error recovery. Support error notifications. Implement error boundaries.
How do you implement binding composition?
Binding composition combines multiple bindings. Handle binding interaction. Support binding inheritance. Implement composition patterns.
How do you handle binding cleanup?
Binding cleanup manages resource disposal. Handle cleanup order. Support cleanup hooks. Implement cleanup strategies.
How do you implement advanced binding patterns?
Advanced patterns include computed bindings, conditional bindings. Handle complex scenarios. Support pattern composition.
How do you implement binding testing?
Binding testing verifies binding behavior. Handle test isolation. Support integration testing. Implement test utilities.
How do you implement binding monitoring?
Binding monitoring tracks binding usage. Handle performance tracking. Support debugging tools. Implement monitoring strategies.
How do you implement binding documentation?
Binding documentation describes binding usage. Generate documentation automatically. Support example usage. Manage documentation updates.
How do you implement binding security?
Binding security prevents unauthorized access. Handle input sanitization. Support security policies. Implement security measures.
How do you implement binding debuggers?
Binding debuggers track binding issues. Handle debugging tools. Support state inspection. Implement debug logging.
How do you implement binding type safety?
Type safety ensures correct binding usage. Handle TypeScript integration. Support type checking. Implement type definitions.
How do you implement binding optimization strategies?
Optimization strategies improve binding performance. Handle update batching. Support selective updates. Implement performance metrics.
How do you implement binding state management?
State management handles binding state. Handle state updates. Support state sharing. Implement state patterns.
How do you implement binding accessibility?
Binding accessibility ensures accessible usage. Handle ARIA attributes. Support screen readers. Implement a11y patterns.
What is Server-Side Rendering in SvelteKit?
Server-Side Rendering (SSR) generates HTML on the server instead of client. Provides better initial page load, SEO benefits. SvelteKit handles SSR automatically with hydration on client-side.
What is hydration in SvelteKit?
Hydration is the process where client-side JavaScript takes over server-rendered HTML. Makes static content interactive. Preserves server-rendered state. Happens automatically in SvelteKit.
How do you handle server-side data loading?
Server-side data loading uses load functions in +page.server.js. Returns data for page rendering. Supports async operations. Data available during SSR and hydration.
What is the CSR fallback in SvelteKit?
Client-Side Rendering (CSR) fallback handles cases where SSR fails or is disabled. Uses +page.js instead of +page.server.js. Provides graceful degradation.
How do you disable SSR for a route?
Disable SSR using export const ssr = false in +page.js. Page renders only on client. Useful for browser-specific functionality. Impacts initial page load.
What are server-only modules in SvelteKit?
Server-only modules run exclusively on server. Use .server.js extension. Cannot be imported by client code. Useful for sensitive operations like database access.
How do you handle SSR errors?
SSR errors handled by error.svelte pages. Support error boundaries. Can provide fallback content. Error details available through error prop.
What is streaming SSR?
Streaming SSR sends HTML in chunks as it's generated. Improves Time To First Byte (TTFB). Supports progressive rendering. Available through Response.body.
How do you handle environment variables in SSR?
Environment variables accessed through $env/static/private or $env/dynamic/private. Only available server-side. Must prefix with VITE_ for client access.
What is prerendering in SvelteKit?
Prerendering generates static HTML at build time. Uses export const prerender = true. Improves performance. Suitable for static content.
How do you implement SSR data fetching?
SSR data fetching uses load functions. Handle async operations. Support caching strategies. Implement error handling. Manage data dependencies.
How do you handle SSR caching?
SSR caching implements cache strategies. Handle cache invalidation. Support cache headers. Implement cache storage. Manage cache lifecycle.
How do you optimize SSR performance?
SSR optimization includes code splitting, caching, streaming. Handle resource optimization. Support performance monitoring. Implement optimization strategies.
How do you handle SSR session state?
SSR session state manages user sessions. Handle session storage. Support session persistence. Implement session security. Manage session lifecycle.
How do you implement SSR middleware?
SSR middleware processes server requests. Handle request transformation. Support middleware chain. Implement middleware patterns. Manage middleware order.
How do you handle SSR authentication?
SSR authentication manages user auth state. Handle auth flows. Support session management. Implement auth strategies. Manage auth security.
How do you implement SSR routing?
SSR routing handles server-side navigation. Handle route matching. Support dynamic routes. Implement routing strategies. Manage route state.
How do you handle SSR headers?
SSR headers manage HTTP headers. Handle cache control. Support content types. Implement header strategies. Manage header security.
How do you implement SSR forms?
SSR forms handle form submissions server-side. Handle form validation. Support file uploads. Implement CSRF protection. Manage form state.
How do you implement advanced SSR patterns?
Advanced patterns include streaming, progressive enhancement. Handle complex scenarios. Support pattern composition. Implement advanced strategies.
How do you implement SSR testing?
SSR testing verifies server rendering. Handle test isolation. Support integration testing. Implement test utilities. Manage test coverage.
How do you implement SSR monitoring?
SSR monitoring tracks server performance. Handle metrics collection. Support debugging tools. Implement monitoring strategies.
How do you implement SSR security?
SSR security prevents vulnerabilities. Handle input sanitization. Support security headers. Implement security measures. Manage security policies.
How do you implement SSR error handling?
SSR error handling manages server errors. Handle error recovery. Support error boundaries. Implement error logging. Manage error state.
How do you implement SSR optimization strategies?
Optimization strategies improve SSR performance. Handle resource optimization. Support caching strategies. Implement performance metrics.
How do you implement SSR state management?
State management handles server state. Handle state serialization. Support state hydration. Implement state patterns.
How do you implement SSR documentation?
SSR documentation describes server features. Generate documentation automatically. Support example usage. Manage documentation updates.
How do you implement SSR debugging?
SSR debugging tracks server issues. Handle debugging tools. Support state inspection. Implement debug logging.
How do you implement SSR internationalization?
SSR internationalization handles multiple languages. Support content translation. Implement i18n patterns. Manage translations.
How do you implement SSR accessibility?
SSR accessibility ensures server-rendered content is accessible. Handle ARIA attributes. Support screen readers. Implement a11y patterns.
What is the recommended testing framework for Svelte?
Vitest is the recommended testing framework for Svelte applications. It's fast, provides good integration with SvelteKit, and supports component testing. Jest can also be used but requires additional configuration.
How do you write component tests in Svelte?
Component tests use @testing-library/svelte. Mount components using render method. Test component behavior and DOM updates. Example: import { render } from '@testing-library/svelte'; const { getByText } = render(Component);
What is Svelte Inspector?
Svelte Inspector is a development tool enabled with 'ctrl + shift + i'. Shows component hierarchy, props, state. Helps debug component structure and data flow. Available in development mode.
How do you handle asynchronous tests?
Async tests use async/await syntax. Test async operations using act function. Handle promises and timeouts. Example: await fireEvent.click(button); await findByText('result');
What are testing matchers in Svelte?
Testing matchers verify component state/behavior. Include toBeInTheDocument, toHaveTextContent, toBeVisible. Provided by @testing-library/jest-dom. Support custom matchers.
How do you debug store state?
Store state can be debugged using $store syntax. Subscribe to store changes. Log state updates. Use Svelte devtools. Monitor store mutations.
What is component testing hierarchy?
Testing hierarchy includes unit tests, integration tests, end-to-end tests. Focus on component isolation. Test component interaction. Verify application flow.
How do you test event handlers?
Event handlers tested using fireEvent. Simulate user interactions. Verify event outcomes. Example: fireEvent.click(button); expect(result).toBe(expected);
What is snapshot testing?
Snapshot testing captures component output. Compares against stored snapshots. Detects UI changes. Example: expect(container).toMatchSnapshot();
How do you test props?
Props testing verifies component behavior with different props. Test prop types and values. Handle prop updates. Verify component rendering.
How do you implement integration testing?
Integration testing verifies component interaction. Test multiple components. Handle data flow. Implement test scenarios. Manage test environment.
How do you test stores?
Store testing verifies store behavior. Test store updates. Handle subscriptions. Implement store mock. Manage store state.
How do you implement test mocks?
Test mocks simulate dependencies. Handle external services. Support mock responses. Implement mock behavior. Manage mock state.
How do you test routing?
Route testing verifies navigation behavior. Test route parameters. Handle route changes. Implement navigation tests. Manage route state.
How do you handle test fixtures?
Test fixtures provide test data. Handle data setup. Support test isolation. Implement fixture management. Manage fixture cleanup.
How do you test animations?
Animation testing verifies transition behavior. Test animation states. Handle animation timing. Implement animation checks. Manage animation events.
How do you implement test hooks?
Test hooks handle test lifecycle. Support setup/teardown. Implement test utilities. Manage test state. Handle test dependencies.
How do you test error handling?
Error handling testing verifies error states. Test error boundaries. Handle error recovery. Implement error scenarios. Manage error logging.
How do you handle test coverage?
Test coverage tracks code coverage. Generate coverage reports. Set coverage targets. Implement coverage checks. Manage coverage gaps.
How do you implement test organization?
Test organization structures test files. Group related tests. Support test discovery. Implement naming conventions. Manage test hierarchy.
How do you implement advanced testing patterns?
Advanced patterns include test factories, test builders. Handle complex scenarios. Support pattern composition. Implement testing strategies.
How do you implement test automation?
Test automation handles continuous testing. Set up CI/CD pipelines. Support automated runs. Implement test reporting. Manage test environments.
How do you implement performance testing?
Performance testing measures component efficiency. Test rendering speed. Handle resource usage. Implement benchmarks. Manage performance metrics.
How do you implement accessibility testing?
Accessibility testing verifies a11y compliance. Test screen readers. Handle keyboard navigation. Implement ARIA testing. Manage compliance reports.
How do you implement visual regression testing?
Visual regression detects UI changes. Compare screenshots. Handle visual diffs. Implement image comparison. Manage baseline images.
How do you implement test monitoring?
Test monitoring tracks test execution. Handle test metrics. Support test analytics. Implement monitoring tools. Manage monitoring data.
How do you implement test documentation?
Test documentation describes test cases. Generate documentation automatically. Support example tests. Manage documentation updates. Handle versioning.
How do you implement security testing?
Security testing verifies application security. Test vulnerability prevention. Handle security scenarios. Implement security checks. Manage security reports.
How do you implement load testing?
Load testing verifies application performance. Test under heavy load. Handle stress scenarios. Implement load simulation. Manage performance data.
How do you implement test environment management?
Environment management handles test environments. Set up configurations. Support multiple environments. Implement environment isolation. Manage dependencies.
Stark.ai
Instant Interviews
