fix: incorrectly resetting islands ids in development (close #193)

ElMassimo · Sep 12, 2022 · 8c4bca6 · 8c4bca6
1 parent df8b793
commit 8c4bca6
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/packages/iles/src/client/app/components/Island.vue b/packages/iles/src/client/app/components/Island.vue
@@ -13,8 +13,11 @@ function trackIsland (this: any, { __ILE_DEVTOOLS__ }: any = window) {
   __ILE_DEVTOOLS__?.addIslandToDevtools(this)
 }
 
-function disposeIsland (this: any, { __ILE_DEVTOOLS__, __ILE_DISPOSE__ }: any = window) {
+function untrackIsland (this: any, { __ILE_DEVTOOLS__, __ILE_DISPOSE__ }: any = window) {
   __ILE_DEVTOOLS__?.removeIslandFromDevtools(this)
+}
+
+function disposeIsland (this: any, { __ILE_DEVTOOLS__, __ILE_DISPOSE__ }: any = window) {
   __ILE_DISPOSE__?.get(this.id)?.()
 }
 
@@ -68,6 +71,7 @@ export default defineComponent({
   mounted: trackIsland,
   beforeUpdate: disposeIsland,
   updated: trackIsland,
+  beforeUnmount: untrackIsland,
   unmounted: disposeIsland,
   render () {
     const isSSR = import.meta.env.SSR

diff --git a/packages/iles/src/client/app/composables/devtools.ts b/packages/iles/src/client/app/composables/devtools.ts
@@ -12,6 +12,8 @@ const componentStateTypes = [ISLAND_TYPE]
 const INSPECTOR_ID = 'iles'
 const HYDRATION_LAYER_ID = 'iles:hydration'
 
+// Internal: Used to present sequential island ids during development.
+let lastUsedIslandId = 0
 const islandsById = reactive<Record<string, ComponentPublicInstance>>({})
 const islands = computed(() => Object.values(islandsById))
 
@@ -54,9 +56,18 @@ const devtools = {
 
   removeIslandFromDevtools (island: any) {
     delete islandsById[island.id]
+
+    // NOTE: Vue could unmount ile-1 before ile-2, so check for unused ids.
+    while (lastUsedIslandId > 0 && !islandsById[`ile-${lastUsedIslandId}`])
+      lastUsedIslandId -= 1
+
     devtools.updateIslandsInspector()
   },
 
+  nextIslandId () {
+    return `ile-${++lastUsedIslandId}`
+  },
+
   onHydration ({ id, ...event }: any) {
     const time = Date.now()
     const island: any = islandsById[id]

diff --git a/packages/iles/src/client/app/hydration.ts b/packages/iles/src/client/app/hydration.ts
@@ -6,20 +6,14 @@ import {
   hydrateWhenVisible,
 } from '@islands/hydration'
 
-let idNumber = 0
-
-export function resetHydrationId () {
-  idNumber = 0
-}
-
 export function newHydrationId () {
   if (import.meta.env.SSR) {
     const context = useSSRContext()
     context!.hydrationSerialNumber ||= 1
     return `ile-${context!.hydrationSerialNumber++}`
   }
-  else {
-    return `ile-${++idNumber}`
+  else if (import.meta.env.DEV) {
+    return (window as any).__ILE_DEVTOOLS__.nextIslandId()
   }
 }
 

diff --git a/packages/iles/src/client/app/index.ts b/packages/iles/src/client/app/index.ts
@@ -11,7 +11,6 @@ import App from './components/App.vue'
 import { installPageData, forcePageUpdate } from './composables/pageData'
 import { installMDXComponents } from './composables/mdxComponents'
 import { installAppConfig } from './composables/appConfig'
-import { resetHydrationId } from './hydration'
 import { defaultHead } from './head'
 import { resolveLayout } from './layout'
 import { resolveProps } from './props'
@@ -91,7 +90,6 @@ if (!import.meta.env.SSR) {
     devtools.installDevtools(app as any, config)
     Object.assign(window, { __ILES_PAGE_UPDATE__: forcePageUpdate })
 
-    router.afterEach(resetHydrationId) // reset island identifiers to match ssg.
     await router.isReady() // wait until page component is fetched before mounting
     app.mount('#app', true)
   })()