Forem: florent giraud

🌈 My Retrospective 2020

florent giraud — Sat, 02 Jan 2021 06:32:18 +0000

At the beginning, I was not sure to publish my retrospective.

Why? Because there are so many awesome people in the community. I didn't feel like I deserve it.

Finally, I am really proud of my year and all the awesome things that happen to me and I want to share with you my doubt and my success.

8 articles dev.to and 1 article on storyblok

I remember my first article. 😱 I didn't know if it would interest people. But article after article I just wanted to share my knowledge.

The saint Graal was when I received a message that says thank's for your article that was exactly what I was looking for 🦄... What more?

Also, I have special thanks to Storyblok. I wrote an article about How to work with translated slug with Nuxt and Storyblok ?. And Storyblok came to me and offer to publish it on their website. Thanks for all their support.

Organizator at Vue Montreal

When I arrived in Montreal. I was looking to participate in Vue community and Vue Montreal community was perfect for this.

I was really proud of all our work to maintain one meetup a month Even if COVID forced us to do less online meetup.

Refactor Vue Montreal website (refactor incoming) with nuxt static generation

We moved our old website build with Vuepress to Nuxt and Storyblok.

Integrate NuxtJS ambassadors

That's probably the best thing for me this year. I worked a lot with Nuxt in all my jobs. And had the chance to meet Debbie O'brien at Vue Toronto. Since then I knew I really wanted to be more implied in the community. And one day 😎. Debbie sent me a message if I wanted to join Nuxt ambassadors. OF COURSE, I WANT! I don't exaggerate. I answered literally like this ^^.

Create a NuxtJS formation

In my jobs, I had to teach other devs what is Nuxt so I had to create a Nuxt formation. It was so cool and challenged me at the same time. It was time for me to know if I really know or not Nuxt.

Create my first official plugin nuxt-snipcart-plugin

The last thing was my first official module for Nuxt. I am really proud of this one too because it was my first official module since I am a Nuxt ambassador.

Conclusion:

It was a long journey and everything didn't go well. I didn't write about all things that I didn't publish, didn't finish, didn't speak about. But what I know is I learned from all of this.

I hope it will inspire you. And don't forget Nuxt the world 😎.

nuxt storybook zero configuration with @nuxtjs/storybook module

florent giraud — Tue, 04 Aug 2020 02:35:08 +0000

Today I am so excited to present you with the new full integration of storybook into NuxtJS and it's so easy to use!

https://storybook.nuxtjs.org/

Installation

SETUP of @nuxtjs/storybook is pretty simple.

  yarn add --dev @nuxtjs/storybook

After that, you will need to add two files to your .gitignore.

 

.nuxt-storybook
storybook-static

Optionally you can add this command to your package.json

"storybook": "nuxt storybook",
"storybook:build": "nuxt storybook build"

And that's it! You’re ready to go! What you need to know here is that the NuxtJS storybook module will look recursively in your components folders for **.stories.js. It’s different from the default config of storybook which was looking in the stories folder.

You want more? Yes me too.

There are a list of add-ons that I’m using in my project and I want storybook to work there too.

 

@storybook/addon-actions
@storybook/addon-docs
@storybook/addon-knobs
@storybook/addon-viewport
@storybook/addon-a11y

One good thing to know is the compatibility of our add-ons with VueJS.

Let's init a basic component.

<template>
  <button :style="{backgroundColor: color}">
      {{label}}
  </button>
</template>

<script>
export default {
    props: {
        label: {
            type: String,
            default: ''
        },
        color: {
            type: String,
            default: "000000"
        }
    },

}
</script>

addon-knobs

yarn add @storybook/addon-knobs --dev

As it say in the doc you will have to update NuxtJS config by adding your add-ons one by one.

storybook: {
    // Options
    addons: [
      '@storybook/addon-knobs/register'
    ]
  },

Create the story components/AwesomeButton.stories.js

import { withKnobs, text } from "@storybook/addon-knobs";

export default {
    title: 'AwesomeButton',
    decorators: [withKnobs]
}

export const MyAwesomeButton = () => ({
   template:  '<AwesomeButton :label="label" :color="color" />',
   props: {
       label: {
           default: text('Label', 'Awesome button')
       },
       color: {
           default: text('Color Me', '777777')
       }
   }

})

