@appnave/quasar-app-extension-asteroid 3.20.0-beta.23

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@appnave/quasar-app-extension-asteroid",
+  "description": "Asteroid",
+  "version": "3.20.0-beta.23",
+  "author": "Bild & Vitta <systemteam@bild.com.br>",
+  "license": "MIT",
+  "main": "src/index.js",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "keys": [
+    "quasar",
+    "extension",
+    "vue",
+    "design-system",
+    "helpers",
+    "components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bildvitta/asteroid/"
+  },
+  "bugs": "https://github.com/bildvitta/asteroid/issues",
+  "homepage": "",
+  "engines": {
+    "node": ">= 8.9.0",
+    "npm": ">= 5.6.0",
+    "yarn": ">= 1.6.0"
+  },
+  "peerDependencies": {
+    "@fawmi/vue-google-maps": "0.9.79",
+    "quasar": "^2.18.0"
+  },
+  "dependencies": {
+    "@appnave/quasar-app-extension-asteroid": "file:",
+    "@appnave/quasar-ui-asteroid": "3.20.0-beta.23",
+    "@bildvitta/store-adapter": "^1.0.0",
+    "execa": "^7.1.1",
+    "fontfaceobserver": "^2.3.0",
+    "humps": "^2.0.1",
+    "laravel-echo": "^1.15.3",
+    "ora": "^8.2.0",
+    "pusher-js": "^8.4.0-rc2",
+    "unplugin-vue-components": "28.5.0"
+  }
+}

package/src/boot/api.js

@@ -0,0 +1,42 @@
+import { camelizeKeys, decamelizeKeys } from 'humps'
+
+import asteroidConfig from 'asteroid-config'
+
+export default async ({ app }) => {
+  const api = app.config.globalProperties.$axios
+
+  // Defaults
+  api.defaults.baseURL = process.env.SERVER_BASE_URL || '/'
+
+  api.defaults.timeout = asteroidConfig.api.serverTimeout
+
+  // Transformers
+  api.defaults.transformResponse = [
+    ...api.defaults.transformResponse,
+
+    data => camelizeKeys(data, (key, convert) =>
+      /^\D+$/.test(key) ? convert(key) : key
+    )
+  ]
+
+  api.defaults.transformRequest = [
+    data => {
+      if (data instanceof FormData) {
+        return data
+      }
+
+      return decamelizeKeys(data, (key, convert, options) =>
+        /^\D+$/.test(key) ? convert(key, options) : key
+      )
+    },
+
+    ...api.defaults.transformRequest
+  ]
+
+  /**
+   * Adicionado para que componentes que utilize o Composition API possam ter acesso a instancia do
+   * axios que contém as configurações necessárias da aplicação, uma vez que a utilização de provide
+   * é a forma recomendada para trabalhar com variavéis globais.
+  */
+  app.provide('axios', api)
+}

package/src/boot/before-each.js

@@ -0,0 +1,11 @@
+import { useHistory, setDefaultFiltersBeforeEach } from 'asteroid'
+
+export default ({ router }) => {
+  router.beforeEach((to, from, next) => {
+    const { addRoute } = useHistory()
+
+    addRoute(to)
+
+    setDefaultFiltersBeforeEach(to, from, next)
+  })
+}

package/src/boot/debug.js

@@ -0,0 +1,10 @@
+import { handleProcess } from 'asteroid'
+
+import debug from 'debug'
+
+export default async () => {
+  const debuggingEnv = handleProcess(() => process.env.DEBUGGING, false)
+  const debugEnv = handleProcess(() => process.env.DEBUG, '')
+
+  debug.enable(debuggingEnv && !debugEnv ? 'asteroid-*:*' : debugEnv)
+}

package/src/boot/error-pages.js

@@ -0,0 +1,24 @@
+export default function ({ router }) {
+  const routes = [
+    {
+      name: 'Forbidden',
+      path: '/',
+      component: () => import('@appnave/quasar-ui-asteroid/src/pages/Forbidden.vue')
+    },
+    {
+      name: 'ServerError',
+      path: '/',
+      component: () => import('@appnave/quasar-ui-asteroid/src/pages/ServerError.vue')
+    }
+  ]
+
+  if (process.env.MODE !== 'ssr') {
+    routes.push({
+      name: 'NotFound',
+      path: '/:catchAll(.*)*',
+      component: () => import('@appnave/quasar-ui-asteroid/src/pages/NotFound.vue')
+    })
+  }
+
+  routes.forEach(route => router.addRoute(route))
+}

