test: test scopeId support

packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`scopeId compiler support should push scopeId for hoisted nodes 1`] = `
+"import { createVNode, createBlock, openBlock, withScopeId, pushScopeId, popScopeId } from \\"vue\\"
+const withId = withScopeId(\\"test\\")
+
+pushScopeId(\\"test\\")
+const _hoisted_1 = createVNode(\\"div\\", null, \\"hello\\")
+const _hoisted_2 = createVNode(\\"div\\", null, \\"world\\")
+popScopeId()
+
+export default withId(function render() {
+  const _ctx = this
+  return (openBlock(), createBlock(\\"div\\", null, [
+    _hoisted_1,
+    _hoisted_2
+  ]))
+})"
+`;
+
+exports[`scopeId compiler support should wrap default slot 1`] = `
+"import { createVNode, resolveComponent, createBlock, openBlock, withScopeId } from \\"vue\\"
+const withId = withScopeId(\\"test\\")
+
+export default withId(function render() {
+  const _ctx = this
+  const _component_Child = resolveComponent(\\"Child\\")
+  
+  return (openBlock(), createBlock(_component_Child, null, {
+    default: withId(() => [
+      createVNode(\\"div\\")
+    ]),
+    _compiled: true
+  }))
+})"
+`;
+
+exports[`scopeId compiler support should wrap dynamic slots 1`] = `
+"import { createVNode, resolveComponent, renderList, createSlots, createBlock, openBlock, withScopeId } from \\"vue\\"
+const withId = withScopeId(\\"test\\")
+
+export default withId(function render() {
+  const _ctx = this
+  const _component_Child = resolveComponent(\\"Child\\")
+  
+  return (openBlock(), createBlock(_component_Child, null, createSlots({ _compiled: true }, [
+    (_ctx.ok)
+      ? {
+          name: \\"foo\\",
+          fn: withId(() => [
+            createVNode(\\"div\\")
+          ])
+        }
+      : undefined,
+    renderList(_ctx.list, (i) => {
+      return {
+        name: i,
+        fn: withId(() => [
+          createVNode(\\"div\\")
+        ])
+      }
+    })
+  ]), 512 /* DYNAMIC_SLOTS */))
+})"
+`;
+
+exports[`scopeId compiler support should wrap named slots 1`] = `
+"import { toString, createTextVNode, createVNode, resolveComponent, createBlock, openBlock, withScopeId } from \\"vue\\"
+const withId = withScopeId(\\"test\\")
+
+export default withId(function render() {
+  const _ctx = this
+  const _component_Child = resolveComponent(\\"Child\\")
+  
+  return (openBlock(), createBlock(_component_Child, null, {
+    foo: withId(({ msg }) => [
+      createTextVNode(toString(msg), 1 /* TEXT */)
+    ]),
+    bar: withId(() => [
+      createVNode(\\"div\\")
+    ]),
+    _compiled: true
+  }))
+})"
+`;
+
+exports[`scopeId compiler support should wrap render function 1`] = `
+"import { createVNode, createBlock, openBlock, withScopeId } from \\"vue\\"
+const withId = withScopeId(\\"test\\")
+
+export default withId(function render() {
+  const _ctx = this
+  return (openBlock(), createBlock(\\"div\\"))
+})"
+`;

packages/compiler-core/__tests__/scopeId.spec.ts

@@ -0,0 +1,91 @@
+import { baseCompile } from '../src/compile'
+import {
+  WITH_SCOPE_ID,
+  PUSH_SCOPE_ID,
+  POP_SCOPE_ID
+} from '../src/runtimeHelpers'
+
+describe('scopeId compiler support', () => {
+  test('should only work in module mode', () => {
+    expect(() => {
+      baseCompile(``, { scopeId: 'test' })
+    }).toThrow(`"scopeId" option is only supported in module mode`)
+  })
+
+  test('should wrap render function', () => {
+    const { ast, code } = baseCompile(`<div/>`, {
+      mode: 'module',
+      scopeId: 'test'
+    })
+    expect(ast.helpers).toContain(WITH_SCOPE_ID)
+    expect(code).toMatch(`const withId = withScopeId("test")`)
+    expect(code).toMatch(`export default withId(function render() {`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should wrap default slot', () => {
+    const { code } = baseCompile(`<Child><div/></Child>`, {
+      mode: 'module',
+      scopeId: 'test'
+    })
+    expect(code).toMatch(`default: withId(() => [`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should wrap named slots', () => {
+    const { code } = baseCompile(
+      `<Child>
+        <template #foo="{ msg }">{{ msg }}</template>
+        <template #bar><div/></template>
+      </Child>
+      `,
+      {
+        mode: 'module',
+        scopeId: 'test'
+      }
+    )
+    expect(code).toMatch(`foo: withId(({ msg }) => [`)
+    expect(code).toMatch(`bar: withId(() => [`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should wrap dynamic slots', () => {
+    const { code } = baseCompile(
+      `<Child>
+        <template #foo v-if="ok"><div/></template>
+        <template v-for="i in list" #[i]><div/></template>
+      </Child>
+      `,
+      {
+        mode: 'module',
+        scopeId: 'test'
+      }
+    )
+    expect(code).toMatch(/name: "foo",\s+fn: withId\(/)
+    expect(code).toMatch(/name: i,\s+fn: withId\(/)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('should push scopeId for hoisted nodes', () => {
+    const { ast, code } = baseCompile(
+      `<div><div>hello</div><div>world</div></div>`,
+      {
+        mode: 'module',
+        scopeId: 'test',
+        hoistStatic: true
+      }
+    )
+    expect(ast.helpers).toContain(PUSH_SCOPE_ID)
+    expect(ast.helpers).toContain(POP_SCOPE_ID)
+    expect(ast.hoists.length).toBe(2)
+    expect(code).toMatch(
+      [
+        `pushScopeId("test")`,
+        `const _hoisted_1 = createVNode("div", null, "hello")`,
+        `const _hoisted_2 = createVNode("div", null, "world")`,
+        `popScopeId()`
+      ].join('\n')
+    )
+    expect(code).toMatchSnapshot()
+  })
+})