kottans / framework-2021 Goto Github PK

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: is able to re-render a specific component (?)
Hooks:

• state
• events

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>
`;

Contexts:

• unit switch
• data

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

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)

1. In .postcssrc: add globalModulePaths

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

2. Add src/index.css for global styles

... just like CHECKED and DISABLED

Consider adding SingleSelection component example based on <select> .

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

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

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

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}\"

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)

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

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

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

• 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)

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