Forem: All In Developer

🧶 Implicit CLSX in React

All In Developer — Thu, 02 Dec 2021 00:53:21 +0000

Using clsx or classnames in React lately has become a trend with utility-first CSS frameworks like Tailwind CSS, where you have to write a lot of classes, and sometimes also with conditionals.

If you come from a framework like Vue you may saw that there you have this Class Binding functionality out of the box.

In this blog post I will show you how you can patch React library, so you don't have import clsx everywhere where you need it, and to have this functionally out of the box also in React.

☢️ This is just for learning purposes. Use at your own risk

Create new React App

yarn create react-app implicit-clsx
cd implicit-clsx

Install `clsx`

yarn add clsx

Remove `react`

yarn remove react

Install `react` under `raw-react` name (More about NPM Aliases)

yarn add raw-react@npm:react

Create own React that will export from `raw-react`

my-react/index.js

module.exports = require('raw-react')

my-react/jsx-runtime.js (About JSX Runtime)

module.exports = require('raw-react/jsx-runtime')

my-react/jsx-dev-runtime.js (About JSX Runtime)

module.exports = require('raw-react/jsx-dev-runtime')

Install `my-react` as `react` package (More about NPM Aliases)

yarn add react@file:my-react

Patch JSX Runtime

Now let's patch JSX Runtime to check for className. Here comes the hard work 😀

my-react/jsx-dev-runtime.js

module.exports = require('raw-react/jsx-dev-runtime')

const clsx = require('clsx').default
const jsxDEV = module.exports.jsxDEV

module.exports.jsxDEV = function() {
    if (typeof arguments[0] === 'string' && arguments[1].className) {
        arguments[1].className = clsx(arguments[1].className)
    }

    return jsxDEV.apply(undefined, arguments)
}

Now it's time to explain what gibberish I wrote here 🤣 I will explain some things only everything else I think it's clear

arguments arguments is an Array-like object accessible inside functions that contains the values of the arguments passed to that function.
apply The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).

Signature of function jsxDEV is type, props, key. So arguments[0] is type and arguments[1] is props

And we check if type is a string, because in react-dom host elements can be only strings, we don't want to change for example className on some function or class components.

And second we check if we have className prop, we patch it with a clsx call.

Last line in the function we just forward everything to the native jsxDEV

To have this work also on build, you will need to apply this patch also to jsx and jsxs in my-react/jsx-runtime.js see repo link at the end

Reinstall `my-react` as `react` package to update

yarn add react@file:my-react

Change `App.js` to see the changes

Replace line with a single className as string

<div className="App">

To something that usually can be passed to clsx

<div className={["App1", "App1", { "App2": true }]}>

Start the app and let's check in browser

yarn start

Working example https://github.com/unrevised6419/implicit-clsx

I played around with TypeScript version, but couldn't make it work because of types mismatch, needs more investigation.

And we are done! Thanks for reading my blog posts!

Cover Photo by Ash from Modern Afflatus on Unsplash

☢️ HTML Comment in React

All In Developer — Fri, 26 Nov 2021 00:06:35 +0000

If you ever started learning React and saw it's syntax JSX, you maybe thought. "This looks like HTML"

And one day you want to comment something in JSX, and your first try would be to do:

function Component() {
  return (
    <div>
      <!-- This is my comment -->
      The quick brown fox ...
    </div>
  )
}

And for sure your bundler started complaining, that your syntax is invalid, and then you search the internet, and realise that a HTML Comment is not valid in JSX, and you learn that you have to use a JavaScript comment.

Well in this blog post I will show you for learning purposes how to trick React to render a real HTML Comment in your browser in a few steps.

Step 1

Generate a React app using Create React App

npx create-react-app my-experiment --template typescript
cd my-experiment
npm run start

Step 2

Open App.tsx and add a const with a unique id as a string

const HTMLComment = 'unique-html-comment'

Step 3

Declare this HTMLComment as a Intrinsic Element in your App.tsx. TypeScript is not required, but you have to learn something interesting 😊

import { PropsWithChildren } from 'react';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      [HTMLComment]: PropsWithChildren<unknown>
    }
  }
}

Step 4

Render this created HTMLComment as a JSX element in your App.tsx

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <HTMLComment>This is my comment</HTMLComment>
        {/* ... */}
      </header>
    </div>
  );
}

Let's check what was rendered in browser.

Well, that's expected, React thinks our element is a DOM element and renders it as usual. Let's move on.

Step 5

Open node_modules/react-dom/cjs/react-dom.development.js
Find createElement function (line ~8954)
Find } else if (typeof props.is === 'string') { (line ~8986)

You see last } else {? inside that last branch a new element is created. We need to add one more if branch to check for our HTMLComment

if (type === 'unique-html-comment') {
  domElement = ownerDocument.createComment('')
}

Our final added code will look like this:

Save the file. Restart the CRA process so it can see new changes from inside node_modules

Open the browser to see the result.

And that's how you trick React into rendering a HTML Comment!
Feeeling like a hacker now? 🤣

Cover Photo by Florian Olivo on Unsplash

🎄 Render in Vue, 16+ ways

All In Developer — Tue, 23 Nov 2021 22:16:46 +0000

In this blog post I will show you 16 ways how to render something in Vue

🚀 So let's start

Talk is cheap. Show me the code.
― Linus Torvalds

Here is full example that you can play around
https://github.com/unrevised6419/vue-render-everywhere

🧰 Prerequisites

I'm using Vite with this configuration

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: { alias: { vue: 'vue/dist/vue.esm-bundler.js' } }
})

