Forem: Gabriel José

Creating a HTML Tag Function - Part 2

Gabriel José — Tue, 07 Feb 2023 20:32:02 +0000

Don’t forget to check out the first part of this tutorial. In this part I’m going to talk about the change of returning a string from the html tag function to returning a Document Fragment.

To do it we must create a template element, put the html text as its innerHTML, and then get the document fragment from the content property of the template. We can simple return the Document Fragment for now.

function html(staticText: TemplateStringsArray, ...values: any[]) {
    const fullText = staticText.reduce((acc, text, index) => {
        const stringValue = getCorrectStringValue(values[index])
        return acc + text + stringValue
    }, '')

  const template = document.createElement('template')
  template.innerHTML = fullText
  const documentFragment = template.content

    return documentFragment
}

Just by doing this you will need to replace the code to add the elements in the DOM.

document.body.innerHTML += html`<p>Hello World</p>`
// Replace to
document.body.append(html`<p>Hello World</p>`)

If you not make this replacement, you’ll notice that will be shown [object DocumentFragment] will the page instead of the Hello World text and the same happen with elements inserted as elements.

We need a way to catch the document fragment that is been inserted in the tagged template string and insert it into the other document fragment that is going to be created, to do so we’ll use a template element with a custom attribute, a then we’ll replace it for the document fragment it self.

interface ResourceMaps {
  elementsMap: Map<string, DocumentFragment>
}

function resolveValue(value: unknown, index: number, resourceMaps: ResourceMaps) {
  if (value instanceof DocumentFragment) {
    const elementId = `el="el-${index}"`
    resourceMaps.elementsMap.set(elementId, value)

    return `<template ${elementId}></template>`
  }

  return getCorrectStringValue(value)
}

function getCorrectStringValue(value: any) {
  if (value instanceof HTMLString) {
    return value
  }

  const isUnwantedValue = value === undefined
    || value === null
    || value === false

  if (isUnwantedValue) {
    return ''
  }

  return String(value ?? '')
    .replace(/\</g, '&lt;')
    .replace(/\>/g, '&gt;')
}

function html(staticText: TemplateStringsArray, ...values: any[]) {
  const resourceMaps: ResourceMaps = {
    elementsMap: new Map()
  }

    const fullText = staticText.reduce((acc, text, index) => {
    const currentValue = values[index]
    const stringValue = resolveValue(currentValue, index, resourceMaps)
        return acc + text + stringValue
    }, '')

  const template = document.createElement('template')
  template.innerHTML = fullText
  const documentFragment = template.content

    return documentFragment
}

If you notice, we take the document fragment and place it in a Map with a key using the index for the inserted value and then we return a string of a template element with that attribute. Since we’re building the full HTML text we need to always return a string, store the value and put some sort of placeholder to later we know where to work on. Many of the future features I’ll show you here will work the same way.

But it is not complete yet, we need to create another function to place those elements we have stored.

function placeElements(docFrag: DocumentFragment, elementsMap: ResourceMaps['elementsMap']) {
  for (const [elementId, elements] of elementsMap) {
    const placeholder = docFrag.querySelector(`[${elementId}]`)

    if (!placeholder) continue

    const parentElement = placeholder.parentElement ?? docFrag

    parentElement.replaceChild(elements, placeholder)
  }

  elementsMap.clear()
}

function html(staticText: TemplateStringsArray, ...values: any[]) {
  const resourceMaps: ResourceMaps = {
    elementsMap: new Map()
  }

    const fullText = staticText.reduce((acc, text, index) => {
    const currentValue = values[index]
    const stringValue = resolveValue(currentValue, index, resourceMaps)
        return acc + text + stringValue
    }, '')

  const template = document.createElement('template')
  template.innerHTML = fullText
  const documentFragment = template.content

  if (resourceMaps.elementsMap.size) {
    placeElements(documentFragment, resourceMaps.elementsMap)
  }

    return documentFragment
}

By doing this you’ll notice that everything returns to work just fine. You might be thinking, “All this to work as before?”, and yes, but by doing it we can add more features that were not possible before. With that in mind, lets add support for array values.

interface ResourceMaps {
  elementsMap: Map<string, DocumentFragment | unknown[]>
}

function resolveValue(value: unknown, index: number, resourceMaps: ResourceMaps) {
  if (value instanceof DocumentFragment || Array.isArray(value)) {
    const elementId = `el="el-${index}"`
    resourceMaps.elementsMap.set(elementId, value)

    return `<template ${elementId}></template>`
  }

  return getCorrectStringValue(value)
}

function placeElements(docFrag: DocumentFragment, elementsMap: ResourceMaps['elementsMap']) {
  for (const [elementId, elements] of elementsMap) {
    const placeholder = docFrag.querySelector(`[${elementId}]`)

    if (!placeholder) continue

    const parentElement = placeholder.parentElement ?? docFrag

    if (elements instanceof DocumentFragment) {
      parentElement.replaceChild(elements, placeholder)
      continue
    }

    for (const elementOrData of elements) {
      const element = !(elementOrData instanceof Node)
        ? new Text(String(elementOrData ?? ''))
        : elementOrData

      parentElement.insertBefore(element, placeholder)
    }

    placeholder.remove()
  }

  elementsMap.clear()
}

With a simple addition in placeElements function and the if statement in resolveValue we add support for array values. A little observation in this part, notice that is a verification if the value in the array is instance of Node and if not we create a TextNode with the string of that value, this method also prevent XSS attacks by making every string value a text node, even if it is valid HTML text. If you prefer you can use the resolveValue for every value inside the array, I personally don’t think that is necessary, even because we’ll need to prevent a collision with that element ids. But it can be done in a simple way if you want to, take the index passed to the resolveValue function and multiply it by 10 and then add to the index of the array value you are working on, and when you place the elements you will need to loop through the array values and make the replacement.

Events

Attaching events is now possible since we’re using actual elements and we can attach them with a simple implementation very similar with the one used to place elements. We’ll add a new eventsMap in the resourceMaps, verify in the code if the value is a function, use regex to verify on the already parsed html text which event it is and set it on the eventsMap.

function resolveValue(
  html: string,
  value: unknown,
  index: number,
  resourceMaps: ResourceMaps
) {
  if (value instanceof DocumentFragment || Array.isArray(value)) {
    const elementId = `el="el-${index}"`
    resourceMaps.elementsMap.set(elementId, value)

    return `<template ${elementId}></template>`
  }

  if (typeof value === 'function') {
    const match = html.match(eventRegex)

    if (match) {
      const eventName = match[1]
      const eventId = `"evt-${index}"`
      resourceMaps.eventsMap.set(`${eventName}=${eventId}`, value)
      return eventId
    }
  }

  return getCorrectStringValue(value)
}

function html(staticText: TemplateStringsArray, ...values: any[]) {
  const resourceMaps: ResourceMaps = {
    elementsMap: new Map(),
    eventsMap: new Map()
  }

    const fullText = staticText.reduce((acc, text, index) => {
    const currentValue = values[index]
    const currentHtml = acc + text
    const stringValue = resolveValue(currentHtml, currentValue, index, resourceMaps)
        return currentHtml + stringValue
    }, '')

  const template = document.createElement('template')
  template.innerHTML = fullText
  const documentFragment = template.content

  if (resourceMaps.elementsMap.size) {
    placeElements(documentFragment, resourceMaps.elementsMap)
  }

    return documentFragment
}

An use example.

html`
    <button on-click=${() => console.log('Hi')}>Click!</button>
`

// In the eventsMap will be set like this
eventsMap.set('click="evt-0"', () => console.log('Hi'))

// And in the html text the function value will be replaced for
'<button on-click="evt-0">Click</button>'

The prefix on- is not mandatory, it is a prefix that I choose to use to check if the attribute text is about an event and this prefix can be anything you want, like a @ or :.

Now we have an events map we can make a function similar to the placeElements but for the events.

function applyEvents(docFrag: DocumentFragment, eventsMap: ResourceMaps['eventsMap']) {
  for(const [key, eventListener] of eventsMap) {
    const element = docFrag.querySelector(`[on-${key}]`)

    if (!element) continue

    const [eventName] = key.split('=')

    element.removeAttribute(`on-${eventName}`)
    element.addEventListener(eventName, eventListener as EventListener)
  }

  eventsMap.clear()
}

function html(staticText: TemplateStringsArray, ...values: any[]) {
  const resourceMaps: ResourceMaps = {
    elementsMap: new Map(),
    eventsMap: new Map()
  }

    const fullText = staticText.reduce((acc, text, index) => {
    const currentValue = values[index]
    const currentHtml = acc + text
    const stringValue = resolveValue(currentHtml, currentValue, index, resourceMaps)
        return currentHtml + stringValue
    }, '')

  const template = document.createElement('template')
  template.innerHTML = fullText
  const documentFragment = template.content

  if (resourceMaps.elementsMap.size) {
    placeElements(documentFragment, resourceMaps.elementsMap)
  }

  if (resourceMaps.eventsMap.size) {
        applyEvents(documentFragment, resourceMaps.eventsMap)
  }

    return documentFragment
}

With only this you already can attach events to your elements, but if someone set the event attaching outside of the element.

html`
    <button>
        on-click=${() => console.log('hi')}
    </button>
`

// With this the end html will look like this
'<button>on-click="evt-0"</button>'

In the end of the applyEvents function all functions set on the map are removed, so the text is going to appear in the final html but will be no event pending to be attached and this can be a sign to the developer that they put the listener in the wrong place. But you can implement some code to deal with it if you want.

And that is it for this part, you have seen that some features works just fine or better just by using actual elements in the return of the html tag function. I hope you liked the content, any questions leave a comment below and see you in the next post.

