DEV Community: Ahmed Nasser

Vue 3 Reactivity System Is Brilliant! Here’s How It Works - Part 1

Ahmed Nasser — Mon, 29 Jan 2024 08:00:00 +0000

What do we mean by reactivity?

Being a frontend developer nowadays means that you’re dealing with reactivity on a daily basis. Basically, it is the seamless mapping between the application state and the DOM. Any change in the application state will instantly be reflected on the DOM without the need to handle this manually, just change the state and let the framework do the rest of the work for you.

Simply put, the framework is handling this “Oh! The price has changed, update the DOM with the new price and update any other variables that are depending on this price too.”

Reactivity Hello World! What Problem We’re Trying to Solve?

Let’s consider this example. We have a product that has a price and quantity. And there’s another variable totalPrice that is being computed from price and quantity.

let product = {price = 20, quantity: 5}
let totalPrice = product.price * product.quantity

console.log(totalPrice) // Returns 100

Now if we changed the price of the product, the total price doesn’t get updated.

product.price = 30
console.log(totalPrice) // Still returns 100

We need a way to say to our code “hey, totalPrice is depending on price and quantity. Whenever any of them changes recompute the totalPrice”.

Let’s tackle the problem step by step, each step will be built above the previous step until we build a whole** reactivity engine** at the end.

First of all, We can wrap the code that updates totalPrice into a function updateTotalPrice and call it whenever needed

function updateTotalPrice() {
    totalPrice = product.price * product.quantity
}

product.price = 30
updateTotalPrice()

console.log(totalPrice) // Now it returns 150

Now what we need to do is, call the updateTotalPrice function whenever the price or quantity changes. But, calling it manually after every update is NOT practical, we need a way to automatically know that the value has changed and therefore call the updateTotalPrice function automatically. And here is where Javascript Proxy comes into place.

Introducing Javascript Proxy

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.
– MDN description for the proxy object

Simply, Javascript Proxy allows us to intercept the basic operations like getting a value or setting a value of an object. And applying whatever logic we need on each operation.

The proxy constructor takes 2 parameters:

Target: Which is the original object that we need to Proxy
Handler: An object that defines the intercepted operations and the logic that will be executed

Let’s start with a simple example: We’re going to create a proxy with an empty object handler, a proxy that is not doing anything. It will behave just like the original object.

let product = {price: 20, quantity: 5}
let proxiedProduct = new Proxy(product, {})

console.log(proxiedProduct.price) // Returns 20

proxiedProduct.price = 50
console.log(product.price) // Returns 50

Now let’s intercept the get and set functionalities and just add a console.log before getting or setting a value. This is done by implementing get and set functions in the handler object of the Proxy.

