Skip to content

Commit

Permalink
Update gerteck
Browse files Browse the repository at this point in the history
  • Loading branch information
@gerteck
gerteck committed Feb 25, 2025
1 parent 0175d68 commit 1fbbd88
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 4 deletions.
2 changes: 1 addition & 1 deletion students/gerteck/info.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
<span id="github">https://github.com/gerteck</span>

<!-- [CS3281: Give your NUS-OSS project][CS3282: give your internal and external projects related to the module] -->
<span id="projects">[MarkBind](https://github.com/MarkBind/markbind), [Project2]()</span>
<span id="projects">[MarkBind](https://github.com/MarkBind/markbind)</span>
45 changes: 45 additions & 0 deletions students/gerteck/knowledge.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,9 @@ It runs after the website framework, and only requires the folder containing the

#### Vue 2 to Vue 3

I got the chance to experience [this](https://www.reddit.com/r/vuejs/comments/1bp72k5/vue_2_to_vue_3_upgrade_is_one_of_the_most_painful/) firsthand.
* Through the process (ongoing), it has also allowed me to uncover a significant number of bugs in MarkBind.

https://v3-migration.vuejs.org/migration-build

MarkBind (v5.5.3) is currently using Vue 2. However, Vue 2 has reached EOL and limits the extensibility and maintainability of MarkBind, especially the vue-components package. (UI Library Package).
Expand All @@ -76,6 +79,24 @@ Vue 2 components can be authored in two different API styles: Option API and Com
Currently, MarkBind Vue components are authored in the Options API style. If migrated to Vue 3, we can continue to use this API style.

##### Vue 2 to Vue 3 (Biggest Shift)

**Vue 2**
In Vue 2, global configuration is shared across all root instances as concept of "app" not formalized. All Vue instances in the app used the same global configuration, and this could lead to unexpected behaviors if different parts of the application needed different configurations or global directives.
> E.g. global API in Vue 2, like Vue.component() or Vue.directive(), directly mutated the global Vue instance.
Some of MarkBind's plugins depend on this specific property of Vue 2 (directives, in particular, which are registered after mounting).

However, the shift to Vue 3 took into consideration the lack of application boundaries and potential global pollution. Hence, Vue 3 takes a different approach that takes a bit of effort to migrate.

**Vue 3**
In Vue 3, the introduction of the app instance via `createApp()` changes how global configurations, directives, and components are managed, offering more control and flexibility.
* The `createApp()` method allows you to instantiate an "app," providing a boundary for the app's configuration -- Scoped Global Configuration: Instead of mutating the global Vue object, components, directives, or plugins are now registered on a specific app instance.

Also some particularities with using Vue 3:
* https://github.com/vuejs/core/issues/4344


#### Vue SFC (Single File Components)

[Reference](https://vuejs.org/guide/scaling-up/sfc.html)
Expand Down Expand Up @@ -182,6 +203,30 @@ Issues I faced:
* I didn't realize tha my TypeScript code was being compiled to CommonJS (`require`) instead of ES module syntax (`import`), and hence `import` was not working correctly.
* Had to change the `tsconfig.json` settings appropriately.

#### Classic Scripts vs Module Scripts in JS

JavaScript offers two script types: **module** and **non-module**. (For web pages, JavaScript is the Prog. Lang for the web after all).

**Module Script Files**: use ES Modules (`import`/`export`), run in strict mode, and have local scope, making them ideal for modern, modular applications. They load asynchronously and are supported in modern browsers and Node.js (with `.mjs` or `"type": "module"`).
- **Scope**: Local (encapsulated)
- **Execution**: Strict mode by default
- **Loading**: Asynchronous, deferred
- **Reusability**: High (modular)
- **Browser Support**: Modern browsers
- **Node.js**: Native (`.mjs` or `"type": "module"`)

**Non-Module Script File** rely on global scope, lack strict mode by default, and load synchronously. They work in all browsers and use CommonJS (`require`) in Node.js, making them suitable for legacy projects or simple scripts.
- **Syntax**: No `import`/`export`
- **Scope**: Global (pollution risk)
- **Execution**: Non-strict by default
- **Loading**: Synchronous by default
- **Reusability**: Low (global dependencies)
- **Browser Support**: All browsers
- **Node.js**: CommonJS (`require`)


Use **modules** for modern, scalable apps and **non-modules** for legacy compatibility or simpler use cases. Transition to modules for better maintainability.

#### TypeScript

TypeScript has two main kinds of files. `.ts` files are implementation files that contain types and executable code. These are the files that produce `.js` outputs, and are where you’d normally write your code. .d.ts files are declaration files that contain only type information. These files don’t produce `.js` outputs; they are only used for typechecking.
Expand Down
14 changes: 11 additions & 3 deletions students/gerteck/progress.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,20 @@ Over the semester, I will be working on MarkBind.

The work will build on previous work done, recorded [here](https://docs.google.com/document/d/1PjA6jfa7G_ZNjc8zSWi1hVSMmhbrGUY95k0ytyDCo-Y/edit?usp=sharing)

I also add my inputs and discussions on other issues and PRs where I think it would be helpful.

| Week | Achievements |
| ---- | ------------ |
| 1 | Authored PR: [Add Pagefind Plugin #2568](https://github.com/MarkBind/markbind/pull/2568) |
| 2 | Reviewed PR: [#2584](https://github.com/MarkBind/markbind/pull/2584) |
| 3 | Reviewed PR: [#2589](https://github.com/MarkBind/markbind/pull/2589) |
| 3 | Opened Issue: [Curly braces cause fail #2590](https://github.com/MarkBind/markbind/issues/2590) |
| 4 | Opened Issue: [Update eslint gitignore #2595](https://github.com/MarkBind/markbind/issues/2595) |
| 4 | Authored PR: [Vue Migration #2596](https://github.com/MarkBind/markbind/pull/2596) |
| 4 | Authored PR: [Vue Migration #2596](https://github.com/MarkBind/markbind/pull/2596) |
| 4 | Opened Issue: [Vue Migration (Vue 2 -> Vue 3) #2597](https://github.com/MarkBind/markbind/issues/2597) |
| 4 | Opened Issue: [Update ignores for dangerfile.js #2595](https://github.com/MarkBind/markbind/issues/2595) |
| 5 | Merge PR (close issue): [Add compiled dangerfile.js #2601](https://github.com/MarkBind/markbind/issues/2601) |
| 6 | Opened Issue: [Edge case for page/site-nav display #2606](https://github.com/MarkBind/markbind/issues/2606) |
| Rcs | Opened Issue: [Vue-components tests are erroneous #2610](https://github.com/MarkBind/markbind/issues/2610) |
| Rcs | Opened Issue: [Error message on cli, core tests Issue #2612](https://github.com/MarkBind/markbind/issues/2612) |
| Rcs | Opened Issue: [Package/lock.json dependency Issue #2613](https://github.com/MarkBind/markbind/issues/2613) |
| Rcs | Opened PR: [Update Mermaid script for efficiency #2614](https://github.com/MarkBind/markbind/pull/2614) |

0 comments on commit 1fbbd88

Please # to comment.