From de4c07138393ee905cda2be171f6ecc8256e677a Mon Sep 17 00:00:00 2001
From: oabdelnour <oabdelnour@takima.fr>
Date: Tue, 27 Feb 2024 15:04:31 +0100
Subject: [PATCH] wip
---
.../chapters/tp/{bundle.md => bundle2.md} | 52 +++++++++++++++++--
resources/docs/mkdocs.yml | 2 +-
2 files changed, 49 insertions(+), 5 deletions(-)
rename resources/docs/docs/chapters/tp/{bundle.md => bundle2.md} (81%)
diff --git a/resources/docs/docs/chapters/tp/bundle.md b/resources/docs/docs/chapters/tp/bundle2.md
similarity index 81%
rename from resources/docs/docs/chapters/tp/bundle.md
rename to resources/docs/docs/chapters/tp/bundle2.md
index c0f6664..c4cbcac 100644
--- a/resources/docs/docs/chapters/tp/bundle.md
+++ b/resources/docs/docs/chapters/tp/bundle2.md
@@ -19,17 +19,17 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f
**ES `import` statements will be the glue between files**. With the _bundler_, the importing file responsibility have shifted from _HTML_ to _JS_ files.
=== "before bundler"
- 
+
=== "after bundler"
- 
+
## :fontawesome-brands-js: **Bundle the JS** code <span id="diy">:fontawesome-solid-wrench: Do it yourself</span> <span id="hard">:fontawesome-solid-star: :fontawesome-solid-star: :fontawesome-solid-star: Hard</span>
- Edit `utils.js`. Look at the `TODO #export-functions` comments for instructions.
- Write an `export` statement to export the `parseUrl` function.
-??? note "Show the utils.js file"
+ ??? note "Show the utils.js file"
=== "utils.js"
```js linenums="1"
@@ -45,7 +45,51 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f
- Write an `import` statement to import the `parseUrl` function if required.
??? note "Show the resulting files"
-
+=== "welcome.js"
+
+ ```js linenums="1"
+ export function WelcomeComponent() {}
+
+ /* method WelcomeComponent.init */
+ WelcomeComponent.prototype.init = function init() {
+ // ...
+ };
+
+ // ...
+ ```
+
+ === "game.js"
+
+ ```js linenums="1"
+ import { parseUrl } from "./utils";
+
+ var environment = {
+ api: {
+ host: "http://localhost:8081",
+ },
+ };
+
+ export function GameComponent() {
+ // ...
+ }
+
+ /* method GameComponent.init */
+ GameComponent.prototype.init = function init() {
+ // ...
+ };
+ // ...
+ ```
+
+ === "score.js"
+
+ ```js linenums="1"
+ import { parseUrl } from "./utils";
+
+ export function ScoreComponent() {
+ // ...
+ }
+ // ...
+ ```
- Edit `main.js`. Look at `TODO #import-components` for instructions.
diff --git a/resources/docs/mkdocs.yml b/resources/docs/mkdocs.yml
index 1375ae6..558610c 100644
--- a/resources/docs/mkdocs.yml
+++ b/resources/docs/mkdocs.yml
@@ -5,7 +5,7 @@ nav:
- "The package manager": chapters/tp/npm.md
- "Single Page Application (SPA)": chapters/tp/spa.md
- "Webpack": chapters/tp/webpack.md
- - "The bundle": chapters/tp/bundle.md
+ - "The bundle": chapters/tp/bundle2.md
- "CSS Loader": chapters/tp/css-loader.md
- "HTML Loader": chapters/tp/html-loader.md
- "Classes": chapters/tp/es6-classes.md
--
GitLab