fix prism support in esm build

etrepum · Mar 30, 2024 · 8685c5d · 8685c5d
1 parent 076363f
commit 8685c5d
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 65 deletions.
diff --git a/libdefs/globals.d.ts b/libdefs/globals.d.ts
@@ -3,5 +3,6 @@ declare module '*.jpeg';
 declare module '*.gif';
 declare module '*.png';
 declare module '*.svg';
+declare module 'prismjs/components/prism-*';
 
 declare var __DEV__: boolean;
diff --git a/packages/lexical-code/src/CodeHighlightNode.ts b/packages/lexical-code/src/CodeHighlightNode.ts
@@ -17,21 +17,6 @@ import type {
   TabNode,
 } from 'lexical';
 
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-markdown';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-objectivec';
-import 'prismjs/components/prism-sql';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-rust';
-import 'prismjs/components/prism-swift';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-java';
-import 'prismjs/components/prism-cpp';
-
 import {
   addClassNamesToElement,
   removeClassNamesFromElement,
@@ -42,8 +27,8 @@ import {
   ElementNode,
   TextNode,
 } from 'lexical';
-import * as Prism from 'prismjs';
 
+import {Prism} from './CodeHighlighterPrism';
 import {$createCodeNode} from './CodeNode';
 
 export const DEFAULT_CODE_LANGUAGE = 'javascript';

diff --git a/packages/lexical-code/src/CodeHighlighter.ts b/packages/lexical-code/src/CodeHighlighter.ts
@@ -6,59 +6,43 @@
  *
  */
 
-// eslint-disable-next-line simple-import-sort/imports
 import type {
+  BaseSelection,
   LexicalCommand,
   LexicalEditor,
   LexicalNode,
-  RangeSelection,
   LineBreakNode,
   NodeKey,
-  BaseSelection,
+  RangeSelection,
 } from 'lexical';
 
-import * as Prism from 'prismjs';
-
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-markdown';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-objectivec';
-import 'prismjs/components/prism-sql';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-rust';
-import 'prismjs/components/prism-swift';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-java';
-import 'prismjs/components/prism-cpp';
-
 import {mergeRegister} from '@lexical/utils';
 import {
   $createLineBreakNode,
+  $createTabNode,
   $createTextNode,
   $getNodeByKey,
   $getSelection,
+  $insertNodes,
   $isLineBreakNode,
-  $createTabNode,
   $isRangeSelection,
+  $isTabNode,
   $isTextNode,
   COMMAND_PRIORITY_LOW,
-  INSERT_TAB_COMMAND,
   INDENT_CONTENT_COMMAND,
+  INSERT_TAB_COMMAND,
   KEY_ARROW_DOWN_COMMAND,
   KEY_ARROW_UP_COMMAND,
+  KEY_TAB_COMMAND,
   MOVE_TO_END,
   MOVE_TO_START,
-  $insertNodes,
   OUTDENT_CONTENT_COMMAND,
-  KEY_TAB_COMMAND,
-  TextNode,
-  $isTabNode,
   TabNode,
+  TextNode,
 } from 'lexical';
+import invariant from 'shared/invariant';
 
+import {Prism, reifyPrismLanguages} from './CodeHighlighterPrism';
 import {
   $createCodeHighlightNode,
   $isCodeHighlightNode,
@@ -67,9 +51,7 @@ import {
   getFirstCodeNodeOfLine,
   getLastCodeNodeOfLine,
 } from './CodeHighlightNode';
-
 import {$isCodeNode, CodeNode} from './CodeNode';
-import invariant from 'shared/invariant';
 
 type TokenContent = string | Token | (string | Token)[];
 
@@ -823,6 +805,7 @@ export function registerCodeHighlighting(
   editor: LexicalEditor,
   tokenizer?: Tokenizer,
 ): () => void {
+  reifyPrismLanguages();
   if (!editor.hasNodes([CodeNode, CodeHighlightNode])) {
     throw new Error(
       'CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor',

diff --git a/packages/lexical-code/src/CodeHighlighterPrism.ts b/packages/lexical-code/src/CodeHighlighterPrism.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// eslint-disable-next-line simple-import-sort/imports
+import * as Prism from 'prismjs';
+
+import * as prism_clike from 'prismjs/components/prism-clike';
+import * as prism_javascript from 'prismjs/components/prism-javascript';
+import * as prism_markup from 'prismjs/components/prism-markup';
+import * as prism_markdown from 'prismjs/components/prism-markdown';
+import * as prism_c from 'prismjs/components/prism-c';
+import * as prism_css from 'prismjs/components/prism-css';
+import * as prism_objectivec from 'prismjs/components/prism-objectivec';
+import * as prism_sql from 'prismjs/components/prism-sql';
+import * as prism_python from 'prismjs/components/prism-python';
+import * as prism_rust from 'prismjs/components/prism-rust';
+import * as prism_swift from 'prismjs/components/prism-swift';
+import * as prism_typescript from 'prismjs/components/prism-typescript';
+import * as prism_java from 'prismjs/components/prism-java';
+import * as prism_cpp from 'prismjs/components/prism-cpp';
+
+// Avoid tree-shaking
+export const reifyPrismLanguages = (): unknown => ({
+  Prism,
+  languages: [
+    prism_clike,
+    prism_javascript,
+    prism_markup,
+    prism_markdown,
+    prism_c,
+    prism_css,
+    prism_objectivec,
+    prism_sql,
+    prism_python,
+    prism_rust,
+    prism_swift,
+    prism_typescript,
+    prism_java,
+    prism_cpp,
+  ],
+});
+
+export {Prism};
diff --git a/packages/lexical-code/src/CodeNode.ts b/packages/lexical-code/src/CodeNode.ts
@@ -6,7 +6,7 @@
  *
  */
 
-// eslint-disable-next-line simple-import-sort/imports
+import type {CodeHighlightNode} from '@lexical/code';
 import type {
   DOMConversionMap,
   DOMConversionOutput,
@@ -21,39 +21,24 @@ import type {
   Spread,
   TabNode,
 } from 'lexical';
-import type {CodeHighlightNode} from '@lexical/code';
-
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-markdown';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-objectivec';
-import 'prismjs/components/prism-sql';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-rust';
-import 'prismjs/components/prism-swift';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-java';
-import 'prismjs/components/prism-cpp';
 
 import {addClassNamesToElement, isHTMLElement} from '@lexical/utils';
 import {
   $applyNodeReplacement,
   $createLineBreakNode,
   $createParagraphNode,
-  ElementNode,
-  $isTabNode,
   $createTabNode,
+  $isTabNode,
   $isTextNode,
+  ElementNode,
 } from 'lexical';
+
+import {Prism} from './CodeHighlighterPrism';
 import {
-  $isCodeHighlightNode,
   $createCodeHighlightNode,
+  $isCodeHighlightNode,
   getFirstCodeNodeOfLine,
 } from './CodeHighlightNode';
-import * as Prism from 'prismjs';
 
 export type SerializedCodeNode = Spread<
   {

diff --git a/scripts/build.js b/scripts/build.js
@@ -89,6 +89,13 @@ const lexicalReactModuleExternals = lexicalReactModules.map((module) => {
   return external;
 });
 
+function resolveExternalEsm(id) {
+  if (/^prismjs\/components\/prism-/.test(id)) {
+    return `${id}.js`;
+  }
+  return id;
+}
+
 const externals = [
   'lexical',
   'prismjs/components/prism-core',
@@ -277,6 +284,7 @@ async function build(name, inputFile, outputPath, outputFile, isProd, format) {
     format, // change between es and cjs modules
     freeze: false,
     interop: format === 'esm' ? 'esModule' : false,
+    paths: format === 'esm' ? resolveExternalEsm : undefined,
   };
   const result = await rollup.rollup(inputOptions);
   const {output} = await result.write(outputOptions);