From e90beac0a24186d6fad638d839bd10ac0d312f85 Mon Sep 17 00:00:00 2001 From: Adnan Haque <3737780+haqadn@users.noreply.github.com> Date: Sat, 18 Jan 2025 02:27:24 +0600 Subject: [PATCH 1/4] Update EXPLAIN.md --- .../boost/app/assets/src/js/EXPLAIN.md | 27 +++++++------------ 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/projects/plugins/boost/app/assets/src/js/EXPLAIN.md b/projects/plugins/boost/app/assets/src/js/EXPLAIN.md index 6fc56848b142d..6c4cd554c573f 100644 --- a/projects/plugins/boost/app/assets/src/js/EXPLAIN.md +++ b/projects/plugins/boost/app/assets/src/js/EXPLAIN.md @@ -1,8 +1,7 @@ ## Kebab Case -In Svelte, files were named using Pascal case. -As we migrate to React, we should migrate to Kebab case both in filenames and path names. Careful with case-sensitivity and committing to git. +We are using kebab-case both in filenames and path names. Be careful with case sensitivity and committing to git. ## React Component size @@ -17,16 +16,16 @@ It's fine to have multiple components in a single file, but if the file is getti ```bash / - index.ts # Public exports - - Main.svelte # The main component - lib/ # App-wide code - stores/ # App-wide stores - utils/ # Utility functions - features/ # Features - ui # generic, reusable components - back-button - - critical-css - - index.ts - - CriticalCssMeta.svelte + - critical-css # critical-css related components + - critical-css-meta # a component + - critical-css-meta.tsx # the main react component + - critical-css-meta.module.scss # styles related to this component - lib # Features have their own lib to keep it nice and clean - stores - critical-css-state.ts @@ -34,9 +33,9 @@ It's fine to have multiple components in a single file, but if the file is getti - ... - pages/ # Pages (a.k.a. routes) - critical-css-advanced - - CriticalCssAdvanced.svelte + - critical-css-advanced.tsx # a component that represents a page in the UI. - purchase-success - - purchase-success.tsx # react is kebab case now + - purchase-success.tsx - p2, etc. - layout/ # Global layout components - header @@ -44,10 +43,10 @@ It's fine to have multiple components in a single file, but if the file is getti - wrapper, etc. ``` -* `Main.svelte` and `index.ts` - The entry files for the app. `index.ts` is compiled into `/assets/dist/jetpack-boost.js` +* `index.tsx` and `main.tsx` - The entry files for the app. `main.tsx` has the router. * `features/` - Most of the app's code goes here. Every feature should be placed in it's own directory. -* `lib/` - Any code that's not Svelte or React. This includes utility functions, constants, stores, etc. - * `lib/stores/` - DataSync stores and their derivatives. In React this is probably going to be replaced with `lib/hooks`. +* `lib/` - Any generic code that is not directly tied to specific components. + * `lib/stores/` - Some shared hooks. * `pages/` - The pages of the app. Each page should be placed in it's own directory. * `layout/` - Global layout components. These are components that are used in multiple pages, such as the header, footer, etc. @@ -72,9 +71,3 @@ Every feature can be either a simple component like `my-feature/my-feature.tsx` - stores # Stores for this feature - some-store.ts ``` - - - -### Private & Public interfaces - -// TODO From 8f725505954cd917d1287fff13bbc7430968c172 Mon Sep 17 00:00:00 2001 From: Peter Petrov Date: Mon, 20 Jan 2025 12:40:35 +0200 Subject: [PATCH 2/4] Update directory listing --- projects/plugins/boost/app/assets/src/js/EXPLAIN.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/projects/plugins/boost/app/assets/src/js/EXPLAIN.md b/projects/plugins/boost/app/assets/src/js/EXPLAIN.md index 6c4cd554c573f..dec505b090150 100644 --- a/projects/plugins/boost/app/assets/src/js/EXPLAIN.md +++ b/projects/plugins/boost/app/assets/src/js/EXPLAIN.md @@ -22,6 +22,7 @@ It's fine to have multiple components in a single file, but if the file is getti - features/ # Features - ui # generic, reusable components - back-button + - ... - critical-css # critical-css related components - critical-css-meta # a component - critical-css-meta.tsx # the main react component @@ -36,11 +37,13 @@ It's fine to have multiple components in a single file, but if the file is getti - critical-css-advanced.tsx # a component that represents a page in the UI. - purchase-success - purchase-success.tsx - - p2, etc. + - p2 + - ... - layout/ # Global layout components - header - footer - - wrapper, etc. + - wrapper + - ... ``` * `index.tsx` and `main.tsx` - The entry files for the app. `main.tsx` has the router. From f2436c1d53b60bec1dec495982b0eba0f595110f Mon Sep 17 00:00:00 2001 From: Peter Petrov Date: Mon, 20 Jan 2025 12:42:44 +0200 Subject: [PATCH 3/4] Fix typos --- projects/plugins/boost/app/assets/src/js/EXPLAIN.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/plugins/boost/app/assets/src/js/EXPLAIN.md b/projects/plugins/boost/app/assets/src/js/EXPLAIN.md index dec505b090150..ccc472438b02f 100644 --- a/projects/plugins/boost/app/assets/src/js/EXPLAIN.md +++ b/projects/plugins/boost/app/assets/src/js/EXPLAIN.md @@ -47,10 +47,10 @@ It's fine to have multiple components in a single file, but if the file is getti ``` * `index.tsx` and `main.tsx` - The entry files for the app. `main.tsx` has the router. -* `features/` - Most of the app's code goes here. Every feature should be placed in it's own directory. +* `features/` - Most of the app's code goes here. Every feature should be placed in its own directory. * `lib/` - Any generic code that is not directly tied to specific components. * `lib/stores/` - Some shared hooks. -* `pages/` - The pages of the app. Each page should be placed in it's own directory. +* `pages/` - The pages of the app. Each page should be placed in its own directory. * `layout/` - Global layout components. These are components that are used in multiple pages, such as the header, footer, etc. ### Feature Structure From d39fdec5d4bd952486d33a96b8e0f43cb1977561 Mon Sep 17 00:00:00 2001 From: Peter Petrov Date: Mon, 20 Jan 2025 12:44:35 +0200 Subject: [PATCH 4/4] add changelog --- .../plugins/boost/changelog/update-boost-ui-directory-docs | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 projects/plugins/boost/changelog/update-boost-ui-directory-docs diff --git a/projects/plugins/boost/changelog/update-boost-ui-directory-docs b/projects/plugins/boost/changelog/update-boost-ui-directory-docs new file mode 100644 index 0000000000000..c91b38182afb5 --- /dev/null +++ b/projects/plugins/boost/changelog/update-boost-ui-directory-docs @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: Make sure Boost UI app directory docs are up-to-date. + +