From cb0e38528f991e3f37fe9528b78cc33e70a93190 Mon Sep 17 00:00:00 2001 From: hunghg255 Date: Sat, 4 Jan 2025 16:53:01 +0700 Subject: [PATCH] chore: try full bundle --- docs/guide/getting-started.md | 8 +++ package.json | 20 +++++-- scripts/build.ts | 101 ++++++++++++++++++++++++++++++++++ src/bundle-full.ts | 14 +++++ src/index.ts | 2 +- vite.config.ts | 1 + 6 files changed, 140 insertions(+), 6 deletions(-) create mode 100644 scripts/build.ts create mode 100644 src/bundle-full.ts diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md index 67e9ccb..681b448 100644 --- a/docs/guide/getting-started.md +++ b/docs/guide/getting-started.md @@ -68,6 +68,14 @@ const App = () => { }; ``` +## Import full bundle + +- There are error when install by yarn, you can import full bundle by using `bundle/full` path + +```tsx +import RichTextEditor from 'reactjs-tiptap-editor/bundle/full' +``` + ## Props ```ts diff --git a/package.json b/package.json index 82d28c6..7ed7c0a 100644 --- a/package.json +++ b/package.json @@ -2,8 +2,8 @@ "name": "reactjs-tiptap-editor", "type": "module", "version": "0.1.11", - "main": "./lib/reactjs-tiptap-editor.cjs", - "module": "./lib/reactjs-tiptap-editor.js", + "main": "./lib/index.cjs", + "module": "./lib/index.js", "types": "./lib/index.d.ts", "description": "A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React", "packageManager": "pnpm@9.15.0", @@ -11,11 +11,21 @@ ".": { "import": { "types": "./lib/index.d.ts", - "default": "./lib/reactjs-tiptap-editor.js" + "default": "./lib/index.js" }, "require": { "types": "./lib/index.d.cts", - "default": "./lib/reactjs-tiptap-editor.cjs" + "default": "./lib/index.cjs" + } + }, + "./bundle/full": { + "import": { + "types": "./lib/index.d.ts", + "default": "./lib/bundle-full.js" + }, + "require": { + "types": "./lib/index.d.cts", + "default": "./lib/bundle-full.cjs" } }, "./style.css": { @@ -35,7 +45,7 @@ "node": ">=18.0.0" }, "scripts": { - "build:lib": "vite build && pnpm modify-css", + "build:lib": "esno ./scripts/build.ts && pnpm modify-css", "build:lib:dev": "vite build --mode development --watch", "build:playground": "pnpm build:lib && pnpm --dir ./playground run build", "docs:dev": "pnpm --parallel --filter docs... dev", diff --git a/scripts/build.ts b/scripts/build.ts new file mode 100644 index 0000000..b59111e --- /dev/null +++ b/scripts/build.ts @@ -0,0 +1,101 @@ +import * as path from 'node:path' +import fs from 'node:fs' +import { cwd } from 'node:process' +import { build } from 'vite' + +import react from '@vitejs/plugin-react' +import dts from 'vite-plugin-dts' +import tailwind from 'tailwindcss' +import autoprefixer from 'autoprefixer' +import postcssReplace from 'postcss-replace' + +const imports = [ + { + entry: 'src/index.ts', + fileName: 'index', + }, + { + entry: 'src/bundle-full.ts', + fileName: 'bundle-full', + }, +] + +const __dirname = cwd() + +imports.forEach(async ({ entry, fileName }) => { + const plugins: any = [react(), dts({ + rollupTypes: true, + afterBuild: (emittedFiles) => { + emittedFiles.forEach((content, filePath) => { + if (filePath.endsWith('.d.ts')) { + const newFilePath = filePath.replace('.d.ts', '.d.cts') + + fs.writeFileSync(newFilePath, content) + } + }) + }, + })] + + await build({ + configFile: false, + plugins, + resolve: { + alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }], + }, + css: { + postcss: { + plugins: [ + tailwind(), + autoprefixer(), + postcssReplace({ + pattern: /(--tw|\*, ::before, ::after)/g, + data: { + '--tw': '--richtext', // Prefixing + '*, ::before, ::after': ':root', // So variables does not pollute every element + }, + }), + ], + }, + preprocessorOptions: { + scss: { + charset: false, + api: 'modern-compiler', // or 'modern' + }, + }, + }, + build: { + cssMinify: 'esbuild', + minify: 'esbuild', + outDir: 'lib', + lib: { + entry: path.resolve(__dirname, entry), + formats: ['es', 'cjs'], + fileName, + }, + rollupOptions: { + input: { + index: path.resolve(__dirname, entry), + }, + output: entry === 'src/index.ts' + ? { + manualChunks(id) { + if (id.includes('@tiptap')) { + return 'tiptap' + } + if (id.includes('node_modules')) { + return 'vendor' + } + if (id.includes('src/utils')) { + return 'utils' + } + if (id.includes('src/locales')) { + return 'locales' + } + }, + } + : {}, + external: entry === 'src/index.ts' ? ['react', 'react-dom', 'react/jsx-runtime', 'katex', 'shiki', 'docx', '@radix-ui/react-dropdown-menu', '@radix-ui/react-icons', '@radix-ui/react-label', '@radix-ui/react-popover', '@radix-ui/react-separator', '@radix-ui/react-slot', '@radix-ui/react-switch', '@radix-ui/react-tabs', '@radix-ui/react-toast', '@radix-ui/react-toggle', '@radix-ui/react-tooltip', '@radix-ui/react-select', '@radix-ui/react-checkbox', 'react-colorful', 'scroll-into-view-if-needed', 'tippy.js', 'lucide-react', 'prosemirror-docx', 're-resizable', '@excalidraw/excalidraw', '@radix-ui/react-dialog', 'react-image-crop', 'mermaid', 'react-tweet', 'reactjs-signal'] : ['react', 'react-dom', 'react/jsx-runtime', 'katex', 'shiki', '@radix-ui/react-dropdown-menu', '@radix-ui/react-icons', '@radix-ui/react-label', '@radix-ui/react-popover', '@radix-ui/react-separator', '@radix-ui/react-slot', '@radix-ui/react-switch', '@radix-ui/react-tabs', '@radix-ui/react-toast', '@radix-ui/react-toggle', '@radix-ui/react-tooltip', '@radix-ui/react-select', '@radix-ui/react-checkbox', 'react-colorful', 'scroll-into-view-if-needed', 'tippy.js', 'lucide-react', 're-resizable', '@excalidraw/excalidraw', '@radix-ui/react-dialog', 'react-image-crop', 'mermaid', 'react-tweet', 'reactjs-signal'], + }, + }, + }) +}) diff --git a/src/bundle-full.ts b/src/bundle-full.ts new file mode 100644 index 0000000..ef7229d --- /dev/null +++ b/src/bundle-full.ts @@ -0,0 +1,14 @@ +/* eslint-disable import/first */ +export * from '@/extensions' + +export { default } from '@/components/RichTextEditor' + +import locale, { en, hu_HU, pt_BR, vi, zh_CN } from './locales' +import { useEditorState } from '@/hooks/useEditorState' + +export { locale, en, hu_HU, vi, zh_CN, pt_BR } + +export type { UseEditorStateReturn } from '@/hooks/useEditorState' +export { useEditorState } +export type { Editor, UseEditorOptions } from '@tiptap/react' +export { BubbleMenu } from '@tiptap/react' diff --git a/src/index.ts b/src/index.ts index ef7229d..3b8d614 100644 --- a/src/index.ts +++ b/src/index.ts @@ -10,5 +10,5 @@ export { locale, en, hu_HU, vi, zh_CN, pt_BR } export type { UseEditorStateReturn } from '@/hooks/useEditorState' export { useEditorState } -export type { Editor, UseEditorOptions } from '@tiptap/react' export { BubbleMenu } from '@tiptap/react' +export type { Editor, UseEditorOptions } from '@tiptap/react' diff --git a/vite.config.ts b/vite.config.ts index daf2ef7..7a4179e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -59,6 +59,7 @@ export default defineConfig(({ mode }) => { lib: { entry: path.resolve(__dirname, 'src/index.ts'), formats: ['es', 'cjs'], + fileName: 'index', }, rollupOptions: { output: {