kottans / framework-2021

A custom framework empowered Weather App

Framework

A gradual FE JS framework development.

End game

Have a web app as a practical implementation of an application backed with a basic FE framework.

Framework features:

• components with props
• html-like syntax
• app state management
• event handling
• async network requests

Out of scope:

• reconciliation
• app state persistency between sessions
• everything else :)

Development

Make sure you have Node.js installed on your machine.

npm install to install dependencies. Ignore npm audit warnings. If any changes appear on package-lock.json just commit those.

npm start to launch dev server, app would be served at http://localhost:1234/

npm run lint to lint and prettify your code

The project implements a pre-commit hook that launches staged files linting. If your IDE reports a commit failure then run npm run lint and/or npm run lint:staged and fix reported issues. Note that .eslintrc.js allows console.error and console.warn.

npm run build to build production distribution package

npm run deploy to publish built app

framework-2021's Issues

chores: Cherrypick patches on top of the latest app version

Patch-fixes of the following issues should be put on dev/main

• #34 postcss config (resolved by 74ba98c)
• #35 JSX className prop handling (resolved by 13576f7)
• #36 SELECTED, MULTIPLE, REQUIRED attributes handling (pending blocker)

Add components with props, htmlx (v1.2)

Pre-requisites:

• Template literals & tagged letrals: write your own template parser:
  • simple interpolation
  • every param transformed (strings are enclosed in qoutes, numerics are multiplied, objects/arrays stringified, functions => FuncName())
• Data Structures: write your own DOM tree and HTML renderer
• RegExp: write your own HTML parser (HTML string => tree)

Task:

• Function calls => HTMLX
• Each function => component with props

Setup dev env

• .gitignore
• .editorconfig
• eslint config
• prettier config
• package.json (with npm)
• builder (with HMR/watch)

Homework assignment v1.0.x => 1.1.x; Preps to v1.2

Complete the items below taking the item group priority into consideration

P0 - must have
P1 - nice to have; put aside for a while when any task of a higher priority arrives (e.g. next homework in the course)
P2 - you will really ramp your skills up if you do; put aside when any task of a higher priority arrives (e.g. next homework in the course)

v1.0.x => v1.1.x

• P0: use real network API requests instead of fixtures in your app
• P0: Client-Server communications:
  • read Сетевые запросы

Preps to v1.2

• P1: template literals:
  • read Template literals & tagged literals
  • implement template literal tag function/handler
• P2: parsing source code (JS, HTML/HTMLx)
  • read Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация @ habr
  • read HTML5 Parser @ MDN
  • read Let's build a browser engine!
  • read How to build an HTML parser? @ SO
  • TL;DR 13.2 Parsing HTML documents
  • code reading: github.com/tmont/html-parser
  • quasi-JSX based on template literals using DOMParser Web API: ES6 Quiasi-literal for JSX
  • implement your own HTML or JSX parser
• P2: GraphQL vs REST
  • read Что же такое этот GraphQL?
  • read Сравнение REST и GraphQL

dev env: Change app deployment script to use gh-pages

Issue 1

Problem:
a8e06ad (currently on dev) brings back push-dir as a publishing script.
Alternative deployment package gh-pages is already listed among dev dependencies.

Desired outcome:
gh-pages is used as a publishing method.

Suggested approach:
package.json: change deploy script so that it runs gh-pages -d dist

Issue 2

Problem:
a8e06ad (currently on dev) brings back shell interpretation of glob passed to npx prettier.

Desired outcome:
npx prettier glob is quoted and therefore interpreted by prettier, not shell.

Suggested approach:
package.json: change prettify script so that it runs npx prettier --write \"**/*.{js,css,md,html}\"

Homework assignment v1.1.x => v1.2.x; Preps to v1.3.x

Complete the items below

P0 - must have
P1 - nice to have; put aside for a while when any task of a higher priority arrives (e.g. next homework in the course)
P2 - you will really ramp your skills up if you do; put aside when any task of a higher priority arrives (e.g. next homework in the course)

v1.1.x => v1.2

• P0: split your code base into modules (components, data/API, framework)
• P0: migrate to JSX
• P1: make your app looking nice with a touch of visual design / css-styling

framework/element: Add className property handling

Problem:
createElement doesn't handle tags' className attribute.

Solution:
If className is a string then => split at spaces.
Then element.classList.add(...classNamesList)

Migrate to production framework (v1.5)

Add hooks and event handling (v1.3)

Framework: is able to re-render a specific component (?)
Hooks:

• state
• events

parcelJS v1.12.4 incompatible with nodeJS v14+

Problem

Under windows 10, NodeJS v14+, with parcel-bundler v1.12.4 as a dev dependency npm run start results in D:\dev\OR\kottans\framework-2021\index.js: Invalid Version: undefined
error.

It's a known issue.

Solution

Pin parcel-bundler version as 1.12.3 in dev-dependecies

Add API calls (v1.1)

https://openweathermap.org/api

Global data container gets updated with nw request.
Framework: re-renders App
Every component looks into global data container

Code base: single spaghetti-file

Entertaining APIs

• Rick and Morty
• TMDB
• DC universe
• Marvel universe
• Pokemons
• LOTR
• NASA
• Star wars: universe + imagery
• SpaceX
• Harry Potter
• any other similar
  • (Todd Motto curated list
  • programmable web)

Add component functions (v1.0)

Components:

• App
• Search by city
• Temperature units switch (F/C)
• Today's weather
• 5 days forecast

Framework.render

Static data (3 cities, todays weather, 5 days forecast)

css-in-js

Source: https://codesandbox.io/s/pedantic-wilson-41ip7?file=/src/index.ts:0-442

//@ts-expect-error
import kebabCase from "kebab-case";

const styles = {
  color: "blue",
  fontFamily: "comic sans ms",
  fontSize: "42px"
};

Object.defineProperty(styles, "toString", {
  value: function (this: string) {
    return Object.keys(this)
      .map((key) => `${kebabCase(key)}:${this[key]}`)
      .join(";");
  },
  writable: false
});

document.getElementById("app").innerHTML = `
  <div style="${styles}">Hello world</div>
`;

Enable css and static assests bundling

Supplementary resources

• https://dev.to/swyx/how-to-add-prettier-and-eslint-automation-to-a-react-codebase-2gk1

dev env: Add globalModulePaths in .postcss

1. In .postcssrc: add globalModulePaths

{
  ...
  plugins: {
    ...
    'postcss-modules': {
      ...
      globalModulePaths: [
        'src/index.css'
      ]
    }
  }
}

2. Add src/index.css for global styles

framework/element: Add element's SELECTED, MULTIPLE, REQUIRED attributes handling

... just like CHECKED and DISABLED

Consider adding SingleSelection component example based on <select> .

Add state management, context (v1.4)

Contexts:

• unit switch
• data