When refering to a DOM element, this is the HTML for every example

<script type="text/html" id="template-in-script">
  <li>The quick brown fox...</li>
</script>

🎁 Methods to render in Vue

I'm showing these methods only for learning purposes. Use at your own risk.

Method 1: `template` option as `string`

import { defineComponent } from "vue"

export default defineComponent({
  template: '<li>The quick brown fox...</li>'
})

Method 2: `template` option as a selector

import { defineComponent } from "vue"

export default defineComponent({
  template: '#template-in-script'
})

Method 3: `template` option as a `HTMLElement`

import { defineComponent } from "vue"

export default defineComponent({
  template: document.querySelector('#template-in-script')
})

Method 4: using `render` option and `h` factory

import { defineComponent, h } from "vue"

export default defineComponent({
  render() {
    return h('li', 'The quick brown fox...')
  }
})

Method 5: using `render` option and `compile` function

import { compile, defineComponent } from "vue"

export default defineComponent({
  render: compile('<li>The quick brown fox...</li>')
})

Method 6: using `render` option and `compile` function with selector

import { compile, defineComponent } from "vue"

export default defineComponent({
  render: compile('#template-in-script')
})

Method 7: using `render` option and `compile` function with `HTMLElement`

import { compile, defineComponent, h } from "vue"

const element = document.querySelector('#template-in-script')
export default defineComponent({
  render: compile(element)
})

Method 8: using `setup` function and `h` factory

import { h, defineComponent } from "vue"

export default defineComponent({
  setup() {
    return () => h('li', 'The quick brown fox...')
  }
})

Method 9: using `setup` and `compile` function

import { defineComponent, compile } from "vue"

export default defineComponent({
  setup() {
    return compile('<li>The quick brown fox...</li>')
  }
})

Boring? 🤣 We are not done yet 🚗

Method 10: using functional component and `h` factory

import { h } from "vue"

export default function () {
  return h('li', 'The quick brown fox...')
}

Method 11: ⛔️ using functional component and `compile` function

JUST AN EXPERIMENT, DO NOT USE

import { compile } from "vue"

const compiled = compile('<li>The quick brown fox...</li>')
export default function () {
  return compiled({})
}

And here we have the method that is used by most Vue developers, Single File Component

Method 12: using SFC `template` tag

<template>
  <li>The quick brown fox...</li>
</template>

Method 13: using SFC without `template` tag

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  template: "<li>The quick brown fox...</li>",
})
</script>

Actually when you use SFC with a template tag, compiler will convert the template to render function.

So basically you can use SFC without a template tag and use one of the methods above (all of them work).

But we are not done yet. We have 3 more methods.

Let me introduce you JSX 🤣

Method 14: using `render` option and JSX

import { defineComponent } from "vue"

export default defineComponent({
  render() {
    return <li>The quick brown fox...</li>
  },
})

Method 15: using `setup` function and JSX

import { defineComponent } from "vue"

export default defineComponent({
  setup() {
    return () => <li>The quick brown fox...</li>
  },
})

Method 16: using functional component and JSX

export default function () {
  return <li>The quick brown fox...</li>
}

Does last one look familiar? 👀 Hello to React friends!
Yes a functional component with JSX in Vue looks identical with React function component.

Here is full example that you can play around
https://github.com/unrevised6419/vue-render-everywhere

That's all for today. Thanks for reading my blog posts!
Never stop learning. Bye! 👋

Cover Photo by Joshua Eckstein on Unsplash

🥑 Put your React on a diet

All In Developer — Fri, 22 Oct 2021 02:28:39 +0000

For a long time I heard people complaining that React & ReactDOM has a huge size, and everyone recommended to use Preact instead.

react & react-dom bundle
https://bundlephobia.com/package/react
https://bundlephobia.com/package/react-dom
preact bundle
https://bundlephobia.com/package/preact

Me personally never had the opportunity to try and migrate a React app to Preact till today.

Chișinău, capital of Moldova has public transport tracking. And we Open Source enthusiasts made a simple app that shows on a map, live location of desired trolleybuses. Roata Wăy

We are using Create React App and some other React third party libraries.

In docs Preact says you need to alias react and react-dom to preact/compat for everything to work. But here we have a problem, create-react-app does not allow aliases by default, you need to eject or use @craco/craco or react-app-rewired.

Because I didn't wanted to add any more configuration to the project, I started to analyse internals of create-react-app maybe I can find any backdoors. Nothing found.

Then I remembered two ways you can install packages using npm

1. Install package (e.g. my-package) from local directory

npm install ../package-directory

This will add in package.json such a line:

"my-package": "file:../package-directory",

2. Install package under a different name

npm install custom-name@npm:react

This will add in package.json such a line:

"custom-name": "npm:react@^17.0.2",

And I realised that npm: is just the protocol, and we can use other protocols, like file:

And what I did next, was amazing to me 😀

Install Preact dependency

npm install preact

Install preact/compat folder under react and react-dom name combining both methods

npm install react@file:node_modules/preact/compat
npm install react-dom@file:node_modules/preact/compat

package.json changes:

"preact": "^10.5.15",
"react": "file:node_modules/preact/compat",
"react-dom": "file:node_modules/preact/compat",

And create this script.

