C.2. modules natifs

fa2882a7 · Thomas Fritsch · 4009e6bd · fa2882a7 · fa2882a7 · fa2882a7
Commit fa2882a7 authored 5 years ago by Thomas Fritsch
--- a/.babelrc
+++ b/.babelrc
 {
-	"presets": ["@babel/env"],
+	"presets": [
+		["@babel/env", {"modules": false}]
+	],
 	"plugins": ["@babel/plugin-proposal-class-properties"]
 }
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
 	<link rel="stylesheet" type="text/css" href="css/flatly-bootstrap.css" />
 	<link rel="stylesheet" type="text/css" href="css/main.css" />
-	<script src="build/main.js" defer></script>
+	<script type="module" src="build/main.js"></script>
 </head>
 <body>
 	<main id="appContainer">

--- a/js/components/Component.js
+++ b/js/components/Component.js
+export default class Component {
+	tag;
+	attribute;
+	children;
+	constructor(tag, attribute, children) {
+		this.tag = tag;
+		this.attribute = attribute;
+		this.children = children;
+	}
+	render() {
+		return `<${this.tag} ${this.renderAttributes()} ${
+			this.children ? `>${this.children}</${this.tag}>` : ' />'
+		}`;
+	}
+	renderAttributes() {
+		if (this.attribute) {
+			return `${this.attribute.name}="${this.attribute.value}"`;
+		}
+		return '';
+	}
+}
--- a/js/components/Img.js
+++ b/js/components/Img.js
+import Component from './Component.js';
+export default class Img extends Component {
+	constructor(url) {
+		super('img', { name: 'src', value: url });
+	}
+}
--- a/js/data.js
+++ b/js/data.js
+const data = [
+	{
+		nom: 'Regina',
+		base: 'tomate',
+		prix_petite: 6.5,
+		prix_grande: 9.95,
+		image:
+			'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
+	},
+	{
+		nom: 'Napolitaine',
+		base: 'tomate',
+		prix_petite: 6.5,
+		prix_grande: 8.95,
+		image:
+			'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
+	},
+	{
+		nom: 'Spicy',
+		base: 'crème',
+		prix_petite: 5.5,
+		prix_grande: 8,
+		image:
+			'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
+	},
+];
+export default data;
--- a/js/main.js
+++ b/js/main.js
-const data = [
+import data from './data.js';
-	{
+import Component from './components/Component.js';
-		nom: 'Regina',
+import Img from './components/Img.js';
-		base: 'tomate',
-		prix_petite: 6.5,
-		prix_grande: 9.95,
-		image:
-			'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
-	},
-	{
-		nom: 'Napolitaine',
-		base: 'tomate',
-		prix_petite: 6.5,
-		prix_grande: 8.95,
-		image:
-			'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
-	},
-	{
-		nom: 'Spicy',
-		base: 'crème',
-		prix_petite: 5.5,
-		prix_grande: 8,
-		image:
-			'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
-	},
-];
-class Component {
-	tag;
-	attribute;
-	children;
-	constructor(tag, attribute, children) {
-		this.tag = tag;
-		this.attribute = attribute;
-		this.children = children;
-	}
-	render() {
-		return `<${this.tag} ${this.renderAttributes()} ${
-			this.children ? `>${this.children}</${this.tag}>` : ' />'
-		}`;
-	}
-	renderAttributes() {
-		if (this.attribute) {
-			return `${this.attribute.name}="${this.attribute.value}"`;
-		}
-		return '';
-	}
-}
-class Img extends Component {
-	constructor(url) {
-		super('img', { name: 'src', value: url });
-	}
-}
 const title = new Component('h1', null, 'La carte');
 document.querySelector('.pageTitle').innerHTML = title.render();