bugs (integrations): Couple of bugs after update to 2.0.0-rc10

[Ampernic]

After update components from 1.25.2 to 2.0.0-rc10 have some problems with some elements of plugins.

Vitepress version: 1.1.4

Problems:

• Git Changelog | Won't expand list of commits
• Enhanced Readabilities | Doesn't work properly

Demo:

https://github.com/nolebase/integrations/assets/44705058/a1d61648-e36f-483a-8c74-6d8232419b65

What was done:

1. Updated:

• ui | 1.25.2 -> 2.0.0-rc10
• vitepress-plugin-git-changelog | 1.25.2 -> 2.0.0-rc10
• vitepress-plugin-page-properties | 1.25.2 -> 2.0.0-rc10
• vitepress-plugin-enhanced-readabilities | 1.25.2 -> 2.0.0-rc10
• dependencies of it

2. Edited: For Enhanced Readabilities changed all what described in migrate guide.

More info:

• vite.config.js:

  
  import UnoCSS from 'unocss/vite'
  import {
  GitChangelog,
  GitChangelogMarkdownSection
  } from '@nolebase/vitepress-plugin-git-changelog/vite'

import { PageProperties, PagePropertiesMarkdownSection } from '@nolebase/vitepress-plugin-page-properties/vite'

import { gitRepository, gitMaxCommits, gitDisplay, gitRewritePath, gitHeadersLocale } from '../_data/gitlog'

