From fa2882a72c36bf4f2b695c376b661663f8ae5300 Mon Sep 17 00:00:00 2001
From: Thomas Fritsch <tf@kumquats.fr>
Date: Mon, 10 Feb 2020 00:29:48 +0100
Subject: [PATCH] C.2. modules natifs
---
.babelrc | 4 ++-
index.html | 2 +-
js/components/Component.js | 24 +++++++++++++++
js/components/Img.js | 6 ++++
js/data.js | 27 +++++++++++++++++
js/main.js | 60 ++------------------------------------
6 files changed, 64 insertions(+), 59 deletions(-)
create mode 100644 js/components/Component.js
create mode 100644 js/components/Img.js
create mode 100644 js/data.js
diff --git a/.babelrc b/.babelrc
index 0af6804..e35c6fd 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,6 @@
{
- "presets": ["@babel/env"],
+ "presets": [
+ ["@babel/env", {"modules": false}]
+ ],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1922851..49850b7 100644
--- 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">
diff --git a/js/components/Component.js b/js/components/Component.js
new file mode 100644
index 0000000..ee3f9a9
--- /dev/null
+++ b/js/components/Component.js
@@ -0,0 +1,24 @@
+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 '';
+ }
+}
diff --git a/js/components/Img.js b/js/components/Img.js
new file mode 100644
index 0000000..7947a62
--- /dev/null
+++ b/js/components/Img.js
@@ -0,0 +1,6 @@
+import Component from './Component.js';
+export default class Img extends Component {
+ constructor(url) {
+ super('img', { name: 'src', value: url });
+ }
+}
diff --git a/js/data.js b/js/data.js
new file mode 100644
index 0000000..83a34d2
--- /dev/null
+++ b/js/data.js
@@ -0,0 +1,27 @@
+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;
diff --git a/js/main.js b/js/main.js
index e2f6f48..86237c3 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,60 +1,6 @@
-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',
- },
-];
-
-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 });
- }
-}
+import data from './data.js';
+import Component from './components/Component.js';
+import Img from './components/Img.js';
const title = new Component('h1', null, 'La carte');
document.querySelector('.pageTitle').innerHTML = title.render();
--
GitLab