Publish to my blog (weekly)

• Composables | Vue.js

  • stateful logic involves managing state that changes over time. A simple example would be tracking the current position of the mouse on a page.
  • // by convention, composable function names start with "use" export function useMouse() {
  • As we can see, the core logic remains identical - all we had to do was move it into an external function and return the state that should be exposed. Just like inside a component, you can use the full range of Composition API functions in composables. The same useMouse() functionality can now be used in any component.
  • Each component instance calling useMouse() will create its own copies of x and y state so they won't interfere with one another. If you want to manage shared state between components, read the State Management chapter.
  • // unref() unwraps potential refs  fetch(unref(url))

• Reactivity Fundamentals | Vue.js

  • object or array
  • <script setup>
  • When you mutate reactive state, the DOM is updated automatically. However, it should be noted that the DOM updates are not applied synchronously.
  • nextTick(() => {  // access updated DOM  })
  • ref() takes the argument and returns it wrapped within a ref object with a .value property:
  • A ref containing an object value can reactively replace the entire object:
  • Refs can also be passed into functions or destructured from plain objects without losing reactivity:

• Introduction | Vue.js

  • The Composition API is centered around declaring reactive state variables directly in a function scope and composing state from multiple functions together to handle complexity. It is more free-form and requires an understanding of how reactivity works in Vue to be used effectively. In return, its flexibility enables more powerful patterns for organizing and reusing logic.
  • Go with Composition API + Single-File Components if you plan to build full applications with Vue.

• Svelte For Beginners

  • Svelte’s reactivity is based on assignments. To change state and trigger a re-render you assign a value to a variable you declared and it’s going to update. We have already done this.
  • // doesn't update  list.push('Svelte')
  • // so it's easier doing this  list = [...list, 'Svelte']
  • Using the $: syntax is saying “re-run this code whenever any of the referenced values change”.
  • // computed  $: amount = items.length
  • let searchQuery = ''
  • bind:value={searchQuery}

• Svelte For Beginners

  • Because we’re using a full stack framework we can create endpoints that correspond to HTTP request methods such as GET and POST same as using a backend framework like Express.
  • type IconType = keyof typeof icons
  • If the endpoint has the same name as the component you can just use the items prop from the shadow endpoint.
  • export function loader({ fetch }) {
  • In this section you’re going to learn how to fetch data using SvelteKit endpoints to get the tweets from the database and show them in the feed.
  • SvelteKit endpoints are just files that export request handler functions that correspond to HTTP methods such as GET, POST, PATCH, DELETE.
  • export function GET() {
  • If you use a loader function inside a component using fetch you can expose this as a prop to your component.
  • // prerender static page in production  export const prerender = true
  • // rerun load function  const url = new URL(form.action)  url.search = ''  url.hash = ''  invalidate(url.href)  }

• Introduction / Basics • Svelte Tutorial

  • const
  • let
  • Because Svelte's reactivity is based on assignments, using array methods like .push() and .splice() won't automatically trigger updates.
  • this will only set `name` on component creation
  • it will not update when `person` does
  • Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the $: JS label syntax.
  • Reactive statements run after other script code
  • before the component markup is rendered
  • $: document.title = title;
  • $: ({ name } = person);
  • // don't do this. it will run before the previous line
  • let name2 = name;
  • Only values which directly appear within the $: block will become dependencies of the reactive statement. For example, in the code below total will only update when x changes, but not y.
  • $: total = yPlusAValue(x);
  • If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a let declaration on your behalf.
  • A store is an object that allows reactive access to a value via a simple store contract.
  • Any time you have a reference to a store, you can access its value inside a component by prefixing it with the $ character.
  • Assignments to $-prefixed variables require that the variable be a writable store, and will result in a call to the store's .set method.
  • Note that the store must be declared at the top level of the component — not inside an if block or a function,
  • Local variables (that do not represent store values) must not have a $ prefix.
  • const count = writable(0);
  • count.set(1);
  • $count = 2;
  • Note however that unless .subscribe synchronously calls the subscription (which is not required by the Observable spec), Svelte will see the value of the store as undefined until it does.
  • A <script> tag with a context="module" attribute runs once when the module first evaluates, rather than for each component instance. Values declared in this block are accessible from a regular <script> (and the component markup) but not vice versa.
  • `import Example, { alertTotal } from './Example.svelte'`
  • :global(body) {  /* this will apply to <body> */  margin: 0;  }
  • If you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with -global-.
  • @keyframes -global-my-animation-name {...}
  • $$props references all props that are passed to a component, including ones that are not declared with export
  • $$restProps contains only the props which are not declared with export.
  • An each block can also have an {:else} clause, which is rendered if the list is empty.
  • <!-- promise is pending -->
  • <!-- promise was fulfilled -->
  • <!-- promise was rejected -->
  • {#await promise then value}
  • {#await promise catch error}
  • the orde
  • affects the value of the bound variable when the event handler is called.
  • mutually exclusive
  • radio inputs
  • checkbox inputs
  • let canvasElement;
  • bind:this={canvasElement}
  • Multiple class toggles can be included
  • style:color style:width="12rem" style:background-color={darkMode ? "black" : "white"}
  • style:color="red">This will be red
  • export let bar;
  • , bar
  • update(bar) {  // the value of `bar` has changed  },
  • <p transition:fade|local>
  • --rail-color
  • --theme-color
  • In order to place content in a slot without using a wrapper element, you can use the special element <svelte:fragment>.
    • Vue.js의
  • <slot prop={item}></slot>
  • let:prop={thing}
  • {item}
  • let:item
  • it must be inside an if or each block or passed to a component's slot to prevent an infinite loop.
  • The <svelte:component> element renders a component dynamically,
  • Unlike <svelte:self>, this element may only appear at the top level of your component and must never be inside a block or element.
  • As with <svelte:window>, this element may only appear the top level of your component and must never be inside a block or element.
  • As with <svelte:window> and <svelte:body>, this element may only appear at the top level of your component and must never be inside a block or element.
  • it can be called from an external module
  • onMount does not run inside a server-side component.
  • This behaviour will only work when the function passed to onMount synchronously returns a value.
  • onDestroy, this is the only one that runs inside a server-side component.
  • Like lifecycle functions, this must be called during component initialisation.
  • If a function is passed as the second argument, it will be called when the number of subscribers goes from zero to one (but not from one to two, etc). That function will be passed a set function which changes the value of the store. It must return a stop function that is called when the subscriber count goes from one to zero.
  • Hydration of <head> elements only works properly if the server-side rendering code was also compiled with hydratable: true, which adds a marker to each element in the <head> so that the component knows which elements it's responsible for removing during hydration.
  • hydrate: true will cause any children to be removed. For that reason, the anchor option cannot be used alongside hydrate: true.
  • Calling this method schedules an update for the next microtask — the DOM is not updated synchronously.
  • Setting a value will cause a synchronous update, rather than the default async update caused by component.$set(...).
  • <svelte:options tag="my-element" />
  • customElements.define('my-element', MyElement);
  • By default, custom elements are compiled with accessors: true
  • Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as most frameworks.
  • Styles are encapsulated,
  • styles are inlined into the component as a JavaScript string
  • Custom elements are not generally suitable for server-side rendering
  • where head contains the contents of any <svelte:head> elements encountered.

Posted from Diigo. The rest of my favorite links are here.