Creating a HTML Tag Function - Part 1

Gabriel José — Mon, 14 Nov 2022 11:44:53 +0000

Have you ever used some tagged template literals in javascript? Libraries like styled components and lit are examples that has it in there features. We can call tag functions the actual functions used in this tagged template literals. In this tutorial I’m going to focus in a tag function implementation similar to the html tag function from lit. PS: I’ll be using Typescript in this tutorial.

Create the function

A quick brief to tag function creation, here I’m not going to focus on its creation details and focus more on the function details. We have many ways to create this function, at first I’ll make it just returning strings because it is more simple and to show why this approach is not the best ideia. After it I’ll show how to change it to return a single element or a Document Fragment with many elements.
Here we’ve a simple tag function that don’t do nothing special, just returns the same string making the correct concatenation.

// Will be using `any` for the value type because it literally can be anything
function html(staticText: TemplateStringsArray, ...values: any[]) {
    const fullText = staticText.reduce((acc, text, index) => {
        return acc + text + (values[index] ?? '')
    }, '')

    return fullText
}

With only this you already can create use it as a tagged template literal to create html text.

const paragraph = (content: string) => html`<p>${content}</p>`

html`<div>${paragraph('Hi')}</div>` // <div><p>Hi</p></div>

This is nothing special, you already can make it with normal concatenation. But in normal concatenation we have a problem that we can resolve the html tag function, which is XSS, if don’t know exactly how this works I’ll give you an example.

Preventing XSS

Lets say we have a to do list, you have an input to receive the user value and then you get that value and set it into a <li> element innerHTML without making any prevention. Using it this way makes your code vulnerable to this XSS attack which the user can write HTML in your input and this gets parsed when set it to the DOM.

<form>
    <input name="field" />
    <button>Submit</button>
</form>

<ul></ul>

const form = document.querySelector('form') as HTMLFormElement
const ul = document.querySelector('ul') as HTMLUListElement

form.addEventListener('submit', event => {
    event.preventDefault()

    const li = document.createElement('li')
    li.innerHTML = form.field.value
    ul.append(li)
    form.reset()
})

If you insert <img src="" onerror="alert('hi')" /> in the input, you’ll see the code in the onerror attribute been executed, this can be called a DOM based XSS.

Yes in my example it can be solved with a simple change, instead to use the innerHTML to set the elements content use the textContent. But in our current case we will use the html tag function to set the element’s inner HTML, so we need to address a parsing of a possible html inserted by the user. To do so, let’s analise the string of the input value in the html tag function and replace the < and > characters for the corresponding HTML Entities. This will be enough to prevent any inserted data to not be inserted as valid HTML.

function html(staticText: TemplateStringsArray, ...values: any[]) {
    const fullText = staticText.reduce((acc, text, index) => {
        const stringValue = String(values[index] ?? '')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')

        return acc + text + stringValue
    }, '')

    return fullText
}

const form = document.querySelector('form') as HTMLFormElement
const ul = document.querySelector('ul') as HTMLUListElement

form.addEventListener('submit', event => {
    event.preventDefault()

    ul.innerHTML += html`
        <li>${form.field.value}</li>
    `
    form.reset()
})

Great!!! But with this we create another problem, lets use this previous example to show to problem.

const paragraph = (content: string) => html`<p>${content}</p>`

html`<div>${paragraph('Hi')}</div>` // <div>&lt;p&gt;Hi&lt;/p&gt;</div>

By opening it in the browser, you’ll see that its shown literally the text <p>Hi</p>, which is not the wanted behavior. So now we need to make sure that any content returned by the html tag function is not to be parsed and be placed as a valid HTML.

Again this approach is not the only one possible. First step resolve this problem is to have some way to identify this string as an unique one. To do so lets create a specific class to our string and return an instance of it.

class HTMLString extends String {
    constructor(data: string) {
        super(data)
    }
}

function html(staticText: TemplateStringsArray, ...values: any[]) {
    const fullText = staticText.reduce((acc, text, index) => {
        const stringValue = String(values[index] ?? '')
            .replace(/\</g, '&lt;')
            .replace(/\>/g, '&gt;')

        return acc + text + stringValue
    }, '')

    return new HTMLString(fullText)
}

By doing so you will notice that some parts of the existing code has errors, probably about the fact that we’re returning an instance of HTMLString and not the string itself, but its only a type checking error, the code works correctly, but how? An instance of String it kind different from the string itself, but the Javascript can understand its meaning via some special methods, that i’ll not talk about here, and by doing so it catches the string value and uses it. In our case we create a specific class to use as reference, so we can know that the returned value come from the html tag function. Ok, but what about the type? Lets cast the instance of HTMLString to string, with it the Typescript will continue to interpret it as a string.

return new HTMLString(fullText) as string

Now lets use introduce the code that differentiate the string values.

function getCorrectStringValue(value: any) {
  if (value instanceof HTMLString) {
    return value
  }

  return String(value ?? '')
    .replace(/\</g, '&lt;')
    .replace(/\>/g, '&gt;')
}

function html(staticText: TemplateStringsArray, ...values: any[]) {
    const fullText = staticText.reduce((acc, text, index) => {
        const stringValue = getCorrectStringValue(values[index])
        return acc + text + stringValue
    }, '')

    return new HTMLString(fullText) as string
}

Yes, its simple as it is. And with it, everything continues to work as expected.

Conditional values

Some times we want to use a short condition to show something in screen, with our current implementation it may not work as expected. Lets create the following scenario, when the user type checked: before the item name it is added as checked, this would never be a feature in a real world scenario, but it will work well to show our example.

First create this css class.

.checked {
  text-decoration: line-through;
}

const form = document.querySelector('form') as HTMLFormElement
const ul = document.querySelector('ul') as HTMLUListElement

form.addEventListener('submit', event => {
  event.preventDefault()

  const { value } = form.field as HTMLInputElement
  const isChecked = value.startsWith('checked:')

    ul.innerHTML += html`
        <li class="${isChecked && 'checked'}">
      ${value.replace('checked:', '')}
    </li>
    `
  form.reset()
})

When someone types something like “checked:go to market”, it works fine, defines the checked class in the li and the text with a line through it. But when something is not typed this way, the li has the class of false, which doesn’t make anything wrong happen, but can lead to unexpected behaviors in other cases, to fix it we’re going to switch to a ternary, like this.

isChecked ? 'checked' : ''

But this is not a good thing when you have to do it so many times. So we can resolve this situation in our getCorrectStringValue function.

function getCorrectStringValue(value: any) {
  if (value instanceof HTMLString) {
    return value
  }

  const isUnwantedValue = value === undefined
    || value === null
    || value === false

  if (isUnwantedValue) {
    return ''
  }

  return String(value ?? '')
    .replace(/\</g, '&lt;')
    .replace(/\>/g, '&gt;')
}

I added this isUnwantedValue constant which checks if the value is equal to some values we don’t want, we need to check this specifically because we don’t want that 0 (zero) to be converted to an empty string, by the way, the value false can be a bit inconvenient to some people too, so it’s up to you to if you want it to be parsed.

These are the basic features for the html tag function and there are some features like attach events, change the direct element property instead of its HTML attribute. These features can be done with strings, but it's going to be a lot of work to do and has the disadvantage that every element change must be done as it enters the DOM, with small elements it's not a problem, but when you need to look at other strings recursively and keep all your data until such time as it will be appended to a real element. To summarize, we will change our tag function to work with Document Fragments, which will lead to new problems to be solved, but its benefits are worth the cost.

I hope you liked the content, any questions leave a comment below and see you in the next post.

Building a NodeJS server like Express from scratch

Gabriel José — Tue, 25 Jan 2022 20:26:07 +0000

Here goes a simple tutorial to show you how you can build a NodeJS server with an API similar to the Express one. Just reminding the Express here is only to get the ideia of this tutorial, you can make APIs like Fastify, KOA or create a complete custom one.

First of all, I'll be using typescript and esmodule in this tutorial and will not cover some of basics about the creation of a server like the http module of NodeJS and about the parsing of URL parameters. So I recommend you to see my tutorials about this topics: Servers with Node.js HTTP Module and How to build a URL parameters parser.

Collecting data

Let’s start by getting some values from the request. We’ll first need:

Request method
Pathname
Query Params

For this initial step, we’ll need only this, after it we’ll see about path params and body.

import http from 'http'

const server = http.createServer((req, res) => {
  const { method, url } = req

  const { pathname, searchParams } = new URL(`http://any-host.io${url}`)

  const queryParams = Object.fromEntries(searchParams.entries())

  res.writeHead(200, { 'Content-Type': 'application/json' })
  res.end(JSON.stringify({
    method,
    pathname,
    queryParams: searchParams
  }))
})

server.listen(3500, () => console.log('Server is running at http://localhost:3500'))

Notice that we instantiate an URL object with a http://any-host.io string and concatenate it with the url constant, and then catch the path name and search params from it. This string concatenation is necessary because the URL class expects a valid url string as parameter and the url constant is only one part of it. The pathname is in the url the we destructured, but the url comes with the search params together and we need them separated.

The searchParams is an instance of URLSearchParams, so we use the entries method to get an array of arrays containing the values and then used the Object.fromEntries to transform it into a normal object.

If you run the app and access localhost you will see a json string similiar to this one.

 { "method": "GET", "pathname": "/", "queryParams": {} }

Getting body data

In post, put, patch requests for example, we need the content of the incoming request body. For doing this we have some approaches and I’ll show two of them. The first, we need to use some of the request object events.

import http from 'http'

