DefaultPreviewMode: 'browser' are not working

[InfernalAzazel]

Online Display

naive-pro-components

• browser mode:

• block mode:

• global seems invalid

pluginVite({
        demo: {
          defaultPreviewMode: 'browser',
        }
      })

1. ProLayout It works because I set it up in docs

   DemoLayout.vue

<docs lang="md">
---
title: 基础用法
---
</docs>

2. Other components have not taken effect

I set defaultPreviewMode: 'browser' on congfig.ts

Reproduction Code

ProLayout.md DemoLayout.vue config.ts

Dependencies

• @sgwm-sutras/plugin: "^0.0.1"
• @sgwm-sutras/ui: "^0.0.3"
• vue: "^3.4.21"
• vitepress: "^1.1.4"
• vite: "^5.2.8"

Operating System

Linux hzh57359u 5.15.0-105-generic #115~20.04.1-Ubuntu SMP Mon Apr 15 17:33:04 UTC 2024 x86_64 x86_64 x86_64 GNU/Linux

Browser

Google Chrome 版本 124.0.6367.78（正式版本）（64 位）

[SharpGoldWaveMaker]

@InfernalAzazel

There are two problems：

global demo defaultPreviewMode invalid

The problem has fixed in version 0.0.3, by "pnpm upgrade @sgwm-sutras/plugin@0.0.3"

global components not working in browser mode

https://github.com/InfernalAzazel/naive-pro-components/blob/c0c782184f035c98f43ee742e7636da0b8d696f3/docs/.vitepress/theme/index.ts#L12

browser mode uses sandbox isolation to run your demo independently in the sandbox, but the sandbox does not inherit globally registered components.

Having sandboxes inherit globally registered components is something I think is necessary, and I intend to start implementing it

[InfernalAzazel]

@InfernalAzazel

There are two problems：

global demo defaultPreviewMode invalid

The problem has fixed in version 0.0.3, by "pnpm upgrade @sgwm-sutras/plugin@0.0.3"

global components not working in browser mode

https://github.com/InfernalAzazel/naive-pro-components/blob/c0c782184f035c98f43ee742e7636da0b8d696f3/docs/.vitepress/theme/index.ts#L12

browser mode uses sandbox isolation to run your demo independently in the sandbox, but the sandbox does not inherit globally registered components.

Having sandboxes inherit globally registered components is something I think is necessary, and I intend to start implementing it

Great!

[SharpGoldWaveMaker]

@InfernalAzazel

I personally recommend that you import components directly into the demo for the following reasons:

1. Global imports may affect document performance, although the impact is minor.

Global import will cause users to load all the components in Navie and NaviePro at once when they first visit your website, causing the website to open slowly.

2. The components imported directly in the demo will only be loaded when the relevant documents are opened by the user, so there is better performance, that is, the so-called on-demand loading.

For your document learners, they will use your components according to your demo, so they will also get better performance.

And how the components are loaded is more intuitive to some beginners.

However, I still plan to implement global registration and resolve the performance issues so that your component library supports learners to load on-demand through plug-ins such as unplugin-components-vue.

It is recommended that you write the document by [direct introduction](https://www.naiveui.com/en-US/os-theme/docs/usage-sfc#Import-Directly-(Recommended) first

[InfernalAzazel]

@InfernalAzazel

I personally recommend that you import components directly into the demo for the following reasons:

1. Global imports may affect document performance, although the impact is minor.

Global import will cause users to load all the components in Navie and NaviePro at once when they first visit your website, causing the website to open slowly.

2. The components imported directly in the demo will only be loaded when the relevant documents are opened by the user, so there is better performance, that is, the so-called on-demand loading.

For your document learners, they will use your components according to your demo, so they will also get better performance.

And how the components are loaded is more intuitive to some beginners.

However, I still plan to implement global registration and resolve the performance issues so that your component library supports learners to load on-demand through plug-ins such as unplugin-components-vue.

It is recommended that you write the document by [direct introduction](https://www.naiveui.com/en-US/os-theme/docs/usage-sfc#Import-Directly-(Recommended) first

Thank you for your valuable feedback. The specific specifications for Naive Pro Components are still being finalized, but I want to keep them as simple as possible and allow the vast majority of people to understand the component code and potentially participate in PR. As for on-demand introduction, I need to learn some and achieve it while maintaining the Vue code style. I will not use TS TSX temporarily.