feat: added automatic import of cesium css (#9)

* feat: added automatic import of cesium css * doc: updated README * docs: zh-cn doc. * fix(@cesium/engine): fixes draco compressed issue with @cesium/engine (#11) * feat: added automatic import of cesium css * fix: added css option flag * fix: added css option flag * docs: zh-cn * fix: use unminified css * fix: do not import css when `options.css` is false. `index.ts` should also copy styles. --------- Co-authored-by: s3xysteak <j.yulia@qq.com> Co-authored-by: s3xysteak <s3xysteak@outlook.com>
s3xysteak · Sep 19, 2024 · b8fa90f · b8fa90f
1 parent f2571cc
commit b8fa90f
Show file tree

Hide file tree

Showing 17 changed files with 176 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -49,6 +49,22 @@ Object.defineProperty(globalThis, 'CESIUM_BASE_URL', {
 
 To prevent it, see `customCesiumBaseUrl` in Options.
 
+If using Cesium version 1.97 or older, you can set `css` option to `true`:
+
+```javascript
+export default defineConfig({
+  plugins: [
+    cesium({ css: true })
+  ]
+})
+```
+
+That will automatically add Cesium's css to your `index.html`:
+
+```html
+<link rel="stylesheet" href="./cesium-package/Widgets/widgets.css">
+```
+
 ## :wrench: Options
 
 In addition, the plugin provides some configuration options:
@@ -72,7 +88,11 @@ export default defineConfig({
       /**
        * If `true`, you need to manually set the CESIUM_BASE_URL.
        */
-      customCesiumBaseUrl: false
+      customCesiumBaseUrl: false,
+      /**
+       * If `true`, Cesium's css will be added automatically.
+       */
+      css: boolean
     })
   ]
 })
@@ -104,4 +124,5 @@ export default defineConfig({
 ```
 
 ## Others
+
 If you are a Vue user, maybe try [cesium-use](https://s3xysteak.github.io/cesium-use/) !
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -2,7 +2,7 @@
 
 [English](README.md) | 简体中文
 
-这会将 `Cesium.js` 外部化，并在打包时自动拷贝 CesiumJS 的四大库和核心文件。
+这会将 `Cesium.js` 与其样式 `widget.css` 外部化，并在打包时自动拷贝 CesiumJS 的四大库和核心文件。
 
 它还支持 [@cesium/engine](https://community.cesium.com/t/cesium-engine-and-cesium-widgets-are-now-available-for-testing/20898) !
 
@@ -49,6 +49,22 @@ Object.defineProperty(globalThis, 'CESIUM_BASE_URL', {
 
 如果要阻止这个默认行为，见Options中的`customCesiumBaseUrl`。
 
+如果使用的Cesium版本为v1.97及更高，你可以将 `css` 选项设置为 `true`:
+
+```javascript
+export default defineConfig({
+  plugins: [
+    cesium({ css: true })
+  ]
+})
+```
+
+这将会自动将Cesium的样式添加到你的 `index.html`:
+
+```html
+<link rel="stylesheet" href="./cesium-package/Widgets/widgets.css">
+```
+
 ## :wrench: 选项
 
 除此以外，插件提供了一些配置项：
@@ -72,7 +88,11 @@ export default defineConfig({
       /**
        * 设置为true时，你需要自行设置CESIUM_BASE_URL
        */
-      customCesiumBaseUrl: false
+      customCesiumBaseUrl: false,
+      /**
+       * 为 `true` 时, Cesium的样式将会被自动添加.
+       */
+      css: boolean
     })
   ]
 })

diff --git a/examples/preact/package.json b/examples/preact/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@preact/signals": "^1.3.0",
-    "cesium": "^1.119.0",
+    "cesium": "^1.121.1",
     "preact": "^10.22.0"
   },
   "devDependencies": {

diff --git a/examples/react/package.json b/examples/react/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "cesium": "^1.119.0",
+    "cesium": "^1.121.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

diff --git a/examples/solid/package.json b/examples/solid/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "cesium": "^1.119.0",
+    "cesium": "^1.121.1",
     "solid-js": "^1.8.17"
   },
   "devDependencies": {

diff --git a/examples/svelte/package.json b/examples/svelte/package.json
@@ -20,6 +20,6 @@
     "vite-plugin-cesium-build": "^0.4.3"
   },
   "dependencies": {
-    "cesium": "^1.119.0"
+    "cesium": "^1.121.1"
   }
 }
diff --git a/examples/vanilla/package.json b/examples/vanilla/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "cesium": "^1.119.0"
+    "cesium": "^1.121.1"
   },
   "devDependencies": {
     "typescript": "^5.2.2",

diff --git a/examples/vue/package.json b/examples/vue/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "cesium": "^1.119.0",
+    "cesium": "^1.121.1",
     "vue": "^3.4.29"
   },
   "devDependencies": {

diff --git a/src/core.ts b/src/core.ts
@@ -1,4 +1,5 @@
 export * from './core/copyCesium'
 export * from './core/importCesium'
+export * from './core/importCss'
 export * from './core/resolveOptions'
 export * from './core/setBaseUrl'
diff --git a/src/core/importCss.ts b/src/core/importCss.ts
@@ -0,0 +1,27 @@
+import type { Plugin, ResolvedConfig } from 'vite'
+import type { BuildCesiumOptions } from './resolveOptions'
+import { isString } from './utils'
+
+export function importCss(options: BuildCesiumOptions, path: (base: string) => string, apply?: Plugin['apply']): Plugin {
+  const { css } = options
+  let base: ResolvedConfig['base']
+
+  return {
+    name: `vite-plugin-cesium-build:importCss${isString(apply) ? `:${apply}` : ''}`,
+    apply,
+    configResolved(resolvedConfig) {
+      base = resolvedConfig.base
+    },
+    transformIndexHtml: css
+      ? () => [
+          {
+            tag: 'link',
+            attrs: {
+              rel: 'stylesheet',
+              href: path(base),
+            },
+          },
+        ]
+      : void 0,
+  }
+}
diff --git a/src/core/resolveOptions.ts b/src/core/resolveOptions.ts
@@ -17,18 +17,26 @@ export interface BuildCesiumOptions {
    * @default false
    */
   customCesiumBaseUrl: boolean | string
+  /**
+   * If `true`, cesium's css will be added automatically.
+   *
+   * @default false
+   */
+  css: boolean
 }
 
 export function resolveOptions(options: Partial<BuildCesiumOptions> = {}, src: string): BuildCesiumOptions {
   const {
     from = src,
     to = 'cesium-package',
     customCesiumBaseUrl = false,
+    css = false,
   } = options
 
   return {
     from: from.replace(/[/\\]$/, ''),
     to: to.replace(/^[/\\]|[/\\]$/, ''),
     customCesiumBaseUrl,
+    css,
   }
 }
diff --git a/src/engine.ts b/src/engine.ts
@@ -1,33 +1,50 @@
 import type { Plugin } from 'vite'
 
-import { type BuildCesiumOptions, copyCesium, resolveOptions, setBaseUrl } from './core'
+import { type BuildCesiumOptions, copyCesium, importCss, resolveOptions, setBaseUrl } from './core'
 
 function pluginEntry(pluginOptions?: Partial<BuildCesiumOptions>): Plugin[] {
   const options = resolveOptions(pluginOptions, 'node_modules/@cesium/engine')
 
+  const customCopyList = [
+    {
+      src: `${options.from}/Source/Assets/*`,
+      dest: `${options.to}/Assets/`,
+    },
+    {
+      src: `${options.from}/Source/ThirdParty/*.wasm`,
+      dest: `${options.to}/ThirdParty/`,
+    },
+    {
+      src: `${options.from}/Build/ThirdParty/*`,
+      dest: `${options.to}/ThirdParty/`,
+    },
+    {
+      src: `${options.from}/Build/Workers/*`,
+      dest: `${options.to}/Workers/`,
+    },
+  ]
+
+  if (options.css) {
+    customCopyList.push({
+      src: `${options.from}/Source/Widget/CesiumWidget.css`,
+      dest: `${options.to}/Widget/`,
+    })
+  }
+
   return [
     ...copyCesium(
       options,
       [],
-      [
-        {
-          src: `${options.from}/Source/Assets/*`,
-          dest: `${options.to}/Assets/`,
-        },
-        {
-          src: `${options.from}/Source/ThirdParty/*.wasm`,
-          dest: `${options.to}/ThirdParty/`,
-        },
-        {
-          src: `${options.from}/Build/ThirdParty/*`,
-          dest: `${options.to}/ThirdParty/`,
-        },
-        {
-          src: `${options.from}/Build/Workers/*`,
-          dest: `${options.to}/Workers/`,
-        },
-      ],
+      customCopyList,
     ),
+
+    ...options.css
+      ? [
+          importCss(options, base => `${base}${options.from}/Source/Widget/CesiumWidget.css`, 'serve'),
+          importCss(options, base => `${base}${options.to}/Widget/CesiumWidget.css`, 'build'),
+        ]
+      : [],
+
     setBaseUrl(options),
   ]
 }

diff --git a/src/index.ts b/src/index.ts
@@ -2,25 +2,42 @@ import type { Plugin } from 'vite'
 
 import { viteExternalsPlugin } from 'vite-plugin-externals'
 
-import { type BuildCesiumOptions, copyCesium, importCesium, resolveOptions, setBaseUrl } from './core'
+import { type BuildCesiumOptions, copyCesium, importCesium, importCss, resolveOptions, setBaseUrl } from './core'
 
 function pluginEntry(pluginOptions?: Partial<BuildCesiumOptions>): Plugin[] {
   const options = resolveOptions(pluginOptions, 'node_modules/cesium/Build/Cesium')
 
+  const customCopyList = [
+    {
+      src: `${options.from}/Cesium.js`,
+      dest: `${options.to}/`,
+    },
+  ]
+  if (options.css) {
+    customCopyList.push({
+      src: `${options.from}/Widgets/widgets.css`,
+      dest: `${options.to}/Widgets/`,
+    })
+  }
+
   return [
     viteExternalsPlugin({ cesium: 'Cesium' }),
     ...copyCesium(
       options,
       ['Assets', 'ThirdParty', 'Widgets', 'Workers'],
-      {
-        src: `${options.from}/Cesium.js`,
-        dest: `${options.to}/`,
-      },
+      customCopyList,
     ),
 
     importCesium(base => `${base}${options.from}Unminified/Cesium.js`, 'serve'),
     importCesium(base => `${base}${options.to}/Cesium.js`, 'build'),
 
+    ...options.css
+      ? [
+          importCss(options, base => `${base}${options.from}/Widgets/widgets.css`, 'serve'),
+          importCss(options, base => `${base}${options.to}/Widgets/widgets.css`, 'build'),
+        ]
+      : [],
+
     setBaseUrl(options),
   ]
 }

diff --git a/test/playground/package.json b/test/playground/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "cesium": "^1.119.0"
+    "cesium": "^1.121.1"
   },
   "devDependencies": {
     "typescript": "^5.5.3",