DEV Community: Laura Viglioni

Writing and Testing a stdin script with TypeScript

Laura Viglioni — Tue, 31 May 2022 02:59:39 +0000

Hello there, folks, how are you?

One of my motivations for writing texts here in dev.to is to compile information which took me a lot of effort to find in one place.

So, one of these days I was writing a small application in TypeScript that used stdin from the terminal

ts-node main.ts < input.txt

Everything went well until I had to test it. I spent more time than I'd like trying to find out how I would test this input. I tried a lot of different stuff that I saw on the internet but only one of them worked and this is the solution I'll present in this text.

Code Example

First of all, an example of a script in typescript that receives stdin line by line and terminates when an empty line is entered:

// main.ts
import * as readline from 'node:readline'
import { stdin as input, stdout as output } from 'node:process'

type RL = readline.Interface
type SomeFunction = (rl: RL) => (line: string) => void

const someFunction : SomeFunction = rl => line => {
  if (line === '') {
    rl.close()
  }

 /*
  * Do something with `line`
  */
  const result = // doSomething(line)

  console.log(result)
}


export const main = (): void => {
  const rl = readline.createInterface({ input, output })

  console.log("Please insert the data.")

  // reads line by line and calls someFunction(rl)(line)
  rl.on('line', someFunction(rl))
}

You can check out the readline docs

Preparing the project for testing

The question is: how would we test our main function that only calls our someFunction?

If we mock readline, we wouldn't be testing our app, we need to mock the stdin to get a realistic simulation of what our program is doing.

For that, we will use jest. In this particular project, these are my dependencies inside package.json:

  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-typescript": "^7.16.0",
    "@types/jest": "^27.0.3",
    "@types/node": "^16.3.1",
    "babel-jest": "^27.4.2",
    "jest": "^27.4.3",
    "mock-stdin": "^1.0.0",
    "typescript": "^4.3.5",
    // ...
  },

The other config files:

// jest.config.ts
export default {
  clearMocks: true,
  testMatch: ['**/test/**/*.spec.ts'],
}


// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

// tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2019",
    "lib": ["ES2019"],
    "sourceMap": true,
    "outDir": "./dist",
    "incremental": true,
    "esModuleInterop": true,
    "strict": true
  },
  "include": ["./src/**/*", "./test/**/*"],
  "exclude": ["node_modules"]
}

Testing

The package that does the trick is mock-stdin and is very simple to use:

// 1. import the lib
import mockStdin from 'mock-stdin'

// 2. start it 
const stdin = mockStdin.stdin()

// 3. use it
stdin.send("some input")

// 4. end it
stdin.end()

Here is an example of a test for our main function:

import mockStdin from 'mock-stdin'
import { main } from '../../src/main'

// mock console.log
console.log = jest.fn()

describe('main.ts', () => {
  let stdin: ReturnType<typeof mockStdin.stdin>

  // just a helper function to start the application
  // and mock the input
  const execute = (input: string): void => {
    main()
    stdin.send(input)
    stdin.end()
  }

  beforeEach(() => {
    stdin = mockStdin.stdin()
  })

  describe('when input is valid', () => {
    const input = // something
    const expectedResult = // another thing

    beforeEach(() => {
      execute(input)
    })

    it('should print the correct output', () => {
      expect(console.log).toBeCalledWith(expectedResult)
    })
  })

  // another describe blocks

 }

That's it, folks, I hope this text helps you somehow!
Bye bye

Use masks (yes!) and use emacs
xoxo

covidVaccines.forEach(takeYourShot)

Cover photo: Photo by Sigmund

Creating Haskell notebooks with org-mode

Laura Viglioni — Sun, 05 Sep 2021 03:30:51 +0000

If you only knew the power of the Dark Side!

Tools like Jupyter Notebook are very well known and useful, although limited to a few languages. Wouldn't it be amazing to have this power to create notebooks with any other language?

In this text, we will focus on doing it with Haskell, although it is virtually possible to be done using any language.

Emacs has a very powerful mode called org-mode, I once wrote a text about using it to write presentations with beamer. This same mode allows us to write code snippets (and execute them!), which is helpful to write notes/documents/presentations and export them to several formats like pdf, HTML, markdown, LaTeX and more!

Pre-requisites

Your Emacs will need some packages: org, org-babel and haskell-mode. If you use spacemacs it is enough to add these layers in your .spacemacs:

    (
     ;; ...
     dotspacemacs-configuration-layers
      '( org
         haskell
         ;; ...

Of course, you must have GHC on your machine.

Improving what we already have

It is important to note that once you have those packages installed, Emacs already knows how to execute Haskell blocks. The motivation of this text is to compile the learning I had these last few months of how to do it better.

To run a code block is as simple as:

    #+begin_src <language name>
      <code>
    #+end_src

and hit C-c C-c. If your Emacs knows how to compile it, it will execute the code and put the result below your code.

Writing multiline Haskell code

The default way that org-babel compiles your code is using GHCi, so if you have to write a multiline code, then you need to do it as if we were inside a GHCi buffer:

    :{
    -- a very verbose way to sum a sequence of numbers:  
    sumInts :: Int -> Int -> Int
    sumInts a b =
      if a == b
        then b
        else (+ a) $ (sumInts (a + 1) b)
    :}

    map (\[a,b] -> sumInts a b) [[0, 1] , [1, 3], [1,5], [2,10]]

    Prelude> [1,6,15,54]

i.e. we need to put the multiline part of the code inside :{ :} and what we want to be on the output on the last line. Also, it is important to note that, since it is running inside a GHCi, we will only see the result of the last call.

We can use the GHCi commands like :set -XDataKinds too :))

