How to use the @vue/shared.PatchFlags.PROPS function in @vue/shared

To help you get started, we’ve selected a few @vue/shared examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vuejs / vue-next / packages / compiler-dom / __tests__ / transforms / vHtml.spec.ts View on Github external
it('should raise error and ignore children when v-html is present', () => {
    const onError = jest.fn()
    const ast = transformWithVHtml(`<div>hello</div>`, {
      onError
    })
    expect(onError.mock.calls).toMatchObject([
      [{ code: DOMErrorCodes.X_V_HTML_WITH_CHILDREN }]
    ])
    expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
      arguments: [
        `"div"`,
        createObjectMatcher({
          innerHTML: `[test]`
        }),
        `null`, // &lt;-- children should have been removed
        genFlagText(PatchFlags.PROPS),
        `["innerHTML"]`
      ]
    })
  })
github vuejs / vue-next / packages / compiler-core / __tests__ / transforms / transformElement.spec.ts View on Github external
}
    })
    expect(node.callee).toBe(CREATE_VNODE)
    expect(node.arguments[1]).toMatchObject({
      type: NodeTypes.JS_OBJECT_EXPRESSION,
      properties: [
        {
          type: NodeTypes.JS_PROPERTY,
          key: _dir!.arg,
          value: _dir!.exp
        }
      ]
    })
    // should factor in props returned by custom directive transforms
    // in patchFlag analysis
    expect(node.arguments[3]).toMatch(PatchFlags.PROPS + '')
    expect(node.arguments[4]).toMatch(`"bar"`)
  })
github vuejs / vue-next / packages / runtime-core / src / componentRenderUtils.ts View on Github external
parentComponent &amp;&amp;
    parentComponent.renderUpdated
  ) {
    return true
  }

  if (patchFlag &gt; 0) {
    if (patchFlag &amp; PatchFlags.DYNAMIC_SLOTS) {
      // slot content that references values that might have changed,
      // e.g. in a v-for
      return true
    }
    if (patchFlag &amp; PatchFlags.FULL_PROPS) {
      // presence of this flag indicates props are always non-null
      return hasPropsChanged(prevProps!, nextProps!)
    } else if (patchFlag &amp; PatchFlags.PROPS) {
      const dynamicProps = nextVNode.dynamicProps!
      for (let i = 0; i &lt; dynamicProps.length; i++) {
        const key = dynamicProps[i]
        if (nextProps![key] !== prevProps![key]) {
          return true
        }
      }
    }
  } else if (!optimized) {
    // this path is only taken by manually written render functions
    // so presence of any children leads to a forced update
    if (prevChildren != null || nextChildren != null) {
      if (nextChildren == null || !(nextChildren as any).$stable) {
        return true
      }
    }
github vuejs / vue-next / packages / runtime-core / src / renderer.ts View on Github external
}
        }

        // style
        // this flag is matched when the element has dynamic style bindings
        if (patchFlag &amp; PatchFlags.STYLE) {
          hostPatchProp(el, 'style', newProps.style, oldProps.style, isSVG)
        }

        // props
        // This flag is matched when the element has dynamic prop/attr bindings
        // other than class and style. The keys of dynamic prop/attrs are saved for
        // faster iteration.
        // Note dynamic keys like :[foo]="bar" will cause this optimization to
        // bail out and go through a full diff because we need to unset the old key
        if (patchFlag &amp; PatchFlags.PROPS) {
          // if the flag is present then dynamicProps must be non-null
          const propsToUpdate = n2.dynamicProps!
          for (let i = 0; i &lt; propsToUpdate.length; i++) {
            const key = propsToUpdate[i]
            const prev = oldProps[key]
            const next = newProps[key]
            if (prev !== next) {
              hostPatchProp(
                el,
                key,
                next,
                prev,
                isSVG,
                n1.children as HostVNode[],
                parentComponent,
                parentSuspense,
github vuejs / vue-next / packages / compiler-core / src / transforms / transformElement.ts View on Github external
elementLoc
    )
  }

  // patchFlag analysis
  if (hasDynamicKeys) {
    patchFlag |= PatchFlags.FULL_PROPS
  } else {
    if (hasClassBinding) {
      patchFlag |= PatchFlags.CLASS
    }
    if (hasStyleBinding) {
      patchFlag |= PatchFlags.STYLE
    }
    if (dynamicPropNames.length) {
      patchFlag |= PatchFlags.PROPS
    }
  }
  if (patchFlag === 0 && (hasRef || runtimeDirectives.length > 0)) {
    patchFlag |= PatchFlags.NEED_PATCH
  }

  return {
    props: propsExpression,
    directives: runtimeDirectives,
    patchFlag,
    dynamicPropNames
  }
}
github vuejs / vue-next / packages / compiler-core / src / transforms / transformElement.ts View on Github external
elementLoc
    )
  }

  // patchFlag analysis
  if (hasDynamicKeys) {
    patchFlag |= PatchFlags.FULL_PROPS
  } else {
    if (hasClassBinding) {
      patchFlag |= PatchFlags.CLASS
    }
    if (hasStyleBinding) {
      patchFlag |= PatchFlags.STYLE
    }
    if (dynamicPropNames.length) {
      patchFlag |= PatchFlags.PROPS
    }
  }
  if (patchFlag === 0 && (hasRef || runtimeDirectives.length > 0)) {
    patchFlag |= PatchFlags.NEED_PATCH
  }

  return {
    props: propsExpression,
    directives: runtimeDirectives,
    patchFlag,
    dynamicPropNames
  }
}
github vuejs / vue-next / packages / compiler-dom / __tests__ / transforms / vText.spec.ts View on Github external
it('should convert v-text to textContent', () =&gt; {
    const ast = transformWithVText(`<div>`)
    expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
      arguments: [
        `"div"`,
        createObjectMatcher({
          textContent: `[test]`
        }),
        `null`,
        genFlagText(PatchFlags.PROPS),
        `["textContent"]`
      ]
    })
  })
</div>
github vuejs / vue-next / packages / compiler-dom / __tests__ / transforms / vHtml.spec.ts View on Github external
it('should convert v-html to innerHTML', () =&gt; {
    const ast = transformWithVHtml(`<div>`)
    expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
      arguments: [
        `"div"`,
        createObjectMatcher({
          innerHTML: `[test]`
        }),
        `null`,
        genFlagText(PatchFlags.PROPS),
        `["innerHTML"]`
      ]
    })
  })
</div>
github vuejs / vue-next / packages / compiler-core / __tests__ / transforms / hoistStatic.spec.ts View on Github external
test('should NOT hoist element with dynamic props', () =&gt; {
    const { root, args } = transformWithHoist(`<div><div></div>`)
    expect(root.hoists.length).toBe(0)
    expect(args[2]).toMatchObject([
      {
        type: NodeTypes.ELEMENT,
        codegenNode: {
          callee: CREATE_VNODE,
          arguments: [
            `"div"`,
            createObjectMatcher({
              id: `[foo]`
            }),
            `null`,
            genFlagText(PatchFlags.PROPS),
            `["id"]`
          ]
        }
      }
    ])
    expect(generate(root).code).toMatchSnapshot()
  })
</div>