Fix/enforce-type-imports-so-that-bundler-ignores-types (#6132)

* fix: enforce type imports so that the bundler ignores types

* chore: add changeset

* fix: export types with export type keyword

Author: arnaugomez

.changeset/cuddly-impalas-heal.md

@@ -0,0 +1,63 @@
+---
+'tiptap-2-migrate-imports': patch
+'tiptap-demos': patch
+'@tiptap/core': patch
+'@tiptap/extension-blockquote': patch
+'@tiptap/extension-bold': patch
+'@tiptap/extension-bubble-menu': patch
+'@tiptap/extension-bullet-list': patch
+'@tiptap/extension-character-count': patch
+'@tiptap/extension-code': patch
+'@tiptap/extension-code-block': patch
+'@tiptap/extension-code-block-lowlight': patch
+'@tiptap/extension-collaboration': patch
+'@tiptap/extension-collaboration-cursor': patch
+'@tiptap/extension-color': patch
+'@tiptap/extension-document': patch
+'@tiptap/extension-dropcursor': patch
+'@tiptap/extension-floating-menu': patch
+'@tiptap/extension-focus': patch
+'@tiptap/extension-font-family': patch
+'@tiptap/extension-gapcursor': patch
+'@tiptap/extension-hard-break': patch
+'@tiptap/extension-heading': patch
+'@tiptap/extension-highlight': patch
+'@tiptap/extension-history': patch
+'@tiptap/extension-horizontal-rule': patch
+'@tiptap/extension-image': patch
+'@tiptap/extension-italic': patch
+'@tiptap/extension-link': patch
+'@tiptap/extension-list': patch
+'@tiptap/extension-list-item': patch
+'@tiptap/extension-list-keymap': patch
+'@tiptap/extension-mention': patch
+'@tiptap/extension-ordered-list': patch
+'@tiptap/extension-paragraph': patch
+'@tiptap/extension-placeholder': patch
+'@tiptap/extension-strike': patch
+'@tiptap/extension-subscript': patch
+'@tiptap/extension-superscript': patch
+'@tiptap/extension-table': patch
+'@tiptap/extension-table-cell': patch
+'@tiptap/extension-table-header': patch
+'@tiptap/extension-table-row': patch
+'@tiptap/extension-task-item': patch
+'@tiptap/extension-task-list': patch
+'@tiptap/extension-text': patch
+'@tiptap/extension-text-align': patch
+'@tiptap/extension-text-style': patch
+'@tiptap/extension-typography': patch
+'@tiptap/extension-underline': patch
+'@tiptap/extension-youtube': patch
+'@tiptap/extensions': patch
+'@tiptap/html': patch
+'@tiptap/pm': patch
+'@tiptap/react': patch
+'@tiptap/starter-kit': patch
+'@tiptap/static-renderer': patch
+'@tiptap/suggestion': patch
+'@tiptap/vue-2': patch
+'@tiptap/vue-3': patch
+---
+
+Enforce type imports so that the bundler ignores TypeScript type imports when generating the index.js file of the dist directory

.eslintrc.js

@@ -90,6 +90,7 @@ module.exports = {
         '@typescript-eslint/ban-ts-comment': 'off',
         '@typescript-eslint/ban-types': 'off',
         '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/consistent-type-imports': ['error', { disallowTypeAnnotations: false }],
         'simple-import-sort/imports': 'error',
         'simple-import-sort/exports': 'error',
       },

demos/src/Examples/Accessibility/React/InsertMenu.tsx

@@ -1,4 +1,5 @@
-import { Editor, useEditorState } from '@tiptap/react'
+import type { Editor } from '@tiptap/react'
+import { useEditorState } from '@tiptap/react'
 import { FloatingMenu } from '@tiptap/react/menus'
 import React, { useRef } from 'react'
 

demos/src/Examples/Accessibility/React/MenuBar.tsx

@@ -1,4 +1,4 @@
-import { Editor } from '@tiptap/core'
+import type { Editor } from '@tiptap/core'
 import { useEditorState } from '@tiptap/react'
 import React, { useEffect, useRef, useState } from 'react'
 

demos/src/Examples/Accessibility/React/TextMenu.tsx

@@ -1,5 +1,6 @@
 import { Selection } from '@tiptap/pm/state'
-import { Editor, useEditorState } from '@tiptap/react'
+import type { Editor } from '@tiptap/react'
+import { useEditorState } from '@tiptap/react'
 import { BubbleMenu } from '@tiptap/react/menus'
 import React, { useRef } from 'react'
 

demos/src/Examples/Accessibility/React/useMenubarNav.ts

@@ -1,5 +1,6 @@
-import { Editor } from '@tiptap/core'
-import React, { useCallback, useEffect, useRef } from 'react'
+import type { Editor } from '@tiptap/core'
+import type React from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 
 /**
  * Handle arrow navigation within a menu bar container, and allow to escape to the editor

demos/src/Examples/Default/React/index.tsx

@@ -1,7 +1,8 @@
 import './styles.scss'
 
 import { TextStyleKit } from '@tiptap/extension-text-style'
-import { Editor, EditorContent, useEditor, useEditorState } from '@tiptap/react'
+import type { Editor } from '@tiptap/react'
+import { EditorContent, useEditor, useEditorState } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React from 'react'
 

demos/src/Examples/Savvy/React/findColors.ts

@@ -1,4 +1,4 @@
-import { Node } from '@tiptap/pm/model'
+import type { Node } from '@tiptap/pm/model'
 import { Decoration, DecorationSet } from '@tiptap/pm/view'
 
 export default function (doc: Node): DecorationSet {

demos/src/Examples/Savvy/Vue/findColors.ts

@@ -1,4 +1,4 @@
-import { Node } from '@tiptap/pm/model'
+import type { Node } from '@tiptap/pm/model'
 import { Decoration, DecorationSet } from '@tiptap/pm/view'
 
 export default function (doc: Node): DecorationSet {

demos/src/Examples/StaticRendering/React/index.tsx

@@ -1,6 +1,7 @@
 import './styles.scss'
 
-import { EditorProvider, JSONContent, useCurrentEditor, useEditorState } from '@tiptap/react'
+import type { JSONContent } from '@tiptap/react'
+import { EditorProvider, useCurrentEditor, useEditorState } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import { renderToHTMLString, renderToMarkdown, renderToReactElement } from '@tiptap/static-renderer'
 import React, { useState } from 'react'

demos/src/Experiments/CollaborationAnnotation/Vue/extension/AnnotationPlugin.ts

@@ -1,8 +1,8 @@
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { DecorationSet } from '@tiptap/pm/view'
-import * as Y from 'yjs'
+import type * as Y from 'yjs'
 
-import { AnnotationItem } from './AnnotationItem.js'
+import type { AnnotationItem } from './AnnotationItem.js'
 import { AnnotationState } from './AnnotationState.js'
 
 export const AnnotationPluginKey = new PluginKey('annotation')

demos/src/Experiments/CollaborationAnnotation/Vue/extension/AnnotationState.ts

@@ -1,15 +1,15 @@
-import { EditorState, Transaction } from '@tiptap/pm/state'
+import type { EditorState, Transaction } from '@tiptap/pm/state'
 import { Decoration, DecorationSet } from '@tiptap/pm/view'
 import {
   absolutePositionToRelativePosition,
   relativePositionToAbsolutePosition,
   ySyncPluginKey,
 } from '@tiptap/y-tiptap'
-import * as Y from 'yjs'
+import type * as Y from 'yjs'
 
 import { AnnotationItem } from './AnnotationItem.js'
 import { AnnotationPluginKey } from './AnnotationPlugin.js'
-import { AddAnnotationAction, DeleteAnnotationAction, UpdateAnnotationAction } from './collaboration-annotation.js'
+import type { AddAnnotationAction, DeleteAnnotationAction, UpdateAnnotationAction } from './collaboration-annotation.js'
 
 export interface AnnotationStateOptions {
   HTMLAttributes: {

demos/src/Experiments/CollaborationAnnotation/Vue/extension/collaboration-annotation.ts

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/core'
-import * as Y from 'yjs'
+import type * as Y from 'yjs'
 
 import { AnnotationPlugin, AnnotationPluginKey } from './AnnotationPlugin.js'
 

demos/src/Experiments/Linter/Vue/extension/Linter.ts

@@ -1,9 +1,10 @@
 import { Extension } from '@tiptap/core'
-import { Node as ProsemirrorNode } from '@tiptap/pm/model'
+import type { Node as ProsemirrorNode } from '@tiptap/pm/model'
 import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
 import { Decoration, DecorationSet } from '@tiptap/pm/view'
 
-import LinterPlugin, { Result as Issue } from './LinterPlugin.js'
+import type { Result as Issue } from './LinterPlugin.js'
+import type LinterPlugin from './LinterPlugin.js'
 
 interface IconDivElement extends HTMLDivElement {
   issue?: Issue

demos/src/Experiments/Linter/Vue/extension/LinterPlugin.ts

@@ -1,4 +1,4 @@
-import { Node as ProsemirrorNode } from '@tiptap/pm/model'
+import type { Node as ProsemirrorNode } from '@tiptap/pm/model'
 
 export interface Result {
   message: string

demos/src/Experiments/Linter/Vue/extension/plugins/HeadingLevel.ts

@@ -1,6 +1,7 @@
-import { EditorView } from '@tiptap/pm/view'
+import type { EditorView } from '@tiptap/pm/view'
 
-import LinterPlugin, { Result as Issue } from '../LinterPlugin.js'
+import type { Result as Issue } from '../LinterPlugin.js'
+import LinterPlugin from '../LinterPlugin.js'
 
 export class HeadingLevel extends LinterPlugin {
   fixHeader(level: number) {

demos/src/Experiments/Linter/Vue/extension/plugins/Punctuation.ts

@@ -1,6 +1,7 @@
-import { EditorView } from '@tiptap/pm/view'
+import type { EditorView } from '@tiptap/pm/view'
 
-import LinterPlugin, { Result as Issue } from '../LinterPlugin.js'
+import type { Result as Issue } from '../LinterPlugin.js'
+import LinterPlugin from '../LinterPlugin.js'
 
 export class Punctuation extends LinterPlugin {
   public regex = / ([,.!?:]) ?/g

demos/src/GuideMarkViews/ReactComponent/React/Component.tsx

@@ -1,4 +1,5 @@
-import { MarkViewContent, MarkViewRendererProps } from '@tiptap/react'
+import type { MarkViewRendererProps } from '@tiptap/react'
+import { MarkViewContent } from '@tiptap/react'
 import React from 'react'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

demos/src/GuideNodeViews/ReactComponent/React/Component.tsx

@@ -1,4 +1,5 @@
-import { NodeViewProps, NodeViewWrapper } from '@tiptap/react'
+import type { NodeViewProps } from '@tiptap/react'
+import { NodeViewWrapper } from '@tiptap/react'
 import React from 'react'
 
 export default (props: NodeViewProps) => {

demos/src/GuideNodeViews/ReactComponentContext/React/Component.tsx

@@ -1,4 +1,5 @@
-import { NodeViewProps, NodeViewWrapper } from '@tiptap/react'
+import type { NodeViewProps } from '@tiptap/react'
+import { NodeViewWrapper } from '@tiptap/react'
 import React, { useContext } from 'react'
 
 import { Context } from './Context.js'

demos/src/Tutorials/1-1-textarea/React/Note.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 export default ({ note }: { note: TNote }) => {
   const [modelValue, setModelValue] = useState(note.content)

demos/src/Tutorials/1-1-textarea/React/index.tsx

@@ -3,7 +3,7 @@ import './styles.scss'
 import React from 'react'
 
 import Note from './Note.jsx'
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 const notes: TNote[] = [
   {

demos/src/Tutorials/1-1-textarea/Vue/Note.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 const props = defineProps<{ note: TNote }>()
 

demos/src/Tutorials/1-1-textarea/Vue/index.vue

@@ -2,7 +2,7 @@
 import './styles.scss'
 
 import Note from './Note.vue'
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 const notes: TNote[] = [
   { id: 'note-1', content: 'Some random note text' },

demos/src/Tutorials/1-2-tiptap/React/Note.tsx

@@ -2,7 +2,7 @@ import { EditorContent, useEditor } from '@tiptap/react'
 import { StarterKit } from '@tiptap/starter-kit'
 import React, { useState } from 'react'
 
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 export default ({ note }: { note: TNote }) => {
   const [modelValue, setModelValue] = useState(note.content)

demos/src/Tutorials/1-2-tiptap/React/index.tsx

@@ -3,7 +3,7 @@ import './styles.scss'
 import React from 'react'
 
 import Note from './Note.jsx'
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 const notes: TNote[] = [
   {

demos/src/Tutorials/1-2-tiptap/Vue/index.vue

@@ -2,7 +2,7 @@
 import './styles.scss'
 
 import Note from './Note.vue'
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 const notes: TNote[] = [
   { id: 'note-1', content: 'Some random note text' },

demos/src/Tutorials/1-2-tiptap_lexical/Lexical-React/Note.tsx

@@ -1,15 +1,16 @@
 import './styles.css'
 
-import { InitialConfigType, LexicalComposer } from '@lexical/react/LexicalComposer'
+import type { InitialConfigType } from '@lexical/react/LexicalComposer'
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { ContentEditable } from '@lexical/react/LexicalContentEditable'
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary'
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
-import { EditorState } from 'lexical/LexicalEditorState'
+import type { EditorState } from 'lexical/LexicalEditorState'
 import React, { useRef } from 'react'
 
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 export default ({ note }: { note: TNote }) => {
   const editorStateRef = useRef<EditorState>()

demos/src/Tutorials/1-2-tiptap_lexical/Lexical-React/index.tsx

@@ -3,7 +3,7 @@ import './styles.css'
 import React from 'react'
 
 import Note from './Note.jsx'
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 const notes: TNote[] = [
   {

demos/src/Tutorials/1-3-yjs/React/Note.tsx

@@ -4,7 +4,7 @@ import { StarterKit } from '@tiptap/starter-kit'
 import React from 'react'
 import * as Y from 'yjs'
 
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 export default ({ note }: { note: TNote }) => {
   const doc = new Y.Doc()

demos/src/Tutorials/1-3-yjs/React/index.tsx

@@ -3,7 +3,7 @@ import './styles.scss'
 import React from 'react'
 
 import Note from './Note.jsx'
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 const notes: TNote[] = [
   {

demos/src/Tutorials/1-3-yjs/Vue/index.vue

@@ -2,7 +2,7 @@
 import './styles.scss'
 
 import Note from './Note.vue'
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 const notes: TNote[] = [
   { id: 'note-1', defaultContent: 'Some random note text' },

demos/src/Tutorials/1-3-yjs_lexical/Lexical-React/Note.tsx

@@ -2,14 +2,15 @@ import './styles.css'
 
 import { TiptapCollabProvider } from '@hocuspocus/provider'
 import { CollaborationPlugin } from '@lexical/react/LexicalCollaborationPlugin'
-import { InitialConfigType, LexicalComposer } from '@lexical/react/LexicalComposer'
+import type { InitialConfigType } from '@lexical/react/LexicalComposer'
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { ContentEditable } from '@lexical/react/LexicalContentEditable'
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
 import React from 'react'
 import * as Y from 'yjs'
 
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 export default ({ note }: { note: TNote }) => {
   const initialConfig: InitialConfigType = {

demos/src/Tutorials/1-3-yjs_lexical/Lexical-React/index.tsx

@@ -3,7 +3,7 @@ import './styles.css'
 import React from 'react'
 
 import Note from './Note.jsx'
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 const notes: TNote[] = [
   {

demos/src/Tutorials/1-4-collab/React/Note.tsx

@@ -5,7 +5,7 @@ import { StarterKit } from '@tiptap/starter-kit'
 import React, { useEffect } from 'react'
 import * as Y from 'yjs'
 
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 export default ({ note }: { note: TNote }) => {
   const doc = new Y.Doc()

demos/src/Tutorials/1-4-collab/React/index.tsx

@@ -3,7 +3,7 @@ import './styles.scss'
 import React from 'react'
 
 import Note from './Note.jsx'
-import { TNote } from './types.js'
+import type { TNote } from './types.js'
 
 const notes: TNote[] = [
   {