You may be asking yourself what is that :exports both. As I said earlier, we can export this org file to several formats. The :exports tag defines if we want to export the code, result, both or none. You can check out the other tags here.

Fun fact: GitHub understands org files without any manual export. You can use org files to READMEs, or even to post your notebooks.

Formatting the output

As you may have noticed in the excerpt above, the output has a Prelude> "prefix", and it might get bigger if you import other libs or executes multiline blocks:

    import Control.Monad

    :{
    map
      (\x -> x*x + x + 1)
      [1..10]
    :}

    Prelude Control.Monad| Prelude Control.Monad| Prelude Control.Monad| Prelude Control.Monad| [3,7,13,21,31,43,57,73,91,111]

We can avoid that with the :post tag. This tag executes a function, of your choice, with the output of your code block as input. To get that, we will use... Yes, another code block :D

At the beginning of your code, add these lines:

    #+name: org-babel-haskell-formatter
    #+begin_src emacs-lisp :var strr="" :exports code
      (format "%s"
              (replace-regexp-in-string
               (rx line-start
                   (+ (| alphanumeric blank "." "|" ">")))
               "" (format "%s" strr)))
    #+end_src

This is the file I use to store this func in my repo

For now on, on your Haskell code blocks, you add the #+name: you gave to that code block:

 #+begin_src haskell :exports both :post org-babel-haskell-formatter(*this*)
  <code>
 #+end_src

e.g.:

    :{
    map
      (\x -> x*x + x + 1)
      [1..10]
    :}

   [3,7,13,21,31,43,57,73,91,111]

You might be asking yourself right now:

Will you always have to write this template on the `#+begin_src`?

Unfortunately, yes. My recommendation is to create a snippet to generate this Haskell block code or to create some helper function that does that for you.

Will you have to define the formatter function on every org file?

No! :D

You can add to your config files an org file with that function definition and import it on your Emacs initiation using the org-babel-lob-ingest function:

    (with-eval-after-load "org"
      ;; load extra configs to org mode
      (org-babel-lob-ingest "~/path/to/org-config-file.org"))

Note that if you add a relative path (./org-config-file.org) it might fail.

A wild awesome feature appears!

One of the coolest stuff about using org to write code snippets, even if you will not execute them, is that you can use specific modes while writing your snippet!

With the cursor inside the #+begin_src block, call a function org-edit-special (, ' on spacemacs default binding), then Emacs will open a new buffer with your language mode. To exit it, hit C-c '.

Using external Haskell libs with Stack

This one was the trickiest to me, mostly because I'm not very familiar with the stack ecosystem. Maybe this is not the best way of doing it, but this is the way that I achieved it.

Stack has a global project by default, you can check it out on ~/.stack/global-project. Inside this directory, create a new project:

   $ stack new org-haskell new-template

On ~/.stack/global-project/stack.yaml add the following:

            packages:
              - org-haskell

After that, all the libs you have imported on your .stack/global-project/org-haskell/packages.yaml will be available on stack ghci. For org-babel to use it instead of regular GHCi, set this variable on your configs:

    (setq haskell-process-type 'stack-ghci)

Know the power of the Dark Side!

I do hope this is helpful for you.

org-mode is a very powerful tool, I do recommend that you know it and use it!

Stay safe, use masks (even if you already got your shots!) and use Emacs
xoxo

The header picture

Emacs as SQL client with LSP

Laura Viglioni — Mon, 22 Mar 2021 00:54:40 +0000

Hello there!

In this post, I show you how I configured my Emacs to be used as a SQL client using the LSP - Language Server Protocol :)