npm set-script postinstall "rm -f node_modules/react/src/index.d.ts"

This will remove preact/compat types so TypeScript can consume @types/react instead.

npm run start and Boom 💥 our app is working 🚀 and we got rid of almost 34KB from bundle.

There is no need to configure your build system at all. It just works!

Pull Request with changes
Netlify Build Details
Application Preview

That's all for today! Bye!

Cover Photo by Brooke Lark on Unsplash

🗜️ Optimal Tuple vs Record

All In Developer — Wed, 13 Oct 2021 18:21:34 +0000

Let's say we have this createStore function:

Ignore the implementation, we focus only on return value.

function createStore() {
  const state = 0;
  const dispatch = () => { /* ... */ };
  return /* ... */;
}

What is a Store ? See Flux In-Depth Overview
React uses Redux, Vue uses Vuex, Angular uses NgRx

And we have two ways to return state and dispatch:

Record:

What is a Record? Wikipedia

function createStore() {
  // ...
  return { state, dispatch };
}

const { state, dispatch } = createStore();
console.log(state);
dispatch();

Tuple:

What is a Tuple? Wikipedia

function createStore() {
  // ...
  return [state, dispatch];
}

const [state, dispatch] = createStore();
console.log(state);
dispatch();

We used Destructuring assignment when called our createStore

Now let me show you something amazing ✨ ✨ ✨ We will build both examples using webpack

Record:

(()=>{const{state:t,dispatch:s}={state:0,dispatch:()=>{}};console.log(t),s()})();

Tuple:

(()=>{const[o,c]=[0,()=>{}];console.log(o),c()})();

To the moon? 🚀 Compiled code that uses tuples is far smaller than one using record. And I suppose this scales when your code base is far bigger.

But why this happens 🤔 Well, we can assume that everything that is returned from anywhere is a public API to the consumer. And when using a Record return, webpack will consider all fields as a public API, and cannot obfuscate them.

On the other hand when returning a Tuple, webpack does not see any actual fields names, they are just items into an array, and it will obfuscate all the code.

Record also has an advantage that you can reorder the names of the API, while with Tuple you need to use the exact same order as it was defined.

What about the consumer that uses this public API? 🧑‍💻

Actually here is one more advantage when returning Tuple. Let's say that consumer wants the API under different name. Instead of state and dispatch to be value and execute

Record:

const { state: value, dispatch: execute } = createStore();

Tuple:

const [value, execute] = createStore();

As you can see consumer code becomes too verbose with Record example, and when he will compile his code, webpack again wil not have the ability to obfuscate his code 💯

Example: StackBlitz

Some dangerous tips:

Tuple can be destructured as Record, and you can change order:

function createStore() {
  // ...
  return [state, dispatch];
}

const { 1: dispatch, 0: state } = createStore();

Or you can return and Tuple and Record, and consumer can use API how it wants:

function createStore() {
  // ...
  const store = [state, dispatch];
  store.state = state;
  store.dispatch = dispatch;
  return store;
}

const [state, dispatch] = createStore();
const { 0: state, 1: dispatch } = createStore();
const { state, dispatch } = createStore();

Conclusion

In the end I think that using tuples is a better approach.
I think React team when released hooks took this into consideration for hooks that return multiple values like useState.

Thanks for reaching the end of this blog post 🙏

Cover Photo by Pietro Mattia on Unsplash

🧬 JSX at lowest level

All In Developer — Thu, 07 Oct 2021 21:58:07 +0000

this post is a precursor for upcoming JSX posts

So we all heard that JSX is a specific JavaScript syntax that is used by React to render components. Well, I would say JSX is just HTML in JavaScript. Or Java-Script-Xml 😂 because HTML is a sibling of XML and children of SGML. Or maybe is just Java-Script e-X-tended.

When people ask me what is React? I tell them that React is just JavaScript functions that return HTML. And this is basically a template engine.

function Component() {
/* ^^^^^^^^^^^^^^^^ */
/*   ^^^ JavaScript */

  return <div className="yay">lorem ipsum</div>
         /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
         /*       ^^^ HTML                   */
}

Draft: JSX Specification
XML-LIKE SYNTAX EXTENSION TO ECMASCRIPT
http://facebook.github.io/jsx/

Ok, but HTML syntax is allowed only in the DOM, browser JavaScript does not support it. So it means we need to compile that to something that is supported by the browser.

JSX is just some syntactic sugar that is compiled to valid JavaScript.

What is JSX Pragma?
https://www.gatsbyjs.com/blog/2019-08-02-what-is-jsx-pragma/
https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#pragma

At the moment it compiles to something like this.

function Component() {
  return React.createElement("div", { className: "yay" }, "lorem ipsum");
}

As you can see the <div> syntax sugar is compiled to React.createElement. That's why we need to have React imported at the top of the file. Otherwise we will get an runtime error that React cannot be found.

import React from 'react'

Production createElement implementation
Development createElement implementation

But that was until React v17.0, Babel v7.9 and TypeScript v4.1, because after that they decided to extract JSX creation in a separate factory detached from React, and it is imported automatically 🚀 🚀 🚀

Production jsx implementation
Development jsx implementation

Are you still here? Let's go deeper 😀

So if everything is configured correctly, this example:

function Component() {
  return <div className="yay">lorem ipsum</div>
}

Will be compiled to something like this:

import { jsx } from "react/jsx-runtime";
function Component() {
  return jsx("div", { className: "yay", children: "lorem ipsum" });
}

