docs: refactor <UiFrameworkExtension> (#1665)

* minor refactor: rename <UiFrameworkVikeExtensionNames => <UiFrameworkVikeExtension name

* minor refactor: rename UiFrameworkVikeExtensionNames => UiFrameworkVikeExtension

* dedupe import

* update UiFrameworkVikeExtension impl

* minor refactor: rename UiFrameworkVikeExtension => UiFrameworkExtension

* remove unused imports

* minor refactor: rename UiFrameworkExtension name => UiFrameworkExtension name noLink

* minor refactor: rename  noLink links =>

* update UiFrameworExtension impl

* minor refactor: rename <UiFrameworkExtension\/> => <UiFrameworkExtension \/>

* minor refactor: rename <UiFrameworkExtension name\/> => <UiFrameworkExtension name \/>

* minor refactor

docs/components/DefaultRouting.mdx

@@ -1,4 +1,4 @@
 import { Link } from '@brillout/docpress'
-import { UiFrameworkVikeExtension } from '../components'
+import { UiFrameworkExtension } from '../components'
 
-> The <UiFrameworkVikeExtension plural /> use Client Routing. If you don't use such Vike extension, then Vike does Server Routing by default while you can <Link href="/clientRouting">opt into Client Routing</Link>.
+> The <UiFrameworkExtension plural /> use Client Routing. If you don't use such Vike extension, then Vike does Server Routing by default while you can <Link href="/clientRouting">opt into Client Routing</Link>.

docs/components/ImplementedBy.tsx

@@ -1,7 +1,7 @@
 export { ImplementedBy }
 
 import { Link } from '@brillout/docpress'
-import { UiFrameworkVikeExtensionNames } from '../components/UiFrameworkVikeExtension'
+import { UiFrameworkExtension } from '../components/UiFrameworkExtension'
 import React from 'react'
 
 function ImplementedBy({
@@ -12,14 +12,14 @@ function ImplementedBy({
   return (
     <>
       <br />
-      Implemented by: {by ?? <UiFrameworkVikeExtensionNames />}.
+      Implemented by: {by ?? <UiFrameworkExtension name noLink />}.
       <blockquote>
         <p>
-          You need {by ?? <UiFrameworkVikeExtensionNames />} to be able to use {children}.
+          You need {by ?? <UiFrameworkExtension name noLink />} to be able to use {children}.
           {!noCustomGuide && (
             <>
               {' '}
-              If you don't use {by ?? <UiFrameworkVikeExtensionNames />} then see{' '}
+              If you don't use {by ?? <UiFrameworkExtension name noLink />} then see{' '}
               <Link href="#without-vike-react-vue-solid" />.
             </>
           )}

docs/components/UiFrameworkExtension.tsx

@@ -0,0 +1,57 @@
+export { UiFrameworkExtension }
+
+import React from 'react'
+import { Link } from '@brillout/docpress'
+
+function UiFrameworkExtension({
+  name,
+  noLink,
+  plural,
+  comma,
+  list = ['vike-react', 'vike-vue', 'vike-solid']
+}: {
+  name?: true
+  noLink?: true
+  plural?: true
+  comma?: true
+  list?: `vike-${'react' | 'vue' | 'solid'}`[]
+}) {
+  let content = (
+    <>
+      {list.map((name, i) => {
+        let content = <code>{name}</code>
+        if (!noLink) content = <Link href={`/${name}`}>{content}</Link>
+        const isLast1 = i === list.length - 1
+        const isLast2 = i === list.length - 2
+        if (!isLast1) {
+          let sep = '/'
+          if (comma) {
+            if (isLast2) {
+              sep = ', or '
+            } else {
+              sep = ', '
+            }
+          }
+          content = (
+            <>
+              {content}
+              {sep}
+            </>
+          )
+        }
+        return <React.Fragment key={name}>{content}</React.Fragment>
+      })}
+    </>
+  )
+
+  if (!name) {
+    const linkText = `Vike extension${plural ? 's' : ''}`
+    const linkOrText = noLink ? linkText : <Link href="/extensions">{linkText}</Link>
+    content = (
+      <>
+        UI framework {linkOrText} {content}
+      </>
+    )
+  }
+  return content
+}

docs/components/UseVikeExtension.tsx

@@ -2,15 +2,15 @@ export { UseVikeExtensionUiFramework }
 export { UseVikeExtension }
 
 import React from 'react'
-import { UiFrameworkVikeExtension, UiFrameworkVikeExtensionNames } from '../components'
+import { UiFrameworkExtension } from '../components'
 
 function UseVikeExtensionUiFramework({ featureName }: { featureName: string }) {
   return (
     <blockquote>
       <p>
-        Instead of manually integrating {featureName} yourself, you can use a <UiFrameworkVikeExtension /> which already
+        Instead of manually integrating {featureName} yourself, you can use a <UiFrameworkExtension /> which already
         integrates {featureName}. And you can use <Bati /> to scaffold an app that uses{' '}
-        <UiFrameworkVikeExtensionNames />.
+        <UiFrameworkExtension name noLink />.
       </p>
     </blockquote>
   )

docs/components/index.ts

@@ -1,6 +1,6 @@
 export * from './CSSinJSTool'
 export * from './DataArchitecture'
-export * from './UiFrameworkVikeExtension'
+export * from './UiFrameworkExtension'
 export * from './UseBati'
 export * from './UseVikeExtension'
 export { default as DefaultRouting } from './DefaultRouting.mdx'

docs/pages/ClientOnly/+Page.mdx

@@ -1,8 +1,8 @@
 import { Link } from '@brillout/docpress'
 import { ClientOnlyCommon } from './ClientOnlyCommon.tsx'
-import { UiFrameworkVikeExtension } from '../../components'
+import { UiFrameworkExtension } from '../../components'
 
-Implemented by: <UiFrameworkVikeExtension /> (or <Link href="#without-vike-react-vue-solid">yourself</Link>).
+Implemented by: <UiFrameworkExtension /> (or <Link href="#without-vike-react-vue-solid">yourself</Link>).
 
 The `<ClientOnly>` wrapper enables you to render and load a component only on the client-side.
 
@@ -30,7 +30,7 @@ Common use cases:
 
 ## Without `vike-{react,vue,solid}`
 
-If you don't use a <UiFrameworkVikeExtension />, you can implement `<ClientOnly>` yourself.
+If you don't use a <UiFrameworkExtension />, you can implement `<ClientOnly>` yourself.
 
 Examples:
  - [`vike-react` > /components/ClientOnly.tsx](https://github.com/vikejs/vike-react/blob/main/packages/vike-react/src/components/ClientOnly.tsx)

docs/pages/Layout/+Page.mdx

@@ -1,5 +1,5 @@
 import { Link, RepoLink } from '@brillout/docpress'
-import { UiFrameworkVikeExtension, ImplementedBy } from '../../components'
+import { UiFrameworkExtension, ImplementedBy } from '../../components'
 
 Environment: client, and server if <Link href="/ssr">`ssr: true`</Link>.
 <ImplementedBy>the `Layout` setting</ImplementedBy>
@@ -170,7 +170,7 @@ Examples:
 
 ## Without `vike-{react,vue,solid}`
 
-The following is for users that don't use a <UiFrameworkVikeExtension />.
+The following is for users that don't use a <UiFrameworkExtension />.
 
 #### The simple way
 
@@ -210,7 +210,7 @@ function Page() {
 
 #### With a custom setting
 
-In case you don't use a <UiFrameworkVikeExtension />, you can implement the `Layout` setting yourself by using <Link href="/meta">meta</Link>.
+In case you don't use a <UiFrameworkExtension />, you can implement the `Layout` setting yourself by using <Link href="/meta">meta</Link>.
 
 Examples:
  - <Link href="/meta#example-layout" doNotInferSectionTitle />

docs/pages/Page/+Page.mdx

@@ -1,5 +1,5 @@
 import { Link } from '@brillout/docpress'
-import { UiFrameworkVikeExtension, UiFrameworkVikeExtensionNames } from '../../components'
+import { UiFrameworkExtension } from '../../components'
 
 Environment: client, and server if <Link href="/ssr">`ssr: true`</Link>.
 
@@ -33,9 +33,9 @@ With Vue:
 </template>
 ```
 
-What happens with the `Page` value is determined by the <UiFrameworkVikeExtension />.
+What happens with the `Page` value is determined by the <UiFrameworkExtension />.
 
-> Instead of using <UiFrameworkVikeExtensionNames />, you can also manually integrate the <Link href="/ui-framework">UI framework</Link> yourself, see <Link href="#without-vike-react-vue-solid" />.
+> Instead of using <UiFrameworkExtension name noLink />, you can also manually integrate the <Link href="/ui-framework">UI framework</Link> yourself, see <Link href="#without-vike-react-vue-solid" />.
 
 
 
@@ -44,9 +44,9 @@ What happens with the `Page` value is determined by the <UiFrameworkVikeExtensio
 Vike itself never uses the `Page` value: it just makes the value available at `pageContext.Page`.
 The `pageContext.Page` value is typically used by the <Link href="/onRenderHtml">`onRenderHtml()`</Link> and <Link href="/onRenderClient">`onRenderClient()`</Link> hooks: these two hooks essentially determine how the `Page` value is rendered to HTML and the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model).
 
-The <UiFrameworkVikeExtension /> implements the `onRenderHtml()` and `onRenderClient()` hooks, so that you don't have to implement them: everything just works like a regular frontend framework such as Next.js or Nuxt.
+The <UiFrameworkExtension /> implements the `onRenderHtml()` and `onRenderClient()` hooks, so that you don't have to implement them: everything just works like a regular frontend framework such as Next.js or Nuxt.
 
-Instead of using <UiFrameworkVikeExtensionNames />, you can integrate your favorite UI framework yourself: you then have complete control over the UI framework integration.
+Instead of using <UiFrameworkExtension name noLink />, you can integrate your favorite UI framework yourself: you then have complete control over the UI framework integration.
 
 Here is a minimal example of manually integrating a UI framework:
 

docs/pages/Wrapper/+Page.mdx

@@ -1,5 +1,5 @@
 import { Link } from '@brillout/docpress'
-import { UiFrameworkVikeExtension, ImplementedBy } from '../../components'
+import { UiFrameworkExtension, ImplementedBy } from '../../components'
 
 Environment: client, and server if <Link href="/ssr">`ssr: true`</Link>.
 <ImplementedBy by={<code>vike-react</code>}>the `Wrapper` setting</ImplementedBy>
@@ -35,7 +35,7 @@ The `<Wrapper>` component is usually used for integrating tools, such as data fe
 
 ## Without `vike-{react,vue,solid}`
 
-In case you don't use a <UiFrameworkVikeExtension />, you can implement the `Wrapper` setting yourself by using <Link href="/meta">meta</Link>.
+In case you don't use a <UiFrameworkExtension />, you can implement the `Wrapper` setting yourself by using <Link href="/meta">meta</Link>.
 
 Example:
 

docs/pages/add/+Page.mdx

@@ -1,17 +1,17 @@
 import { Link, RepoLink } from '@brillout/docpress'
-import { UiFrameworkVikeExtensionNames } from '../../components'
+import { UiFrameworkExtension } from '../../components'
 
 The following shows how to add SSR / <Link href="/pre-rendering">pre-rendering (aka SSG)</Link> to an existing [Vite](https://vitejs.dev) app:
  - [Example of adding SSR/SSG to a Vite + React app](https://github.com/brillout/vite-to-vike)
  - [Example of adding SSR/SSG to a Vite + Vue app](https://github.com/brillout/vite-to-vike/tree/vue)
 
 It showcases how to do so in a step-by-step, progressive, and customizable fashion:
 - Choose between SSR and pre-rendering (SSG).
-- With or without <UiFrameworkVikeExtensionNames links list={['vike-react', 'vike-vue']} />.
+- With or without <UiFrameworkExtension name list={['vike-react', 'vike-vue']} />.
 - With [Server Routing](https://vike.dev/server-routing) or [Client Routing](https://vike.dev/client-routing).
 - Progressively migrate towards the stack you (eventually) want.
 
-You can choose whether you want to migrate towards a full-fledged SSR/SSG framework DX (like Next.js and Nuxt by using <UiFrameworkVikeExtensionNames links />), or add a minimal SSR/SSG implementation (applying a minimal amount of changes to your existing code), or something in-between.
+You can choose whether you want to migrate towards a full-fledged SSR/SSG framework DX (like Next.js and Nuxt by using <UiFrameworkExtension name />), or add a minimal SSR/SSG implementation (applying a minimal amount of changes to your existing code), or something in-between.
 
 This way, you can move quickly while progressively choosing your stack as you go.
 
@@ -28,7 +28,7 @@ On a high-level, this is how you add Vike to your existing Vite app:
      > Example: <RepoLink path="/boilerplates/boilerplate-react/server/index.js" />
 
 3. Either:
-   - Use <UiFrameworkVikeExtensionNames links />, or
+   - Use <UiFrameworkExtension name />, or
    - define <Link href="/onAfterRenderClient">`+onRenderClient.js`</Link> and <Link href="/onRenderHtml">`+onRenderHtml.js`</Link>.
      > Examples:
      > - <RepoLink text="Vue" path="/boilerplates/boilerplate-vue/renderer/" />

docs/pages/architecture/+Page.mdx

@@ -1,5 +1,5 @@
 import { Link } from '@brillout/docpress'
-import { JustAMiddleware, UiFrameworkVikeExtension, UiFrameworkVikeExtensionNames } from '../../components'
+import { JustAMiddleware, UiFrameworkExtension } from '../../components'
 
 Vike provides an frontend architecture that is both flexible and robust.
 
@@ -20,7 +20,7 @@ We believe it's paramount for the web that these core constituents are developed
 
 ## `onRenderHtml()` & `onRenderClient()`
 
-The <UiFrameworkVikeExtension /> integrate UI frameworks. But, if you want, instead of using <UiFrameworkVikeExtensionNames /> you can use the hooks `onRenderHtml()` and `onRenderClient()` for complete control over how pages are rendered.
+The <UiFrameworkExtension /> integrate UI frameworks. But, if you want, instead of using <UiFrameworkExtension name noLink /> you can use the hooks `onRenderHtml()` and `onRenderClient()` for complete control over how pages are rendered.
 
 Not only can you manually integrate with any UI framework you want and however you want, you can also deeply integrate with your favorite data fetching tools. For example, you can integrate with Relay in ways that aren't possible with other frameworks.
 

docs/pages/client/+Page.mdx

@@ -1,5 +1,5 @@
 import { Link, RepoLink, Construction } from '@brillout/docpress'
-import { UiFrameworkVikeExtension } from '../../components'
+import { UiFrameworkExtension } from '../../components'
 
 The `+client.js` file adds client-side JavaScript. The code of `+client.js` is executed only once at the very beginning when the user goes to your website.
 
@@ -21,7 +21,7 @@ console.log("I'm the first line of client-side JavaScript.")
 > - <Link href="/onPageTransitionStart" />
 > - <Link href="/onPageTransitionEnd" />
 >
-> If you don't use a <UiFrameworkVikeExtension />, then also see <Link href="/onRenderClient" />.
+> If you don't use a <UiFrameworkExtension />, then also see <Link href="/onRenderClient" />.
 
 ## Examples
 

docs/pages/clientRouting/+Page.mdx

@@ -1,9 +1,9 @@
 import { Link, RepoLink, ReadingRecommendation } from '@brillout/docpress'
-import { UseVikeExtensionUiFramework, UiFrameworkVikeExtension } from '../../components'
+import { UseVikeExtensionUiFramework, UiFrameworkExtension } from '../../components'
 
 Environment: client.
 
-If you don't use a <UiFrameworkVikeExtension /> then Vike does <Link text="Server Routing" href="/server-routing" /> by default.
+If you don't use a <UiFrameworkExtension /> then Vike does <Link text="Server Routing" href="/server-routing" /> by default.
 
 You can opt into <Link text="Client Routing" href="/client-routing" /> by using the `clientRouting` setting, see <Link href="#getting-started" />.
 

docs/pages/config/+Page.mdx

@@ -1,5 +1,4 @@
 import { Link, Construction, FileRemoved } from '@brillout/docpress'
-import { UiFrameworkVikeExtension, UiFrameworkVikeExtensionNames } from '../../components'
 
 Everything there is to know about config files.
 

docs/pages/data-fetching/+Page.mdx

@@ -1,5 +1,5 @@
 import { RepoLink, Link } from '@brillout/docpress'
-import { UiFrameworkVikeExtension, UiFrameworkVikeExtensionNames } from '../../components'
+import { UiFrameworkExtension } from '../../components'
 
 
 ## `data()`
@@ -54,7 +54,7 @@ import { useData } from 'vike-solid/useData'
   const { name, price } = data
 ```
 
-> `useData()` is implemented by the <UiFrameworkVikeExtension />. If you don't use <UiFrameworkVikeExtensionNames /> then see <Link href="/useData#without-vike-react-vue-solid" doNotInferSectionTitle />.
+> `useData()` is implemented by the <UiFrameworkExtension />. If you don't use <UiFrameworkExtension name noLink /> then see <Link href="/useData#without-vike-react-vue-solid" doNotInferSectionTitle />.
 
 The `data()` hook is only meant for fetching the initial data of a page (in technical words: the SSR data). For other use cases see the sections below <Link href="#api-routes">API routes</Link> and <Link href="#rpc">RPC</Link>.
 

docs/pages/data/+Page.mdx

@@ -1,5 +1,5 @@
 import { Link, RepoLink } from '@brillout/docpress'
-import { UiFrameworkVikeExtension, UiFrameworkVikeExtensionNames } from '../../components'
+import { UiFrameworkExtension } from '../../components'
 
 The `data()` hook is used for fetching data.
 
@@ -163,11 +163,11 @@ This means that, beyond using <Link href="/useData">`useData()`</Link>, you can
 
 ## Without `useData()`
 
-The `data()` hook is usually used together with the component hook <Link href="/useData">`useData()`</Link> which is provided by the <UiFrameworkVikeExtension />.
+The `data()` hook is usually used together with the component hook <Link href="/useData">`useData()`</Link> which is provided by the <UiFrameworkExtension />.
 
 In general, for improved DX, we recommend using `data()` together with a `useData()` implementation.
 
-> In case you don't use <UiFrameworkVikeExtensionNames />, you can implement `useData()` yourself as shown at <Link href="/useData#without-vike-react-vue-solid" doNotInferSectionTitle />
+> In case you don't use <UiFrameworkExtension name noLink />, you can implement `useData()` yourself as shown at <Link href="/useData#without-vike-react-vue-solid" doNotInferSectionTitle />
 
 That said, you can also use `data()` without `useData()`:
 

docs/pages/escapeInject/+Page.mdx

@@ -1,11 +1,11 @@
-import { HookTypeScriptHints, UiFrameworkVikeExtension, UiFrameworkVikeExtensionNames } from '../../components'
+import { HookTypeScriptHints, UiFrameworkExtension } from '../../components'
 import { Link, RepoLink } from '@brillout/docpress'
 
 Environment: server.
 
 The `escapeInject` string template tag sanitizes HTML to prevent security risks commmonly called [XSS injections](https://en.wikipedia.org/wiki/Cross-site_scripting).
 
-> If you use a <UiFrameworkVikeExtension/>, then you don't need to use `escapeInject` yourself as <UiFrameworkVikeExtensionNames /> already sanitizes its HTML.
+> If you use a <UiFrameworkExtension />, then you don't need to use `escapeInject` yourself as <UiFrameworkExtension name noLink /> already sanitizes its HTML.
 
 It's usually used by the `onRenderHtml()` hook.