DEV Community: Gil Rudolf Härdi

Code your own vue: methods and events

Gil Rudolf Härdi — Fri, 29 Oct 2021 21:11:29 +0000

Hi everyone, It's been a while since the last chapter of 'Code your own vue', in the last post we saw how to do our own lifecycle hooks, today we going to see how to code methods and events.
If you followed atleast the first chapter you can use methods and events in this way

<div id="app">
    <h1>{{ msg }}</h1>
    <button onclick="hi()">Click me</button>
</div>

const vm = new Vue({
    el: "#app",
    data: {
        msg: "Hello",
    },
});

// toggle vm.msg between 'Hello' and "World"
const hi = () => vm.msg = vm.msg === "Hello" ? "World" : "Hello";

But today we going to programm this in the vue way:

<div id="app">
    <h1>{{ msg }}</h1>
    <button v-on:click="hi">Click me</button>
</div>

const vm = new Vue({
    el: "#app",
    data: {
        msg: "Hello",
    },
    methods: {
        hi() {
            this.msg = this.msg === "Hello" ? "World" : "Hello";
        },
    },
});

Implementing methods

First we can define a function that will read the methods and mix all those methods with our vue instance. Like this:

function walkMethods(vue, methods) {
  for (const key in methods) {
    vue[key] = methods[key];
  }
}

Then call the function in the constructor before the created lifecycle hook.

