DEV Community: nickap

Use Vue Exit Intent | A Vue Composable to power your exit intent content

nickap — Wed, 19 Apr 2023 08:30:20 +0000

A composable to show your modal when a user is about to leave the page or another threshold reached.

This is an old package, that I just refactored and published on NPM.

Be sure to use the latest release.

It's a composable that allows you to easily implement an exit intent strategy in your Vue application.
See the GitHub repo, and feel free to contribute.

You can install the package via NPM:

npm i vue-exit-intent

Then import the composable and use it in your app:

<sript setup lang="ts">
import { useVueExitIntent } from 'vue-exit-intent'

const { isShowing, close } = useVueExitIntent();
</script>

<template>
  <yourModalPopUp v-if="isShowing" @close="close"></yourModalPopUp>
</template>

You can use more helpers and options like this:

const options = {
  repeatAfterDays: 1,
  scrollPercentageToTrigger: 50,
  handleScrollBars: true,
  LSItemKey: 'exit-intent-local-storage-key',
  setupBeforeMount: true
};

const {
  isShowing,
  isAllowedToGetTriggered,
  isUnsubscribed,
  close,
  resetState,
  unsubscribe
} = useVueExitIntent(options);

The package comes with a variety of options that allow you to customize the behavior of your exit intent popup. You can find the full list of options in the documentation.

I hope you find it useful.
Let me know if you have any questions or feedback!

Minimum Window Substring | JavaScript

nickap — Wed, 12 Apr 2023 11:48:55 +0000

Minimum Window Substring

This is another approach and a faster solution from my previous one Sliding Window using hashmaps.

You don't know what this problem is about?
See here the problem description, and try to solve it before reading this solution.

Solution

We will use the Sliding Window method

We will have an array of 58 Zeros holding the ASCII code for every letter from A to z.
We have 52 letters in total but need 6 more "useless" zeros because there is a distance of 6 in between the ascii codes of 'Z' and 'a' (No need to make it more complex).
In the beginning, neededCharsArray holds the total number of our chars in string t. So for t='ABByzzzzz' neededCharsArray will be like: [1,2,0,0,0...,0,0,0,1,5]

Similar to my first solution on leetcode, we will have two pointers, left and right, which will point to the edges of our sliding window.

For every char in s we will check if neededCharsArray holds a value greater than zero. This means it's a wanted char, and because we found one we will reduce missingChars by one.

Bear in mind that:

For every char of s we decrease it's corresponding value in neededCharsArray by one.

So, while having the index of this char to our right index, we keep moving our left index to the right and closer to the right index, narrowing our window (trying to find a better alternative).

Bear in mind that:

While we're sliding our left index we increase it's corresponding value in neededCharsArray by one.

Not bored yet?

Having those bears in mind, we know that every char of s that is of no interest will result in a value <=0 in our neededCharsArray. But every char of s that is wanted and exists in t, will result in a value >=0 in our neededCharsArray.

