Import everything as unnamed ESM modules and disable treeshaking for WWW code package

Author: thegreatercurve

packages/lexical-code/src/CodeHighlightNode.ts

@@ -17,6 +17,8 @@ import type {
   TabNode,
 } from 'lexical';
 
+import './CodeHighlighterPrism';
+
 import {
   addClassNamesToElement,
   removeClassNamesFromElement,
@@ -28,7 +30,6 @@ import {
   TextNode,
 } from 'lexical';
 
-import {Prism} from './CodeHighlighterPrism';
 import {$createCodeNode} from './CodeNode';
 
 export const DEFAULT_CODE_LANGUAGE = 'javascript';
@@ -82,11 +83,11 @@ export function getLanguageFriendlyName(lang: string) {
 export const getDefaultCodeLanguage = (): string => DEFAULT_CODE_LANGUAGE;
 
 export const getCodeLanguages = (): Array<string> =>
-  Object.keys(Prism.languages)
+  Object.keys(window.Prism.languages)
     .filter(
       // Prism has several language helpers mixed into languages object
       // so filtering them out here to get langs list
-      (language) => typeof Prism.languages[language] !== 'function',
+      (language) => typeof window.Prism.languages[language] !== 'function',
     )
     .sort();
 

packages/lexical-code/src/CodeHighlighter.ts

@@ -16,6 +16,8 @@ import type {
   RangeSelection,
 } from 'lexical';
 
+import './CodeHighlighterPrism';
+
 import {mergeRegister} from '@lexical/utils';
 import {
   $createLineBreakNode,
@@ -42,7 +44,6 @@ import {
 } from 'lexical';
 import invariant from 'shared/invariant';
 
-import {Prism} from './CodeHighlighterPrism';
 import {
   $createCodeHighlightNode,
   $isCodeHighlightNode,
@@ -68,9 +69,10 @@ export interface Tokenizer {
 export const PrismTokenizer: Tokenizer = {
   defaultLanguage: DEFAULT_CODE_LANGUAGE,
   tokenize(code: string, language?: string): (string | Token)[] {
-    return Prism.tokenize(
+    return window.Prism.tokenize(
       code,
-      Prism.languages[language || ''] || Prism.languages[this.defaultLanguage],
+      window.Prism.languages[language || ''] ||
+        window.Prism.languages[this.defaultLanguage],
     );
   },
 };

packages/lexical-code/src/CodeHighlighterPrism.ts

@@ -7,21 +7,19 @@
  */
 
 // eslint-disable-next-line simple-import-sort/imports
-require('prismjs');
+import 'prismjs';
 
-require('prismjs/components/prism-clike');
-require('prismjs/components/prism-javascript');
-require('prismjs/components/prism-markup');
-require('prismjs/components/prism-markdown');
-require('prismjs/components/prism-c');
-require('prismjs/components/prism-css');
-require('prismjs/components/prism-objectivec');
-require('prismjs/components/prism-sql');
-require('prismjs/components/prism-python');
-require('prismjs/components/prism-rust');
-require('prismjs/components/prism-swift');
-require('prismjs/components/prism-typescript');
-require('prismjs/components/prism-java');
-require('prismjs/components/prism-cpp');
-
-export const Prism = global.Prism;
+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';

packages/lexical-code/src/CodeNode.ts

@@ -22,6 +22,8 @@ import type {
   TabNode,
 } from 'lexical';
 
+import './CodeHighlighterPrism';
+
 import {addClassNamesToElement, isHTMLElement} from '@lexical/utils';
 import {
   $applyNodeReplacement,
@@ -33,7 +35,6 @@ import {
   ElementNode,
 } from 'lexical';
 
-import {Prism} from './CodeHighlighterPrism';
 import {
   $createCodeHighlightNode,
   $isCodeHighlightNode,
@@ -51,7 +52,7 @@ const mapToPrismLanguage = (
   language: string | null | undefined,
 ): string | null | undefined => {
   // eslint-disable-next-line no-prototype-builtins
-  return language != null && Prism.languages.hasOwnProperty(language)
+  return language != null && window.Prism.languages.hasOwnProperty(language)
     ? language
     : undefined;
 };

scripts/build.js

@@ -287,7 +287,8 @@ async function build(name, inputFile, outputPath, outputFile, isProd, format) {
         },
       },
     ],
-    treeshake: 'smallest',
+    // This ensures PrismJS imports get included in the bundle
+    treeshake: name !== 'Lexical Code' ? 'smallest' : false,
   };
   const outputOptions = {
     esModule: false,