Partie C finit

55b76aca · Bastien Cortequisse · 756346a4 · 55b76aca · 55b76aca · 55b76aca
Commit 55b76aca authored 4 years ago by Bastien Cortequisse
--- a/.babelrc
+++ b/.babelrc
 {
-	"presets": ["@babel/env"]
+	"presets": [
+		["@babel/env", {"modules": false}]
+	],
+	"plugins": ["@babel/plugin-proposal-class-properties"]
 }
+
--- a/.prettierrc
+++ b/.prettierrc
+{
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"endOfLine": "lf",
+	"useTabs": true,
+	"arrowParens": "avoid"
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
+{
+	"[javascript]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	}
+}
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
 	<link rel="stylesheet" href="css/pizzaList.css">
 	<link rel="stylesheet" href="css/footer.css">

-	<script src="build/main.js" defer></script>
+	<script src="build/main.bundle.js" defer></script>
 </head>
 <body>
 	<header>

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -4,7 +4,10 @@
  "description": "",
  "main": "index.js",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --mode=production",
+    "watch": "webpack --mode=development --watch"
+
  },
  "author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)",
  "homepage": "https://gitlab.univ-lille.fr/js",
@@ -12,6 +15,11 @@
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11"
+    "@babel/plugin-proposal-class-properties": "^7.12.13",
+    "@babel/preset-env": "^7.12.11",
+    "babel-loader": "^8.2.2",
+    "prettier": "^2.2.1",
+    "webpack": "^5.20.1",
+    "webpack-cli": "^4.5.0"
  }
 }
--- a/src/components/Component.js
+++ b/src/components/Component.js
+export default class Component {
+	tagName;
+	attribute;
+	children;
+	constructor(tagName, attribute, children) {
+		this.tagName = tagName;
+		this.attribute = attribute;
+		this.children = children;
+	}
+
+	render() {
+		if (this.attribute == null) {
+			return `<${this.tagName}>${this.children}</${this.tagName}>`;
+		} else if (this.children != null) {
+			return `<${this.tagName} ${this.attribute.name}='${this.attribute.value}'>${this.children}</${this.tagName}>`;
+		} else {
+			return `<img ${this.attribute.name}='${this.attribute.value}' />`;
+		}
+	}
+}
--- a/src/components/Img.js
+++ b/src/components/Img.js
+import Component from './Component.js';
+export default class Img extends Component {
+	constructor(valueImg) {
+		super('img', { name: 'src', value: valueImg }, null);
+	}
+}
--- a/src/data.js
+++ b/src/data.js
+const data = [
+	{
+		name: 'Regina',
+		base: 'tomate',
+		price_small: 6.5,
+		price_large: 9.95,
+		image:
+			'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
+	},
+	{
+		name: 'Napolitaine',
+		base: 'tomate',
+		price_small: 6.5,
+		price_large: 8.95,
+		image:
+			'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
+	},
+	{
+		name: 'Spicy',
+		base: 'crème',
+		price_small: 5.5,
+		price_large: 8,
+		image:
+			'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
+	},
+];
+export default data;
--- a/src/main.js
+++ b/src/main.js
+import data from './data.js';
+import Component from './components/Component.js';
+import Img from './components/Img.js';
+
 // D. Manipulation des chaînes

 // const name = 'Regina';
@@ -54,31 +58,34 @@
 // document.querySelector('.pageContent').innerHTML = html;

 // E.2. Les objets littéraux
-const data = [
-	{
-		name: 'Regina',
-		base: 'tomate',
-		price_small: 6.5,
-		price_large: 9.95,
-		image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
-	},
-	{
-		name: 'Napolitaine',
-		base: 'tomate',
-		price_small: 6.5,
-		price_large: 8.95,
-		image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
-	},
-	{
-		name: 'Spicy',
-		base: 'crème',
-		price_small: 5.5,
-		price_large: 8,
-		image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
+
+const title = new Component('h1', null, 'La carte');
+document.querySelector('.pageTitle').innerHTML = title.render();
+
+const img = new Img(
+	'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
+);
+document.querySelector('.pageContent').innerHTML = img.render();
+
+/*class Character {
+	firstName;
+	lastName;
+	constructor(firstName, lastName) {
+		this.firstName = firstName;
+		this.lastName = lastName;
 	}
-];
+	fullName() {
+		return `${this.firstName} ${this.lastName}`;
+	}
+}
+
+const heisenberg = new Character('Walter', 'White');
+console.log(
+	heisenberg.firstName,
+	heisenberg.fullName(),
+);*/

-function render(pizzas) {
+/*function render(pizzas) {
 	const html = pizzas.reduce( (str, {image, name, price_small, price_large}) => str +
 		`<article class="pizzaThumbnail">
 			<a href="${image}">
@@ -129,3 +136,4 @@ render( data );
 // render( data.filter( ({base}) => base == 'tomate' ))
 // render( data.filter( ({price_small}) => price_small < 6 ))
 // render( data.filter( ({name}) => name.match(/i/g).length === 2 ));
+*/
--- a/webpack.config.js
+++ b/webpack.config.js
+const path = require('path');
+
+module.exports = {
+	// Fichier d'entrée :
+	entry: './src/main.js',
+	// Fichier de sortie :
+	output: {
+		path: path.resolve(__dirname, './build'),
+		filename: 'main.bundle.js'
+	},
+	// compatibilité anciens navigateurs (si besoin du support de IE11 ou android 4.4)
+	target: ['web', 'es5'],
+	// connexion webpack <-> babel :
+	module: {
+		rules: [
+			{
+				test: /\.js$/, // tous les fichiers js ...
+				exclude: /node_modules/, // ... sauf le dossier node_modules ...
+				use: { // ... seront compilés par babel !
+					loader: 'babel-loader',
+				}
+			}
+		]
+	},
+	devtool: 'source-map'
+}