In a future stable release (already), React will support a group of new functions for instantiating JSX elements as an alternative to the legacy general-purpose React.createElement function. This will allow optimizing them better in the future.

So we see that <div> syntax sugar is compiled to jsx(...) at build time, but what happens with this call at runtime? Well, let's console.log this call.

When React calls Component

function Component() {
  return jsx("div", { className: "yay", children: "lorem ipsum" });
}

It will return:

function Component() {
  return {
    $$typeof: Symbol('react.element'),
    props: { className: 'yay', children: 'lorem ipsum' },
    type: "div",
  };
}

Actually there is an open RFC that it seems that in the end React team will decide to compile directly JSX down to this object that is returned.

And for example if we want to render our Compnent to the DOM. Having this call

ReactDOM.render(<Component />, rootElement);

It will be compiled to this:

ReactDOM.render(
  { $$typeof: Symbol('react.element'), type: Component },
  rootElement
);

In the end our components are just some functions that return some objects that represent what we want rendered. So when we create our components, what we return is not what is rendered. ReactDOM calls our function components with some props, see this object definition that is returned and decides what and how to render on the screen. And JSX? JSX is just some syntax that is familiar to us because we know HTML.

But now we know that till our component goes down to ReactDOM it passes through some steps and transformations.

Also JSX is no more a React only thing, it's already used in a lot of projects, like vue, stenciljs, dom-chef, and many others...

Have a feeling that noone is reading these articles 😀
Thanks reader if you are here! ♥️

Cover Photo by Alexandre Debiève on Unsplash

🔗 Next.js, Universal and Nuxt.js static redirects

All In Developer — Mon, 04 Oct 2021 20:25:49 +0000

Frameworks like Next.js (React 💙), Nuxt.js (Vue 💚) and Universal (Angular ❤️) allow you to register redirects.

Next.js allows you to register redirects using redirects function inside next.config.js
Nuxt.js allows you to register redirects using redirect-module in nuxt.config.js
Universal allows you to register redirects at server engine router level. e.g. @nguniversal/express-engine

But in all the cases when your app is served, it should stay on top of a nodejs server to handle all the requests.

But I want my application to be a static served application that lives only on client, without a server 😢

Well, this is the single limitation of all the frameworks redirects, but don't be sad, we have a solution, that comes with it's own limitations 😄

Say Hello to HTML Redirections 🚀

From what MDN says, HTML Redirections are a way to make redirects using a meta tag in your HTML head when you don't have control over the server.

Example:

<meta http-equiv="Refresh" content="0; URL=https://example.com/">

This is all we need to know. The 0 in the beginning of the content attribute is the delay in seconds when redirect should happen.

Limitations

RegExp is not supported, like in server redirects
Status code cannot be changed
A small payload delay for fetched HTML

Taking this idea, we can apply it to our frameworks, and create static HTML redirects. Taking into consideration that all frameworks have a folder where you can put your public static assets, we can create html files with our meta tag for redirects.

Next.js with React uses public folder
Nuxt.js with Vue uses static folder
Universal with Angular uses assets folder

Example (Next.js)

Let's say that on my iamandrewluca.com website I want to have addresses that redirect to my social profiles. This is a good example in case that you want someone to fast access your social profile, or in case you change it, Just change the redirect address e.g.

iamandrewluca.com/dev ➡️ dev.to/iamandrewluca
iamandrewluca.com/github ➡️ github.com/iamandrewluca
iamandrewluca.com/twitter ➡️ twitter.com/iamandrewluca
...

What I have to do now is to create 3 files in my public folder:

public/dev.html

<meta http-equiv="Refresh" content="0; URL=https://dev.to/iamandrewluca">

public/github.html

<meta http-equiv="Refresh" content="0; URL=https://github.com/iamandrewluca">

public/twitter.html

<meta http-equiv="Refresh" content="0; URL=https://twitter.com/iamandrewluca">

Next we build our static html application:

npm run build # build app
npx next export # export as static html
npx serve out # serve static at http://localhost:5000

Now if I access http://localhost:5000/dev it will automatically go to https://dev.to/iamandrewluca.

No server
No JavaScript.

You can check this live example on my simple website iamandrewluca.com

F.A.Q

Why don't do this in javascript with location.href?

If you will do this in JavaScript you will have to wait the whole bundle of Js to load in browser then redirect, this takes time. Read also this article from Kent C. Dodds

What about redirect status code?

Unfortunately using this method you cannot set redirect status code, it will be a simple 200 status code, because it's a html served page.

Why not use hosting service redirects functionality?

If your hosting service supports such thing, sure do. Should be event faster, and you can also change redirect status code

How does browser know to open /dev.html from /dev?

This is not a browser thing, also server deals with this. Most servers have a list of static files to be served by default like: *.html, index.html, index.php and others. Also instead of public/dev.html you can have public/dev/index.html, will have same effect. Use this in case you need nested redirects.

Where is html and head tag from HTML files?

Browsers automatically add these tags. Also less html, faster response.

It is possible to use RegExp to catch multiple routes?

Unfortunately this is not possible.

Bonus 🎁 🧨 🚀

NPM Package that generates automatically HTML files from a JSON file!

Having redirects.json

{
  "redirects": [
    { "from": "/dev", "to": "https://dev.to/iamandrewluca" },
    { "from": "/github", "to": "https://github.com/iamandrewluca" },
    { "from": "/twitter", "to": "https://twitter.com/iamandrewluca" }
  ]
}

