update

CHANGELOG.md

@@ -1,3 +1,63 @@
+# [3.0.0-alpha.6](https://github.com/vuejs/vue-next/compare/v3.0.0-alpha.5...v3.0.0-alpha.6) (2020-02-22)
+
+
+### Bug Fixes
+
+* **compiler-core:** should alias name in helperString ([#743](https://github.com/vuejs/vue-next/issues/743)) ([7b987d9](https://github.com/vuejs/vue-next/commit/7b987d9450fc7befcd0946a0d53991d27ed299ec)), closes [#740](https://github.com/vuejs/vue-next/issues/740)
+* **compiler-dom:** properly stringify class/style bindings when hoisting static strings ([1b9b235](https://github.com/vuejs/vue-next/commit/1b9b235663b75db040172d2ffbee1dd40b4db032))
+* **reactivity:** should trigger all effects when array length is mutated ([#754](https://github.com/vuejs/vue-next/issues/754)) ([5fac655](https://github.com/vuejs/vue-next/commit/5fac65589b4455b98fd4e2f9eb3754f0acde97bb))
+* **sfc:** inherit parent scopeId on child root ([#756](https://github.com/vuejs/vue-next/issues/756)) ([9547c2b](https://github.com/vuejs/vue-next/commit/9547c2b93d6d8f469314cfe055960746a3e3acbe))
+* **types:** improve ref typing, close [#759](https://github.com/vuejs/vue-next/issues/759) ([627b9df](https://github.com/vuejs/vue-next/commit/627b9df4a293ae18071009d9cac7a5e995d40716))
+* **types:** update setup binding unwrap types for 6b10f0c ([a840e7d](https://github.com/vuejs/vue-next/commit/a840e7ddf0b470b5da27b7b2b8b5fcf39a7197a2)), closes [#738](https://github.com/vuejs/vue-next/issues/738)
+
+
+### Code Refactoring
+
+* preserve refs in reactive arrays ([775a7c2](https://github.com/vuejs/vue-next/commit/775a7c2b414ca44d4684badb29e8e80ff6b5d3dd)), closes [#737](https://github.com/vuejs/vue-next/issues/737)
+
+
+### Features
+
+* **reactivity:** expose unref and shallowRef ([e9024bf](https://github.com/vuejs/vue-next/commit/e9024bf1b7456b9cf9b913c239502593364bc773))
+* **runtime-core:** add watchEffect API ([99a2e18](https://github.com/vuejs/vue-next/commit/99a2e18c9711d3d1f79f8c9c59212880efd058b9))
+
+
+### Performance Improvements
+
+* **effect:** optimize effect trigger for array length mutation ([#761](https://github.com/vuejs/vue-next/issues/761)) ([76c7f54](https://github.com/vuejs/vue-next/commit/76c7f5426919f9d29a303263bc54a1e42a66e94b))
+* **reactivity:** only trigger all effects on Array length mutation if new length is shorter than old length ([33622d6](https://github.com/vuejs/vue-next/commit/33622d63600ba0f18ba4dae97bda882c918b5f7d))
+
+
+### BREAKING CHANGES
+
+* **runtime-core:** replace `watch(fn, options?)` with `watchEffect`
+
+    The `watch(fn, options?)` signature has been replaced by the new
+    `watchEffect` API, which has the same usage and behavior. `watch`
+    now only supports the `watch(source, cb, options?)` signature.
+
+* **reactivity:** reactive arrays no longer unwraps contained refs
+
+    When reactive arrays contain refs, especially a mix of refs and
+    plain values, Array prototype methods will fail to function
+    properly - e.g. sort() or reverse() will overwrite the ref's value
+    instead of moving it (see #737).
+
+    Ensuring correct behavior for all possible Array methods while
+    retaining the ref unwrapping behavior is exceedingly complicated; In
+    addition, even if Vue handles the built-in methods internally, it
+    would still break when the user attempts to use a 3rd party utility
+    function (e.g. lodash) on a reactive array containing refs.
+
+    After this commit, similar to other collection types like Map and
+    Set, Arrays will no longer automatically unwrap contained refs.
+
+    The usage of mixed refs and plain values in Arrays should be rare in
+    practice. In cases where this is necessary, the user can create a
+    computed property that performs the unwrapping.
+
+
+
 # [3.0.0-alpha.5](https://github.com/vuejs/vue-next/compare/v3.0.0-alpha.4...v3.0.0-alpha.5) (2020-02-18)
 
 
@@ -40,7 +100,7 @@
 
 ### Code Refactoring
 
-* **watch:** adjsut watch API behavior ([9571ede](https://github.com/vuejs/vue-next/commit/9571ede84bb6949e13c25807cc8f016ace29dc8a))
+* **watch:** adjust watch API behavior ([9571ede](https://github.com/vuejs/vue-next/commit/9571ede84bb6949e13c25807cc8f016ace29dc8a))
 
 
 ### Features
@@ -85,7 +145,7 @@
       behaves exactly the same as 2.x.
 
     - When using the effect signature or `{ immediate: true }`, the
-      intital execution is now performed synchronously instead of
+      initial execution is now performed synchronously instead of
       deferred until the component is mounted. This is necessary for
       certain use cases to work properly with `async setup()` and
       Suspense.

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "workspaces": [
     "packages/*"
   ],

packages/compiler-core/__tests__/transforms/transformElement.spec.ts

@@ -623,7 +623,7 @@ describe('compiler: element transform', () => {
 
   test(`props merging: style`, () => {
     const { node } = parseWithElementTransform(
-      `<div style="color: red" :style="{ color: 'red' }" />`,
+      `<div style="color: green" :style="{ color: 'red' }" />`,
       {
         nodeTransforms: [transformStyle, transformElement],
         directiveTransforms: {
@@ -646,7 +646,7 @@ describe('compiler: element transform', () => {
             elements: [
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
-                content: `_hoisted_1`,
+                content: `{"color":"green"}`,
                 isStatic: false
               },
               {

packages/compiler-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-core",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "description": "@vue/compiler-core",
   "main": "index.js",
   "module": "dist/compiler-core.esm-bundler.js",

packages/compiler-core/src/parse.ts

@@ -694,7 +694,7 @@ function parseAttributeValue(
     if (!match) {
       return undefined
     }
-    let unexpectedChars = /["'<=`]/g
+    const unexpectedChars = /["'<=`]/g
     let m: RegExpExecArray | null
     while ((m = unexpectedChars.exec(match[0])) !== null) {
       emitError(

packages/compiler-core/src/transforms/hoistStatic.ts

@@ -126,9 +126,9 @@ export function isStaticNode(
             return false
           }
         }
-        // only svg/foeignObject could be block here, however if they are static
+        // only svg/foreignObject could be block here, however if they are static
         // then they don't need to be blocks since there will be no nested
-        // udpates.
+        // updates.
         if (codegenNode.isBlock) {
           codegenNode.isBlock = false
         }

packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap

@@ -2,9 +2,6 @@
 
 exports[`compile should contain standard transforms 1`] = `
 "const _Vue = Vue
-const { createVNode: _createVNode } = _Vue
-
-const _hoisted_1 = {}
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -14,7 +11,7 @@ return function render(_ctx, _cache) {
       _createVNode(\\"div\\", { textContent: text }, null, 8 /* PROPS */, [\\"textContent\\"]),
       _createVNode(\\"div\\", { innerHTML: html }, null, 8 /* PROPS */, [\\"innerHTML\\"]),
       _createVNode(\\"div\\", null, \\"test\\"),
-      _createVNode(\\"div\\", { style: _hoisted_1 }, \\"red\\"),
+      _createVNode(\\"div\\", { style: {\\"color\\":\\"red\\"} }, \\"red\\"),
       _createVNode(\\"div\\", { style: {color: 'green'} }, null, 4 /* STYLE */)
     ], 64 /* STABLE_FRAGMENT */))
   }

packages/compiler-dom/__tests__/index.spec.ts

@@ -5,7 +5,7 @@ describe('compile', () => {
     const { code } = compile(`<div v-text="text"></div>
         <div v-html="html"></div>
         <div v-cloak>test</div>
-        <div style="color=red">red</div>
+        <div style="color:red">red</div>
         <div :style="{color: 'green'}"></div>`)
 
     expect(code).toMatchSnapshot()

packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts

@@ -77,8 +77,8 @@ describe('stringify static html', () => {
 
   test('serliazing constant bindings', () => {
     const { ast } = compileWithStringify(
-      `<div><div>${repeat(
-        `<span :class="'foo' + 'bar'">{{ 1 }} + {{ false }}</span>`,
+      `<div><div :style="{ color: 'red' }">${repeat(
+        `<span :class="[{ foo: true }, { bar: true }]">{{ 1 }} + {{ false }}</span>`,
         StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
       )}</div></div>`
     )
@@ -89,8 +89,8 @@ describe('stringify static html', () => {
       callee: CREATE_STATIC,
       arguments: [
         JSON.stringify(
-          `<div>${repeat(
-            `<span class="foobar">1 + false</span>`,
+          `<div style="color:red;">${repeat(
+            `<span class="foo bar">1 + false</span>`,
             StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
           )}</div>`
         )

packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts

@@ -26,17 +26,8 @@ function transformWithStyleTransform(
 }
 
 describe('compiler: style transform', () => {
-  test('should transform into directive node and hoist value', () => {
-    const { root, node } = transformWithStyleTransform(
-      `<div style="color: red"/>`
-    )
-    expect(root.hoists).toMatchObject([
-      {
-        type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `{"color":"red"}`,
-        isStatic: false
-      }
-    ])
+  test('should transform into directive node', () => {
+    const { node } = transformWithStyleTransform(`<div style="color: red"/>`)
     expect(node.props[0]).toMatchObject({
       type: NodeTypes.DIRECTIVE,
       name: `bind`,
@@ -47,7 +38,7 @@ describe('compiler: style transform', () => {
       },
       exp: {
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `_hoisted_1`,
+        content: `{"color":"red"}`,
         isStatic: false
       }
     })
@@ -71,7 +62,7 @@ describe('compiler: style transform', () => {
           },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `_hoisted_1`,
+            content: `{"color":"red"}`,
             isStatic: false
           }
         }

packages/compiler-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-dom",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "description": "@vue/compiler-dom",
   "main": "index.js",
   "module": "dist/compiler-dom.esm-bundler.js",
@@ -34,6 +34,6 @@
   },
   "homepage": "https://github.com/vuejs/vue/tree/dev/packages/compiler-dom#readme",
   "dependencies": {
-    "@vue/compiler-core": "3.0.0-alpha.5"
+    "@vue/compiler-core": "3.0.0-alpha.6"
   }
 }

packages/compiler-dom/src/transforms/stringifyStatic.ts

@@ -14,7 +14,10 @@ import {
   isString,
   isSymbol,
   escapeHtml,
-  toDisplayString
+  toDisplayString,
+  normalizeClass,
+  normalizeStyle,
+  stringifyStyle
 } from '@vue/shared'
 
 // Turn eligible hoisted static trees into stringied static nodes, e.g.
@@ -84,8 +87,15 @@ function stringifyElement(
       }
     } else if (p.type === NodeTypes.DIRECTIVE && p.name === 'bind') {
       // constant v-bind, e.g. :foo="1"
+      let evaluated = evaluateConstant(p.exp as SimpleExpressionNode)
+      const arg = p.arg && (p.arg as SimpleExpressionNode).content
+      if (arg === 'class') {
+        evaluated = normalizeClass(evaluated)
+      } else if (arg === 'style') {
+        evaluated = stringifyStyle(normalizeStyle(evaluated))
+      }
       res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml(
-        evaluateConstant(p.exp as ExpressionNode)
+        evaluated
       )}"`
     }
   }
@@ -151,7 +161,7 @@ function evaluateConstant(exp: ExpressionNode): string {
       if (c.type === NodeTypes.TEXT) {
         res += c.content
       } else if (c.type === NodeTypes.INTERPOLATION) {
-        res += evaluateConstant(c.content)
+        res += toDisplayString(evaluateConstant(c.content))
       } else {
         res += evaluateConstant(c)
       }

packages/compiler-dom/src/transforms/transformStyle.ts

@@ -17,12 +17,11 @@ export const transformStyle: NodeTransform = (node, context) => {
     node.props.forEach((p, i) => {
       if (p.type === NodeTypes.ATTRIBUTE && p.name === 'style' && p.value) {
         // replace p with an expression node
-        const exp = context.hoist(parseInlineCSS(p.value.content, p.loc))
         node.props[i] = {
           type: NodeTypes.DIRECTIVE,
           name: `bind`,
           arg: createSimpleExpression(`style`, true, p.loc),
-          exp,
+          exp: parseInlineCSS(p.value.content, p.loc),
           modifiers: [],
           loc: p.loc
         }
@@ -45,5 +44,5 @@ function parseInlineCSS(
       tmp.length > 1 && (res[tmp[0].trim()] = tmp[1].trim())
     }
   })
-  return createSimpleExpression(JSON.stringify(res), false, loc)
+  return createSimpleExpression(JSON.stringify(res), false, loc, true)
 }

packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "types": "dist/compiler-sfc.d.ts",
@@ -27,11 +27,11 @@
   },
   "homepage": "https://github.com/vuejs/vue/tree/dev/packages/compiler-sfc#readme",
   "peerDependencies": {
-    "vue": "3.0.0-alpha.5"
+    "vue": "3.0.0-alpha.6"
   },
   "dependencies": {
-    "@vue/compiler-core": "3.0.0-alpha.5",
-    "@vue/compiler-dom": "3.0.0-alpha.5",
+    "@vue/compiler-core": "3.0.0-alpha.6",
+    "@vue/compiler-dom": "3.0.0-alpha.6",
     "consolidate": "^0.15.1",
     "hash-sum": "^2.0.0",
     "lru-cache": "^5.1.1",

packages/compiler-ssr/__tests__/ssrElement.spec.ts

@@ -101,7 +101,7 @@ describe('ssr: element', () => {
       expect(
         getCompiledString(`<div style="color:red;" :style="bar"></div>`)
       ).toMatchInlineSnapshot(
-        `"\`<div style=\\"\${_ssrRenderStyle([_hoisted_1, _ctx.bar])}\\"></div>\`"`
+        `"\`<div style=\\"\${_ssrRenderStyle([{\\"color\\":\\"red\\"}, _ctx.bar])}\\"></div>\`"`
       )
     })
 
@@ -184,7 +184,7 @@ describe('ssr: element', () => {
         )
       ).toMatchInlineSnapshot(`
         "\`<div\${_ssrRenderAttrs(_mergeProps({
-            style: [_hoisted_1, _ctx.b]
+            style: [{\\"color\\":\\"red\\"}, _ctx.b]
           }, _ctx.obj))}></div>\`"
       `)
     })

packages/compiler-ssr/__tests__/ssrVShow.spec.ts

@@ -16,11 +16,9 @@ describe('ssr: v-show', () => {
       .toMatchInlineSnapshot(`
       "const { ssrRenderStyle: _ssrRenderStyle } = require(\\"@vue/server-renderer\\")
 
-      const _hoisted_1 = {\\"color\\":\\"red\\"}
-
       return function ssrRender(_ctx, _push, _parent) {
         _push(\`<div style=\\"\${_ssrRenderStyle([
-          _hoisted_1,
+          {\\"color\\":\\"red\\"},
           (_ctx.foo) ? null : { display: \\"none\\" }
         ])}\\"></div>\`)
       }"
@@ -48,11 +46,9 @@ describe('ssr: v-show', () => {
     ).toMatchInlineSnapshot(`
       "const { ssrRenderStyle: _ssrRenderStyle } = require(\\"@vue/server-renderer\\")
 
-      const _hoisted_1 = {\\"color\\":\\"red\\"}
-
       return function ssrRender(_ctx, _push, _parent) {
         _push(\`<div style=\\"\${_ssrRenderStyle([
-          _hoisted_1,
+          {\\"color\\":\\"red\\"},
           { fontSize: 14 },
           (_ctx.foo) ? null : { display: \\"none\\" }
         ])}\\"></div>\`)
@@ -69,12 +65,10 @@ describe('ssr: v-show', () => {
       "const { mergeProps: _mergeProps } = require(\\"vue\\")
       const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
 
-      const _hoisted_1 = {\\"color\\":\\"red\\"}
-
       return function ssrRender(_ctx, _push, _parent) {
         _push(\`<div\${_ssrRenderAttrs(_mergeProps(_ctx.baz, {
           style: [
-            _hoisted_1,
+            {\\"color\\":\\"red\\"},
             { fontSize: 14 },
             (_ctx.foo) ? null : { display: \\"none\\" }
           ]

packages/compiler-ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-ssr",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "description": "@vue/compiler-ssr",
   "main": "dist/compiler-ssr.cjs.js",
   "types": "dist/compiler-ssr.d.ts",
@@ -27,6 +27,6 @@
   },
   "homepage": "https://github.com/vuejs/vue/tree/dev/packages/compiler-ssr#readme",
   "dependencies": {
-    "@vue/compiler-dom": "3.0.0-alpha.5"
+    "@vue/compiler-dom": "3.0.0-alpha.6"
   }
 }