chore: fix demo, update version and changelog

.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "pnpm serve"
+}

CHANGELOG.md

@@ -1,3 +1,19 @@
+## 6.5.5
+
+* Removed the custom element registration enhancement for strict CSP builds so that they won't contain `new Function`.
+
+## 6.5.4
+
+* Cleaned up the `console.log` call sneaked in by mistake.
+
+## 6.5.3
+
+* Fixed default behavior for `notMerge` option (#691).
+
+## 6.5.2
+
+* Added `dist/csp/*` to support strict CSP with extracted CSS file.
+
 ## 6.5.1
 
 * Fixed types for mouse events.

README.md

@@ -1,12 +1,12 @@
-# Vue-ECharts
+<h1 align="center">Vue-ECharts</h1>
 
-> Vue.js component for Apache ECharts.
+<p align="center">Vue.js <sup>(v2/v3)</sup> component for Apache ECharts <sup>(v5)</sup>.</p>
+<p align="center"><a href="https://vue-echarts.dev/">View Demo →</a></p>
+<p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"/></a><a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"> <img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"/></a></p>
 
-> [🇨🇳 中文版](./README.zh-Hans.md)
+---
 
-Uses [Apache ECharts](https://echarts.apache.org/en/index.html) 5 and works for both [Vue.js](https://vuejs.org/) 2/3.
-
-## 💡 Heads up 💡
+<h2>💡 Heads up 💡 <a href="./README.zh-Hans.md"><img src="https://img.shields.io/badge/%F0%9F%87%A8%F0%9F%87%B3-%E4%B8%AD%E6%96%87%E7%89%88-white?labelColor=white" alt="前往中文版" align="right" height="24"/></a></h2>
 
 If you are migrating from `vue-echarts` ≤ 5, you should read the _[Migration to v6](#migration-to-v6)_ section before you update to v6.
 
@@ -225,9 +225,9 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.4"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -245,9 +245,9 @@ app.component('v-chart', VueECharts)
 
 <!-- vue2Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.4"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -453,6 +453,10 @@ Vue-ECharts support the following events:
 
 See supported events [here →](https://echarts.apache.org/en/api.html#events)
 
+## CSP: `style-src` or `style-src-elem`
+
+If you are applying a CSP to prevent inline `<style>` injection, you need to use files from `dist/csp` directory and include `dist/csp/style.css` into your app manually.
+
 ## Migration to v6
 
 > 💡 Please make sure to read the [migration guide](https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide) for ECharts 5 as well.

README.zh-Hans.md

@@ -1,8 +1,10 @@
-# Vue-ECharts
+<h1 align="center">Vue-ECharts</h1>
 
-> Apache ECharts 的 Vue.js 组件。
+<p align="center">Apache ECharts <sup>(v5)</sup> 的 Vue.js <sup>(v2/v3)</sup> 组件。</p>
+<p align="center"><a href="https://vue-echarts.dev/">查看 Demo →</a></p>
+<p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"/></a><a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"> <img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"/></a></p>
 
-使用 [Apache ECharts](https://echarts.apache.org/zh/index.html) 5，同时支持 [Vue.js](https://vuejs.org/) 2/3。
+---
 
 ## 💡 注意 💡
 
@@ -223,9 +225,9 @@ import "echarts";
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.4"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -243,9 +245,9 @@ app.component('v-chart', VueECharts)
 
 <!-- vue2Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.4"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -451,6 +453,10 @@ import { THEME_KEY } from 'vue-echarts'
 
 静态方法请直接通过 [`echarts` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。
 
+## CSP: `style-src` 或 `style-src-elem`
+
+如果你正在应用 CSP 来防止内联 `<style>` 注入，则需要使用 `dist/csp` 目录中的文件，并手动引入 `dist/csp/style.css`。
+
 ## 迁移到 v6
 
 > 💡 请确保同时查阅 ECharts 5 的[升级指南](https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97)。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.5.1",
+  "version": "6.5.5",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
@@ -10,9 +10,9 @@
     "build:3": "vue-demi-switch 3 && rollup -c rollup.config.js",
     "lint": "vue-cli-service lint",
     "build:demo": "vue-cli-service build",
-    "docs": "node -r esm ./scripts/docs.js",
+    "docs": "node ./scripts/docs.js",
     "postinstall": "node ./scripts/postinstall.js",
-    "prepare": "pnpm run build"
+    "prepublishOnly": "pnpm run build"
   },
   "main": "dist/index.cjs.min.js",
   "module": "dist/index.esm.min.js",
@@ -28,6 +28,7 @@
   "devDependencies": {
     "@babel/core": "^7.18.6",
     "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-replace": "^5.0.2",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@vue/cli-plugin-babel": "^5.0.7",
@@ -45,7 +46,6 @@
     "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-vue": "^8.7.1",
-    "esm": "^3.2.25",
     "postcss": "^8.4.14",
     "postcss-loader": "^5.3.0",
     "postcss-nested": "^5.0.6",

rollup.config.js

@@ -1,11 +1,42 @@
 import typescript from "rollup-plugin-ts";
 import { terser } from "rollup-plugin-terser";
 import resolve from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
 import styles from "rollup-plugin-styles";
 import { injectVueDemi } from "./scripts/rollup";
 
+/**
+ * Modifies the Rollup options for a build to support strict CSP
+ * @param {import('rollup').RollupOptions} options the original options
+ * @param {boolean} csp whether to support strict CSP
+ * @returns {import('rollup').RollupOptions} the modified options
+ */
+function configBuild(options, csp) {
+  const result = { ...options };
+  const { plugins, output } = result;
+
+  result.plugins = [
+    ...(csp ? [replace({ __CSP__: `${csp}`, preventAssignment: true })] : []),
+    ...plugins,
+    csp ? styles({ mode: ["extract", "style.css"] }) : styles()
+  ];
+
+  // modify output file names
+  if (csp && output) {
+    result.output = (Array.isArray(output) ? output : [output]).map(output => {
+      return {
+        ...output,
+        file: output.file.replace(/^dist\//, "dist/csp/"),
+        assetFileNames: "[name][extname]"
+      };
+    });
+  }
+
+  return result;
+}
+
 /** @type {import('rollup').RollupOptions[]} */
-const options = [
+const builds = [
   {
     input: "src/index.ts",
     plugins: [
@@ -15,8 +46,7 @@ const options = [
           outputPath: (path, kind) =>
             kind === "declaration" ? "dist/index.d.ts" : path
         }
-      }),
-      styles()
+      })
     ],
     external: ["vue-demi", "echarts/core", "resize-detector"],
     output: {
@@ -27,7 +57,7 @@ const options = [
   },
   {
     input: "src/index.ts",
-    plugins: [typescript(), styles()],
+    plugins: [typescript()],
     external: ["vue-demi", "echarts/core", "resize-detector"],
     output: [
       {
@@ -65,7 +95,7 @@ const options = [
   },
   {
     input: "src/global.ts",
-    plugins: [resolve(), typescript(), styles()],
+    plugins: [resolve(), typescript()],
     external: ["vue-demi", "echarts", "echarts/core"],
     output: [
       {
@@ -105,4 +135,7 @@ const options = [
   }
 ];
 
-export default options;
+export default [
+  ...builds.map(options => configBuild(options, false)),
+  ...builds.map(options => configBuild(options, true))
+];

scripts/docs.js

@@ -1,16 +1,16 @@
-import fs from "fs";
-import { resolve } from "path";
-import commentMark from "comment-mark";
-import { name, version } from "../package.json";
+const fs = require("fs");
+const { resolve } = require("path");
+const commentMark = require("comment-mark");
+const { name, version } = require("../package.json");
 
 const { readFile, writeFile } = fs.promises;
 
 const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
 
 const DEP_VERSIONS = {
-  "vue@3": "3.2.37",
-  "vue@2": "2.7.5",
-  echarts: "5.3.3",
+  "vue@3": "3.2.45",
+  "vue@2": "2.7.14",
+  echarts: "5.4.1",
   [name]: version
 };
 

scripts/sandbox/.eslintrc.json

@@ -1,6 +0,0 @@
-{
-  "globals": {
-    "Vue": true,
-    "VueECharts": true
-  }
-}

scripts/sandbox/index.css

@@ -1,3 +0,0 @@
-#app {
-  height: 400px;
-}

scripts/sandbox/index.html

@@ -1,3 +0,0 @@
-<div id="app">
-  <v-chart autoresize :option="option"/>
-</div>

scripts/sandbox/vue2.js

@@ -1,55 +0,0 @@
-Vue.component("v-chart", VueECharts);
-
-new Vue({
-  el: "#app",
-  data() {
-    return {
-      option: {
-        textStyle: {
-          fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
-        },
-        title: {
-          text: "Traffic Sources",
-          left: "center"
-        },
-        tooltip: {
-          trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)"
-        },
-        legend: {
-          orient: "vertical",
-          left: "left",
-          data: [
-            "Direct",
-            "Email",
-            "Ad Networks",
-            "Video Ads",
-            "Search Engines"
-          ]
-        },
-        series: [
-          {
-            name: "Traffic Sources",
-            type: "pie",
-            radius: "55%",
-            center: ["50%", "60%"],
-            data: [
-              { value: 335, name: "Direct" },
-              { value: 310, name: "Email" },
-              { value: 234, name: "Ad Networks" },
-              { value: 135, name: "Video Ads" },
-              { value: 1548, name: "Search Engines" }
-            ],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
-              }
-            }
-          }
-        ]
-      }
-    };
-  }
-});

scripts/sandbox/vue3.js

@@ -1,54 +0,0 @@
-Vue.createApp({
-  data() {
-    return {
-      option: {
-        textStyle: {
-          fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
-        },
-        title: {
-          text: "Traffic Sources",
-          left: "center"
-        },
-        tooltip: {
-          trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)"
-        },
-        legend: {
-          orient: "vertical",
-          left: "left",
-          data: [
-            "Direct",
-            "Email",
-            "Ad Networks",
-            "Video Ads",
-            "Search Engines"
-          ]
-        },
-        series: [
-          {
-            name: "Traffic Sources",
-            type: "pie",
-            radius: "55%",
-            center: ["50%", "60%"],
-            data: [
-              { value: 335, name: "Direct" },
-              { value: 310, name: "Email" },
-              { value: 234, name: "Ad Networks" },
-              { value: 135, name: "Video Ads" },
-              { value: 1548, name: "Search Engines" }
-            ],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
-              }
-            }
-          }
-        ]
-      }
-    };
-  }
-})
-  .component("v-chart", VueECharts)
-  .mount("#app");

src/ECharts.ts

@@ -41,7 +41,8 @@ import { omitOn, unwrapInjected } from "./utils";
 import { register, TAG_NAME, type EChartsElement } from "./wc";
 import "./style.css";
 
-const wcRegistered = register();
+const __CSP__ = false;
+const wcRegistered = __CSP__ ? false : register();
 
 if (Vue2) {
   Vue2.config.ignoredElements.push(TAG_NAME);
@@ -233,7 +234,9 @@ export default defineComponent({
                 init();
               } else {
                 chart.value.setOption(option, {
-                  notMerge: option.value !== oldOption?.value,
+                  // mutating `option` will lead to `notMerge: false` and
+                  // replacing it with new reference will lead to `notMerge: true`
+                  notMerge: option !== oldOption,
                   ...realUpdateOptions.value
                 });
               }

vue.config.js

@@ -21,5 +21,15 @@ module.exports = {
       .test(/\.svg$/)
       .use("raw-loader")
       .loader("raw-loader");
+
+    config.plugin("define").tap(([options]) => [
+      {
+        ...options,
+        __CSP__: "false"
+      }
+    ]);
+  },
+  devServer: {
+    allowedHosts: "all"
   }
 };