And executing:

npx redirects.json out

Will generate all above files. You can add this step as a post build step.

That's all for today! Thanks for reading my blog posts!

Cover Photo by Javier Quiroga on Unsplash

🍂 Remove gone git branches

All In Developer — Thu, 30 Sep 2021 20:31:13 +0000

tl;dr Alias for removing local branches that are gone on remote

# ~/.gitconfig file
[alias]
    gone = "!f() { git fetch --all --prune; git branch -vv | awk '/: gone]/{print $1}' | xargs git branch -D; }; f"

git gone

If your git workflow is using Pull Requests that are merged into main branch, after a while your local list of branches will get very messy, because most of the time the PR is merged and remote branch is deleted.

However on local you just create a new branch from main for a new feature/fix, and you leave the previous branch behind without deleting it.

Let's start with this, list all local branches with their remotes

git branch -vv

  feature-1 4ea9770 [origin/feature-1] test commit
  feature-2 4ea9770 [origin/feature-2] test commit
  feature-3 4ea9770 [origin/feature-3] test commit
  feature-4 4ea9770 [origin/feature-4] test commit
  feature-5 4ea9770 [origin/feature-5] test commit
  feature-6 4ea9770 [origin/feature-6] test commit
  feature-7 4ea9770 [origin/feature-7] test commit
* main      4ea9770 [origin/main] test commit

Next we remove some remote branches, fetch remote info, and list branches again

git fetch --prune
git branch -vv

  feature-1 4ea9770 [origin/feature-1: gone] test commit
  feature-2 4ea9770 [origin/feature-2] test commit
  feature-3 4ea9770 [origin/feature-3: gone] test commit
  feature-4 4ea9770 [origin/feature-4] test commit
  feature-5 4ea9770 [origin/feature-5] test commit
  feature-6 4ea9770 [origin/feature-6] test commit
  feature-7 4ea9770 [origin/feature-7: gone] test commit
* main      4ea9770 [origin/main] test commit

As you can see there are some lines that have gone, that means that the remote branch is gone, so origin/feature-1, origin/feature-3, origin/feature-7 remote branches don't exist anymore, but we still have them locally. And with time this list can get very big.

Let's get back to our alias. Now that we have this gone keyword in the branch list, we can hook in and get the branch name and delete it. For example to manually delete feature-7 we would do:

# Fetch info for all remotes and prune info of missing remote branches
git fetch --all --prune
# List all branches to see what is gone
git branch -vv
# Delete desired branch
git branch -D feature-7

Now let's combine all these 3 into a single one liner 🚀

git fetch --all --prune; git branch -vv | awk '/: gone]/{print $1}' | xargs git branch -D;

Here we use pipe (|) operator to pass output from one command to another pipe.


`git fetch --all --prune` just fetches remotes info
`git branch -vv` list branches and pipes output lines to awk
`awk '/: gone]/{print $1}'` find lines with `gone`, select first column (which is branch name) and pipe to xargs
`xargs git branch -D` takes received branches names and deletes them

And to make this one liner a git alias we put it into a function that will be called 💻

You can add manually the alias in your ~/.gitconfig file

# ~/.gitconfig file
[alias]
    gone = "!f() { git fetch --all --prune; git branch -vv | awk '/: gone]/{print $1}' | xargs git branch -D; }; f"

Or follow these steps. Usually is a single line, but because of multiple quotes, double quotes and dollar signs we have to do it in multiple steps using a temporary file:

Put the alias code in alias temporary file

echo "f() { git fetch --all --prune; git branch -vv | awk '/: gone]/{print \$1}' | xargs git branch -D; }; f" > alias

Consume alias file for git alias command

git config --global alias.gone "!`cat alias`"
# remove temporary created file
rm alias

Now let's do a full demo 😮‍💨

git branch -vv

  feature-1 4ea9770 [origin/feature-1] test commit
  feature-2 4ea9770 [origin/feature-2] test commit
  feature-3 4ea9770 [origin/feature-3] test commit
  feature-4 4ea9770 [origin/feature-4] test commit
  feature-5 4ea9770 [origin/feature-5] test commit
  feature-6 4ea9770 [origin/feature-6] test commit
  feature-7 4ea9770 [origin/feature-7] test commit
* main      4ea9770 [origin/main] test commit

Next I deleted all feature branches on remote. And call git gone

git gone

Fetching origin
From /Users/iamandrewluca/Temp/gone-bare
 - [deleted]         (none)     -> origin/feature-1
 - [deleted]         (none)     -> origin/feature-2
 - [deleted]         (none)     -> origin/feature-3
 - [deleted]         (none)     -> origin/feature-4
 - [deleted]         (none)     -> origin/feature-5
 - [deleted]         (none)     -> origin/feature-6
 - [deleted]         (none)     -> origin/feature-7
Deleted branch feature-1 (was 4ea9770).
Deleted branch feature-2 (was 4ea9770).
Deleted branch feature-3 (was 4ea9770).
Deleted branch feature-4 (was 4ea9770).
Deleted branch feature-5 (was 4ea9770).
Deleted branch feature-6 (was 4ea9770).
Deleted branch feature-7 (was 4ea9770).

I like my local repo to always be clear. And in the past I had always to check what branches are deleted on remote and delete them also locally. Now I don't have to remember anything. Just git gone

