To provide developers with a set of good tools to get started quickly developing of a small web SPA. You can comfortably create a framework agnostic JS application, but (c) "Thinking in React" with reactivity based on the Redux-toolkit and Reef.js lib.
- This Starter Kit focused on creating App based on predictable Flux architecture
- Focused on modern JS
- Used optional type checking by JSDoc + VSCode + Typescript (tsc)
- HTML-in-JS (plain HTML in plain JS) instead of JSX
- Bootstrap (without jquery and popper.js) for simple CSS
- Bootstrap's CSS is reducing with Auto-Purge, while build creating
- Separation of App logic and UI
- Components architecture, rely on predictable RTK style
- All RTK features: Redux Dev Tools, slices, immer, etc.
- Jest and @testing-library/dom for tests
- @babel for: es6 to es5 and correct work with jest & ESM modules
- Automatic generation of html documentation from JSDoc + docdash as a nice looking template for JSDoc
- Automatic README.md generation from JSDoc
- Husky: for hooks
- Flexibility. Feel free to change one library from this starter kit to another. For example you can change Redux-toolkit to vanilla Redux for reduce size of final bundle. Feel free to experimenting.
- git clone [this_repo_url] && cd [repo_name] && npm i (install this repo on your machine)
- npm run test (for tests)
- npm run lint (for analysis code in /src by ESLint + type checking by JSDoc + VSCode + tsc)
- npm run start (for run dev server)
- npm run build (for creating public build, index.html is autogenerate)
- npm run docs (for create html docs for app by JSDoc and md-docs by jsdoc-to-markdown)
- npm run serve (for run app local server and www)
- use VSC + Extensions: "Comment tagged templates", "lit-html", for best expierence with HTML-in-JS template literals
Module | Description |
---|---|
components-Button | |
components-GithubCorner | |
utils-DOMDidMount | |
utils-keyboardEventListener | |
utils-mapAllDispatch |
Presentational component
Kind: inner method of components-Button
Returns: string
- template literal: bootstrap .col + custom html button
Param | Type | Description |
---|---|---|
props | Object |
|
[props.role] | string |
HTML role attribute |
[props.className] | string |
HTML class attribute |
[props.eventType] | string |
HTML attribute named on-eventtype, specify an on-event handler for a particular event (such as click) |
[props.event] | string |
Event target |
[props.nodeText] | string |
HTMLElement.innerText |
Example
${Button({
role: 'appButtonIncrement',
className: 'app-btn btn btn-outline-success btn-lg btn-block',
eventType: 'ondblclick',
event: 'globalThis.mapAllDispatch.incrementDecrement.increment()',
nodeText: '+',
})}
Presentational component
Kind: inner method of components-GithubCorner
Returns: string
- template literal: octoCat svg + link to repo
Param | Type | Description |
---|---|---|
linkToRepo | string |
link to github repository |
Example
${GithubCorner('https://github.com/')}
Return eventListener -DOMContentLoaded- for window obj. The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
Kind: inner method of utils-DOMDidMount
Example
// keyboardEventListener()
DOMDidMount()
Function which define EventListener for catching Keyboard and NumPad buttons: + - delete backspace; and ignoring all f-buttons on keyboard
Kind: inner method of utils-keyboardEventListener
Returns: string
- an empty string
Example
// click on keyboard [+] ~> -increment-
// click on keyboard [-] ~> -decrement-
// click on keyboard [delete] ~> -clear all-
keyboardEventListener()
Connect library for compose RTK actions
Kind: inner class of utils-mapAllDispatch