get function: It's a trap for the get operations on the object and takes 3 parameters:
- target: The original object
- property: The property we're trying to get the value of
- receiver: The object that was called on, usually the proxied object itself or any inherited object (We're not going to use it anyways for now)
set function: It's a trap for the set operations on the object and it takes 4 parameters:
- target: The original object
- property: The property we're trying to set the value to
- value: The value that we need to set
- receiver: Same as the get function, not going to use it for now too

let product = {price: 20, quantity: 5}

let proxiedProduct = new Proxy(product, {
    get(target, property){
        console.log(`Getting value of ${property}`);
        return target[property]
    },

    set(target, property, value){
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value
        return true
    }
})

console.log(proxiedProduct.price) 
// Prints "Getting value of price"
// Then, Returns 20

proxiedProduct.price = 50  
// Prints "Setting value of price to 50"
// Then, Set value of product.price to 50

Can you see it now? 🤔 At first we were looking for a way to automatically detect that a property’s value has changed to call the updateTotalPrice function. Now, that we have what we were looking for we can simply use a Proxy with a setter to achieve that.

Back to Our Main Problem

Improvement 1: Calling `updateTotalPrice` function inside the setter

Last time we needed a way to say “Hey, whenever price or quantity changes call the updateTotalPrice function”. This seemed to be some sort of magic that we need to happen. Now that we have a way to automatically detect that a property has changed, it is not magic anymore. We can simply call the updateTotalPrice function inside our setter.

let proxiedProduct = new Proxy(product, {
    get(target, property){
        // Let's keep the getter empty for now
    },

    set(target, property, value){
        target[property] = value;

        if(property === "price") updateTotalPrice();
        if(property === "quantity") updateTotalPrice();

        return true;    
    }
})

Now we have what we need. If we updated the price of the product, the totalPrice will be updated consequently.

console.log(totalPrice) // Returns 100

proxiedProduct.price = 30
console.log(totalPrice) //Returns 150 🎉

Just before leaving this point, we don’t need redundant calls for the update function. If the value of the price for example was 20 and we’re setting to a new value of 20 too. It doesn’t make sense to recalculate the totalPrice as it hasn’t changed. Therefore, we’re going to change the code a little bit

let proxiedProduct = new Proxy(product, {
    get(target, property){
        // Let's keep the getter empty for now
    },

    set(target, property, value){
        let oldValue = target[property];
        target[property] = value;

        // Call update function only if the value changed
        if( oldValue !== value ) {
            if(property === "price") updateTotalPrice();
            if(property === "quantity") updateTotalPrice();
        }

        return true;    
    }
})

Improvement 2: Creating a Dependencies Store `depsMap`

In another scenario, we might have a function updatePriceAfterDiscount that depends only on the price and should be called when the price property changes. This is where our previous solution falls short, we need to modify our setter to handle this scenario too

if(property === "price"){
    updateTotalPrice();
    updatePriceAfterDiscount();
}

if(property === "quantity") updateTotalPrice();

What if we have a huge number of functions depending on some properties? We don't need to touch the setter and getter as much as we can and let it do its job automatically. Therefore, we're going to separate the properties and their corresponding functions into a separate place.

First of all, let's define some terms that vue is using in order to better understand what we are building.

The updateTotalPrice function is called an effect as it changes the state of the program.
The price and quantity properties are called dependencies of the updateTotalPrice effect. As the effect is depending on them.
The updateTotalPrice effect is said to be a subscriber to its dependencies. i.e. updateTotalPrice is a subscriber to both price and quantity

Now that we know the terms, we're going to create a Map called depsMap that maps each dependency to its corresponding list of effects that have to be run on changing the dependency.

For example, In the previous image, we can see that the price property is a dependency for both updateTotalPrice and upadtePriceAfterDiscount effects. Whenever the price changes we need to rerun the list of effects.

Now we need to change the setter a little bit to benefit from the created depsMap. We're going to get the list of effects of a certain dependency and loop over them executing all of them at once.

let proxiedProduct = new Proxy(product, {
    get(target, property){
        // Let's keep the getter empty for now
    },

    set(target, property, value){
        let oldValue = target[property];
        target[property] = value;

        // Call update function only if the value changed
        if( oldValue != value ) {
            // Get list of effects of dependency
            let dep = depsMap.get(property)

            // Run all the effects of this dependency
            dep.forEach(effect => {
                effect()
            })
        }

        return true;
    }
})

Now, all we need to do is keep the depsMap updated with all the dependencies and all the effects that should run on changing a dependency.

So far this is working great until we have multiple reactive objects. If we took another look at the depsMap we can see that it contains the properties of the product object only. In reality, it's more complicated. We’re not dealing with only one object but with multiple objects and we need all of them to be reactive. Consider the case we have another object user and we want it to be reactive too. We will need to create a new depsMap for the user object other than that of product. To solve this issue, we’re going to introduce a new layer targetMap.

Improvement 3: Creating The `targetMap`

We’re going to build a depsMap for each reactive object. Now we need a way to map between the reactive object and its depsMap ( If I have the reactive object, how can I get to its depsMap ). So, we’re going to create a new map targetMap where the key is the reactive object itself and its value is the depsMap of that object

We need the key of the targetMap to be the reactive object itself and not just a string. For example, the key should be the product object itself and not the string ‘product’.

Therefore, we cannot use a regular map to build the targetMap instead, we’re going to use javascript WeakMap. WeakMaps are just key/value pairs (regular object) where the keys must be objects and the value could be any valid javascript type. For example:

const product = {price: 20, quantity: 5};
const wm = new WeakMap(),;
wm.set(product, "this is the value");

wm.get(product) // Returns "this is the value"

Now as we know how to build the targetMap. We need to update our setter too as now we’re dealing with multiple depsMaps and we need to get the correct depsMap. Since in the setter we can get the target object. We can use our targetMap to get our depsMap as following

let proxiedProduct = new Proxy(product, {
    get(target, property){
        // Let's keep the getter empty for now
    },

    set(target, property, value){
        let oldValue = target[property];
        target[property] = value;

        // Call update function only if the value changed
        if( oldValue != value ) {
            // We get the correct depsMap using the target (reactive object)
            let depsMap = targetMap.get(target)
            if(!depsMap) return

            // Get list of effects of dependency
            let dep = depsMap.get(property)
            if(!dep) return

            // Run all the effects of this dependency
            dep.forEach(effect => {
                effect()
            })
        }

        return true;
    }
})

Wrapping It All Up

So far, we've built only the setter function in the proxy. This function is the one responsible for triggering all the effects whenever a property changes. therefore, this function is called trigger by Vue.

Let's wrap all the improvements we have stated above to solve our main problem and we will add a new reactive variable priceAfterDiscount that's depending only on the price property

First, let's define our reactive variables and their corresponding effects

  let product = { price: 20, quantity: 5 };
  let totalPrice = product.price * product.quantity;
  let priceAfterDiscount = product.price * 0.9;

  // Effects
  function updateTotalPrice() {
    totalPrice = product.price * product.quantity;
  }

  function updatePriceAfterDiscount() {
    priceAfterDiscount = product.price * 0.9;
  }

Second, let's define and fill the targetMap and depMap

  const targetMap = new WeakMap();
  const productDepsMap = new Map();

  targetMap.set(product, productDepsMap);

  productDepsMap.set('price', [updateTotalPrice, updatePriceAfterDiscount]);
  productDepsMap.set('quantity', [updateTotalPrice]);

Finally, we need to create the proxy for the product object

  // Creating the Proxied Product
  let proxiedProduct = new Proxy(product, {
    get(target, property) {
      // Let's keep the getter empty for now
    },

    set(target, property, value) {
      // ... same as we've defined it in the previous section
    },
  });

Voila, Our product object is now reactive

  console.log(totalPrice); // Returns 100
  console.log(priceAfterDiscount); // Returns 18

  // totalPrice and priceAfterDiscount should be updated on updating price
  proxiedProduct.price = 30;

  console.log('✅ After Updating Price');
  console.log(totalPrice); // Returns 150
  console.log(priceAfterDiscount); // Returns 27

  // only totalPrice should be updated on updating quantity
  proxiedProduct.quantity = 10;

  console.log('✅ After Updating Quantity');
  console.log(totalPrice); // Returns 300
  console.log(priceAfterDiscount); // Still Returns 27

Next Steps

So far we have partially solved our problem, At first we needed a way to say to javascript "Hey, totalPrice is depending on price and quantity. Whenever any of them changes recompute the totalPrice" and that's what we've achieved in the end. The product object is now reactive.

The only problem so far is that we're filling the values of depsMap and targetMap manually and we have to maintain them. We need a way for those maps to be filled and maintained automatically without our intervention.

In the next part of this series we're going to continue building on this to have a complete reactive engine that's completely automated without any intervention from us. Stay tuned.

Vue 3 Explained: Rendering 101

Ahmed Nasser — Mon, 22 Jan 2024 10:02:32 +0000

Ever wondered how Vue turns your templates and components into the actual webpage you see in your browser? Curious about how it efficiently updates the view when things change? It might seem like magic, but let's demystify it.

In the previous parts of this series, we focused on Vue's reactivity system—how it tracks dependencies and responds to state changes. We have even implemented Vue's ref, reactive and watchEffect methods together.

In the upcoming sections, we're shifting our focus slightly away from reactivity to explore the rendering mechanism.

As we progress through this series, our goal is to connect all the dots, bridging the reactivity aspect with the rendering part. This will provide us with a comprehensive view of Vue's flow from start to finish. We'll understand how a change in the state triggers a rerender in the component and how this rerender process is optimized for performance.

In this article, we're going to dig into the rendering process, breaking it down and explaining the flow from writing the template to observing the results on the webpage.

Before we start exploring the rendering process, it's essential to understand a simple but important concept: the Virtual DOM.

WTH is The Virtual DOM?

The Virtual DOM is a concept used in various frontend frameworks. Simply, it's a representation of the actual DOM elements stored in the memory as JavaScript objects. The framework then is responsible for syncing this virtual version with the real version of the DOM.

Just like the real DOM consists of elements (nodes), the virtual DOM has virtual nodes, each one representing a real element.

Since Virtual DOM is more of a pattern than a standard, each framework has its own take on it. The way Vue is building it, it represents each DOM node as a Javascript object (virtual node) with 3 main properties:

type: What kind of element it is, like a div or h1.
props: The properties of the element, such as class, id, or even user-defined props and event listeners.
children: Can be an array of more virtual nodes or just a string representing a Text.

The Virtual Node (VNode) interface contains many other properties. But, those are the most important and basic ones. The other properties are for internal usage by the framework.

https://github.com/vuejs/core/blob/fd337dddd1fc9e41213e74b96aa393bbcc070aa9/packages/runtime-core/src/vnode.ts#L144

Let's break down the concept of the virtual DOM using a practical example. Imagine we want to create a basic view with a heading, a paragraph, and a gif.

In HTML, it's straightforward:

<div id="app">
    <h1>Hello, Developers</h1>
    <p>Vue is the rockstar of frameworks!</p> 
    <img alt="Gorilla" src="https://media.baamboozle.com/uploads/images/153606/1646316067_1645615.gif"/> 
</div>

Now, in the structure of the webpage, we see a div with three children. Each of h1 and p tags have one child, a text node.

In virtual DOM, we can represent each one of those elements as a JS Object with our 3 main properties type, props, and children. And then accordingly, our simple webpage in virtual DOM looks like this:

{
  type: 'div',
  props: { id: 'app' },
  children: [
    { type: 'h1', props: {}, children: 'Hello, Developers' },
    { type: 'p', props: {}, children: 'Vue is the rockstar of frameworks!' },
    {
        type: 'img',
        props: {
            alt: 'Gorilla',
            src: 'https://media.baamboozle.com/uploads/images/153606/1646316067_1645615.gif'
        },
        children: null
    }
  ]
}

As you can see, we have modeled the DOM structure into simple nested JS objects. Those JS objects represent the DOM. And then Vue uses those JS objects to build the real DOM out of it.

Vue Rendering Flow

Let's explore the Vue rendering process step by step, from creating a new component to ensuring it's correctly displayed on the webpage. We'll break down what happens at each stage to give you a clear understanding.

We start by writing the template using the regular Vue template syntax.
Vue's compiler takes this template and transforms it into a render function.
The render function, when called, generates a virtual DOM – essentially, a blueprint of the compiled component's structure.
This virtual DOM represents the component in its current state. When the state changes, the render function is invoked again, providing the updated virtual DOM.
The resulting virtual DOM tree is then handed over to the mount function. This function takes care of turning the virtual DOM into real elements and adds them to the actual DOM.
Voila! The webpage is now correctly rendered and good to go.

Writing Vue Components As Render Function

As we have seen, the vue template is converted into a render function by the vue compiler. This function returns the virtual DOM implementation of the component.

However, In Vue, we can skip the template compilation step and write the component as a render function directly. The reason for this is that writing the component as a render function will provide more flexibility as it utilizes the full power of JS.

To better understand the rendering flow, let's rewrite our simple webpage as a render function. This will allow us to grasp the rendering process step by step. However, before we jump in, let's first understand how to create virtual nodes and structure the virtual DOM tree – since the render function should return that.

function render(){
    // Generating vDOM Tree
    return vDOMTree;
}

Creating Virtual Nodes

Vue provides a simple utility function called h(). This function is used for creating vnodes, where h() stands for "hyperscript," essentially meaning "JavaScript that produces HTML."

The h() function is super flexible. But, you typically use it with three parameters: type, props, and children. For instance, to make a div with the id "app," you'd do something like:

// h(type, props, children)
h('div', {id: 'app'}, []); // This returns the vDOM node represents this div

Rewriting Our Component As Render Function

To tell Vue to skip the template compilation step and rely on the render function we provide, we can achieve this by returning the render function from the setup function when using the composition API. This function becomes Vue's way for rendering this component, and it no longer depends on a template.

import { h } from 'vue'

export default {
  setup(props) {
    // return the render function
    return renderFunction;
  }
}

Now, let's revisit our simple example and transform this component into a render function using the handy helper method, h(). It would appear something like this:

import { h } from 'vue'

const renderFunction = () => {
    const vDOMTree = 
      h('div', {id: 'app'}, [
          h('h1', {}, 'Hello, Developers'),
          h('p', {}, 'Vue is the rockstar of frameworks!'),
          h(
              'img', 
              {
                  alt: 'Gorilla',
                  src: 'https://media.baamboozle.com/uploads/images/153606/1646316067_1645615.gif'
              },
              null
          )
      ]);

    return vDOMTree;
}

export default {
    setup() {
        return renderFunction;
    }
}

Next Steps

Now that we've got a handle on how rendering works in Vue and a better grasp of the virtual DOM, render function, and creating virtual nodes with the h() function, let's take the next step in the series.

In the upcoming part, we'll dive deeper into Vue's rendering process. We're going to implement our own version of the h() method, and we'll explore the mount method. This method plays a crucial role in turning the virtual DOM tree generated by the h() method into a real DOM attached to the webpage. Additionally, we'll craft a basic version of the mount method to enhance our understanding.

I'll make sure it's all simple and fun to understand! Stay tuned for more learning and exploring together!

Resources

File System Access API: How VSCode.dev Edits Local Files in the Browser

Ahmed Nasser — Mon, 25 Sep 2023 07:30:00 +0000

Have you ever given vscode.dev a try? It's the online version of the popular code editor, vscode, that so many people love. With vscode.dev, you get all the same capabilities as the offline version of the app. You can do things like version control, search through files, install extensions, lint and format your code and more.

One of the coolest things about vscode.dev is that you can easily open a project folder directly from your local machine. Once you've done that, you can seamlessly continue your development process right from your browser. You can add new files, make changes to existing ones, and do so much more, all while working within the browser. And all those changes you make are automatically reflected in your project's folder on your local file system.

But, how does vscode.dev manages to read and change your local files? Thanks to the File System Access API, which makes all of this possible!

Introducing File System Access API

The File System Access API allows online applications, like vscode.dev, to interact with your computer's files in a safe and controlled way. Without the need for any server-side intervention.

It's like a virtual bridge that connects the online world to your local files. With this API, vscode.dev can ask your permission to access specific folders on your computer. Once you give it the green light, it can read files from those folders, make changes to them, and even save new files there.

Reading A File

When you click "open file" in vscode.dev, a file picker appears, letting you choose any file from your computer. This is made possible by the window.showOpenFilePicker method. This method shows a file picker that allows the user to select one or more files from his local machine. And returns an array of FileSystemHandles (We will call it fileHandle for ease). The fileHandle object contains some metadata about the selected file as the file type and file name and it acts as a reference for the file. This fileHandle will be used later on to get the file itself and its contents.

const [fileHandle] = await window.showOpenFilePicker();

The showOpenFilePicker method also accepts an options parameter that can customize how it behaves, like allowing choosing multiple files, accepting certain file types only, etc. For example, you can allow selecting multiple files or restrict it to certain file types only. Giving you more control over the file picker.

const pickerOptions = {
    types: [
        {
          description: "Images",
          accept: {"image/*": [".png", ".gif", ".jpeg", ".jpg"]},
        },
    ],
    multiple: true,
}

const [fileHandle] = await window.showOpenFilePicker(pickerOptions);

Once you have the fileHandle for the file you picked. You can use it to get the file itself, and then you can read the contents of the file.

const [fileHandle] = await window.showOpenFilePicker(pickerOptions);
const file = await fileHandle.getFile();
const content = await file.text();

Reading Folder

Reading a folder is quite similar to reading files. Instead of using the showOpenFilePicker method, we use showDirectoryPicker. It shows a popup where users can choose a folder. Once they select a folder, it gives us a FileSystemDirectoryHandle (We will call it DirectoryHandle for ease). This directoryHandle is like the fileHandle we talked about earlier. It acts as a reference for the chosen folder and gives us some metadata about it, like its kind and its name.

const directoryHandle = await window.showDirectoryPicker();

To access the contents of the directory, we use the directoryHandle.values() method. This method returns an asynchronous iterator, which means we can go through the directory's contents one by one. The directory can contain both files and other folders. So, each item returned by the directoryHandle.values() method can be either a fileHandle or another folderHandle and we can distinguish between the two by checking the kind property.

const directoryHandle = await window.showDirectoryPicker();
for await (const entry of directoryHandle.values()) {
    if (entry.kind === 'file') {
        const fileHandle = entry; 
        // Do whatever we need with the file
    }

    if (entry.kind === 'directory') {
        const subdirectoryHandl = entry;
        // Do whatever we need with the folder 
    }
}

Saving Changes To Opened File

So, when we're done making all the changes to the file and want to save it back to our computer, we remember that special fileHandle we got when we first chose the file. It's like our key to access that file again.

Using that fileHandle, we create something called a writable stream on the file. Then, we use this stream to write our changes to the file.

The writable stream doesn't immediately change the original file. Instead, it writes everything to a temporary file first. Only when the stream is completely done, and we close it, does it swap the temporary file with our intended file. That's when our changes become permanent!

So, to make sure our changes happen, we need to close the stream after writing to the file. This way, our modifications take effect, and the file on our computer gets updated.

const writableStream = await fileHandle.createWritable();
await writableStream.write(newContent);
await writableStream.close();

Creating New File

What if we want to make a completely new file that isn't already there in our computer's files? no worries! We've learned about the showOpenFilePicker method, which helps us open files from our local system. Now, we have a similar method showSaveFilePicker that helps us in doing so. The difference is, Instead of opening a dialog to choose a file to open, showSaveFilePicker opens a dialog to save a brand-new file.

Using this method is straightforward! It opens the save dialog, and when you choose a location to save the file, it gives you the fileHandle. With that fileHandle, you can read the file or save changes to it, just like we did before.

const fileHandle = await window.showSaveFilePicker();

It also accepts an optional parameter. With this parameter, you can customize some things, like suggesting a name for the new file and setting its extension.

const options = {
    suggestedName: "NasserSpace.txt"
};
const fileHandle = await window.showSaveFilePicker(options);

Browser Permissions Needed!

The operating system won't let any website read or write to the user's disk without his permission. It's like when you install a new app on your mobile, and it asks for your permission to access things like files, camera, microphone, and so on.

In the same way, when a user visits your website, it needs his approval to access his local file system. The user is in control, and they have the final say on whether they want to grant your web app permission or not.

There are two types of file permissions: "read" and "readwrite". With "read" permission, you can only read the file's contents, while "readwrite" permission allows you to both read and write to the file.

Grant Permission Once

When the user picks a file with the showOpenFilePicker method, the browser automatically grants us "read" permission for that file. It makes sense since the user intentionally selected that file to read.

But when we read a whole folder using showDirectoryPicker, the browser requests the user's permission to access all the files within the folder with "read" permission.

This process only happens once. Once the user grants permission, we can read all the files without asking again.

In the same way, When you try to modify a file or folder for the first time, the browser will ask for the user's permission to do so. The permission that we need here is readwrite permission. The user only needs to grant this permission once. Once it's granted, you can freely modify and save new files to that folder and its subfolders without the user being asked again.

Getting permission is a one-time setup that makes future accessing or writing to the disk smooth and hassle-free!

Checking Users Permissions

In certain situations, we may need to check if the user has allowed us to access their local files. If they haven't granted permission yet, we can take the opportunity to explain to him why we need it and how we'll handle their files, to put their minds at ease. We can also guide the user on how to grant the permission, or if required, ask them again for permission.

To check permissions for a specific file, you can use the queryPermission method on the fileHandle you want to access.

The queryPermission method returns one of those values:

"granted": permission has already been granted by the user.
"denied": permission has been denied by the user.
"prompt": user has not explicitly granted or denied permission yet.

const options = { mode: 'readwrite' };
const permissionStatus = await fileHandle.queryPermission(options);

if(permissionStatus == 'denied') {
    // Show user why do we need his permission
}

if(permissionStatus == 'prompt') {
    // Request User Permission
}

Requesting User Permission

When we try to read or modify a file, the browser automatically shows a dialog asking for user permission. But sometimes, we might want to ask for permission explicitly. To do that, we can use a new function called requestPermission.

This method also accepts an optional parameter that allows us to specify whether we're asking for read permission only or readwrite permission. It returns the same result as the queryPermission method: either "granted", "denied", or "prompt".

const options = { mode: 'read' };
const permissionStatus = await fileHandle.requestPermission(options);

If the user has already granted access to that file, requestPermission won't show the request permission dialog again. Instead, it will directly return "granted".

Browsers Compatibility

Supported: Chrome, Microsoft Edge, Opera, Brave, Arc, and other Chromium-based browsers.

Not Supported (yet): Firefox, Safari.

Opening Doors to Innovation 💡

Building VSCode on top of the File System Access API is just one awesome application, but there's so much more we can do with this powerful tool! Some cool examples:

File Management Apps: We can create handy apps that help you organize your local files for better productivity. No more searching through cluttered folders!
Videos and Photos Editors: A web-based media editor that uses web technologies like web assembly and WebGPU along with the File System Access API. It lets you edit videos and photos right on your computer without any hassle.
File Type Conversion Apps: We can build a web app that handles file conversions from one format to another without sending them to a server. Quick and easy!

The possibilities are endless! With the File System Access API, we have a wide door open for creating and innovating all kinds of awesome applications. Let your imagination run wild!

DEV Community: Ahmed Nasser

Vue 3 Reactivity System Is Brilliant! Here’s How It Works - Part 1

What do we mean by reactivity?

Reactivity Hello World! What Problem We’re Trying to Solve?

Introducing Javascript Proxy

Back to Our Main Problem

Improvement 1: Calling updateTotalPrice function inside the setter

Improvement 2: Creating a Dependencies Store depsMap

Improvement 3: Creating The targetMap

Wrapping It All Up

Next Steps

Vue 3 Explained: Rendering 101

WTH is The Virtual DOM?

Vue Rendering Flow

Writing Vue Components As Render Function

Creating Virtual Nodes

Rewriting Our Component As Render Function

Next Steps

Resources

File System Access API: How VSCode.dev Edits Local Files in the Browser

Introducing File System Access API

Reading A File

Reading Folder

Saving Changes To Opened File

Creating New File

Browser Permissions Needed!

Grant Permission Once

Checking Users Permissions

Requesting User Permission

Browsers Compatibility

Opening Doors to Innovation 💡

Improvement 1: Calling `updateTotalPrice` function inside the setter

Improvement 2: Creating a Dependencies Store `depsMap`

Improvement 3: Creating The `targetMap`