DEV Community: Óscar Pérez

Typescript + Vue linter config step by step

Óscar Pérez — Thu, 17 Aug 2023 13:58:29 +0000

INTRODUCTION

Configuring a linter with TypeScript might seem daunting if you're unsure where to begin. Fortunately, here's an easy and straightforward method to set up TypeScript for your Vue application.

In this guide, I'll be using Eslint along with Standard and Prettier. I believe these tools offer a simpler way to kickstart your work without spending excessive time on manual configurations.

GET'S START

First of all, we'll need install eslint:

npx eslint --init

This command will be asking you a bunch of things, just follow the installation selecting your preferences.

In my case, I'd like to use Standard and Typescript.

Secondly, we need to install prettier:

npm i prettier -D

With this tools installed we need to configure a bit some files.

CONFIG FILES

The first file to configure will be ".prettierrc" following this:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "semi": true,
  "comma-dangle": ["error", "never"]
}

These are my prettier preferences, but they can be whatever you think works fine with your workflow.

Finally the ".eslintrc.json" file:

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "standard-with-typescript",
        "plugin:vue/vue3-essential"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": ["./tsconfig.json"],
        "tsconfigRootDir": "./",
        "extraFileExtensions": [".vue"],
        "parser": "@typescript-eslint/parser"
    },

    "plugins": [
        "vue"
    ],
    "rules": {
        "@typescript-eslint/member-delimiter-style": 0,
        "@typescript-eslint/semi": 0,
        "vue/multi-word-component-names": "off",
        "@typescript-eslint/strict-boolean-expressions": 0,
        "@typescript-eslint/no-invalid-void-type": 0
    }
}

This is pre-configured by you once Eslint is installed, but probably you will need to add some configurations, such as the "rules", "parserOptions" and "extends".

FINAL STEP

Once we already have everything configured, our last step will be create an script to re-format all our code in a simple way. This is my favourite easy script:

"format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx}\""

This way only running this script all your code will be pretty formated :)

ENJOY

Well, this is my personal Eslint and prettier configuration, I know it can be improved a lot, so just share your feedback on comments. I'm more than happy to learn better ways to configure a project with Typescript and a proper formatter tool.

Intersection observer api & lazy loading in REACT

Óscar Pérez — Sat, 05 Aug 2023 07:35:03 +0000

INTRODUCTION

Let's embark on an exciting journey to control how our app behaves as the user scrolls and ensure our components only render when they are in the user's view. And to top it off, we want to achieve this in a lazy loading fashion!

Introducing the Lazy Component Wrapper - a simple guide to achieving this seamlessly. Let's dive in and experience the magic of lazy rendering!

LAZY COMPONENT WRAPPER

This component will render the children component only when it becomes visible to the user. By using the Intersection Observer API:

function LazyComponentWrapper({ children, className, id }: LazyComponentWrapperProps) {
    const [isVisible, setIsVisible] = useState(false);
    const componentRef = useRef<HTMLElement | null>(null);

    useEffect(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        setIsVisible(true);
                        observer.unobserve(entry.target);
                    }
                });
            },
            { threshold: 0.5 } as IntersectionObserverInit
        );

        if (componentRef.current) {
            observer.observe(componentRef.current!);
        }

        return () => {
            if (componentRef.current) {
                observer.unobserve(componentRef.current!);
            }
        };
    }, []);

    return (
        <section
            ref={componentRef}
            className={`${className} ${isVisible ? styles.visible : styles.notVisible}`}
            id={id}>
            {isVisible && children}
        </section>
    );
}

Not only does this component enable lazy rendering, but it also allows us to add captivating animations and styles to animate the components as they appear on the user's screen. And to achieve this enchanting effect, we'll make use of CSS modules!.

.visible {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease-in-out;
}

.notVisible {
    opacity: 0;
    transform: translateY(80px);
}

LAZY IMPORTS AND SUSPENSE

Finally, let's import our components and wrap them with our magnificent LazyComponentWrapper:✨

const Component = lazy(() => import("../../Component.tsx"));

<LazyComponentWrapper>
   <Suspense fallback={<div>Loading...</div>}>
      <Component />
   </Suspense>
</LazyComponentWrapper>

Now, your component will render only when the user needs it, thanks to the use of lazy loading and the Intersection Observer API.

Additionally, adding specific styles with CSS modules adds an extra touch of charm to the user experience.

Happy coding! ✨🚀

@oscarprdev

Frontend state management with clean architecture

Óscar Pérez — Sat, 05 Aug 2023 07:15:26 +0000

## INTRODUCTION

One of the most critical aspects of developing a client-side application is how we handle global state management.

Many developers spend hours and hours searching for the perfect tool: Redux, Akita, Pinia, Ngrx, Context, Vuex... But the truth is, if we aim for code that is agnostic and truly maintainable over time, we cannot simply delegate the core piece of our applications to external libraries or tools whose future maintenance is uncertain.

That's where clean architecture comes to the rescue, advising us to separate the domain or core components of our application from those parts that are likely to change over time. In other words, tools and frameworks should never directly manage any piece of the global state of our application.

