More in Vue, Angular & Svelte — page 15
Angular Content Projection with ng-content
ng-content creates a "slot" in a component's template, letting you project parent content into it. Use this for reusable wrappers like cards or dialogs. The key footgun: never use @if on ng-content, as the content is always rendered, even if hidden.
Vue Slots: Projecting Content into Components
Think of a Vue slot as a picture frame: the child component defines the frame, and the parent provides the picture. This is used for reusable layouts or buttons where the structure is fixed but the content is dynamic.
Handling Basic DOM Events in Svelte
Svelte handles DOM events with `on:eventname` syntax in your markup, linking elements to functions in your script. This is for user interactions within a component, not for parent-child communication. The footgun is confusing this with custom component events.
Angular @Output(): Child Components Reporting Up
An @Output() lets a child component tell its parent something happened, using an EventEmitter. It’s the standard way to handle events like button clicks that the parent needs to act on. The footgun is forgetting to actually `.emit()` the event.
Vue Custom Events: Child-to-Parent Communication
Think of `$emit` as a child component sending a flare up to its parent. It's how children report actions upwards, reversing the top-down flow of props. Use it to trigger parent state changes, like closing a modal. The footgun: events don't bubble.
Svelte Props: Passing Data with `export let`
In Svelte, `export let` turns a variable into a prop, letting a parent component pass data down. It's how you pass a `userName` to a `ProfileCard` component. The footgun: forgetting `export` creates a private variable, not a prop, so data isn't received.
Angular's input() Function: Passing Data to Components
Angular's input() function lets a parent pass data to a child, defining the child's public API. Use it to configure a component, like passing a `value` to a slider. The footgun: the returned signal is read-only; the child cannot modify its own input.
Vue Component Props: Passing Data Downstream
Think of props as a component's 'arguments.' They let a parent pass data down to a child, making it reusable. Use them to pass dynamic data like a user's name to a profile card. The footgun: never mutate a prop directly inside the child component.
Vite's Dependency Pre-Bundling
Vite's dev server pre-bundles dependencies to accelerate local development. It converts CommonJS modules to browser-native ESM and merges packages with many files into one, preventing massive HTTP request chains.
SvelteKit Hooks: Intercepting Requests and Events
SvelteKit Hooks are like middleware, letting you intercept requests and events to run app-wide logic. Use them for tasks like authentication checks, initializing DB clients, or custom routing.
Vite's Low-Level SSR API
Vite's SSR API lets you run Vite as a middleware inside your own Node.js server, giving you full control over rendering. It's for building custom SSR solutions, often with Express. The footgun: most apps should use a higher-level SSR plugin, not this API.
Vite's Plugin System: Extending Dev and Build
Vite's plugin system extends its dev server and build process, leveraging Rollup's mature ecosystem. Use it to add framework support or handle custom assets. The footgun is forgetting to control execution order with `enforce`, causing compatibility issues.
SvelteKit Adapters: Bridge Your App to Production
A SvelteKit adapter is a power plug for your app, making your universal build fit a specific deployment target like Vercel or a Node server. You configure it based on your host, like `adapter-static` for static sites. The footgun is forgetting one entirely.
Vite Config: The Control Panel for Your Build
Think of `vite.config.js` as a dynamic script, not a static file. It lets you programmatically change your build based on context, like serving for development versus building for production.
Vite's HMR API: Manually Controlling Hot Reloads
Vite's HMR API lets a module handle code changes without a full reload. While frameworks usually manage this, you can use it for custom tooling. The footgun: forgetting to wrap HMR code in `if (import.meta.hot)` will crash your production build.
SvelteKit: From Zero to Dev Server
Spin up a new SvelteKit app with `npx sv create`. This command scaffolds a project, prompting you to add tools like TypeScript. Then, `npm run dev` starts your dev server. The key footgun: forgetting to install dependencies before starting the server.
ng new: Your Angular Project Starter Kit
The `ng new` command is your starter kit for any Angular project. It scaffolds a complete, runnable application with a standard folder structure and dependencies, letting you skip manual setup.
Scaffolding a Vite Project with `create-vite`
Use `create-vite` to instantly generate a new web project with your chosen framework. It's the fastest way to start a Vue, React, or Svelte app without manual setup. The footgun is forgetting you can pass a `--template` flag to skip interactive prompts.
Vue's Reactivity: JavaScript That Acts Like a Spreadsheet
Vue's reactivity system makes your data act like a spreadsheet: change a value, and dependent parts of your app update automatically. It works by wrapping your data in special objects. The footgun: reactivity is lost if you replace a whole object.
Vue: Options API vs. Composition API
Options API organizes Vue components by property type (data, methods). Composition API organizes them by logical feature. Use Composition API for complex components with tangled logic or for creating reusable 'composable' functions.