try it!

yarn storybook

Look at this awesome button!

addon-actions

Add-on actions already come with @nuxtjs/storybook. So you just need to add it into your story

 

import { withKnobs, text } from "@storybook/addon-knobs";
import { action } from '@storybook/addon-actions';

export default {
    title: 'AwesomeButton',
    decorators: [withKnobs]
}

export const MyAwesomeButton = () => ({
    template:  '<AwesomeButton @click.native="clickme" :label="label" :color="color" />',
    props: {
       label: {
           default: text('Label', 'Awesome button')
       },
       color: {
           default: text('Color Me', '777777')
       }
    },
    methods: {
        clickme() {
            action('button-click')()
        }
    },

})

addon-docs | MDX

This is one of my favorite addons. With this, you can add more docs and a really nice preview.

 

yarn add -D @storybook/addon-docs

Here you will have to update your storybook configuration in nuxt.

storybook: {
    stories: [
      '~/components/**/*.stories.mdx'
    ],
    // Options
    addons: ['@storybook/addon-knobs/register', '@storybook/addon-docs'],
},

Now just update AwesomeButton.stories.js by .mdx at the end.

import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { withKnobs, text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';

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

<Meta title='AwesomeButton' component={AwesomeButton} decorators={[withKnobs]}  />

# This is an awesome button

Some **markdown** description, or whatever you want.

<Story name='basic button'>{{
    template:  '<AwesomeButton @click.native="clickme" :label="label" :color="color" />',
    props: {
        label: {
            default: text('Label', 'Awesome button')
        },
        color: {
            default: text('Color Me', '777777')
        }
    },
    methods: {
        clickme() { 
            action('button-click')()
        }
    },
}}</Story>

  ## Example


  ## Props

  <Props of={AwesomeButton} />

The full GitHub project is, of course, available here

addon-viewport

yarn add -D @storybook/addon-viewport

Update the addons array in your nuxt config by adding @storybook/addon-viewport/register

addon-a11y

yarn add -D @storybook/addon-a11y

Update the addons array in your nuxt config by adding @storybook/addon-a11y/register

And voila! Everything is working so easily.

I hope you enjoyed the content. You will find more EXAMPLES on the nuxt storybook website!

The full project HERE

FAQ

In the older version of nuxt you can encounter an error with core-js with .mdx addon. You will have to update your nuxt config to update the babel preset core-js because storybook is using core-js 3

 

build: {
    babel: {
      presets(_, [preset, options]) {
        options.corejs = { version: 3 }
    }
  }
}

Soon NuxtJS will update to CoreJS 3 so you will not have this error anymore.

[REMINDER-6] Object.assign/setPrototypeOf

florent giraud — Sat, 09 May 2020 15:04:10 +0000

ASSIGN

this method copies all the enumerable own properties of one or more objects into another

It mean's values are cloned, and objects references are copied live for vuejs < 3 (I didn't check for vue 3 reactivity but it's different normally).

example:

const original = {
  name: 'Fiesta',
  car: {
    color: 'blue'
  }
}

const copied = Object.assign({}, original)

original.name = 'Focus'
original.car.color = 'yellow'

copied.name //Fiesta
copied.car.color //yellow

Name doesn't change everywhere because it's not an object. For car yes and no matter if you change the copied object or the orignal one.

IMPORTANT: Spread operator does the same because it uses Object.assign behind the scene

const original = {
  name: 'Fiesta',
  car: {
    color: 'blue'
  }
}

const copied = {...original}

original.name = 'Focus'
original.car.color = 'yellow'

copied.name //Fiesta
copied.car.color //yellow

setPrototypeOf

Copy all proto values from an object to another one.


const animal = {
  isAnimal: true
}
const mammal = {
  isMammal: true
}

// mammal.__proto__ = animal
Object.setPrototypeOf(animal, mammal). // Same as doing before

[REMINDER-5] Promise.race()

florent giraud — Sat, 09 May 2020 14:44:15 +0000

Promise.race() runs as soon as one of the promises you pass to it resolves, and it runs the attached callback just once with the result of the first promise resolved.

example:

const promiseOne = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one')
})
const promiseTwo = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two')
})

