Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

h function context not same as webpack, which is right? #24

Open
defghy opened this issue Jan 15, 2024 · 2 comments
Open

h function context not same as webpack, which is right? #24

defghy opened this issue Jan 15, 2024 · 2 comments

Comments

@defghy
Copy link

defghy commented Jan 15, 2024

use render function to create customElement;

<template>
  <div :style="{ '--node-height': height + 'px' }" class="c-page">
    <VTree ref="vtree" class="constraint-tree" :render="renderNode" :nodeMinHeight="height" />
  </div>
</template>

    renderNode(node: any) {
      let compName = 'CNodeCommon'
      if (isArray) {
        compName = 'CNodeArray'
      }
      return <compName class="contraint-node" info={info} />
    },

webpack use vm.$createElement,context is this
image

vite use h function, context is the ui-lib's component
image

vite will show this error; Tried jsx in setup or methods both has same problem

 Unknown custom element: <CNodeCommon> - did you register the component correctly?

In my case, webpack is more reasonable, because I cannot controll ui lib's component
vue-tree lib: https://github.com/wsfe/vue-tree

"vite": "^5.0.11",
"@vitejs/plugin-vue2": "^2.3.1",
"@vitejs/plugin-vue2-jsx": "^1.1.1",
"vue": "^2.7.16",
@defghy
Copy link
Author

defghy commented Jan 15, 2024

I use this solution to temp resolve this problem

renderNode(node: any) {
     const h = this.$createElement  // to replace vite's h
      let compName = 'CNodeCommon'
      if (isArray) {
        compName = 'CNodeArray'
      }
      return <compName class="contraint-node" info={info} />
},

@defghy
Copy link
Author

defghy commented Jan 16, 2024

It's @vue/babel-sugar-inject-h which work in webpack; for ObjectMethod|ClassMethod

'ObjectMethod|ClassMethod'(path) {
  if (firstParamIsH(t, path) || !hasJSX(t, path) || isInsideJSXExpression(t, path)) {
    return
  }

  const isRender = path.node.key.name === 'render'

  path
    .get('body')
    .unshiftContainer(
      'body',
      t.variableDeclaration('const', [
        t.variableDeclarator(
          t.identifier('h'),
          isRender
            ? t.memberExpression(t.identifier('arguments'), t.numericLiteral(0), true)
            : t.memberExpression(t.thisExpression(), t.identifier('$createElement')),
        ),
      ]),
    )
},

detail in https://github.com/vuejs/jsx-vue2/blob/2e9f83d5c28bcc95363001fc412db1a659b22e29/packages/babel-sugar-inject-h/src/index.js#L59C25-L59C25

But in vite I use injectH: true option, not work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant