DEV Community: Garlic Garlic

Svelte Series-7: The Syntax $

Garlic Garlic — Mon, 29 Jul 2024 02:19:54 +0000

If you have used Vue or React, then must know about APIs such as Vue's computed, watch, and React's useMemo, which are used to monitor certain variables and recalculate new variables or execute certain methods only after changes occur.

In Svelte, a similar functionality is also provided. Svelte calls it Reactivity. The core that triggers the responsive capability is - assignment. The specific writing is as follows:

$: Your logic

Perhaps everyone will be curious about what the $ syntax is. In fact, it is a syntax normally supported by js, the JS label syntax, but few people use it and it is equivalent to an almost obsolete syntax.

By using $: as a prefix, Svelte can make any statement at the top-level (that is, not inside a block or function) reactive. Whenever the values they depend on change, they will run immediately before the component is updated.

Declaration

`$:` syntax

If a statement consists entirely of assignments to undeclared variables, Svelte inserts the let declaration for you.

<script>
  let count = 0;

  $: double = count * 2;

  let noReactiveDouble = count * 2;

  const add = () => {
    count++;
  }
</script>

<button on:click={add}>add</button><br>
count: {count}<br>
doubleCount: {double}<br>
noReactiveDouble: {noReactiveDouble}

We don't need to declare let double. In $: double = count * 2;, it's equivalent to Svelte automatically declaring it for us.

Statement

We add a line in the above code:

$: console.log('$ console', count, double, noReactiveDouble);

The changes of each state can be observed intuitively. The variable double declared in $: will change with the change of count, while the variable noReactiveDouble declared outside $: remains 0 even if count changes because the initial count is 0.

The difference from beforeUpdate

<script>
  import { beforeUpdate } from 'svelte';

  let count = 0;
  let noReactiveDouble = count * 2;

  const add = () => {
    count++;
  }

  $: console.log('$ console', noReactiveDouble);

  beforeUpdate(() => {
    console.log('beforeUpdate console', noReactiveDouble)
  })
</script>

<button on:click={add}>add</button><br>
count: {count}<br>
noReactiveDouble: {noReactiveDouble}

When we refresh the page again, we can see that in $, it is executed once, and beforeUpdate is also executed once. Because let noReactiveDouble = count * 2 is an assignment operation, $: console.log('$ console', noReactiveDouble); is triggered at the first assignment; while beforeUpdate is due to the assignment operations of the two variables count and noReactiveDouble. When we click to update, because noReactiveDouble is not a reactive variable, only beforeUpdate is triggered.

The logic within the $ statement is only executed when the variables within the statement trigger an update. While beforeUpdate is equivalent to collecting all variable dependencies. It is executed when one of the dependencies changes.

The statement can not only be written in a single line like $: console.log(), but also can be wrapped in a {} curly brace.

$: {
  // your logic
}

We have learned that Svelte can automatically declare variables that are not declared using the let statement. The expression $: double = count * 2; is equivalent to the following writing.:

let double;
$: {
  double = count * 2;
}

Therefore, when we use {}, we still need to declare it ourselves:

<script>
  let count = 0;
  $: double = count * 2;
  let double2;

  $: {
    double2 = count * 2;
  }

  const add = () => {
    count++;
  }
</script>

<button on:click={add}>add</button><br>
count: {count}<br>
doubleCount: {double}<br>
double2: {double2}

Dependency

When we are using $: {} for some complex reactive operations, a situation may arise. We only want our code to execute when a certain variable changes, rather than every time any variable in the code changes. For example:

<script>
  let width = 1;
  let height = 1;

  $: area = width * height;
</script>

width: <input type="number" bind:value={width} /><br />
height: <input type="number" bind:value={height} /><br />
area: {area}

Whenever the width or height changes, area = width * height is executed. Is there any way to execute only when the width changes and not when the height changes?

In fact, the trick lies in moving the dependencies that you don't want to listen to out of $:.

<script>
  let width = 1;
  let height = 1;

  function setArea(width) {
    return width * height;
  }

  $: area = setArea(width);
</script>

width: <input type="number" bind:value={width} /><br />
height: <input type="number" bind:value={height} /><br />
area: {area}

Within $:, there is only the width variable. When the width changes, setArea() is executed. However, the height is not within $:. Even if the height changes, no reactive update is performed.

Summary

In this chapter, we have learned:

The use of the $syntax in Svelte. Through $, we can implement computed properties and also listen for variable updates to perform certain operations.
The difference between $ and beforeUpdate lifecycle functions

Svelte Series-6: Lifecycle

Garlic Garlic — Fri, 26 Jul 2024 01:56:11 +0000

Each component has a life cycle from creation to destruction. At different life cycle stages, a component provides a method to the outside world, allowing the developer who calls the component to control the component more flexibly at each life cycle stage. Such methods are life hook functions.

Svelte's lifecycle hooks are:

onMount
beforeUpdate
afterUpdate
onDestroy
tick

Call Timing

If server-side rendering (SSR) is used, the rest of the lifecycle functions will not be executed during SSR execution except for onDestroy.

In Svelte, lifecycle functions can only be written when the component is initialized to bind callbacks to instances of the component. Do not place lifecycle functions in asynchronous methods such as setTimeout and setInterval.

Although we need to ensure that lifecycle functions are called when the component is initialized, it doesn't matter where they are called from. For example, we can put the lifecycle in a method:

// app.js
import { onMount,onDestroy } from 'svelte';

export const startInterval = () => {
  let timer = null;
  let count = 0;

  onMount(() => {
    console.log('onMount');
    timer = setInterval(() => {
      count++;
      console.log('count');
    }, 1000)
  });

  onDestroy(() => {
    console.log('onDestroy');
    if (timer) {
      clearInterval(timer);
    }
  })
}

<script>
  import { startInterval } from './app.js';

  startInterval();
</script>

<div>App</div>

In this case, the lifecycle can still ensure that it is called when the component is initialized.

onMount

A callback that is executed immediately after the component is mounted to the DOM.

onMount(callback: () => void)

onMount(callback: () => () => void)

onMount receives a callback function as an argument, and if a function is returned within the callback function, it is called when the component is unloaded.

We can take a look at the source code in the Svelte project, file path ispackages/svelte/src/runtime/internal/Component.js:

/** @returns {void} */
export function mount_component(component, target, anchor) {
  const { fragment, after_update } = component.$$;
  fragment && fragment.m(target, anchor);
  // onMount happens before the initial afterUpdate
  add_render_callback(() => {
    const new_on_destroy = component.$$.on_mount.map(run).filter(is_function);
    // if the component was destroyed immediately
    // it will update the `$$.on_destroy` reference to `null`.
    // the destructured on_destroy may still reference to the old array
    if (component.$$.on_destroy) {
      component.$$.on_destroy.push(...new_on_destroy);
    } else {
      // Edge case - component was destroyed immediately,
      // most likely as a result of a binding initialising
      run_all(new_on_destroy);
    }
    component.$$.on_mount = [];
  });
  after_update.forEach(add_render_callback);
}

We can see that it will execute onMount method and gets a value, and then it will determine whether there is a declaration in the component onDestroy lifecycle hook, add to onDestroy array if yes, then execute this return value after onDestroy, if not, execute this return value directly. In React, useEffect hook has the same function.

useEffect(() => {
  return () => {}
}, []);

We demonstrate a Svelte Example of the return value of onMount:

<script>
  // Child.svelre
  import { onMount } from 'svelte';

  onMount(() => {
    console.log('child mount');
    return () => {
      console.log('child destroy 1');
    }
  })
</script>

<div>child</div>

<script>
  // Father.svelte
  import Child from './Child.svelte';
  let count = 0;

  const updateCount = () => {
    count++;
  }
</script>


<button on:click={updateCount}>add</button>
{#if count == 0}
<Child />
{/if}

In this example, we have a variable count on the parent page, which controls the implicit value of the child component by changing the count. Executable the code, the console will output in sequence: child mount -> child destroy 1.

Then we add onDestroy hook:

<script>
  import { onMount, onDestroy } from 'svelte';

  onMount(() => {
    console.log('child mount');
    return () => {
      console.log('child destroy 1');
    }
  })

  onDestroy(() => {
    console.log('child destroy 2');
  })
</script>

<div>child</div>

Executable the code, the console will print out: child mount -> child destroy 2 -> child destroy 1.

For sibling components, onMount is executed from top to bottom according to the order of component calls. For parent and child components, onMount of the child component is executed before onMount of the parent component is executed, that is, from inside to outside.

<script>
  import { onMount } from "svelte";
  import Child from "./Child.svelte";
  import Child2 from "./Child2.svelte";

  onMount(() => {
    console.log("fahter mount");
  });
</script>

<Child />
<Child2 />

We define three components: a parent component and two child components. onMount is called separately within the three components. After execution, we can see: child mount 1 -> child mount 2 -> father mount.

beforeUpdate

Execute before the DOM update, the first callback runs on onMount before initialization.

beforeUpdate(callback: () => void)

An example here:

<script>
  import { beforeUpdate } from "svelte";

  let count = 0;
  let str = "";

  const updateData = () => {
    count++;
    setTimeout(() => {
      str += "s";
    }, 1000);
  };

  beforeUpdate(() => {
    console.log("before update", count, str);
  });
</script>

<button on:click={updateData}>update</button>
<span>{count}</span><span>{str}</span>

After loading the page, we will first see the console print out before update 0. Click the button to update and see before update 1 printed out, 1s later see before update 1 s printed out.

It is important to note that if components are present simultaneously beforeUpdate and
onMount for the first time. The beforeUpdate callback will be execute before onMount. If we call onMount hook in the above code, and then perform the same steps, we will see:

afterUpdate

Callback executed after the component is rendered.

afterUpdate(callback: () => void)

For sibling components, beforeUpdate and afterUpdate are still executed from top to bottom in the order of component calls. For parent and child components, beforeUpdate of the parent component is executed first, and then beforeUpdate of the child component is executed.

When the beforeUpdate of the child component is completed, the afterUpdate of the parent component is executed, and the afterUpdate of the child component is finally executed.

<script>
  import { onMount, onDestroy, beforeUpdate, afterUpdate } from "svelte";
  import Child from "./Child.svelte";
  import Child2 from "./Child2.svelte";
  let count = 0;

  const updateCount = () => {
    count++;
  };

  beforeUpdate(() => {
    console.log("fater beforeupdate");
  });

  onMount(() => {
    console.log("father mount");
  });

  afterUpdate(() => {
    console.log("father afterupdate");
  });

  onDestroy(() => {
    console.log("father destroy");
  });
</script>

<button on:click={updateCount}>add</button>
{#if count <= 1}
  <Child {count} />
  <Child2 {count} />
{/if}

The content of the child component is as follows. Child1.svelte and Child2.svelte only have different serial numbers of the output content, and nothing else is different.

<script>
  // Child.svelte
  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte';

  export let count;

  beforeUpdate(() => {
    console.log('child beforeupdate 1')
  });

  onMount(() => {
    console.log('child mount 1');
  });

  afterUpdate(() => {
    console.log('child afterupdate 1');
  });

  onDestroy(() => {
    console.log('child destroy 1');
  });
</script>

<div>child</div>
{count}

At the time of initial execution:

After clicking the button to update:

onDestroy

Callbacks to run after a component is destroyed:

onDestroy(callback: () => void)

Between sibling components, onDestroy is still from top to bottom according to the calling order. The parent and child components are from outside to inside, and the parent component executes onDestroy firstly, and then execute the child component's
onDestroy.

The function returned by onMount will be executed when the component is destroyed
adn after executes onDestroy.

tick

The tick function is unlike other lifecycle hooks in that we can call it at any time without waiting for the component to initialize for the first time. It returns a
Promise, which resolves immediately when any state state changes.

promise: Promise = tick()

In Svelte, when a state state changes, the DOM is not updated immediately, but will wait until the next microtask to update. During the waiting period, it will continue to listen for other state state changes, and then update the DOM uniformly in this microtask, which can reduce some unnecessary work and allow the browser to process these things in batches more efficiently.

We may encounter this problem during development: a state in the component is updated, but the DOM is not updated, and I just want to get the value of dom, then the tick function can come in handy! (Yes, it can be regarded as $nextTick () in Vue)

<script>
  let count = 0;

  const addCount = () => {
    count++;
    let countDom = document.querySelector('#count');
    if (countDom) {
      console.log('count text', countDom.innerHTML);
    }
  }
</script>

<button on:click={addCount}>add</button>

<span id="count">{count}</span>

We can see that even if the page has been updated, the value retrieved by the DOM operation is still old data.

To solve the above problems, we can:

<script>
  import { tick } from 'svelte';
  let count = 0;

  const addCount = async () => {
    count++;
    await tick();
    let countDom = document.querySelector('#count');
    if (countDom) {
      console.log('count text', countDom.innerHTML);
    }
  }
</script>

<button on:click={addCount}>add</button>

<span id="count">{count}</span>

And when we use tick, we can get the latest value.

Summary

In this chapter, we have learned:

The Role of the Svelte Lifecycle Function
The execution order of each lifecycle function when the parent and child components are rendered
The role of tick

Svelte Series-5: Component & Props

Garlic Garlic — Wed, 24 Jul 2024 02:28:33 +0000

Component-Based Development

In project development, we usually promote component-based development. The so-called component-based , that is, to extract some common logic to a file assembled into a component , when the page is useful to the function , directly call the component can be. That component in addition to maintaining their own internal logic , but also needs to accept external data passed in to realize the dynamism and flexibility of the component .

Props

Take the simplest example of todolist, we can show the list encapsulated into a component, the internal logic of the component is to show the list of data, while the external is to receive the list of data. After the page references the component, it can display different data by passing todo list or done list. The value passing is the key link here.

When we pass a value from a parent page to a child page or a component, we usually pass the state of the parent page or the method of the parent page, how to pass these two in Svelte?

When prop is data

At the end of the previous chapter, we encountered the following code:



<script>
  export let value;
</script>

We normally declare a variable in the page by let value;, when we add the export keyword in front, it is equivalent to the variable declaration marked as an external export properties, that is prop, in the external references to the file, you can pass the value through the form of property assignment.



<!-- Father .svelte -->
<script>
  import Child from './Child.svelte';
  let value = ''
</script>

<Child value={value} />

Default Props

When we export externally within the component in the form export let value;:



<script>
  export let value;
</script>

<div>child: {value || ''}</div>

while referencing this component without passing a value.

Not only will we be prompted in VsCode that we need to pass a value, but we'll also be warned accordingly in the Chrome console.

In our development, we often provide a default value for some pass parameters, because some components use a fixed state in most cases, and change the state only when encountering special circumstances. For example, in the UI component library, similar to the Alert component, there are four states: success, info, warning, and error, and most of the alerts we use are normal message alerts, that is, the info state, so you can set a default info state inside the component.

After setting a default value for prop, we can eliminate the alerts in the above demo. In Svelte, setting a default value for prop is simply a matter of assigning the value during the initial declaration.



<script>
  export let value = 'hello svelte';
</script>

Keywords

In JavaScript, there are special words called keywords that are used in the syntactic structure of the programming language with specific meanings. These words can not be used as variables.

In Svelte, we can set some keywords to prop when we set prop.

As a very common example, we define a component that has its own class style within the component, however we need the component to support customization of the class style attribute externally by the user, where the user is able to manipulate it in a form like <Component class={} />, and class is a keyword used in js to define a class. Therefore, we can write it as follows:



<script> 
  let className;
  export { className as class };
</script>

const

Here's a question: Can a variable declared by export be a method?



<!-- Child.svelte -->
<script>
  export let onChange = () => {return;}
</script>

<button on:click={onChange}>change</button>



<script>
  import Child from './Child.svelte';
  let count = 0;
  const onChange = () => {
    count = Math.random();
  }
</script>

<Child onChange={onChange} />
<span>{count}</span>

The answer is YES!

Notice that when we are exporting function methods, class classes, and const constants, the exported prop is immutable.

Still using the above exported method as an example, change the content of Child.svelte to the following:



<script>
  export function onChange() {
    console.log('no change');
  }
</script>

<button on:click={onChange}>change</button>

So we want to set a variable or method to prop, try to use let or var declarations.

Function Called

createEventDispatcher

We learned in the previous chapter that event binding for html tags uses on:[eventName]. Similarly, we use this form if we want to do event binding for a component.



<Component on:[eventName]={eventHandler} />

When binding events in a component, eventName needs to be implemented inside the component.

The internal implementation is as follows:



import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

dispatch(eventName, data)

The first parameter of dispatch is the event name, the second parameter is used to pass data externally, if there are more than one parameter to be passed, set the second parameter to an object, in this object to store more than one data passed externally.

Here's an example:



<script>
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  const onClick = (e) => {
    dispatch("click", e);
  }
</script>

<button on:click={onClick}>按钮</button>



<script>
  import Component from './Component.svelte';

  const onClick = (e) => {
    console.log('component click', e);
  }
</script>

<Component on:click={onClick} />

When we click on it, we are able to see that the console outputs a data of type CustomEvent:

Normally we would think that the event parameter printed out in the page is the one we pass in the child component. However, I would like to draw your attention to the fact that when you use createEventDispatcher to pass data in Svelte, the data is put in event.detail. If you look closely at the above image, you will see that there is a detail key in the printed data, which holds the data passed from the subcomponent.

Perhaps the above example is not intuitive enough, so let's modify our subcomponent passes:



<script>
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  const onClick = (e) => {
    dispatch("click", 123);
  }

</script>

<button on:click={onClick}>按钮</button>

Note that createEventDispatcher must be created when the component is initialized, i.e. in the top-level script scope, otherwise it will report an error.



<script>
  import { createEventDispatcher } from 'svelte';

  const onClick = (e) => {
    const dispatch = createEventDispatcher();
    dispatch("click", 123);
  }

</script>

<button on:click={onClick}>按钮</button>

We can briefly look at the implementation of createEventDispatcher:



export function createEventDispatcher() {
  const component = get_current_component();
  return (type, detail, { cancelable = false } = {}) => {
    const callbacks = component.$$.callbacks[type];
    if (callbacks) {
      const event = custom_event(/** @type {string} */ (type), detail, {
        cancelable,
      });
      callbacks.slice().forEach((fn) => {
        fn.call(component, event);
      });
      return !event.defaultPrevented;
    }
    return true;
  };
}

export function custom_event(
  type,
  detail,
  { bubbles = false, cancelable = false } = {}
) {
  return new CustomEvent(type, { detail, bubbles, cancelable });
}

It's actually just a new instance of CustomEvent, and then it puts all the data from the second pass into the detail for passing.

Dispatch Events

Unlike DOM events, component events do not bubble in Svelte.



<script>
  // GrandSon.svelte
  import { createEventDispatcher, onMount } from 'svelte';

  const dispatch = createEventDispatcher();

  const func = () => {
    dispatch('func', 'hello');
  }

  onMount(() => {
    func();
  })
</script>

<div>孙组件</div>



<script>
  // Child.svelte
  import { createEventDispatcher } from 'svelte';
  import GrandSon from './GrandSon.svelte';

  const dispatch = createEventDispatcher();

  const func = (e) => {
    dispatch('func', e.detail);
  }

</script>

<GrandSon on:func={func}/>



<script>
  // Father.svelte
  import Child from './Child.svelte';

  const func = (e) => {
    console.log('孙子传值：', e.detail);
  }
</script>

<Child on:func={func} />

I use this example here mainly want to illustrate that when some inner component wants to dispatch an event to the outermost layer, each layer of the component that passes through has to use the createEventDispatch() and then pass the event.detail. This is common when it comes to components that involve interactions such as clicks. We may add support for click events to a component, but the logic for the click event is left to the external user to define. To do this, we need to use event forwarding.

Event forwarding is written as follows:



on:eventName

Only the event name is written, the component itself does not provide the event implementation. The implementation of the event is left to the page that the outer layer wants to implement.



<!-- GrandSon.svelte -->
<button on:click>孙组件</button>



<script>
  // Child.svelte
  import GrandSon from './GrandSon.svelte';
</script>

<GrandSon on:click />



<script>
  // Father.svelte
  import Child from './Child.svelte';

  const onClick = () => {
    console.log('点击');
  }
</script>

<Child on:click={onClick} />

We can dispatch custom events for components as well as native events.

When it occurs that the attribute name is the same as the value, it can be abbreviated. For example, value={value} can be abbreviated to {value}.

Here's an example:



<script>
  let checked = false;

  const onChange = () => {
    checked = true;
  }
</script>

<input type="checkbox" {checked} />
<button on:click={onChange}>change to checked</button>

Originally, we needed the form <input type="checkbox" checked={checked} /> to be written.

`$$props`

$$props gets all the properties passed by the parent, both props properties and non-props properties.



<script>
  // Child.svelte
  export let value;

  console.log('$$props', $$props)
</script>

<div>子组件</div>



<script>
  // Father.svelte
  import Child from './Child.svelte';
</script>

<Child value={'hello'} a={'a'} b={'b'} />

`$$restProps`

$$props contains both props and non-props properties, while $$restProps contains only non-props properties.
Rewrite the console from the previous example:



<script>
  export let value;

  console.log('$$props', $$props);
  console.log('$$restProps', $$restProps);
</script>

<div>子组件</div>

We could just deconstruct $$props and $$restProps to pass the values directly, it's just not a recommended way to write them as it can be confusing.



<script>

  import GrandSon from './GrandSon.svelte';

  export let value;

</script>

<GrandSon {...$$props} />

Brief Summary

In this chapter we learned:

Using export to declare a variable as a component's external prop, and how we can set a default value for the prop
How to declare a keyword as a prop
Using the createEventDispatcher method to send events externally from within the component, so that external parties can listen for events when they refer to the component.
Component event dispatching
Component property assignment shorthand
Svelte provides $$props and $$restProps properties to quickly get the corresponding prop values

Sveaflet - A newly Leaflet Library for Svelte

Garlic Garlic — Mon, 24 Jun 2024 13:22:21 +0000

If you work with Svelte and Leaflet, or you are interesting in a new cool map library, I think Sveaflet is a good choice for you.

What is Sveaflet

I spent few weeks to develop a Leaflet UI library for Svelte, I call it Sveaflet. Yes, Svelte + Leaflet == Sveaflet. Sveaflet is an open-source Map component library built with Svelte components and Leaflet that can help you build your map page faster.

Quick Start

Installation

Firstly, open your Svelte project, and then install it.

npm install sveaflet --save

That's all! Yes, the installation is so easy.

Usage

Here's the basic example:

<script>
  import { Map, TileLayer, Marker, Popup } from 'sveaflet';
</script>

<div style="width:100%;height:500px;">
  <Map
    options={{
      center: [51.505, -0.09],
      zoom: 13
    }}
  >
    <TileLayer
      urlTemplate={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}
    />
    <Marker latlng={[51.505, -0.09]} />
  </Map>
</div>

Import component from Sveaflet, and then uses it. Make sure your components are all wraped by <Map>.
More details here.

Advantages

Multiple components

Sveaflet provides 20+ components for you to build your own map project. Here's the components list:

Circle
CircleMarker
Control
ControlAttribution
ControlLayers
ControlScale
ControlZoom
DivIcon
GeoJSON
Icon
ImageOverlay
LayerGroup
Map
Marker
Polygon
Polyline
Popup
Rectangle
SVGOverlay
TileLayer
TileLayerWMS
Tooltip
VideoOverlay

Learning curve

And it's very easy to use, componet's props are same as the params that you need when newing a leaflet object.

Documents

All component has detail documents, and I provide many example to show how to use Sveaflet to complete your works.

Future Plan

Here's my next steps abount building Sveaflet:

Web Testing
More examples for document
A beautiful logo. Yes, I'm looking for a new design to currently logo. Because I'm not a professional designer, so it may take some time
Waiting for Svelte5
Rebuilding Sveaflet Website. Now the website is inspired by flowbite-svelte website.

If you're interesting in Sveaflet, please read the doc for more details. It's my honer to have your github star!

Thanks for reading!

7 Ways to Remove Array Duplicates in Javascript

Garlic Garlic — Wed, 12 Jun 2024 10:15:30 +0000

In real development work, we often encounter the handling of a set of data de-duplication. In JavaScript, there are several ways to filter out duplicates from an array, and I'll share with you the different ways of de-duplication in this article.

Here is the array we want to filter out duplicates:

Set

This is my favorite method for everyday development because it's the easiest to use of all the de-duplication methods.Set is a new type introduced by ES6, and the difference between it and Array is that the data in the Set type can't have duplicate values. Of course, there are some methods of Array that Set can't call.

function unique(arr) {
  return Array.from(new Set(arr));
}

First use new Set() to convert the original array to Set type data, and then convert the Set type data to a new array which has been filtered out duplicates. When we talk about Set to Array, we can use Array.from() or we can use structural way [... .new Set(arr)].

Set de-duplication also works for NaN and undefined de-duplication, because both NaN and undefined can be stored in a Set, and NaNs are treated as the same value as each other (although in js: NaN !== NaN)

double for + splice

The array elements are compared one by one in a two-level for loop, and duplicates are removed by the splice method.

function unique(arr) {
  let len = arr.length;
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        len--;
        j--;
      }
    }
  }
  return arr;
}

This method is not able to filter out NaN because NaN !== NaN when compare.

indexOf / includes

Create a new empty array, traverse the array that needs to be de-duplicate, push the array elements into the new array, and judge whether the new array already contains the current element before pushing, if not, then push it. This method also cannot filter out NaN. To judge whether an array already contains the current element, use the array method indexOf or includes.

indexOf

The indexOf() method of Array instances returns the first index at which a given element can be found in the array, or -1 if it is not present.

function unique(arr) {
  const newArr = [];
  arr.forEach((item) => {
    if (newArr.indexOf(item) === -1) {
      newArr.push(item);
    }
  });
  return newArr;
}

includes

The logic of includes is similar to indexOf, we can use it to judge whether an array contanins an element.

The includes() method of Array instances determines whether an array includes a certain value among its entries, returning true or false as appropriate.

function unique(arr) {
  const newArr = [];
  arr.forEach((item) => {
    if (!newArr.includes(item)) {
      newArr.push(item);
    }
  });
  return newArr;
}

Because includes can correctly find variables of type NaN, it can de-duplicate data of type NaN.

We see from the example, includes(NaN) returns true, while indexOf(NaN) returns -1.

filter

We can use filter() + indexOf().

The filter() method of Array instances creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

The feature of indexOf is to return the index of the first position contained in the target to be found, we can filter out only the first item of each individual data, the remaining duplicates will be filtered out.

function unique(arr) {
  return arr.filter((item, index) => {
    return arr.indexOf(item) === index;
  });
}

Here the output does not contain NaN, because indexOf() can't judge NaN, that is, arr.indexOf(item) === index returns false.

Map / Object

Map

The Map object is a data structure provided by JavaScript that is structured as a key-value pair and remembers the original insertion order of the keys. Any value (object or raw value) can be used as a key or a value.

function unique(arr) {
  const map = new Map();
  const newArr = [];

  arr.forEach((item) => {
    if (!map.has(item)) {
      map.set(item, true);
      newArr.push(item);
    }
  });

  return newArr;
}

An array element is stored as a key of a map, and then the has() and set() methods are combined to determine whether the key is duplicated or not.

NaN can also be de-duplicated after using Map(), because Map makes a judgment that NaN is equal to NaN, leaving all other values to be judged as equal or not based on the result of the === operator.

Object

Use Object type to filter out is is similar to useMap, this way mainly using the feature that property name of the object can not be repeated.

function unique(arr) {
  const newArr = [];
  const obj = {};

  arr.forEach((item) => {
    if (!obj[item]) {
      newArr.push(item);
      obj[item] = true;
    }
  });

  return newArr;
}

sort

Use sort() to sort, then traverse and compare neighboring elements based on the sorted result.

function unique(arr) {
  arr = arr.sort();
  let newArr = [];
  for (let i = 0; i < arr.length; i++) {
    arr[i] === arr[i - 1] ? newArr : newArr.push(arr[i]);
  }
  return newArr;
}

If the current item is not equal to the previous item, push into the new array.

This method changes the original position of the array and cannot de-duplicate NaN data.

reduce

The reduce() executes a callback function for each element of the array in turn, taking four arguments: the initial value initialValue (or the return value of the previous callback function), the current element value, the current index, and the array from which reduce was called.

function unique(arr) {
  return arr.reduce((prev, next) => {
    return prev.includes(next) ? prev : [...prev, next];
  }, []);
}

When initializing, we define a new array, and each time we loop, we determine whether the values of the old array have already been stored in the new array, and if not, we add them to the new array.

Thanks for reading!

Svelte Series-4: Two-Way Binding

Garlic Garlic — Wed, 22 May 2024 13:39:00 +0000

MVVM

Currently common software development architecture patterns are MVC, MVP, MVVM.

Among them MVC (Model-View-Controller) is divided into three parts:

M (Model): responsible for managing the application data
V (View): mainly corresponds to the application of the user interaction page
C (Controller): receives the data passed in from the user interface and calls the corresponding controller to update the data. When the data is updated, it will trigger the update of the page.

The other architectural pattern, MVVM, is also divided into three parts:

M (Model)
V (View)
VM (ViewModel): Responsible for exposing the model's data and commands so that the view can use them.

Two-way data binding is where data changes drive view updates, and view updates trigger data changes; both Vue and Svelte support it. In Vue, we use v-model to implement two-way data binding. Since Svelte is so convenient to manipulate the data, you may think that we write this code directly, and then Svelte can handle two-way binding for us.



<script>
  let str = ''
</script>

<div>
  <input type="text" value={str} />
  <span>input value: {str}</span>
</div>

Unfortunately, the above code doesn't handle two-way binding for us, if we want to do two-way binding, we need to write it as below:



<script>
  let str = ''
</script>

<div>
  <input type="text" bind:value={str} />
  <span>input value: {str}</span>
</div>

Notice the difference? That's right, we need to use bind, which has other uses besides two-way binding, and which we'll continue to use in later chapters.

Two-way binding in form component



<script>
  let value = '';
</script>

<input type="text" value={value} />
<p>value: {value}</p>

If we follow the logic of Vue and write the above code directly, we will find that when we fill in the content in the input box, the output is not followed on the page.



<script>
  let value = '';
</script>

<input type="text" value={value} on:input="{e => value = e.target.value}" />
<p>value: {value}</span>

`input[type="text"]`



<script>
  let value = '';
</script>

<input bind:value={value} />
<p>value: {value}</p>

`input[type="number"]`



<script>
  let value = 1;
</script>

<input type="number" bind:value={value} />
<input type="range" bind:value={value} min={1} max={5} />

`input[type="checkbox"]`



<script>
  let checked = false;
</script>

<label>
  <input type="checkbox" bind:checked={checked} />
  select: {checked}
</label>

`input[type="radio"]`



<script>
  let radioValue = "";
</script>

<label>
  <input type="radio" bind:group={radioValue} value={1} />
  1
</label>

<label>
  <input type="radio" bind:group={radioValue} value={2} />
  2
</label>

<label>
  <input type="radio" bind:group={radioValue} value={3} />
  3
</label>

<p>chosen: {radioValue}</p>

`bind:group`



<script>
  let checkboxValue = [];
</script>

<label>
  <input type="checkbox" bind:group={checkboxValue} value={1} />
  1
</label>

<label>
  <input type="checkbox" bind:group={checkboxValue} value={2} />
  2
</label>

<label>
  <input type="checkbox" bind:group={checkboxValue} value={3} />
  3
</label>

<p>chosen: {checkboxValue.join(',')}</p>

`select`



<script>
  let selectValue;
</script>

<select bind:value={selectValue}>
    <option value={1}>1</option>
    <option value={2}>2</option>
    <option value={3}>3</option>
</select>

<p>chosen: {selectValue}</p>

In addition to the components listed above that enable bidirectional binding, Svelte also supports bidirectional binding of many elements, such as textarea, media tags video, audio, etc.

Two-way binding in custom component



<script>
  export let value;
</script>

<input bind:value={value} />

Here we encounter a new keyword, export, which we'll cover in the next chapter.



<script>

  import Child from './Child.svelte';

  let fatherValue = ''

</script>

<Child bind:value={fatherValue} />

<input bind:value={fatherValue} />

Brief Summary

In this chapter we have learned:

Using bind in Svelte to implement two-way data binding for form type components.

Svelte Series-3: How to Update Data and Use Event Listeners

Garlic Garlic — Wed, 22 May 2024 13:35:22 +0000

Data Binding

Data is the most important aspect of page presentation.

In React, we can declare and store variables in this.state, or manipulate them with useState; in Vue, we can put the data in the return value of the data() method, or declare variables with ref or reactive; and in Svelte, we declare variables directly in script tags as normal. In Svelte, we declare variables in script tags and wrap them in html tags with {}.

<script>
  let count = 0;
</script>

<div>count: {count}</div>

In addition to displaying in the tag content, we can manipulate variables in the tag attributes, for example, we often need to determine the dynamic style class.