Promise.race([promiseOne, promiseTwo]).then(result => {
  console.log(result) // 'two'
})

More important here is to know a use case. I don't have really use case for that.. But in case you want to execute a function as soons as possible or maybe if you are implementing a rendering and call an api at the same time. If the rendering fail at some point. The api call will stop too.

That's it for this reminder

[REMINDER-4] For-of loop

florent giraud — Sat, 09 May 2020 07:59:37 +0000

For-of loop

The nice to know about this is that for-of get the conscience of forEach. And give you the possibility to break it.

for (const v of ['a', 'b', 'c']) {
  console.log(v);
}

Look at the const here. As the for of will create a new scope (Go to REMINDER 1 if you want to know more about scope).
Effectively it will be transpiled by

for (var _i = 0, _a = ["a", "b", "c"]; _i < _a.length; _i++) {
    var v = _a[_i];
    console.log(v);
}

With transpilation v will not be accessible even if real life here v will the last value of the array "c"

[REMINDER-3] Template Literals / destructuring

florent giraud — Sat, 09 May 2020 07:49:49 +0000

TEMPLATE

Template Literals allow you to work with strings in a novel way compared to ES5 and below.

they offer a great syntax to define multiline strings
they provide an easy way to interpolate variables and expressions in strings
they allow you to create DSLs with template tags (DSL means domain specific language, and it’s for example used in React by Styled Components, to define CSS for a component)

example for last point:

function styled(literals, ...expressions) {
  console.log("literals: ", literals);
  console.log("expressions: ", expressions);
}

const Button = styled`
  font-size: 1.5em;
  background-color: black;
  color: white;
  ${"bonjour"}
  ${"hello"}
`;

It will log literals fontsize etc and expressions are just arguments in js, so array of arguments. Important to know is that the literal array will be cut by where expression is inserted.

DESTRUCTURING

destructuring an object {firstname: default, other} : myObject
destructuring an array const a = [1,2,3]; const [firstIndex] = a

ignore some index

const a = [1, 2, 3, 4, 8];

const [one, two, , , five] = a;

console.log(five); // 8

That's it for me that's the most important parts to reminder if you want more go watch the article.

source: es5 to esnext

[Reminder-2] Arrow Function

florent giraud — Sat, 09 May 2020 06:34:42 +0000

I am assuming you are using "use strict"

Arrow function syntax is () => {}
If you have one parameter you can delete parantheses.
If you are doing one action, you can delete the curly braces. () => console.log("hi")
It has an implicit return
It create a new Scope as Normal function (watch my last reminder if you want more).
It doesn't bind context like classic function. That means 'this' will never be bind and will be undefined or window.
It cannot act as a constructor like normal function

source: es5 to esnext

[Reminder-1] var, let, const

florent giraud — Sat, 09 May 2020 06:19:21 +0000

I am writing this article at first for me :). Why ?
Just to have a fast reminder about them. But i hope it can help you too !

We will speak about some javascript concepts here:

scope
block

We can use let and const since es2015 (or es6). I am assuming you know what is"use strict". It will force you to init the variable before using it. In older browser it will work and you will have some weird issues.

SCOPE

The scope is the portion of code where the variable is visible.
In Javascript only function create new scope (arrow function too). That mean if you try:

function() {
  var hi = "hello"
}

console.log(hi) // will be undefined

If a global variable as the same name. The variable inside the function will shadow the global variable (shadowing)
If variable is declared after it is called. If he is after the called function it will be found because JS use the hoisting that put all variables on the top of the file (Always declare you variable properly).

BLOCK

A block is what is identified by a pair of curly braces. But except for function it doesn't create a new scope.

that mean's:

if (true) {
  var hi = "hello"
}

console.log(hi) // will be "hello" remember hoisting

LET

With 'let' now you have a scoped version variable even in block

Remember:

if (true) {
  let hi = "hello"
}

console.log(hi) // will throw error hi not defined

"let" doesn't create a global variable.

CONST

It can be scope in a block (remember the if) so it will not be available outside.

const could not be changed or reassigned. Just if the const variable is an object it can be mutate. You can block this behavior by wrapping your object with Object.freeze({}). Remember here that freeze will just freeze the level first of your object not the nested ones.

