[Bug] ssg/ssr not rendering correctly (#233)

* fix avatar rendering issue * add nuxt playground to demo ssr * fix requestAnimationFrame throwing error * fix element selected even though undefined * fix navigation menu not updating position for indicator correctly
unovue · Jul 23, 2023 · 6146b06 · 6146b06
1 parent dc9fcc9
commit 6146b06
Show file tree

Hide file tree

Showing 47 changed files with 10,443 additions and 13 deletions.
diff --git a/packages/radix-vue/src/Avatar/Avatar.story.vue b/packages/radix-vue/src/Avatar/Avatar.story.vue
@@ -3,7 +3,7 @@ import { AvatarFallback, AvatarImage, AvatarRoot } from "./";
 </script>
 
 <template>
-  <Story title="Avatar" :layout="{ type: 'single', iframe: true }">
+  <Story title="Avatar">
     <Variant title="default">
       <AvatarRoot
         class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle"
@@ -34,6 +34,20 @@ import { AvatarFallback, AvatarImage, AvatarRoot } from "./";
           JD
         </AvatarFallback>
       </AvatarRoot>
+      <AvatarRoot
+        class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle"
+      >
+        <AvatarImage
+          class="h-full w-full rounded-[inherit] object-cover"
+          src="https://www.radix-vue.com/og.png"
+          alt="Pedro Duarte"
+        />
+        <AvatarFallback
+          class="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
+        >
+          RD
+        </AvatarFallback>
+      </AvatarRoot>
       <AvatarRoot
         class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle"
       >

diff --git a/packages/radix-vue/src/Avatar/AvatarImage.vue b/packages/radix-vue/src/Avatar/AvatarImage.vue
@@ -5,22 +5,34 @@ export interface AvatarImageProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject } from "vue";
+import { inject, useAttrs, watch } from "vue";
 import {
   AVATAR_INJECTION_KEY,
   type AvatarProvideValue,
 } from "./AvatarRoot.vue";
 import { PrimitiveImg, type PrimitiveProps } from "../Primitive";
+import { useImageLoadingStatus } from "./utils";
 
 const injectedValue = inject<AvatarProvideValue>(AVATAR_INJECTION_KEY);
 
 const props = defineProps<AvatarImageProps>();
+const src = useAttrs().src as string;
+const imageLoadingStatus = useImageLoadingStatus(src);
 