<script>
  let tab = 'hello'
</script>

<span class={tab === 'hello' ? 'active' : ''}>color text</span>

<style>
.active {
  color: blue;
}
</style>

Update data

How do we update declared variables? It's also very easy:

<script>
  let count = 0;

  const updateCount = () => {
    if (count >= 5) {
      return;
    }
    count++;
    setTimeout(() => {
      updateCount();
    }, 1000);
  };

  updateCount();
</script>

<span>count: {count}</span>

In the above code, I declared a timed update method, if you execute the above code, you can see the count in the page updated by seconds. From the code we can see that there is no difference between declaring and using methods and the way we normally write vanilla js.

Update array and object

If you have used Vue, then you must know that in Vue, some Hack operations are required for array updates. What about in Svelte?

Here's an example:

<script>
  let arr = [1];

  const updateArray = () => {
    arr.push(1);
    console.log(arr);
  };
</script>

<button on:click={updateArray}>update array</button>
<p>array: {arr.join(",")}</p>

In this example, if we click on the button, we see that the contents of the array are not updated at all on the page display, yet the console prints out the contents of the array after the push as normal.

Yes, updating arrays in Svelte also requires some finesse.

Because Svelte's reactivity is triggered by assignments, using array methods like push and splice won't automatically cause updates.

This is a quote from the official website: the reactivity of Svelte is triggered by assignment statements. This sentence already points out the key problem: "assignment statement". So we can modify it as follows:

const updateArray = () => {
  arr.push(1);
  console.log(arr);
+ arr = arr;
}

or like this：

const updateArray = () => {
  arr = [...arr, 1]
}

For some other methods of manipulating arrays, we can replace them along these lines

const pushNumber = () => {
  arr = [...arr, lastNumber];
}
const popNumber = () => {
  arr = [...arr.slice(0, arr.length - 1)]
}
const unshiftNumber = () => {
  arr = [firstNumber, ...arr];
}
const shiftNumber = () => {
  arr = [...arr.slice(1, arr.length)]
}

There is also one thing to keep in mind when objects are updated, as an example:

<script>
  let obj = {
    foo: {
      bar: "hello",
    },
  };
  let bar = obj.foo.bar;
  bar = "world";
</script>

<p>object: {obj.foo.bar}</p>

On the page, we still see hello, and to update it, we need to write it as follows:

<script>
  let obj = {
    foo: {
      bar: "hello",
    },
  };
  obj.foo.bar = "world";
  // let bar = obj.foo.bar;
  // bar = 'world'
</script>

<p>object: {obj.foo.bar}</p>

The official website also carefully gives us a hint: the name of the updated variable must appear on the left hand side of the assignment

Event Handlers

Each framework has its own unique way of writing event listeners. In Svelte, event listeners are bound in the following format.

on:eventname|modifiers={handler}

eventname like click、mousemove、keydown and etc。

modifiersis an optional option with some options like：

preventDefault: calls event.preventDefault() before running the handler. Useful for client-side form handling.
stopPropagation: calls event.stopPropagation(), preventing the event reaching the next element.
passive: improves scrolling performance on touch/wheel events
capture: fires the handler during the capture phase instead of the bubbling phase
once: remove the handler after the first time it runs

For example, let's write one of the most common event bindings that binds a data declaration to an event listener:

<script>
  let count = 0;
  const updateCount = () => {
    count++;
  };
</script>

<div>
  count: {count}
  <button on:click={updateCount}>+1</button>
</div>

In the above code, We're not using event modifiers for now, let's see another example:

<script>
  let count = 0;
  const sayHello = () => {
    console.log("hello");
  };

  const updateCount = () => {
    count++;
  };
</script>

<div on:click={sayHello}>
  count: {count}
  <button on:click={updateCount}>+1</button>
</div>

If we click on the button at this point, we will see the hello string being printed in the console. One way to stop the event from bubbling is to set stopPropagation in the listener method.

const updateCount = (event) => {
  event.stopPropagation();
  count++;
}

Another way is to use the modifiers we just described so that we don't have to deal with the bubbling logic in our business code:

<button on:click|stopPropagation={updateCount}>+1</button>

Event modifiers support chained calls:

on:eventname|modifier1|modifier2|modifier3={handler}

Sometimes we need to get the event object in the event binding, and the way to get the event object is also divided into cases, one is the event does not accept other parameters:

<script>
  const handleClick = (event) => {
    console.log(event);
  };
</script>

<button on:click={handleClick}>btn</button>

In the other case, we need to have the method take other parameters in addition to the event object:

<script>
  const handleClick = (event, param) => {
    console.log(event, param);
  };
</script>

<button on:click={(e) => handleClick(e, "hello")}>btn</button>

This inline event binding can also be written as follows, with the main difference being highlighting support under certain editors:

<button on:click="{e => handleClick(e, 'hello')}">btn</button>

Brief Summary

In this chapter we have learned:

Declaring data and updating data in Svelte
Tips for updating arrays, objects in Svelte
How to use event listeners in Svelte, and the use of modifiers in listening to events.

Svelte Series-2: How to install Svelte

Garlic Garlic — Tue, 21 May 2024 02:33:12 +0000

Install

Before installing Svelte, we recommend you to make the following things done:

Install Node.js environment.
Install Code Editor（VSCode recommended）
Know something about Html, Css and JavaScript

Installed via Vite（recommended）

After we have installed the Node environment, we can use Vite to install. Because the use of Vite has a higher version of Node.js requirements, so I recommend that you install a relatively new Node.js. currently I use the version for v18.15.0.

If there are different projects relying on different versions of Node, I recommend installing a node versioning tool such as nvm.

Everything is ready, the installation command is as follows, which we execute in steps：

npm create vite@latest my-svelte-project -- --template svelte
cd my-svelte-project
npm install

First of all when we hit the line npm create vite@latest my-svelte-project -- --template svelte in the command line tool, wait for a moment and we can see:

The next step is to execute each of them as shown in the figure, execute cd my-svelte-project and npm install.

cd my-svelte-project takes you to the directory my-svelte-project that we just created successfully. Once in the directory, we run npm install to install all the dependencies needed by the project.

If you are better at using Typescript, then you can replace --template svelte with --template svelte-ts.

What if we execute the next line command（Can you tell the difference?）

npm create vite@latest my-svelte-app

That's right, we don't specify a template, that is, we don't specify which front-end library's template to use, so we get the following interface:

Since we are learning Svelte, then we can use the up and down arrow keys on the keyboard to check the Svelte option and enter;

In the next step, we select Javascript, and again, if you have mastered Typescript, you can select Typescript.

Enter and you get the same prompt you just did.

Again cd to the project directory and then execute install dependencies. After the npm install dependencies are installed, we run npm run dev to get our first Svelte project up and running.