yes I'm a light-moder now, you can judge me

If this is not your first time here, you probably know that I'm a Spacemacs user, so it will be the focus of this tutorial, although with small adaptations you will be able to use on another "Emacs distro" or vanilla Emacs :)

Third party installs

We need to install the LSP support, the SQL linter and the SQL formatter, to do that we first need to install Go and Ruby.

In macOS, you can do that by:



brew install ruby
brew install go

You need to export gopath on your .bashrc or similar, in my case I use Oh My Zsh:



# add this line to your rc file
export PATH="$HOME/go/bin:$PATH"
# or
echo 'export PATH="$HOME/go/bin:$PATH"' >> .zshrc

Now we install the SQLS, sqlint and sqlfmt:



gem install sqlint
go get github.com/lighttiger2505/sqls
wget -q -O - https://github.com/mjibson/sqlfmt/releases/download/v0.4.0/sqlfmt_0.4.0_darwin_amd64.tar.gz | tar -xpvzf - --directory "$HOME/go/bin"
# for other distros you can check out the releases
# here: https://github.com/mjibson/sqlfmt/releases
# remember to extract the files to your go path

At this point if you ls your go/bin you should see this:



ls $HOME/go/bin                                               
> sqlfmt sqls

And, of course, install mysql and psql:



brew install mysql
brew install libpq
brew link --force libpq

Emacs installs

For Spacemacs users, you must add to you dotspacemacs-configuration-layers the lsp and the SQL layers:



( ;; ...
  dotspacemacs-configuration-layers
    '( ;; ...
      lsp
      (sql :variables
           sql-backend 'lsp
           lsp-sqls-workspace-config-path nil)
      ;; ...

Obs.:

I will explain the lsp-sqls-workspace-config-path later on this text.

This will work on the most recent branch of Spacemacs.

For non-spacemacs users, you must install sql and sql-indent and of course the lsp, this link might be of your interest.

Final configs

Well, now we must configure our emacs, i.e. add our databases to some variables inside emacs.

Your LSP will try to reach a config file on your root or project, to avoid that we set the lsp-sqls-workspace-config-path to nil, so we can configure it on elisp only, but if you prefer you can do it as
this doc exemplifies.

We have two variables now to deal: lsp-sqls-connections and sql-connection-alist. The first one is to give access to LSP to your db, the second to your emacs.

They have the following shape:



(setq lsp-sqls-connections
    '(((driver . "mysql") (dataSourceName . "yyoncho:local@tcp(localhost:3306)/foo"))
      ((driver . "postgresql") (dataSourceName . "host=127.0.0.1 port=5432 user=yyoncho password=local dbname=sammy sslmode=disable"))))

font

and



(setq sql-connection-alist
      '((pool-a
         (sql-product 'mysql)
         (sql-server "1.2.3.4")
         (sql-user "me")
         (sql-password "mypassword")
         (sql-database "thedb")
         (sql-port 3306))))

font

Buuuuut there are some issues.

You might have noticed that the form of dataSourceName is different if you are using mysql or postgres and there is a strange issue that emacs always asks for password on postgres databases even when you pass it to sql-connection-alist, the solution is to pass the full uri to the database variable.

But don't worry, I've got your back.

Macros making your life easier

What if we could do this?



(sql-add-mysql-db
 your-db-name
 :port 1234
 :user "username"
 :host "dbhost"
 :database "dbname"
 :password "mysql")

(sql-add-postgress-db
 your-db-name
 :port 1234
 :user "username"
 :host "dbhost"
 :database "dbname"
 :password "mysql")

Add these next functions and macros to your emacs config and you will be able to do that ;D



;;;###autoload
(defmacro any-nil? (&rest args)
  `(not (and ,@args)))

;;;###autoload
(defmacro throw-if (condition &optional error-description)
  "if condition is true, thrown an error"
  `(if ,condition (error (or ,error-description ""))))

;; Variables related to sql configs
(setq lsp-sqls-connections nil)
(setq sql-connection-alist nil)

;;;###autoload
(defun format-postgres-sqls (host port user password db)
  (format "host=%s port=%s user=%s password=%s dbname=%s"
          host port user password db))

;;;###autoload
(defun format-mysql-sqls (host port user password db)
  (format "%s:%s@tcp(%s:%s)/%s" user password host port db))

;;;###autoload
(defun format-postgres-uri (host port user password db)
  (format "postgresql://%s:%s@%s:%s/%s" user password host port db))


