Skip to content

Commit

Permalink
Boost: Update EXPLAIN.md for UI (#41169)
Browse files Browse the repository at this point in the history
* Update EXPLAIN.md

* Update directory listing

* Fix typos

* add changelog

---------

Co-authored-by: Peter Petrov <peter.petrov89@gmail.com>
haqadn and dilirity authored Jan 20, 2025
1 parent 235e678 commit 7d53c40
Showing 2 changed files with 22 additions and 21 deletions.
38 changes: 17 additions & 21 deletions projects/plugins/boost/app/assets/src/js/EXPLAIN.md
Original file line number Diff line number Diff line change
@@ -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,38 +16,41 @@ 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
- ...
- ...
- 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
- p2, etc.
- purchase-success.tsx
- p2
- ...
- layout/ # Global layout components
- header
- footer
- wrapper, etc.
- wrapper
- ...
```

* `Main.svelte` and `index.ts` - The entry files for the app. `index.ts` is compiled into `/assets/dist/jetpack-boost.js`
* `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`.
* `pages/` - The pages of the app. Each page should be placed in it's own directory.
* `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 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 its own directory.
* `layout/` - Global layout components. These are components that are used in multiple pages, such as the header, footer, etc.

### Feature Structure
@@ -72,9 +74,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
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Significance: patch
Type: changed
Comment: Make sure Boost UI app directory docs are up-to-date.


0 comments on commit 7d53c40

Please sign in to comment.