applications/docs-editor/webpack.config.ts

   1 import type { Configuration } from 'webpack'
   2 import getConfig from '@proton/pack/webpack.config'
   3 import { addDevEntry } from '@proton/pack/webpack/entries'
   4 import * as path from 'path'
   5
   6 const result = (env: any): Configuration => {
   7   const config = getConfig(env)
   8
   9   if (env.appMode === 'standalone') {
  10     addDevEntry(config)
  11   }
  12
  13   /**
  14    * To get proper sourcemaps for Lexical, we need to use their development builds, which we will handle minifying ourself
  15    * and including in our own sourcemaps.
  16    *
  17    * To do this, determine all invokved Lexical paths by temporarily enabling this plugin:
  18    *
  19     const uniqueRequests = new Set()
  20     class LexicalPathPrinter {
  21       apply(resolver: any) {
  22         resolver.hooks.resolve.tapAsync('LexicalPathPrinter', (request: any, context: any, callback: any) => {
  23           if (request.request && (request.request.startsWith('@lexical') || request.request === 'lexical')) {
  24             uniqueRequests.add(request.request)
  25           }
  26           console.log('Unique Lexical paths:', uniqueRequests)
  27           callback()
  28         })
  29       }
  30     }
  31
  32     config.resolve = {
  33       ...config.resolve,
  34       plugins: [...(config.resolve?.plugins || []), new LexicalPathPrinter()],
  35     }
  36
  37    * Then for every path in the logged array, add a manual entry in `alias` below.
  38    * To verify it worked, cause Lexical to throw an exception in the code, via something like:
  39    *
  40    *   useEffect(() => {
  41    *     $createTextNode(undefined)
  42    *   }, [])
  43    *
  44    * Build and run the application via `yarn build:web && python3 -m http.server 8001 --directory dist`.
  45    * Open in browser, notice exception, and notice it should say ...dev.mjs instead of .prod.mjs.
  46    */
  47
  48   config.resolve = {
  49     ...config.resolve,
  50
  51     alias: {
  52       ...config.resolve?.alias,
  53       lexical: path.resolve(__dirname, '../../node_modules/lexical/Lexical.dev.mjs'),
  54       '@lexical/clipboard': path.resolve(__dirname, '../../node_modules/@lexical/clipboard/LexicalClipboard.dev.mjs'),
  55       '@lexical/code': path.resolve(__dirname, '../../node_modules/@lexical/code/LexicalCode.dev.mjs'),
  56       '@lexical/devtools-core': path.resolve(__dirname, '../../node_modules/@lexical/devtools-core/LexicalDevtoolsCore.dev.mjs'),
  57       '@lexical/dragon': path.resolve(__dirname, '../../node_modules/@lexical/dragon/LexicalDragon.dev.mjs'),
  58       '@lexical/hashtag': path.resolve(__dirname, '../../node_modules/@lexical/hashtag/LexicalHashtag.dev.mjs'),
  59       '@lexical/headless': path.resolve(__dirname, '../../node_modules/@lexical/headless/LexicalHeadless.dev.mjs'),
  60       '@lexical/history': path.resolve(__dirname, '../../node_modules/@lexical/history/LexicalHistory.dev.mjs'),
  61       '@lexical/html': path.resolve(__dirname, '../../node_modules/@lexical/html/LexicalHtml.dev.mjs'),
  62       '@lexical/link': path.resolve(__dirname, '../../node_modules/@lexical/link/LexicalLink.dev.mjs'),
  63       '@lexical/list': path.resolve(__dirname, '../../node_modules/@lexical/list/LexicalList.dev.mjs'),
  64       '@lexical/mark': path.resolve(__dirname, '../../node_modules/@lexical/mark/LexicalMark.dev.mjs'),
  65       '@lexical/markdown': path.resolve(__dirname, '../../node_modules/@lexical/markdown/LexicalMarkdown.dev.mjs'),
  66       '@lexical/offset': path.resolve(__dirname, '../../node_modules/@lexical/offset/LexicalOffset.dev.mjs'),
  67       '@lexical/overflow': path.resolve(__dirname, '../../node_modules/@lexical/overflow/LexicalOverflow.dev.mjs'),
  68       '@lexical/react/LexicalAutoFocusPlugin': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalAutoFocusPlugin.dev.mjs'),
  69       '@lexical/react/LexicalClearEditorPlugin': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalClearEditorPlugin.dev.mjs'),
  70       '@lexical/react/LexicalCollaborationContext': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalCollaborationContext.dev.mjs'),
  71       '@lexical/react/LexicalComposer': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalComposer.dev.mjs'),
  72       '@lexical/react/LexicalComposerContext': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalComposerContext.dev.mjs'),
  73       '@lexical/react/LexicalContentEditable': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalContentEditable.dev.mjs'),
  74       '@lexical/react/LexicalEditorRefPlugin': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalEditorRefPlugin.dev.mjs'),
  75       '@lexical/react/LexicalErrorBoundary': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalErrorBoundary.dev.mjs'),
  76       '@lexical/react/LexicalHistoryPlugin': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalHistoryPlugin.dev.mjs'),
  77       '@lexical/react/LexicalHorizontalRuleNode': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalHorizontalRuleNode.dev.mjs'),
  78       '@lexical/react/LexicalHorizontalRulePlugin': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalHorizontalRulePlugin.dev.mjs'),
  79       '@lexical/react/LexicalLinkPlugin': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalLinkPlugin.dev.mjs'),
  80       '@lexical/react/LexicalListPlugin': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalListPlugin.dev.mjs'),
  81       '@lexical/react/LexicalMarkdownShortcutPlugin': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalMarkdownShortcutPlugin.dev.mjs'),
  82       '@lexical/react/LexicalOnChangePlugin': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalOnChangePlugin.dev.mjs'),
  83       '@lexical/react/LexicalRichTextPlugin': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalRichTextPlugin.dev.mjs'),
  84       '@lexical/react/LexicalTabIndentationPlugin': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalTabIndentationPlugin.dev.mjs'),
  85       '@lexical/react/LexicalTreeView': path.resolve(__dirname, '../../node_modules/@lexical/react/LexicalTreeView.dev.mjs'),
  86       '@lexical/react/useLexicalEditable': path.resolve(__dirname, '../../node_modules/@lexical/react/useLexicalEditable.dev.mjs'),
  87       '@lexical/react/useLexicalNodeSelection': path.resolve(__dirname, '../../node_modules/@lexical/react/useLexicalNodeSelection.dev.mjs'),
  88       '@lexical/rich-text': path.resolve(__dirname, '../../node_modules/@lexical/rich-text/LexicalRichText.dev.mjs'),
  89       '@lexical/selection': path.resolve(__dirname, '../../node_modules/@lexical/selection/LexicalSelection.dev.mjs'),
  90       '@lexical/table': path.resolve(__dirname, '../../node_modules/@lexical/table/LexicalTable.dev.mjs'),
  91       '@lexical/text': path.resolve(__dirname, '../../node_modules/@lexical/text/LexicalText.dev.mjs'),
  92       '@lexical/utils': path.resolve(__dirname, '../../node_modules/@lexical/utils/LexicalUtils.dev.mjs'),
  93       '@lexical/yjs': path.resolve(__dirname, '../../node_modules/@lexical/yjs/LexicalYjs.dev.mjs'),
  94     },
  95   }
  96
  97   // @ts-ignore
  98   const scssRule = config.module.rules.find((rule) => rule.test.toString().includes('scss'))
  99   // @ts-ignore
 100   const postCssLoader = scssRule.use.find((use) => use.loader.includes('postcss-loader'))
 101   // @ts-ignore
 102   postCssLoader.options.postcssOptions.plugins.push(require('tailwindcss')())
 103
 104   return config
 105 }
 106
 107 export default result