Are you still here? 😊 Thanks for reading my blog posts! 🎉 🎈

You'll miss me when I'm gone ♥️

Initial idea by Tom Witkowski on Twitter

Cover Photo by Birti Ishar on Unsplash

🔍 Bookmarklets + Browser Search Engine

All In Developer — Wed, 29 Sep 2021 19:38:37 +0000

This post may be relevant mostly to developers or who loves automation. The Post covers two topics, and a combination of both in the end. But we will start with easy one first.

Bookmarklets (medium)
Browser Search Engine (easy)
Bookmarklets + Browser Search Engine (hard)

Browser Search Engine

Nowadays each browser allows you to type anything in the address bar. And it will open the website if what you typed is an URL, or just open your default search engine with your query.

What is cool that browsers allow you to change or add your own custom search engines 🎉

As you can see in URL field you put anything you want and %s will be replaced with what you entered in address bar. This gives us powers.

Examples:

https://www.npmjs.com/package/%s Go to NPM package
https://you-org.atlassian.net/browse/%s Go to Jira task
https://www.typescriptlang.org/dt/search?search=%s Search TypeScript Types
https://caniuse.com/#search=%s Check a WEB feature

Actually most of the sites allow you to search on them, and you can take advantage of this, and reduce your time searching with custom search engines.

Tip: You can make your website to register automatically as a custom search engine, see OpenSearch description format

And we are done with first part of this post 😮‍💨

Bookmarklets

This is a more advanced topic because involves writing code 🧑‍💻 A bookmarklet is a simple browser bookmark (🔖), but in place of URL it is a specific code.

Here is a very simple example. Create a bookmark and in place of URL put content below, then click on it. You will get that message. The trick is so that your code should start with javascript:

javascript:alert('Hello World');

I have a list of such bookmarklets that do different stuff.

Here is a simple code template to get started (this is an IIFE):

javascript: void ((function() {
  /* Your code goes here */
})());

And we are done with our second part of the post 😮‍💨

Bookmarklets + Browser Search Engine

Are you still here? 🤔 Soooo. What would happen, and what we can do if we put such a bookmarklet script into the URL field of a custom search engine? To the moon 🚀 🚀 🚀

We can run a script but also we have access to what user introduced into address bar. Here is our template a little bit modified.

javascript: void ((function(s) {
  /* Your code goes here */
  /* `s` is what user typed in address bar */
})('%s'));

We put %s browser placeholder for query as an argument when calling our IIFE.

Let's modify our script above to show us the message we typed in address bar.

javascript: void ((function(s) {
  alert(s);
})('%s'));

And a real exmple. Recently I made a static Bookmarklet for Google Meet, when clicked, it will open my video using Picture in Picture mode

Having this power of user input, we can register it as a custom search engine, and give user name in the input, and open a specific user video as Picture in Picture. So from bookmarklet I linked above we need to make a few changes.

From this:

javascript: void ((function() {
  // ...
  const userName = 'You';
  // ...
})());

To this:

javascript: void ((function(userName = 'You') {
  // ...
})('%s'));

Now whenever I need to open some person video as PiP, I just activate this custom search engine using shortcut, and typing his name and hit Enter.

Easy Peasy Lemon Squeezy 🍋 🍋 🍋

For me when I realised that this is possible it was an Eureka!!! moment.

Now I have to find different ways to simplify, automate and make faster my day to day web surfing experience!

Here is again my current list of Bookmarklets.
If you have any crazy idea that could fill that list, I would be glad to implement it, if of course it will be possible 😃

Thanks for reaching the bottom 😀

Cover Photo by Daniel Lerman on Unsplash

🔺 Flat React Doom Pyramid in 1LOC

All In Developer — Wed, 22 Sep 2021 21:47:08 +0000

Everyone was happy when React Team announced the new stable Context API, and everyone ditched Redux. But that's not the point.

After 1 year every codebase entrypoint looked like this at least.

<I18nProvider>
  <DataProvider>
    <ActiveDialogProvider>
      <PublicFetchProvider>
        <AuthProvider>
          <PrivateFetchProvider>
            <AuthFetchProvider>
              <CustomThemeProvider>
                <CustomMuiPickersUtilsProvider>
                  <LegalsProvider>
                    <PaymentMethodsProvider>
                      <CartProvider>
                        <App />
                      </CartProvider>
                    </PaymentMethodsProvider>
                  </LegalsProvider>
                </CustomMuiPickersUtilsProvider>
              </CustomThemeProvider>
            </AuthFetchProvider>
          </PrivateFetchProvider>
        </AuthProvider>
      </PublicFetchProvider>
    </ActiveDialogProvider>
  </DataProvider>
</I18nProvider>

Soooo, should we do something about this? Most of the times there is no reason. Nevertheless, here is a simple performant solution in 1 line of code

const Pipe = (p) => p.children.reduceRight((c, e) => ({ ...e, props: { ...e.props, children: c }}));

You can name it however you want:

Flatten
Compose
Pipe
Squash
Doom 😂
Nest
Inflate

And how will look above example? Better!

<Pipe>
  <I18nProvider />
  <DataProvider />
  <ActiveDialogProvider />
  <PublicFetchProvider />
  <AuthProvider />
  <PrivateFetchProvider />
  <AuthFetchProvider />
  <CustomThemeProvider />
  <CustomMuiPickersUtilsProvider />
  <LegalsProvider />
  <PaymentMethodsProvider />
  <CartProvider />
  <App />
