├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc ├── .prettierignore ├── README.md ├── cssnano.config.js ├── index.html ├── index.js ├── package-lock.json ├── package.json └── prettier.config.js /.eslintignore: -------------------------------------------------------------------------------- 1 | /.git 2 | /.vscode 3 | /.idea 4 | /.cache 5 | /.history 6 | /dist 7 | node_modules 8 | .DS_Store 9 | DS_Store? 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | es6: true, 4 | browser: true, 5 | node: true, 6 | }, 7 | extends: [], 8 | plugins: ['import', 'prettier'], 9 | parser: '@babel/eslint-parser', 10 | parserOptions: { 11 | ecmaVersion: 6, 12 | sourceType: 'module', 13 | ecmaFeatures: { 14 | jsx: true, 15 | }, 16 | }, 17 | rules: { 18 | 'prettier/prettier': ['error'], 19 | 'no-console': ['error', { allow: ['warn', 'error'] }], 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## IDE specific 2 | .idea/ 3 | .DS_Store 4 | DS_Store? 5 | .vscode/ 6 | 7 | ## Chores 8 | .eslintcache 9 | 10 | ## Building 11 | node_modules/ 12 | dist/ 13 | .cache 14 | .history 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | ## Other 20 | Desktop.ini 21 | Thumbs.db 22 | ._* 23 | tmp/ 24 | -------------------------------------------------------------------------------- /.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "modules": true, 3 | "plugins": { 4 | "autoprefixer": { 5 | "grid": true 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /.git 2 | /.vscode 3 | /.idea 4 | /.cache 5 | /.history 6 | /dist 7 | node_modules 8 | .DS_Store 9 | DS_Store? 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Framework 2 | 3 | A gradual FE JS framework development. 4 | 5 | ## End game 6 | 7 | Have a web app as a practical implementation 8 | of an application backed with a basic FE framework. 9 | 10 | Framework features: 11 | 12 | - components with props 13 | - html-like syntax 14 | - app state management 15 | - event handling 16 | - async network requests 17 | 18 | Out of scope: 19 | 20 | - reconciliation 21 | - app state persistency between sessions 22 | - everything else :) 23 | 24 | ## Development 25 | 26 | Make sure you have [Node.js](https://nodejs.org/en/) installed on your machine. 27 | 28 | `npm install` to install dependencies. 29 | Ignore npm audit warnings. 30 | If any changes appear on `package-lock.json` just commit those. 31 | 32 | `npm start` to launch dev server, app would be served at http://localhost:1234/ 33 | 34 | `npm run lint` to lint and prettify your code 35 | 36 | The project implements a pre-commit hook that launches staged files linting. 37 | If your IDE reports a commit failure then run `npm run lint` and/or `npm run lint:staged` 38 | and fix reported issues. Note that [`.eslintrc.js`](./.eslintrc.js) allows 39 | `console.error` and `console.warn`. 40 | 41 | `npm run build` to build production distribution package 42 | 43 | `npm run deploy` to publish built app 44 | -------------------------------------------------------------------------------- /cssnano.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: [ 3 | 'default', 4 | { 5 | calc: false, 6 | discardComments: { 7 | removeAll: true, 8 | }, 9 | }, 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Web Application 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // Start from here 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend-2021-framework", 3 | "version": "0.3.1", 4 | "description": "", 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel ./index.html", 8 | "lint:js": "npx eslint --cache .", 9 | "lint:js:fix": "npm run lint:js -- --fix", 10 | "prettify": "npx prettier --write \"**/*.{js,css,md,html}\"", 11 | "lint": "npm run lint:js:fix && npm run prettify", 12 | "lint:staged": "npx lint-staged", 13 | "prebuild": "shx rm -rf dist/*", 14 | "build": "parcel build ./index.html --public-url ./", 15 | "deploy": "gh-pages -d dist" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/kottans/framework-2021.git" 20 | }, 21 | "keywords": [], 22 | "author": "", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/kottans/framework-2021/issues" 26 | }, 27 | "homepage": "https://github.com/kottans/framework-2021#readme", 28 | "dependencies": {}, 29 | "devDependencies": { 30 | "@babel/core": "^7.13.14", 31 | "@babel/eslint-parser": "^7.13.14", 32 | "@babel/preset-env": "^7.13.12", 33 | "autoprefixer": "^9.8.6", 34 | "babel-preset-env": "^1.7.0", 35 | "eslint": "^7.23.0", 36 | "eslint-plugin-import": "^2.22.1", 37 | "eslint-plugin-prettier": "^3.3.1", 38 | "gh-pages": "^3.1.0", 39 | "lint-staged": "^10.5.4", 40 | "parcel-bundler": "1.12.3", 41 | "postcss-modules": "^3.2.2", 42 | "pre-commit": "^1.2.2", 43 | "prettier": "^2.2.1", 44 | "shx": "^0.3.3" 45 | }, 46 | "babel": { 47 | "presets": [ 48 | [ 49 | "env", 50 | { 51 | "targets": { 52 | "node": "current" 53 | } 54 | } 55 | ] 56 | ] 57 | }, 58 | "browserslist": [ 59 | "since 2021-01" 60 | ], 61 | "pre-commit": "lint:staged", 62 | "lint-staged": { 63 | "**/*.{js,jsx}": [ 64 | "eslint --cache --fix" 65 | ], 66 | "**/*.{js,css,md,html}": [ 67 | "prettier --write" 68 | ] 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 100, 3 | singleQuote: true, 4 | trailingComma: 'all', 5 | bracketSpacing: true, 6 | jsxBracketSameLine: false, 7 | tabWidth: 2, 8 | semi: true, 9 | arrowParens: 'avoid', 10 | }; 11 | --------------------------------------------------------------------------------