DEV Community: KarmaBlackshaw

Implementing Component Auto Import in React.js

KarmaBlackshaw — Mon, 24 Apr 2023 04:01:50 +0000

In this article, we'll explore how to automatically import React components in your codebase, without the need for manual imports in each file. This can save a lot of time and reduce the risk of human error, especially in large projects. We'll be using the Auto Import plugin, which can automatically find and import components based on file patterns

Step 1: Installing Dependencies

First, we need to install the auto-import and fast-glob packages. These packages will allow us to automatically import components into our project.

npm install --save-dev unplugin-auto-import fast-glob

Step 2: Configuring the Auto Import Plugin

To begin with, we need to define the directories where our components are located. In this particular case, the components and layouts directories are used. We also use the omit key to exclude certain strings in our component names.

For instance, consider a component located at src/components/base/button.jsx. We want to name this component BaseButton and not SrcComponentsBaseButton. To achieve this, we use the omit key to remove the ./src/components prefix from the component name.

  const directories = [
    {
      pattern: './src/components/**/*.{tsx,jsx}',
      omit: './src/components'
    },
    {
      pattern: './src/layouts/*.{tsx,jsx}',
      omit: './src/'
    }
  ]

Then we will use fast-glob package to search for files that match the patterns specified in the directories array. The objectMode option is set to true, so that fast-glob will return an array of objects with information about the matched files.

  const entries = fg.sync(
    directories.map(x => x.pattern),
    {
      dot: true,
      objectMode: true
    }
  )

Then we will iterate over the matched files returned by the fast-glob. For each file, it generates an object with the component name and the import path. The component name is generated by removing the omit string from the file path, and converting the remaining path segments to PascalCase. The import path is generated by replacing the ./src string with @ to indicate that the file is part of the project's source code. Finally, the object is returned as part of an array.

const imports = entries.map(entry => {
    const dirOptions = directories.find(dir => minimatch(entry.path, dir.pattern))

    const componentName = entry.path
      .replace(new RegExp(dirOptions.omit, 'gi'), '')
      .split('/')
      .filter(Boolean)
      .map(pascalCaseWithCapitals)
      .join('')

    const fromPath = entry.path
      .replace(/\.\/src/gi, '@')

    return {
      [fromPath]: [
        [removeExtension(entry.name), removeExtension(componentName)]
      ]
    }
  })

Finally, our imports function would look like this:

function getComponentImports() {
  // Define an array of directory objects to search for components
  const directories = [
    {
      pattern: './src/components/**/*.{tsx,jsx}',
      omit: './src/components'
    },
    {
      pattern: './src/layouts/*.{tsx,jsx}',
      omit: './src/'
    }
  ];

  // Search for component files in directories and return their file paths as an array
  const entries = fg.sync(
    directories.map(x => x.pattern),
    {
      dot: true,
      objectMode: true
    }
  );

  // For each component file, extract the component name and fromPath
  const imports = entries.map(entry => {
    // Find the directory object that matches the current file path
    const dirOptions = directories.find(dir => minimatch(entry.path, dir.pattern));

    // Extract the component name from the file path using the directory's omit string
    const componentName = entry.path
      .replace(new RegExp(dirOptions.omit, 'gi'), '')
      .split('/')
      .filter(Boolean)
      .map(pascalCaseWithCapitals)
      .join('');

    // Replace './src' with '@' in the fromPath
    const fromPath = entry.path
      .replace(/\.\/src/gi, '@');

    // Return an object with the fromPath and an array containing the component name and its variable name
    return {
      [fromPath]: [
        [removeExtension(entry.name), removeExtension(componentName)]
      ]
    }
  });

  return imports;
}

Step 3: Using `unplugin-auto-import`

We need to add the plugin to the plugins array in the defineConfig object in vite.config.js. We also need to specify the options for the plugin.

AutoImport({
  // Filepath to generate corresponding .d.ts file.
  // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
  // Set `false` to disable.
  dts: './auto-imports.d.ts',
   // Generate corresponding .eslintrc-auto-import.json file.
  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  eslintrc: {
    enabled: true,
    filepath: './.eslintrc-auto-import.json',
    globalsPropValue: true
  },
  // targets to transform
  include: [
    /\.[tj]sx?$/ // .ts, .tsx, .js, .jsx
  ],
  // global imports to register
  imports: [
    // Get component imports
    ...getComponentImports(),
    // Import React
    'react',
    // Import React Router
    'react-router'
  ]
})

Step 4: We add it to our vite.config.js

export default defineConfig({
  plugins: [
    AutoImport({
      dts: './auto-imports.d.ts',
      defaultExportByFilename: false,
      eslintrc: {
        enabled: true,
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true
      },
      include: [
        /\.[tj]sx?$/ // .ts, .tsx, .js, .jsx
      ],
      dirs: [
        './src/hooks'
      ],
      imports: [
        // Get component imports
        ...getComponentImports(),
        // Import React
        'react',
        // Import React Router
        'react-router'
      ]
    })
  ],

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

Hopefully it makes sense and help you guys. Here's the full code

import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'url'
import react from '@vitejs/plugin-react'
import AutoImport from 'unplugin-auto-import/vite'

import fg from 'fast-glob'
import { minimatch } from 'minimatch'
import path from 'path'

function pascalCaseWithCapitals (str) {
  return str
    .split('/')
    .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
    .join('')
}

function removeExtension (str: string) {
  return path.basename(str, path.extname(str))
}

function getComponentImports () {
  const directories = [
    {
      pattern: './src/components/**/*.{tsx,jsx}',
      omit: './src/components'
    },
    {
      pattern: './src/layouts/*.{tsx,jsx}',
      omit: './src/'
    }
  ]

  const entries = fg.sync(
    directories.map(x => x.pattern),
    {
      dot: true,
      objectMode: true
    }
  )

  return entries.map(entry => {
    const dirOptions = directories.find(dir => minimatch(entry.path, dir.pattern))

    const componentName = entry.path
      .replace(new RegExp(dirOptions.omit, 'gi'), '')
      .split('/')
      .filter(Boolean)
      .map(pascalCaseWithCapitals)
      .join('')

    const fromPath = entry.path
      .replace(/\.\/src/gi, '@')

    return {
      [fromPath]: [
        [removeExtension(entry.name), removeExtension(componentName)]
      ]
    }
  })
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    AutoImport({
      dts: './auto-imports.d.ts',
      defaultExportByFilename: false,
      eslintrc: {
        enabled: true,
        filepath: './.eslintrc-auto-import.json',
        globalsPropValue: true
      },
      include: [
        /\.[tj]sx?$/ // .ts, .tsx, .js, .jsx
      ],
      dirs: [
        './src/hooks'
      ],
      imports: [
        // @ts-ignore
        ...getComponentImports(),
        // @ts-ignore
        'react',
        // @ts-ignore
        'react-router'
      ]
    })
  ],

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Creating a dropdown menu using Vue3 and PopperJS

KarmaBlackshaw — Thu, 08 Sep 2022 15:06:08 +0000

Been struggling for a while of creating a dropdown menu which auto adjusts when the element goes beyond the document's bounds.

Libraries used:

<script setup>
import { createPopper } from '@popperjs/core'

const popperInstance = ref(null)
const popcorn = ref(null)
const tooltip = ref(null)

onMounted(() => {
  useEventListener(popcorn.value, 'click', show)

  onClickOutside(popcorn.value, hide)

  popperInstance.value = createPopper(popcorn.value, tooltip.value, {
    placement: 'right-start',
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 8]
        }
      }
    ]
  })
})

function show () {
  tooltip.value.setAttribute('data-show', '')
  popperInstance.value.update()
}

function hide () {
  tooltip.value.removeAttribute('data-show')
}

</script>

<template>
  <div>
    <div
      ref="tooltip"
      class="
        tooltip
        bg-neutral-900
        rounded
        p-2
        text-white
        text-xs
        w-[100px]
      "
    >
      <div
        class="arrow"
        data-popper-arrow
      ></div>

      <ul>
        <li
          v-for="i in 5"
          :key="i"
          class="
            px-2 py-2
            bg-neutral-900 hover:bg-neutral-800
            rounded
          "
        >
          Hey
        </li>
      </ul>
    </div>

    <button
      ref="popcorn"
      class="
        popcorn
        bg-blue-500
        text-white
        px-3 py-2
        rounded
      "
    >
      Add
    </button>
  </div>
</template>

<style lang="scss" scoped>
.tooltip {
  display: none;
}

.tooltip[data-show] {
  display: block;
}

.arrow,
.arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.arrow {
  visibility: hidden;
}

.arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

.tooltip[data-popper-placement^='top'] > .arrow {
  bottom: -4px;
}

.tooltip[data-popper-placement^='bottom'] > .arrow {
  top: -4px;
}

.tooltip[data-popper-placement^='left'] > .arrow {
  right: -4px;
}

.tooltip[data-popper-placement^='right'] > .arrow {
  left: -4px;
}
</style>

Free Resources for Devs

KarmaBlackshaw — Mon, 13 Jun 2022 05:54:39 +0000

Here are some of my most amazing dev resources.

I frequently use these resources for a design inspirations for my apps.

Free for Dev
Dev Resource

Do you know some other resources like this? Post it in the comment so others can know as well 😀

How do you register your Vuex Modules?

KarmaBlackshaw — Mon, 06 Jun 2022 08:53:22 +0000

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

You can register modules in your Vuex store as follows:

import Vue from 'vue'
import Vuex from 'vuex'

// modules
import users from './users'
import posts from './posts'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    users,
    posts
  }
})

This structure is good for smaller projects, but what if you have lots of modules? Large applications can have equally large number of modules. As you can imagine, the file will eventually get bloated.

What I usually do in my projects is create an auto import for my modules which then makes creating and using the modules in your app, a walk in the beach.

Your modules directory might look like this:

Now for the exciting part, how do you actually register all of this like a walk in the beach? Here's what I do:

// modules.js
import _kebabCase from 'lodash/kebabCase'

const files = require.context(
  // the directory of your modules
  './modules', 
  // whether to look deep into each folder or not
  false, 
  // regexp to know which files to look for
  /\.js$/
)

const modules = {}

files.keys().forEach(fileName => {
  // I decided all of my modules should be kebab, but you can change it if you want.
  const moduleName = _kebabCase(fileName.replace(/(\.\/|\.js)/g, ''))
  modules[moduleName] = files(fileName).default
})

export default modules

And in your store, import the modules.js:

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  modules
})

And voila! You can now use your modules in the app without even manually importing them in your vuex store.

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('auth', {
      authUser: 'authUser'
    })
  }
}

How do you structure your NodeJS application?

KarmaBlackshaw — Mon, 06 Jun 2022 08:29:15 +0000

How do you structure your node application?

You can check how I do mine at Github. It includes:

🚀 Auto import routes
📂 Commands to generate routes, handlers, etc.
✅ Validate env on boot
🚦 Socket IO
⚡ Redis
⭐ Mysql
📃 Logs
⛏ Utilities

Let's share ideas :)

Helpful Css Helpers

KarmaBlackshaw — Mon, 23 May 2022 15:28:06 +0000

Here's a list of what I usually use when developing a website. Hope it helps 🎉

Have you built your Github portolio?

KarmaBlackshaw — Fri, 06 May 2022 09:36:21 +0000

I just updated my Github portfolio and got really happy. Guess my happiness level is very shallow 😂

You can check my portfolio here

You should build your portfolio as well. Here's a list of resources I used in building mine:

Do you have any other resources used when you built yours? Comment it down below 😀

Have you tried piping in Javascript?

KarmaBlackshaw — Mon, 02 May 2022 08:09:01 +0000

Have you ever caught yourself doing something like this?

Problem: To get the class where all students' name contains the letter 'J':

const studentsByClass = {
  class_1: ['john', 'mark', 'josh'],
  class_2: ['jeash', 'jack', 'jean']
}

const result = Object.fromEntries(Object.entries(studentsByClass)
  .filter(([className, students]) => {
    return students.every(studentName => studentName.includes('j'))
  }))

It's pretty long right? Pretty hard to read as well.

Recently, I've found a way to make this readable. I've found this article from freecodecamp.org about pipe function.

It goes like this:

const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);

const toEntries = val => Object.entries(val)

const filterClass = entries => {
  return entries.filter(([className, students]) => {
    return students.every(studentName => studentName.includes('j'))
  })
}

const fromEntries = entries => Object.fromEntries(val)

pipe(
  toEntries,
  filterClass,
  fromEntries,
)(studentsByClass);

This has really helped me with the long lines of code. But I am not yet comfortable with the functional javascript. So I made my own version:

const pipe = (initial, fns) => fns.reduce((v, f) => f(v), initial)

How to use it:

const pipe = (initial, fns) => fns.reduce((v, f) => f(v), initial)

const toEntries = val => Object.entries(val)

const filterClass = entries => {
  return entries.filter(([className, students]) => {
    return students.every(studentName => studentName.includes('j'))
  })
}