package/src/boot/font-face.js

@@ -0,0 +1,36 @@
+import FontFaceObserver from 'fontfaceobserver'
+import asteroidConfig from 'asteroid-config'
+
+export default async () => {
+  function setFontFaceObserver () {
+    const font = new FontFaceObserver('Material Symbols Rounded')
+
+    const bodyClass = 'icons-is-loading'
+
+    const removeClass = () => document.body.classList.remove(bodyClass)
+
+    document.body.classList.add(bodyClass)
+
+    font.load(null, 60000).then(removeClass, removeClass)
+  }
+
+  function fontFaceEventHandler (event) {
+    if (event.data.type === 'updateUser') {
+      setFontFaceObserver()
+
+      /**
+       * após escutar a primeira vez, já remove o listener para não executar novamente
+       * caso o evento "updateUser" seja executado novamente.
+      */
+      window.removeEventListener('message', fontFaceEventHandler)
+    }
+  }
+
+  if (asteroidConfig.framework?.fonts?.observer?.waitForUserAuthenticate) {
+    window.addEventListener('message', fontFaceEventHandler)
+
+    return
+  }
+
+  setFontFaceObserver()
+}

package/src/boot/loading.js

@@ -0,0 +1,12 @@
+import { Loading } from 'quasar'
+
+export default () => {
+  Loading.setDefaults({
+    backgroundColor: 'white',
+    boxClass: 'text-body1',
+    customClass: 'qas-loading',
+    message: 'Carregando...',
+    messageColor: 'primary',
+    spinnerColor: 'primary'
+  })
+}

package/src/boot/notifications.js

@@ -0,0 +1,45 @@
+/**
+ * Este boot só é adicionado dinamicamente na aplicação caso a opção
+ * "asteroidConfig.framework.featureToggle.useNotifications" esteja ativada.
+ */
+
+import { isLocalDevelopment } from 'asteroid'
+
+import onLeaderElectionChannel from '../helpers/on-leader-election-channel.js'
+import { setLaravelEcho, setLaravelEchoListener } from '../helpers/laravel-echo.js'
+import { setNotificationsChannelListener, setNotificationsUtilsChannel } from '../helpers/notifications-channels.js'
+
+import { LocalStorage } from 'quasar'
+
+export default () => {
+  /**
+   * Se estivermos em desenvolvimento local, não vamos estabelecer conexão com o servidor.
+   */
+  if (isLocalDevelopment()) return
+
+  window.addEventListener('message', ({ data }) => {
+    if (data.type !== 'updateUser') return
+
+    const user = data.user
+    const accessToken = LocalStorage.getItem('accessToken')
+
+    const hasBearerPrefix = accessToken.startsWith('Bearer ')
+    const userToken = hasBearerPrefix ? accessToken : `Bearer ${accessToken}`
+
+    /**
+     * Aqui vamos estabelecer a conexão com o servidor apenas na tab (aba) líder.
+     * Vamos escutar por novas notificações, sempre que receber uma notificação,
+     * iremos enviar via BroadcastChannel.postMessage().
+     */
+    onLeaderElectionChannel(channel => {
+      setLaravelEcho(userToken)
+      setLaravelEchoListener({ user, channel })
+    })
+
+    /**
+     * Controle de notificações por comunicação entre abas (BroadcastChannel).
+     */
+    setNotificationsChannelListener()
+    setNotificationsUtilsChannel()
+  })
+}

package/src/boot/overlay-navigation.js

