Implement infinite scroll

.github/workflows/push.yml

@@ -34,12 +34,16 @@ jobs:
       fail-fast: false
       matrix:
         ruby: ['3.0', '3.1', '3.2', '3.3']
-        rails: ['6.1', '7.0', '7.1', '7.2', '8.0']
+        rails: ['6.1', '7.0', '7.1', '7.2', '8.0', '8.1']
         exclude:
           - ruby: '3.0'
             rails: '8.0'
           - ruby: '3.1'
             rails: '8.0'
+          - ruby: '3.0'
+            rails: '8.1'
+          - ruby: '3.1'
+            rails: '8.1'
           - ruby: '3.0'
             rails: '7.2'
           - ruby: '3.1'
@@ -63,9 +67,7 @@ jobs:
         uses: ruby/setup-ruby@v1
         with:
           ruby-version: ${{ matrix.ruby }}
-          # Use the latest version of RubyGems with Ruby 3.0 to avoid:
-          # https://bugs.ruby-lang.org/issues/19371
-          rubygems: ${{ startsWith(matrix.ruby-version, '3.0') && 'latest' || 'default' }}
+          rubygems: latest
           bundler-cache: true
         env:
           RAILS_VERSION:  ${{ matrix.rails }}

Gemfile

@@ -5,7 +5,7 @@ source 'https://rubygems.org'
 # Specify your gem's dependencies in inertia_rails.gemspec
 gemspec
 
-version = ENV['RAILS_VERSION'] || '8.0'
+version = ENV.fetch('RAILS_VERSION', '8.1')
 gem 'rails', "~> #{version}.0"
 
 gem 'bundler', '~> 2.0'
@@ -17,3 +17,6 @@ gem 'responders'
 gem 'rspec-rails', '~> 6.0'
 gem 'rubocop', '~> 1.21'
 gem 'sqlite3'
+
+gem 'kaminari'
+gem 'pagy'

docs/.vitepress/config.mts

@@ -127,6 +127,7 @@ export default defineConfig({
             { text: 'Prefetching', link: '/guide/prefetching' },
             { text: 'Load when visible', link: '/guide/load-when-visible' },
             { text: 'Merging props', link: '/guide/merging-props' },
+            { text: 'Infinite scroll', link: '/guide/infinite-scroll' },
             { text: 'Remembering state', link: '/guide/remembering-state' },
           ],
         },

docs/.vitepress/theme/components/Opt.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useTabsSelectedState } from '../composables/useTabsSelectedState'
+
+const props = defineProps<{
+  v: string
+}>()
+
+// Use the shared tabs state system
+const acceptValues = ref(['Vue', 'React', 'Svelte 4', 'Svelte 5'])
+const sharedStateKey = ref('frameworks')
+
+const { selected } = useTabsSelectedState(acceptValues, sharedStateKey)
+
+const shouldShow = computed(() => {
+  if (!selected.value) return false
+
+  // Handle multiple values separated by pipe (|)
+  const values = props.v.split('|').map((v) => v.trim())
+  return values.includes(selected.value)
+})
+</script>
+
+<template>
+  <span v-if="shouldShow" class="opt-text">
+    <slot></slot>
+  </span>
+</template>
+
+<style scoped>
+.opt-text {
+  display: inline;
+}
+</style>

docs/.vitepress/theme/components/React.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="React">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/Svelte.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="Svelte 4|Svelte 5">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/Svelte4.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="Svelte 4">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/Svelte5.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="Svelte 5">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/Vue.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="Vue">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/index.ts

@@ -1,3 +1,9 @@
 import AvailableSince from './AvailableSince.vue'
+import Opt from './Opt.vue'
+import React from './React.vue'
+import Svelte from './Svelte.vue'
+import Svelte4 from './Svelte4.vue'
+import Svelte5 from './Svelte5.vue'
+import Vue from './Vue.vue'
 
-export { AvailableSince }
+export { AvailableSince, Opt, React, Svelte, Svelte4, Svelte5, Vue }

docs/.vitepress/theme/composables/useTabsSelectedState.ts

