How to use the @vue/compiler-core.NodeTypes.DIRECTIVE function in @vue/compiler-core

node.props.forEach((p, i) => {
      if (p.type === NodeTypes.ATTRIBUTE && p.name === 'style' && p.value) {
        // replace p with an expression node
        const parsed = JSON.stringify(parseInlineCSS(p.value.content))
        const exp = context.hoist(createSimpleExpression(parsed, false, p.loc))
        node.props[i] = {
          type: NodeTypes.DIRECTIVE,
          name: `bind`,
          arg: createSimpleExpression(`style`, true, p.loc),
          exp,
          modifiers: [],
          loc: p.loc
        }
      }
    })
  }

if (dir.arg) {
      context.onError(
        createDOMCompilerError(
          DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT,
          dir.arg.loc
        )
      )
    }

    if (tag === 'input' || tag === 'textarea' || tag === 'select') {
      let directiveToUse = V_MODEL_TEXT
      let isInvalidType = false
      if (tag === 'input') {
        const type = findProp(node, `type`)
        if (type) {
          if (type.type === NodeTypes.DIRECTIVE) {
            // :type="foo"
            directiveToUse = V_MODEL_DYNAMIC
          } else if (type.value) {
            switch (type.value.content) {
              case 'radio':
                directiveToUse = V_MODEL_RADIO
                break
              case 'checkbox':
                directiveToUse = V_MODEL_CHECKBOX
                break
              case 'file':
                isInvalidType = true
                context.onError(
                  createDOMCompilerError(
                    DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT,
                    dir.loc

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
      }
    ])
    expect(node.props[0]).toMatchObject({
      type: NodeTypes.DIRECTIVE,
      name: `bind`,
      arg: {
        type: NodeTypes.SIMPLE_EXPRESSION,
        content: `style`,
        isStatic: true
      },
      exp: {
        type: NodeTypes.SIMPLE_EXPRESSION,
        content: `_hoisted_1`,
        isStatic: false
      }
    })
  })
</div>

node.props.forEach((attr: AttributeNode, index) => {
            if (attr.type !== NodeTypes.ATTRIBUTE) return
            if (attr.name !== item) return
            if (!attr.value) return
            const url = parseUrl(attr.value.content)
            const exp = getImportsExpressionExp(
              url.path,
              url.hash,
              attr.loc,
              context
            )
            node.props[index] = {
              type: NodeTypes.DIRECTIVE,
              name: 'bind',
              arg: createSimpleExpression(item, true, attr.loc),
              exp,
              modifiers: [],
              loc: attr.loc
            }
          })
        })

context.imports.add({ exp, path })
              }
              compoundExpression.children.push(exp)
            }
            const isNotLast = imageCandidates.length - 1 > index
            if (descriptor && isNotLast) {
              compoundExpression.children.push(` + '${descriptor}, ' + `)
            } else if (descriptor) {
              compoundExpression.children.push(` + '${descriptor}'`)
            } else if (isNotLast) {
              compoundExpression.children.push(` + ', ' + `)
            }
          })

          node.props[index] = {
            type: NodeTypes.DIRECTIVE,
            name: 'bind',
            arg: createSimpleExpression('srcset', true, attr.loc),
            exp: context.hoist(compoundExpression),
            modifiers: [],
            loc: attr.loc
          }
        }
      })
    }