From 793febafb62d117f3846212731eb8fae31793001 Mon Sep 17 00:00:00 2001
From: oabdelnour <oabdelnour@takima.fr>
Date: Tue, 27 Feb 2024 15:13:57 +0100
Subject: [PATCH] wip
---
resources/docs/docs/chapters/tp/bundle2.md | 79 ++++++++++++++++++++++
1 file changed, 79 insertions(+)
diff --git a/resources/docs/docs/chapters/tp/bundle2.md b/resources/docs/docs/chapters/tp/bundle2.md
index 34cfd5b..8e1ff4f 100644
--- a/resources/docs/docs/chapters/tp/bundle2.md
+++ b/resources/docs/docs/chapters/tp/bundle2.md
@@ -91,5 +91,84 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f
// ...
```
+- Edit `main.js`. Look at `TODO #import-components` for instructions.
+
+- Write an `import` statement to import `WelcomeComponent`, `GameComponent` and `ScoreComponent`
+
+??? note "Show the main.js file"
+
+ === "main.js"
+
+ ```js linenums="1"
+ import { Router } from "./app/scripts/router";
+ import { WelcomeComponent } from "./app/scripts/welcome";
+ import { GameComponent } from "./app/scripts/game";
+ import { ScoreComponent } from "./app/scripts/score";
+
+ const outlet = document.querySelector("#content-outlet");
+ const router = new Router(outlet);
+ router.register("", {
+ component: WelcomeComponent,
+ templateUrl: "/src/app/views/welcome.html",
+ });
+ // ...
+ ```
+
+- Edit `index.html`. Remove all `<script>` tag as everything is now bundled by _Webpack_.
+
+??? note "Show the index.html file"
+
+ === "index.html"
+
+ ```html linenums="1"
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <title>MÈME ory</title>
+ <!-- TODO #import-css: move style imports to src/main.js -->
+ <!-- TODO #npm-bootstrap: change css location to '/node_modules/bootstrap/dist/css/bootstrap.css' -->
+ <link rel="stylesheet" href="/src/app/styles/bootstrap.css" />
+
+ <link rel="stylesheet" href="/src/app/styles/style.css" />
+ </head>
+
+ <body>
+ <div id="content-outlet" class="h-100 w-100 d-flex flex-column"></div>
+ </body>
+ </html>
+ ```
+
+- Test the application: navigate to [http://localhost:8080](http://localhost:8080), the application should work as usual and show no error in the console 🎉.
+
+- Build the application.
+
+??? note "Show the build command"
+
+ ```bash linenums="1"
+ npm run build
+ ```
+
+#### :fontawesome-solid-folder-tree: Modified files
+
+```
+src/app/scripts/game.js
+src/app/scripts/score.js
+src/app/scripts/utils.js
+src/app/scripts/welcome.js
+src/main.js
+src/index.html
+```
+
+#### :fontawesome-solid-list-check: Checklist
+
+- <input type="checkbox" /> I know how to use the `import` keyword and do **named imports**.
+- <input type="checkbox" /> The codebase has no unresolved `TODO #export-functions` comments left.
+- <input type="checkbox" /> The codebase has no unresolved `TODO #import-components` comments left.
+- <input type="checkbox" /> The codebase has no _IIFE_ left.
+
+!!! question "Question"
+
+ Look at the `dist/main.js` file, generated by the build command. What is its size?
--
GitLab