-function setImageLoad() {
-  injectedValue!.imageLoadingStatus.value = "loaded";
-}
+watch(
+  imageLoadingStatus,
+  (newValue) => {
+    if (newValue !== "idle") injectedValue!.imageLoadingStatus.value = newValue;
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
-  <PrimitiveImg :as-child="props.asChild" @load="setImageLoad" />
+  <PrimitiveImg
+    v-if="imageLoadingStatus === 'loaded'"
+    :as-child="props.asChild"
+  >
+    <slot></slot>
+  </PrimitiveImg>
 </template>
diff --git a/packages/radix-vue/src/Avatar/AvatarRoot.vue b/packages/radix-vue/src/Avatar/AvatarRoot.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
 import type { Ref, InjectionKey } from "vue";
-
-type ImageLoadingStatus = "loading" | "loaded";
+import type { ImageLoadingStatus } from "./utils";
 
 export interface AvatarRootProps extends PrimitiveProps {}
 

diff --git a/packages/radix-vue/src/Avatar/utils.ts b/packages/radix-vue/src/Avatar/utils.ts
@@ -0,0 +1,33 @@
+import { onMounted, onUnmounted, ref } from "vue";
+
+export type ImageLoadingStatus = "idle" | "loading" | "loaded" | "error";
+
+export function useImageLoadingStatus(src?: string) {
+  const loadingStatus = ref<ImageLoadingStatus>("idle");
+  const isMounted = ref(false);
+  onMounted(() => {
+    if (!src) {
+      loadingStatus.value = "error";
+      return;
+    }
+
+    isMounted.value = true;
+    const image = new window.Image();
+
+    const updateStatus = (status: ImageLoadingStatus) => () => {
+      if (!isMounted.value) return;
+      loadingStatus.value = status;
+    };
+
+    loadingStatus.value = "loading";
+    image.onload = updateStatus("loaded");
+    image.onerror = updateStatus("error");
+    image.src = src;
+  });
+
+  onUnmounted(() => {
+    isMounted.value = false;
+  });
+
+  return loadingStatus;
+}
diff --git a/packages/radix-vue/src/Collapsible/CollapsibleContent.vue b/packages/radix-vue/src/Collapsible/CollapsibleContent.vue
@@ -3,7 +3,7 @@ export interface CollapsibleContentProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, ref, watch } from "vue";
+import { computed, inject, nextTick, onMounted, ref, watch } from "vue";
 import {
   COLLAPSIBLE_INJECTION_KEY,
   type CollapsibleProvideValue,
@@ -61,8 +61,10 @@ watch(
   }
 );
 
-requestAnimationFrame(() => {
-  isMountAnimationPrevented.value = false;
+onMounted(() => {
+  requestAnimationFrame(() => {
+    isMountAnimationPrevented.value = false;
+  });
 });
 
 defineOptions({

diff --git a/packages/radix-vue/src/Menubar/MenubarTrigger.vue b/packages/radix-vue/src/Menubar/MenubarTrigger.vue
@@ -108,7 +108,7 @@ const dataState = computed(() => {
 
 const highlightedState = computed(() => {
   return (
-    activeElement.value === currentElement.value ||
+    (activeElement.value && activeElement.value === currentElement.value) ||
     (rootInjectedValue?.triggerElement.value === currentElement.value &&
       rootInjectedValue?.selectedElement.value)
   );

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
@@ -48,7 +48,7 @@ const handlePositionChange = () => {
   }
 };
 
-// useResizeObserver(activeTrigger, handlePositionChange);
+useResizeObserver(activeTrigger, handlePositionChange);
 useResizeObserver(context!.indicatorTrack, handlePositionChange);
 </script>
 

diff --git a/playground/nuxt/.gitignore b/playground/nuxt/.gitignore
@@ -0,0 +1,23 @@
+# Nuxt dev/build outputs
+.output
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
diff --git a/playground/nuxt/.npmrc b/playground/nuxt/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/playground/nuxt/README.md b/playground/nuxt/README.md
@@ -0,0 +1,63 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/playground/nuxt/app.vue b/playground/nuxt/app.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import Card from "./components/Card.vue";
+</script>
+
+<template>
+  <div class="w-full flex flex-col items-center">
+    <div class="max-w-6xl w-full grid grid-cols-3 gap-4 pt-40 pb-40">
+      <Card>
+        <AccordionDemo />
+      </Card>
+      <Card>
+        <AlertDialogDemo />
+      </Card>
+      <Card>
+        <AspectRatioDemo />
+      </Card>
+      <Card>
+        <AvatarDemo />
+      </Card>
+      <Card>
+        <CheckboxDemo />
+      </Card>
+      <Card>
+        <CollapsibleDemo />
+      </Card>
+      <Card>
+        <ScrollAreaDemo />
+      </Card>
+      <Card class="col-span-2">
+        <ContextMenuDemo />
+      </Card>
+      <Card class="col-span-2">
+        <DialogDemo />
+      </Card>
+      <Card>
+        <DropdownMenuDemo />
+      </Card>
+      <Card>
+        <MenubarDemo />
+      </Card>
+      <Card class="col-span-2">
+        <NavigationMenuDemo />
+      </Card>
+      <Card>
+        <HoverCardDemo />
+      </Card>
+      <Card>
+        <LabelDemo />
+      </Card>
+      <Card>
+        <PopoverDemo />
+      </Card>
+      <Card>
+        <ProgressDemo />
+      </Card>
+      <Card>
+        <RadioGroupDemo />
+      </Card>
+      <Card>
+        <SelectDemo />
+      </Card>
+      <Card>
+        <SelectMultipleDemo />
+      </Card>
+      <Card>
+        <SeparatorDemo />
+      </Card>
+      <Card>
+        <SliderDemo />
+      </Card>
+      <Card>
+        <SwitchDemo />
+      </Card>
+      <Card>
+        <TabsDemo />
+      </Card>
+      <Card>
+        <ToggleDemo />
+      </Card>
+      <Card>
+        <ToggleGroupDemo />
+      </Card>
+      <Card class="col-span-2">
+        <ToolbarDemo />
+      </Card>
+      <Card>
+        <TooltipDemo />
+      </Card>
+    </div>
+  </div>
+</template>
+
+<style>
+body {
+  @apply bg-black text-white;
+}
+
+[data-radix-popper-content-wrapper] {
+  @apply z-[1000];
+}
+</style>