fix(ui): broken @rive dependencies (#127)

* fix(ui): broken @rive dependencies Signed-off-by: Neko Ayaka <[email protected]> * fix(git-changelog): broken external dependencies Signed-off-by: Neko Ayaka <[email protected]> --------- Signed-off-by: Neko Ayaka <[email protected]>
nolebase · Mar 26, 2024 · 50dbe9a · 50dbe9a
1 parent a9cd090
commit 50dbe9a
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,29 +126,30 @@ 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 () => {
   if (!window && !document)
     return
 
   await nextTick()
-  renderRiveAsset()
+  await renderRiveAsset()
 })
 
 onUnmounted(() => {

diff --git 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
@@ -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',
         ],
       },
     }),
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,3 +17,5 @@ node_modules

		*/.netlify/
		*/.netlify/functions-serve/

		.npmrc