class Vue {
  constructor({ methods }) {
    // Before Create
    walkMethods(this, methods);

    // Create

    // Mount

And now you should be able to call this.[method] in the vm or vm.[method] outside of vue.

Implementing events

Implementing events is more dificult. Javascript Dom cannot get attributes with specials characters like @click or v-on:click. So we need to handle that, for that I decided read the innerHTML and add vue-event=[event] and vue-event-method=[method] as attribute when a @[event] or v-on:[event] is found in a element. Other thing to consider is editing the innerHTML, if we add a event and edit the innerHTML the element will lose all events, for this reason we need to edit the innerHTML before adding any event.

const regex = {
  // regex to get v-on:[event]="[method]" and @[event]="[method]"
  vueOn: /(@|v-on:)\w+="([0-z.?]+)\(?\)?"/,
};

// replace v-on:[event]=[method] to selectionable attributes
function replaceAttributes(el) {
  el.innerHTML = el.innerHTML.replace(
    new RegExp(regex.vueOn, "g"),
    (match) => {
      // get event and method as [event]=[method]
      // from @[event]=[method] or v-on:[event]=[method]
      const attr = /@/.test(match) ? match.slice(1) : match.split(":")[1];
      // get event and method without quotes
      const [ event, method ] = attr.replace(/"/g, "").split("=");
      return `vue-event=${event} vue-event-method=${method}`;
    }
  );

  return el;
}

After that we need a function that read all element with the vue-event attribute, add the event listener and remove all those attributes.

function addEvents(vue) {
  vue.$el.querySelectorAll("[vue-event]").forEach((el) => {
    const event = el.getAttribute("vue-event");
    const method = el.getAttribute("vue-event-method");

    el.addEventListener(event, vue[method].bind(vue.$data));
    clearElement(el, ["vue-event", "vue-event-method"])
  });
}

function clearElement(el, attributes) {
  attributes.forEach(attr => el.removeAttribute(attr));
}

And finally, we need to use those functions on our render function.

const regex = {
  mostach: /\{\{((?:.|\r?\n)+?)\}\}/,
};

function renderVue(vue) {
  const originalTemplate = replaceAttributes(vue.$el.cloneNode(true));

  return () => {
    const { $data } = vue;

    vue.$el.innerHTML = originalTemplate.innerHTML.replace(
      new RegExp(regex.mostach, "g"),
      (_, val) => $data[val.trim()]
    );

    addEvents(vue);
  };
}

Example of the rendering:

<!-- Original -->
<button v-on:click="foo">I'm a button<button>

<!-- After replaceAttributes -->
<button vue-event="click" vue-event-method="foo">I'm a button<button>

<!-- After rendering -->
<button>I'm a button<button>

Conclusion

And we are finally done, adding methods to vue is really easy but code the vue events can be a headache.

You can see more about code your own vue here

Why this regex it's not working properly? [solved]

Gil Rudolf Härdi — Sun, 29 Aug 2021 01:37:47 +0000

I have a function that filter a food list and returns a fruit list.
The expected result is: ["apple", "banana", "watermelon"] but the next code don't push watermelon in the array.

const foodList = ["apple", "soap", "banana", "watermelon", "pizza"];

function getFruits(foodList) {
  const fruitRGX = /apple|banana|watermelon/g;
  const fruitList = [];

  for (const food of foodList) {
    if (!fruitRGX.test(food)) continue;

    fruitList.push(food);
  }

  return fruitList;
}

const fruits = getFruits(foodList);
const expect = ["apple", "banana", "watermelon"];

console.log({ fruits, expect });
// output:
// {
//  fruits: [ "apple", "banana" ],
//  expect: [ "apple", "banana", "watermelon" ]
// }

If I remove the g flag in the fruitRGX or I move the constant declaration inside the for loop then fruits is equal to expect.

Can someone explain what happening?

Edit

I already get the answer since the first comment, see my reply or Ben Calder's comment if you want see a quick explain about this problem.

Code your own vue: created vs mounted

Gil Rudolf Härdi — Mon, 23 Aug 2021 16:44:33 +0000

In the last post of code your own vue we have seen how to define reactive states and render every time a state is updated.

When I started using vue I was confused about the differences between mounted and created, if you don't know either then it is a good opportunity to show what is the difference between both hooks.

In this post we are going to see:

Vue's lifecycle
Created hook
Mounted hook
Implementation of both methods

Vue's lifecycle

Before explaining the differences between methods, we need to know that each component or vue instance has a lifecycle.

A lifecycle in vue can be defined in different steps that initialize some functionalities, from create to mount and from mount to destroy. In the official vue's documentation we can find the next diagram about the lifecycle.

Lifecycle Hooks

Are methods defined by the coder that are called at certain moment in the lifecycle.

These are the lifecycle hooks:

beforeCreate
created
beforeMount
mounted
beforeUpdated
updated
beforeDestroy
destroyed

Created

In the diagram we can see that the created hook is called after the initialization of reactivity and the render function isn't called yet.

In the constructor I added a comment of where should be called the created method.

class Vue {
  constructor({ el, data }) {
    this.$el = document.querySelector(el);
    this.$data = data;

    // created

    const render = renderVue(this);
    walkDataProps(this, render);
    render();
  }
}

Note: I did some changes since the last post. walkDataProps function define the reactivity of our states in this.$data and this but the implementation is almost the same of defineReactivity function of the last post. You may will see that I can write this.msg instead of this.$data.msg but I still can write the second one.

Under that comment I added this next line:

// created
created?.bind(this)();

The method can be undefined so I'm using optional chaining (?.) to avoid errors, and I uses bind for pass the lost reference of Vue.

But config.created should have access to the states and before to declare the render function. So I called the walkDataProps whitout passing the render function before to the call of config.created, and after the call of that hook I called walkDataProps again but passing render in this time:

walkDataProps(this);

// created
created?.bind(this)();

const render = renderVue(this);
walkDataProps(this, render);
render();

Why created should be called before of the declaration of render?

When you want append a html element through created like:

<div>{{ msg }}</div>

Then the render function should read that new element an replaced it to our defined state:

<div>Hello</div>

In Vue if you append that element after the render using mounted the append element going to not be replaced.

In practical terms that is the main different from created and mounted.

The implementation of renderVue that we have done in the last post read the Vue.$el and do a copy of that element, so when we call renderVue before calling created the appended element is going to not be copied.

Mounted

The mounted hook is called after the first rendering.
In vue you can call this.$mount() to run it when you need, I implemented that method too. This is how looks my constructor after calling all those hooks.

class Vue {
  constructor({ el, data, beforeCreate, created, mounted, methods }) {
    this.$el = document.querySelector(el);
    this.$data = data;

    walkDataProps(this);

    // created
    created?.bind(this)();

    const render = renderVue(this);
    walkDataProps(this, render);
    render();

    // mounted
    if (mounted) {
      this.$mount = mounted;
      this.$mount();
    }
  }
}

As I explained before, appending a element with this hook is going to not be rendered, the renderVue implementation doesn't keep the appended element.

In the original Vue their implementation handle the appended element to keep in the page but will not be replaced to a state in a re-render.

so looks like in vue with the following code:

<body>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<script>
  const vm = new Vue({
    el: "#app",
    data: {
      msg: "Hello",
    },
    created() {
      addElement("app", "created: {{ msg }}");
    },
    mounted() {
      addElement("app", "mounted: {{ msg }}");

      // update a state for re-rendering
      this.msg += " world";
    },
  });

  function addElement(id, text) {
    const el = document.getElementById(id);
    const div = document.createElement("DIV");
    div.innerHTML = text;
    el.appendChild(div);
  }
</script>

Result:

The same code but using our vue:

mounted: {{ msg }} dissapears after the re-render.

Conclusion

Now we know what is the differences of both hooks, vue have more lifecycle hooks that we can see in a future post but I think those hooks are enough for now, and after understanding this article is easy to implement others hooks.

Thats all for this post, have a happy coding.

References

Code your own vue

Gil Rudolf Härdi — Sun, 22 Aug 2021 19:46:28 +0000

Code your own vue is a series of post that is going to show you how create your own vue for learning purposes, the implementation of functionalities try to be most simple as can be.

The ideas of this title are:

Get a better understanding of the main concepts of popular frameworks or libraries like vue, react, angular and so on.
Be a cool coder that has did your own vue... a simple one like a cheap toy, but is your own vue.

Consider that I can be wrong or vue possibly handle some concepts in other ways, you can use the comments section if you think I'm wrong.

What you need to know:

Javascript
DOM
Vue v2

I want to be concise, but also I will add some references links to documentation if I use something that someone who start learning javascript may don't know.

Posts

Code your own vue: rendering and states

Gil Rudolf Härdi — Thu, 19 Aug 2021 14:45:22 +0000

Hi everyone. Almost a year ago I started using vuejs and I like how simple it is to use this framework so I decided to code my own vuejs.

In this post we going to see:

Render
States
Re-render when a state is updated

Setup

The setup is simple to do, just create a new project with a html file and a js file. This is a part of my index.html:

<body>
    <div id="app">
        {{ msg }}
    </div>
</body>

<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "Hello"
        }
    })