In the code of the Github repository create-vite, we were able to find that what we downloaded is the file in the corresponding directory.

Visit http://localhost:5173 and if you can see the same page as I did, then congratulations, you've successfully taken the first step!

Original Installation

The original installation referred to here is actually the installation prompt that appears on the home page of the official website

npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open

Run npm create svelte@latest my-app, it tells us to install create-svelte:

As you can see, the officially provided template is related to SvelteKit.

SvelteKit is a framework for building web applications using Svelte.

The relationship between Svelte and SvelteKit is the same as React and Next.js, or Vue and Nuxt.js. The former is a UI framework, while the latter is a web framework written based on the former. Therefore, the official website recommended installation that is through the SvelteKit to install.

Let's choose one of the templates at random and enter to confirm.

Later will continue to provide some options, according to their own preferences after the selection, we can see the following interface:

Customized Installation

If we don't want to use Vite or SvelteKit, or if we don't have the means to use them, then we need to integrate Svelte with our own environment. In our daily development, we usually use webpack or Rollup as our project's module management packaging tool. Therefore, I will introduce these two environments, how to build the Svelte environment.

Here I assume that after creating a webpack demo project or rollup demo project, in the directory we can have the following file:

The content within App.svelte is arbitrary and conforms to the Svelte file format;

The content of the index.js file is as follows:

import App from './App.svelte';

new App({
  target: document.querySelector('#root')
});

The content of index.html file is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
  <div id="root"></div>
  <script src="./dist/index.js"></script>
  </body>
</html>

webpack

Another key to using Svelte in webpack, in addition to the essential svelte, is to install the svelte-loader

mkdir webpack-demo
cd webpack-demo

npm init -y
npm install webpack webpack-cli -D
npm install babel-loader @babel/core -D
npm install svelte svelte-loader

After installing the dependencies, modify the webpack configuration webpack.config.js:

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
  },
  resolve: {
    extensions: [".js", ".svelte"],
    conditionNames: ["svelte"],
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        use: [{ loader: "babel-loader" }],
      },
      {
        test: /\.(svelte)$/,
        use: [
          "babel-loader",
          {
            loader: "svelte-loader",
          },
        ],
      },
    ],
  },
};

If there is a build command in the scripts in package.json, try npm run build; or execute the webpack command directly from the command line, you can see that there is a package directory dist, and index.html references the index.js file in the dist directory. If you open index.html directly in your browser, you can see the content defined in App.svelte.

Rollup

The key in Rollup is rollup-plugin-svelte.

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: './src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'umd'
  },
  plugins: [
    svelte(),
    resolve({
      browser: true,
      exportConditions: ['svelte'],
      extensions: ['.svelte']
    })
  ],
};

Usage

After the above series of installation instruction, I believe that you have already discovered how to use Svelte in projects. First of all, within the index.html file, provide a node that can be mounted, which is usually as follows (you can define it by yourself):

<div id="root"></div>

In the entry file index.js or main.js, define the following content:

import App from './App.svelte';

new App({
  target: document.querySelector('#root')
})

App.svelte is our initial svelte file, and we mount the contents written in App.svelte to the defined root node.

Svelte files have .svelte as the file extension within the file.

<script>
// logic goes here
</script>

<style>
/* styles go here */
</style>

<!-- markup (zero or more items) goes here -->

All three sections — script, styles and markup — are optional.

VsCode Extension

We open the installed project in Vscode and add the Svelte extension. The extension provides us with syntax highlighting and smart detection when we write svelte files.

REPL

REPL (Read-Eval-Print Loop), is a simple interactive programming environment. If you just want to simply learn the syntax of Svelte, but also feel that building a Svelte environment project is too much trouble, that Svelte official website for developers and learners to provide a REPL environment, in which we can quickly write a test of Svelte's various api syntax!

Go for a try!

Brief Summary

In this chapter we have learned:

Installing Svelte with Vite
Installing Svelte with SvelteKit
Running Svelte in a webpack project
Running Svelte in a Rollup project
Svelte file's content format
Some Svelte tools: VsCode plugin, REPL runtime environment, etc.

Svelte Series-1: An awesome framework

Garlic Garlic — Thu, 16 May 2024 02:09:43 +0000

What

From the beginning of this chapter, I will be with you to understand a different framework from React and Vue Which use virtual DOM as the core, this framework is - Svelte.

Author

Just as we think of Dan Abramov when we think of React and Evan You when we think of Vue, Rich Harris, the creator of Svelte, is also well known in the front-end industry. Some developers may not know who Rich Harris is, but he is the creator of Rollup, a packaging tool that is famous with webpack. In addition to Rollup, Rich Harris also developed Reactive, Svelte and many other popular open source works, and actively engaged in open source. Svelte is the result of Rich Harris' work at The Guardian, where he was the interactive editor of the US edition. Before joining the Guardian's UK Interactive team as a front-end developer, he worked as a financial journalist, video journalist and web producer at Citywire.

History

Svelte's predecessor was Ractive.js, released in 2013, which came out at almost the same time as React. Reactive.js was inspired by a mashup of Knockout and Angular and a few other things at the time. After a few years of practicing, Rich Harris felt that Reactive.js wasn't really the right framework for the mobile internet age, and proposed his new idea for a framework - writing a compiler - with friends at the BrooklynJS meetup.

The first version of Svelte was basically Reactive with an extra compiler, and because colleagues at The Guardian were using Reactive at the time and there was an existing Reactive community, the first version of Svelte inherited many of the same design features from Reactive in order to promote Svelte and allow developers who had used Reactive to get up to speed quickly. The name Svelte was chosen by Rich Harris and his colleagues at The Guardian. Over time, more and more developers became aware of Svelte and became interested in it.

Then, the Svelte development team realized that some of Ractive's design decisions were wrong, so Svelte 2 actually has only a few minor improvements. For example, instead of double braces, single braces are used in the template syntax, so it's more like JSX, and some other similar modifying changes have been made. But other than that, it's pretty much the same as Svelte 1.

Version 3 was a major revision where the Svelte development team began to rethink the core concept of modern UI frameworks: reactivity. By 2019, Svelte has become a mature tool for building out-of-the-box web applications with TypeScript support.

After 4 years, Svelte 4 was successfully released in 2023.Svelte 4 served as a transition version, which can be compared to React 17 version between React 16 and 18, and set the stage for the release of the next generation of Svelte (i.e. Svelte 5).

How

Everything has two sides, when we want to learn a new thing, we need to consider whether this thing is worth learning, to understand its advantages and disadvantages in the current two sides, is a good entry point for the framework is also the same.

Advantages

Performance

By comparing performance on benchmark, we can see that Svelte outperforms front-end frameworks such as React, Vue, and Angular overall, except for being slightly behind Solid.