@@ -0,0 +1,261 @@
+import { useOverlayNavigation } from 'asteroid'
+
+/**
+ * @param {import('vue-router').Router} router
+ */
+export default async function ({ router }) {
+  router.beforeEach((to, from, next) => onBeforeEach(to, from, next, router))
+}
+
+/**
+ * @param {import('vue-router').RouteLocationNormalized} to
+ * @param {import('vue-router').RouteLocationNormalized} from
+ * @param {Function} next
+ * @param {import('vue-router').Router} router
+ */
+async function onBeforeEach (to, from, next, router) {
+  const useOverlay = to.matched.some(item => item.meta.useOverlay)
+
+  if (!useOverlay) return next()
+
+  const { addRouteToHistory } = useOverlayNavigation()
+
+  addRouteToHistory(to, from)
+
+  /**
+   * Se houver mais de 2 níveis de rota, isto significa que esta rota tem 2 componentes pais, (sendo o primeiro o Root),
+   * nestes cenários, o componente overlay precisa ser o segundo componente pai, para renderizar de forma completa.
+   * Vamos supor o seguinte cenário: tenho uma lista de contatos, ao clicar em um contato, abro o overlay com o
+   * detalhe do contato, porém o detalhe do contato também possui um layout com rotas filhas, como "Resumo", neste
+   * cenário, o overlay precisa ser o componente pai do "detalhe" e não somente o resumo.
+   *
+   * @example
+   * [
+   *  {
+   *    "path": "/"
+   *  },
+   *  {
+   *    "path": "/customers/:id" -> componente que precisa ser o overlay
+   *  },
+   *  {
+   *    "path": "/customers/:id/summary"
+   *  }
+   * ]
+   */
+  const matchedIndex = to.matched.length > 1 ? 1 : 0
+
+  const { overlay, default: defaultComponent } = to.matched[matchedIndex]?.components || {}
+
+  const overlayComponent = await getResolvedComponent(overlay || defaultComponent)
+
+  // "overlay" vem como string na query da URL.
+  if (to.query.overlay === 'true') {
+    const backgroundResult = await getBackgroundComponent()
+
+    if (backgroundResult) {
+      const { resolvedRoute } = backgroundResult
+
+      const { name, params = {}, fullPath, path, query = {} } = resolvedRoute || {}
+
+      to.meta.backgroundRoute = { name, params, fullPath, path, query }
+
+      /**
+       * Resolve todos os componentes lazy da rota de background e armazena a rota
+       * resolvida em `to.meta.overlayBackgroundResolvedRoute`.
+       *
+       * O QasLayout usa essa rota via `<router-view :route="..." />` para renderizar
+       * o background com sua hierarquia completa (parent layout + children),
+       * enquanto o overlay continua usando a rota atual normalmente.
+       */
+      await resolveRouteComponents(resolvedRoute)
+
+      to.meta.overlayBackgroundResolvedRoute = resolvedRoute
+
+      // Apenas adicionar o overlay, sem alterar o default
+      to.matched[matchedIndex].components = {
+        ...to.matched[matchedIndex].components,
+        overlay: overlayComponent
+      }
+    }
+  } else {
+    to.matched[matchedIndex].components = {
+      default: overlayComponent
+    }
+  }
+
+  next()
+
+  // functions
+
+  /**
+   * Resolve todos os componentes lazy (ex: () => import(...)) de uma rota.
+   * Necessário porque router.resolve() não resolve lazy components automaticamente.
+   *
+   * @param {import('vue-router').RouteLocationNormalized} route
+   */
+  async function resolveRouteComponents (route) {
+    for (const matched of route.matched) {
+      for (const [viewName, comp] of Object.entries(matched.components || {})) {
+        matched.components[viewName] = await getResolvedComponent(comp)
+      }
+    }
+  }
+
+  function getComponentByRoute (route) {
+    const lastIndex = route.matched.length - 1
+    const matched = route.matched[lastIndex]
+
+    /**
+     * Busca o componente da rota. Pode vir em dois formatos:
+     *
+     * 1. `.components.default` - Quando:
+     *  - A rota usa named views (múltiplos componentes)
+     *  - A rota foi processada pelo overlay (criamos a estrutura { default, overlay })
+     *  - Exemplo: { components: { default: MainComponent, sidebar: SidebarComponent } }
+     *
+     * 2. `.component` (sem 's') - Quando:
+     *  - A rota tem um único componente simples
+     *  - Lazy loading: component: () => import('./Component.vue')
+     *  - Exemplo: { component: LoginComponent }
+     */
+    const component = matched?.components?.default || matched?.component
+
+    return getResolvedComponent(component)
+  }
+
+  /**
+   * Resolve um componente Vue, seja ele estático ou lazy-loaded.
+   *
+   * Componentes podem vir de duas formas:
+   * 1. **Estático**: Já importado - `LoginComponent`
+   * 2. **Lazy**: Função que retorna import - `() => import('./Login.vue')`
+   *
+   * Esta função garante que ambos os casos sejam tratados e retornem
+   * o componente pronto para uso.
+   *
+   * @param {Object|Function} component - O componente a ser resolvido
+   * @returns {Promise<Object>} Uma Promise que resolve com o componente Vue
+   */
+  function getResolvedComponent (component) {
+    return new Promise((resolve, reject) => {
+      if (typeof component === 'function') {
+        component().then(module => resolve(module.default)).catch(error => reject(error))
+      } else {
+        resolve(component)
+      }
+    })
+  }
+
+  async function getBackgroundComponent () {
+    const backgroundPath = to.query.backgroundOverlay
+
+    if (backgroundPath) {
+      try {
+        /**
+         * A url pode vir com query, ex: "/customers?tab=info", então precisamos separar a query para repassar depois.
+         *
+         * @example
+         * const normalizedURL = decodeURIComponent(backgroundPath) // "/customers?tab=info"
+         * const queryString = normalizedURL.split('?')[1] // "tab=info"
+         * const queryParams = normalizedURL ? new URLSearchParams(queryString) : {} // URLSearchParams { tab: 'info' }
+         */
+        const normalizedURL = decodeURIComponent(backgroundPath)
+        const queryString = normalizedURL.split('?')[1]
+        const queryParams = normalizedURL ? new URLSearchParams(queryString) : {}
+
+        const queryObject = {}
+
+        queryParams.forEach((value, key) => {
+          queryObject[key] = value
+        })
+
+        const resolvedRoute = router.resolve(normalizedURL)
+
+        const component = await getComponentByRoute(resolvedRoute)
+
+        if (component) {
+          return {
+            component,
+            resolvedRoute: {
+              ...resolvedRoute,
+              query: queryObject,
+              params: resolvedRoute.params
+            }
+          }
+        }
+      } catch {
+        return null
+      }
+    }
+
+    // 2. Fallback: meta da rota atual
+    const backgroundOverlayName = to.meta?.backgroundOverlayName
+
+    if (backgroundOverlayName) {
+      try {
+        const resolvedRoute = router.resolve({ name: backgroundOverlayName })
+
+        const component = await getComponentByRoute(resolvedRoute)
+
+        return {
+          component,
+          resolvedRoute: {
+            ...resolvedRoute,
+            query: to.query,
+            params: {
+              ...to.params,
+              ...resolvedRoute.params
+            }
+          }
+        }
+      } catch {
+        return null
+      }
+    }
+
+    /**
+     * 3. Fallback automático: rota base
+     *
+     * Tenta usar a rota "pai" como background quando não há outras opções.
+     *
+     * Pega o primeiro segmento da URL para criar uma rota base.
+     * Por exemplo: se estou em "/customers/123/details", tenta usar "/customers"
+     *
+     * @example
+     * // URL atual: "/customers/123/edit"
+     * // Segments: ["customers", "123", "edit"]
+     * // Base path: "/customers" (primeiro segmento)
+     */
+    const segments = to.path.split('/').filter(Boolean)
+
+    if (segments.length >= 2) {
+      const basePath = `/${segments[0]}`
+
+      try {
+        const resolvedRoute = router.resolve(basePath)
+        const component = await getComponentByRoute(resolvedRoute)
+
+        if (component) {
+          return {
+            component,
+            resolvedRoute: {
+              ...resolvedRoute,
+              query: to.query,
+              params: {
+                ...to.params,
+                ...resolvedRoute.params
+              }
+            }
+          }
+        }
+      } catch {
+        return null
+      }
+    }
+
+    // 4. Fallback final
+    if (!from.name) return { component: overlayComponent, resolvedRoute: to }
+
+    return null
+  }
+}