</Pipe>

This function component takes all its children and nests them from first to last, where first one will be the most outside the tree, and the last one will be last in the tree.

Here is one more variation with TypeScript and different API

function Flatten(props: PropsWithChildren<{ elements: ReactElement[] }>) {
  const { elements: e, children: init } = props;
  return <>{e.reduceRight((c, e) => cloneElement(e, { children: c }), init)}</>;
}

And the usage will be like this:

<Flatten
  elements={[
    <I18nProvider />,
    <DataProvider />,
    <ActiveDialogProvider />,
    <PublicFetchProvider />,
    <AuthProvider />,
    <PrivateFetchProvider />,
    <AuthFetchProvider />,
    <CustomThemeProvider />,
    <CustomMuiPickersUtilsProvider />,
    <LegalsProvider />,
    <PaymentMethodsProvider />,
    <CartProvider />,
  ]}>
  <App />
</Flatten>

I went through multiple iterations, and in the end I prefer first Pipe one liner that I showed.

Sandboxes experiments:

Thanks for coming to my TED talk! :)

Cover Photo by Kévin et Laurianne Langlais on Unsplash

🔐 Private Route in React Router v6

All In Developer — Tue, 21 Sep 2021 23:37:28 +0000

Things are changing fast in WEB today, and react-router v6 is in beta already and around the corner. 🤔

This is just for learning purposes only, react-router v6 is still in beta, use at your own risk

Private routes in v5 and below were done in a specific way using a custom component mostly named PrivateRoute that was most of the times just a wrapper and composition of basic Route and Redirect e.g.

function PrivateRoute(props) {
  let { component: Component, children, render, ...rest } = props
  let auth = useAuth();
  return (
    <Route
      {...rest}
      render={() => auth
        ? <Component />
        : <Redirect to="/login" />
      }
    />
  );
}

function App() {
  return (
    <BrowserRouter>
      <Route path="/" component={Public} />
      <PrivateRoute path="/private" component={Private} />
    </BrowserRouter>
  );
}

But taking a look at v6 docs it seems that things changed a little bit, and we need to think a little bit different about it.

For info about all API reference see the link

Let's move on.

Some things that we used to create PrivateRoute have changed a little bit

Redirect is now Navigate
Route props changed and is just a stub component now
A new component Routes appearead

In v6, routes are rendered in such a manner

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Public />} />
        <Route path="/private" element={<Private />} />
      </Routes>
    </BrowserRouter>
  );
}

const Public = () => <div>public</div>;
const Private = () => <div>private</div>;

So as you can see, no more render props or component prop.
You need to pass a direct JSX element (don't worry about performance if you do)

Ok now let's take a look at Route component source code

/**
 * Declares an element that should be rendered at a certain URL path.
 *
 * @see https://reactrouter.com/api/Route
 */
export function Route(_props: RouteProps): React.ReactElement | null {
  invariant(
    false,
    `A <Route> is only ever to be used as the child of <Routes> element, ` +
      `never rendered directly. Please wrap your <Route> in a <Routes>.`
  );
}

Wait a minute where is the code? 👀 Well actually the parent component Routes will use the Route just as a host for the props and children, and do nothing more with the Route

For more info about Routes implementation see link

So how we do implement our PrivateRoute now? 🤔 If we do some adjustments to PrivateRoute props, it will look like this

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Public />} />
        <PrivateRoute path="/private" element={<Private />} />
      </Routes>
    </BrowserRouter>
  );
}

But this will not work. Routes will just take the props of PrivateRoute and ignore it's body totally. Even a console.log inside PrivateRoute will not be shown.

So what we do? 🤔 We do some more adjustments to PrivateRoute

function PrivateRoute({ children }) {
  const auth = useAuth();
  return auth ? <>{children}</> : <Navigate to="/login" />;
}

