feat(core): allow non-default-export client config file (#1564)

Co-authored-by: meteorlxy <meteor.lxy@foxmail.com>

Author: Mister-Hope

e2e/docs/.vuepress/config.ts

@@ -3,6 +3,7 @@ import { viteBundler } from '@vuepress/bundler-vite'
 import { webpackBundler } from '@vuepress/bundler-webpack'
 import { defineUserConfig } from 'vuepress'
 import { path } from 'vuepress/utils'
+import { fooPlugin } from './plugins/foo/fooPlugin.js'
 import { e2eTheme } from './theme/node/e2eTheme.js'
 
 const E2E_BASE = (process.env.E2E_BASE ?? '/') as '/' | `/${string}/`
@@ -80,4 +81,6 @@ export default defineUserConfig({
       }
     }
   },
+
+  plugins: [fooPlugin],
 })

e2e/docs/.vuepress/plugins/foo/fooPlugin.ts

@@ -0,0 +1,11 @@
+import { getDirname, path } from 'vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+
+export const fooPlugin = {
+  name: 'test-plugin',
+  clientConfigFile: path.resolve(
+    __dirname,
+    './nonDefaultExportClientConfig.js',
+  ),
+}

e2e/docs/.vuepress/plugins/foo/nonDefaultExportClientConfig.js

@@ -0,0 +1,2 @@
+// test non-default-export clientConfig
+import './test.css'

e2e/docs/.vuepress/plugins/foo/test.css

@@ -0,0 +1,3 @@
+#non-default-export {
+  font-size: 123px;
+}

e2e/docs/client-config/non-default-export.md

@@ -0,0 +1 @@
+# non-default-export

e2e/tests/client-config/non-default-export.spec.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test'
+
+test('should apply styles correctly if the client config file does not have default export', async ({
+  page,
+}) => {
+  await page.goto('client-config/non-default-export.html')
+  await expect(page.locator('#non-default-export')).toHaveCSS(
+    'font-size',
+    '123px',
+  )
+})

packages/core/src/app/prepare/prepareClientConfigs.ts

@@ -11,12 +11,14 @@ export const prepareClientConfigs = async (app: App): Promise<void> => {
   // generate client config files entry
   const content = `\
 ${clientConfigFiles
-  .map((filePath, index) => `import clientConfig${index} from '${filePath}'`)
+  .map(
+    (filePath, index) => `import * as clientConfig${index} from '${filePath}'`,
+  )
   .join('\n')}
 
 export const clientConfigs = [
 ${clientConfigFiles.map((_, index) => `  clientConfig${index},`).join('\n')}
-]
+].map((m) => m.default).filter(Boolean)
 `
 
   await app.writeTemp('internal/clientConfigs.js', content)