package/src/boot/query-cache.js

@@ -0,0 +1,93 @@
+import { useQueryCache, useHistory } from 'asteroid'
+
+const { addMany, findAll, clearAll } = useQueryCache()
+
+let isReplacingQuery = false
+
+function getDefaultUseCacheValue (route = {}) {
+  const { name, meta } = route
+
+  return meta.useCache ?? name?.toLowerCase?.().endsWith?.('list')
+}
+
+function getQueriesFromMatchedRoutes (matched, key) {
+  const items = matched.reduce((acc, route) => {
+    const queries = route.meta[key] || []
+
+    if (queries) {
+      acc.push(...queries)
+    }
+
+    return acc
+  }, [])
+
+  return new Set(items)
+}
+
+function getQueriesToExclude (route) {
+  const routes = route.matched || []
+  const excludes = getQueriesFromMatchedRoutes(routes, 'excludes').add('page')
+  const includes = getQueriesFromMatchedRoutes(routes, 'includes')
+
+  includes.forEach(value => excludes.delete(value))
+
+  return excludes
+}
+
+function setRouteCache (route) {
+  if (!getDefaultUseCacheValue(route)) return
+
+  let filteredQuery = {}
+
+  const { query } = route || {}
+  const queriesToExclude = getQueriesToExclude(route)
+
+  if (queriesToExclude.size) {
+    for (const item in query) {
+      if (!queriesToExclude.has(item)) {
+        filteredQuery[item] = query[item]
+      }
+    }
+  } else {
+    filteredQuery = query
+  }
+
+  const hasQueryParams = !!Object.keys(filteredQuery).length
+
+  if (!hasQueryParams) {
+    clearAll(route.name)
+    return
+  }
+
+  addMany(route.name, filteredQuery)
+}
+
+export default ({ router }) => {
+  router.beforeEach((to, from, next) => {
+    if (!useHistory().hasPreviousRoute.value) {
+      clearAll(to.name)
+
+      return next()
+    }
+
+    setRouteCache(from)
+
+    const { query } = to
+    const useCache = getDefaultUseCacheValue(to)
+    const hasQueries = !!Object.keys(query).length
+    const isSameRoute = to.name === from.name
+    const useCachedQuery = !isSameRoute && !hasQueries && useCache
+
+    if (useCachedQuery && !isReplacingQuery) {
+      const cachedQuery = findAll(to.name) || {}
+
+      isReplacingQuery = true
+
+      next({ ...to, query: cachedQuery })
+    } else {
+      isReplacingQuery = false
+
+      next()
+    }
+  })
+}

