@dargmuesli/nuxt-vio 20.1.5 → 21.0.0-beta.2

package/app/components/vio/button/VioButtonShare.vue

@@ -1,7 +1,7 @@
 <template>
   <span v-if="url" class="flex items-center gap-2">
     <slot />
-    <VioButtonColored :aria-label="t('share')" @click="copy(url)">
+    <VioButtonColored :aria-label="t('share')" @click="copy2(url)">
       <template #prefix>
         <VioIconShare />
       </template>
@@ -19,17 +19,21 @@ interface Props {
 withDefaults(defineProps<Props>(), {})
 
 const { t } = useI18n()
+const { copy } = useCopy()
+const alertError = useAlertError()
 
 // methods
-const copy = async (string: string) => {
+const copy2 = async (string: string) => {
   if (typeof window === 'undefined') return
 
   try {
-    await copyText(string)
+    await copy(string)
     toast.success(t('donationUrlCopySuccess'))
   } catch (error: unknown) {
-    console.error(error)
-    alert(t('donationUrlCopyError'))
+    alertError({
+      ...(error instanceof Error ? { error } : {}),
+      messageI18n: t('donationUrlCopyError'),
+    })
   }
 }
 </script>

package/app/composables/dateTime.ts

@@ -1,3 +1,5 @@
+import { useNow as useNowVueUse, syncRef } from '@vueuse/core'
+
 export const useTimeZone = () =>
   useNuxtApp().ssrContext?.event.context.$timeZone ||
   useCookie(TIMEZONE_COOKIE_NAME, {
@@ -9,15 +11,47 @@ export const useTimeZone = () =>
     ? Intl.DateTimeFormat().resolvedOptions().timeZone
     : undefined)
 
-export const useNow = () => useState(STATE_KEY_NOW, () => new Date())
+// TODO: evaluate custom scheduler (https://github.com/vueuse/vueuse/pull/5129)
+export const useNow = (options?: { live?: boolean }) => {
+  const { live = true } = options || {}
+
+  const nowState = useState(STATE_KEY_NOW, () => new Date())
+
+  if (live) {
+    const now = useNowVueUse()
+    syncRef(now, nowState, { direction: 'ltr', immediate: false })
+  }
+
+  return nowState
+}
+
+// TODO: import from vueuse once reactive locale can be passed in (no issue or PR created yet)
+export const useTimeAgoIntl = (options: {
+  live?: boolean
+  to: MaybeRef<Date>
+}) => {
+  const { live = true, to } = options
+
+  const { locale } = useI18n({ useScope: 'global' })
+  const now = useNow({ live })
+
+  const formatter = computed(
+    () =>
+      new Intl.RelativeTimeFormat(locale.value, {
+        numeric: 'auto',
+      }),
+  )
+
+  const toAsRef = toRef(to)
+  const fromTo = computed(() =>
+    getFromTo(now.value, toAsRef.value, formatter.value),
+  )
 
-export const useFromNow = () => {
-  const { locale } = useI18n()
-  const now = useNow()
+  const fromToState = useState(STATE_KEY_FROM_TO, () => fromTo)
 
-  const formatter = new Intl.RelativeTimeFormat(locale.value, {
-    numeric: 'auto',
-  })
+  if (live) {
+    syncRef(fromTo, fromToState, { direction: 'ltr', immediate: false })
+  }
 
-  return (to: Date) => getFromTo(now.value, to, formatter)
+  return fromToState
 }

package/nuxt.config.ts

@@ -1,7 +1,5 @@
-import { fileURLToPath } from 'node:url'
-import { dirname, join } from 'node:path'
-
 import tailwindcss from '@tailwindcss/vite'
+import { createResolver } from 'nuxt/kit'
 import { defu } from 'defu'
 
 import {
@@ -13,7 +11,7 @@ import {
 } from './shared/utils/constants'
 import { VIO_NUXT_BASE_CONFIG } from './shared/utils/nuxt'
 
-const currentDir = dirname(fileURLToPath(import.meta.url))
+const { resolve } = createResolver(import.meta.url)
 
 export default defineNuxtConfig(
   defu(
@@ -29,7 +27,7 @@ export default defineNuxtConfig(
         },
       },
       compatibilityDate: '2024-04-03',
-      ...(process.env.NUXT_PUBLIC_SITE_URL
+      ...(process.env.NUXT_PUBLIC_I18N_BASE_URL
         ? {}
         : {
             devServer: {
@@ -114,6 +112,13 @@ export default defineNuxtConfig(
       },
       typescript: {
         tsConfig: {
+          nodeTsConfig: {
+            include: [
+              resolve('../.config'),
+              resolve('../node'),
+              // resolve('../sentry.server.config.ts'),
+            ],
+          },
           vueCompilerOptions: {
             htmlAttributes: [], // https://github.com/johnsoncodehk/volar/issues/1970#issuecomment-1276994634
           },
@@ -273,13 +278,14 @@ export default defineNuxtConfig(
       },
       shadcn: {
         prefix: '',
-        componentDir: join(currentDir, './app/components/scn'),
+        componentDir: resolve('./app/components/scn'),
       },
       site: {
         url: SITE_URL,
       },
       sitemap: {
         credits: false,
+        zeroRuntime: true,
       },
 
       // environments

package/package.json

@@ -23,7 +23,6 @@
     "@vuelidate/validators": "2.0.4",
     "@vueuse/core": "14.1.0",
     "class-variance-authority": "0.7.1",
-    "clipboardy": "5.0.2",
     "clsx": "2.1.1",
     "eslint": "9.39.2",
     "eslint-config-prettier": "10.1.8",
@@ -95,9 +94,8 @@
   },
   "scripts": {
     "build": "pnpm run build:node",
-    "build:node": "nuxt build playground",
-    "build:static": "nuxt generate playground",
-    "build:static:test": "SITE_URL=https://localhost:3002 pnpm run build:static",
+    "build:node": "NUXT_PUBLIC_I18N_BASE_URL=https://localhost:3001 nuxt build playground",
+    "build:static": "NUXT_PUBLIC_I18N_BASE_URL=https://localhost:3002 nuxt generate playground",
     "dev": "pnpm run start:dev",
     "generate": "pnpm run build:static",
     "lint": "pnpm run lint:js && pnpm run lint:ts && pnpm run lint:style",
@@ -110,9 +108,9 @@
     "preview": "nuxt preview playground",
     "start": "pnpm run start:node",
     "start:dev": "nuxt dev playground",
-    "start:node": "node playground/.output/server/index.mjs",
+    "start:node": "node scripts/server.mjs",
     "start:static": "serve playground/.output/public --ssl-cert ./.config/certificates/ssl.crt --ssl-key ./.config/certificates/ssl.key"
   },
   "type": "module",
-  "version": "20.1.5"
+  "version": "21.0.0-beta.2"
 }

package/server/utils/constants.ts

@@ -1,3 +1 @@
-import { IS_IN_PRODUCTION, IS_IN_STACK } from '../../node'
-
-export const IS_IN_FRONTEND_DEVELOPMENT = !IS_IN_PRODUCTION && !IS_IN_STACK
+export { IS_IN_FRONTEND_DEVELOPMENT } from '../../node'

package/server/utils/site.ts

@@ -1,6 +1,6 @@
 export const useSiteUrl = () => {
   const runtimeConfig = useRuntimeConfig()
-  const siteUrl = runtimeConfig.public.site?.url
+  const siteUrl = runtimeConfig.public.i18n.baseUrl
 
   return {
     siteUrl,

package/shared/utils/constants.ts

@@ -5,8 +5,7 @@ import { defu } from 'defu'
 export const VIO_SITE_NAME = 'Vio'
 
 export const SITE_URL =
-  process.env.SITE_URL ||
-  process.env.NUXT_PUBLIC_SITE_URL ||
+  process.env.NUXT_PUBLIC_I18N_BASE_URL ||
   `https://${process.env.HOST || 'localhost'}:${process.env.PORT || '3000'}`
 export const CACHE_VERSION = 'zeMtipb6C9'
 export const COOKIE_CONTROL_CONSENT_COOKIE_NAME =
@@ -157,6 +156,7 @@ export const POLYFILLS = [
 export const REGEX_UUID =
   /^[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}$/
 export const STATE_KEY_NOW = 'dateTimeNow'
+export const STATE_KEY_FROM_TO = 'dateTimeFromTo'
 export const TESTING_COOKIE_NAME = 'vio_is-testing'
 export const TIMEZONE_COOKIE_NAME = [COOKIE_PREFIX, 'tz'].join(COOKIE_SEPARATOR)
 export const TIMEZONE_HEADER_KEY = `X-${VIO_SITE_NAME}-Timezone`

package/shared/utils/nuxt.ts

@@ -1,5 +1,6 @@
 import type { defineNuxtConfig } from 'nuxt/config'
 
+import { IS_IN_FRONTEND_DEVELOPMENT } from '../../node'
 import { I18N_MODULE_CONFIG } from './constants'
 
 export const VIO_NUXT_BASE_CONFIG = ({
@@ -20,11 +21,9 @@ export const VIO_NUXT_BASE_CONFIG = ({
         vio: {
           ...(stagingHost
             ? {
-                stagingHost:
-                  process.env.NODE_ENV !== 'production' &&
-                  !process.env.NUXT_PUBLIC_SITE_URL
-                    ? stagingHost
-                    : undefined,
+                stagingHost: IS_IN_FRONTEND_DEVELOPMENT
+                  ? stagingHost
+                  : undefined,
               }
             : {}),
         },

package/node.ts

@@ -1,2 +0,0 @@
-export const IS_IN_PRODUCTION = process.env.NODE_ENV === 'production'
-export const IS_IN_STACK = !!process.env.NUXT_PUBLIC_SITE_URL

package/shared/utils/text.ts

@@ -1,2 +0,0 @@
-export const copyText = async (text: string) =>
-  (await import('clipboardy')).default.write(text)