DEV Community: Amir.H Ebrahimi

Use package.json wisely

Amir.H Ebrahimi — Sat, 30 Apr 2022 17:05:25 +0000

TLDR

We are going to explain only the following piece of code

  "peerDependencies": {
    "react": ">=16.8"
  },
  "peerDependenciesMeta": {
    "react": {
      "optional": true
    }
  }

What is the `peerDependencies` field?

Here is the exact quote from npm docs:

In some cases, you want to express the compatibility of your package with a host tool or library, while not necessarily doing a require of this host. This is usually referred to as a plugin. Notably, your module may be exposing a specific interface, expected and specified by the host documentation.

It doesn't make much sense at the first look, so let us continue with an example,
imagine you have an npm package that is just a single react hook, if you think this is stupid, you should take a look at these stupid repositories (react-hook-form, SWR, zustand)
so you need the react for your package, cause you need to use builtin hooks (useState, useContext, ...)
But this makes publishing just a little bit harsh, cause you don't want to build and bundle the react into your output.

let's make it a simple hook, I'm going to make a counter but this time with a reducer :)

import { useReducer } from 'react'

export const useCounter = (initial) => {
  const [counter, inc] = useReducer(s => s+1, initial)
  return [counter, inc]
}

If you don't understand why it's a poor idea to bundle the react into my little 5 lines of react-hook, we should chat; it could be a good time for a vacation.
Enough joking; the output bundle size of this tiny section of code would be near the size of the hole react package size.
Besides the size, you can not use multiple versions of the react inside one project, so you are crucially forcing all of your dev users to use the exact react version as you do.

The peerDependencies is here to save you a day, in case you passed the react to thepeerDependencies field in your package.json whenever the developer tries to install your custom package
npm first looks at your node_modules and see do you have any version of the react installed or not.
If it is not, it put a big warning on your screen that please install 'react' 🥹.
But if found one it checks whether it is compatible with the version you passed as the value of the react (">=16.8") or not, if it is not compatible, you know 🥹, but it won't do anything in the compatible case.

Note: when I'm writing this post react 18 has been released and it seems to be compatible with the previous ones, so till then >=16.8 has access to all hooks and can do the job 🚀

I don't know you but I one my installation process to be clean. and here is what peerDependenciesMeta is designed for.

What is the `peerDependenciesMeta` field?

Here is the exact quote from npm docs:

When a user installs your package, npm will emit warnings if packages specified in peerDependencies are not already installed. The peerDependenciesMeta field serves to provide npm with more information on how your peer dependencies are to be used. Specifically, it allows peer dependencies to be marked as optional.

You see, I told you this for eliminating useless warning
In this case, marking a peer dependency as optional ensures npm will not emit a warning if the react package is not installed on the host.
"This allows you to integrate and interact with a variety of host packages without requiring all of them to be installed." npm said with joy.

Unleash the power of bookmarklets

Amir.H Ebrahimi — Thu, 28 Apr 2022 11:04:44 +0000

Bookmarklet 📜

Although the title is not exactly what I intend, it is what it is.
So, what exactly is a bookmarklet? You can learn more about it here.
In a nutshell, it is the javascript snippet that is saved in the url. Sorry if it's not entirely correct; it doesn't really matter what it is 🥸.

How to Use a Bookmarklet Professionally

Include images that are mostly connected to the functionality.
Add an alt property to the picture > Keep in mind that this will be the name for the browser bookmark in the end.
Place your code in the code structure shown below.
Ensure that the user can easily copy the code.
Ask that the user drag the picture to the bookmark section and edit the bookmark URL to the copied snippet.
Now, when user clicks on the bookmark, they'll get the functionality you're looking for.

javascript: (() => {
  'use strict';
  (function () {
    // Your code
  })();
})();

Real usage

Pintrest

Remove redundant sections of the Pinterest page.

javascript: (() => {
  'use strict';
  (function () {
    const css = `
      a { display:none; }
      button, 
      [data-test-id="pointer-events-wrapper"] { display:none !important; }
      [role="banner"] { margin-bottom: -140px; visibility: hidden; }
    `;
    const head = document.head || document.getElementsByTagName('head')[0];
    const style = document.createElement('style');
    head.appendChild(style);
    style.appendChild(document.createTextNode(css));

    [...document.querySelectorAll('body *')].forEach(item => {
      if (item.getAttribute('id') === '__PWS_DATA__') return;
      if (item.innerHTML === item.innerText && item.innerText.length !== 0)
        item.parentNode.removeChild(item);
    });
  })();
})();

Gitpod

Creating a workspace is as easy as prefixing any GitHub URL with gitpod.io/#