package/src/boot/register.js

@@ -0,0 +1,8 @@
+// TODO: Rever uso do build
+// import VuePlugin from '@appnave/quasar-ui-asteroid/dist/asteroid.esm.js'
+
+import { install } from 'asteroid'
+
+export default ({ app }) => {
+  app.use({ install })
+}

package/src/boot/store-adapter.js

@@ -0,0 +1,5 @@
+import { InitializeGlobalStores } from '@bildvitta/store-adapter'
+
+export default ({ app }) => {
+  app.use(InitializeGlobalStores)
+}

package/src/defaults/default-asteroid-config.js

@@ -0,0 +1,8 @@
+import asteroidConfigApp from 'asteroid-config-app'
+
+import defaultAsteroidConfig from '../templates/js/asteroid.config.js'
+
+export default {
+  ...defaultAsteroidConfig,
+  ...asteroidConfigApp
+}

package/src/helpers/asteroid-config-handler.js

@@ -0,0 +1,22 @@
+import fs from 'fs'
+import ora from 'ora'
+
+export default function (api) {
+  const FILE_NAME = 'asteroid.config.js'
+
+  return {
+    async validate () {
+      const hasAsteroidConfigFile = fs.existsSync(FILE_NAME)
+
+      if (!hasAsteroidConfigFile) {
+        ora('Você deve criar um arquivo asteroid.config.js na raiz do projeto').fail()
+
+        throw new Error()
+      }
+    },
+
+    getAsteroidConfigPath () {
+      return api.resolve.app(FILE_NAME)
+    }
+  }
+}

package/src/helpers/laravel-echo.js