const server = http.createServer((req, res) => {
  const { method, url } = req

  const { pathname, searchParams } = new URL(`http://any-host.io${url}`)

  const queryParams = Object.fromEntries(searchParams.entries())

  const requestData = []
  req.on('data', chunk => requestData.push(chunk))

  req.on('end', () => {
    const bodyString = Buffer.concat(requestData).toString()
    const body = JSON.parse(bodyString)

    res.writeHead(200, { 'Content-Type': 'application/json' })
    res.end(JSON.stringify({
      method,
      pathname,
      queryParams,
      body
    }))
  })
})

server.listen(3500, () => console.log('Server is running at http://localhost:3500'))

Notice that we use an auxiliar variable called requestData to store the pieces of the body as it comes, this data comes as a buffer, and when the request finishes the data sending we just need to concatenate it and convert to string. This is string can have many different forms and we can use the content-type header, to know what you need to do to convert it. For now lets just parse it as JSON.

The second, is a much simpler way, but it can be hard to understand if you are not familiar with async iterators, and it uses the same auxiliar variable. Normally this auxiliar variable will only contain one value, it will be more necessary when the request incoming data is too large.

import http from 'http'

const server = http.createServer(async (req, res) => {
  const { method, url } = req

  const { pathname, searchParams } = new URL(`http://any-host.io${url}`)

  const queryParams = Object.fromEntries(searchParams.entries())

  const requestData = []

  for await (const data of req) {
    requestData.push(data)
  }

  const bodyString = Buffer.concat(requestData).toString()
  const body = JSON.parse(bodyString)  

  res.writeHead(200, { 'Content-Type': 'application/json' })
  res.end(JSON.stringify({
    method,
    pathname,
    queryParams,
    body
  }))
})

server.listen(3500, () => console.log('Server is running at http://localhost:3500'))

You can choose which of those ways you like to use to get the request data. In both cases, I would like to create a separate function to do the job. In this separate file we can even check for the length of the requestData array, because in requests of GET method for example, there is no body in request.

// With request object events
function getRequestData(request: IncomingMessage) {
  return new Promise((resolve, reject) => {
    const requestData = []
    request
      .on('error', reject)
      .on('data', chunk => requestData.push(chunk))
      .on('end', () => {
        if (!requestData.length) return resolve({})

        const body = Buffer.concat(requestData).toString()
        resolve(JSON.parse(body))
      })
  })
}

// With async iterators
function getRequestData(request: IncomingMessage) {
  return new Promise(async (resolve, reject) => {
    try {
      const requestData = []

      for await (const data of request) {
        requestData.push(data)
      }

      if (!requestData.length) return resolve({})

      const body = Buffer.concat(requestData).toString()

      resolve(JSON.parse(body))
    } catch(error) {
      reject(error)
    }
  })
}

You can separate this in files too, it will be up to you to choose the way you prefer. I did it like this.

// get-request-data.ts
import { IncomingMessage } from 'http'

function getRequestData(request: IncomingMessage) {
  return new Promise(async (resolve, reject) => {
    try {
      const requestData = []

      for await (const data of request) {
        requestData.push(data)
      }

      if (!requestData.length) return resolve({})

      const body = Buffer.concat(requestData).toString()

      resolve(JSON.parse(body))
    } catch(error) {
      reject(error)
    }
  })
}

// server.ts
import http from 'http'
import { getRequestData } from './get-request-data.js'

const server = http.createServer(async (req, res) => {
  const { method, url } = req

  const { pathname, searchParams } = new URL(`http://any-host.io${url}`)

  const queryParams = Object.fromEntries(searchParams.entries())

  const body = await getRequestData(req)

  res.writeHead(200, { 'Content-Type': 'application/json' })
  res.end(JSON.stringify({
    method,
    pathname,
    queryParams,
    body
  }))
})

server.listen(3500, () => console.log('Server is running at http://localhost:3500'))

Router

With the data we need in hands, now its time to create our Router. This Router class is very simple and in this point we’ll need some features implemented in the How to build a URL parameters parser tutorial.

First we need to export the routes constant and RouteHandler type from the file you put the url parameters parser code, I put it in a file called find-path-match.ts.

The Router code is simple like this. Just to not confuse, I rename the routes constant to routesList.

import { RouteHandler, routesList } from './find-path-match.js'

export class Router {
  get = this.#generateRouteRegisterFor('get')
  post = this.#generateRouteRegisterFor('post')
  put = this.#generateRouteRegisterFor('put')
  delete = this.#generateRouteRegisterFor('delete')

  #generateRouteRegisterFor(method: string) {
    return (path: string, routeHandler: RouteHandler) => {
      routesList[`${method}::${path}`] = routeHandler
      return this
    }
  }
}

You can notice 2 things in this implementation, one is that all four methods are very similar and that all of them returns this. The returning of this is basically useful to chain method calls, like this:

router.get().post().put()

And about the implementation you can do something like this:

type IRouter = Record<
  'get'| 'post'| 'put'| 'delete',
  (path: string, routeHandler: RouteHandler) => IRouter
> 

export function Router(): IRouter {
  const methods = ['get', 'post', 'put', 'delete'] as const
  const router = <IRouter> {}

  methods.forEach(method => {
    function routerFunction(path: string, routeHandler: RouteHandler) {
      routesList[`${method}::${path}`] = routeHandler
      return this
    }

    Object.assign(router, { [method]: routerFunction })
  })

  return router;
}

There is other way make this Router function, using reduce for example, but I chose that one to be more simpler. Although the way using a class seems more repetitive or verbose, I like it, because it is more explicit and easier to understand, but it up to you to choose.

Join everything

Now we need to export the findPathMatch function from the find-path-match.ts file, and use it in our server implementation in server.ts.

import http from 'http'
import { getRequestData } from './get-request-data.js'
import { findPathMatch } from './find-path-match.js'

const server = http.createServer(async (req, res) => {
  const { method, url } = req

  const { pathname, searchParams } = new URL(`http://any-host.io${url}`)

  const queryParams = Object.fromEntries(searchParams.entries())

  const body = await getRequestData(req)

  const { handler, params } = findPathMatch(method, pathname)

  if (handler) {
    const request = {
      headers: req.headers,
      params,
      queryParams,
      body
    }

    return handler(request, res)
  }

  res.writeHead(404, { 'Content-Type': 'application/json' })
  res.end(JSON.stringify({
    error: 'Resource not found'
  }))
})

server.listen(3500, () => console.log('Server is running at http://localhost:3500'))

The handler respects the RouteHandler type that we made in the URL parameters parser and its value in the tutorial is (params: Record<string, string>) => void and I changed it to:

interface RouteHandlerRequest {
  headers: Record<string, unknown>
  queryParams: Record<string, string>
  params: Record<string, string>
  body: any
}

type RouteHandler = (request: RouteHandlerRequest, response: ServerResponse) => void

With it done prepare the request value and pass it with the response object to the handler. If there is no match for the current route it resolve the request with a not found response.

Now its time to register some routes to test it.

// routes.js
import { Router } from './router.js'

const inMemoryData = []

const router = new Router()

router
  .get('/find-all', (req, res) => {
    res.end(JSON.stringify(inMemoryData))
  })
  .post('/create', (req, res) => {
    inMemoryData.push(req.body)

    res.statusCode = 204
    res.end()
  })
  .delete('/:id', (req, res) => {
    const index = inMemoryData.findIndex(item => item.id === req.params.id)

    if (index !== -1) {
      inMemoryData.splice(index, 1)
    }

    res.statusCode = 204
    res.end()
  })

With this code we can test some of the features we created, fell free to change and test it. Just don’t forget, you need to import this file in server.ts.

import http from 'http'
import { getRequestData } from './get-request-data.js'
import { findPathMatch } from './find-path-match.js'
import './routes.js'