</script>

That's enough for now, you can close the file. I coded my vue on the vue.js file, I recommend you do the same.

Mount vue on the html element

Create the Vue class, add the constructor that will receive the config and pass the information to the class. Like this:

class Vue {
  constructor({ el, data }) {
    this.$el = document.querySelector(el);
    this.$data = data;
  }
}

Rendering

Here begins to be interesting.

const regex = {
  // regex to find mostachoes.
  mostach: /\{\{((?:.|\r?\n)+?)\}\}/,
};

function renderVue(vue) {
  const { $data, $el } = vue;
  const { innerHTML } = $el;

  vue.$el.innerHTML = innerHTML.replace(
    // make the regex global
    new RegExp(regex.mostach, "g"),
    // Get the value of the property and replace it.
    (_, val) => $data[val.trim()]
  );
}

This function read the {{ msg }} in the html file inside of the #app element and replace it to the value of data.msg defined in our instance. If you open your html file you should see a Hello instead of {{ msg }}.

Before open the html file don't forget to call the function inside the constructor.

Make data reactive

Now, you may want update the data and show it in the web page, guess what, that going to be our next step.

For that I created those next functions.

function walkDataProps(vue, cb) {
  for (const key in vue.$data) {
    // mix $data to vue and define reactive for those vue props
    defineReactive(vue, key);
    // define reactive for $data props
    defineReactive(vue, key, cb);
  }
}