@@ -0,0 +1,55 @@
+import { isLocalDevelopment, handleProcess } from 'asteroid'
+
+import Echo from 'laravel-echo'
+import Pusher from 'pusher-js'
+
+import { camelizeKeys } from 'humps'
+
+/**
+ * Função para setar configuração do Laravel Echo.
+ *
+ * @param {string} accessToken
+ */
+export function setLaravelEcho (accessToken) {
+  window.Pusher = Pusher
+
+  const isLocal = isLocalDevelopment()
+
+  window.Echo = new Echo({
+    broadcaster: 'pusher',
+    key: isLocal ? 'app-key' : handleProcess(() => process.env.ABLY_KEY, ''),
+    wsHost: isLocal ? 'localhost' : 'realtime-pusher.ably.io',
+    wsPort: isLocal ? 6001 : 443,
+    disableStats: true,
+    encrypted: true,
+    cluster: isLocal ? 'mt1' : 'eu',
+    authEndpoint: `${process.env.SERVER_BASE_URL}/broadcasting/auth`,
+    auth: {
+      headers: {
+        Authorization: accessToken
+      }
+    },
+
+    // Propriedades que só devem ser adicionas em localhost
+    ...(isLocal && { wssPort: 6001, forceTLS: false })
+  })
+}
+
+/**
+ * Função para setar o listener que vai enviar as mensagens via BroadcastChannel.postMessage
+ * para as demais abas.
+ *
+ * @param {{
+ *  user: { uuid: string },
+ *  channel: BroadcastChannel
+ * }} options
+ */
+export function setLaravelEchoListener ({ user, channel } = {}) {
+  window.Echo.private(`notifications.${user.uuid}`).listen('.notification', message => {
+    /**
+     * Como é um websocket, não passa pelo axios interceptor, logo é necessário
+     * transformar a resposta em camelCase manualmente.
+     */
+    channel.postMessage({ notification: camelizeKeys(message) })
+  })
+}

package/src/helpers/notifications-channels.js

@@ -0,0 +1,36 @@
+import { useNotifications } from 'asteroid'
+
+export function setNotificationsChannelListener () {
+  const {
+    incrementUnreadNotificationsCount,
+    sendNotify,
+    triggerNotification
+  } = useNotifications()
+
+  const notificationsChannel = new BroadcastChannel('notifications')
+
+  notificationsChannel.onmessage = ({ data: { notification } }) => {
+    // aciona o hook "onNotificationReceived".
+    triggerNotification(notification)
+
+    // dispara o "Notify" do Quasar.
+    sendNotify(notification)
+
+    // incrementa o contador "unreadNotificationsCount".
+    incrementUnreadNotificationsCount()
+  }
+}
+
+export function setNotificationsUtilsChannel () {
+  const { setUnreadNotificationsCount } = useNotifications()
+
+  const notificationsUtilsChannel = new BroadcastChannel('notifications--utils')
+
+  notificationsUtilsChannel.onmessage = ({ data: { type } }) => {
+    /**
+     * Se o botão "Marcar todas como lida" for acionado, então é zerado o "unreadNotificationsCount"
+     * em todas as abas.
+     */
+    if (type === 'markAllAsRead') setUnreadNotificationsCount(0)
+  }
+}

package/src/helpers/on-leader-election-channel.js

@@ -0,0 +1,23 @@
+/**
+ * Esta função é utilizada para estabelecer um padrão de 'leader election'
+ * em um contexto de múltiplas abas ou workers.
+ * Ela utiliza a API 'navigator.locks.request' para garantir que apenas uma instância
+ * (aba/worker) atue como líder.
+ * A função recebe um callback que é executado apenas pela instância líder.
+ *
+ * @param {function(BroadcastChannel): void} callbackFn
+ */
+export default function onLeaderElection (callbackFn) {
+  const notificationsChannel = new BroadcastChannel('notifications')
+
+  navigator.locks.request('leader-election', () => {
+    callbackFn(notificationsChannel)
+
+    /**
+     * Para que o leader election funcione, é necessário retornar uma Promise
+     * que nunca será resolvida, é necessário também declarar o callback "resolve",
+     * por mais que ele não seja utilizado.
+     */
+    return new Promise(_resolve => {})
+  })
+}

package/src/index.js

