search

ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
26.85k stars 2.24k forks source link

[Bug]: defineProps<NodeViewProps> stopped working #5632

Closed volarname closed 2 days ago

volarname commented 1 week ago

Affected Packages

core, vue-3

Version(s)

2.7.0,2.7.1,2.7.2

Bug Description

this worked before, also it was on documentation before, now it doesn't

import { NodeViewContent, NodeViewWrapper, type NodeViewProps as TiptapNodeViewProps } from '@tiptap/vue-3'

interface Props extends TiptapNodeViewProps {}

const props = defineProps<Props>()

if this is not bug, please provide TS example how to properly type props in node view renderer in vue 3

error log from vue sfc compiler:

7:07:40 PM [vite] Internal server error: [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

DemoView.vue
13 | import { NodeViewContent, NodeViewWrapper, type NodeViewProps as TiptapNodeViewProps } from '@tiptap/vue-3'
14 |
15 |  interface Props extends TiptapNodeViewProps {}
   |                          ^^^^^^^^^^^^^^^^^^^
16 |
17 |  const props = defineProps<Props>()
  Plugin: vite:vue
  File: /var/www/html/src/components/anzutap/nodes/styledBox/components/StyledBoxNodeView.vue
      at ScriptCompileContext.error (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15730:11)
      at resolveInterfaceMembers (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18204:13)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17984:14)
      at resolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18038:16)
      at resolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at resolveRuntimePropsFromType (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19604:20)
      at extractRuntimeProps (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19580:17)
      at genRuntimeProps (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19568:18)
      at Object.compileScript (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:20681:21)
7:07:40 PM [vite] Internal server error: [@vue/compiler-sfc] Failed to resolve index type into finite keys

/var/www/html/node_modules/@tiptap/core/dist/packages/core/src/types.d.ts
191|  }[keyof T];
192|  export type Simplify<T> = {
193|      [KeyType in keyof T]: T[KeyType];
   |                  ^^^^^^^
194|  } & {};
195|  export type DecorationWithType = Decoration & {
  Plugin: vite:vue
  File: /var/www/html/src/components/anzutap/nodes/embedVideo/components/EmbedVideoNodeView.vue
      at ScriptCompileContext.error (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15730:11)
      at resolveStringType (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18336:14)
      at resolveMappedType (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18228:12)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18004:14)
      at resolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at /var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18000:31
      at Array.map (<anonymous>)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18000:20)
      at resolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17988:14)
7:07:40 PM [vite] Internal server error: [@vue/compiler-sfc] Failed to resolve index type into finite keys

/var/www/html/node_modules/@tiptap/core/dist/packages/core/src/types.d.ts
191|  }[keyof T];
192|  export type Simplify<T> = {
193|      [KeyType in keyof T]: T[KeyType];
   |                  ^^^^^^^
194|  } & {};
195|  export type DecorationWithType = Decoration & {
  Plugin: vite:vue
  File: /var/www/html/src/components/anzutap/nodes/embedAudio/components/EmbedAudioNodeView.vue
      at ScriptCompileContext.error (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15730:11)
      at resolveStringType (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18336:14)
      at resolveMappedType (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18228:12)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18004:14)
      at resolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at /var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18000:31
      at Array.map (<anonymous>)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18000:20)
      at resolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17988:14)

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

no compiler error as before

Additional Context (Optional)

No response

Dependency Updates

incutonez commented 1 week ago

And unfortunately, reverting to 2.6.6 has its own issues, due to these lines in the vue-3 package.json (also starter-kit and pm)... because they haven't locked down the specific versions, it'll use the latest minor version, which is 2.7.2. What I ended up having to do is adding the overrides in my package.json, so it looks like this:

"overrides": {
    "@incutonez/ui": {
      "@tiptap/vue-3": {
        "@tiptap/core": "2.6.6",
        "@tiptap/extension-bubble-menu": "2.6.6",
        "@tiptap/extension-floating-menu": "2.6.6",
        "@tiptap/pm": "2.6.6"
      },
      "@tiptap/pm": {
        "@tiptap/core": "2.6.6"
      },
      "@tiptap/starter-kit": {
        "@tiptap/core": "2.6.6",
        "@tiptap/pm": "2.6.6"
      }
    }
  }

In my case, I'm using workspaces, so if you're using workspaces, rename the @incutonez/ui to whatever workspace you're using TipTap in. If you're not using workspaces, simply remove the wrapping @incutonez/ui object.

minakov commented 1 week ago

try defineProps(nodeViewProps)

volarname commented 1 week ago

try defineProps(nodeViewProps)

thx, but not working, then there are differen ts errors it worked everything perfectly but after latest hotfix there are several ts issues with tiptap, also with plugin decorations

this should be part of minor release at least, not hotfix, when they introduced breaking changes

nperez0111 commented 1 week ago

The types were changed in 2.7 which is a minor.

volarname commented 1 week ago

The types were changed in 2.7 which is a minor.

ok but its now broken

nperez0111 commented 5 days ago

I'd be willing to take a PR for this. But I think all that is happening is that you cannot use

import { NodeViewContent, NodeViewWrapper, type NodeViewProps as TiptapNodeViewProps } from '@tiptap/vue-3'

interface Props extends TiptapNodeViewProps {}

const props = defineProps<Props>()

it has to be

import { NodeViewContent, NodeViewWrapper, type NodeViewProps as TiptapNodeViewProps } from '@tiptap/vue-3'

type Props = TiptapNodeViewProps

const props = defineProps<Props>()

because the type went from being an interface to a type now: https://github.com/ueberdosis/tiptap/blob/9e18d243e048ad9c09e5da1cb65eeddff141cc0e/packages/core/src/types.ts#L217

volarname commented 2 days ago

@nperez0111 thank you, just wating for hotfix release

nperez0111 commented 2 days ago

This has already been released with 2.7.3, but now we already have 2.7.4