And that's it. See you in the next reminder.

storybook + tailwind + nuxt one webpack config

florent giraud — Sun, 03 May 2020 02:20:49 +0000

At Vue Montreal we are using nuxt a lot.

Today i want to share with you something i feel it will help you as us. We wanted to add storybook to our project.

Everytime i had to create a webpack just for using storybook. And i faced a lot of bugs. And more when i wanted to use tailwind + postcss ^^.

So let's say you have a basic nuxt config with tailwind

So you should have:

'@nuxtjs/tailwindcss' in your buildModules
in your assets/css/tailwind.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

And that's all.

Now you want to implement storybook.
You want to add tailwind so postcss and not creating a new webpack or at least create another full configuration...

You have to create

.storybook/main.js
.storybook/preview.js

.storybook/preview.js

import Vue from 'vue'
import { configure } from '@storybook/vue'
import '@/assets/css/tailwind.css'

Vue.component('nuxt-link', {
  props:   ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    },
  },
  template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>',
})

configure(require.context('../components', true, /\.stories\.js$/), module);

It's basic. I Added nuxt-link for not having some bug because storybook don't know about nuxt-link.
As you see i added import '@/assets/css/tailwind.css'.

and the most impostant.

.storybook/main.js

const { getWebpackConfig } = require('nuxt')

module.exports = {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.
    webpackFinal: async (sbWebpack, { configType }) => {

        const nuxtWebpack = await getWebpackConfig('client', {
            for: process.env.NODE_ENV === 'production' ? 'build' : 'dev'
        })

        const recomposedWebpackConfig = {
            mode: nuxtWebpack.mode,
            devtool: nuxtWebpack.devtool,
            entry: sbWebpack.entry,
            output: sbWebpack.output,
            bail: sbWebpack.bail,
            module: {
                rules: [
                    ...nuxtWebpack.module.rules.map(el => {
                        const reg = RegExp(el.test);
                        if (reg.test(".postcss") || reg.test(".css")) {
                            el.oneOf = el.oneOf.map(e => {
                                e.use.push({
                                    loader: 'postcss-loader',
                                    options: {
                                        ident: 'postcss',
                                        plugins: [
                                        require('tailwindcss')('./tailwind.config.js'),
                                        require('autoprefixer'),
                                        ],
                                    },
                                })
                                return e;
                            })
                        }
                        return el;
                    })
                ]
            },
            plugins: sbWebpack.plugins,
            resolve: {
                extensions: nuxtWebpack.resolve.extensions,
                modules: nuxtWebpack.resolve.modules,
                alias: {
                    ...nuxtWebpack.resolve.alias,
                    ...sbWebpack.resolve.alias,
                },
            },
            optimization: sbWebpack.optimization,
            performance: {
                ...sbWebpack.performance,
                ...nuxtWebpack.performance
            }
        }

        return recomposedWebpackConfig;
    },
};

The 'problem' here is you need some of storybook webpack and nuxt webpack. So i decided to recompose a webpack config
with storybook custom webpack.

And THIS. A new feature from nuxt that expose nuxt webpack config with getWebpackConfig. It return a promise and it's a valid webpack export as you can export promise now too INFO HERE.

The most important part for you here is:

module: {
 rules: [
  ...nuxtWebpack.module.rules.map(el => {
    const reg = RegExp(el.test);
    if (reg.test(".postcss") || reg.test(".css")) {
      el.oneOf = el.oneOf.map(e => {
       e.use.push({
        loader: 'postcss-loader',
        options: {
         ident: 'postcss',
         plugins: [
          require('tailwindcss')('./tailwind.config.js'),
          require('autoprefixer'),
         ],
        },
      })
      return e;
     })
    }
    return el;
   })
  ]
},

What you need to update are .postcss and .css rules.

And that's it! Now you should be able to write tailwind / postcss in your component with "ONE CONFIG" :).

This is my workaround. Maybe it's not the best so tell me in comments.

ps: An ISSUE in @nuxtjs/tailwind about adding support with storybook.

Mixing nuxt generate and build

florent giraud — Sat, 02 May 2020 15:37:42 +0000