const server = http.createServer(async (req, res) => {
...
...

And that’s it, your server should be working fine.

Conclusion

I hope you could understand everything, in a overview it’s not so complex the implementation, and obviously there is much more things that Express do, but its too much to cover all here. Any question leave a comment and thanks for reading!!!

How to build a URL parameters parser

Gabriel José — Thu, 14 Oct 2021 20:05:32 +0000

Here is a simple tutorial showing a way to achieve a URL parameters parser. I need to say that might have some other ways which I didn't known to achieve it, so if you like leave a comment about it below.

I made this tutorial using TypeScript. But basically you can abstract the idea to your language of choose.

First, lets create an object to store our routes callbacks. The key of the object is a join of method + path and the value is the route callback. For example:

type RouteHandler = (params: Record<string, string>) => void

const routes: Record<string, RouteHandler> = {
  'get::/': () => console.log('Get on /'),
  'post::/:id': (params) => console.log(`Post on /${params.id}`)
}

You can notice that the method and path are separated by a ::, this string was choose by me to be the separator, but you can use another one, like an space, @, #, or anything you want. I choose :: because we already use : to identify the url parameters.

This routes object can be a Map too, if you prefer. Like this:

const routes = new Map<string, RouteHandler>([
  ['get::/', () => console.log('Get on /')],
  ['post::/:id', (params) => console.log(`Post on /${params.id}`]
])

Now we must get this information and define an array with some information to use later. We need the method, path, path regex and the handler. Lets create a function called defineRoutesInfo to loop through our routes object and define this data.

First, in the loop lets verify if the route path end with / this will help us ensure that our routes don't have some inconsistency, like we define /about and in the request is /about/, so we will ensure our paths and the path from request must end with /.

function defineRoutesInfo(routes: Record<string, RouteHandler>) {
  return Object.entries(routes).map(([routeName, routeHandler]) => {
    if (!routeName.endsWith('/')) {
      routeName += '/'
    }
  })
}

Now we can ensure that our routeName follows the correct format, by verifying if the string includes the separator symbol, in my case ::. If not we throw an error for invalid route definition, this is not necessary to work, but i think its good to ensure that everything is correct.

if (!routeName.includes('::')) {
  throw new Error('Invalid route definition')
}

After it, now in can extract the method and path from our routeName. And here you can make another validation to ensure that the path always start with /.

const [method, path] = routeName.split('::')

if (!(/^\//).test(path)) {
  throw new Error('Invalid path definition')
}

Now we need to create a regex representation of our path, even more if it uses url parameters. To do this we use a function called createPathRegex, but we'll only call it for now, after ending this function we'll make this another one. To finish this the defineRoutesInfo function we must return an object with all needed data.

const pathRegex = createPathRegex(path)

return {
  method,
  path,
  pathRegex,
  handler: routeHandler
}

The full function would be like this:

function defineRoutesInfo(routes: Record<string, RouteHandler>) {
  return Object.entries(routes).map(([routeName, routeHandler]) => {
    if (!routeName.endsWith('/')) {
      routeName += '/'
    }

        if (!routeName.includes('::')) {
        throw new Error('Invalid route definition')
      }

      const [method, path] = routeName.split('::')

        if (!(/^\//).test(path)) {
          throw new Error('Invalid path definition')
        }

      const pathRegex = createPathRegex(path)

      return {
        method,
        path,
        pathRegex,
        handler: routeHandler
      }
  })
}

Lets create now the createPathRegex function. First of all, we can check if the path does not includes the url param symbol, which in my case is :, and return the path directly.

function createPathRegex(path: string) {
  if (!path.includes(':')) {
    return path
  }
}

We must retrive the parameters names from the path, replace it with the correct regex in the path string and then return a RegExp instance of it. For example for /posts/:postId will be /posts/(?<postId>[\\w_\\-$@]+), we'll use the named capture group because when use the String.match method it will resolve the matched values and put it in an object on the groups property of the match result, you can see more about it on MDN. And this regex has double backslashes because the backslash already is an escape character and the backslash with another letter has some special meanings on regular expressions not only to escape a character, like we did in \\- to escape the dash character.

function createPathRegex(path: string) {
  if (!path.includes(':')) {
    return path
  }

    const identifiers = Array.from(path.matchAll(/\/:([\w_\-$]+)/g))
    .map(match => match[1])

    const pathRegexString = identifiers.reduce((acc, value) => {
      return acc.replace(`:${value}`, `(?<${value}>[\\w_\\-$@]+)`)
    }, path)

    return new RegExp(pathRegexString)
}

We have our paths data ready to be used and when we receive the requested path and method, we must compare it with what we've. Let's create a function to find this path match.

To do so, we must follow this steps:

Verify if we already called the defineRoutesInfo.
Ensure that the given request path ends with a slash.
Define an empty object called params, it will be replaced for the url parameters if it has some.
Filter the match results, using the filter method from the definedRoutes variable.
Verify if has more than one result on filter, which probably means that one route is a parameter and other is a identical one.
If has more than one result we search for the identical.
Return an object with the correct handler, if it has some, and the found params.

function findPathMatch(requestedMethod: string, requestedPath: string) {
  if (!definedRoutes) {
    definedRoutes = defineRoutesInfo(routes)
  }

  if (!requestedPath.endsWith('/')) {
    requestedPath += '/'
  }

  let params: Record<string, string> = {}

  const filteredRouteRecords = definedRoutes.map(routeRecord => {
    const match = requestedPath.match(routeRecord.pathRegex)

    if (!match) return

    const params: Record<string, string> = match?.groups ? match.groups : {}
    const methodHasMatched = requestedMethod.toLowerCase() === routeRecord.method

    const pathHasMatched = (
      match?.[0] === requestedPath
      && match?.input === requestedPath
    )

    if (methodHasMatched && pathHasMatched) {
      return { routeRecord, params }
    }
  })
    .filter(Boolean)

    let findedRouteRecord = null

  if (filteredRouteRecords.length > 1) {
    for(const routeRecord of filteredRouteRecords) {
      if (routeRecord.path === requestedPath) {
        findedRouteRecord = routeRecord
      }
    }
  } else {
    findedRouteRecord = filteredRouteRecords[0]
  }

  return {
    handler: findedRouteRecord?.handler ?? null,
    params
  }
}

We must filter the routes instead to find the correct directly because its possible to define a route /about and a route /:id, and it can make a conflict of which to choose.

To filter the routes info it must match with both the method and path. With the method we must set it to lower case and compare with the the current route record. With the path we must match it with the path regex we made, the group property of this match give us an object with a correct match of parameter name and parameter value, that we can set it to the params object we previously created. And to ensure the correct match on the path we must compare the match result that position zero and the property input, both has to be equal to the requested path. Then we return the booleans the correspond if the method and path has a match.

To test it out, just pass the current method and path, and see the magic works.

const requestMethod = 'POST'
const requestPath = '/12'
const { handler, params } = findPathMatch(requestMethod, requestPath)

if (handler) {
  handler(params)
}

If think that the findPathMatch function is too big you can separate in two other functions, one for filtering the route matches and other to find the correct route for the given path

interface RouteMatch {
  routeRecord: RouteInfo
  params: Record<string, string>
}

function filterRouteMatches(requestedMethod: string, requestedPath: string) {
  const matchedRouteRecords = definedRoutes.map(routeRecord => {
    const match = requestedPath.match(routeRecord.pathRegex)

    if (!match) return

    const params: Record<string, string> = match?.groups ? match.groups : {}
    const methodHasMatched = requestedMethod.toLowerCase() === routeRecord.method

    const pathHasMatched = (
      match?.[0] === requestedPath
      && match?.input === requestedPath
    )

    if (methodHasMatched && pathHasMatched) {
      return { routeRecord, params }
    }
  })
    .filter(Boolean)

  return matchedRouteRecords
}

function findCorrectRouteRecord(routeMatches: RouteMatch[], requestedPath: string) {
  if (routeMatches.length > 1) {
    for(const routeMatch of routeMatches) {
      if (routeMatch.routeRecord.path === requestedPath) {
        return routeMatch
      }
    }
  }

  return routeMatches[0]
}

function findPathMatch(requestedMethod: string, requestedPath: string) {
  if (!definedRoutes) {
    definedRoutes = defineRoutesInfo(routes)
  }

  if (!requestedPath.endsWith('/')) {
    requestedPath += '/'
  }

  const matchedRouteRecords = filterRouteMatches(requestedMethod, requestedPath)

  const findedRouteRecord = findCorrectRouteRecord(
    matchedRouteRecords,
    requestedPath
  )

  return {
    handler: findedRouteRecord?.routeRecord?.handler ?? null,
    params: findedRouteRecord?.params ?? {}
  }
}

The end code

I hope you enjoy and could understand everything, any question leave a comment below, and happy coding!!!

type RouteHandler = (params: Record<string, string>) => void

interface RouteInfo {
    method: string
    path: string
  pathRegex: string | RegExp
  handler: RouteHandler
}

interface RouteMatch {
  routeRecord: RouteInfo
  params: Record<string, string>
}

const routes: Record<string, RouteHandler> = {
  'get::/': () => console.log('Get on /'),
  'post::/:id': (params) => console.log(`Post on /${params.id}`)
}

let definedRoutes: RouteInfo[] | null = null

function createPathRegex(path: string) {
  if (!path.includes(':')) {
    return path
  }

    const identifiers = Array.from(path.matchAll(/\/:([\w_\-$]+)/g))
    .map(match => match[1])

    const pathRegexString = identifiers.reduce((acc, value) => {
      return acc.replace(`:${value}`, `(?<${value}>[\\w_\\-$@]+)`)
    }, path)

    return new RegExp(pathRegexString)
}

function defineRoutesInfo(routes: Record<string, RouteHandler>) {
  return Object.entries(routes).map(([routeName, routeHandler]) => {
    if (!routeName.endsWith('/')) {
      routeName += '/'
    }

        if (!routeName.includes('::')) {
        throw new Error('Invalid route definition')
      }

      const [method, path] = routeName.split('::')

        if (!(/^\//).test(path)) {
          throw new Error('Invalid path definition')
        }

      const pathRegex = createPathRegex(path)

      return {
        method,
        path,
        pathRegex,
        handler: routeHandler
      }
  })
}

function filterRouteMatches(requestedMethod: string, requestedPath: string) {

  const matchedRouteRecords = definedRoutes.map(routeRecord => {
    const match = requestedPath.match(routeRecord.pathRegex)

    if (!match) return

    const params: Record<string, string> = match?.groups ? match.groups : {}
    const methodHasMatched = requestedMethod.toLowerCase() === routeRecord.method

    const pathHasMatched = (
      match?.[0] === requestedPath
      && match?.input === requestedPath
    )

    if (methodHasMatched && pathHasMatched) {
      return { routeRecord, params }
    }
  })
    .filter(Boolean)

  return matchedRouteRecords
}

function findCorrectRouteRecord(routeMatches: RouteMatch[], requestedPath: string) {

  if (routeMatches.length > 1) {
    for(const routeMatch of routeMatches) {
      if (routeMatch.routeRecord.path === requestedPath) {
        return routeMatch
      }
    }
  }

  return routeMatches[0]
}

function findPathMatch(requestedMethod: string, requestedPath: string) {
  if (!definedRoutes) {
    definedRoutes = defineRoutesInfo(routes)
  }

  if (!requestedPath.endsWith('/')) {
    requestedPath += '/'
  }

  const matchedRouteRecords = filterRouteMatches(requestedMethod, requestedPath)

  const findedRouteRecord = findCorrectRouteRecord(
    matchedRouteRecords,
    requestedPath
  )

  return {
    handler: findedRouteRecord?.routeRecord?.handler ?? null,
    params: findedRouteRecord?.params ?? {}
  }
}

const { handler, params } = findPathMatch('POST', '/12')

if (handler) {
  handler(params) // Post on /12
}

Web Components, comunicação entre componentes (parte 5)

Gabriel José — Tue, 22 Jun 2021 21:13:24 +0000

Essa é a quinta parte da série de tutoriais sobre Web Components, não deixe de ver as outras partes. Neste tutorial vamos ver um pouco mais sobre algumas abordagens de como podemos fazer uma comunicação entre nossos componentes.

Eventos

Sim, já que todo componente que criamos se trata de um elemento HTML customizado, nós podemos ouvir e disparar eventos como qualquer outro elemento faz, além de adicionar eventos customizados também. Eventos serão a forma mais comum que terá para fazer a comunicação entre os elementos.

Disparando eventos

Caso você não sabia nós podemos disparar os eventos do HTML de forma programática, sem a necessidade de interações do usuário.

const clickEvent = new Event('click')

document.querySelector('button').dispatchEvent(clickEvent)

Com esse simples código você verá que o evento atrelado ao botão foi disparado sem que houvesse um real click nele.

A classe Event recebe dois parâmetros, sendo o primeiro o nome do evento e o segundo sendo um objeto de configuração para o evento, em que podemos configurar coisas como bubbles, cancelable, composed. Para saber mais olhe: https://developer.mozilla.org/en-US/docs/Web/API/Event/Event

Criando eventos personalizados

Utilizando de uma API muito parecida com a de eventos que acabamos de ver, podemos usar a classe CustomEvent para criar um evento customizado.

const formErrorEvent = new CustomEvent('form-error', {
  detail: new Error('Form Error')
})

Como pode ver a API é praticamente a mesma, no caso dos custom events nós podemos passar o atributo detail em que podemos passar qualquer valor que queremos propagar a outros elementos.

Essa aliás é uma ótima forma para fazer a comunicação entre os elementos.

Exemplo

Um simples exemplo usando um evento customizado:

<!-- HTML -->
<app-root></app-root>

// Javascript
class AppForm extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = `
      <form>
        <input placeholder="Name" />
        <button>Submit</button>
      </form>
    `
  }

  connectedCallback() {
    const input = this.shadowRoot.querySelector('input')
    const form = this.shadowRoot.querySelector('form')

    form.addEventListener('submit', ev => {
      ev.preventDefault()

      if(!input.value) {
        const formErrorEvent = new CustomEvent('form-error', {
          detail: new Error('Empty name field')
        })

        this.dispatchEvent(formErrorEvent)
      }
    })
  }
}

customElements.define('app-form', AppForm)

class AppRoot extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = '<app-form></app-form>'
  }

  connectedCallback() {
    this.shadowRoot
      .querySelector('app-form')
      .addEventListener('form-error', ev => {
        console.log(ev.detail.message)
      })
  }
}

customElements.define('app-root', AppRoot)

API do componente

Eventos são muito úteis quando queremos obter o valor do resultado de uma operação feita por outro elemento ou simplesmente de ser notificador quando algo ocorrer. Porém, existem situações em que queremos simplesmente que o elemento mude seu comportamento ou estado atual, nessas situações construir uma API é a melhor forma de comunicação, pois nós pedimos ao elemento que ele faça algo e ele internamente faz o que for necessário para que aquilo ocorra.

Exemplo

<!-- HTML -->
<app-root></app-root>

// Javascript
class LightSwitch extends HTMLElement {
  // Estado do elemento
  #isOn = false

  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = `
      <style>
        div {
          width: max-content;
          padding: 14px;
          border-radius: 6px;
        }

        .off {
          background-color: #ddd;
        }

        .on {
          background-color: #08c;
        }
      </style>
      <div class="off">
        <button>Toggle</button>
      </div>
    `
  }

  connectedCallback() {
    this.shadowRoot
      .querySelector('button')
      .addEventListener('click', () => {
        this.toggle()
      })
  }

  /*
    Método público que pode ser usado
    para mudar o estado do elemento
  */
  toggle() {
    this.#isOn = !this.#isOn
    const className = this.#isOn ? 'on' : 'off'
    this.shadowRoot.querySelector('div').className = className
  }
}

customElements.define('light-switch', LightSwitch)

class AppRoot extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = `
      <light-switch></light-switch>
      <button>
        Toggle from outside
      </button>
    `
  }

  connectedCallback() {
    const lightSwitch = this.shadowRoot
      .querySelector('light-switch')

    this.shadowRoot
      .querySelector('button')
      .addEventListener('click', () => {
        // Chamando o método para alterar o estado do elemento
        lightSwitch.toggle()
      })
  }
}

