revert: feat: support scoped-slot usage with $slot

This reverts commit 7988a55.

Author: yyx990803

flow/compiler.js

@@ -85,7 +85,7 @@ declare type ASTDirective = {
   end?: number;
 };
 
-declare type ASTNode = ASTElement | ASTText | ASTExpression
+declare type ASTNode = ASTElement | ASTText | ASTExpression;
 
 declare type ASTElement = {
   type: 1;
@@ -167,9 +167,6 @@ declare type ASTElement = {
 
   // weex specific
   appendAsTree?: boolean;
-
-  // 2.6 $slot check
-  has$Slot?: boolean
 };
 
 declare type ASTExpression = {
@@ -182,8 +179,6 @@ declare type ASTExpression = {
   ssrOptimizability?: number;
   start?: number;
   end?: number;
-  // 2.6 $slot check
-  has$Slot?: boolean
 };
 
 declare type ASTText = {
@@ -195,8 +190,6 @@ declare type ASTText = {
   ssrOptimizability?: number;
   start?: number;
   end?: number;
-  // 2.6 $slot check
-  has$Slot?: boolean
 };
 
 // SFC-parser related declarations

src/compiler/codegen/index.js

@@ -27,7 +27,7 @@ export class CodegenState {
     this.dataGenFns = pluckModuleFunction(options.modules, 'genData')
     this.directives = extend(extend({}, baseDirectives), options.directives)
     const isReservedTag = options.isReservedTag || no
-    this.maybeComponent = (el: ASTElement) => !!el.component || !isReservedTag(el.tag)
+    this.maybeComponent = (el: ASTElement) => el.component || !isReservedTag(el.tag)
     this.onceId = 0
     this.staticRenderFns = []
     this.pre = false

src/compiler/optimizer.js

@@ -30,7 +30,7 @@ export function optimize (root: ?ASTElement, options: CompilerOptions) {
 
 function genStaticKeys (keys: string): Function {
   return makeMap(
-    'type,tag,attrsList,attrsMap,plain,parent,children,attrs,start,end,rawAttrsMap,has$Slot' +
+    'type,tag,attrsList,attrsMap,plain,parent,children,attrs,start,end,rawAttrsMap' +
     (keys ? ',' + keys : '')
   )
 }
@@ -43,7 +43,6 @@ function markStatic (node: ASTNode) {
     // 2. static slot content fails for hot-reloading
     if (
       !isPlatformReservedTag(node.tag) &&
-      !node.component &&
       node.tag !== 'slot' &&
       node.attrsMap['inline-template'] == null
     ) {

src/compiler/parser/index.js

@@ -5,7 +5,7 @@ import { parseHTML } from './html-parser'
 import { parseText } from './text-parser'
 import { parseFilters } from './filter-parser'
 import { genAssignmentCode } from '../directives/model'
-import { extend, cached, no, camelize, hyphenate, hasOwn } from 'shared/util'
+import { extend, cached, no, camelize, hyphenate } from 'shared/util'
 import { isIE, isEdge, isServerRendering } from 'core/util/env'
 
 import {
@@ -45,7 +45,6 @@ let postTransforms
 let platformIsPreTag
 let platformMustUseProp
 let platformGetTagNamespace
-let maybeComponent
 
 export function createASTElement (
   tag: string,
@@ -75,8 +74,6 @@ export function parse (
   platformIsPreTag = options.isPreTag || no
   platformMustUseProp = options.mustUseProp || no
   platformGetTagNamespace = options.getTagNamespace || no
-  const isReservedTag = options.isReservedTag || no
-  maybeComponent = (el: ASTElement) => !!el.component || !isReservedTag(el.tag)
 
   transforms = pluckModuleFunction(options.modules, 'transformNode')
   preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
@@ -102,7 +99,7 @@ export function parse (
 
   function closeElement (element) {
     if (!inVPre && !element.processed) {
-      element = processElement(element, options)
+      element = processElement(element, options, currentParent)
     }
     // tree management
     if (!stack.length && element !== root) {
@@ -156,7 +153,7 @@ export function parse (
         { start: el.start }
       )
     }
-    if (hasOwn(el.attrsMap, 'v-for')) {
+    if (el.attrsMap.hasOwnProperty('v-for')) {
       warnOnce(
         'Cannot use v-for on stateful component root element because ' +
         'it renders multiple elements.',
@@ -380,7 +377,8 @@ function processRawAttrs (el) {
 
 export function processElement (
   element: ASTElement,
-  options: CompilerOptions
+  options: CompilerOptions,
+  parent: ASTElement | undefined
 ) {
   processKey(element)
 
@@ -393,7 +391,7 @@ export function processElement (
   )
 
   processRef(element)
-  processSlot(element)
+  processSlot(element, parent)
   processComponent(element)
   for (let i = 0; i < transforms.length; i++) {
     element = transforms[i](element, options) || element
@@ -584,86 +582,19 @@ function processSlot (el) {
         )
       }
       el.slotScope = slotScope
-      if (process.env.NODE_ENV !== 'production' && nodeHas$Slot(el)) {
-        warn('Unepxected mixed usage of `slot-scope` and `$slot`.', el)
-      }
-    } else {
-      // 2.6 $slot support
-      // Context: https://github.com/vuejs/vue/issues/9180
-      // Ideally, all slots should be compiled as functions (this is what we
-      // are doing in 3.x), but for 2.x e want to preserve complete backwards
-      // compatibility, and maintain the exact same compilation output for any
-      // code that does not use the new syntax.
-
-      // recursively check component children for presence of `$slot` in all
-      // expressions until running into a nested child component.
-      if (maybeComponent(el) && childrenHas$Slot(el)) {
-        processScopedSlots(el)
-      }
     }
     const slotTarget = getBindingAttr(el, 'slot')
     if (slotTarget) {
       el.slotTarget = slotTarget === '""' ? '"default"' : slotTarget
       // preserve slot as an attribute for native shadow DOM compat
       // only for non-scoped slots.
-      if (el.tag !== 'template' && !el.slotScope && !nodeHas$Slot(el)) {
+      if (el.tag !== 'template' && !el.slotScope) {
         addAttr(el, 'slot', slotTarget, getRawBindingAttr(el, 'slot'))
       }
     }
   }
 }
 
-function childrenHas$Slot (el): boolean {
-  return el.children ? el.children.some(nodeHas$Slot) : false
-}
-
-const $slotRE = /(^|[^\w_$])\$slot($|[^\w_$])/
-function nodeHas$Slot (node): boolean {
-  // caching
-  if (hasOwn(node, 'has$Slot')) {
-    return (node.has$Slot: any)
-  }
-  if (node.type === 1) { // element
-    for (const key in node.attrsMap) {
-      if (dirRE.test(key) && $slotRE.test(node.attrsMap[key])) {
-        return (node.has$Slot = true)
-      }
-    }
-    return (node.has$Slot = childrenHas$Slot(node))
-  } else if (node.type === 2) { // expression
-    // TODO more robust logic for checking $slot usage
-    return (node.has$Slot = $slotRE.test(node.expression))
-  }
-  return false
-}
-
-function processScopedSlots (el) {
-  // 1. group children by slot target
-  const groups: any = {}
-  for (let i = 0; i < el.children.length; i++) {
-    const child = el.children[i]
-    const target = child.slotTarget || '"default"'
-    if (!groups[target]) {
-      groups[target] = []
-    }
-    groups[target].push(child)
-  }
-  // 2. for each slot group, check if the group contains $slot
-  for (const name in groups) {
-    const group = groups[name]
-    if (group.some(nodeHas$Slot)) {
-      // 3. if a group contains $slot, all nodes in that group gets assigned
-      // as a scoped slot to el and removed from children
-      el.plain = false
-      const slots = el.scopedSlots || (el.scopedSlots = {})
-      const slotContainer = slots[name] = createASTElement('template', [], el)
-      slotContainer.children = group
-      slotContainer.slotScope = '$slot'
-      el.children = el.children.filter(c => group.indexOf(c) === -1)
-    }
-  }
-}
-
 function processComponent (el) {
   let binding
   if ((binding = getBindingAttr(el, 'is'))) {

test/unit/features/component/component-scoped-slot.spec.js

@@ -631,92 +631,4 @@ describe('Component scoped slot', () => {
       expect(vm.$el.innerHTML).toBe('<p>hello</p>')
     }).then(done)
   })
-
-  // 2.6 $slot usage
-  describe('$slot support', () => {
-    it('should work', () => {
-      const vm = new Vue({
-        template: `<foo><div>{{$slot.foo}}</div></foo>`,
-        components: { foo: { template: `<div><slot foo="hello"/></div>` }}
-      }).$mount()
-      expect(vm.$el.innerHTML).toBe(`<div>hello</div>`)
-    })
-
-    it('should work for use of $slots in attributes', () => {
-      const vm = new Vue({
-        template: `<foo><div :id="$slot.foo"></div></foo>`,
-        components: { foo: { template: `<div><slot foo="hello"/></div>` }}
-      }).$mount()
-      expect(vm.$el.innerHTML).toBe(`<div id="hello"></div>`)
-    })
-
-    it('should work for root text nodes', () => {
-      const vm = new Vue({
-        template: `<foo>{{$slot.foo}}</foo>`,
-        components: { foo: { template: `<div><slot foo="hello"/></div>` }}
-      }).$mount()
-      expect(vm.$el.innerHTML).toBe(`hello`)
-    })
-
-    it('should work for mix of root text nodes and elements', () => {
-      const vm = new Vue({
-        template: `<foo>hi <div>{{ $slot.foo }}</div>{{$slot.foo}}</foo>`,
-        components: { foo: { template: `<div><slot foo="hello"/></div>` }}
-      }).$mount()
-      expect(vm.$el.innerHTML).toBe(`hi <div>hello</div>hello`)
-    })
-
-    it('should work for named slots', () => {
-      const vm = new Vue({
-        template: `<foo><div slot="foo">{{ $slot.foo }}</div></foo>`,
-        components: { foo: { template: `<div><slot name="foo" foo="hello"/></div>` }}
-      }).$mount()
-      expect(vm.$el.innerHTML).toBe(`<div>hello</div>`)
-    })
-
-    it('should work for mixed default and named slots', () => {
-      const vm = new Vue({
-        template: `<foo>{{ $slot.foo }}<div>{{ $slot.foo }}</div><div slot="foo">{{ $slot.foo }}</div></foo>`,
-        components: { foo: { template: `<div><slot foo="default"/><slot name="foo" foo="foo"/></div>` }}
-      }).$mount()
-      expect(vm.$el.innerHTML).toBe(`default<div>default</div><div>foo</div>`)
-    })
-
-    it('should work for mixed $slot and non-$slot slots', () => {
-      const vm = new Vue({
-        template: `<foo>{{ $slot.foo }}<div slot="foo">static</div><div>{{ $slot.foo }}</div></foo>`,
-        components: { foo: { template: `<div><slot foo="default"/><slot name="foo"/></div>` }}
-      }).$mount()
-      expect(vm.$el.innerHTML).toBe(`default<div>default</div><div>static</div>`)
-    })
-
-    // testing $slot detection: bracket access, using $slot alone, passing as arguments...
-    it('should work for alternative $slot usage', () => {
-      const vm = new Vue({
-        template: `<foo>{{ $slot['foo'] }}<div slot="foo">{{ $slot }}</div><div>{{ pick($slot) }}</div></foo>`,
-        methods: { pick: s => s.foo },
-        components: { foo: { template: `<div><slot foo="default"/><slot name="foo"/></div>` }}
-      }).$mount()
-      expect(vm.$el.innerHTML).toBe(`default<div>default</div><div>{}</div>`)
-    })
-
-    // should not consider detection if $slot is inside longer valid identifier
-    it('should not break when template expression uses $slots', () => {
-      const vm = new Vue({
-        data: { some$slot: 123 },
-        template: `<foo>{{ some$slot }}<div slot="foo">{{ $slots }}</div></foo>`,
-        components: {
-          foo: {
-            render(h) {
-              // should be compiled as normal slots
-              expect(this.$slots.default).toBeTruthy()
-              expect(this.$slots.foo).toBeTruthy()
-              return h('div', [this.$slots.default, this.$slots.foo])
-            }
-          }
-        }
-      }).$mount()
-      expect(vm.$el.innerHTML).toBe(`123<div>{}</div>`)
-    })
-  })
 })