chore: fix demo, update version and changelog

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 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).

README.md

@@ -227,7 +227,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 ```html
 <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.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.4"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -247,7 +247,7 @@ app.component('v-chart', VueECharts)
 ```html
 <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.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.4"></script>
 ```
 <!-- vue2Scripts:end -->
 

README.zh-Hans.md

@@ -227,7 +227,7 @@ import "echarts";
 ```html
 <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.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.4"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -247,7 +247,7 @@ app.component('v-chart', VueECharts)
 ```html
 <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.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.4"></script>
 ```
 <!-- vue2Scripts:end -->
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.5.3",
+  "version": "6.5.5",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
@@ -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",

rollup.config.js

@@ -1,25 +1,28 @@
 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";
 
 /**
- * Convert Rollup option to a style extracted/injected version
- * @param {import('rollup').RollupOptions} option
- * @param {boolean} extract
- * @returns {import('rollup').RollupOptions}
+ * 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 handleStyle(option, extract) {
-  // inject styles plugin
-  const result = { ...option };
+function configBuild(options, csp) {
+  const result = { ...options };
   const { plugins, output } = result;
-  result.plugins = (plugins || []).concat(
-    extract ? styles({ mode: ["extract", "style.css"] }) : styles()
-  );
+
+  result.plugins = [
+    ...(csp ? [replace({ __CSP__: `${csp}`, preventAssignment: true })] : []),
+    ...plugins,
+    csp ? styles({ mode: ["extract", "style.css"] }) : styles()
+  ];
 
   // modify output file names
-  if (extract && output) {
+  if (csp && output) {
     result.output = (Array.isArray(output) ? output : [output]).map(output => {
       return {
         ...output,
@@ -33,7 +36,7 @@ function handleStyle(option, extract) {
 }
 
 /** @type {import('rollup').RollupOptions[]} */
-const options = [
+const builds = [
   {
     input: "src/index.ts",
     plugins: [
@@ -133,6 +136,6 @@ const options = [
 ];
 
 export default [
-  ...options.map(option => handleStyle(option, false)),
-  ...options.map(option => handleStyle(option, true))
+  ...builds.map(options => configBuild(options, false)),
+  ...builds.map(options => configBuild(options, true))
 ];

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);
@@ -232,7 +233,6 @@ export default defineComponent({
               if (!chart.value) {
                 init();
               } else {
-                console.log(`notMerge: ${option !== oldOption}`);
                 chart.value.setOption(option, {
                   // mutating `option` will lead to `notMerge: false` and
                   // replacing it with new reference will lead to `notMerge: true`

vue.config.js

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