@@ -0,0 +1,159 @@
+import asteroidConfigHandler from './helpers/asteroid-config-handler.js'
+
+import ComponentsVite from 'unplugin-vue-components/vite'
+import ComponentsWebpack from 'unplugin-vue-components/webpack'
+import { pathToFileURL } from 'url'
+
+const sourcePath = '~@appnave/quasar-app-extension-asteroid/src/'
+const resolve = (...paths) => paths.map(path => sourcePath + path)
+
+function extendQuasar (quasar, api, asteroidConfigFile) {
+  // Arquivos de boot
+  // https://quasar.dev/quasar-cli-vite/boot-files#introduction
+  quasar.boot.push(...resolve(
+    'boot/overlay-navigation.js',
+    'boot/api.js',
+    'boot/debug.js',
+    'boot/error-pages.js',
+    'boot/font-face.js',
+    'boot/register.js',
+    'boot/loading.js',
+    'boot/query-cache.js',
+    'boot/store-adapter',
+    'boot/before-each.js'
+  ))
+
+  // controle das notificações
+  if (asteroidConfigFile.framework.featureToggle.useNotifications) {
+    quasar.boot.push(...resolve('boot/notifications'))
+  }
+
+  // Transpilação de arquivos!
+  if (api.hasWebpack) {
+    const transpileTarget = (
+      quasar.build.webpackTranspileDependencies || // q/app-webpack >= v4
+      quasar.build.transpileDependencies // q/app-webpack v3
+    )
+
+    transpileTarget.push(
+      /quasar-app-extension-asteroid[\\/]src/,
+      /@bildvitta[\\/]quasar-ui-asteroid[\\/]src/
+    )
+  }
+
+  // Adiciona todas classes do asteroid
+  quasar.css.push(...resolve('index.scss'))
+
+  // Adiciona todos os Plugins obrigatório do Quasar
+  const plugins = [
+    'Dialog',
+    'Loading',
+    'Notify'
+  ]
+
+  plugins.forEach(plugin => quasar.framework.plugins.push(plugin))
+
+  // Adiciona todas as classes de animação do Animate.css ao quasar
+  // https://animate.style/
+  const animations = [
+    'slideInDown',
+    'rubberBand',
+    'fadeIn'
+  ]
+
+  animations.forEach(animation => quasar.animations.push(animation))
+
+  // Configurações
+  quasar.extras.push(
+    'material-symbols-rounded'
+  )
+
+  quasar.framework.iconSet = 'material-symbols-rounded'
+  quasar.framework.lang = 'pt-BR'
+}
+
+export default async function (api) {
+  api.compatibleWith('quasar', '^2.0.0')
+  api.compatibleWith('date-fns', '^2.3.0')
+
+  const asteroid = 'node_modules/@appnave/quasar-ui-asteroid/src/asteroid.js'
+  const asteroidComponents = 'node_modules/@appnave/quasar-ui-asteroid/src/components'
+  const asteroidConfig = 'node_modules/@appnave/quasar-app-extension-asteroid/src/defaults/default-asteroid-config.js'
+  const vueRouter = 'node_modules/vue-router/dist/vue-router.esm-bundler.js'
+  const quasar = 'node_modules/quasar'
+
+  const { validate, getAsteroidConfigPath } = asteroidConfigHandler(api)
+
+  // valida se existe o arquivo de configuração do asteroid "asteroid.config.js"
+  validate()
+
+  const asteroidConfigPath = getAsteroidConfigPath()
+  const { default: asteroidConfigFile } = await import(pathToFileURL(asteroidConfigPath).href)
+
+  const unpluginVueComponentsConfig = {
+    dirs: [api.resolve.app(asteroidComponents)], // ajusta o path para a lib
+    extensions: ['vue'],
+    deep: true,
+    dts: false // desativa geração de types
+  }
+
+  const alias = {
+    'asteroid-config': api.resolve.app(asteroidConfig),
+    'asteroid-config-app': asteroidConfigPath,
+    'vue-router': api.resolve.app(vueRouter),
+    asteroid: api.resolve.app(asteroid),
+    quasar: api.resolve.app(quasar)
+  }
+
+  if (api.hasVite) {
+    api.compatibleWith('@quasar/app-vite', '^2.0.0')
+
+    api.extendViteConf(viteConf => {
+      Object.assign(viteConf.resolve.alias, alias)
+
+      // optimizeDeps (necessário para funcionamento do QasMap)
+      viteConf.optimizeDeps = viteConf.optimizeDeps || {}
+      viteConf.optimizeDeps.include = viteConf.optimizeDeps.include || []
+      viteConf.optimizeDeps.include.push(...[
+        '@fawmi/vue-google-maps',
+        'fast-deep-equal',
+        'humps',
+        'debug',
+        'pica',
+        'hammerjs',
+        'lodash-es',
+        'date-fns',
+        'date-fns/locale'
+      ])
+
+      viteConf.plugins = viteConf.plugins || []
+      viteConf.plugins.push(ComponentsVite(unpluginVueComponentsConfig))
+    })
+
+    api.extendQuasarConf(quasar => extendQuasar(quasar, api, asteroidConfigFile))
+
+    return
+  }
+
+  api.compatibleWith('@quasar/app', '^3.10.0 || ^4.0.0')
+
+  api.extendWebpack(webpack => {
+    Object.assign(webpack.resolve.alias, alias)
+
+    // Adiciona o plugin de componentes
+    webpack.plugins = webpack.plugins || []
+    webpack.plugins.push(ComponentsWebpack(unpluginVueComponentsConfig))
+
+    // Resolve o conflito de alias do "images" usado na lib leaflet.
+    webpack.module.rules.push({
+      test: /leaflet[\\/]dist[\\/].*\.css$/,
+      resolve: {
+        alias: {
+          images: api.resolve.app('node_modules/leaflet/dist/images')
+        }
+      }
+    })
+  })
+
+  api.extendQuasarConf(quasar => extendQuasar(quasar, api, asteroidConfigFile))
+}

