From 50dbe9aeb657bbc0d314392a722fc180d70f1171 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 27 Mar 2024 00:13:56 +0800
Subject: [PATCH] fix(ui): broken @rive dependencies (#127)

* fix(ui): broken @rive dependencies

Signed-off-by: Neko Ayaka <neko@ayaka.moe>

* fix(git-changelog): broken external dependencies

Signed-off-by: Neko Ayaka <neko@ayaka.moe>

---------

Signed-off-by: Neko Ayaka <neko@ayaka.moe>
---
 .gitignore                                      |  2 ++
 docs/.vitepress/theme/index.ts                  |  2 ++
 packages/ui/package.json                        |  1 +
 .../ui/src/components/NuLazyDOMRiveCanvas.vue   | 17 +++++++++--------
 packages/ui/src/index.ts                        | 10 +++++-----
 .../src/vite/git.ts                             |  5 +++++
 6 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/.gitignore b/.gitignore
index 205e3f73..4a9bd161 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,5 @@ node_modules
 
 **/.netlify/*
 **/.netlify/functions-serve/*
+
+.npmrc
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 543473c2..c988fda2 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -6,6 +6,8 @@ import { NuLazyDOMRiveCanvas } from '@nolebase/ui'
 import IntegrationCard from './components/IntegrationCard.vue'
 import HomeContent from './components/HomeContent.vue'
 
+import 'virtual:uno.css'
+
 import './styles/vars.css'
 import './styles/main.css'
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2343a102..1ded7511 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -66,6 +66,7 @@
     "package:publish": "pnpm build && pnpm publish --access public --no-git-checks"
   },
   "peerDependencies": {
+    "@rive-app/canvas-lite": "^2.10.0",
     "vue": "^3.2.0"
   },
   "dependencies": {
diff --git a/packages/ui/src/components/NuLazyDOMRiveCanvas.vue b/packages/ui/src/components/NuLazyDOMRiveCanvas.vue
index 66c7b972..53609253 100644
--- a/packages/ui/src/components/NuLazyDOMRiveCanvas.vue
+++ b/packages/ui/src/components/NuLazyDOMRiveCanvas.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute } from 'vitepress'
-import * as RiveCanvas from '@rive-app/canvas-lite'
+import type { Rive } from '@rive-app/canvas-lite'
 
 const route = useRoute()
-const riveInstances = ref<RiveCanvas.Rive[]>([])
+const riveInstances = ref<Rive[]>([])
 
 const defaultCreateCanvasOptions = {
   canvasWidth: 500,
@@ -102,7 +102,7 @@ function createNewCanvasElement(options: CreateCanvasOptions) {
   return canvas
 }
 
-function renderRiveAsset() {
+async function renderRiveAsset() {
   const elementsRaw = document.querySelectorAll('.rive-canvas[data-rive-canvas="true"]')
   if (!elementsRaw || !elementsRaw.length)
     return
@@ -126,21 +126,22 @@ function renderRiveAsset() {
 
     el.appendChild(canvas)
 
-    const rive = new RiveCanvas.Rive({
+    const rive = await import('@rive-app/canvas-lite')
+    const r = new rive.Rive({
       canvas,
       src: src.value,
       autoplay: true,
     })
 
-    riveInstances.value.push(rive)
+    riveInstances.value.push(r)
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
   if (!window && !document)
     return
 
-  renderRiveAsset()
+  await renderRiveAsset()
 })
 
 watch(route, async () => {
@@ -148,7 +149,7 @@ watch(route, async () => {
     return
 
   await nextTick()
-  renderRiveAsset()
+  await renderRiveAsset()
 })
 
 onUnmounted(() => {
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index b7067101..016750d9 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -4,11 +4,11 @@ import NuButton from './components/NuButton.vue'
 import NuLazyDOMRiveCanvas from './components/NuLazyDOMRiveCanvas.vue'
 import NuVerticalTransition from './components/NuVerticalTransition.vue'
 
-import 'virtual:uno.css'
-
-export { default as NuButton } from './components/NuButton.vue'
-export { default as NuLazyDOMRiveCanvas } from './components/NuLazyDOMRiveCanvas.vue'
-export { default as NuVerticalTransition } from './components/NuVerticalTransition.vue'
+export {
+  NuButton,
+  NuLazyDOMRiveCanvas,
+  NuVerticalTransition,
+}
 
 export function install(app: App): void {
   app.component('NuButton', NuButton)
diff --git a/packages/vitepress-plugin-git-changelog/src/vite/git.ts b/packages/vitepress-plugin-git-changelog/src/vite/git.ts
index 14797015..6111f5fc 100644
--- a/packages/vitepress-plugin-git-changelog/src/vite/git.ts
+++ b/packages/vitepress-plugin-git-changelog/src/vite/git.ts
@@ -170,6 +170,11 @@ export function GitChangelog(options: {
       ssr: {
         noExternal: [
           '@nolebase/vitepress-plugin-git-changelog',
+          // @nolebase/ui required here as noExternal to avoid the following error:
+          // TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".vue" for ...
+          // Read more here: https://github.com/vuejs/vitepress/issues/2915
+          // And here: https://stackblitz.com/edit/vite-gjz9zf?file=docs%2F.vitepress%2Fconfig.ts
+          '@nolebase/ui',
         ],
       },
     }),