Merge pull request Lemoncode#22 from Lemoncode/master-front-end-ix-bu…

…ndler-update Master front end ix bundler update
brauliodiez · Nov 6, 2020 · b7e6c5f · b7e6c5f
2 parents 18c9b16 + 665b955
commit b7e6c5f
Show file tree

Hide file tree

Showing 31 changed files with 59 additions and 59 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/03-bundling/02-parcel/02-es6/package.json b/03-bundling/02-parcel/02-es6/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "rimraf dist && parcel ./src/index.html",
     "build:prod": "rimraf dist && parcel build ./src/index.html",
-    "start": "rimraf dist && parcel ./src/index.html --open"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",

diff --git a/03-bundling/02-parcel/03-custom-css/src/index.html b/03-bundling/02-parcel/03-custom-css/src/index.html
@@ -1,9 +1,7 @@
 <html>
   <body>
     <h1>Check the console log</h1>
-    <div class="red-background">
-      RedBackground stuff
-    </div>
+    <div class="red-background">RedBackground stuff</div>
     <script src="./index.js"></script>
   </body>
 </html>
diff --git a/03-bundling/02-parcel/03-custom-css/src/index.js b/03-bundling/02-parcel/03-custom-css/src/index.js
@@ -1,4 +1,4 @@
-import "./mystyles.css";
+import './mystyles.css';
 
 const sampleNumber = 1;
 console.log(`Hello from sample ${sampleNumber}`);
diff --git a/03-bundling/02-parcel/04-sass/package.json b/03-bundling/02-parcel/04-sass/package.json
@@ -14,6 +14,6 @@
   "devDependencies": {
     "parcel-bundler": "^1.12.4",
     "rimraf": "^3.0.2",
-    "sass": "^1.26.3"
+    "sass": "^1.29.0"
   }
 }
diff --git a/03-bundling/02-parcel/04-sass/src/index.html b/03-bundling/02-parcel/04-sass/src/index.html
@@ -1,9 +1,7 @@
 <html>
   <body>
     <h1>Check the console log</h1>
-    <div class="red-background">
-      RedBackground stuff
-    </div>
+    <div class="red-background">RedBackground stuff</div>
     <script src="./index.js"></script>
   </body>
 </html>
diff --git a/03-bundling/02-parcel/05-bootstrap/package.json b/03-bundling/02-parcel/05-bootstrap/package.json
@@ -14,9 +14,9 @@
   "devDependencies": {
     "parcel-bundler": "^1.12.4",
     "rimraf": "^3.0.2",
-    "sass": "^1.26.3"
+    "sass": "^1.29.0"
   },
   "dependencies": {
-    "bootstrap": "^4.4.1"
+    "bootstrap": "^4.5.3"
   }
 }
diff --git a/03-bundling/02-parcel/05-bootstrap/src/index.html b/03-bundling/02-parcel/05-bootstrap/src/index.html
@@ -5,12 +5,13 @@
       href="../node_modules/bootstrap/dist/css/bootstrap.css"
     />
   </head>
-
   <body>
     <h1>Check the console log</h1>
-    <div class="red-background">
-      RedBackground stuff
+    <div class="jumbotron">
+      <h1>Testing Bootstrap</h1>
+      <p>Bootstrap is the most popular ...</p>
     </div>
+    <div class="red-background">RedBackground stuff</div>
     <script src="./index.js"></script>
   </body>
 </html>
diff --git a/03-bundling/02-parcel/06-images/package.json b/03-bundling/02-parcel/06-images/package.json
@@ -14,9 +14,9 @@
   "devDependencies": {
     "parcel-bundler": "^1.12.4",
     "rimraf": "^3.0.2",
-    "sass": "^1.26.3"
+    "sass": "^1.29.0"
   },
   "dependencies": {
-    "bootstrap": "^4.4.1"
+    "bootstrap": "^4.5.3"
   }
 }
diff --git a/03-bundling/02-parcel/06-images/src/content/logo_1.png b/03-bundling/02-parcel/06-images/src/content/logo_1.png
diff --git a/03-bundling/02-parcel/06-images/src/content/logo_2.png b/03-bundling/02-parcel/06-images/src/content/logo_2.png
diff --git a/03-bundling/02-parcel/06-images/src/index.html b/03-bundling/02-parcel/06-images/src/index.html
@@ -5,14 +5,15 @@
       href="../node_modules/bootstrap/dist/css/bootstrap.css"
     />
   </head>