/ ... / export default defineConfig({ vite: { optimizeDeps: { include: [ '@nolebase/vitepress-plugin-enhanced-readabilities > @nolebase/ui > @rive-app/canvas', ], exclude: [ '@nolebase/vitepress-plugin-enhanced-readabilities/client', ], }, plugins: [ UnoCSS(), GitChangelog({ maxGitLogCount: gitMaxCommits, repoURL: () => gitRepository, rewritePaths: gitRewritePath, }), GitChangelogMarkdownSection({ getChangelogTitle: (_, , { helpers }): string => { return gitHeadersLocale.historytitle }, getContributorsTitle: (, , { helpers }): string => { return gitHeadersLocale.authortitle }, excludes: [], exclude: (, { helpers }): boolean => { for (var page of config.nolebaseexclude) { if (helpers.idEndsWith(page)) return true } return false }, sections: gitDisplay, }), PageProperties(), PagePropertiesMarkdownSection({ excludes: [], exclude: (, { helpers }): boolean => { for (var page of config.nolebase_exclude){ if (helpers.idEndsWith(page)) return null } return false }, }), ], ssr: { noExternal: [ '@nolebase/vitepress-plugin-enhanced-readabilities', '@nolebase/vitepress-plugin-page-properties', ], }, }, / ... /

- Theme `index.js`
```ts
/* Nolebase features*/
import {
  NolebaseEnhancedReadabilitiesMenu,
  NolebaseEnhancedReadabilitiesScreenMenu,
  Options as NolebaseEnhancedReadabilitiesOptions,
  InjectionKey as NolebaseEnhancedReadabilitiesInjectionKey
} from '@nolebase/vitepress-plugin-enhanced-readabilities'

import { locales } from '../../_data/enhanced-readabilities'

import { 
  NolebaseGitChangelogPlugin 
} from '@nolebase/vitepress-plugin-git-changelog/client'

import {
  gitLocales,
  gitMapContributors
} from '../../_data/gitlog'

import {
  NolebasePagePropertiesEditor,
} from '@nolebase/vitepress-plugin-page-properties/client'

import {
  pagePropertiesLocales,
  pagePropertiesMD
} from '../../_data/page-properties'

import { 
  type Options as NolebasePagePropertiesOptions,
  InjectionKey as NolebasePagePropertiesInjection
} from '@nolebase/vitepress-plugin-page-properties/client'

/* Stylesheets */
import 'uno.css'
import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
import '@nolebase/vitepress-plugin-page-properties/client/style.css'

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      'home-features-after': () => h(AGWHomeContents),
      'nav-bar-content-after': () => h(NolebaseEnhancedReadabilitiesMenu),
      'nav-screen-content-after': () => h(NolebaseEnhancedReadabilitiesScreenMenu),
      'aside-outline-after': () => h(AGWDocsAsideMeta),
    })
  },
  enhanceApp(ctx) { 
    ctx.app.component('NolebasePagePropertiesEditor', NolebasePagePropertiesEditor)
    ctx.app.provide(NolebaseEnhancedReadabilitiesInjectionKey, { locales: locales} as NolebaseEnhancedReadabilitiesOptions)
    ctx.app.provide(NolebasePagePropertiesInjection, {locales: pagePropertiesLocales, properties:pagePropertiesMD} as NolebasePagePropertiesOptions)
    ctx.app.use(NolebaseGitChangelogPlugin, {locales: gitLocales, mapContributors: gitMapContributors})

    enhanceAppWithTabs(ctx.app)
  }

Small PS: And sorry for the long absence of an answer in some issues. Well, I'm glad to get back in touch after a long break.

[nekomeowww]

Firstly, sorry about the lack support of documentations about @nolebase/vitepress-plugin-page-properties.

Several issues I found:

1. ctx.app.component('NolebasePagePropertiesEditor', NolebasePagePropertiesEditor) is not efficient for production since the NolebasePagePropertiesEditor is only suitable for development usage (I made a live editor for properties previously but not yet finalized), you will need to use ctx.app.use(NolebasePagePropertiesPlugin(), { locales: pagePropertiesLocales, properties:pagePropertiesMD }) directly with import { NolebasePagePropertiesPlugin } from '@nolebase/vitepress-plugin-page-properties/client' statement.
2. ctx.app.provide(NolebaseEnhancedReadabilitiesInjectionKey, { locales: locales} as NolebaseEnhancedReadabilitiesOptions) can be simplified as app.use(NolebaseEnhancedReadabilitiesPlugin, { locales })

In conclusion:

/* Nolebase features*/
import {
++ NolebaseEnhancedReadabilitiesPlugin
  NolebaseEnhancedReadabilitiesMenu,
  NolebaseEnhancedReadabilitiesScreenMenu,
--  Options as NolebaseEnhancedReadabilitiesOptions,
--  InjectionKey as NolebaseEnhancedReadabilitiesInjectionKey
} from '@nolebase/vitepress-plugin-enhanced-readabilities'

import { locales } from '../../_data/enhanced-readabilities'

import { 
  NolebaseGitChangelogPlugin 
} from '@nolebase/vitepress-plugin-git-changelog/client'

import {
  gitLocales,
  gitMapContributors
} from '../../_data/gitlog'

import {
--  NolebasePagePropertiesEditor,
++  NolebasePagePropertiesPlugin,
} from '@nolebase/vitepress-plugin-page-properties/client'

import {
  pagePropertiesLocales,
  pagePropertiesMD
} from '../../_data/page-properties'

-- import { 
--   type Options as NolebasePagePropertiesOptions,
--   InjectionKey as NolebasePagePropertiesInjection
-- } from '@nolebase/vitepress-plugin-page-properties/client'

/* Stylesheets */
import 'uno.css'
import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
import '@nolebase/vitepress-plugin-page-properties/client/style.css'

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      'home-features-after': () => h(AGWHomeContents),
      'nav-bar-content-after': () => h(NolebaseEnhancedReadabilitiesMenu),
      'nav-screen-content-after': () => h(NolebaseEnhancedReadabilitiesScreenMenu),
      'aside-outline-after': () => h(AGWDocsAsideMeta),
    })
  },
  enhanceApp(ctx) { 
--     ctx.app.component('NolebasePagePropertiesEditor', NolebasePagePropertiesEditor)
--     ctx.app.provide(NolebaseEnhancedReadabilitiesInjectionKey, { locales: locales} as NolebaseEnhancedReadabilitiesOptions)
++     ctx.app.provide(NolebaseEnhancedReadabilitiesPlugin, { locales })
--     ctx.app.provide(NolebasePagePropertiesInjection, {locales: pagePropertiesLocales, properties:pagePropertiesMD} as NolebasePagePropertiesOptions)
++     ctx.app.provide(NolebasePagePropertiesPlugin, { locales: pagePropertiesLocales, properties:pagePropertiesMD })
    ctx.app.use(NolebaseGitChangelogPlugin, {locales: gitLocales, mapContributors: gitMapContributors})

    enhanceAppWithTabs(ctx.app)
  }
}

[nekomeowww]

• Git Changelog | Won't expand list of commits

What errors appeared in console when clicking the expanding arrow?

• Enhanced Readabilities | Doesn't work properly

This is because that the release of newer version of VitePress consists breaking changes to class names and breaks the used CSS selectors to expand either of the width of contents and sidebars. I will try to release a new 2.0.0-rc11 with the new features introduced by #189 and then try to support the newer version of VitePress. (PS: this issue has been reported by #190 (it's in Chinese)). If you want to use enhanced readabilities now, please down grade VitePress to 1.0.2 (tested version) temporarily.

[Ampernic]

• Git Changelog | Won't expand list of commits

What errors appeared in console when clicking the expanding arrow?

• Enhanced Readabilities | Doesn't work properly

This is because that the release of newer version of VitePress consists breaking changes to class names and breaks the used CSS selectors to expand either of the width of contents and sidebars. I will try to release a new 2.0.0-rc11 with the new features introduced by #189 and then try to support the newer version of VitePress. (PS: this issue has been reported by #190 (it's in Chinese)). If you want to use enhanced readabilities now, please down grade VitePress to 1.0.2 (tested version) temporarily.

So... I tried to test something today, and get some new details...

1. Downgrade to 1.0.2 doesn't change anything... It was first what i do. I tried downloading for each version of vitepress from 1.0.2 to 1.0.0-rc.45
2. That problems persists only in docs:dev env. And on earlier version of plugins too. If try to build that everything works... Its is strange, and i need some more time to check more moments in our configuration to be sure.
3. When i click on expand nothing changes in log...

And thanks for yours comments about impots. I change this when gets back to work later. I don't sure, but tried use plugin import except editor but it doesn't working for me (it was on 1.25.2). I will try to check it again.

And one more strange moment. When we build docs loading spiner of git changelog persists after success build... And can spin infinie after report about success build...

Thank you for your response. I will check everything one more time later and provide more info.

[Ampernic]

1. Git changelog and Enhanced Readabilities

So... Sorry for incorrect info. Downgrade vitepress to 1.0.0-rc.45 and dependencies helps. Maybe first time i lost some dependencies... After downgrade i update "vp" to 1.0.2 and still works.

(but getting this in log)

[unocss] failed to load icon "icon-park-outline:icon-book-open"
[unocss] failed to load icon "icon-park-outline:icon-layout-one"
[unocss] failed to load icon "icon-park-outline:icon-auto-line-width"
[unocss] failed to load icon "icon-park-outline:icon-auto-width-one"
[unocss] failed to load icon "icon-park-outline:icon-click"

2. Page Properties

I change everything how you write, but getting this in browser:

[Vue warn]: Failed to resolve component: NolebasePagePropertiesEditor
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <AptGet.md onVnodeMounted=fn<runCbs> onVnodeUpdated=fn<runCbs> onVnodeUnmounted=fn<runCbs> > 
  at <VitePressContent class="vp-doc _apt-get" > 
  at <VPDoc key=4 > 
  at <VPContent> 
  at <Layout> 
  at <Layout> 
  at <VitePressApp>

This why i use direct loading of NolebasePagePropertiesEditor...

[Ampernic]

Console after expand

https://github.com/nolebase/integrations/assets/44705058/50ad5138-076a-4674-b1fe-6b78fbef84fc

[nekomeowww]

And one more strange moment. When we build docs loading spiner of git changelog persists after success build... And can spin infinie after report about success build...

Thats something I cannot fix with, possible bugs for ora package.

[nekomeowww]

You can ignore errors with

[unocss] failed to load icon "icon-park-outline:icon-book-open"
[unocss] failed to load icon "icon-park-outline:icon-layout-one"

This is because that UnoCSS is trying to transpile and matching properties for already bunddled components inside of node_modules. To completely remove this warn, you can install @iconify-json/icon-park-oueline.

[nekomeowww]

1. [Vue warn]: Failed to resolve component: NolebasePagePropertiesEditor

Cannot reproduce. Please provide me a minimum reproduction to reference with.

2. 2.0.0-rc11 released

[Ampernic]

To completely remove this warn, you can install @iconify-json/icon-park-oueline.

But... I have this...

And #195 fix infinite loading, but still display spiner in build (but maybe i misunderstand something and need exactly production arguments...) Is this expected behavior?

https://github.com/nolebase/integrations/assets/44705058/a29d41a0-4d5b-4bf8-ad5e-a8db4e13567c

Tested on vitepress 1.1.4 and git-changelog 2.0.0-rc14