customElements.define('app-root', AppRoot)

Comunicação por terceiros

Por terceiros, me refiro a outros elementos ou estruturas na qual podemos delegar a parte da comunicação para uma entidade que não é diretamente quem queremos impactar. Esse tipo de abordagem é muito útil quando queremos que algo seja refletido em vários elementos de uma vez e/ou quando não sabemos quais elementos serão afetados. É uma abordagem muito comum para o gerenciamento de estado, seja específico a alguns componentes ou um estado global.

Devo enfatizar que essa é somente uma forma de gerenciar essa parte de estado compartilhado e afins.

Exemplo

O exemplo abaixo é simples, usando um objeto específico para manter o estado de um contador e utilizando de eventos para capturar as mudanças que acontecerem.

<!-- HTML -->
<app-root></app-root>

// Javascript
class CounterStore {
  count = 0
  #events = {
    onCountChange: [] 
  }

  increment() {
    this.count++
    for(const event of this.#events.onCountChange) {
      event()
    }
  }

  onCountChange(listener) {
    this.#events.onCountChange.push(listener)
  }
}

const counterStore = new CounterStore()

class AppRoot extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = `
      <div>Count: ${counterStore.count}</div>
      <button>Increment</button>
    `
  }

  connectedCallback() {
    this.shadowRoot
      .querySelector('button')
      .addEventListener('click', () => {
        counterStore.increment()
      })

    counterStore.onCountChange(() => {
      this.shadowRoot
        .querySelector('div')
        .innerText = `Count: ${counterStore.count}`
    })
  }
}

customElements.define('app-root', AppRoot)

Conclusão

Agora você viu como podemos mexer com a comunicação entre nossos Web Components, lembrando que isso que mostrei são só abordagens e que é sempre bom lembrar que aqui estamos mexendo com Javascript puro, então há espaço para que você crie sua própria maneira de gerenciar isso. Espero muito que tenha gostado e caso tenha alguma dúvida pode deixar nos comentários e até o próximo!!!

Web Components, estilizando seus componentes (parte 4)

Gabriel José — Sun, 18 Apr 2021 21:05:34 +0000

Essa é a quarta parte da série de tutoriais sobre Web Components, não deixe de ver a primeira, segunda e principalmente a terceira partes. Neste tutorial irei falar sobre CSS ao se usar Web Components, o que tem de coisa nova, como podemos ter uma base de estilo que não sofra muito pelo encapsulamento dos componentes, entre outros detalhes.

Recapitulando

Lembre lá nas primeiras partes em que nós criamos componentes que não possuíam Shadow DOM. Então, a estilização deles é bem simples, só de referenciar a tag ou adiciona-la uma classe CSS podemos estilizar como um outro elemento qualquer. É bom relembrar esse detalhe porque nessa parte iremos nos focar mais nos elementos que possuem um Shadow DOM. Com isso em mente lembre também que os elementos com Shadow DOM possuem CSS com escopo.

Vale ressaltar

Um detalhe a se falar em relação aos elementos com estilização interna é que existem alguns parâmetros de estilo que são herdados pelos elementos, mesmo que dentro de um Shadow DOM. São parâmetros geralmente relacionados a tipografia como: font-family, font-size, font-style, color, text-align, text-decoration, entre outros... Vale lembrar que esse detalhe que acabei de mencionar foi algo que reparei utilizando os Web Components, e graças a isso podem ter outros tipos de parâmetros que podem ser herdados pelos elementos mesmo dentro de um Shadow DOM, então fique atento.

Estilizando o host

Quando criamos um Web Component, o elemento em que estamos declarando é conhecido como host (hospedeiro), ou seja, o elemento que hospeda o shadow root (a raiz do Shadow DOM) que criamos. E esse elemento é como outro já nativo do HTML, ou seja, ele pode ser estilizado também, contudo não é tão simples de se estilizar esse elemento quanto só de por seu nome, principalmente pelo fato de que o nome do elemento só será definido posteriormente quando usarmos a API de customElements. Para ter acesso a esse elemento é necessário usar o seletor :host, e usá-lo com parênteses para selecionar outros detalhes, por exemplo:

:host {} /* Estiliza o host */
:host(.blue) {} /* Estiliza o host quando possui a classe blue */
:host([active]) {} /* Estiliza o host quando possui um atributo active */
:host(:hover) {} /* Estiliza o host quando o mouse estiver sobre ele */

Lembre que o host, vem com display: inline por padrão, importante lembrar disso caso o css não se comporte como você espera de primeira.

Estilizando o host baseado no contexto

Podemos também estilizar o component baseado no estado CSS do seu elemento pai ou superior, fazemos isso utilizando :host-context() passando dentro do parênteses o seletor corresponde ao estado CSS de um dos elementos pai. Esse seletor funciona mais ou menos como se a gente colocasse if parentElement has some-class apply this style (se o elemento pai tiver alguma-classe aplique este estilo).