-
   <body>
     <h1>Check the console log</h1>
     <div id="imgContainer"></div>
     <img src="./content/logo_2.png" />
-    <div class="red-background">
-      RedBackground stuff
+    <div class="jumbotron">
+      <h1>Testing Bootstrap</h1>
+      <p>Bootstrap is the most popular ...</p>
     </div>
+    <div class="red-background">RedBackground stuff</div>
     <script src="./index.js"></script>
   </body>
 </html>
diff --git a/03-bundling/02-parcel/07-typescript/package.json b/03-bundling/02-parcel/07-typescript/package.json
@@ -18,10 +18,10 @@
     "npm-run-all": "^4.1.5",
     "parcel-bundler": "^1.12.4",
     "rimraf": "^3.0.2",
-    "sass": "^1.26.3",
-    "typescript": "^3.8.3"
+    "sass": "^1.29.0",
+    "typescript": "^4.0.5"
   },
   "dependencies": {
-    "bootstrap": "^4.4.1"
+    "bootstrap": "^4.5.3"
   }
 }
diff --git a/03-bundling/02-parcel/07-typescript/src/content/logo_1.png b/03-bundling/02-parcel/07-typescript/src/content/logo_1.png
diff --git a/03-bundling/02-parcel/07-typescript/src/content/logo_2.png b/03-bundling/02-parcel/07-typescript/src/content/logo_2.png
diff --git a/03-bundling/02-parcel/07-typescript/src/index.html b/03-bundling/02-parcel/07-typescript/src/index.html
@@ -5,7 +5,6 @@
       href="../node_modules/bootstrap/dist/css/bootstrap.css"
     />
   </head>
-
   <body>
     <h1>Check the console log</h1>
     <script src="./index.ts"></script>

diff --git a/03-bundling/02-parcel/08-react/README.md b/03-bundling/02-parcel/08-react/README.md
@@ -57,7 +57,7 @@ _./src/index.html_
 </html>
 ```
 
-- Let's create the entry point in the [_index.js_](src/index.js) file (./src/index.js)
+- Let's create the entry point in the [_index.ts_](src/index.ts) file (./src/index.tsx)
 
 _./src/index.tsx_
 

diff --git a/03-bundling/02-parcel/08-react/package.json b/03-bundling/02-parcel/08-react/package.json
@@ -9,7 +9,7 @@
     "type-check": "tsc --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
     "start:dev": "rimraf dist && parcel ./src/index.html --open",
-    "start": "run-p -l  type-check:watch && start:dev"
+    "start": "run-p -l type-check:watch start:dev"
   },
   "keywords": [],
   "author": "",
@@ -18,14 +18,14 @@
     "npm-run-all": "^4.1.5",
     "parcel-bundler": "^1.12.4",
     "rimraf": "^3.0.2",
-    "sass": "^1.26.3",
-    "typescript": "^3.8.3"
+    "sass": "^1.29.0",
+    "typescript": "^4.0.5"
   },
   "dependencies": {
-    "@types/react": "^16.9.27",
-    "@types/react-dom": "^16.9.5",
-    "bootstrap": "^4.4.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "@types/react": "^16.9.56",
+    "@types/react-dom": "^16.9.9",
+    "bootstrap": "^4.5.3",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }
diff --git a/03-bundling/02-parcel/08-react/src/content/logo_1.png b/03-bundling/02-parcel/08-react/src/content/logo_1.png
diff --git a/03-bundling/02-parcel/08-react/src/content/logo_2.png b/03-bundling/02-parcel/08-react/src/content/logo_2.png
diff --git a/03-bundling/02-parcel/08-react/src/hello.tsx b/03-bundling/02-parcel/08-react/src/hello.tsx
@@ -2,4 +2,4 @@ import React from "react";
 
 export const HelloComponent: React.FC = () => {
   return <h2>Hello from React</h2>;
-};
+};
diff --git a/03-bundling/02-parcel/08-react/src/index.html b/03-bundling/02-parcel/08-react/src/index.html
@@ -5,7 +5,6 @@
       href="../node_modules/bootstrap/dist/css/bootstrap.css"
     />
   </head>
-
   <body>
     <h1>Check the console log</h1>
     <div id="root"></div>

diff --git a/03-bundling/02-parcel/09-css-modules/.babelrc b/03-bundling/02-parcel/09-css-modules/.babelrc
@@ -1,6 +1,3 @@
-{
-    "presets": [
-      "@babel/preset-typescript",
-      "@babel/preset-react"
-    ]
-  }
+{
+  "presets": ["@babel/preset-typescript", "@babel/preset-react"]
+}
diff --git a/03-bundling/02-parcel/09-css-modules/.postcssrc b/03-bundling/02-parcel/09-css-modules/.postcssrc
@@ -1,3 +1,4 @@
-{
-  "modules": true
+
+{
+  "modules": true
 }
diff --git a/03-bundling/02-parcel/09-css-modules/README.md b/03-bundling/02-parcel/09-css-modules/README.md
@@ -81,6 +81,8 @@ export const HelloComponent: React.FC = () => {
 };
 ```
 
