fix: be available under webpack builder

docs/.vuepress/config.ts

@@ -2,6 +2,7 @@ import { defineUserConfig } from 'vuepress'
 import { recoTheme } from 'vuepress-theme-reco'
 import { themeConfig } from './config/index'
 import { viteBundler } from '@vuepress/bundler-vite'
+import { webpackBundler } from '@vuepress/bundler-webpack'
 
 export default defineUserConfig({
   locales: {
@@ -18,10 +19,7 @@ export default defineUserConfig({
       description: 'A simple vuepress Blog & Doc theme.',
     },
   },
-  bundler: viteBundler({
-    viteOptions: {},
-    vuePluginOptions: {},
-  }),
+  bundler: webpackBundler({}),
   theme: recoTheme(themeConfig),
   // debug: true,
 })

example/.vuepress/config.js

@@ -1,6 +1,7 @@
 import { defineUserConfig } from 'vuepress'
 import recoTheme from 'vuepress-theme-reco'
 import { viteBundler } from '@vuepress/bundler-vite'
+import { webpackBundler } from '@vuepress/bundler-webpack'
 
 export default defineUserConfig({
   locales: {
@@ -17,10 +18,7 @@ export default defineUserConfig({
       description: '英文描述',
     },
   },
-  bundler: viteBundler({
-    viteOptions: {},
-    vuePluginOptions: {},
-  }),
+  bundler: webpackBundler({}),
   theme: recoTheme({
     locales: {
       '/': {
@@ -161,5 +159,5 @@ export default defineUserConfig({
     password: ['14e1b600b1fd579f47433b88e8d85291'],
     // primaryColor: '#3aa675',
   }),
-  debug: true,
+  // debug: true,
 })

package.json

@@ -53,6 +53,7 @@
     "@vuepress-reco/shared": "workspace:*",
     "@vuepress-reco/tailwindcss-config": "workspace:*",
     "@vuepress/bundler-vite": "2.0.0-rc.8",
+    "@vuepress/bundler-webpack": "2.0.0-rc.8",
     "commitizen": "^4.1.2",
     "concurrently": "^6.0.0",
     "conventional-changelog-cli": "^2.0.34",

packages/@vuepress-reco/plugin-bulletin-popover/src/client/components/Bulletin.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { useVisible, useHandleNodes } from './hook'
+import { useVisible, useHandleNodes } from './hook.js'
 
 const { visible, bulletin, closeBulletinPopover } = useVisible()
 const { bodyNodes } = useHandleNodes()

packages/@vuepress-reco/plugin-code-copy/src/client/clientSetup.ts

@@ -1,5 +1,5 @@
 import { onMounted } from 'vue'
-import { useInitCopyBtn } from './composables/initCopyBtn'
+import { useInitCopyBtn } from './composables/initCopyBtn.js'
 
 export async function applyClientSetup() {
   const { initCopyBtn } = useInitCopyBtn()

packages/@vuepress-reco/plugin-code-copy/src/client/config.ts

@@ -1,6 +1,6 @@
 import { defineClientConfig, type ClientConfig } from 'vuepress/client'
 
-import { applyClientSetup } from './clientSetup'
+import { applyClientSetup } from './clientSetup.js'
 
 export default defineClientConfig({
   setup(){

packages/@vuepress-reco/plugin-comments/src/client/clientEnhance.ts

@@ -1,7 +1,7 @@
 import { h } from 'vue';
-import Comments from './components/Comments';
-import ValineViews from './components/ValineViews';
-import WalineViews from './components/WalineViews';
+import Comments from './components/Comments.js';
+import ValineViews from './components/ValineViews.js';
+import WalineViews from './components/WalineViews.js';
 export function applyClientEnhance({ app }) {
     app.component('Comments', (props) => h(Comments, { ...props }));
     app.component('ValineViews', (props) => h(ValineViews, { ...props }));

packages/@vuepress-reco/plugin-comments/src/client/components/Comments.ts

@@ -1,8 +1,8 @@
 import { defineComponent, h, toRefs } from 'vue'
-import { useComment } from '../composables'
-import Valine from './Valine'
-import Waline from './Waline'
-import Giscus from './Giscus'
+import { useComment } from '../composables/index.js'
+import Valine from './Valine.js'
+import Waline from './Waline.js'
+import Giscus from './Giscus.js'
 
 export default defineComponent({
   name: 'RecoComments',

packages/@vuepress-reco/plugin-comments/src/client/components/Waline.ts

@@ -1,5 +1,5 @@
 import { usePageLang, withBase, usePageData  } from 'vuepress/client'
-import { Waline } from '@waline/client/dist/component'
+import { Waline } from '@waline/client/dist/component.mjs'
 import { computed, defineComponent, h, toRefs } from 'vue'
 import { useRoute } from 'vue-router'
 

packages/@vuepress-reco/plugin-comments/src/client/components/WalineViews.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h, onMounted, onUpdated, toRefs } from 'vue'
 import { pageviewCount } from '@waline/client'
-import { useComment } from '../composables'
+import { useComment } from '../composables/index.js'
 import { useRoute } from 'vue-router'
 export default defineComponent({
   name: 'WalineViews',

packages/@vuepress-reco/plugin-comments/src/client/config.ts

@@ -1,6 +1,6 @@
 import { defineClientConfig, type ClientConfig } from 'vuepress/client'
 
-import { applyClientEnhance } from './clientEnhance'
+import { applyClientEnhance } from './clientEnhance.js'
 
 export default defineClientConfig({
   enhance(...args){

packages/@vuepress-reco/plugin-page/src/client/clientSetup.ts

@@ -4,7 +4,7 @@ import {
   categorySummarySymbol,
   postsSymbol,
   seriesSymbol,
-} from './composable'
+} from './composable/index.js'
 
 declare const __POSTS__: Record<string, any[]>
 declare const __SERIES__: Record<string, any>

packages/@vuepress-reco/plugin-page/src/client/composable/index.ts

@@ -1 +1 @@
-export * from './usePageData'
+export * from './usePageData.js'

packages/@vuepress-reco/plugin-page/src/client/composable/usePageData.ts

@@ -18,12 +18,12 @@ export function usePageData(): Record<string, any> {
     throw new Error('useSiteLocaleData() is called without provider.')
   }
 
-  const { currentRoute } = useRouter()
+  const router = useRouter()
 
   const categoryPosts = computed(() => {
     return (
       (categoryPaginationPosts as Record<string, any>)[
-        currentRoute.value.path
+        router.currentRoute.value.path
       ] || {}
     )
   })

packages/@vuepress-reco/plugin-page/src/client/config.ts

@@ -1,6 +1,6 @@
 import { defineClientConfig, type ClientConfig } from 'vuepress/client'
 
-import { applyClientSetup } from './clientSetup'
+import { applyClientSetup } from './clientSetup.js'
 
 export default defineClientConfig({
   setup(){

packages/@vuepress-reco/plugin-page/src/node/PageCreater.ts

@@ -253,7 +253,7 @@ export default class PageCreater {
 
         Array.from({ length: totalPage }).forEach((item, currentPage) => {
           const page = createPage(this.app, {
-            path: `/${key}/${convertToPinyin(removeEmptyString(value))}/${currentPage + 1}/`,
+            path: `/${key}/${convertToPinyin(removeEmptyString(value))}/${currentPage + 1}.html`,
             frontmatter: { layout },
           })
           this._extendedPages.push(page)
@@ -268,8 +268,8 @@ export default class PageCreater {
 
     Array.from({ length: totalPages }).map((item, index) => {
       const page = createPage(this.app, {
-        path: `/posts/${index + 1}/`,
-        frontmatter: { layout: 'Post' },
+        path: `/posts/${index + 1}.html`,
+        frontmatter: { layout: 'Posts' },
       })
       this._extendedPages.push(page)
     })
@@ -357,7 +357,7 @@ export default class PageCreater {
           (prev: Record<string, CategoryPaginationPost>, current, index) => {
             const currentPage = index + 1
 
-            prev[`/${key}/${value}/${currentPage}/`] = {
+            prev[`/${key}/${value}/${currentPage}.html`] = {
               pageSize,
               totalPage: pages.length,
               currentPage,

packages/vuepress-theme-reco/src/client/clientEnhance.ts

@@ -1,5 +1,5 @@
-import { registerGlobalComponents, resolveSearchComponent } from './utils'
-import './utils/resolveStyles'
+import { registerGlobalComponents, resolveSearchComponent } from './utils/index.js'
+import './utils/resolveStyles.js'
 
 export function applyClientEnhance({ app }) {
   registerGlobalComponents(app)

packages/vuepress-theme-reco/src/client/clientSetup.ts

@@ -1,26 +1,24 @@
 import { computed, provide } from 'vue'
-import { usePageFrontmatter } from 'vuepress/client'
+import { usePageFrontmatter, useRoute } from 'vuepress/client'
 import {
   resolveSeriesItems,
   seriesItemsSymbol,
   resolveCatalog,
   catalogSymbol,
   useThemeLocaleData,
-} from './composables'
-
-import { usePageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable'
+} from './composables/index.js'
 
 import type { RecoThemeNormalPageFrontmatter } from '../types'
 
 export function applyClientSetup() {
   // we need to access series items in multiple components
   // so we make it global computed
   const themeLocal = useThemeLocaleData()
-  const { series } = usePageData()
   const frontmatter = usePageFrontmatter<RecoThemeNormalPageFrontmatter>()
-  const seriesItems = computed(() =>
-    resolveSeriesItems(frontmatter.value, themeLocal.value, series)
-  )
+  const route =  useRoute()
+  const seriesItems = computed(() =>{
+    return resolveSeriesItems(frontmatter.value, themeLocal.value, route)
+  })
   provide(seriesItemsSymbol, seriesItems)
 
   const catalog = computed(() => resolveCatalog())

packages/vuepress-theme-reco/src/client/components/Catalog.vue

@@ -11,8 +11,8 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { usePageCatalog, useThemeLocaleData } from '../composables/'
-import { CatalogItem } from './CatalogItem'
+import { usePageCatalog, useThemeLocaleData } from '../composables/index.js'
+import { CatalogItem } from './CatalogItem.js'
 
 const catalog = usePageCatalog()
 const themeConfig = useThemeLocaleData()

packages/vuepress-theme-reco/src/client/components/Common/hook.ts

@@ -1,7 +1,7 @@
 import { useRouter, useRoute } from 'vue-router'
 import { watch, ref, onMounted, onUnmounted, toRefs } from 'vue'
-import { useInitCopyBtn } from '@vuepress-reco/vuepress-plugin-code-copy/lib/client/composables/initCopyBtn'
-import { useScrollDirection, useThemeLocaleData } from '../../composables'
+import { useInitCopyBtn } from '@vuepress-reco/vuepress-plugin-code-copy/lib/client/composables/initCopyBtn.js'
+import { useScrollDirection, useThemeLocaleData } from '../../composables/index.js'
 
 export function useSeries(toggleSeries, toggleMobileMenus) {
   // close series after navigation

packages/vuepress-theme-reco/src/client/components/Common/index.vue

@@ -33,16 +33,16 @@
 import { onMounted, computed } from 'vue'
 import { usePageFrontmatter } from 'vuepress/client'
 
-import { useSeriesItems } from '../../composables'
+import { useSeriesItems } from '../../composables/index.js'
 import Navbar from '../Navbar.vue'
 import SubNavbar from '../SubNavbar.vue'
 import Series from '../Series.vue'
 import Catalog from '../Catalog.vue'
 import Password from '../Password/index.vue'
 import NavbarDropdownNemu from '../NavbarDropdownNemu.vue'
 
-import { useSeries, usePassword, useInitCodeCopy } from './hook'
-import { useSeriesData, useMobileMenus } from '../../composables'
+import { useSeries, usePassword, useInitCodeCopy } from './hook.js'
+import { useSeriesData, useMobileMenus } from '../../composables/index.js'
 import { RecoThemeNormalPageFrontmatter } from '../../../types'
 
 const frontmatter = usePageFrontmatter<RecoThemeNormalPageFrontmatter>()

packages/vuepress-theme-reco/src/client/components/FriendshipLink.vue

@@ -17,7 +17,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
-import { MagicCard } from './global';
+import { MagicCard } from './global/index.js';
 
 const themeLocal = useThemeLocaleData()
 

packages/vuepress-theme-reco/src/client/components/Home/BannerBrand.vue

@@ -35,7 +35,7 @@
 import { computed } from "vue";
 import { usePageFrontmatter, withBase } from 'vuepress/client'
 import Link from '../Link.vue'
-import { createOneColor } from '../../utils'
+import { createOneColor } from '../../utils/index.js'
 
 const frontmatter = usePageFrontmatter<{
   bannerBrand: {

packages/vuepress-theme-reco/src/client/components/Home/Blog.vue

@@ -53,14 +53,14 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
-import { usePageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable'
+import { usePageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable/index.js'
 import { useRoute, useRouter } from 'vue-router'
-import { createOneColor, throttle } from '../../utils'
+import { createOneColor, throttle } from '../../utils/index.js'
 import PostList from '../PostList.vue'
 import Pagation from '../Pagation.vue'
 import PersonalInfo from '../PersonalInfo.vue'
 import { useRouteLocale, withBase } from 'vuepress/client';
-import { useThemeLocaleData } from '../../composables';
+import { useThemeLocaleData } from '../../composables/index.js';
 
 const { posts, categorySummary } = usePageData()
 

packages/vuepress-theme-reco/src/client/components/Link.vue

@@ -37,7 +37,7 @@ import { useRoute } from 'vue-router'
 import { useSiteLocaleData, useRouteLocale } from 'vuepress/client'
 import { isLinkHttp, isLinkWithProtocol } from 'vuepress/shared'
 import type { NavLink } from '../../types'
-import { useThemeLocaleData } from '../composables'
+import { useThemeLocaleData } from '../composables/index.js'
 
 export default defineComponent({
   name: 'Link',

packages/vuepress-theme-reco/src/client/components/Navbar.vue

@@ -22,10 +22,10 @@ import { defineComponent, computed, ref, onMounted } from 'vue'
 import { useRouteLocale, useSiteLocaleData, withBase } from 'vuepress/client'
 import ToggleDarkModeButton from './ToggleDarkModeButton.vue'
 import NavbarLinks from './NavbarLinks.vue'
-import { useThemeLocaleData, useSeriesItems } from '../composables'
+import { useThemeLocaleData, useSeriesItems } from '../composables/index.js'
 import Xicons from './global/Xicons.vue'
 import SiteBrand from './SiteBrand.vue'
-import { throttle } from '../utils'
+import { throttle } from '../utils/index.js'
 
 const seriesItems = useSeriesItems()
 const siteLocale = useSiteLocaleData()

packages/vuepress-theme-reco/src/client/components/NavbarLinks.vue

@@ -19,11 +19,11 @@ import { useRouter } from 'vue-router'
 import { useRouteLocale, useSiteLocaleData } from 'vuepress/client'
 import { isString } from 'vuepress/shared'
 import type { NavbarItem, NavbarGroup, ResolvedNavbarItem } from '../../types'
-import { useNavLink } from '../composables/index'
+import { useNavLink } from '../composables/index.js'
 import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
-import { usePageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable'
+import { usePageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable/index.js'
 import { convertToPinyin } from '@vuepress-reco/shared'
-import { resolveRepoType } from '../utils'
+import { resolveRepoType } from '../utils/index.js'
 import DropdownLink from './DropdownLink.vue'
 import Link from './Link.vue'
 
@@ -135,10 +135,11 @@ const useNavbarRepo = (): ComputedRef<ResolvedNavbarItem[]> => {
 }
 
 const resolveNavbarItem = (
-  item: NavbarItem | NavbarGroup | string
+  item: NavbarItem | NavbarGroup | string,
+  router
 ): ResolvedNavbarItem => {
   if (isString(item)) {
-    return useNavLink(item)
+    return useNavLink(item, router)
   }
   if ((item as NavbarGroup).children) {
     return {

packages/vuepress-theme-reco/src/client/components/Page/index.vue

@@ -29,7 +29,7 @@ import PageInfo from '../PageInfo.vue'
 import PageNav from '../PageNav.vue'
 import PageMeta from '../PageMeta.vue'
 import Password from '../PagePassword/index.vue'
-import { usePassword } from './hook'
+import { usePassword } from './hook.js'
 
 const pageData = usePageData()
 const { options } = useComment()

packages/vuepress-theme-reco/src/client/components/PageMeta.vue

@@ -38,7 +38,7 @@ import type {
   NavLink as NavLinkType,
 } from '../../types'
 import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
-import { resolveEditLink } from '../utils'
+import { resolveEditLink } from '../utils/index.js'
 import Link from './Link.vue'
 
 const useEditNavLink = (): ComputedRef<null | NavLinkType> => {