javascript: (() => {
  "use strict";
  (function () {
    for (
      var t = document.getElementsByTagName("meta"), n = 0;
      n < t.length;
      n++
    ) {
      var o = t[n];
      if (o.content.toLowerCase().includes("gitlab")) return !0;
      if ("hostname" === o.name && o.content.includes("github")) return !0;
      if (
        "application-name" === o.name &&
        o.content.toLowerCase().includes("bitbucket")
      )
        return !0;
    }
    return !1;
  })() &&
    window.open(
      ("https://gitpod.io",
      "https://gitpod.io/#" +
        (window.location.protocol + "//" + window.location.host) +
        window.location.pathname)
    );
})();

console.log(`[Arrays]`)

Amir.H Ebrahimi — Tue, 26 Oct 2021 07:47:45 +0000

Here is a list of array operations that you can review, such as blitz. From now on, we'll be working with these arrays.

const numbers: number[] = [0, 1, 2];
const alphabet: string[] = ['a', 'b', 'c'];

Indexing

numbers.indexOf(2) // 2
numbers.indexOf(10) // -1
numbers[5] // undefined
numbers[-1] // undefined
numbers[Infinity] // undefined
numbers['1'] // 1

Bonus tips (negative index)

numbers.at(-1); // 2, (builtin at method)

const coolNumbers = new Proxy(numbers, {
  get(target, props) {
    const index: number = +(<string>props)
    if (index < 0) 
      return Reflect.get(target, index + target.length)
    return Reflect.get(target, props)
  },
})
coolNumbers[-1] // 2

Adding (appending) items

/* IMMUTABILITY */
numbers.concat([3, 4]) // [ 0, 1, 2, 3, 4 ]
numbers // [ 0, 1, 2]

/* INPLACE CHANGES */
numbers.push(3) // numbers -> [0, 1, 2, 3]
numbers.unshift(-2) //  numbers -> [-2, 0, 1, 2, 3]
numbers.splice(1, 0, -1) // numbers -> [-2, -1, 0, 1, 2, 3]
numbers.splice(0,0, ...[-6, -4, -3]) 
numbers // [-6, -4, -3, -2, -1,  0,  1,  2,  3]

Replacing item

numbers.splice(0, 1, -5) // numbers -> [-5, -4, -3, -2, -1,  0,  1,  2,  3]
numbers.splice(500, 100, 4) // numbers -> [-5, -4, -3, -2, -1,  0,  1,  2,  3, 5]
numbers[9] = 4 // numbers -> [-5, -4, -3, -2, -1,  0,  1,  2,  3, 4]
numbers [-5, -4, -3, -2, -1,  0,  1,  2,  3, 4]

Creating array

new Array(5) // [ <5 empty items> ]
Array.from({ length: 5 }) // [ undefined, undefined, undefined, undefined, undefined ]
Array.from('12345', _ => undefined) // [ undefined, undefined, undefined, undefined, undefined ]
Array.from(document.querySelectorAll('img'), img => img.src)
Array.of(1, 2, 3, 4, 5) // [ 1, 2, 3, 4, 5 ]
Array(5) // [ <5 empty items> ]
Array.from({ length: 5 }, (_, i) => i) // [ 0, 1, 2, 3, 4 ]

Bonus tips (manipulating array length)

alphabet.length = 5
alphabet // [ 'a', 'b', 'c', <2 empty items> ] length is 5
alphabet[7] = 'e'
alphabet // [ 'a', 'b', 'c', <4 empty items>, 'e' ] length is 8
alphabet.length = 3
alphabet // [ 'a', 'b', 'c' ] length is 3

Iteration

alphabet.entries() // Iterator over [[0,'a'], [1, 'b'], [2, 'c']]
for (const [index, element] of alphabet.entries()) {}
alphabet.keys() // Iterator over [0, 1, 2]
for (const index in alphabet) {}
alphabet.values() // Iterator over [ 'a', 'b', 'c' ]
for (const value of alphabet) {}

Inclusion

alphabet.includes('c') // true
alphabet.includes('c', 1) // true, from index 1
alphabet.includes('c', -2) // true, from index (length - 2)
alphabet.find(item => item.charCodeAt(0) > 'b'.charCodeAt(0)) // c
alphabet.findIndex(item => item.charCodeAt(0) > 'b'.charCodeAt(0)) // 2
alphabet.lastIndexOf('c') // 2
alphabet.indexOf('c') // 2
alphabet.indexOf('d') // -1

Operators

alphabet.every(item => item.charCodeAt(0) < 'c'.charCodeAt(0)) // false
alphabet.some(item => item.charCodeAt(0) < 'c'.charCodeAt(0)) // true

// **flat** ES2019
const nested = [0, [1], [[2]], [[[3]]], [[[[4], 3], 2], 1]]
nested.flat() // [ 0, 1, [ 2 ], [ [ 3 ] ], [ [ [4], 3 ], 2 ], 1 ], default level  1
nested.flat(3) // [0, 1, 2, 3, [ 4 ], 3, 2, 1]
nested.flat(Infinity) // [0, 1, 2, 3, 4 , 3, 2, 1]

