[Daily Package] dedent

This content originally appeared on DEV Community and was authored by Javien Lee

Life before knowing dedent

Have you ever tried to write multi-line paragraph in template literal, but realized it preserves indentation, which ended up using string addition with \n?

function explain() {
  const description = `
    - 200 OK
      The request succeeded. The result meaning of "success" depends on the HTTP method:

      * GET: The resource has been fetched...
      * HEAD: The representation headers are...
      * PUT or POST: The resource describing...
      * TRACE: The message body contains the...
  `

  console.log(description)
}

explain()

$ bun index.ts

    - 200 OK
      The request succeeded. The result meaning of "success" depends on the HTTP method:

      * GET: The resource has been fetched...
      * HEAD: The representation headers are...
      * PUT or POST: The resource describing...
      * TRACE: The message body contains the...

Wait, do I need to remove the indentations?
Nah. I can't give up my beautifully formatted code.

function explain() {
  const description = '- 200 OK\n' +
    'The request succeeded. The result meaning of "success" depends on the HTTP method:\n\n' +
    '  * GET: The resource has been fetched...\n' +
    '  * HEAD: The representation headers are...\n' +
    '  * PUT or POST: The resource describing...\n' +
    '  * TRACE: The message body contains the...\n'

  console.log(description)
}

explain()

I'll take that. 🥲

For this reason, multiline text is always a headache for me.

Now you know dedent

But now, you don't have to negotiate with yourself anymore. Just use dedent.

import dedent from 'dedent'

function explain() {
  const description = dedent`
    - 200 OK
      The request succeeded. The result meaning of "success" depends on the HTTP method:

      * GET: The resource has been fetched...
      * HEAD: The representation headers are...
      * PUT or POST: The resource describing...
      * TRACE: The message body contains the...
  `

  console.log(description)
}

explain()

What I did was add dedent before the template literal. You don't believe it?

$ bun index.ts
- 200 OK
  The request succeeded. The result meaning of "success" depends on the HTTP method:

  * GET: The resource has been fetched...
  * HEAD: The representation headers are...
  * PUT or POST: The resource describing...
  * TRACE: The message body contains the...

It removes all the unnecessary indentation and makes it as we expected.

Why don't we try a more complex one?

import dedent from 'dedent'

const explainStatus = (status: string) => {
    switch(status) {
        case '2xx':
          return dedent`
            - 200 OK
              The request succeeded. The result meaning of "success" depends on the HTTP method:

              * GET: The resource has been fetched and transmitted in the message body.
              * HEAD: The representation headers are included in the response without any message body.
              * PUT or POST: The resource describing the result of the action is transmitted in the message body.
              * TRACE: The message body contains the request message as received by the server.

            - 201 Created
              The request succeeded, and a new resource was created as a result.
              This is typically the response sent after POST requests, or some PUT requests.
            `

        case '4xx':
          return dedent`
            - 400 Bad Request
              The server cannot or will not process the request due to something that is perceived to be a client error
              (e.g., malformed request syntax, invalid request message framing, or deceptive request routing).

            - 401 Unauthorized
              Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated".
              That is, the client must authenticate itself to get the requested response.
          `

          default:
            return 'not yet!'
      }
}

console.log(explainStatus('2xx'))

$ bun index.ts
- 200 OK
  The request succeeded. The result meaning of "success" depends on the HTTP method:

  * GET: The resource has been fetched and transmitted in the message body.
  * HEAD: The representation headers are included in the response without any message body.
  * PUT or POST: The resource describing the result of the action is transmitted in the message body.
  * TRACE: The message body contains the request message as received by the server.

- 201 Created
  The request succeeded, and a new resource was created as a result.
  This is typically the response sent after POST requests, or some PUT requests.

Soo smoooth!😇

This content originally appeared on DEV Community and was authored by Javien Lee

Print Share Comment Cite Upload Translate Updates

APA

Javien Lee | Sciencx (2024-08-30T12:17:05+00:00) [Daily Package] dedent. Retrieved from https://www.scien.cx/2024/08/30/daily-package-dedent/

MLA

" » [Daily Package] dedent." Javien Lee | Sciencx - Friday August 30, 2024, https://www.scien.cx/2024/08/30/daily-package-dedent/

HARVARD

Javien Lee | Sciencx Friday August 30, 2024 » [Daily Package] dedent., viewed ,<https://www.scien.cx/2024/08/30/daily-package-dedent/>

VANCOUVER

Javien Lee | Sciencx - » [Daily Package] dedent. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/30/daily-package-dedent/

CHICAGO

" » [Daily Package] dedent." Javien Lee | Sciencx - Accessed . https://www.scien.cx/2024/08/30/daily-package-dedent/

IEEE

" » [Daily Package] dedent." Javien Lee | Sciencx [Online]. Available: https://www.scien.cx/2024/08/30/daily-package-dedent/. [Accessed: ]

rf:citation

» [Daily Package] dedent | Javien Lee | Sciencx | https://www.scien.cx/2024/08/30/daily-package-dedent/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Life before knowing dedent

Now you know dedent

Related Posts