As you can see we changed Redirect to Navigate, and just return children if user is authenticated. And the usage of it also changes a little bit

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Public />} />
        <Route
          path="/private"
          element={
            <PrivateRoute>
              <Private />
            </PrivateRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

As you can see PrivateRoute also moves to element prop.

The implementation of PrivateRoute can be done in multiple ways.

Here is a different implementation of PrivateRoute using Outlet

function PrivateOutlet() {
  const auth = useAuth();
  return auth ? <Outlet /> : <Navigate to="/login" />;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/private-outlet" element={<PrivateOutlet />}>
          <Route element={<Private />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

The pros of this is that you can put multiple private sub routes under same route.

For a full example see this Codesandbox

That's all for today. Happy coding! 🎉 🎊 ✨

Keep your users secure!

Cover Photo by Maxim Zhgulev on Unsplash

🔧 Git remote readd alias

All In Developer — Tue, 13 Jul 2021 23:21:35 +0000

tl;dr Alias for removing Git remote and adding it back

git config --global alias.readd '!f() { REMOTE=$(git config --get remote."$1".url); git remote remove "$1"; git remote add "$1" "$REMOTE"; }; f'

git readd remote-name

When you work on a project that has a repository that allows forks, and with time has more and more recurring contributors, your git remotes starts to add up.

git remote -v

ion     git@github.com:ion-golovco/catalog-profesii.git (fetch)
ion     git@github.com:ion-golovco/catalog-profesii.git (push)
origin  git@github.com:code4moldova/catalog-profesii.git (fetch)
origin  git@github.com:code4moldova/catalog-profesii.git (push)
radu    git@github.com:Raduc4/catalog-profesii.git (fetch)
radu    git@github.com:Raduc4/catalog-profesii.git (push)
sergiu  git@github.com:YoSoySergio/catalog-profesii.git (fetch)
sergiu  git@github.com:YoSoySergio/catalog-profesii.git (push)

And if you are a person that keeps an eye on the repository graph and likes everything to be clean, you will start to see a lot of stale branches from other remotes that were not deleted after PR merge.

This happens, because most of the times, the maintainer checks out locally the branch from PR and does some small adjustments without bothering the contributor.

You can still remove the local branches after PR merge, but remote references will stay there till the contributor will not delete them from remote, because only contributor has the permission to delete branches from his fork, or who has write permissions.

GitHub a year ago introduced a solution for this. It allows you to delete the branch automatically after PR was merged.

https://docs.github.com/en/github/administering-a-repository/configuring-pull-request-merges/managing-the-automatic-deletion-of-branches

The only solution is to remove the remote, and all the references will dissapear. But we want to keep the remotes for future, so we don't have to add it again.

So we have to remove the remote, then add it back.

Using the classical way, I would do this steps:

use git remote -v to list all remotes
copy URL of desired remote
delete remote with git remote remove name-of-remote
add remote with git remote add name-of-remote PASTE_URL

After some time I saw that I repeat this pattern more and more, so I decided to create a git alias for it.

git config --global alias.readd '!f() { REMOTE=$(git config --get remote."$1".url); git remote remove "$1"; git remote add "$1" "$REMOTE"; }; f'

And it's usage would be like this:

git readd remote-name
git readd origin
git readd upstream
# ...

Let's simplify that one liner and understand what is happening there.

So Git allows you to add aliases like this.

git config --global alias.alias-name 'log -1 HEAD'

As you can tell, Git simply replaces the new command with whatever you alias it for. However, maybe you want to run an external command, rather than a Git subcommand. In that case, you start the command with a ! character.

In our case our external command is a simple bash function, and in the end we call that function. (... remaining content)

git config --global alias.readd '!f() { ... }; f'

Now let's inline the remaining content

REMOTE=$(git config --get remote."$1".url);
git remote remove "$1";
git remote add "$1" "$REMOTE";

So basically I do exactly same 3 steps above, but automated.

get remote URL with git config --get remote."$1".url
store in REMOTE the result
remove the remote "$1"
add remote with name "$1" with url REMOTE created before

"$1" represents the argument that was passed to alias

So, in the end I run:

git readd ion
git readd radu
git readd sergiu

And got this result, much cleaner.

If you are still here, thanks for reading my blog post 🙂

Cover image by Glenn Carstens-Peters on Unsplash

Forem: All In Developer

🧶 Implicit CLSX in React

Create new React App

Install clsx

Remove react

Install react under raw-react name (More about NPM Aliases)

Create own React that will export from raw-react

Install my-react as react package (More about NPM Aliases)

Patch JSX Runtime

Reinstall my-react as react package to update

Change App.js to see the changes

Start the app and let's check in browser

☢️ HTML Comment in React

Step 1

Step 2

Step 3

Step 4

Step 5

🎄 Render in Vue, 16+ ways

🚀 So let's start

🧰 Prerequisites

🎁 Methods to render in Vue

Method 1: template option as string

Method 2: template option as a selector

Method 3: template option as a HTMLElement

Method 4: using render option and h factory

Method 5: using render option and compile function

Method 6: using render option and compile function with selector

Method 7: using render option and compile function with HTMLElement

Method 8: using setup function and h factory

Method 9: using setup and compile function

Method 10: using functional component and h factory

Method 11: ⛔️ using functional component and compile function

Method 12: using SFC template tag

Method 13: using SFC without template tag

Method 14: using render option and JSX

Method 15: using setup function and JSX

Method 16: using functional component and JSX

🥑 Put your React on a diet

🗜️ Optimal Tuple vs Record

Conclusion

🧬 JSX at lowest level

🔗 Next.js, Universal and Nuxt.js static redirects

Say Hello to HTML Redirections 🚀

Example (Next.js)

F.A.Q

Bonus 🎁 🧨 🚀

🍂 Remove gone git branches

🔍 Bookmarklets + Browser Search Engine

Browser Search Engine

Bookmarklets

Bookmarklets + Browser Search Engine

🔺 Flat React Doom Pyramid in 1LOC

🔐 Private Route in React Router v6

🔧 Git remote readd alias

Install `clsx`

Remove `react`

Install `react` under `raw-react` name (More about NPM Aliases)

Create own React that will export from `raw-react`

Install `my-react` as `react` package (More about NPM Aliases)

Reinstall `my-react` as `react` package to update

Change `App.js` to see the changes

Method 1: `template` option as `string`

Method 2: `template` option as a selector

Method 3: `template` option as a `HTMLElement`

Method 4: using `render` option and `h` factory

Method 5: using `render` option and `compile` function

Method 6: using `render` option and `compile` function with selector

Method 7: using `render` option and `compile` function with `HTMLElement`

Method 8: using `setup` function and `h` factory

Method 9: using `setup` and `compile` function

Method 10: using functional component and `h` factory

Method 11: ⛔️ using functional component and `compile` function

Method 12: using SFC `template` tag

Method 13: using SFC without `template` tag

Method 14: using `render` option and JSX

Method 15: using `setup` function and JSX