Hello everyone !

I wanted to share you a little tip with nuxt generate.

I wanted to put my landing pages in a CDN but not my dashboard.

According to the nuxt generate documentation we you can use exclude with a regex.

But yeah "regex".

I don't like (a lot!) regex and i prefer to use include instead of using exclude.
I created a module that use 'generate:extendRoutes' and introduce whitelist instead of exclude.

// modules/custom-generate.js
module.exports = function() {
  this.nuxt.hook('generate:extendRoutes', (routes) => {
    const whiteList = [
      '/', //this is the index.vue root file
      '/talents-signed-up',
      '/404',
      '/company-signed-up',
      '/company',
      '/talents'
    ]
    const routesToGenerate = routes.filter((page) => {
      return whiteList.includes(page.route)
    })
    routes.splice(0, routes.length, ...routesToGenerate)
  })
}

This module is ok if you don't have a lot of pages that you want to generate.

You can add 'regex' valiation in the filter instead of my array if you prefer :).

Thank's !

Can VueJS lovers understand how really VueJS works behind the scene [Part-1]

florent giraud — Thu, 13 Jun 2019 19:06:36 +0000

Hello to you VueJS lovers

Context:

I wanted to help on VueJS project and tried to help on some issue but was so frustrated because I had no realknowledge on the technical background.

So i decided to start this serie and maybe it will help someone to understand what's going on behind VueJS. And maybe you will help me accelerate my travel.

Installation

Start by forking or cloning vue project



  git clone https://github.com/vuejs/vue

  cd vue

  yarn

Why yarn ?

Actually there is a yarn.lock that's why 😄

Development Environment

At this point i will try to understand the development environment.

First i will focus on the package.json to understand how to start the dev environment.

Dont be scare ! We will go step by step.

First focus on files.

The files key is here to tell to npm which array of files it should explicitely add to the npm package.

If you want to do the reverse. You should use .npmignore.

So here we will take a look about types and src

--------- TYPES ---------

Actually VueJS is using flow types and typescript. I will not tell more about it because I dont need for now more informations about the typing configuration. But what I know is vue 3 will normally only use typescript and function base component instead of classes for easier types inference

check the RFC

--------- SRC ---------

As we will speak just after about src just keep in mind it's the source code.

--------- CONFIGS ---------

Basically we will for now just focus on

yarn run dev

We can see too



  yarn run dev:cjs

  # and

  yarn run dev:esm

As i can't actually explain all specifics differences between them i will have to do more researches for the next articles on it.

So yarn run dev will start scripts/config.js with TARGET:web-full-dev

