fix: use simple assign for computed properties (fix #13)

JuniorTour · Sep 14, 2021 · b5e8bd1 · b5e8bd1
1 parent 8c3d97e
commit b5e8bd1
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 2 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -104,7 +104,10 @@ function renderCompiler(code, options) {
     filename: 'compiledTemplate',
     // not enable strict mode, in order to parse WithStatement
     sourceType: 'script',
-    plugins: ['@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining', '@babel/plugin-transform-block-scoping', '@babel/plugin-transform-destructuring', "@babel/plugin-transform-spread", ["@babel/plugin-proposal-object-rest-spread", {
+    assumptions: {
+      setComputedProperties: true
+    },
+    plugins: ['@babel/plugin-transform-computed-properties', '@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining', '@babel/plugin-transform-block-scoping', '@babel/plugin-transform-destructuring', "@babel/plugin-transform-spread", ["@babel/plugin-proposal-object-rest-spread", {
       loose: true,
       useBuiltIns: true
     }], '@babel/plugin-transform-arrow-functions', '@babel/plugin-transform-parameters', parseWithStatementToVm]

diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.14.2",
     "@babel/plugin-transform-arrow-functions": "^7.14.5",
     "@babel/plugin-transform-block-scoping": "^7.14.5",
+    "@babel/plugin-transform-computed-properties": "^7.14.5",
     "@babel/plugin-transform-destructuring": "^7.14.5",
     "@babel/plugin-transform-parameters": "^7.14.5",
     "@babel/plugin-transform-spread": "^7.14.5",

diff --git a/src/renderCompiler.js b/src/renderCompiler.js
@@ -16,7 +16,11 @@ export function renderCompiler(code, options) {
     filename: 'compiledTemplate',
     // not enable strict mode, in order to parse WithStatement
     sourceType: 'script',
+    assumptions: {
+      setComputedProperties: true
+    },
     plugins: [
+      '@babel/plugin-transform-computed-properties',
       '@babel/plugin-proposal-nullish-coalescing-operator',
       '@babel/plugin-proposal-optional-chaining',
       '@babel/plugin-transform-block-scoping',

diff --git a/test/compileTemplate.spec.js b/test/compileTemplate.spec.js
@@ -51,3 +51,13 @@ test('should use object.assign for object rest spread', () => {
   expect(errors.length === 0).toBeTruthy()
   expect(render).toMatch(`Object.assign({}, _vm.a) ? _c('h3', [_vm._v("object rest spread")]) : _vm._e()`)
 })
+
+test('should use simple assign for computed properties', () => {
+  // https://github.com/JuniorTour/vue-template-babel-compiler/issues/13
+  const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(
+    '<div :class="{[`${foo}_bar`]: true}"></div>'
+  )
+
+  expect(errors.length === 0).toBeTruthy()
+  expect(render).toMatch('class: (_class = {}, _class[`${_vm.foo}_bar`] = true, _class)')
+})
diff --git a/yarn.lock b/yarn.lock
@@ -536,7 +536,7 @@
 
 "@babel/plugin-transform-computed-properties@^7.14.5":
   version "7.14.5"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz#1b9d78987420d11223d41195461cc43b974b204f"
   integrity sha512-pWM+E4283UxaVzLb8UBXv4EIxMovU4zxT1OPnpHJcmnvyY9QbPPTKZfEj31EUvG3/EQRbYAGaYEUZ4yWOBC2xg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"