+> If you get a warning about using required, try: npm i @types/node --save-dev
+
 - Let's run the sample.
 
 ```bash

diff --git a/03-bundling/02-parcel/09-css-modules/package.json b/03-bundling/02-parcel/09-css-modules/package.json
@@ -9,27 +9,28 @@
     "type-check": "tsc --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
     "start:dev": "rimraf dist && parcel ./src/index.html --open",
-    "start": "run-p -l  type-check:watch && start:dev"
+    "start": "run-p -l type-check:watch start:dev"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-react": "^7.12.5",
+    "@babel/preset-typescript": "^7.12.1",
+    "@types/node": "^14.14.6",
     "npm-run-all": "^4.1.5",
     "parcel-bundler": "^1.12.4",
-    "postcss-modules": "^3.2.0",
+    "postcss-modules": "^3.2.2",
     "rimraf": "^3.0.2",
-    "sass": "^1.26.3",
-    "typescript": "^3.8.3"
+    "sass": "^1.29.0",
+    "typescript": "^4.0.5"
   },
   "dependencies": {
-    "@types/react": "^16.9.27",
-    "@types/react-dom": "^16.9.5",
-    "bootstrap": "^4.4.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "@types/react": "^16.9.56",
+    "@types/react-dom": "^16.9.9",
+    "bootstrap": "^4.5.3",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }
diff --git a/03-bundling/02-parcel/09-css-modules/src/content/logo_1.png b/03-bundling/02-parcel/09-css-modules/src/content/logo_1.png
diff --git a/03-bundling/02-parcel/09-css-modules/src/content/logo_2.png b/03-bundling/02-parcel/09-css-modules/src/content/logo_2.png
diff --git a/03-bundling/02-parcel/09-css-modules/src/hello.tsx b/03-bundling/02-parcel/09-css-modules/src/hello.tsx
@@ -5,8 +5,8 @@ const classes = require("./mystyles.scss");
 export const HelloComponent: React.FC = () => {
   return (
     <div className={classes.hello}>
-      <img src={logo} className={classes.logo}/>
-      <h2>Hello from React</h2>      
+      <img src={logo} className={classes.logo} />
+      <h2>Hello from React</h2>
     </div>
   );
 };
diff --git a/03-bundling/02-parcel/09-css-modules/src/index.html b/03-bundling/02-parcel/09-css-modules/src/index.html
@@ -5,7 +5,6 @@
       href="../node_modules/bootstrap/dist/css/bootstrap.css"
     />
   </head>
-
   <body>
     <h1>Check the console log</h1>
     <div id="root"></div>

diff --git a/03-bundling/02-parcel/09-css-modules/src/mystyles.scss b/03-bundling/02-parcel/09-css-modules/src/mystyles.scss
@@ -1,9 +1,13 @@
 $blue-color: teal;
 
+.red-background {
+  background-color: $blue-color;
+}
+
 .hello {
   background-color: $blue-color;
 
-  .logo{
-    width:150px;
+  .logo {
+    width: 150px;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,6 @@ @@
           href="../node_modules/bootstrap/dist/css/bootstrap.css"
         />
       </head>
       <body>
         <h1>Check the console log</h1>
         <script src="./index.ts"></script>
@@ Expand Down @@