function defineReactive(obj, key, cb) {
  let value = obj.$data[key];

  Object.defineProperty(cb ? obj.$data : obj, key, {
    configurable: true,
    get() {
      return value;
    },
    set(newValue) {
      if (value === newValue) return;
      value = newValue;

      if (cb) {
        obj[key] = value;
        cb();
      } else {
        obj.$data[key] = value;
      }
    },
  });
}

The defineReactive function change the SET behavior of a specific property in this.$data, if you don't pass a cb function or cb is a falsy value then defineReactive mix that specific property from this.$data to this and is going to change the SET behavior of those new proprerties.
It's important create a copy of the obj's value or you going to fall on a recursion.

The walkDataProps function will pass each property in this.$data to defineReactive. Calling defineProperty twice, one with cb and the other without cb, allow us to read and update a state from this or this.$data and the updated data is syncronized in both ways.

class Vue {
  constructor({ data }) {
    walkDataProps(this, () => console.log("updated"));
  }
}

For test it yourself just update the this.$data.msg or this.msg field after calling the function and take a look to your console, should print updated.

It works! (I hope the same for you), but the page doesn't update to show the new value, this is the last thing that we going to see in this post.

Re-render

We already have a render function, you may figure out how we can render again the html: just passing the renderVue function as callback in walkDataProps instead of the console.log.

Sounds easy but actually is not that easy. Witch moustaches should replace if they're already replaced after the first render? For solve that problem, all what we need to do is save a copy of the original innerHTML you can do it in different ways, I prefer edit the renderVue function and take advantage of closures.

const regex = {
  mostach: /\{\{((?:.|\r?\n)+?)\}\}/,
};

function renderVue(vue) {
  const originalTemplate = vue.$el.cloneNode(true);

  return () => {
    const { $data } = vue;

    vue.$el.innerHTML = originalTemplate.innerHTML.replace(
      new RegExp(regex.mostach, "g"),
      (_, val) => $data[val.trim()]
    );
  };
}

Pass the returned function of renderVue to walkDataProps.

Conclusion

We are done! After that you can update the data and the webpage going to render the new value. Now you have your own Vue, is not much but you can impress your friends with that (if you have).

Oh yes, here is my vue.js file:

class Vue {
  constructor({ el, data }) {
    this.$el = document.querySelector(el);
    this.$data = data;

    const render = renderVue(this);
    walkDataProps(this, render);
    render();
  }
}

const regex = {
  mostach: /\{\{((?:.|\r?\n)+?)\}\}/,
};

function renderVue(vue) {
  const originalTemplate = vue.$el.cloneNode(true);

  return () => {
    const { $data } = vue;

    vue.$el.innerHTML = originalTemplate.innerHTML.replace(
      new RegExp(regex.mostach, "g"),
      (_, val) => $data[val.trim()]
    );
  };
}

function walkDataProps(vue, cb) {
  for (const key in vue.$data) {
    defineReactive(vue, key);
    defineReactive(vue, key, cb);
  }
}

function defineReactive(obj, key, cb) {
  let value = obj.$data[key];

  Object.defineProperty(cb ? obj.$data : obj, key, {
    configurable: true,
    get() {
      return value;
    },
    set(newValue) {
      if (value === newValue) return;
      value = newValue;

      if (cb) {
        obj[key] = value;
        cb();
      } else {
        obj.$data[key] = value;
      }
    },
  });
}

I hope you learned something new. We have some interesting features to discover about this topic.

For now, have a happy coding.

DEV Community: Gil Rudolf Härdi

Code your own vue: methods and events

Implementing methods

Implementing events

Conclusion

Why this regex it's not working properly? [solved]

Edit

Code your own vue: created vs mounted

Vue's lifecycle

Lifecycle Hooks

Created

Why created should be called before of the declaration of render?

Mounted

Conclusion

References

Code your own vue

The ideas of this title are:

What you need to know:

Posts

Links

Code your own vue: rendering and states

In this post we going to see:

Setup

Mount vue on the html element

Rendering

Make data reactive

Re-render

Conclusion

References