<body class="dark-theme">
  <my-component></my-component>
</body>

/* Aplica um estilo quando um elemento pai tem a classe dark-theme */
:host-context(.dark-theme) {}

Estilizando nós distribuídos

Como falamos em outras partes, os nós distribuídos são primeiramente afetados pelo estilo aplicado a eles no momento que são gerados no light DOM antes de entrarem no shadow DOM de um componente. Contudo, é possível estilizar esses elementos usando outro seletor especial ::slotted(), passando dentro dos parenteses o seletor correspondente ao elemento distribuído que você deseja selecionar.

/* Seleciona todo h2 que esteja em um <slot> */
::slotted(h2) {}

/* Seleciona todo span que seja filho direto de
   uma div com a classe "active" que esteja em um <slot>
*/
::slotted(div.active > span) {}

/* Seleciona todo elemento p que esteja
   em um <slot> filho de um section
*/
section > ::slotted(p) {}

Lembrando que na ordem de prevalência do CSS todos estilos aplicados no light DOM prevalecem sobre os estilos definidos usando ::slotted(). Essa é uma maneira de deixar seus componentes muito mais customizavéis para quem for utilizar.

Caso você crie um <slot> com id ele pode ser usado para referenciar o elemento no css.

<slot id="my-slot"></slot>
<style>
  /* Estiliza o conteúdo do slot com aquele id */
  #my-slot::slotted(*) {}
</style>

Estilizando usando Parts

Outro recurso que temos para estilizar Web Components é o pseudo-seletor ::part(), que permite o autor do componente definir trechos dos seus elementos que podem ser acessados por fora.

#shadow-root
<header part="header">
  <h1>Título</h1>
</header>
<main part="content"></main>
<footer part="footer">
  <span>Rodapé</span>
</footer>

/* Tem acesso ao header e total controle para alterar seu estilo */
my-element::part(header) {}

/* O mesmo se da para o footer e o main */
my-element::part(content) {}
my-element::part(footer) {}

Esse é um dos recursos que eu acho mais interessantes quando se trata de deixar nossos componentes customizáveis. É possível deixar muita coisa acessível e até mesmo inacessível se você desejar.

Estilizando um componente por fora

Como vimos existem muitas maneiras de se estilizar um web component, porém a maneira mais simples é selecionando a tag:

my-element {
    display: block;
    width: 300px;
}

Estilizações definidas do lado de fora sempre sobrepõem as estilizações definidas no Shadow DOM. Contudo, as vezes pode acontecer de não ser suficiente quando se quer estilizar algo mais interno no componente e dependendo é bem mais trabalhoso também, nesses casos podemos utilizar das propriedades customizadas do CSS.

my-element {
    --internal-color: #333;
}

Dentro do componente:

:host {
    color: var(--internal-color, white);
}

Referências

https://developers.google.com/web/fundamentals/web-components/shadowdom

https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/

Conclusão

Agora você viu como por ser mais simples ou deixar mais simples a estilização de um Web Component. Espero muito que tenha gostado e caso tenha alguma dúvida pode deixar nos comentários e até o próximo!!!

Web Components, o que é ShadowDOM (parte 3)

Gabriel José — Sun, 21 Mar 2021 19:42:06 +0000

Esta é a terceira parte da série de tutoriais sobre Web Components, não deixe de ver a primeira e segunda partes. Nesse tutorial irei falar sobre o que é shadowDOM, quais são suas características e as vantagens de usar.

O ShadowDOM é como um DOM normal, porém o que o diferencia do DOM é a forma como ele é criado e como ele se comporta em relação ao resto da página. Com o shadowDOM você cria uma árvore DOM com o escopo atrelado ao elemento, mas separado dos seus possíveis filhos. Essa árvore é chamada de shadow tree e o elemento ao qual ele é atrelado é chamado de shadow host. Tudo que for adicionado a uma sombra (shadow tree) se torna local relacionado ao elemento hospedeiro (host), incluindo elementos <style> e é graças a isso que é possível ter também um CSS com escopo.

Podemos listar assim, alguns dos benefícios de se utilizar o shadowDOM:

DOM interna isolada: Todo o conteúdo DOM do elemento é encapsulado, se tentar fazer um document.querySelector não será possível acessar os elementos internos do componente.
CSS com escopo: Todo estilo CSS definido dentro do shadowDOM é mantido dentro dele, sem afetar o lado de fora e sem ser muito afetado pelo lado de fora também. Mas não se preocupe vamos ver mais depois sobre estilização de componentes com shadowDOM.
Pensamento em componentes: Em conjunto com a API de customElements o shadowDOM permite ainda mais projetarmos uma interface separada por componentes, provendo reusabilidade e um foco maior em detalhes.

Criando um shadowDOM

Ao invocar element.attachShadow() será atrelado um shadow root a esse elemento, independente se ele é ou não um elemento customizado e é assim que um elemento ganha sua shadowDOM.

const div = document.createElement('div')
div.attachShadow({ mode: 'open' })
div.shadowRoot.innerHTML = '<style>p {color: blue}</style>  <p>Has ShadowDOM</p>'

document.body.append(div)

Ao adicionar esse código e outro elemento p ao seu HTML verá que somente o parágrafo dentro da div, que possui um shadowDOM, será afetado pelo CSS dentro da tag style.

Sobre o objeto passado como atributo para o attachShadow, note que ele possuí o atributo mode que irá definir como o shadowDOM desse elemento irá se comportar. Pode ser passado open e closed como valores para o mode, por enquanto use sempre open depois explicarei sobre a diferença entre eles.

É bom avisar que nem todo elemento nativo do HTML pode ter um shadowDOM atrelado a ele. Pode ser porque esse elemento já possui sua própria shadowDOM (textarea, input) ou que não faz sentido esse elemento possuir um shadowDOM (img).

Criando um shadowDOM para elementos customizados

O shadowDOM é ótimo de se utilizar em conjunto com elementos customizados. Ele irá permitir que o elemento possua seu próprio HTML, CSS e JS, produzindo assim o que seria um Web Component.

Exemplo de como um elemento customizado vincula um shadowDOM a ele mesmo:

customElements.define('my-article', class extends HTMLElement {
  constructor() {
    super()

    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = `
      <style>
        /* a estilação tem como escopo o próprio elemento! */
      </style>
      <h2>Titulo</h2>
      <p>Texto</p>
    `
  }
})

Lembrando que tudo que tiver dentro da tag <style> afeta apenas os elementos dentro do shadow root do elemento que esta sendo criado.

Composição e slots

A composição é algo muito importante no desenvolvimento web, é usando esse tipo de conceito que elementos como <select>, <form>, <details>, <video> funcionam, eles aceitam outros elementos como filhos e sabem interpretar cada filho da maneira correta e nós podemos fazer esse tipo de composição em nossos componentes usando slots.

Mas antes de irmos adiante com os slots, precisamos ver sobre light DOM.

Light DOM

Todo HTML que existente fora do conteúdo interno de um shadowDOM está presente no light DOM. Mesmo que esses elementos sejam filhos de um Web Component.

<!-- A div está no light DOM -->
<div>Texto</div>

<!--
  my-element possui um shadowDOM,
  porém os elementos span e button estão no light DOM
-->
<my-element>
  <span>texto</span>
  <button>Clique aqui</button>
</my-element>

No shadowDOM de um elemento podemos definir então slots para que possamos "capturar" esses elementos do light DOM para o shadowDOM do componente.

Além disso, como havia comentado antes, o CSS de um Web Component com shadowDOM tem o próprio elemento como escopo, mas o elementos vindos do light DOM podem sofrer alterações externas antes de entrar no shadowDOM do elemento. Contudo, nós vamos entrar em mais detalhes depois sobre as diferentes formas de lidar com CSS em um Web Component com shadowDOM.

O elemento slot

O Shadow DOM é capaz de compor vários trechos de marcação HTML utilizando elementos <slot>. Os slots são como marcadores que guardam lugar para outras árvores DOM e que os usuários do componente podem usar para compor o elemento como necessário. Essencialmente, ao definir elementos <slot> você permite que marcações externas façam parte do shadowDOM daquele elemento. É como se os elementos recebessem uma permissão de passar pelas barreiras do shadowDOM. Esses elementos são chamados de distributed nodes (nós distribuídos).

Um elemento pode definir um ou mais slots no seu shadowDOM. Os slots podem estar vazios ou possuindo um conteúdo de fallback(substituto), que no caso são usados caso o usuário não defina nenhum conteúdo para o slot, ai é utilizado esse conteúdo de fallback.

<!-- slot padrão. Se houver mais de um será usado apenas o primeiro definido -->
<slot></slot>

<!-- slot padrão com fallback -->
<slot>
  <p>Conteúdo de reserva</p>
</slot>

Como dito no comentário HTML que está no exemplo, apenas um elemento slot é usado como valor padrão. Porém, podemos definir slots nomeados, assim podemos definir onde ficará cada conteúdo dentro do shadowDOM e assim é possível usar um slot padrão e vários nomeados. Slots nomeados podem ser vistos como marcados específicos que podem ser referenciados através de um nome. Nós passamos o nome para o slot através do atributo name.

Por exemplo, o elemento my-element:

#shadow-root
<header>
  <slot name="header">Header</slot>
</header>
<div>
  <slot>
    <p>Content's body</p>
  </slot>
</div>

Ao usar o componente sua marcação será algo semelhante a isso:

<my-element>
  <h2 slot="header">Meu Titulo</h2>
  <p>Meu conteúdo</p>