Yeah i know config.js is pretty heavy but don`t give up now we are near the end of the first article !

CTRL + F on web-full-dev and you will see this:

entry: for the first file we will start to play with !
dest: vuejs runtime with compiler unminify (Actually I can't explain really what is exactly the runtime and the compiler but trust me at the end of this series we will !)
format: umd (universal module definition. I know things about it but as esm and cjs give me time to write a complete article on it (If you know one tell me in comments 😄).
env: development (thanks sherlock !)
alias: In vuejs src files you will see things like this import config from 'core/config' What I know is using VueJS rollup-plugin-alias

It permit you to use 'core/config' instead of writing '../../../'. I am not really sure where in the config this is happening but it is here. (If you can well explain tell me in comments and i will update this part)

banner: is just versionning log

So COOL !! Now we know what will happen :party:

But wait you explain to me the configs but me i want to develop.

--------- RUN DEV ---------

Ok just run yarn run dev

It will generate vue.js (runtime + compiler) in dist/ folder.

The command watch for changes and update files if you change a file in src.

--------- USE EXAMPLES ---------

So now you have the dev command running.

Take a look on examples folder. You will have a lot of examples but i will choose for the best the todomvc folder.

Install http-server or others globally.

npm i -g http-server

And run it on root project folder !

http-server .

Why on root folder ? because you have relative import in index.html

open in browser http://localhost:8080/examples/todomvc/index.html

And Voila the project is running but not with the vue.js we are building.

Go to index.html and change

<script src="../../dist/vue.min.js"></script>

<script src="../../dist/vue.js"></script>

As we saw before we are not building the minify version.

Reload the page and now the project is working with the good js file.

To test if it's actually working go to src\platforms\web\entry-runtime-with-compiler.js and add some console.log just after imports

l.12 console.log("asdjasdkjlajsdlkadls");

Ctrl + Shift + R in the browser for hard reload and delete cache or Ctrl + R if you tick disable cache in chrome browser.

You should see the log in the console ! You are now ready to help on VueJS project. Yeah that was a lot of informations but i hope you still here !

Conclusion:

At the end I have two questions i have to answer:

Have a clear understanding Specific differences between cjs, esm, umd (important).
Have a clear understanding of the alias config on scripts/config.js (medium/low).

Feel free to help me in comments 😄.

I hope you will like the series I will try to write an article every two weeks.

I am waiting for you comments now ! See you for the next article.

Breakpoints reactivity with Tailwind and VueJS

florent giraud — Tue, 14 May 2019 16:07:17 +0000

Hello VUEJS lovers ! ❤️

TL:TR

Before Tailwind I used Vuetify. Vuetify is an incredible css framework!

But 🤔

I faced some issues with Vuetify:

"Forced" to use Vuetify components
Making changes in some cases could become really difficult....

Since then, I've discovered Tailwind!

Tailwind is what we call a "Css utility" which allows us to have much more modularity.

With that being said.

What I liked and didn't find with Tailwind are the Breakpoints Reactivity connected to VueJS. It let you change css classes dynamically or styles etc...

<template>
  <div :class="{classCustom: breakpoints.xs}" ></div>
</template>

So I decided to do it myself.

Let's go connect Tailwind breakpoints reactivity with VueJS 😇

First, I was inspired by what Vuetify was doing, as integrate the breakpoints logic via Plugins. It is handy since it adds some "globals property" => The Breakpoints.

Yeah but it's "global". I don't like this aspect of globals, that mean you have to take that and ok... If I don't want them inside my component and save amount of code after transpilation.
On top of that, the customisation of the properties name etc are almost impossible.

So I decided to take advantage of the Vue Observable.

import Vue from 'vue'

const screens = {
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280
}

const sm = val => val >= screens.sm && val <= screens.md
const md = val => val >= screens.md && val <= screens.lg
const lg = val => val >= screens.lg && val <= screens.xl
const xl = val => val >= screens.xl

const getBreakpoint = w => {
  if (sm(w)) return 'sm'
  else if (md(w)) return 'md'
  else if (lg(w)) return 'lg'
  else if (xl(w)) return 'xl'
  else return 'all'
}
const debounce = function(func, wait) {
  var timeout
  return () => {
    const later = function() {
      timeout = null
    }
    const callNow = !timeout
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
    if (callNow) func()
  }
}

const breakpoints = Vue.observable({
  w: window.innerWidth,
  h: window.innerHeight,
  is: getBreakpoint(window.innerWidth)
})

window.addEventListener(
  'resize',
  debounce(() => {
    breakpoints.w = window.innerWidth
    breakpoints.h = window.innerHeight
    breakpoints.is = getBreakpoint(window.innerWidth)
  }, 200),
  false
)

export default breakpoints

And you can now use them just simply like this...

<template>
  <div>{{ breakpoints.is }} {{ breakpoints.w }} {{ breakpoints.h }} </div>
</template>
<script>
import breakpoints from '@/plugins/breakpoints'

export default {
  name: 'Component',
  data: () => {
    return {
      breakpoints
    }
  }
}
</script>

And That's it! Since we are using Vue.observable, vue will automatically put those data reactive.

ps: It work's well with functional components!

<script>
import breakpoints from '@/plugins/breakpoints.js'

export default {
  name: 'TitleXL',
  functional: true,
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  render: (h, { data, props }) => {
    const textW = breakpoints.mdAndUp ? 'text-5xl' : 'text-3xl'

    return (
      <div class={textW} {...data}>
        {props.text}
      </div>
    )
  }
}
</script>

Now you don't get data where you don't need it to be anymore ❤️

As you know, any code can be improved. If you have any suggestion,
Feel free to contact me or let a comment or just like the article :)

my twitter: https://twitter.com/giraud_florent
my linkedin: https://www.linkedin.com/in/fgiraud42/