Take another look at Jacek Schae's Lighthouse runs of RealWorld in 2020 for each frame.

Rich Harris' virtual-dom-is-pure-overhead article points out that the virtual DOM is not a free lunch, and that it comes with a performance and memory drain. For a React component to make changes to the value of props, there are three steps:

Record the snapshots of the virtual DOM before and after to compare the same nodes
Compare all the attributes on that node, old and new, and record the changes
Updating the Real DOM

Svelte, on the other hand, eliminates the first two steps and updates the DOM directly.Svelte is a compiler that does not use a virtual DOM.Svelte.js compiles components at build time, resulting in highly optimized, lightweight JavaScript code. Unlike other frameworks that rely on a virtual DOM at runtime, Svelte.js completely eliminates the need for a virtual DOM, resulting in faster load times, smoother animations, and improved overall Web application performance. This is a very important advantage of Svelte over any other web framework.

Size

Again, Jacek Schae's frame volume analysis. Svelte is way ahead in this piece.

Svelte also performs well in terms of the number of lines of code generated by using the framework. Although business code written with Svelte generates more code after compilation, the overall code size is still relatively small for a typical small to medium sized project thanks to less runtime code.

The size shown in npmtrends, 2.7KB is also way ahead.

Unlike frameworks like React, Vue, Angular, etc., Svelte doesn't need to introduce runtime code at code runtime. The entire framework is compiled away during the build process, leaving optimized JavaScript code that interacts directly with the browser's native API. This is one of the reasons why Svelte has a smaller package size, consumes less memory and has better performance.

In the campaign for the advantages of code size, Evan You has raised a kind of questioning, for which a project was written to compare Svelte and Vue.

From the results in the article we can draw the following conclusions:

The compiled Svelte component code is 70% heavier than the Vue 3 equivalent and 110% heavier in SSR mode
For applications, the advantage of Svelte over Vue3 gradually decreases when written above the threshold of 19 components (13 components for SSR mode).

So we can come to a point of view, although the code of the Svelte project is smaller. But for large projects, with the advancement of business, business complexity gradually increased, the size of the project file gradually increased, the amount of compiled code increases steeply, the use of Svelte's large project volume is not smaller than React, Vue, etc., so we need to dialectically look at the issue of volume advantage.

Learning curve

Svelte's syntax is simple and easy to use, with a small learning curve. Any developer who has learned html, css, and javascript can get started, and Svelte allows users to use a small enough amount of code to accomplish a function, such as the simplest piece of code:

<script>
  let count = 0;
</script>

<button on:click={() => count++}>add</button>

Svelte helps developers build user interfaces with minimal effort, improving code readability and reducing the mental load and difficulty of getting started for developers by implementing better reactivity, bindings, and top-level elements, among other things.

Attention

The above features of the Svelte have made it a big hit in front-end circles.

Svelte On Github, reaching a Star of 75k+.

On risingstars' 2023 report. You can see that Svelte is ranked third among front-end frameworks with rising stars on Github.

In stateofjs' 2022 annual report (the results of the 2023 report are not yet available at the time of writing), Svelte is ranked at the top of the list for attention and satisfaction.

Disadvantages

Ecologically

Released only in 2016, Svelte's ecology is clearly not up to the richness of React and Vue.

Code redundancy

Compiled code logic redundancy. Some readers may worry that if the complexity of the business logic, resulting in a straight line increase in the size of the code file after compilation, whether it will lead to a certain degree of performance degradation?Github on the relevant developers for this problem to analyze svelte-it-will-scale:

The article states that the inflection point is about 120KB of component source code. That is, at about 120KB, the size advantage of using the compiler over the runtime is gone. In reality, however, with judicious use of code splitting, it is unlikely that a single file will appear to be 120KB.

Abstraction

Because Svelte doesn't use virtual DOM, it naturally doesn't enjoy many of the benefits of virtual DOM, such as abstracting rendering capabilities on each end based on virtual DOM, and completing functions such as testing based on vdom.

Generalization

Take a look at the number of downloads of the three main frameworks over the past year.

The number of downloads is still not comparable to Vue, and compared to the first tier of React, it's even more difficult to look up to it.

Why

Why should I learn Svelte? Here I briefly give a few reasons:

Technological Innovation. Today's front-end frameworks are dominated by virtual DOM implementations. Unlike the virtual DOM implementation, Svelte realizes the responsiveness of front-end frameworks with static compilation, which not only opens up our technical horizons, but also enhances the need for us to think and innovate in addition to embracing trends in development.
Performance. Excellent performance in small to medium sized operations.
Learning Curve. Easy to get started, low mental load.
Svelte started late, some of the ecological library is not comprehensive enough, if you happen to be the reader of open source to open good, slightly barren ecological soil is a good time for you to show off.

Brief Summary

In this chapter we learned:

Svelte is an emerging front-end framework that differs from React, Vue, and other frameworks that have a virtual DOM at their core; Svelte analyzes the interactions between variables during the static compilation phase, and at its core, a compiler.
Svelte has advantages such as small size and ease of use, while the lack of ecology is one of its disadvantages.

DEV Community: Garlic Garlic

Svelte Series-7: The Syntax $

Declaration

$: syntax

Statement

The difference from beforeUpdate

Dependency

Summary

Svelte Series-6: Lifecycle

Call Timing

onMount

beforeUpdate

afterUpdate

onDestroy

tick

Summary

Svelte Series-5: Component & Props

Component-Based Development

Props

When prop is data

Default Props

Keywords

const

Function Called

createEventDispatcher

Dispatch Events

$$props

$$restProps

Brief Summary

Sveaflet - A newly Leaflet Library for Svelte

What is Sveaflet

Quick Start

Installation

Usage

Advantages

Multiple components

Learning curve

Documents

Future Plan

7 Ways to Remove Array Duplicates in Javascript

Set

double for + splice

indexOf / includes

indexOf

includes

filter

Map / Object

Map

Object

sort

reduce

Svelte Series-4: Two-Way Binding

MVVM

Two-way binding in form component

input[type="text"]

input[type="number"]

input[type="checkbox"]

input[type="radio"]

bind:group

select

Two-way binding in custom component

Brief Summary

Svelte Series-3: How to Update Data and Use Event Listeners

Data Binding

Update data

Update array and object

Event Handlers

Brief Summary

Svelte Series-2: How to install Svelte

Install

Installed via Vite（recommended）

Original Installation

Customized Installation

webpack

Rollup

Usage

VsCode Extension

REPL

Brief Summary

Svelte Series-1: An awesome framework

`$:` syntax

`$$props`

`$$restProps`

`input[type="text"]`

`input[type="number"]`

`input[type="checkbox"]`

`input[type="radio"]`

`bind:group`

`select`