@@ -0,0 +1,78 @@
+import type { InjectionKey, Ref } from 'vue'
+import { computed, inject, onMounted, ref } from 'vue'
+
+type TabsSharedState = {
+  content?: TabsSharedStateContent
+}
+type TabsSharedStateContent = Record<string, string>
+
+// Use the same injection key as the original vitepress-plugin-tabs
+const injectionKey: InjectionKey<TabsSharedState> =
+  'vitepress:tabSharedState' as unknown as symbol
+const ls = typeof localStorage !== 'undefined' ? localStorage : null
+const localStorageKey = 'vitepress:tabsSharedState'
+
+const getLocalStorageValue = (): TabsSharedStateContent => {
+  const rawValue = ls?.getItem(localStorageKey)
+  if (rawValue) {
+    try {
+      return JSON.parse(rawValue)
+    } catch {}
+  }
+  return {}
+}
+
+export const useTabsSelectedState = <T extends string>(
+  acceptValues: Ref<T[]>,
+  sharedStateKey: Ref<string | undefined>,
+) => {
+  const sharedState = inject(injectionKey)
+  if (!sharedState) {
+    throw new Error(
+      '[vitepress-plugin-tabs] TabsSharedState should be injected',
+    )
+  }
+
+  onMounted(() => {
+    if (!sharedState.content) {
+      sharedState.content = getLocalStorageValue()
+    }
+  })
+
+  const nonSharedState = ref<T | undefined>()
+
+  const selected = computed({
+    get() {
+      const key = sharedStateKey.value
+      const acceptVals = acceptValues.value
+      if (key) {
+        const value = sharedState.content?.[key]
+        if (value && (acceptVals as string[]).includes(value)) {
+          return value as T
+        }
+      } else {
+        const nonSharedStateVal = nonSharedState.value
+        if (nonSharedStateVal) {
+          return nonSharedStateVal
+        }
+      }
+      return acceptVals[0]
+    },
+    set(v) {
+      const key = sharedStateKey.value
+      if (key) {
+        if (sharedState.content) {
+          sharedState.content[key] = v
+        }
+      } else {
+        nonSharedState.value = v
+      }
+    },
+  })
+
+  const select = (newValue: T) => {
+    selected.value = newValue
+  }
+
+  return { selected, select }
+}

docs/.vitepress/theme/index.ts

@@ -3,7 +3,15 @@ import type { Theme } from 'vitepress'
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
 import DefaultTheme from 'vitepress/theme'
 import { h } from 'vue'
-import { AvailableSince } from './components'
+import {
+  AvailableSince,
+  Opt,
+  React,
+  Svelte,
+  Svelte4,
+  Svelte5,
+  Vue,
+} from './components'
 import { setupFrameworksTabs } from './frameworksTabs'
 import './style.css'
 
@@ -17,6 +25,12 @@ export default {
   enhanceApp({ app, router, siteData }) {
     enhanceAppWithTabs(app)
     app.component('AvailableSince', AvailableSince)
+    app.component('Opt', Opt)
+    app.component('React', React)
+    app.component('Vue', Vue)
+    app.component('Svelte', Svelte)
+    app.component('Svelte4', Svelte4)
+    app.component('Svelte5', Svelte5)
   },
   setup() {
     setupFrameworksTabs()

docs/guide/code-splitting.md

@@ -4,7 +4,7 @@ Code splitting breaks apart the various pages of your application into smaller b
 
 While code splitting is helpful for very large projects, it does require extra requests when visiting new pages. Generally speaking, if you're able to use a single bundle, your app is going to feel snappier.
 
-To enable code splitting you'll need to tweak the resolve callback in your `createInertiaApp()` configuration, and how you do this is different depending on which bundler you're using.
+To enable code splitting, you will need to tweak the `resolve` callback in your `createInertiaApp()` configuration, and how you do this is different depending on which bundler you're using.
 
 ## Using Vite
 

docs/guide/error-handling.md

@@ -131,13 +131,13 @@ export default function ErrorPage({ status }) {
 ```svelte
 <script>
   let { status } = $props()
-  const titles = {
+  const title = {
     503: '503: Service Unavailable',
     500: '500: Server Error',
     404: '404: Page Not Found',
     403: '403: Forbidden',
   }
-  const descriptions = {
+  const description = {
     503: 'Sorry, we are doing some maintenance. Please check back soon.',
     500: 'Whoops, something went wrong on our servers.',
     404: 'Sorry, the page you are looking for could not be found.',
@@ -146,7 +146,7 @@ export default function ErrorPage({ status }) {
 </script>
 
 <div>
-  <h1>{titles[status]}</h1>
+  <h1>{title[status]}</h1>
   <div>{description[status]}</div>
 </div>
 ```