refactor(ui): reorganize imports

apps/desktop/src/renderer/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ElementI18nMap, useSettingsStore } from '@mqttx/ui'
+import { ElementI18nMap } from '@mqttx/ui/i18n'
+import { useSettingsStore } from '@mqttx/ui/stores'
 
 const settingsStore = useSettingsStore()
 console.log('MQTTX Desktop App init...')

apps/desktop/src/renderer/src/main.ts

@@ -1,15 +1,19 @@
-import { i18n, pinia, useSettingsStore } from '@mqttx/ui'
+import { i18n } from '@mqttx/ui/i18n'
+import { useSettingsStore } from '@mqttx/ui/stores'
+import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
 import App from './App.vue'
 import { router } from './router'
 
-import '@mqttx/ui/dist/style.css'
+import '@mqttx/ui/styles.scss'
 import './assets/scss/main.scss'
 
 // Create Vue
 const app = createApp(App)
 
+const pinia = createPinia()
+
 app.use(router).use(pinia)
 
 // I18n

apps/desktop/tailwind.config.ts

@@ -3,7 +3,11 @@ import baseConfig from '@mqttx/tailwind-config/base.config'
 
 const config: Config = {
   presets: [baseConfig],
-  content: ['./src/renderer/index.html', './src/renderer/src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: [
+    './src/renderer/index.html',
+    './src/renderer/src/**/*.{vue,js,ts,jsx,tsx}',
+    '../../packages/ui/src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
 }
 
 export default config

apps/desktop/tsconfig.web.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",
+    "moduleResolution": "bundler",
     "paths": {
       "@renderer/*": ["src/renderer/src/*"]
     },

apps/web/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ElementI18nMap, useSettingsStore } from '@mqttx/ui'
+import { ElementI18nMap } from '@mqttx/ui/i18n'
+import { useSettingsStore } from '@mqttx/ui/stores'
 
 const settingsStore = useSettingsStore()
 console.log('MQTTX Web App init...')

apps/web/src/main.ts

@@ -1,15 +1,19 @@
-import { i18n, pinia, useSettingsStore } from '@mqttx/ui'
+import { i18n } from '@mqttx/ui/i18n'
+import { useSettingsStore } from '@mqttx/ui/stores'
+import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
 import App from './App.vue'
 import { router } from './router'
 
-import '@mqttx/ui/dist/style.css'
+import '@mqttx/ui/styles.scss'
 import './assets/scss/main.scss'
 
 // Create Vue
 const app = createApp(App)
 
+const pinia = createPinia()
+
 app.use(router).use(pinia)
 
 // I18n

apps/web/tailwind.config.ts

@@ -2,7 +2,11 @@ import type { Config } from 'tailwindcss'
 import baseConfig from '@mqttx/tailwind-config/base.config'
 
 const config: Config = {
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    '../../packages/ui/src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
   presets: [baseConfig],
 }
 

package.json

@@ -8,7 +8,6 @@
   "repository": "https://github.com/emqx/MQTTX",
   "scripts": {
     "prepare": "husky install",
-    "postinstall": "pnpm run generate:ui",
     "dev": "turbo run dev",
     "dev:desktop": "turbo run dev --filter @mqttx/desktop",
     "dev:web": "turbo run dev --filter @mqttx/web",

packages/ui/package.json

@@ -2,6 +2,12 @@
   "name": "@mqttx/ui",
   "type": "module",
   "version": "0.0.0",
+  "exports": {
+    ".": "./src/index.ts",
+    "./i18n": "./src/i18n/index.ts",
+    "./stores": "./src/stores/index.ts",
+    "./styles.scss": "./src/styles/index.scss"
+  },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -14,12 +20,12 @@
     "test:dev": "vitest"
   },
   "peerDependencies": {
-    "@element-plus/icons-vue": "^2.1.0",
-    "element-plus": "^2.4.1",
-    "pinia": "^2.1.7",
-    "vue": "^3.3.4",
-    "vue-i18n": "9",
-    "vue-router": "4"
+    "@element-plus/icons-vue": "^2.3.1",
+    "element-plus": "^2.8.7",
+    "pinia": "^2.2.6",
+    "vue": "^3.5.12",
+    "vue-i18n": "^10.0.4",
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@mqttx/core": "workspace:*",

packages/ui/src/i18n/index.ts

@@ -1,9 +1,9 @@
 import type { Lang } from 'mqttx'
-import ElementPlusEN from 'element-plus/dist/locale/en.mjs'
-import ElementPlusHU from 'element-plus/dist/locale/hu.mjs'
-import ElementPlusJA from 'element-plus/dist/locale/ja.mjs'
-import ElementPlusTR from 'element-plus/dist/locale/tr.mjs'
-import ElementPlusZH from 'element-plus/dist/locale/zh-cn.mjs'
+import ElementPlusEN from 'element-plus/es/locale/lang/en'
+import ElementPlusHU from 'element-plus/es/locale/lang/hu'
+import ElementPlusJA from 'element-plus/es/locale/lang/ja'
+import ElementPlusTR from 'element-plus/es/locale/lang/tr'
+import ElementPlusZH from 'element-plus/es/locale/lang/zh-cn'
 import { createI18n } from 'vue-i18n'
 
 export const ElementI18nMap: Record<Lang, any> = {

packages/ui/src/index.ts

@@ -8,9 +8,6 @@ import MainView from './components/common/MainView.vue'
 import SplitView from './components/common/SplitView.vue'
 import ConnectionDetailsView from './components/connections/DetailsView.vue'
 import ConnectionListView from './components/connections/ListView.vue'
-import 'element-plus/dist/index.css'
-import './styles/index.scss'
-import './assets/fonts/iconfont'
 
 export const pinia = createPinia()
 

packages/ui/src/styles/index.scss

@@ -2,7 +2,7 @@
 
 @forward './tailwind.scss';
 // FIXME: fix iconfont
-@forward '../assets/fonts/iconfont.css';
+// @forward '../assets/fonts/iconfont.css';
 @forward './normalize.scss';
 @forward './connections.scss';
 

packages/ui/src/vite-env.d.ts

@@ -1 +0,0 @@
-declare module 'element-plus/dist/locale/*.mjs'