Skip to content
Snippets Groups Projects
Commit ff3bc965 authored by Felicien Delannoy's avatar Felicien Delannoy
Browse files

Partie C

parent 5d6745b3
Branches
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
.babelrc
+ 4
− 2
View file @ ff3bc965
{ {
"presets": ["@babel/env"], "presets": [
["@babel/env", {"modules": false}]
],
"plugins": ["@babel/plugin-proposal-class-properties"] "plugins": ["@babel/plugin-proposal-class-properties"]
} }
index.html
+ 1
− 1
View file @ ff3bc965
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<link rel="stylesheet" href="css/pizzaList.css"> <link rel="stylesheet" href="css/pizzaList.css">
<link rel="stylesheet" href="css/footer.css"> <link rel="stylesheet" href="css/footer.css">
<script src="build/main.js" defer></script> <script src="build/main.bundle.js" defer></script>
</head> </head>
<body> <body>
<header> <header>
......
package-lock.json
+ 1118
− 5
View file @ ff3bc965
This diff is collapsed.
package.json
+ 7
− 3
View file @ ff3bc965
...@@ -5,8 +5,9 @@ ...@@ -5,8 +5,9 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d build", "build": "webpack --mode=production",
"watch": "./node_modules/.bin/babel src -d build --verbose --watch --source-maps" "watch": "webpack --mode=development --watch"
}, },
"author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)", "author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)",
"homepage": "https://gitlab.univ-lille.fr/js", "homepage": "https://gitlab.univ-lille.fr/js",
...@@ -16,6 +17,9 @@ ...@@ -16,6 +17,9 @@
"@babel/core": "^7.12.10", "@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.11", "@babel/preset-env": "^7.12.11",
"prettier": "^2.2.1" "babel-loader": "^8.2.2",
"prettier": "^2.2.1",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0"
} }
} }
src/components/Component.js 0 → 100644
+ 25
− 0
View file @ ff3bc965
class Component {
tagName;
children;
attribute;
constructor(tagName, attribute, children) {
this.tagName = tagName;
this.children = children;
this.attribute = attribute;
}
render() {
if (this.children == null && this.attribute != null) {
return `<${this.tagName} ${this.renderAttribute()}/>`;
} else if (this.attribute == null && this.children != null) {
return `<${this.tagName}>${this.children}</${this.tagName}>`;
} else {
return `<${this.tagName} />`;
}
}
renderAttribute() {
if (this.attribute.name != null && this.attribute.value != null) {
return `${this.attribute.name}=${this.attribute.value}`;
}
}
}
export default Component;
src/components/Img.js 0 → 100644
+ 7
− 0
View file @ ff3bc965
import Component from './Component.js';
class Img extends Component {
constructor(src) {
super('img', { name: 'src', value: src }, null);
}
}
export default Img;
src/main.js
+ 3
− 30
View file @ ff3bc965
import Img from './components/Img.js';
import Component from './components/Component.js';
const data = [ const data = [
{ {
name: 'Regina', name: 'Regina',
...@@ -39,36 +42,6 @@ class Character { ...@@ -39,36 +42,6 @@ class Character {
const heisenberg = new Character('Walter', 'White'); const heisenberg = new Character('Walter', 'White');
console.log(heisenberg.firstName, heisenberg.fullName()); console.log(heisenberg.firstName, heisenberg.fullName());
class Component {
tagName;
children;
attribute;
constructor(tagName, attribute, children) {
this.tagName = tagName;
this.children = children;
this.attribute = attribute;
}
render() {
if (this.children == null && this.attribute != null) {
return `<${this.tagName} ${this.renderAttribute()}/>`;
} else if (this.attribute == null && this.children != null) {
return `<${this.tagName}>${this.children}</${this.tagName}>`;
} else {
return `<${this.tagName} />`;
}
}
renderAttribute() {
if (this.attribute.name != null && this.attribute.value != null) {
return `${this.attribute.name}=${this.attribute.value}`;
}
}
}
class Img extends Component {
constructor(src) {
super('img', { name: 'src', value: src }, null);
}
}
const title = new Component('h1', null, 'La carte'); const title = new Component('h1', null, 'La carte');
document.querySelector('.pageTitle').innerHTML = title.render(); document.querySelector('.pageTitle').innerHTML = title.render();
/*const img = new Component('img', { /*const img = new Component('img', {
......
webpack.config.js 0 → 100644
+ 27
− 0
View file @ ff3bc965
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',
};
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment