Commit Graph

3 Commits

Author SHA1 Message Date
Sped0n
f25b71a858 refactor: split monolithic state into context-based modules
Extract image, desktop, mobile, and config state into separate context
providers to improve modularity and reduce unnecessary re-renders.

Signed-off-by: Sped0n <hi@sped0n.com>
2026-03-22 19:45:05 +08:00
Spedon
febbd7d45d feat: migrate to Solid.js (#282)
* refactor: change hires loader function name

* feat: add loading transition animation and improve performance

* refactor: refactor gallery creation and update functions

* feat: update dependencies, configuration, and input file for solidjs

- Update dependencies in package.json
- Modify the input file in rollup.config.mjs
- Update tsconfig.json with new configuration options

* feat: update ESLint config for TypeScript and Solid integration

- Add `plugin:solid/typescript` to the ESLint config
- Add `prettier`, `@typescript-eslint`, and `solid` plugins to the ESLint config
- Remove the `overrides` and `plugins` properties from the ESLint config
- Modify the `memberSyntaxSortOrder` property in the ESLint config

* feat: update build scripts and configuration for Vite

* GitButler Integration Commit

This is an integration commit for the virtual branches that GitButler is tracking.

Due to GitButler managing multiple virtual branches, you cannot switch back and
forth between git branches and virtual branches easily. 

If you switch to another branch, GitButler will need to be reinitialized.
If you commit on this branch, GitButler will throw it away.

Here are the branches that are currently applied:
 - solid (refs/gitbutler/solid)
   branch head: dc6860991c
   - .eslintrc.json
   - assets/ts/main.tsx
   - assets/ts/desktop/stage.tsx
   - static/bundled/js/main.js
   - rollup.config.mjs
   - pnpm-lock.yaml
   - vite.config.ts
   - package.json
   - tsconfig.json
   - assets/ts/globalState.ts
   - assets/ts/mobile/collection.ts
   - assets/ts/container.ts
   - assets/ts/mobile/init.ts
   - assets/ts/mobile/gallery.ts
   - assets/ts/desktop/customCursor.ts
   - assets/ts/mobile/state.ts
   - assets/ts/globalUtils.ts
   - static/bundled/js/zXhbFx.js
   - static/bundled/js/EY5BO_.js
   - static/bundled/js/bBHMTk.js
   - assets/ts/nav.tsx
   - assets/ts/utils.ts
   - assets/ts/desktop/stageNav.ts
   - assets/ts/mobile/utils.ts
   - assets/ts/main.ts
   - assets/ts/desktop/state.ts
   - assets/ts/desktop/init.ts
   - assets/ts/state.tsx
   - assets/ts/desktop/utils.ts
   - assets/ts/nav.ts
   - assets/ts/resources.ts
   - assets/ts/desktop/stage.ts
   - static/bundled/js/GAHquF.js

Your previous branch was: refs/heads/solid

The sha for that commit was: dc6860991c

For more information about what we're doing here, check out our docs:
https://docs.gitbutler.com/features/virtual-branches/integration-branch

* refactor: remove .hide class from _base.scss file

* feat: migrate to Solid.js

* refactor: change i18n loading text with trailing dots

* fix: fix broken pnpm lock file

* chore: update eslint configuration for better code organization

- Update the eslint plugins array by removing newlines and maintaining plugins order
- Disable the rule "@typescript-eslint/non-nullable-type-assertion-style"
- Change the configuration of "sort-imports" rule

* feat: add tiny-invariant and eslint-plugin-solid to deps

* refactor: fix multiple eslint warnings

---------

Co-authored-by: GitButler <gitbutler@gitbutler.com>
2024-02-22 01:18:29 +08:00
Spedon
1f65b08b56 refactor: refactor the pile of crap I wrote before 🤡 (#259)
* feat: refactor file structure and imports in mobile and desktop components

- Removed the import of `scrollable` from `assets/ts/mobile/scroll.ts`
- Renamed `assets/ts/mobile/mounted.ts` to `assets/ts/mobile/state.ts`
- Changed the import of `active` from `./stage` to `./state` in `assets/ts/desktop/customCursor.ts`
- Changed the import of `active` from `../state` to `../globalState` in `assets/ts/desktop/stage.ts`
- Changed the import of `active` from `./stage` to `./state` in `assets/ts/desktop/stageNav.ts`
- Renamed `assets/ts/state.ts` to `assets/ts/globalState.ts`
- Created a new file `assets/ts/desktop/state.ts`
- Added the interface `HistoryItem` to `assets/ts/desktop/state.ts`
- Added the variables `cordHist`, `isOpen`, `active`, and `isLoading` to `assets/ts/desktop/state.ts`
- Deleted the function `loader` from `assets/ts/desktop/stage.ts` and replaced it with `setLoaderForImage`
- Deleted the import of `./stage` from `assets/ts/desktop/stageNav.ts`
- Added the import of `minimizeImage` from `./stage` in `assets/ts/desktop/stageNav.ts`
- Deleted the import of `./mounted` from `assets/ts/mobile/collection.ts`
- Changed the import of `mounted` from `./mounted` to `./state` in `

* refactor: refactor the `onVisible` function to improve performance

- Modify the type of the `onVisible` function parameter `T` to extend `HTMLElement`
- Change the `entries.forEach` loop in the `onVisible` function to `entries.every`

* feat: add new function for detecting opacity changes in element

- Add a new function `onOpacityOne` in `assets/ts/utils.ts`
- The function uses a `MutationObserver` to check for opacity changes on an element
- When the element's opacity reaches `1`, the provided callback function is called
- The `MutationObserver` is disconnected after the callback is executed

* refactor: refactor function names and parameters in intersection and mutation observers

- Change the function name `onVisible` to `onIntersection`
- Modify the `callback` parameter in the `onIntersection` function to accept `IntersectionObserverEntry[]` and `IntersectionObserver` parameters
- Remove the code block that checks for intersection ratio and immediately calls the `callback` function in the `onIntersection` function
- Modify the function name `onOpacityOne` to `onMutation`
- Modify the `callback` parameter in the `onMutation` function to accept `MutationRecord[]` and `MutationObserver` parameters
- Add a default value for the `observeOptions` parameter in the `onMutation` function

* refactor: refine preload logic on both mobile and desktop

* refactor: refactor import statements and add new files

- The import statement for `Watchable` in `assets/ts/globalState.ts` has been changed from `../utils` to `../globalUtils`
- The import statement for `Watchable` in `assets/ts/desktop/state.ts` has been changed from `../utils` to `../globalUtils`
- The import statement for `decrement` and `increment` in `assets/ts/desktop/stageNav.ts` has been changed from `../utils` to `../globalUtils`
- A new file `utils.ts` has been added in the `assets/ts/desktop` directory
- The import statements for `getRandom`, `onIntersection`, and `type MobileImage` in `assets/ts/mobile/collection.ts` have been changed from `../utils` to `./utils`
- The `imgs` array in `assets/ts/mobile/collection.ts` has been changed from an array of `HTMLImageElement` to an array of `MobileImage`
- The import statements for `expand`, `loadGsap`, `loadSwiper`, and `removeDuplicates` in `assets/ts/mobile/gallery.ts` have been changed from `../utils` to `../globalUtils`
- The import statement for `type MobileImage` in `assets/ts/mobile/gallery.ts` has been changed from `./utils` to `../mobile/utils`
- The `galleryLoadImages` function in `assets/ts/mobile/gallery.ts` has been removed
- A new file `utils.ts`

* refactor: refactor swiper import and functions in mobile and global utils

* refactor: refactor navigation and image loading logic in desktop and mobile

* refactor: remove print function and optimize removeDuplicates return

* refactor: update text variable assignments and attributes

* refactor: update variable types in galleryImages and collectionImages in mobile/gallery.ts

* refactor: refactor variable types for consistency with naming conventions

* refactor: update animation durations and types in gallery functions

* refactor: refactor image loading logic and add console logs

* refactor: refactor sass hierarchy

* refactor: remove console logs in multiple files
2024-02-03 23:17:16 +08:00