We will get into our while statement when missingChars is equal to zero. This means that the corresponding values of our wanted chars in neededCharsArray will be zero. All of them! There might be some other negative values for unwanted chars that exist in s and not in t. Other zeros may appear too (for chars that don't exist in s and t).

In our while statement we increase our left index. So in the next iteration, if the left index points to a wanted char, we will have a positive value in our neededCharsArray, this will break our while loop ( because the 2nd if statement increases missingChars) and will go out to our for loop, increasing our right index, checking the next one, searching for our missing char. Until we reach the last one.

Complexity

Time complexity:
O(n)

Space complexity:
O(1)

Code

/**
 * @param {string} s
 * @param {string} t
 * @return {string}
 */
const minWindow = (s, t) => {
  if (!s.length || !t.length || s.length < t.length) return "";
  if (s === t) return s;

  // 26 zeros for A-Z, 26 for a-z, and 6 for the diff from 'Z' (090) to 'a' (097)
  let neededCharsArray = new Array(58).fill(0);
  let firstCharCode = "A".charCodeAt(0); // A - A = 0; A - z = 57

  for (let c of t) {
    neededCharsArray[c.charCodeAt(0) - firstCharCode]++;
  }

  let missingChars = t.length;
  let result = [-Infinity, Infinity];
  let left = 0;

  for (let right = 0; right < s.length; right++) {
    if (neededCharsArray[s.charCodeAt(right) - firstCharCode] > 0) {
      missingChars--;
    }
    neededCharsArray[s.charCodeAt(right) - firstCharCode]--;
    while (missingChars === 0) {
      if (result[1] - result[0] > right - left) {
        result[0] = left;
        result[1] = right;
      }
      neededCharsArray[s.charCodeAt(left) - firstCharCode]++;
      if (neededCharsArray[s.charCodeAt(left) - firstCharCode] > 0) {
        missingChars++;
      }
      left++;
    }
  }

  return result[1] !== Infinity ? s.slice(result[0], result[1] + 1) : "";
};

The Revealing Module Pattern | Javascript

nickap — Tue, 11 Apr 2023 08:24:40 +0000

One of the biggest challenges of every developer is to maintain code organization.
There is a plethora of the so called "best practices" someone can follow to result in better code.

The revealing module pattern is one of those practices someone can use to achieve better code organization. And it's a pattern that modern features of frontend frameworks are based on. Like React Hooks and Vue Composables.

The Revealing Module Pattern in Javascript

What is the Revealing Module Pattern?

In JavaScript, there are no private and public specifiers.
But as you may know, you can achieve the private effect with closures.

Nice opportunity to remember closures!

A simple example: Let's say we have a function funcInner encapsulated inside another function funcOuter alongside some more variables and even methods. Then, if we return only the funcInner, we eventually have private staff declared inside the funcOuter that only live in the scope of this method.

When funcOuter is executed, it creates a new scope for itself. This scope contains its variables, parameters, and inner functions. When funcInner is defined, it has access to all the variables and parameters in the scope of funcOuter, including those that are not passed as arguments to funcInner.

Code Example:

function funcOuter() {
  const outerVariable = "I am outer!";
  const thisIsInsideFuncOuterScope = "Can't access from outside"

  function funcInner() {
    const innerVariable = "I am inner!";
    console.log(outerVariable);
    console.log(innerVariable);
  }

  return funcInner;
}

const func = funcOuter();
func(); 
// prints "I am outer!" and "I am inner!"
// We don't have access on `thisIsInsideFuncOuterScope`
// We could also run `funcOutter()()` to immediately run the returned function

The next step:

Using closures, we can actually create modules with private and public methods and variables.
This is what we do in the revealing module pattern.
We use closures to create methods and variables that are hidden from the outside world. All these exist inside a function and we only return an object that contains only what we want to expose.

This pattern allows us to encapsulate functionality and create modular, reusable code.

Let's see it in action

const myModule = () => {
  const privateVar = "Hello outer world";

  function privateFunction() {
    console.log(privateVar);
  }

  function publicFunction() {
    privateFunction();
  }

  return {
    publicFunction: publicFunction,
  };
};

const { publicFunction } = myModule(); 
publicFunction() // Outputs "Hello outer world"

The publicFunction is returned as an object from the closure and can be accessed outside the closure.

...A real life example

You can see here how I return only the methods that are responsible only to add and remove the event listeners.

export function touchDeviceHandler(options, callback){
  // Private Variables
  let startY = 0;
  let scrolling = false;

  //Private Methods
  const onTouchStart = (event: TouchEvent) => {
    console.log("onTouchMove");
  };

  const onTouchMove = (event: TouchEvent) => {
    console.log("onTouchMove");
  };

  const onTouchEnd = () => {
    scrolling = false;
  };

  // We will expose this
  const addTouchListeners = () => {
    document.addEventListener('touchstart', onTouchStart);
    document.addEventListener('touchmove', onTouchMove);
    document.addEventListener('touchend', onTouchEnd);
  };

  // We will expose this too
  const removeTouchDeviceListeners = () => {
    document.removeEventListener('touchstart', onTouchStart);
    document.removeEventListener('touchmove', onTouchMove);
    document.removeEventListener('touchend', onTouchEnd);
  };
/* Returned Object, containing only what we want to expose */
  return {
    addTouchListeners,
    removeTouchDeviceListeners
  };
}

And here you can see how we use touchDeviceHandler.

I just destructure the returned object

const { addTouchListeners, removeTouchDeviceListeners } = touchDeviceHandler(
    options,
    fire
  );

And eventually, lower in the code, it's so clean and easy for someone to understand what I am actually doing when calling

removeTouchDeviceListeners();

In case you are interested, here is the repo

Eventually

Using the revealing module pattern, the code is so clean and modular that I can even expose addTouchEventListeners(); and removeTouchDeviceListeners(); from the composable. That way, the user of the composable could act on his own style, adding and removing the listeners at his convinience.

Finally

Advantages of the Revealing Module Pattern

Encapsulation.
Preventing Variable Name Collisions.
Modularity.

Thank you for reading up to this line!

Issue using useForm() with a Modal | Vue 3 | Vee Validate 4

nickap — Tue, 29 Nov 2022 19:49:30 +0000

Ever used vee-validate? It is a nice form validation library and now with the help of composition API got even stronger.

Purpose of this article

Using useForm() to initialize a form that exist in a modal, the validation will run on initialization.
Thus, your form will be invalid since your fields are not existing (modal is closed). So, when you open the modal, you will get back your errors attached in your form.

A possible solution

If you faced this problem, you might think of using Form Component to register your form instead of useForm() (Composition API).
But this is a kinda cheap solution.
By not using composition API, you don't make use of the full potential of this library.

So, the best solution

Is to reset the form when the modal gets opened.

Let's see it in action

We will create a custom input element that we aim to use throughout our application.
Notice the 'undefined' we pass in useField() instead of our validation rules. This is because we want to validate at form-level and not at field-level.

The classes used are from the tailwind library, and you can have a better look in this example repo

<template>
  <div class="w-full">
    <label class="label" :for="$attrs.id">{{ label }}</label>
    <input v-model="value" class="input" v-bind="$attrs">
    <div class="mt-1 text-xs text-red-500">
      <span class="text-transparent">.</span>
      <span>
        {{ errorMessage }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { toRef } from 'vue';
import { useField } from 'vee-validate';
const props = defineProps({
  name: { type: String, required: true },
  label: {
    type: String,
    required: true
  },
  // whenever we use v-model, modelValue prop passed to the child
  // https://v3-migration.vuejs.org/breaking-changes/v-model.html#_3-x-syntax
  modelValue: [String, Number]
});
// Need 'toRef' to achieve reactivity with vee-validate
const name = toRef(props, 'name');
const modelValue = toRef(props, 'modelValue');
// undefined for rules because we validate on Form-Level
const { value, errorMessage } = useField(name, undefined, {
  initialValue: modelValue
});
</script>

<style></style>

We will use the described input component in our modal here:

<template>
  <div v-if="open">
    <!-- Form -->
    <form class="mt-5" @submit="submitFotm">
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div class="col-span-full">
          <FormInput
            id="name"
            v-model="author.name"
            name="name"
            type="text"
            label="Name"
            placeholder="Author's Name"
          />
        </div>
      </div>
      <!-- Form buttons -->
      <div class="flex items-center justify-end space-x-3 mt-7">
        <button type="button" class="px-4 text-sm bg-gray-100 py-2.5 rounded-md" @click="closeModal()">
          Cancel
        </button>
        <button type="submit" class="btn submit" :disabled="!meta.dirty">
          {{ author._id ? "Update" : "Create" }}
        </button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { useForm } from 'vee-validate';
const schema = {
  name: 'required|min:3'
};

// Get function used to handle form submission and set validation schema
const { handleSubmit, meta, resetForm } = useForm({
  validationSchema: schema
});

const onInvalidSubmit = () => {
  // Form is invalid
  // U can shake the submit button and inform the user in your way
};

const submitFotm = handleSubmit((values) => {
  // Handle submision and close the modal.
  // Also, pass onInvalidSubmit() as a  callback function.
  console.log(values);
  closeModal();
}, onInvalidSubmit);

const open = ref(false);
const openModal = () => {
  // The Form will get registerd and validated on setup function.
  // So it will be invalid before we open the modal.
  // We have to reset it here.
  resetForm();
  open.value = true;
};

const closeModal = () => {
  open.value = false;
};

// We are exposing openModal() and closeModal()
// So we can handle the visibility on the parrent component
defineExpose({
  openModal,
  closeModal
});
</script>

<style></style>

So, we got access to the resetForm() helper and used it to reset the form when we show the modal.

You can have a better look in this minimal nuxt repo.

Hope you find this info helpful.

Thanks for reading this!

Vue Exit Intent & How to Publish on NPM | Vue

nickap — Fri, 11 Nov 2022 20:04:42 +0000

update:
The package is refactored, and it's now a composable instead of a component.
This guide is about the old "component version"
You can check the composable here

Vue Exit Intent

Let's create an exit intent component, and then, see how we can publish it to NPM.

We will:

Make use of the new <script setup> API to build our component.
Publish on NPM.
Check our package with NPM LINK

Visit the repo here.
Component file here.

First...

...Let's create our new project

npm init vue@latest
This command will install and execute create-vue
The recommended way to start a Vite-powered Vue project.

Let's name our project vue-exit-intent and select default answers (Answer No) to anything else, so we can focus on our component.
If you wish to work on this component even further you can make your choises or at least accept Prettier and ESLint as they are two necessary tools.

So you will end up with something like this:

✔ Project name: … vue-exit-intent
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes

Now,
cd vue-exit-intent to your project directory, and run:
npm install to install all the dependencies according to package.json, and then run:
npm run dev.
A simple Vue app will be exposed in your localhost. Follow the link to see it.

Now, let's create a new component with the name 'vueExitIntent.vue' under the /src/components directory.

Delete the components that are selected in the picture.
No need to have them in our app.

Let's edit our vueExitIntent.vue component to this:

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

/**
 * This is exposed to our template cause we use <script setup/>.
 * So, we can use the value of this reference in our template.
 */
const show = ref(false);

onMounted(() => {
  /**
   * onMounted we attach a mouseleave Event Listener to the documentElement
   * */
  document.documentElement.addEventListener('mouseleave', handleMouseLeave);
});

onUnmounted(() => {
  /**
   * onUnmounted this hook will run as a callback.
   * It's the perfect time to remove our Event Listener.
   */
  document.documentElement.removeEventListener('mouseleave', handleMouseLeave);
});

const handleMouseLeave = () => {
  showModal();
};

/**
 * Remember? closeModal() is available to our template.
 * No need to export it like in the first version of Composition API because of <script setup>
 * */
const closeModal = () => {
  show.value = false;
  document.body.style.overflowY = 'auto';
};

const showModal = () => {
  show.value = true;
  document.body.style.overflowY = 'hidden';
};
</script>

<template>
  <div class="exit-intent-backdrop" v-show="show">
    <div class="exit-intent-content">
      <!-- Show an X button to close the Pop-up  -->
      <button
        type="button"
        class="btn-close"
        aria-label="Close"
        @click="closeModal()"
      >
        &#x2715;
      </button>
      <!-- We use slots to show the content of the Pop-up -->
      <slot>
        <!-- For the needs of this tutorial.. -->
        <!-- Let's create a fallback content -->
        <div class="fallback-content">
          <h2 class="fallback-content-header">
            Subscribe and get a 10% discount!
          </h2>
        </div>
      </slot>
    </div>
  </div>
</template>

<style scoped>
.exit-intent-backdrop {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
}
.exit-intent-content {
  position: relative;
  margin: auto;
  color: #555;
  background-color: #fefefe;
}

.btn-close {
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  font-size: 20px;
  padding: 4px;
  cursor: pointer;
  font-weight: bold;
  color: #555;
  background-color: transparent;
  z-index: 999;
}

.fallback-content {
  background-color: #fefefe;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  margin: 0px;
}

.fallback-content-header {
  margin: 0;
  padding: 25px 10px;
  text-align: center;
  border-bottom: 1px solid #eee;
  color: #555;
}
</style>

Now we also have to change the code in our src/App.vue file.
Remove the unneeded code (components we deleted in the previous step), and use our newly created component.
So you will end up to something like this:

<template>
  <vue-exit-intent></vue-exit-intent>
</template>

<script setup>
import vueExitIntent from "./components/vueExitIntent.vue";
</script>

So simple with <script setup>.

Done! We have the basic functionality of an Exit Intent Pop-up.
You can add your content or another child component in between the opening and closing tags, this way you will make use of slots, and you will not get the fallback content
<vue-exit-intent>Your Content Here</vue-exit-intent>
or even better
<vue-exit-intent><create-and-add-a-new-component-here/></vue-exit-intent>

Take it to another level

Of course, showing the pop-up continuously in every mouseleave Event is at least annoying.

So, how to make it even better.

We can think of using LocalStorage to add a key when the popup is showed, and check if that key exists next time the user will visit your page.
Add a timestamp as the value of the LS key, so you can check next time and show the popup if more than 7-days passed from last time.
Add a Scroll Event Listener and show the popup if the user scrolled to let's say 40% of the page-height.

I actually added this functionality in my file, and you can grab it from here

Feel free to fork and contribute repo.

Package and Publish on NPM

We are going to build this component library so to be used as a global component.

To create our Vue 3 plugin, we need to create a new src/index.js file:

import vueExitIntent from './components/vueExitIntent.vue';

export default {
   /**
   * We need an install step
   */
  install: (app, options) => {
    /**
     * 1st argument is the name of our component.
     * 2nd argument is our actuall component we imported at the top of the file.
     */
    app.component('vueExitIntent', vueExitIntent);
  }
};

And also, we have to make some changes on vite's configuration file. Let's define what we want to happen when vite builds:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

/* https://vitejs.dev/config/ */
export default defineConfig({
  /* Define a build Property */
  build: {
    /* We want to create a library */
    lib: {
      /**
       * 1st argument is our directory name.
       * 2nd is the file we defined the install
       * */
      entry: resolve(__dirname, 'src/index.js'),
      /* Name of our library */
      name: 'vue-exit-intent',
      /**
       * 'format' will be 'es' and 'umd'.
       * So, we will create 2 files for the user to use either with 'import' (ES Modules) or 'require' (CommonJS Format)
       */
      fileName: (format) => `vue-exit-intent.${format}.js`
    },
    /* Options for Rollup*/
    rollupOptions: {
      /* Externalize vue so its won't get bundled in our library */
      external: ['vue'],
      output: {
        globals: {
          /* Global variable to use in our .umd build */
          vue: 'Vue'
        }
      }
    }
  },
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

Finally, let's add some configuration to our package.json:

Key 'files' shows where vite will export our bundled files.
'main' is for the .umd export we just configured in vite.
'module' is for the .es export.
In key 'exports' we define the entrypoints for our app.
'import' and 'require' will resolve to the path in the right.

  "files": [
    "dist"
  ],
  "main": "./dist/vue-exit-intent.umd.js",
  "module": "./dist/vue-exit-intent.es.js",
  "exports": {
    ".": {
      "import": "./dist/vue-exit-intent.es.js",
      "require": "./dist/vue-exit-intent.umd.js"
    },
    "./dist/style.css": "./dist/style.css"
  },

All done!
Run npm run build and you will have a new /dist directory with the files that vite built.
These are the files we will share through NPM.

If you are sure you have tested your app, you can login to npm running
npm login
and after you login run:
npm publish to publish your app.

and... voila our package is published

NPM LINK

I couldn't resist to not mention npm link

It is a very handy tool that creates a symlink to your global folder /lib/node_modules/ that links to the package that the npm link command executed.
You can try and run npm link while you are in your vue-exit-intent project.
Now, you can go and create a different project PROJECT2 and run npm link vue-exit-intent

Remember to unlink when you are done!

Now you will have your package vue-exit-intent installed in PROJECT2, and you can test it before publishing.
Remember that, to use your component, you need to import it in PROJECT2 main.js like this:

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/main.css";


import vueExitIntent from "vue-exit-intent";
import 'vue-exit-intent/dist/style.css';


const app = createApp(App);

app.use(vueExitIntent);

app.mount("#app");

Thanks for reading this!