├── .gitignore
├── Chapter02
├── callback-1.js
├── command-1.js
├── decorator-1.vue
├── decorator-2.vue
├── dependency-injection-1.js
├── dependency-injection-2.js
├── dependency-injection-3.js
├── dependency-injection-4.js
├── dependency-injection-5.js
├── dependency-injection-6.js
├── dependency-injection-7.js
├── observer-1.js
├── promises-1.js
├── proxy-1.js
├── singleton-class.js
├── singleton-invoker.js
└── singleton-json.js
├── Chapter03
├── .gitignore
├── .vscode
│ └── extensions.json
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│ ├── css
│ │ ├── all.css
│ │ ├── all.min.css
│ │ ├── brands.css
│ │ ├── brands.min.css
│ │ ├── fontawesome.css
│ │ ├── fontawesome.min.css
│ │ ├── regular.css
│ │ ├── regular.min.css
│ │ ├── solid.css
│ │ ├── solid.min.css
│ │ ├── svg-with-js.css
│ │ ├── svg-with-js.min.css
│ │ ├── v4-font-face.css
│ │ ├── v4-font-face.min.css
│ │ ├── v4-shims.css
│ │ ├── v4-shims.min.css
│ │ ├── v5-font-face.css
│ │ ├── v5-font-face.min.css
│ │ └── w3.css
│ ├── vite.svg
│ └── webfonts
│ │ ├── fa-brands-400.ttf
│ │ ├── fa-brands-400.woff2
│ │ ├── fa-regular-400.ttf
│ │ ├── fa-regular-400.woff2
│ │ ├── fa-solid-900.ttf
│ │ ├── fa-solid-900.woff2
│ │ ├── fa-v4compatibility.ttf
│ │ └── fa-v4compatibility.woff2
├── src
│ ├── App.vue
│ ├── assets
│ │ └── vue.svg
│ ├── components
│ │ └── ToDos.vue
│ ├── main.js
│ └── style.css
└── vite.config.js
├── Chapter04
├── modal-plugin-example
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── css
│ │ │ ├── all.css
│ │ │ ├── all.min.css
│ │ │ ├── brands.css
│ │ │ ├── brands.min.css
│ │ │ ├── fontawesome.css
│ │ │ ├── fontawesome.min.css
│ │ │ ├── regular.css
│ │ │ ├── regular.min.css
│ │ │ ├── solid.css
│ │ │ ├── solid.min.css
│ │ │ ├── svg-with-js.css
│ │ │ ├── svg-with-js.min.css
│ │ │ ├── v4-font-face.css
│ │ │ ├── v4-font-face.min.css
│ │ │ ├── v4-shims.css
│ │ │ ├── v4-shims.min.css
│ │ │ ├── v5-font-face.css
│ │ │ ├── v5-font-face.min.css
│ │ │ └── w3.css
│ │ ├── vite.svg
│ │ └── webfonts
│ │ │ ├── fa-brands-400.ttf
│ │ │ ├── fa-brands-400.woff2
│ │ │ ├── fa-regular-400.ttf
│ │ │ ├── fa-regular-400.woff2
│ │ │ ├── fa-solid-900.ttf
│ │ │ ├── fa-solid-900.woff2
│ │ │ ├── fa-v4compatibility.ttf
│ │ │ └── fa-v4compatibility.woff2
│ ├── src
│ │ ├── App.vue
│ │ ├── assets
│ │ │ └── vue.svg
│ │ ├── main.js
│ │ ├── plugins
│ │ │ └── modals
│ │ │ │ ├── Modal.vue
│ │ │ │ └── index.js
│ │ └── style.css
│ └── vite.config.js
└── todo-list-example
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── css
│ │ ├── all.css
│ │ ├── all.min.css
│ │ ├── brands.css
│ │ ├── brands.min.css
│ │ ├── fontawesome.css
│ │ ├── fontawesome.min.css
│ │ ├── regular.css
│ │ ├── regular.min.css
│ │ ├── solid.css
│ │ ├── solid.min.css
│ │ ├── svg-with-js.css
│ │ ├── svg-with-js.min.css
│ │ ├── v4-font-face.css
│ │ ├── v4-font-face.min.css
│ │ ├── v4-shims.css
│ │ ├── v4-shims.min.css
│ │ ├── v5-font-face.css
│ │ ├── v5-font-face.min.css
│ │ └── w3.css
│ ├── vite.svg
│ └── webfonts
│ │ ├── fa-brands-400.ttf
│ │ ├── fa-brands-400.woff2
│ │ ├── fa-regular-400.ttf
│ │ ├── fa-regular-400.woff2
│ │ ├── fa-solid-900.ttf
│ │ ├── fa-solid-900.woff2
│ │ ├── fa-v4compatibility.ttf
│ │ └── fa-v4compatibility.woff2
│ ├── src
│ ├── App.vue
│ ├── assets
│ │ └── styles.css
│ ├── components
│ │ ├── ToDoFilter.vue
│ │ ├── ToDoItemForm.vue
│ │ ├── ToDoList.vue
│ │ ├── ToDoProject.vue
│ │ ├── ToDoSummary.vue
│ │ └── headers
│ │ │ └── MainHeader.vue
│ ├── main.js
│ ├── plugins
│ │ └── modals
│ │ │ ├── Modal.vue
│ │ │ └── index.js
│ └── services
│ │ └── todo.js
│ └── vite.config.js
├── Chapter05
├── Nested routes
│ ├── .gitignore
│ ├── .vscode
│ │ └── extensions.json
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── favicon.ico
│ ├── src
│ │ ├── App.vue
│ │ ├── assets
│ │ │ └── main.css
│ │ ├── main.js
│ │ ├── router
│ │ │ └── index.js
│ │ ├── services
│ │ │ ├── ARG_localities.json
│ │ │ ├── USA_localities.json
│ │ │ ├── countries.json
│ │ │ ├── locationService.js
│ │ │ └── states.json
│ │ └── views
│ │ │ ├── City.vue
│ │ │ ├── Directory.vue
│ │ │ ├── Home.vue
│ │ │ └── State.vue
│ └── vite.config.js
├── OTP example
│ └── SignInOTP.vue
└── to-do SPA
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── css
│ │ ├── all.css
│ │ ├── all.min.css
│ │ ├── brands.css
│ │ ├── brands.min.css
│ │ ├── fontawesome.css
│ │ ├── fontawesome.min.css
│ │ ├── regular.css
│ │ ├── regular.min.css
│ │ ├── solid.css
│ │ ├── solid.min.css
│ │ ├── svg-with-js.css
│ │ ├── svg-with-js.min.css
│ │ ├── v4-font-face.css
│ │ ├── v4-font-face.min.css
│ │ ├── v4-shims.css
│ │ ├── v4-shims.min.css
│ │ ├── v5-font-face.css
│ │ ├── v5-font-face.min.css
│ │ └── w3.css
│ ├── vite.svg
│ └── webfonts
│ │ ├── fa-brands-400.ttf
│ │ ├── fa-brands-400.woff2
│ │ ├── fa-regular-400.ttf
│ │ ├── fa-regular-400.woff2
│ │ ├── fa-solid-900.ttf
│ │ ├── fa-solid-900.woff2
│ │ ├── fa-v4compatibility.ttf
│ │ └── fa-v4compatibility.woff2
│ ├── src
│ ├── App.vue
│ ├── assets
│ │ └── styles.css
│ ├── components
│ │ ├── Sidebar
│ │ │ └── Sidebar.vue
│ │ └── ToDos
│ │ │ ├── ToDoFilter.vue
│ │ │ ├── ToDoItemForm.vue
│ │ │ ├── ToDoList.vue
│ │ │ └── ToDoSummary.vue
│ ├── main.js
│ ├── plugins
│ │ └── modals
│ │ │ ├── Modal.vue
│ │ │ └── index.js
│ ├── router
│ │ └── index.js
│ ├── services
│ │ ├── eventBus.js
│ │ └── todo.js
│ └── views
│ │ ├── Landing.vue
│ │ └── ToDoProject.vue
│ └── vite.config.js
├── Chapter06
├── .gitignore
├── .hintrc
├── manual-upscale-spa
│ ├── .vscode
│ │ └── extensions.json
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── images
│ │ │ └── chapter_6_icon.png
│ │ ├── manifest.json
│ │ ├── service_worker.js
│ │ └── vite.svg
│ ├── src
│ │ ├── App.vue
│ │ ├── main.js
│ │ └── style.css
│ └── vite.config.js
└── vite-pwa-plugin
│ ├── README.md
│ ├── dev-dist
│ ├── registerSW.js
│ ├── sw.js
│ ├── workbox-148cb7e5.js
│ └── workbox-3625d7b0.js
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── images
│ │ ├── chapter_6_icon.png
│ │ └── chapter_6_icon_192x192.png
│ ├── robots.txt
│ └── vite.svg
│ ├── src
│ ├── App.vue
│ ├── main.js
│ └── style.css
│ └── vite.config.js
├── Chapter07
├── .gitignore
├── .vscode
│ └── extensions.json
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│ └── favicon.ico
├── src
│ ├── App.vue
│ ├── assets
│ │ └── main.css
│ ├── components
│ │ ├── basic
│ │ │ ├── Child.vue
│ │ │ └── ParentBasic.vue
│ │ ├── bus
│ │ │ ├── Child.vue
│ │ │ └── ParentBus.vue
│ │ ├── pinia
│ │ │ ├── ChildPinia.vue
│ │ │ └── ParentPinia.vue
│ │ ├── session_storage
│ │ │ ├── ChildSession.vue
│ │ │ └── ParentSession.vue
│ │ └── simple
│ │ │ ├── ChildSimple.vue
│ │ │ └── ParentSimple.vue
│ ├── main.js
│ ├── services
│ │ ├── MessageBus.js
│ │ ├── SimpleState.js
│ │ └── sessionStorage.js
│ └── stores
│ │ └── counter.js
└── vite.config.js
├── Chapter08
├── client
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.vue
│ │ ├── components
│ │ │ ├── DbNotes.vue
│ │ │ └── NetworkCommunication.vue
│ │ ├── main.js
│ │ ├── services
│ │ │ └── WebWorker.js
│ │ ├── style.css
│ │ └── webworker
│ │ │ ├── index.js
│ │ │ └── services
│ │ │ ├── dbService.js
│ │ │ ├── network.js
│ │ │ └── test.js
│ └── vite.config.js
└── server
│ ├── index.js
│ ├── package-lock.json
│ └── package.json
├── Chapter09
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.vue
│ ├── assets
│ │ └── vue.svg
│ ├── components
│ │ ├── FibonacciInput.vue
│ │ └── FibonacciOutput.vue
│ ├── main.js
│ ├── services
│ │ └── Fibonacci.js
│ ├── style.css
│ └── tests
│ │ ├── Fibonacci.test.js
│ │ ├── FibonacciInput.test.js
│ │ └── FibonacciOutput.test.js
└── vite.config.js
├── Chapter10
├── apache
│ └── .htaccess
└── nginx
│ └── default.server
├── Chapter11
├── .gitignore
├── .vscode
│ └── extensions.json
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.vue
│ ├── components
│ │ ├── InfiniteScroller.vue
│ │ ├── Spinner.vue
│ │ └── Toggle.vue
│ ├── main.js
│ └── style.css
└── vite.config.js
├── README.md
└── basic site
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
├── css
│ ├── all.css
│ ├── all.min.css
│ ├── brands.css
│ ├── brands.min.css
│ ├── fontawesome.css
│ ├── fontawesome.min.css
│ ├── regular.css
│ ├── regular.min.css
│ ├── solid.css
│ ├── solid.min.css
│ ├── svg-with-js.css
│ ├── svg-with-js.min.css
│ ├── v4-font-face.css
│ ├── v4-font-face.min.css
│ ├── v4-shims.css
│ ├── v4-shims.min.css
│ ├── v5-font-face.css
│ ├── v5-font-face.min.css
│ └── w3.css
├── vite.svg
└── webfonts
│ ├── fa-brands-400.ttf
│ ├── fa-brands-400.woff2
│ ├── fa-regular-400.ttf
│ ├── fa-regular-400.woff2
│ ├── fa-solid-900.ttf
│ ├── fa-solid-900.woff2
│ ├── fa-v4compatibility.ttf
│ └── fa-v4compatibility.woff2
├── src
├── App.vue
├── assets
│ └── vue.svg
├── components
│ └── HelloWorld.vue
├── main.js
└── style.css
└── vite.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | "basic site"
3 | "chapter 1"
4 | "chapter 2"
--------------------------------------------------------------------------------
/Chapter02/callback-1.js:
--------------------------------------------------------------------------------
1 | /**
2 | The implementation of a Fibonacci calculation following the
3 | callback pattern, synchronous and asynchronous
4 | */
5 |
6 | function FibonacciSync(n, callback) {
7 | if (n < 2) {
8 | callback(n)
9 | } else {
10 | let pre_1 = 0, pre_2 = 1, value;
11 | for (let i = 1; i < n; i++) {
12 | value = pre_1 + pre_2;
13 | pre_1 = pre_2;
14 | pre_2 = value;
15 | }
16 | callback(value);
17 | }
18 | }
19 |
20 | function FibonacciAsync(n, callback) {
21 | setImmediate(() => {
22 | if (n < 2) {
23 | callback(n)
24 | } else {
25 | let pre_1 = 0, pre_2 = 1, value;
26 | for (let i = 1; i < n; i++) {
27 | value = pre_1 + pre_2;
28 | pre_1 = pre_2;
29 | pre_2 = value;
30 | }
31 | callback(value);
32 | }
33 | })
34 | }
35 |
36 | function FibonacciPromise(n) {
37 | return new Promise((resolve, reject) => {
38 | if (n < 0) {
39 | reject()
40 | } else {
41 | switch (n) {
42 | case 0:
43 | case 1:
44 | resolve(n);
45 | case 2:
46 | resolve(1);
47 | default:
48 | let pre_1 = 1, pre_2 = 1, value;
49 | for (let i = 2; i < n; i++) {
50 | value = pre_1 + pre_2;
51 | pre_1 = pre_2;
52 | pre_2 = value;
53 | }
54 | resolve(value);
55 | }
56 | }
57 | })
58 | }
59 |
60 | console.log("Before")
61 | FibonacciPromise(9).then(value=>console.log(value), ()=>{console.log("Not defined for negative numbers")})
62 | console.log("After")
63 |
--------------------------------------------------------------------------------
/Chapter02/command-1.js:
--------------------------------------------------------------------------------
1 | /**
2 | A code segment the implements a command pattern
3 | */
4 |
5 | class CommandInvoker{
6 |
7 | addCommand(command_data){
8 | // .. queue implementation here
9 | }
10 |
11 | runCommand(command_data){
12 |
13 | switch(command_data.action){
14 | case "eat":
15 | // ..
16 | break;
17 |
18 | case "code":
19 | // ..
20 | break;
21 |
22 | case "repeat":
23 | // ..
24 | break;
25 | }
26 | }
27 | }
--------------------------------------------------------------------------------
/Chapter02/decorator-1.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | {{$props.label}}
7 |
8 |
9 |
--------------------------------------------------------------------------------
/Chapter02/decorator-2.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/Chapter02/dependency-injection-1.js:
--------------------------------------------------------------------------------
1 | // Without dependency injection
2 |
3 | import dbManager from "dbManager"
4 |
5 | const projects={
6 | getAllProjects(){
7 | return dbManager.getAll("projects")
8 | }
9 | }
10 |
11 | export default projects;
--------------------------------------------------------------------------------
/Chapter02/dependency-injection-2.js:
--------------------------------------------------------------------------------
1 | // With dependency injection
2 |
3 | const projects={
4 | getAllProjects(dbManager){
5 | return dbManager.getAll("projects")
6 | }
7 | }
8 |
9 | export default projects;
--------------------------------------------------------------------------------
/Chapter02/dependency-injection-3.js:
--------------------------------------------------------------------------------
1 | // With dependency injection by property
2 |
3 | const projects={
4 | dbManager,
5 | getAllProjects(){
6 | return this.dbManager.getAll("projects")
7 | }
8 | }
9 |
10 | export default projects;
--------------------------------------------------------------------------------
/Chapter02/dependency-injection-4.js:
--------------------------------------------------------------------------------
1 | /**
2 | An example of a module that uses the example
3 | implementation from dependency-injection-3.js
4 | */
5 |
6 | import projects from "projects.js"
7 | import dbManager from "dbManager.js"
8 |
9 | projects.dbManager=dbManager;
10 | projects.getAllProjects();
--------------------------------------------------------------------------------
/Chapter02/dependency-injection-5.js:
--------------------------------------------------------------------------------
1 | /**
2 | An example of a class that requires the dependency
3 | in the constructor
4 | */
5 |
6 | class Projects {
7 | constructor(dbManager=null){
8 | if(!dbManager){
9 | throw "Dependency missing"
10 | }else{
11 | this.dbManager=dbManager;
12 | }
13 | }
14 | }
15 |
16 | // Then the instantiation would be as follows
17 |
18 | try{
19 | const projects=new Projects(dbManager)
20 | }catch{
21 | // Error handler here
22 | }
--------------------------------------------------------------------------------
/Chapter02/dependency-injection-6.js:
--------------------------------------------------------------------------------
1 | /**
2 | A singleton provider of dependencies
3 | */
4 |
5 | const dependencyService={
6 | dependencies:{},
7 | provide(name, dependency){
8 | this.dependencies[name]=dependency;
9 | return this;
10 | },
11 | inject(name){
12 | return this.dependencies[name]??null;
13 | }
14 | }
15 |
16 | export default dependencyService;
--------------------------------------------------------------------------------
/Chapter02/dependency-injection-7.js:
--------------------------------------------------------------------------------
1 | /**
2 | A parent module that implements all the dependencies
3 | for the application
4 | */
5 |
6 | import dependencyService from "./dependency-injection-6";
7 | import myDependency1 from "myFile1"
8 | import myDependency2 from "myFile2"
9 | import dbManager from "dbManager"
10 |
11 | dependencyService
12 | .provide("dependency1", myDependency1)
13 | .provide("dependency2", myDependency2)
14 | .provide("dbManager", dbManager)
15 |
16 | // Then, to use the service
17 | const dbManager=dependencyService.inject("dbManager")
--------------------------------------------------------------------------------
/Chapter02/observer-1.js:
--------------------------------------------------------------------------------
1 | /**
2 | A naive implementation of a simple event dispatcher
3 | to implement an observer pattern
4 | */
5 |
6 | class ObserverPattern{
7 | constructor(){
8 | this.events={}
9 | }
10 | on(event_name, fn=()=>{}){
11 | if(!this.events[event_name]){
12 | this.events[event_name]=[]
13 | }
14 | this.events[event_name].push(fn)
15 | }
16 | emit(event_name, data){
17 | if(!this.events[event_name]){
18 | return
19 | }
20 | for(let i=0, l=this.events[event_name].length; i-1){
27 | this.events[event_name].slice(i, 1);
28 | }
29 | }
30 | }
31 |
32 | export default ObserverPattern;
--------------------------------------------------------------------------------
/Chapter02/promises-1.js:
--------------------------------------------------------------------------------
1 | /**
2 | A syntax example of a promised function with async/await
3 | */
4 |
5 | async function myProcessFunction() { //1
6 |
7 | try { //2
8 |
9 | let a = await MyFuncA(), //3
10 | b = await MyFuncB(),
11 | c = await MyFuncC()
12 |
13 | console.log(a + b + c) //4
14 |
15 | } catch {
16 |
17 | console.log("Error")
18 |
19 | }
20 |
21 | }
22 |
23 | // Invoke the function normally
24 |
25 | MyProcessFunction() //5
--------------------------------------------------------------------------------
/Chapter02/proxy-1.js:
--------------------------------------------------------------------------------
1 | /**
2 | A naive partial implementation of a reactive object,
3 | implementing the Observer and Proxy pattern
4 | */
5 |
6 | let temperature={
7 | celsius:0,
8 | fahrenheit: 32
9 | },
10 | handler={
11 | set(target, key, value){
12 | target[key]=value;
13 | switch(key){
14 | case "celsius":
15 | target.fahrenheit=calculateFahrenheit(value);
16 | break;
17 | case "fahrenheit":
18 | target.celsius=calculateCelsius(value);
19 | }
20 | },
21 | get(target, key){
22 | return target[key];
23 | }
24 | },
25 | degrees=new Proxy(temperature, handler)
26 |
27 | // Auxiliar functions
28 | function calculateCelsius(fahrenheit){
29 | return (fahrenheit - 32) / 1.8
30 | }
31 |
32 | function calculateFahrenheit(celsius){
33 | return (celsius * 1.8) + 32
34 | }
35 |
36 | degrees.celsius=25
37 | console.log(degrees)
--------------------------------------------------------------------------------
/Chapter02/singleton-class.js:
--------------------------------------------------------------------------------
1 | class myClass{
2 |
3 | constructor(){
4 | if(myClass._instance){
5 | return myClass._instance;
6 | }else{
7 | myClass._instance=this;
8 | }
9 | return this;
10 | }
11 |
12 | myFunction(){
13 | console.log("Singleton alive and well")
14 | }
15 | }
16 |
17 | export default new myClass()
--------------------------------------------------------------------------------
/Chapter02/singleton-invoker.js:
--------------------------------------------------------------------------------
1 | import my_method1_singleton from "./singleton-json";
2 | import my_method2_singleton from "./singleton-class";
3 |
4 | console.log("Look mom, no instantiation!")
5 |
6 | my_method1_singleton.myFunction()
7 | my_method2_singleton.myFunction()
8 |
9 |
--------------------------------------------------------------------------------
/Chapter02/singleton-json.js:
--------------------------------------------------------------------------------
1 | const my_singleton={
2 | myFunction(){
3 | console.log("Singleton alive and well")
4 | }
5 | }
6 |
7 | export default my_singleton;
--------------------------------------------------------------------------------
/Chapter03/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/Chapter03/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["Vue.volar"]
3 | }
4 |
--------------------------------------------------------------------------------
/Chapter03/README.md:
--------------------------------------------------------------------------------
1 | # Vue 3 + Vite
2 |
3 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `
16 |