[PR #2927] [MERGED] refactor: update hopp-ui to be independent #4142

New issue

Closed

opened 2026-03-17 01:42:21 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:42:21 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/2927
Author: @AndrewBastin
Created: 2/21/2023
Status: ✅ Merged
Merged: 2/24/2023
Merged by: @AndrewBastin

Base: main ← Head: refactor/hopp-ui-isolate

📝 Commits (9)

669aba3 refactor: update hopp-ui to be independent
795db1b feat: introduce story for HoppSmartExpand
96172b8 refactor: update packaging and move hoppscotch-common usage to have hopp prefix
a7cd573 chore: make hoppscotch-ui more friendly to typescript
2971a0d chore: move to vuedraggable-es and uncomment Windows.vue export
4ac7179 chore: unnecessary classes removed
4ea3044 Merge branch 'refactor/hopp-ui-isolate' of github.com:AndrewBastin/hoppscotch into pr/AndrewBastin/2927
38eb63a chore: remove unnecessary classes
33af3f2 chore: revert windicss classes

📊 Changes

165 files changed (+2041 additions, -1976 deletions)

View changed files

📝 packages/hoppscotch-common/package.json (+1 -1)
📝 packages/hoppscotch-common/src/App.vue (+1 -1)
📝 packages/hoppscotch-common/src/components.d.ts (+10 -28)
📝 packages/hoppscotch-common/src/components/app/DeveloperOptions.vue (+3 -3)
📝 packages/hoppscotch-common/src/components/app/Footer.vue (+21 -21)
📝 packages/hoppscotch-common/src/components/app/Header.vue (+9 -9)
📝 packages/hoppscotch-common/src/components/app/Interceptor.vue (+6 -3)
📝 packages/hoppscotch-common/src/components/app/Options.vue (+14 -14)
📝 packages/hoppscotch-common/src/components/app/PowerSearch.vue (+2 -2)
📝 packages/hoppscotch-common/src/components/app/Share.vue (+2 -2)
📝 packages/hoppscotch-common/src/components/app/Shortcuts.vue (+2 -2)
📝 packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue (+1 -1)
📝 packages/hoppscotch-common/src/components/app/Sidenav.vue (+2 -2)
📝 packages/hoppscotch-common/src/components/app/Support.vue (+9 -9)
📝 packages/hoppscotch-common/src/components/collections/Add.vue (+4 -4)
📝 packages/hoppscotch-common/src/components/collections/AddFolder.vue (+4 -4)
📝 packages/hoppscotch-common/src/components/collections/AddRequest.vue (+4 -4)
📝 packages/hoppscotch-common/src/components/collections/Collection.vue (+8 -8)
📝 packages/hoppscotch-common/src/components/collections/Edit.vue (+4 -4)
📝 packages/hoppscotch-common/src/components/collections/EditFolder.vue (+4 -4)

...and 80 more files

📄 Description

This PR aims to allow hoppscotch-ui package to be properly independent and be easily installed onto any Vue SPA project which will later come down the line.

With the new updates you will be able to integrate hoppscotch-ui by just adding it to dependencies, and then following this:

Add the plugin into the Vue app and supply it the required options and also add the styles.

 import { createApp } from "vue"
 import { plugin as HoppUIPlugin, HoppUIPluginOptions } from "@hoppscotch/ui"

 import "@hoppscotch/ui/style.css"

 const options: HoppUIPluginOptions = { /* Define options here */ }
 const app = createApp()
 app.use(HoppUIPlugin, options)

Along with that, all the components in hoppscotch-ui are now prefixed with a Hopp prefix. For e.g, ButtonPrimary -> HoppButtonPrimary. To facilitate this, hoppscotch-web's Vite config defines a resolver for unplugin-vue-components to resolve any component query starting with Hopp to be resolved from @hoppscotch/ui.

There are some concerns about whether the ESM module tree-shaking and code splitting is working properly and if the necessary code can be spliced up properly. This will be verified and benchmarked in the coming days.

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required (package README still needs to be updated)
All the tests have passed

Additional Information

N/A

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/2927 **Author:** [@AndrewBastin](https://github.com/AndrewBastin) **Created:** 2/21/2023 **Status:** ✅ Merged **Merged:** 2/24/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `main` ← **Head:** `refactor/hopp-ui-isolate` --- ### 📝 Commits (9) - [`669aba3`](https://github.com/hoppscotch/hoppscotch/commit/669aba35d7a68b6ae719e570e3aa9e880248d15c) refactor: update hopp-ui to be independent - [`795db1b`](https://github.com/hoppscotch/hoppscotch/commit/795db1b7242471839c855c6c2da826d8067dc640) feat: introduce story for HoppSmartExpand - [`96172b8`](https://github.com/hoppscotch/hoppscotch/commit/96172b8dc876d4d3df5ca75de32749fbbcdc34ce) refactor: update packaging and move hoppscotch-common usage to have hopp prefix - [`a7cd573`](https://github.com/hoppscotch/hoppscotch/commit/a7cd573338d270d8ee412e3973410ad9c18eed5b) chore: make hoppscotch-ui more friendly to typescript - [`2971a0d`](https://github.com/hoppscotch/hoppscotch/commit/2971a0d625922ee8013aa22bed8b99cf5fac4979) chore: move to vuedraggable-es and uncomment Windows.vue export - [`4ac7179`](https://github.com/hoppscotch/hoppscotch/commit/4ac717904ebea8597a90fbae35c59dd72d664679) chore: unnecessary classes removed - [`4ea3044`](https://github.com/hoppscotch/hoppscotch/commit/4ea30449174061a371a14e6c924d79655939930d) Merge branch 'refactor/hopp-ui-isolate' of github.com:AndrewBastin/hoppscotch into pr/AndrewBastin/2927 - [`38eb63a`](https://github.com/hoppscotch/hoppscotch/commit/38eb63abe5308649e199598a21a487911b592d15) chore: remove unnecessary classes - [`33af3f2`](https://github.com/hoppscotch/hoppscotch/commit/33af3f27db7b801fe6edef2c262bde866b5cc356) chore: revert windicss classes ### 📊 Changes **165 files changed** (+2041 additions, -1976 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/package.json` (+1 -1) 📝 `packages/hoppscotch-common/src/App.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components.d.ts` (+10 -28) 📝 `packages/hoppscotch-common/src/components/app/DeveloperOptions.vue` (+3 -3) 📝 `packages/hoppscotch-common/src/components/app/Footer.vue` (+21 -21) 📝 `packages/hoppscotch-common/src/components/app/Header.vue` (+9 -9) 📝 `packages/hoppscotch-common/src/components/app/Interceptor.vue` (+6 -3) 📝 `packages/hoppscotch-common/src/components/app/Options.vue` (+14 -14) 📝 `packages/hoppscotch-common/src/components/app/PowerSearch.vue` (+2 -2) 📝 `packages/hoppscotch-common/src/components/app/Share.vue` (+2 -2) 📝 `packages/hoppscotch-common/src/components/app/Shortcuts.vue` (+2 -2) 📝 `packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components/app/Sidenav.vue` (+2 -2) 📝 `packages/hoppscotch-common/src/components/app/Support.vue` (+9 -9) 📝 `packages/hoppscotch-common/src/components/collections/Add.vue` (+4 -4) 📝 `packages/hoppscotch-common/src/components/collections/AddFolder.vue` (+4 -4) 📝 `packages/hoppscotch-common/src/components/collections/AddRequest.vue` (+4 -4) 📝 `packages/hoppscotch-common/src/components/collections/Collection.vue` (+8 -8) 📝 `packages/hoppscotch-common/src/components/collections/Edit.vue` (+4 -4) 📝 `packages/hoppscotch-common/src/components/collections/EditFolder.vue` (+4 -4) _...and 80 more files_ </details> ### 📄 Description This PR aims to allow `hoppscotch-ui` package to be properly independent and be easily installed onto any Vue SPA project which will later come down the line. With the new updates you will be able to integrate `hoppscotch-ui` by just adding it to dependencies, and then following this: 1. Add the plugin into the Vue app and supply it the required options and also add the styles. ```ts import { createApp } from "vue" import { plugin as HoppUIPlugin, HoppUIPluginOptions } from "@hoppscotch/ui" import "@hoppscotch/ui/style.css" const options: HoppUIPluginOptions = { /* Define options here */ } const app = createApp() app.use(HoppUIPlugin, options) ``` Along with that, all the components in `hoppscotch-ui` are now prefixed with a `Hopp` prefix. For e.g, `ButtonPrimary` -> `HoppButtonPrimary`. To facilitate this, `hoppscotch-web`'s Vite config defines a resolver for [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) to resolve any component query starting with `Hopp` to be resolved from `@hoppscotch/ui`. There are some concerns about whether the ESM module tree-shaking and code splitting is working properly and if the necessary code can be spliced up properly. This will be verified and benchmarked in the coming days. ### Checks  - [x] My pull request adheres to the code style of this project - [x] My code requires changes to the documentation - [ ] I have updated the documentation as required (package README still needs to be updated) - [x] All the tests have passed ### Additional Information N/A --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>