;;;###autoload
(defun add-to-sqls-connections (db-type data-src-name)
  (add-to-list 'lsp-sqls-connections
               (list (cons 'driver db-type)
                     (cons 'dataSourceName data-src-name))))

;;;###autoload
(defmacro add-to-sql-conection-alist (db-type name host port user password db)
  `(add-to-list 'sql-connection-alist
                (list (quote ,name)
                     (list 'sql-product (quote ,db-type))
                     (list 'sql-user ,user)
                     (list 'sql-server ,host)
                     (list 'sql-port ,port)
                     (list 'sql-password ,password)
                     (list 'sql-database ,db))))

;;;###autoload
(defmacro sql-add-postgres-db (name &rest db-info)
  "Adds a mysql database to emacs and lsp
   This macro expects a name to the database and a p-list of parameters
   :port, :user, :password, :database, :host
   The only optional is :port, its default value is 5432
   e.g.:
   (sql-add-postgres-db
        my-db-name ;; notice that there are no quotes here
        :port 1234
        :user \"username\"
        :host \"my-host\"
        :database \"my-db\"
        :password \"mypassword\")"
  `(let ((port (or ,(plist-get db-info :port) 5432))
         (user ,(plist-get db-info :user))
         (password ,(plist-get db-info :password))
         (host ,(plist-get db-info :host))
         (db ,(plist-get db-info :database)))
     (throw-if (any-nil? user password host db (quote ,name)) "there are info missing!")
     (let ((full-uri (format-postgres-uri host port user password db))
           (data-src-name (format-postgres-sqls host port user password db)))
       (add-to-sqls-connections "postgresql" data-src-name)
       (add-to-sql-conection-alist 'postgres ,name host port user password full-uri))))

;;;###autoload
(defmacro sql-add-mysql-db (name &rest db-info)
  "Adds a mysql database to emacs and lsp
   This macro expects a name to the database and a p-list of parameters
   :port, :user, :password, :database, :host
   The only optional is :port, its default value is 3306
   e.g.:
   (sql-add-mysql-db
        my-db-name ;; notice that there are no quotes here
        :port 1234
        :user \"username\"
        :host \"my-host\"
        :database \"my-db\"
        :password \"mypassword\")"
  `(let ((port (or ,(plist-get db-info :port) 3306))
         (user ,(plist-get db-info :user))
         (password ,(plist-get db-info :password))
         (host ,(plist-get db-info :host))
         (db ,(plist-get db-info :database)))
     (throw-if (any-nil? user password host db (quote ,name)) "there are info missing!")
     (add-to-sqls-connections "mysql" (format-mysql-sqls host port user password db))
     (add-to-sql-conection-alist 'mysql ,name host port user password db)))
```

Those are in my [elisp repo](https://github.com/Viglioni/laurisp)

And that's it!
With all these configs you can now use your Emacs as a SQL client with a linter, a backend and a formatter :))

Stay safe, use masks and use Emacs
xoxo

<img src="https://i.imgur.com/HL9QRRz.gif"/>

# edits
- there was an error on `sql-add-postgres-db`:
```lisp
;; wrong
 (data-src-name (format-postgres-uri host port user password db))
;; correct
 (data-src-name (format-postgres-sqls host port user password db))
```

Mocking dependencies with Jest + TypeScript

Laura Viglioni — Sat, 23 Jan 2021 02:49:49 +0000

Once I've heard a phrase that was something like

Pure applications can only heat machines

And well... It that is true. In real life, some parts of our application need to have contact with the external world, to be impure, and testing them might be tricky.

^{wait, what are (im)pure functions and side effects?}

Context

One common use is setting up feature flags for your application. Imagine you have the following function:

// file.ts
import { getFlag } from 'some-lib/flags'

export const myInpureFunction = () => {
  const flag = getFlag('flagName') as boolean
  return flag
    ? "this aplication is flagged"
    : "this application is not flagged"
}

And you need to test it, after all, you must guarantee your feature flag is behaving as you expected in your project. The problem is: we need to mock this getFlag function and what happens when its value changes.

Well... What is the problem, then?

The usual way of mocking functions/modules are:

// file.spec.ts

jest.mock('some-lib/flags', ()=>({
  getFlag: () => true // or false or any other value
})

But we have two contexts to cover with tests:

// file.spec.ts

describe('when feature flag is on', () => {...})

describe('when feature flag is off', () => {...})

And we need to change the getFlag mock.

In JavaScript, we can implement solutions like:

// file.spec.ts
import { getFlag } from 'some-lib/flags'

jest.mock('some-lib/flags')

describe('when feature flag is on', () => {
  getFlag.mockReturnValue(true)
  //...
})

Or using mockImplementation but none of these is allowed in TypeScript.

I've been across similar solutions like

// file.spec.ts
import * as flags from 'some-lib/flags'

jest.mock('some-lib/flags')

describe('when feature flag is on', () => {
  flags.getFlag = jest.fn()
  //...
})

But TypeScript won't allow this either.

Solution

There is a way.

Have you ever head the tragedy of Type Assertion the wise?

This is not a very intuitive solution, in my opinion, but once you see it, is easy to understand:

// file.spec.ts
import { getFlag } from 'some-lib/flags'

jest.mock('some-lib/flags')

describe('when feature flag is on', () => {
  beforeEach(() => {
    (getFlag as jest.Mock).mockReturnValueOnce(true);
  });

  //...
})

Asserting our name getFlag to jest.Mock type will allow us to use jest mock functions like mockReturnValueOnce.

In this case, any test inside this describe will use the true value from our mock, I think putting it inside a beforeEach block gives us more control and readability of what is happening, but you can put it inside an it block too.

Using mockReturnValueOnce instead of mocking implementation or return is a good practice because its changes will not affect any other test, be very careful with tests' side effects, they can lead you to trouble finding why sometimes your tests' suits pass and sometimes don't.

Well,

I do hope this is useful to you :)

Be safe, stay home, use masks and use Emacs (even though this is not an Emacs text haha)
Xoxo

Installing LaTeX themes on your machine/Emacs org-mode

Laura Viglioni — Thu, 21 Jan 2021 01:18:44 +0000

For those who need to write academic presentations, it is very common to make use of LaTeX. If you majored computer science you have probably seen a lecture like this:

Most of these presentations are created with beamer and its default themes, although beamer is very handy, these themes are a little bit old-fashioned. We can use modern custom themes like metropolis:

My org-mode code

I use org-mode to do most of my writing, that includes presentations, articles, personal notes etc. Org-mode can interpret LaTeX (and code blocks of a wide range of languages), but talking about org-mode is not the point of this text... (or is it? 👀)

The presentation example above was created with the following code:

#+options: H:3 email:nil tex:t toc:t
#+title: Any Computer Science Class
#+date: \today
#+author: Laura Viglioni
#+language: en
#+creator: Emacs 27.1 (Org mode 9.4)
#+startup: beamer
#+LaTeX_CLASS: beamer
#+LaTeX_CLASS_OPTIONS: [bigger]
#+beamer_theme: Copenhagen


* Graph theory
** Nodes and vertices
*** 
** BFS 
*** 
** DFS
*** 
* Algorithm Complexity
** Big O notation
***

Compiling that (M-x org-beamer-export-to-pdf or C-c C-e l P) will generate the first pdf shown in this text. Org-mode convert this to a LaTeX file and compiles it, in this example it the .tex generated is:

% Created 2021-01-20 Wed 21:22
% Intended LaTeX compiler: pdflatex
\documentclass[bigger]{beamer}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{graphicx}
\usepackage{grffile}
\usepackage{longtable}
\usepackage{wrapfig}
\usepackage{rotating}
\usepackage[normalem]{ulem}
\usepackage{amsmath}
\usepackage{textcomp}
\usepackage{amssymb}
\usepackage{capt-of}
\usepackage{hyperref}
\usetheme{Copenhagen}
\author{Laura Viglioni}
\date{\today}
\title{Any Computer Science Class}
\hypersetup{
 pdfauthor={Laura Viglioni},
 pdftitle={Any Computer Science Class},
 pdfkeywords={},
 pdfsubject={},
 pdfcreator={Emacs 27.1 (Org mode 9.4)}, 
 pdflang={Portuguese}}
\begin{document}

\maketitle
\begin{frame}{Outline}
\tableofcontents
\end{frame}

\section{Graph theory}
\label{sec:org391ab7d}

\subsection{Nodes and vertices}
\label{sec:org334895a}

\begin{frame}[label={sec:org5882936}]{}
\end{frame}

\subsection{BFS}
\label{sec:orge68a1c6}

\begin{frame}[label={sec:orgba23b2e}]{}
\end{frame}

\subsection{DFS}
\label{sec:orgc3fd777}

\begin{frame}[label={sec:orgf5f342e}]{}
\end{frame}

\section{Algorithm Complexity}
\label{sec:org5501e0f}

\subsection{Big O notation}
\label{sec:orgbe99555}

\begin{frame}[label={sec:orgb18e2bf}]{}
\end{frame}
\end{document}

^{woa... a little bit verbose compared to org, huh 👀}

But the most important lines for this text are:

#+beamer_theme: Copenhagen

or
^{aren't you convinced to use org at this point? 😨}

\usetheme{Copenhagen}

If we want to use custom themes, as we can read on metropolis documentation, we must compile the project and put the .sty files in the same directory as our .tex or .org that is calling the theme and change it from Copenhagen to metropolis.

But how to install themes on your system and use them without copying and pasting the .sty files every time?

Installing LaTeX themes to your machine/Emacs

First, you need to know where your system (or Emacs) looks for LaTeX files, including the styles (.sty) ones. The easiest way I know is using the command kpsewhich － if you are a mac user, it comes in MacTex package :)

$ kpsewhich -var-value=TEXMFHOME

In my case it returns:

/Users/laura.viglioni/spacemacs/Library/texmf

So you must create this dir, if it doesn't exist, and paste the .sty files in there and that's it, as simple as that :)

I hope this might be useful to you :)

Be safe, use masks and use Emacs
Xoxo

PS.: If you want to know more about org-mode, checkout these videos:

How to use CMD as a leader key on Spacemacs

Laura Viglioni — Sun, 17 Jan 2021 01:34:55 +0000

Okay... Maybe the title was a little bit of a clickbait, although it is indeed possible to do that, there is a price...

The problem

In Spacemacs or Emacs, in general, is not possible to bind commands or anything to a modifier key alone like meta, control, super, shift, command (macOS) etc and sometimes is very useful to bind that one button you barely use to some important functionality.

In my case I use Spacemacs, there are two very important commands I use a lot:

M-m: the leader key, i.e., the key that opens the default spacemacs menu, SPC if you use... the evil mode urgh...
And
C-M-m or M-m m: the major mode leader key, that opens the major mode menu, in evil mode the default binding is ,.

You can't normally bind these functionalities to modifier keys, you can bind M-[something], but not M- alone, but there is a way around...

The trick

After some hours suffering from this problem, I've come to a solution I've found here. If you can't bind something to a modifier key, change that key so it will not be a modifier key anymore...

You can bind in your system that key, in my case, right-cmd and right-option, to unused keys like f19 and f17. You can do it with software like xmodmap for GNU/Linux or karabiner for macOS.

Example with Karabiner

I've switched my right-cmd and right-option to f19 and f17. It's not the point of this text, but I really recommend that anyone who codes to switch capslock with control.

In my .spacemacs file:

(defun dotspacemacs/init ()
  ;; ...
  dotspacemacs-emacs-leader-key "<f19>"
  ;; ...
  dotspacemacs-major-mode-emacs-leader-key "<f17>"
  ;; ...
)

Now I can access these two menus with one key :)

The leader key:

The major mode leader key, in this case in `org-mode`:

One might say that in evil mode I'd have access to those menus in one key but you have to leave editing mode to do that, so it would cost you more than one key to achieve that.

The price

The only problem with this trick is that while in Emacs or not, you've lost those keys on your keyboard, or at least if you don't add any new binds using those f17 or f19 keys.

Conclusion

These changes improved a lot my life while I'm coding, what used to take me three keys to do I do in just one, and these are two of my most used shortcuts, it is not called leader key for nothing... haha.

I hope that it can help some of you as well :)

Be safe, use masks and use Emacs
Xoxo

Credits for the header picture
The gifs here are from Lucifer TV series

How I set up my emacs for TypeScript + React

Laura Viglioni — Sun, 11 Oct 2020 20:32:51 +0000

What exactly is my point here?

I recently knew typescript and with it, some joy and some tears. For a very long time, I've been working with React and using an emacs mode called rjsx-mode and I always loved it, I think this is a mode so good I use it even with regular JavaScript files.

Then I started with TypeScript and I was both amazed and saddened by it. For regular TS files, .ts it was amazing. The spacemacs typescript-mode was even better than rjsx-mode, all the types are shown perfectly in the bottom bar, autocomplete, auto-import... Everything. And thanks to tide. The sad part is: there is no tsx-mode, to write our .tsx files, we have to use web-mode. Don't get me wrong, this is a great mode, but React + Typescript were not the goals back then.

My point here is to put the best parts of all three modes in all of them!

This text might be a little long, but I hope it will help :)

Here my configs in practice:

An important point here: I use nowadays spacemacs and part of my code examples here will be in its way of doing things, but there is no magic, spacemacs is just emacs with some already written extra lisp (haha). You will be able to do it in your other emacs. But I really recommend you to start with spacemacs, especially if you are new to emacs. Changed my life, but this is a theme for another text.

Let's get started

You must have some modes installed. If you are using spacemacs most of them will be installed automatically when you install the layers. Those packages are:
rjsx-mode, typescript-mode, web-mode, tide, company, yasnippet, prettier-js (sorry if I forgot to list some pkg here)

Or in a simpler way, on your .spacemacs file add these layers on dotspacemacs-configuration-layers:



(defun dotspacemacs/layers ()
  ;; ... 
  dotspacemacs-configuration-layers
   '(
     html
     (typescript :variables
                 javascript-backend 'tide
                 typescript-fmt-tool 'prettier
                 typescript-linter 'eslint)
     (javascript :variables
                 javascript-backend 'tide
                 javascript-fmt-tool 'prettier
                 node-add-modules-path t)
 ;; ...

see typescript layer, javascript layer, html layer

and on dotspacemacs-additional-packages



;; ...
 dotspacemacs-additional-packages
   '(
     rjsx-mode
     yasnippet-snippets
     prettier-js
     ;; ...

Some of these imports require you to install third-party libs:



npm i -g tern prettier

If you are not using spacemacs, you must to require each package on your .emacs file. All the GitHub pages of these modes have clear instructions for the installation :)

Applying `tide` to `rjsx` and `web` modes

The basics configs are done, we have all the three modes installed and working, what now?

Tide is a great mode that does a lot of magic for you, I'd recommend you to read its README. It runs automatically on typescript-mode and it would be great to use it on your other js/ts modes.

I have all my config files separated and import them in dotspacemacs/user-config, but you can put all these extra configs directly on this section or on your .emacs file if you're not using spacemacs.

First, we define a tide function config, later apply it on all those modes:



(defun dotspacemacs/user-config ()
 ;; ...
 ;; tide def func:
 (defun tide-setup-hook ()
    (tide-setup)
    (eldoc-mode)
    (tide-hl-identifier-mode +1)
    (setq web-mode-enable-auto-quoting nil)
    (setq web-mode-markup-indent-offset 2)
    (setq web-mode-code-indent-offset 2)
    (setq web-mode-attr-indent-offset 2)
    (setq web-mode-attr-value-indent-offset 2)
    (setq lsp-eslint-server-command '("node" (concat (getenv "HOME") "/var/src/vscode-eslint/server/out/eslintServer.js") "--stdio"))
    (set (make-local-variable 'company-backends)
         '((company-tide company-files :with company-yasnippet)
           (company-dabbrev-code company-dabbrev))))

;; hooks
(add-hook 'before-save-hook 'tide-format-before-save)


;; use rjsx-mode for .js* files except json and use tide with rjsx
(add-to-list 'auto-mode-alist '("\\.js.*$" . rjsx-mode))
(add-to-list 'auto-mode-alist '("\\.json$" . json-mode))
(add-hook 'rjsx-mode-hook 'tide-setup-hook)


;; web-mode extra config
(add-hook 'web-mode-hook 'tide-setup-hook
          (lambda () (pcase (file-name-extension buffer-file-name)
                  ("tsx" ('tide-setup-hook))
                  (_ (my-web-mode-hook)))))
(flycheck-add-mode 'typescript-tslint 'web-mode)
(add-hook 'web-mode-hook 'company-mode)
(add-hook 'web-mode-hook 'prettier-js-mode)
(add-hook 'web-mode-hook #'turn-on-smartparens-mode t)
 ;; ...

These last lines add our tide setup for .tsx files and some other sub-modules that already exists in the other two modes.

Also, I recommend using these modes globally:



;; yasnippet
(yas-global-mode 1)

;; flycheck
(global-flycheck-mode)
(add-hook 'after-init-hook #'global-flycheck-mode)

;; company-mode 
(global-company-mode)

Using `rjsx` snippets on all three modes

The one thing rjsx-mode has better than the other two modes is its snippets, so let's use it everywhere :)

There are two ways here, the first you can find on your .emacs.d where is the default dir for snippets configs (on spacemacs is .emacs.d/layers/+completion/auto-completion/local/snippets/), the second is define your own:



(add-to-list 'yas-snippet-dirs "~/path/to/your/dir")
;; notice that this add-to-list must be called before this:
(yas-global-mode 1)

The procedure here is very simple: inside your snippet dir, create a dir with the mode name, i.e. web-mode/ and inside it create a file called .yas-parents with the mode names you want to "steal" the snippets. In our case:

snippets-dir/

web-mode/

.yas-parents

typescript-mode/

.yas-parents

On my own configs:

Add these lines to the files:

typescript-mode/.yas-parents



rjsx-mode

web-mode/.yas-parents



rjsx-mode
prog-mode
js-mode

Last but not least

With all these configs you're now able to auto-import, format/import on saving, check types, check definitions... Everything :)

But I'd like to recommend you another package called paredit: it is a lib for lisp languages (if you are coding in any lisp family this package should be mandatory!) but once you get the shortcuts, you want to use them in every language, it is possible with this function call:



(sp-use-paredit-bindings)

I also use neotree with all-the-icons to create my sidebar. Since this text is already too long, I will write about this specific config another day :)

And prettify symbols too!

I really hope you liked it and I hope this to be useful to you on your emacs journey.

This is my spacemacs config repo, all my lisps are in laurisp/ (haha) dir.

Be safe, use masks, stay home, use emacs.
xoxo

edit: I've found today some strange behaviour of import-js so I removed it from this tutorial. I'll try using tide for organizing imports on save, if I'm successful I update it here :)

Using URL as a global state - React Hook

Laura Viglioni — Tue, 07 Apr 2020 02:51:31 +0000

Sometimes in small applications using some state manager like Redux can be a little pain in the *, with this post I hope to help with a less spartan way to achieve this.

For this litle POC we will use ReactJS, NextJS and Dog Ceo Api

The main purpose of this solution is to avoid creating a state in a parent component and keep passing it and its setter as props to the children components.

In this example we have two components: a Home in pages/index/index.js and some buttons in pages/components/breed-buttons.
You can checkout full code at my github page and see it running here :)

Our Home component have a state called breed with "random" as its default value and this component makes an API call to get a random picture of a dog. Usually we would do something like:

const Home = () => {
    const [breed, setBreed] = useState("random")
    /* api call */
    /* display pic */

Our BreedButtons component is a simple div with some buttons with breed names that when clicked set our breed state with its respective breed value. For this to be possible, we must pass breed and setBreed as props:

const Home = () => {
    const [breed, setBreed] = useState("random")
    /* api call */
    <BreedButtons breed={breed} setBreed={setBreed}/>
    /* display pic */

Now just picture the scene when Home has a lot of children that might read or write this state. And you have more states. It might get messy.

In our helpers/hooks.js you will find this React Hook:

(obs.: if you do not know pathOr you should checkout ramda, it is an amazing functional lib!)

This function gets two parameters: first the name of this state and second the initial value. For instance, in our problem we want a state called breed with default value random. The use is very similar to React's useState:

const [breed, setBreed] = useRouterAsState("breed", "random")

Our hook will check if our URL has already some value for the state "breed", for instance https://global-state-example.herokuapp.com/?breed=husky, if yes it will set the state to "husky" or whatever it is placed after the equal sign, if not to our default value "random".

Whenever we change the state in any component, i.e.

setBreed("dalmatian")

the next router will change in URL to /?breed=dalmatian and all components the used our useRouteAsState will automatically update its value. If we have more states in our URL it will change only the "breed" state. That is why you name the state in useRouteAsState first parameter.

This is what our Home looks like:

where getDog is a syntax sugar for our API call in helpers/api.js. Our BreedButtons component contains the buttons that actually change our state and it looks like this:

Of course our approach has a lot of limitations such as: it simply does not make sense for some states to be in URL like loading or data, but it is very usefull to states like pagination, dark-mode etc.
Be careful, it might get messy if more than one component tries to change the state at the same time, so you must use it very carefully when thinking about concurrency.

On the other hand, more than just being handy not to have to pass the same state and setter to a lot of children, grandchildren again and again, the state in URL has a huge advantage of not losing context when the page is reloaded or when you hit back button - in mobile web development this behaviour is fundamental.

Another important point: sometimes you don't want to give the power of manually setting a state to the user just typing in the URL, specially if some of the states are being used in an API call. For this problem we have a partial solution.

If you check our pages/encoded/ code you will see that the components are very similar to our pages/index ones, except that our hook is imported from helpers/encoded-state.js. The code is a little bit longer so I won't print it here, but the main difference is instead of our URL be something like ?breed=labrador it will be ?c3RhdGVz=eyJicmVlZCI6ImxhYnJhZG9yIn0%253D. It is a Base64 encoding of

state: {
    breed: "labrador"
}

The user will be able to decode it, but it is a little bit safer than just let the state in plain text.

A last but not least point: you might have noticed that in our useRouteAsState we have a third parameter called r. In some older versions of NextJS the useRouter native hook does not work, so you must import withRouter from next/router and wrap your component using it, for example: export default withRouter(Home) with that you will receive a prop called router in Home component that is our third paramter.

I really hope you find this little trick useful. Any doubts or sugestions you can call me on my twitter account twitter.com/viglionilaura :)