const fromEntries = entries => Object.fromEntries(val)

pipe(studentsByClass, [
  toEntries,
  filterClass,
  fromEntries,
]);

But, I usually do it like this to avoid cluttered codebase.

const pipe = (initial, fns) => fns.reduce((v, f) => f(v), initial)

const filterClass = entries => {
  return entries.filter(([className, students]) => {
    return students.every(studentName => studentName.includes('j'))
  })
}

pipe(studentsByClass, [
  val => Object.entries(val),
  val => filterClass(val),
  val => Object.fromEntries(val)
]);

Sources/Reads
freecodecamp
github

CSS Glass Effect

KarmaBlackshaw — Thu, 21 Apr 2022 06:10:02 +0000

I always find it difficult to make a glass effect until I found this treasure.

Check it out at: https://css.glass

Get input element value as number

KarmaBlackshaw — Tue, 12 Apr 2022 08:31:24 +0000

For the following input element:

<input type="number" id="input">

Instead of:

document.getElementById('inpupt').value 
// '12'

You can do:

document.getElementById('inpupt').valueAsNumber 
// 12

You can read more here

Multiple approaches of storing data using NodeJS and KnexJS

KarmaBlackshaw — Thu, 07 Apr 2022 15:01:19 +0000

The Best Approach for Storing Data in a Database

When it comes to storing data in a database, there are different approaches you can take. In this article, we'll explore several of these approaches and highlight the pros and cons of each one.

Approach 1

The first approach involves defining each column in the insert statement. Here's an example of what this approach might look like in code:

async function storeUser({ firstName, lastName }) {
  try {
    const [id] = await knex('users')
      .insert({
        first_name: firstName,
        last_name: lastName
      });

    return id;
  } catch (error) {
    throw error;
  }
}

While this approach works fine when you're dealing with a small number of columns, it quickly becomes unwieldy when the number of columns grows.

Approach 2

The second approach involves passing in the entire payload as an object. Here's an example:

Copy code
async function storeUser(payload) {
  try {
    const [id] = await knex('users')
      .insert(payload);

    return id;
  } catch (error) {
    throw error;
  }
}

This approach is more versatile, since it can handle any number of columns. However, it's also more vulnerable to errors, since any extra or misspelled columns in the payload will cause an error.

Approach 3

The third approach is similar to the second one, but with an added twist. Instead of passing in the entire payload, you only pass in the fields that you want to store, and the function filters out any extraneous columns. Here's an example:

const _pickBy = require('lodash/pickBy');

async function storeUser(payload) {
  const fillables = ['first_name', 'last_name'];

  try {
    const [id] = await knex('users')
      .insert(_pickBy(payload, (val, key) => fillables.includes(key)));

    return id;
  } catch (error) {
    throw error;
  }
}

This approach is less error-prone than the second one, since it filters out any unregistered properties. However, it only accepts an object, which can be limiting.

The Best Approach

So, which approach is the best? After considering the pros and cons of each one, we recommend a fourth approach:

const _castArray = require('lodash/castArray');
const _pickBy = require('lodash/pickBy');
const _isNil = require('lodash/isNil');

async function storeUser(payload) {
  const fillables = new Set(['first_name', 'last_name']);

  try {
    const data = _castArray(payload)
      .map(row => _pickBy(row, (val, key) => ! _isNil(val) && fillables.has(key)));

    const [id] = await knex('users').insert(data);

    return id;
  } catch (error) {
    throw error;
  }
}

This approach takes advantage of ES6's Set to ensure faster lookups. It can accept both an object and an array, and it omits any unregistered properties in the payload. It also uses several helpful functions from the Lodash library.

I developed my first portfolio

KarmaBlackshaw — Sat, 22 Jan 2022 14:49:20 +0000

I developed my first portfolio!

After spending a couple of days gathering ideas of how it should look and what content to put, I finally took the step into developing my first portfolio.

It took me a bit long to develop the app because of my job which normally lasts 12-14 hours a day 😪 Tiring, right?

A week later, I finally created my very first portfolio and deployed it in Netlify: https://jeash.netlify.app.

Happily, I then introduced this to my friends and asked for feedbacks. Most were good, but some recommended that I buy my own domain because any domain with .netify.app would not look so professional especially if it's your portfolio which represents your profession.

Not long after, I purchased a domain: https://jeash.tech