</my-element>

Como você pode ter percebido no exemplo acima, nós definimos qual slot será usado adicionando um atributo slot no elemento, o valor desse atributo deve ser o mesmo do nome declarado no slot do componente. E todo elemento que não possuir o atributo slot irá para o primeiro slot sem nome, se houver algum, que foi declarado no componente.

Dessa maneira podemos deixar nossos componentes muito customizáveis e flexíveis. Mas tome cuidado para não deixa-lo mais flexível do que o ideal!

Você deve estar pensamento ou então se você já testou esse código, você viu que na parte do CSS ele não funciona ou parece confuso a forma como ele funciona. Como comentei na parte sobre Light DOM, os elementos que são externos (que estão no light DOM) são afetados pelo CSS externo e não o CSS interno do componente. Contudo, a questão do CSS é um assunto que pode ser extenso, graças a isso deixarei para falar mais sobre ele no próximo post.

Referências

https://developers.google.com/web/fundamentals/web-components/shadowdom

Conclusão

E assim você viu como o Shadow DOM pode ser muito vantajoso ao se usar elementos customizados, mas mesmo assim queria dizer que não preciso usá-lo sempre, é possível que você se encontre em uma situação que elementos sem um shadowDOM resolvem melhor o problema. O importante é você conhecer bem cada coisa para saber a hora certa de usar. Espero que tenha gostado, qualquer dúvida deixe um comentário e até logo!!!

Web Components, atributos e métodos de reação (parte 2)

Gabriel José — Tue, 02 Mar 2021 01:06:09 +0000

Essa é a segunda parte da série de tutoriais sobre Web Components, não deixe de ver a primeira parte que mostro o que são e como criar Web Components. Nesse tutorial vamos ver como criar uma interface de programação(API) para nossos componentes e veremos como funcionam suas funções reação.

Definindo a API do elemento

Como comentado antes, assim que o elemento estende de HTMLElement é garantido que ele herde a API DOM que existe em comum entre os elementos HTML, isso também significa que todo atributo/propriedade e métodos da classe farão parte dessa API DOM também.

Vamos, criar um <text-hider>, um elemento simples que terá um X para esconder ou mostrar um texto.

class TextHider extends HTMLElement {
  get show() {
    return this.hasAttribute('show')
  }

  set show(value) {
    if(typeof value !== 'boolean') {
      throw new TypeError(
        'text-hider "show" attribute only accepts boolean values'
      )
    }

    if(value) {
      this.setAttribute('show', '')
      this.querySelector('[text]').innerText = 'Showing the text'
    } else {
      this.removeAttribute('show')
      this.querySelector('[text]').innerText = ''
    }
  }

  constructor() {
    super()

    this.innerHTML = `
      <span>X</span>
      <span text>${this.show ? 'Showing the text' : ''}</span>
    `

    this.querySelector('span').addEventListener('click', () => {
      this.show = !this.show
    })
  }
}

customElements.define('text-hider', TextHider)

Repare no código acima que as funções getter e setter show representam a propriedade show que pode ser adicionada a tag text-hider. Ela pode ser acessa de forma programática da seguinte maneira:

const textHider = new TextHider()
textHider.show = true
console.log(textHider.show) // true

Repare também em dois detalhes, um deles é que foi utilizado o método querySelector atrelado ao this, isso acontece porque o this dentro da classe se refere diretamente ao elemento que estamos criando e que como dito antes ele possui toda a API DOM comum aos elementos HTML. O outro detalhe se encontra dentro do if no método setter do atributo show, em que alteramos o innerText do segundo elemento span dependendo se o valor recebido era verdadeiro ou falso, fazendo isso somos capazes de ter uma certa reatividade no elemento, fazendo com que ele reaja à toda vez em que o valor de show é alterado.

Métodos de reação

Elementos customizados podem definir métodos de ciclo de vida especiais, que são executados em momentos específicos da sua existência. Eles são conhecidos como métodos de reação.

constructor: chamado quando um novo elemento é instanciado ou aprimorado. Útil para definir estados iniciais, adicionar eventos e afins.
connectedCallback: chamado quando o elemento é inserido dentro do DOM, sendo o light DOM ou o shadow DOM de outro elemento(depois vamos falar sobre light DOM e shadow DOM). Útil para rodar código preparatório ou que receba alguma condição externa ao entrar no DOM.
disconnectedCallback: chamado quando o elemento é removido do DOM. Útil para rodar códigos de limpeza, como remoção de ouvintes de evento.
attributeChangedCallback: chamando quando algum atributo observado é adicionado, alterado ou removido. Esses atributos são listados no array retornado no método getter estático observedAttributes, logo mais falaremos sobre ele. Esse é o único método que recebe parâmetros, sendo o primeiro o nome do atributo alterado, o segundo sendo o valor antigo do atributo e o último sendo o novo valor.
adoptedCallback: chamado quando o elemento é movido de documento. (por exemplo, quando alguém invoca document.adoptNode(el)).

Esses métodos de reação, são síncronos e serão imediatamente invocados quando as condições de invocação forem satisfeitas.
Não é necessário definir todos esses métodos, utilize deles quando fizer sentido.

class MeuComponente extends HTMLElement {
  static get observedAttributes() {
    return []
  }

  constructor() {
    super()
  }

  connectedCallback() {...}

  disconnectedCallback() {...}

  attributeChangedCallback(name, oldValue, newValue) {...}

  adoptedCallback() {...}
}

Propriedades e atributos

Como vimos antes podemos definir métodos para ter acesso aos atributos de um elemento de forma programática bem simples, além de ser um certo padrão de acesso aos atributos nos elementos HTML. Vamos usar uma div de exemplo alterando os atributos hidden e id:

div.id = 'my-id'
div.hidden = true

A atribuição pelo JS, é refletida no HTML:

<div id="my-id" hidden>

Isso pode ser chamado de "refletindo propriedades à atributos", lembrar desses detalhes é muito importante para ter a noção de que nosso elemento definido no JS está em sincronia com sua representação no DOM e isso pode até mesmo afetar estilizações que, por exemplo, usem seletores de atributos ([attribute]).

Observando mudanças à atributos

Adicionar atributos a um elemento é uma forma comum de definir o estado inicial daquele elemento. Como vimos podemos adicionar um método attributeChangedCallback para que nosso elemento reaja a mudança nos atributos, porém ele somente será invocado caso o nome do atributo esteja no array retornado por observedAttributes e este método deve ser obrigatoriamente static get.

static get observedAttributes() {
  return ['attribute']
}

Isso é implementado dessa maneira por questão de performance, para que seu código não seja invocado de formas desnecessárias, como por exemplo, quando mudar o atributo class e ser invocado attributeChangedCallback.

Referências

https://developers.google.com/web/fundamentals/web-components/customelements

Conclusão

Essas são as formas como podemos manipular as reações dos elementos e seus atributos. O conteúdo dessa parte é de certa forma simples, porém eu aconselho muito a treinar bastante e ver como os elementos reagem para entender cada detalhe melhor. Espero que gostem e qualquer dúvida deixe um comentário e até logo!!!

Web Components, o que são e como criar (parte 1)

Gabriel José — Thu, 25 Feb 2021 22:23:21 +0000

Essa é a primeira parte de uma série de tutoriais sobre Web Components. Nesse tutorial veremos o que são Web Components e como fazer um.

Resumidamente um Web Component é uma tag customizada, podendo ser uma nova tag, um aprimoramento de uma tag já existente ou de outra tag customizada. Nós utilizamos da API customElements para criar esses elementos customizados.

Definindo um novo elemento

A API customElements possuí um método define que é utilizado para definir um novo elemento. Ele recebe 3 parâmetros, mas por enquanto vamos mexer somente com os 2 primeiros. O primeiro parâmetro é o nome da tag e o segundo parâmetro é uma classe que herde de HTMLElement.

class MyText extends HTMLElement {}
customElements.define('my-text', MyText)

// Ou usando uma classe anônima
customElements.define('my-text', class extends HTMLElement {})

Repare que o nome da tag está todo em minúsculo e possuí um "-", não é por coincidência, existem algumas regras a seguir:

Deve possuir no mínimo um "-"(traço).
Além do "-" o único carácter especial aceito é "_"(underscore).
Possuir somente letras minúsculas.
Deve iniciar com no mínimo uma letra.
Todas as tags devem possuir um fechamento (<my-tag></my-tag>), pois o HTML só permite tags auto fechadas, como o meta ou img, para algumas tags específicas.

O motivo dessas regras é para que o analisador do HTML possa distinguir entre elementos customizados e elementos normais. Além disso, garante que não ocorra problemas com futuras tags que forem adicionados ao HTML.

Definindo o conteúdo do componente

Para definir o conteúdo HTML de um elemento você pode simplesmente adicionar o valor ao seu atributo innerHTML. Lembrando que seu componente possuí acesso a todos os tipos de propriedades gerais dos elementos HTML, como innerHTML, getAttribute, children, entre outros...

Vamos criar um index.html com o seguinte conteúdo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="data:image/x-icon;" type="image/x-icon">
  <title>Web components</title>
</head>
<body>
  <my-text></my-text>

  <script>
    class MyText extends HTMLElement {
      constructor() {
        super()
        this.innerHTML = '<h2>Meu Texto</h2>'
      }
    }

    customElements.define('my-text', MyText)
  </script>
</body>
</html>

Será possível ver escrito Meu Texto na página do navegador.

Nesse mesmo código mova o conteúdo da tag script para um arquivo separado e vamos continuar por nele.