So, I've taken the initiative to create this post and share my step-by-step solution on how to handle global domain state in a client-side application using Typescript and Object-Oriented Programming (OOP).

Let's begin! 🚀

REACTIVITY

When it comes to managing global state, we need it to be reactive to any changes that occur within it. Therefore, if we are going to build a global state handler, reactivity should be our top priority.

Let's create an abstract class that will solely take care of managing the global state with reactivity:

export abstract class UseCase<S> {
    public state: S;
    private listeners: Subscription<S>[] = [];
}

We will name the class UseCase, and it will have two properties: state and listeners.

state will be responsible for holding the global state, while listeners will handle reactivity.

Our class will include a constructor that receives the state of the feature extending the use case:

    constructor(initialState: S) {
        this.state = initialState;
    }

Methods:

The first method of this class will be the one that allows us to execute any use case:

abstract execute(value?: any): void

Absolutely right! The first method should be abstract so that the extending class can handle any logic, such as calling an API to fetch information.

On the other hand, we also need a method to retrieve the state when required:

    getState(): S {
        return this.state;
    }

Exactly! We need another method to update the state. This will allow us to modify the global state when necessary:

    updateState(newState: Partial<S>): void {
        this.state = {
            ...this.state,
            ...newState,
        };
    }

Now, here comes the magic where reactivity occurs intuitively and easy to understand.

We'll add a small piece of code to the updateState method that will execute any method found in the listeners property we created earlier.

Here's how the updateState method would look like:

    updateState(newState: Partial<S>): void {
        this.state = {
            ...this.state,
            ...newState,
        };

        if (this.listeners.length) {
            this.listeners.forEach((listener) => listener(this.state));
        }
    }

Now, every time we want to update the state, it will trigger a function to which we'll pass the updated state as an argument.

This will enable reactivity as any listeners registered with the listeners property will be notified and can react accordingly to the changes in the global state. This approach simplifies the handling of reactivity and makes it intuitive and easy to manage:

listener(this.state)

To make the listeners property functional, we need to introduce the methods we want it to execute. We'll achieve this by adding another method called subscribe.

   subscribe(listener: Subscription<S>) {
        this.listeners.push(listener);
    }

The subscribe method will allow us to add methods to the listeners property so that they can be executed when the state is updated. This way, we can dynamically register functions to react to state changes in our application.

Shall you guess which method we could pass to this subscribe method? 😉

CUSTOM HOOK

Exactly! Now that we have our abstract class, we can use it anywhere in our code. But how do we connect our fancy framework to our previous code?

Well, there can be numerous solutions from here on, and it all depends on the specific framework we're using.

For this example, let's dive into React and create a custom hook! Why not make it fun and enjoy the magic of connecting everything smoothly?:

export default function useSubscription<S, U extends UseCase<S>>(useCase: U, setStateFn: Dispatch<SetStateAction<S>>) {
    useCase.execute();
    useCase.subscribe((state) => setStateFn((prevState) => ({ ...prevState, ...state })));
}

The useSubscription custom hook allows us to call the execute method, which can, for instance, make API calls, and we can also use the subscribe method to pass a function that updates the state of our components:

setStateFn((prevState) => ({ ...prevState, ...state }))

With this magical useSubscription custom hook, we can seamlessly connect our abstract class to React components and enjoy the wonders of reactivity! Now, every state update will trigger the registered functions, ensuring our components stay in sync with the global state. Isn't this a delightful way to handle state management? Let the fun begin!. 🎉

IMPLEMENTATION

Now that we've reached this point, let's see how we implement this custom hook in our React component.

Imagine an application for recipes, and our component wants to fetch recipes from the database. With React, we'd do something similar to this:

const [listRecipes, setListRecipes] = useState<ListRecipesUseCaseState>(listRecipesUseCase.getState())

We'll use useState to manage the state of recipe lists, and we'll initiate it by calling the API with the method:

listRecipesUseCase.getState()

Once again, you got it! Following this, let's use useEffect to subscribe to our global state:

 useEffect(() => {
        useSubscription<ListRecipesUseCaseState, ListRecipesUseCase>(listRecipesUseCase, setListRecipes);
    }, []);

With the useEffect, our component will subscribe to the global state changes, ensuring it stays in sync with any updates that occur. Now, our recipe app is all set to whip up a delightful user experience!😋

SVELTE EXAMPLE

Fantastic! To wrap it up, let's illustrate the same implementation, this time using Svelte:

In Svelte, we'll create a store that exposes a method called setAppState, which will update the state using the appState.set(state) function. :

export const appState = writable(stateUseCase.state, () =>
  stateUseCase.setDefaultState(books)
)

export const setAppState = (state: GlobalState) => {
  appState.set(state)
}

To use this approach, we'll call the subscribe method in our App.svelte file.

Here's how it would look:

beforeUpdate(() => {
    stateUseCase.subscribe(setAppState)
  })

This way, our app will automatically subscribe and update the global state every time we call updateState in our use cases. It creates a seamless and reactive experience, keeping our app in sync with the global state effortlessly

Thank you for joining me on this journey! I hope this has been helpful, and I look forward to your feedback.

Happy coding!

@oscarprdev 🚀🌟