package/src/index.scss

@@ -0,0 +1 @@
+@import '@appnave/quasar-ui-asteroid/src/index';

package/src/install.js

@@ -0,0 +1,21 @@
+export default function (api) {
+  api.onExitLog(`
+             _               _    _
+     __ _ __| |_ ___ _ _ ___(_)__| |
+    / _\` (_-<  _/ -_) '_/ _ \\ / _\` |
+    \\__,_/__/\\__\\___|_| \\___/_\\__,_|
+    ~+    INSTALAÇÃO CONCLUÍDA    +~
+  `)
+
+  // -------------------------- CSS: quasar.variables.scss --------------------------
+  api.renderFile(
+    './templates/css/quasar.variables.scss', // caminho do arquivo importado
+    'src/css/quasar.variables.scss' // caminho do arquivo que será criado no projeto
+  )
+
+  // -------------------------- JS: asteroid.config.js -------------------------------
+  api.renderFile(
+    './templates/js/asteroid.config.js', // caminho do arquivo importado
+    'asteroid.config.js' // caminho do arquivo que será criado no projeto
+  )
+}

package/src/prompts.js

@@ -0,0 +1,3 @@
+export default function () {
+  return []
+}

package/src/templates/css/quasar.variables.scss

@@ -0,0 +1,4 @@
+// Quasar SCSS (& Sass) Variables - Asteroid
+// --------------------------------------------------
+// NÃO MODIFIQUE ESTE ARQUIVO COM AS CONFIGURAÇÕES DO ASTEROID PRÉ DEFINIDAS!
+@import '@appnave/quasar-ui-asteroid/src/index';

package/src/templates/js/asteroid.config.js

@@ -0,0 +1,44 @@
+export default {
+  /**
+   * Configurações de API
+   * @type {{ serverTimeout: number=10000 }}
+  */
+  api: {
+    serverTimeout: 10000
+  },
+
+  framework: {
+    fonts: {
+      observer: {
+        /**
+         * O asteroid adiciona um observer nas fontes, enquanto ela não carrega adiciona um loading para
+         * não quebrar o layout, a configuração "waitForUserAuthenticate: true" define que o observer deve esperar
+         * o usuário estar autenticado para começar a observar as fontes, para isto a aplicação deve poder receber um
+         * "postMessage" com um evento type "requestUser" e responder com um evento type "responseUser".
+         *
+         * @type {boolean=true}
+         * @example
+         * // solicita o usuário
+         * window.postMessage({ type: 'requestUser' })
+         *
+         * window.addEventListener('message', ({ data }) => data.type // responseUser })
+       */
+        waitForUserAuthenticate: true
+      }
+    },
+
+    /**
+     * Controla o sistema de notificações da aplicação, ao ativado e configurado,
+     * estará disponível os seguintes recursos:
+     *
+     * - Item de notificação no componente QasAppUser;
+     * - Toast de notificação em real time;
+     * - Ícone de notificação no menu em real time.
+     *
+     * @type {{ useNotifications: boolean }}
+     */
+    featureToggle: {
+      useNotifications: false
+    }
+  }
+}

package/src/uninstall.js

@@ -0,0 +1,3 @@
+export default function (api) {
+  api.onExitLog('A extensão ASTEROID foi desinstalada. 😢')
+}