// **joining**
alphabet.join(',') // a,b,c
// @ts-ignore
alphabet.join`,` // a,b,c
alphabet.toString() // a,b,c

// **reducing** 
alphabet.reduce((acc, chr) => acc + ', ' + chr, '') // , a, b, c
alphabet.reduceRight((acc, chr) => acc + ', ' + chr, '') // , c, b, a
alphabet.reverse() // alphabet -> [ 'c', 'b', 'a' ]
alphabet // [ 'c', 'b', 'a' ]

// **sorting**
alphabet.sort() // shuffle alphabet, e.g. alphabet -> [ 'b', 'a', 'c' ] 
alphabet.sort(() => Math.random() - 0.5) // alphabet -> [ 'a', 'b', 'c' ] 
alphabet // [ 'a', 'b', 'c' ]

// **subset**
alphabet.slice(1) // ['b', 'c']
alphabet.slice(0, 2) // [ 'a', 'b' ]

Bonus tips

For mapping over an array it must have value, it can be undefined or null or any thing, but it can not be empty .

/*  cool python range */
const range = (start: number, stop?: number, step?: number) => {
  if (step === undefined) step = 1
  if (stop === undefined) {
    stop = start
    start = 0
  }

  return Array.from(
    { length: (stop - start) / step + 1 },
    (_, i) => start + i * step!,
  )
}

for (let i in range(10)) console.log(i)

Aptor Is All You Need

Amir.H Ebrahimi — Fri, 25 Jun 2021 21:08:34 +0000

TLDR

The dominant react-something packages are based on old-style class-based integration that includes a third-party and a react wrapper that defines new things for each existing API in that third party. The best available method is to bind a ref filling the integration gap through the react ref system.

We propose a new simple package, the react-aptor, based solely on integration mechanisms, removing the middle effect of react packages entirely.

Story

Let’s say there comes a trending video package called doom.js, featured just recently on npm. The doom package has been developed in typescript compatible with all frameworks and libraries. Now the community tries to help the author and make integrated packages on their own 🙌️.

Let’s make it simple, doom can only play/pause a video for now. It might not be cool enough to win the "Breakthrough of the year”, but it is definitely one of the best 😄.

Then we are going to make a react package out of it, called react-doom. It is going to be something like this:

<ReactDoom 
    src={'video-url'}
    isPlaying={false} 
    ref={playerRef}
/>

Then users can play/pause the video with their UI using playerRef.current

Everything is fine, let’s add a new highly voted feature to doom.js to change the speed of the video.

Author starts coding
Boom 💥
The author finishes the feature
It is now running tests
All test passed 🕺
Doom.js is going to be published
OMG it is also compatible
The new minor version is coming …
Done 🆗

So let’s update our react-doom package and use the new 2x feature on our videos.
Published 25 days ago, Okay let’s check their issue, it must be under doing board
last interaction for the author is 2 months ago
So what, making another Old guy pc Meme!

Aptor

Why should react wrapper block the development phase of a package?

Connect your doom.js to react-aptor then you have all the functionality.
Use a tiny wrapper around the connected component. Do every of the following you want

Trigger prop changes using useEffect
Change namings
Hoist full access reference to raw doom.js API using forwardRef

Let’s call this new react package raptor-doom.
raptor-doom is a simple, tiny piece that helps developers to use it independent of the react package itself.

So in the case of the 2x feature, the only thing which is needed is to update the doom.js package and use the rate feature out of the box.

<RaptorDoom isPlaying={isPlaying} ref={ref} />
<button onClick={() => {ref.current._doom.setRate(2)}}>
 speed up
</button>

The react-aptor helps you to make this process as easy as one react hook call.

const Connector = (props, ref) => {
  const aptorRef = useAptor(ref, {
    // a function which returns a slice of doom.js apis
    getAPI, 
    // a function which instantiate doom.js player
    instantiate, 
    // anything to be used in both getAPI, instantiate
    params: props 
  });

  // accessing node using returned ref
  return <div ref={aptorRef} />; 
};

See examples: get connected to react using react-aptor within a minute.

See a raptor-howler a 1.04kB functional version of react-howler.

See a detailed documentation with lots of best practices here

Conclusion

react-aptor helps you to make functional, small, Forward Compatible packages within react.

DEV Community: Amir.H Ebrahimi

Use package.json wisely

TLDR

What is the peerDependencies field?

What is the peerDependenciesMeta field?

Unleash the power of bookmarklets

Bookmarklet 📜

How to Use a Bookmarklet Professionally

Real usage

Pintrest

Gitpod

console.log(`[Arrays]`)

Indexing

Adding (appending) items

Creating array

Iteration

Inclusion

Operators

Aptor Is All You Need

TLDR

Story

Aptor

Conclusion

What is the `peerDependencies` field?

What is the `peerDependenciesMeta` field?