Browse Source

refactor(test-app): convert core app structure to vue-facing-decorator

- Add reflect-metadata import to main.ts for decorator support
- Convert App.vue to Class API with proper error handling properties
- Simplify router configuration for debugging performance issues
- Remove complex plugin initialization logic for cleaner testing

Establishes foundation for consistent Class API usage across the app.
master
Matthew Raymer 6 days ago
parent
commit
eb0ca324d7
  1. 94
      test-apps/daily-notification-test/src/App.vue
  2. 1
      test-apps/daily-notification-test/src/main.ts
  3. 4
      test-apps/daily-notification-test/src/router/index.ts

94
test-apps/daily-notification-test/src/App.vue

@ -34,95 +34,19 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts">
import { onMounted, computed } from 'vue' import { Vue, Component, toNative } from 'vue-facing-decorator'
import { Capacitor } from '@capacitor/core'
import AppHeader from '@/components/layout/AppHeader.vue'
import AppFooter from '@/components/layout/AppFooter.vue'
import LoadingOverlay from '@/components/ui/LoadingOverlay.vue'
import ErrorDialog from '@/components/ui/ErrorDialog.vue'
import { useAppStore } from '@/stores/app'
const appStore = useAppStore() @Component
class App extends Vue {
isLoading = false
errorMessage = ''
const isLoading = computed(() => appStore.isLoading) clearError() {
const errorMessage = computed(() => appStore.errorMessage) this.errorMessage = ''
const initializeApp = async (): Promise<void> => {
try {
appStore.setLoading(true)
// Initialize platform detection
const platform = Capacitor.getPlatform()
const isNative = Capacitor.isNativePlatform()
appStore.setPlatform(platform, isNative)
console.log('🚀 Daily Notification Test App Started')
console.log('📱 Platform:', platform)
console.log('🔧 Native Platform:', isNative)
// Check if DailyNotification plugin is available
if (isNative) {
// Wait a bit for Capacitor to fully initialize
await new Promise(resolve => setTimeout(resolve, 100))
// Try multiple ways to access the plugin
const plugin = (window as any).DailyNotification ||
(window as any).Capacitor?.Plugins?.DailyNotification ||
(window as any).Capacitor?.Plugins?.['DailyNotification']
console.log('🔍 Plugin detection debug:')
console.log(' - window.DailyNotification:', (window as any).DailyNotification)
console.log(' - Capacitor.Plugins:', (window as any).Capacitor?.Plugins)
console.log(' - Available plugins:', Object.keys((window as any).Capacitor?.Plugins || {}))
if (plugin) {
console.log('✅ DailyNotification plugin available')
// Initialize plugin status check
await checkPluginStatus()
} else {
console.warn('⚠️ DailyNotification plugin not available')
// Don't show error dialog - just log the issue
console.log('🔍 Plugin not found, but continuing without error dialog')
}
} else {
console.log('🌐 Running in web mode - plugin not available')
}
} catch (error) {
console.error('❌ App initialization failed:', error)
appStore.setError('Failed to initialize app: ' + (error as Error).message)
} finally {
appStore.setLoading(false)
} }
} }
export default toNative(App)
const checkPluginStatus = async (): Promise<void> => {
try {
// Try multiple ways to access the plugin
const plugin = (window as any).DailyNotification ||
(window as any).Capacitor?.Plugins?.DailyNotification ||
(window as any).Capacitor?.Plugins?.['DailyNotification']
if (plugin) {
const status = await plugin.checkStatus()
appStore.setNotificationStatus(status)
console.log('📊 Plugin status:', status)
} else {
console.warn('⚠️ Plugin not accessible for status check')
}
} catch (error) {
console.error('❌ Plugin status check failed:', error)
}
}
const clearError = (): void => {
appStore.clearError()
}
onMounted(() => {
initializeApp()
})
</script> </script>
<style scoped> <style scoped>

1
test-apps/daily-notification-test/src/main.ts

@ -1,3 +1,4 @@
import 'reflect-metadata'
import './assets/main.css' import './assets/main.css'
import { createApp } from 'vue' import { createApp } from 'vue'

4
test-apps/daily-notification-test/src/router/index.ts

@ -1,5 +1,5 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' import HomeViewSimple from '../views/HomeViewSimple.vue'
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
@ -7,7 +7,7 @@ const router = createRouter({
{ {
path: '/', path: '/',
name: 'Home', name: 'Home',
component: HomeView, component: HomeViewSimple,
meta: { meta: {
title: 'Daily Notification Test', title: 'Daily Notification Test',
requiresAuth: false requiresAuth: false

Loading…
Cancel
Save