O conteúdo desse elemento pode ser facilmente estilizado com CSS. No caso do h2 do my-text seria selecionando o elemento de dentro da tag, por exemplo, my-text h2 ou my-text > h2. Depois veremos mais sobre o uso de CSS com Web Components, mas por enquanto, assim funciona.

Usando Templates

Nós também podemos utilizar das tags template para gerar o conteúdo HTML dos componentes. Caso você não conheça sobre as tags de template, basicamente, tudo que for inserido dentro da tag não será interpretado pelo analisador do HTML. Contudo, esse conteúdo pode ser replicado inúmeras vezes usando a propriedade content.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="data:image/x-icon;" type="image/x-icon">
  <title>Web components</title>
</head>
<body>
  <my-text></my-text>

    <template>
    <h2>Meu Texto</h2>
  </template>

  <script src="js/main.js"></script>
</body>
</html>

const template = document.querySelector('template')

class MyText extends HTMLElement {
  constructor() {
    super()
    this.append(template.content.cloneNode(true))
  }
}

customElements.define('my-text', MyText)

Utilizando o método cloneNode de content é possível copiar todo o conteúdo interno do template.

Estendendo elementos

Além de criar novos elementos a API customElements também nós permite estender elementos previamente criados.

class MyTitle extends MyText {
  constructor() {
    super()
  }
}

customElements.define('my-title', MyTitle)

Com o código acima podemos estender o elemento my-text que criamos anteriormente. Note que ao inserir <my-title></my-title> no html veremos o mesmo resultado de my-text. O Elemento my-title herda tudo que foi inserido em my-text e usando de princípios da programação orientada a objetos você pode alterar a forma como o elemento se comporta.

Estendendo elementos HTML nativos

Além de criar novos elementos a partir de outros, você também pode criar elementos a partir dos elementos já existentes no HTML.

É bem simples de se implementar e pode ser bastante útil dependendo do seu objetivo.

Para se criar um elemento dessa maneira é necessário que o elemento herde da interface DOM correta. Ao criar um elemento novo herdamos da interface HTMLElement e dependendo da tag que você deseja herdar a interface será diferente. Como por exemplo, um button usa a interface HTMLButtonElement, um p usa a interface HTMLParagraphElement:

class MyParagraph extends HTMLParagraphElement {
  constructor() {
    super()
    this.innerHTML = 'Meu parágrafo!!!'
  }
}

customElements.define('my-parag', MyParagraph, { extends: 'p' })

<p is="my-parag"></p>

Repare em dois detalhes, primeiro que usamos o terceiro parâmetro do customElements.define no qual é um objeto que recebe a opção extends em que inserimos qual a tag que desejamos estender e segundo que não colocamos <my-parag></my-parag> e sim usando o atributo is direto na tag p.

Gerando elementos programaticamente

Você pode gerar um elemento customizado usando a classe em que ele foi definido.

const myText = new MyText()

E você pode conseguir acesso a essa classe através do método get do customElements. Ele recebe um parâmetro que será o nome do elemento previamente definido.

const MyText = customElements.get('my-text')
const myText = new MyText()

No caso de elementos que estendem elementos nativos do HTML, eles podem ser criados das mesmas maneiras já mostradas ou usando document.createElement e será necessário passar um segundo parâmetro indicando que ele é um elemento customizado.

const myParagraph = document.createElement('p', { is: 'my-parag' })

Referências

https://developers.google.com/web/fundamentals/web-components/customelements

Conclusão

Esse é o básico quando se trata da criação de Web Components. Ainda há bastante a se falar sobre então fique atento as próximas partes. Espero que tenha gostado e qualquer dúvida pode deixar um comentário, no mais até logo!!!

Servers with Node.js HTTP Module

Gabriel José — Sun, 21 Feb 2021 19:23:50 +0000

If just like me you like to know how things works under the hood, so come with me and i'll show you how to make a server with Node.js free of dependencies.

First of all, is fully recommended that you have already know some JavaScript and how to use Node.js, here we won't cover that principles.

Let's start by the package.json file, you can create this file normally, isn't necessary to run npm init on terminal, just if you want.

This is the necessary for us in the package.json:

{
  "private": true,
  "scripts": {}
}

But you can add any field you want.

Now you might be thinking, why a package.json file if it's a zero dependency project? It's just because we will use the scripts option and dev dependencies.

Now let's create our first folder and JS file. Create src folder in the root directory and an index.js inside it.

src--
   \- index.js
package.json

Lets install nodemon as a development dependency:

npm i -D nodemon

And set a new script option in the package.json:

{
    "private": true,
    "scripts": {
        "start": "nodemon src/."
    }
}

Now we’ll need the http core module of node.js, in the index.js file:

const http = require('http')

With the http module, we’ll use the createServer method to initialize the server. This method receive a function as it's first argument and that function receives two arguments, commonly called request and response.

const http = require('http')
http.createServer((request, response) => {})

request: is for the incoming request, where is the data about what is requested
response: which is used to set the data that we’ll send back This is just a summary, if you want to learn more about those two arguments, see in the docs: https://nodejs.org/dist/latest-v14.x/docs/api/http.html#http_http_createserver_options_requestlistener

The createServer method returns a Server instance, lets set it in a constant and then call the listen method to actually start our server.

const http = require('http')
const server = http.createServer((request, response) => {})
server.listen(3100)

The listen method can receive two arguments. First is the port, the second is optional and is a listener function that runs when the server is actually listening to requests. This function is commonly used to write something on console when the server's start.

const http = require('http')
const port = 3100

const server = http.createServer((request, response) => {})

server.listen(port, () => {
  console.log(`Server started in port ${port}`)
})

Within the createServer function, we will start make the server’s logic. With the request object we’ll get the current request method and the path.

const http = require('http')
const port = 3100

const server = http.createServer((request, response) => {
  console.log(request.url, request.method)
})

server.listen(port, () => {
  console.log(`Server started in port ${port}`)
})

Now to start the server we type in terminal node src/index.js, but we've already set it in the package.json file a script with nodemon, so you can type npm start instead.

By typing npm start on terminal we run that script, which runs nodemon src/index.js.

To test it, open your browser and enter http://localhost:3100 and than you will see this in the terminal.

/ GET

And the browser will be in an infinite load, but why this is happening? It’s because we receive the request but doesn’t send a response back. To change it let’s change our server listener code.

const http = require('http')
const port = 3100

const server = http.createServer((request, response) => {
  response.end(request.url + ' ' + request.method)
  // or response.end(`${request.url} ${request.method}`)
})

server.listen(port, () => {
  console.log(`Server started in port ${port}`)
})

Now you must see / GET in the browser not in the terminal.

And if you type a different path in the url it will be shown too.

Let’s start the good part. Now that you know how to create the server, let’s see some interesting methods and properties:

response.write: this method will write something to the response payload and will be sended all together when method response.end is called. And how you could see the response.end itself can do it too, but can only be called once per request.

const http = require('http')
const port = 3100

const server = http.createServer((request, response) => {
  response.write('On write method\n')
  response.end('On end method')
})

server.listen(port, () => {
  console.log(`Server started in port ${port}`)
})

response.statusCode: this is a property which we can set the status code for our response, if you don't know about HTTP Status Codes go check it out: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Status

response.setHeader: this is a method used to set any header to the response. It receives two arguments, first is the header's name and the second is its value, a header can be simply see as a key and value pair, but if don't know much about go check it out: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

A common header we’ll use is the Content-Type which show to client what is the type of the content we're sending back, for example:

const server = http.createServer((request, response) => {
  response.setHeader('Content-Type', 'text/html')    
  response.write('<h1>On write method</h1>')
  response.end('<h2>On end method</h2>')
})

In code above we’re saying that the response content is a text of type HTML and it could be a just a simply text setting the header to:

const server = http.createServer((request, response) => {
  response.setHeader('Content-Type', 'text/plain')
  response.write('<h1>On write method</h1>')
  response.end('<h2>On end method</h2>')
})

That kind of value we set on Content-Type header is called MIME Type and if you don't know much about you can see here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types

response.writeHead: that method its kind a fusion of response.statusCode and response.setHeader but in that case we set the header as an object:

const server = http.createServer((request, response) => {
  response.writeHead(200, { 'Content-Type': 'text/html' })
  response.write('<h1>On write method</h1>')
  response.end('<h2>On end method</h2>')
})

And will produce the same result as using the two methods separated.

request.url: has the value of the current requested path, for example:

http://localhost/ = /
http://localhost/about = /about
http://localhost/index.html = /index.html

request.method: has the value of the current requested method, like GET, POST, PUT, DELETE, etc...

request.headers: has the value of the headers sended in the request, like:

{
   'user-agent': 'curl/7.22.0',
   host: '127.0.0.1:8000',
   accept: '*/*'
}

Now that we see how all of those things works, we can make some routing in the server.

An example for a simple routing, is using if statements:

const http = require('http')
const port = 3100

const server = http.createServer((request, response) => {
    response.setHeader('Content-Type', 'text/html')

    if(request.url === '/') {
        response.end(`
           <h1>Home</h1>
           <p>This is the home page</p>
        `)
    } else if(request.url === '/about') {
        response.end(`
           <h1>About</h1>
               <p>This is the about page</p>
        `)
    } else {
        response.statusCode = 404
        response.end(`
           <h1>Not Found</h1>
           <p>This page was not found</p>
        `)
    }
})

server.listen(port, () => {
  console.log(`Server started in port ${port}`)
}))

You can go to the browser and type the urls and see the magic.

Conclusion

This tutorial shows only an introduction to the subject, there is much more things you can learn when doing a server like this, but let’s put them in another tutorials. I hope you could understand everything and if you any questions just leave a comment below and see you!