From 5eb1b678b6662c7a2112cb19adaba9c633cf3b85 Mon Sep 17 00:00:00 2001 From: Ian Clanton-Thuon Date: Sun, 7 Jul 2024 18:19:57 -0700 Subject: [PATCH] Bundle react, react-dom, and Monaco. --- common/config/rush/pnpm-lock.yaml | 296 ++++++++++++++++++++++++++++-- playground/package.json | 12 +- playground/public/index.hbs | 6 +- playground/src/CodeEditor.tsx | 238 +++++++++--------------- playground/webpack.config.js | 81 ++++---- 5 files changed, 407 insertions(+), 226 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index ba11cca9..e1f61fb8 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -85,11 +85,17 @@ importers: specifier: 16.9.3 version: 16.9.3 monaco-editor: - specifier: ~0.38.0 - version: 0.38.0 + specifier: ~0.50.0 + version: 0.50.0 promise: specifier: ~8.0.3 version: 8.0.3 + react: + specifier: ~16.14.0 + version: 16.14.0 + react-dom: + specifier: ~16.14.0 + version: 16.14.0(react@16.14.0) tslib: specifier: ~2.5.3 version: 2.5.3 @@ -115,6 +121,12 @@ importers: handlebars-loader: specifier: ~1.7.3 version: 1.7.3(handlebars@4.7.7) + monaco-editor-webpack-plugin: + specifier: ~7.1.0 + version: 7.1.0(monaco-editor@0.50.0)(webpack@5.92.1) + webpack: + specifier: ~5.92.1 + version: 5.92.1 ../../tsdoc: devDependencies: @@ -851,6 +863,13 @@ packages: '@jridgewell/sourcemap-codec': 1.4.14 dev: true + /@jridgewell/trace-mapping@0.3.25: + resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} + dependencies: + '@jridgewell/resolve-uri': 3.1.0 + '@jridgewell/sourcemap-codec': 1.4.15 + dev: true + /@leichtgewicht/ip-codec@2.0.4: resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==} dev: true @@ -1441,6 +1460,10 @@ packages: resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==} dev: true + /@types/estree@1.0.5: + resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} + dev: true + /@types/express-serve-static-core@4.17.35: resolution: {integrity: sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==} dependencies: @@ -1784,6 +1807,13 @@ packages: '@webassemblyjs/helper-wasm-bytecode': 1.11.6 dev: true + /@webassemblyjs/ast@1.12.1: + resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==} + dependencies: + '@webassemblyjs/helper-numbers': 1.11.6 + '@webassemblyjs/helper-wasm-bytecode': 1.11.6 + dev: true + /@webassemblyjs/floating-point-hex-parser@1.11.6: resolution: {integrity: sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==} dev: true @@ -1796,6 +1826,10 @@ packages: resolution: {integrity: sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==} dev: true + /@webassemblyjs/helper-buffer@1.12.1: + resolution: {integrity: sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==} + dev: true + /@webassemblyjs/helper-numbers@1.11.6: resolution: {integrity: sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==} dependencies: @@ -1817,6 +1851,15 @@ packages: '@webassemblyjs/wasm-gen': 1.11.6 dev: true + /@webassemblyjs/helper-wasm-section@1.12.1: + resolution: {integrity: sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==} + dependencies: + '@webassemblyjs/ast': 1.12.1 + '@webassemblyjs/helper-buffer': 1.12.1 + '@webassemblyjs/helper-wasm-bytecode': 1.11.6 + '@webassemblyjs/wasm-gen': 1.12.1 + dev: true + /@webassemblyjs/ieee754@1.11.6: resolution: {integrity: sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==} dependencies: @@ -1846,6 +1889,19 @@ packages: '@webassemblyjs/wast-printer': 1.11.6 dev: true + /@webassemblyjs/wasm-edit@1.12.1: + resolution: {integrity: sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==} + dependencies: + '@webassemblyjs/ast': 1.12.1 + '@webassemblyjs/helper-buffer': 1.12.1 + '@webassemblyjs/helper-wasm-bytecode': 1.11.6 + '@webassemblyjs/helper-wasm-section': 1.12.1 + '@webassemblyjs/wasm-gen': 1.12.1 + '@webassemblyjs/wasm-opt': 1.12.1 + '@webassemblyjs/wasm-parser': 1.12.1 + '@webassemblyjs/wast-printer': 1.12.1 + dev: true + /@webassemblyjs/wasm-gen@1.11.6: resolution: {integrity: sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==} dependencies: @@ -1856,6 +1912,16 @@ packages: '@webassemblyjs/utf8': 1.11.6 dev: true + /@webassemblyjs/wasm-gen@1.12.1: + resolution: {integrity: sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==} + dependencies: + '@webassemblyjs/ast': 1.12.1 + '@webassemblyjs/helper-wasm-bytecode': 1.11.6 + '@webassemblyjs/ieee754': 1.11.6 + '@webassemblyjs/leb128': 1.11.6 + '@webassemblyjs/utf8': 1.11.6 + dev: true + /@webassemblyjs/wasm-opt@1.11.6: resolution: {integrity: sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==} dependencies: @@ -1865,6 +1931,15 @@ packages: '@webassemblyjs/wasm-parser': 1.11.6 dev: true + /@webassemblyjs/wasm-opt@1.12.1: + resolution: {integrity: sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==} + dependencies: + '@webassemblyjs/ast': 1.12.1 + '@webassemblyjs/helper-buffer': 1.12.1 + '@webassemblyjs/wasm-gen': 1.12.1 + '@webassemblyjs/wasm-parser': 1.12.1 + dev: true + /@webassemblyjs/wasm-parser@1.11.6: resolution: {integrity: sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==} dependencies: @@ -1876,6 +1951,17 @@ packages: '@webassemblyjs/utf8': 1.11.6 dev: true + /@webassemblyjs/wasm-parser@1.12.1: + resolution: {integrity: sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==} + dependencies: + '@webassemblyjs/ast': 1.12.1 + '@webassemblyjs/helper-api-error': 1.11.6 + '@webassemblyjs/helper-wasm-bytecode': 1.11.6 + '@webassemblyjs/ieee754': 1.11.6 + '@webassemblyjs/leb128': 1.11.6 + '@webassemblyjs/utf8': 1.11.6 + dev: true + /@webassemblyjs/wast-printer@1.11.6: resolution: {integrity: sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==} dependencies: @@ -1883,6 +1969,13 @@ packages: '@xtuc/long': 4.2.2 dev: true + /@webassemblyjs/wast-printer@1.12.1: + resolution: {integrity: sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==} + dependencies: + '@webassemblyjs/ast': 1.12.1 + '@xtuc/long': 4.2.2 + dev: true + /@xtuc/ieee754@1.2.0: resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} dev: true @@ -1919,6 +2012,14 @@ packages: acorn: 8.8.2 dev: true + /acorn-import-attributes@1.9.5(acorn@8.11.3): + resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==} + peerDependencies: + acorn: ^8 + dependencies: + acorn: 8.11.3 + dev: true + /acorn-jsx@5.3.2(acorn@8.11.3): resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: @@ -2176,7 +2277,7 @@ packages: caniuse-lite: 1.0.30001499 fraction.js: 4.2.0 normalize-range: 0.1.2 - picocolors: 1.0.0 + picocolors: 1.0.1 postcss: 8.4.24 postcss-value-parser: 4.2.0 dev: true @@ -2344,6 +2445,17 @@ packages: update-browserslist-db: 1.0.11(browserslist@4.21.7) dev: true + /browserslist@4.23.1: + resolution: {integrity: sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + dependencies: + caniuse-lite: 1.0.30001640 + electron-to-chromium: 1.4.818 + node-releases: 2.0.14 + update-browserslist-db: 1.1.0(browserslist@4.23.1) + dev: true + /bser@2.1.1: resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==} dependencies: @@ -2421,6 +2533,10 @@ packages: resolution: {integrity: sha512-IhoQqRrW6WiecFcfZgoJS1YLEN1/HR1vHP5WNgjCARRW7KUNToHHTX3FrwCM+y4zkRa48D9rE90WFYc2IWhDWQ==} dev: true + /caniuse-lite@1.0.30001640: + resolution: {integrity: sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA==} + dev: true + /chalk@2.4.2: resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} engines: {node: '>=4'} @@ -3052,6 +3168,10 @@ packages: resolution: {integrity: sha512-HK3r9l+Jm8dYAm1ctXEWIC+hV60zfcjS9UA5BDlYvnI5S7PU/yytjpvSrTNrSSRRkuu3tDyZhdkwIczh+0DWaw==} dev: true + /electron-to-chromium@1.4.818: + resolution: {integrity: sha512-eGvIk2V0dGImV9gWLq8fDfTTsCAeMDwZqEPMr+jMInxZdnp9Us8UpovYpRCf9NQ7VOFgrN2doNSgvISbsbNpxA==} + dev: true + /emittery@0.13.1: resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==} engines: {node: '>=12'} @@ -3075,6 +3195,14 @@ packages: tapable: 2.2.1 dev: true + /enhanced-resolve@5.17.0: + resolution: {integrity: sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==} + engines: {node: '>=10.13.0'} + dependencies: + graceful-fs: 4.2.11 + tapable: 2.2.1 + dev: true + /entities@2.2.0: resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==} dev: true @@ -3260,6 +3388,11 @@ packages: engines: {node: '>=6'} dev: true + /escalade@3.1.2: + resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==} + engines: {node: '>=6'} + dev: true + /escape-html@1.0.3: resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==} dev: true @@ -4931,7 +5064,6 @@ packages: /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} - dev: true /js-yaml@3.14.1: resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==} @@ -5149,7 +5281,6 @@ packages: hasBin: true dependencies: js-tokens: 4.0.0 - dev: true /lower-case@2.0.2: resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} @@ -5285,9 +5416,19 @@ packages: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} dev: true - /monaco-editor@0.38.0: - resolution: {integrity: sha512-11Fkh6yzEmwx7O0YoLxeae0qEGFwmyPRlVxpg7oF9czOOCB/iCjdJrG5I67da5WiXK3YJCxoz9TJFE8Tfq/v9A==} - dev: false + /monaco-editor-webpack-plugin@7.1.0(monaco-editor@0.50.0)(webpack@5.92.1): + resolution: {integrity: sha512-ZjnGINHN963JQkFqjjcBtn1XBtUATDZBMgNQhDQwd78w2ukRhFXAPNgWuacaQiDZsUr4h1rWv5Mv6eriKuOSzA==} + peerDependencies: + monaco-editor: '>= 0.31.0' + webpack: ^4.5.0 || 5.x + dependencies: + loader-utils: 2.0.4 + monaco-editor: 0.50.0 + webpack: 5.92.1 + dev: true + + /monaco-editor@0.50.0: + resolution: {integrity: sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA==} /mrmime@1.0.1: resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==} @@ -5357,6 +5498,10 @@ packages: resolution: {integrity: sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==} dev: true + /node-releases@2.0.14: + resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} + dev: true + /normalize-path@3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} @@ -5392,7 +5537,6 @@ packages: /object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} - dev: true /object-inspect@1.12.3: resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==} @@ -5638,8 +5782,8 @@ packages: engines: {node: '>=8'} dev: true - /picocolors@1.0.0: - resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} + /picocolors@1.0.1: + resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} dev: true /picomatch@2.3.1: @@ -6031,7 +6175,7 @@ packages: engines: {node: ^10 || ^12 || >=14} dependencies: nanoid: 3.3.6 - picocolors: 1.0.0 + picocolors: 1.0.1 source-map-js: 1.0.2 dev: true @@ -6077,7 +6221,6 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 react-is: 16.13.1 - dev: true /proxy-addr@2.0.7: resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==} @@ -6135,14 +6278,34 @@ packages: unpipe: 1.0.0 dev: true + /react-dom@16.14.0(react@16.14.0): + resolution: {integrity: sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==} + peerDependencies: + react: ^16.14.0 + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + prop-types: 15.8.1 + react: 16.14.0 + scheduler: 0.19.1 + dev: false + /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - dev: true /react-is@18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} dev: true + /react@16.14.0: + resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==} + engines: {node: '>=0.10.0'} + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + prop-types: 15.8.1 + dev: false + /read@1.0.7: resolution: {integrity: sha512-rSOKNYUmaxy0om1BNjMN4ezNT6VKK+2xF4GBhc81mkH7L60i6dp8qPYrkndNLT3QPphoII3maL9PVC9XmhHwVQ==} engines: {node: '>=0.8'} @@ -6583,6 +6746,13 @@ packages: xmlchars: 2.2.0 dev: true + /scheduler@0.19.1: + resolution: {integrity: sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==} + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + dev: false + /schema-utils@3.2.0: resolution: {integrity: sha512-0zTyLGyDJYd/MBxG1AhJkKa6fpEBds4OQO2ut0w7OYG+ZGhGea09lijvzsqegYSik88zc7cUtIlnnO+/BvD6gQ==} engines: {node: '>= 10.13.0'} @@ -7025,7 +7195,7 @@ packages: css-select: 4.3.0 css-tree: 1.1.3 csso: 4.2.0 - picocolors: 1.0.0 + picocolors: 1.0.1 stable: 0.1.8 dev: true @@ -7043,6 +7213,30 @@ packages: engines: {node: '>=6'} dev: true + /terser-webpack-plugin@5.3.10(webpack@5.92.1): + resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==} + engines: {node: '>= 10.13.0'} + peerDependencies: + '@swc/core': '*' + esbuild: '*' + uglify-js: '*' + webpack: ^5.1.0 + peerDependenciesMeta: + '@swc/core': + optional: true + esbuild: + optional: true + uglify-js: + optional: true + dependencies: + '@jridgewell/trace-mapping': 0.3.25 + jest-worker: 27.5.1 + schema-utils: 3.2.0 + serialize-javascript: 6.0.1 + terser: 5.31.1 + webpack: 5.92.1 + dev: true + /terser-webpack-plugin@5.3.9(webpack@5.82.1): resolution: {integrity: sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==} engines: {node: '>= 10.13.0'} @@ -7078,6 +7272,17 @@ packages: source-map-support: 0.5.21 dev: true + /terser@5.31.1: + resolution: {integrity: sha512-37upzU1+viGvuFtBo9NPufCb9dwM0+l9hMxYyWfBA+fbwrPqNJAhbZ6W47bBFnZHKHTUBnMvi87434qq+qnxOg==} + engines: {node: '>=10'} + hasBin: true + dependencies: + '@jridgewell/source-map': 0.3.3 + acorn: 8.11.3 + commander: 2.20.3 + source-map-support: 0.5.21 + dev: true + /test-exclude@6.0.0: resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==} engines: {node: '>=8'} @@ -7294,7 +7499,18 @@ packages: dependencies: browserslist: 4.21.7 escalade: 3.1.1 - picocolors: 1.0.0 + picocolors: 1.0.1 + dev: true + + /update-browserslist-db@1.1.0(browserslist@4.23.1): + resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + dependencies: + browserslist: 4.23.1 + escalade: 3.1.2 + picocolors: 1.0.1 dev: true /uri-js@4.4.1: @@ -7382,6 +7598,14 @@ packages: graceful-fs: 4.2.11 dev: true + /watchpack@2.4.1: + resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==} + engines: {node: '>=10.13.0'} + dependencies: + glob-to-regexp: 0.4.1 + graceful-fs: 4.2.11 + dev: true + /wbuf@1.7.3: resolution: {integrity: sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==} dependencies: @@ -7527,6 +7751,46 @@ packages: - uglify-js dev: true + /webpack@5.92.1: + resolution: {integrity: sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==} + engines: {node: '>=10.13.0'} + hasBin: true + peerDependencies: + webpack-cli: '*' + peerDependenciesMeta: + webpack-cli: + optional: true + dependencies: + '@types/eslint-scope': 3.7.4 + '@types/estree': 1.0.5 + '@webassemblyjs/ast': 1.12.1 + '@webassemblyjs/wasm-edit': 1.12.1 + '@webassemblyjs/wasm-parser': 1.12.1 + acorn: 8.11.3 + acorn-import-attributes: 1.9.5(acorn@8.11.3) + browserslist: 4.23.1 + chrome-trace-event: 1.0.3 + enhanced-resolve: 5.17.0 + es-module-lexer: 1.3.0 + eslint-scope: 5.1.1 + events: 3.3.0 + glob-to-regexp: 0.4.1 + graceful-fs: 4.2.11 + json-parse-even-better-errors: 2.3.1 + loader-runner: 4.3.0 + mime-types: 2.1.35 + neo-async: 2.6.2 + schema-utils: 3.2.0 + tapable: 2.2.1 + terser-webpack-plugin: 5.3.10(webpack@5.92.1) + watchpack: 2.4.1 + webpack-sources: 3.2.3 + transitivePeerDependencies: + - '@swc/core' + - esbuild + - uglify-js + dev: true + /websocket-driver@0.7.4: resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==} engines: {node: '>=0.8.0'} diff --git a/playground/package.json b/playground/package.json index 321e5f06..2328620d 100644 --- a/playground/package.json +++ b/playground/package.json @@ -11,19 +11,23 @@ }, "dependencies": { "@microsoft/tsdoc": "workspace:*", - "@types/react-dom": "16.9.3", "@types/react": "16.9.11", - "monaco-editor": "~0.38.0", + "@types/react-dom": "16.9.3", + "monaco-editor": "~0.50.0", "promise": "~8.0.3", + "react": "~16.14.0", + "react-dom": "~16.14.0", "tslib": "~2.5.3" }, "devDependencies": { - "@rushstack/heft-web-rig": "~0.24.11", "@rushstack/heft": "^0.66.13", + "@rushstack/heft-web-rig": "~0.24.11", "@types/webpack-env": "1.18.0", "eslint": "~8.57.0", "eslint-plugin-header": "~3.1.1", + "handlebars": "~4.7.7", "handlebars-loader": "~1.7.3", - "handlebars": "~4.7.7" + "monaco-editor-webpack-plugin": "~7.1.0", + "webpack": "~5.92.1" } } diff --git a/playground/public/index.hbs b/playground/public/index.hbs index 0ac9cff7..56e2720a 100644 --- a/playground/public/index.hbs +++ b/playground/public/index.hbs @@ -25,10 +25,6 @@ -
- {{#each scriptsToInclude}} - - {{/each}} -
+
\ No newline at end of file diff --git a/playground/src/CodeEditor.tsx b/playground/src/CodeEditor.tsx index 03f2e561..95bee729 100644 --- a/playground/src/CodeEditor.tsx +++ b/playground/src/CodeEditor.tsx @@ -2,8 +2,9 @@ // See LICENSE in the project root for license information. import * as React from 'react'; -import type * as monacoEditor from 'monaco-editor'; +import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; import * as tsdoc from '@microsoft/tsdoc'; + import { FlexColDiv } from './FlexDivs'; export interface ITextRange { @@ -48,36 +49,19 @@ export interface ICodeEditorProps { } export interface ICodeEditorState { - monaco?: typeof monacoEditor; monacoErrorMessage?: string; } -interface IMonacoWindow extends Window { - require: { - (paths: string[], callback: (monaco: typeof monacoEditor) => void): void; - config: (options: { paths: { [name: string]: string } }) => void; - }; - MonacoEnvironment?: monacoEditor.Environment & { - getWorkerUrl: (workerId: string, label: string) => void; - }; -} - -interface IMonarchLanguageConfiguration extends monacoEditor.languages.IMonarchLanguage { +interface IMonarchLanguageConfiguration extends monaco.languages.IMonarchLanguage { keywords: string[]; } -declare const MONACO_URL: string; -const MONACO_BASE_URL: string = MONACO_URL; - export class CodeEditor extends React.Component { - private static _initializePromise: Promise; private static _editorIdCounter: number = 0; - private static _monaco: typeof monacoEditor; private _existingSyntaxStyles: { [hash: string]: string } = {}; private _editorId: string; - private _isMounted: boolean = false; - private _editor: monacoEditor.editor.IStandaloneCodeEditor | undefined; + private _editor: monaco.editor.IStandaloneCodeEditor | undefined; private _placeholderDivRef: HTMLDivElement | undefined; private _hostDivRef: HTMLDivElement | undefined; @@ -100,9 +84,9 @@ export class CodeEditor extends React.Component { - if (!CodeEditor._initializePromise) { - CodeEditor._initializePromise = new Promise( - (resolve: (monaco: typeof monacoEditor) => void, reject: (error: Error) => void) => { - const monacoWindow: IMonacoWindow = window as unknown as IMonacoWindow; - monacoWindow.require.config({ paths: { vs: `${MONACO_BASE_URL}vs/` } }); - - monacoWindow.MonacoEnvironment = { - getWorkerUrl: (workerId, label) => { - return `data:text/javascript;charset=utf-8,${encodeURIComponent( - 'self.MonacoEnvironment = {' + - `baseUrl: '${MONACO_BASE_URL}'` + - '};' + - `importScripts('${MONACO_BASE_URL}vs/base/worker/workerMain.js');` - )}`; - } - }; - - monacoWindow.require(['vs/editor/editor.main'], (monaco) => { - if (monaco) { - resolve(monaco); - } else { - reject(new Error('Unable to load Monaco editor')); - } - }); - } - ).then((monaco) => { - CodeEditor._monaco = monaco; - return monaco; - }); - } - - return CodeEditor._initializePromise; - } - public componentDidMount(): void { - this._isMounted = true; - CodeEditor._initializeMonaco() - .then((monaco) => { - this.setState({ monaco }); - if (this._isMounted) { - window.addEventListener('resize', this._onWindowResize); - } - }) - .catch((error) => { - this.setState({ monacoErrorMessage: `Error loading Monaco editor: ${error}` }); - }); + window.addEventListener('resize', this._onWindowResize); + + this._createEditor(); } public componentWillUnmount(): void { - this._isMounted = false; this._editor = undefined; this._placeholderDivRef = undefined; @@ -175,27 +115,25 @@ export class CodeEditor extends React.Component { - const startPos: monacoEditor.Position = this._getEditorModel().getPositionAt(marker.pos); - const endPos: monacoEditor.Position = this._getEditorModel().getPositionAt(marker.end); - return { - startLineNumber: startPos.lineNumber, - startColumn: startPos.column, - endLineNumber: endPos.lineNumber, - endColumn: endPos.column, - severity: CodeEditor._monaco.MarkerSeverity.Error, - message: marker.message - }; - }) - ); - - if (this.props.theme !== prevProps.theme) { - CodeEditor._monaco.editor.setTheme(this.props.theme || 'vs'); - } + monaco.editor.setModelMarkers( + this._getEditorModel(), + this._editorId, + (this.props.markers || []).map((marker) => { + const startPos: monaco.Position = this._getEditorModel().getPositionAt(marker.pos); + const endPos: monaco.Position = this._getEditorModel().getPositionAt(marker.end); + return { + startLineNumber: startPos.lineNumber, + startColumn: startPos.column, + endLineNumber: endPos.lineNumber, + endColumn: endPos.column, + severity: monaco.MarkerSeverity.Error, + message: marker.message + }; + }) + ); + + if (this.props.theme !== prevProps.theme) { + monaco.editor.setTheme(this.props.theme || 'vs'); } if (this.props.disableLineNumbers !== prevProps.disableLineNumbers) { @@ -248,7 +186,6 @@ export class CodeEditor extends React.Component { - const startPos: monacoEditor.Position = this._getEditorModel().getPositionAt(decoration.pos); - const endPos: monacoEditor.Position = this._getEditorModel().getPositionAt(decoration.end); + const startPos: monaco.Position = this._getEditorModel().getPositionAt(decoration.pos); + const endPos: monaco.Position = this._getEditorModel().getPositionAt(decoration.end); return { - range: new CodeEditor._monaco.Range( - startPos.lineNumber, - startPos.column, - endPos.lineNumber, - endPos.column - ), + range: new monaco.Range(startPos.lineNumber, startPos.column, endPos.lineNumber, endPos.column), options: { - stickiness: CodeEditor._monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, + stickiness: monaco.editor.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, isWholeLine: false, inlineClassName: decoration.className } @@ -320,66 +252,60 @@ export class CodeEditor extends React.Component { - if (!this._editor && this._hostDivRef) { - const tsdocLanguage: IMonarchLanguageConfiguration = { - keywords: tsdoc.StandardTags.allDefinitions.map((tag: tsdoc.TSDocTagDefinition) => tag.tagName), - tokenizer: { - common: [[/\/\*\*/, 'comment', '@comment']], - comment: [ - [/\*/, 'comment'], - [/\\* [^\n@*]*/, 'comment'], - [/(?:\/)[\n|*]*/, 'comment', '@pop'], - [ - /@[^ \n]*/, - { - cases: { - '@keywords': 'keyword', - '@default': 'annotation' - } - } - ] - ] - } - }; - - monaco.languages.register({ id: 'tsdocLanguage' }); - monaco.languages.setMonarchTokensProvider('tsdocLanguage', tsdocLanguage); - - this._editor = monaco.editor.create(this._hostDivRef, { - value: this.props.value || '', - language: this.props.language, - readOnly: this.props.readOnly, - minimap: { - enabled: false - }, - lineNumbers: this.props.disableLineNumbers ? 'off' : 'on', - theme: this.props.theme, - wordWrap: this.props.wordWrap ? 'on' : 'off' - }); - - this._editor.addAction({ - id: 'escapeAction', - label: 'Accessability Escape', - keybindings: [monaco.KeyCode.Escape], - run: () => { - (document.activeElement as HTMLElement | undefined)?.blur?.(); - } - }); + if (!this._editor && this._hostDivRef) { + const tsdocLanguage: IMonarchLanguageConfiguration = { + keywords: tsdoc.StandardTags.allDefinitions.map((tag: tsdoc.TSDocTagDefinition) => tag.tagName), + tokenizer: { + common: [[/\/\*\*/, 'comment', '@comment']], + comment: [ + [/\*/, 'comment'], + [/\\* [^\n@*]*/, 'comment'], + [/(?:\/)[\n|*]*/, 'comment', '@pop'], + [ + /@[^ \n]*/, + { + cases: { + '@keywords': 'keyword', + '@default': 'annotation' + } + } + ] + ] + } + }; + + monaco.languages.register({ id: 'tsdocLanguage' }); + monaco.languages.setMonarchTokensProvider('tsdocLanguage', tsdocLanguage); + + this._editor = monaco.editor.create(this._hostDivRef, { + value: this.props.value || '', + language: this.props.language, + readOnly: this.props.readOnly, + minimap: { + enabled: false + }, + lineNumbers: this.props.disableLineNumbers ? 'off' : 'on', + theme: this.props.theme, + wordWrap: this.props.wordWrap ? 'on' : 'off' + }); - this._getEditorModel().onDidChangeContent((e) => { - if (this._editor) { - this._safeOnChange(this._editor.getValue()); - } - }); + this._editor.addAction({ + id: 'escapeAction', + label: 'Accessability Escape', + keybindings: [monaco.KeyCode.Escape], + run: () => { + (document.activeElement as HTMLElement | undefined)?.blur?.(); + } + }); - this._onWindowResize(); + this._getEditorModel().onDidChangeContent((e) => { + if (this._editor) { + this._safeOnChange(this._editor.getValue()); } - }) - .catch((e) => { - console.error('CodeEditor._createEditor() failed: ' + e.toString()); }); + + this._onWindowResize(); + } } private _onWindowResize(): void { diff --git a/playground/webpack.config.js b/playground/webpack.config.js index d1a254e6..ee2e22f8 100644 --- a/playground/webpack.config.js +++ b/playground/webpack.config.js @@ -1,84 +1,75 @@ 'use strict'; const path = require('path'); +const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); + +const RIG_BASE_PATH = path.dirname(require.resolve('@rushstack/heft-web-rig/package.json')); + +/** + * require.resolve() an importPath using another NPM package's folder as + * the base directory for module resolution + */ +function getPackagePathRelativeToRig(importPath) { + const targetPath = require.resolve(importPath, { paths: [RIG_BASE_PATH] }); + return targetPath; +} /** * require() an importPath using another NPM package's folder as * the base directory for module resolution */ -function requireRelativeTo(importPath, otherPackage) { - const baseFolder = path.dirname(require.resolve(`${otherPackage}/package.json`)); - const targetPath = require.resolve(importPath, { paths: [baseFolder] }); +function requireRelativeToRig(importPath) { + const targetPath = getPackagePathRelativeToRig(importPath); return require(targetPath); } const createWebpackConfig = require('@rushstack/heft-web-rig/profiles/app/webpack-base.config'); -const webpack = requireRelativeTo('webpack', '@rushstack/heft-web-rig'); -const HtmlWebpackPlugin = requireRelativeTo('html-webpack-plugin', '@rushstack/heft-web-rig'); - -const REACT_URL = { - dev: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.development.js', - production: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js' -}; -const REACT_DOM_URL = { - dev: 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.development.js', - production: 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js' -}; -const REACT_DOM_SERVER_URL = { - dev: 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom-server.browser.development.js', - production: - 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom-server.browser.production.min.js' -}; -const MONACO_URL = { - dev: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.14.3/min/', - production: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.14.3/min/' -}; +const webpack = requireRelativeToRig('webpack'); +const HtmlWebpackPlugin = requireRelativeToRig('html-webpack-plugin'); module.exports = function createConfig(env, argv) { - const isProduction = env.production; - console.log(`isProduction=${isProduction}`); - const monacoUrl = isProduction ? MONACO_URL.production : MONACO_URL.dev; return createWebpackConfig({ env: env, argv: argv, projectRoot: __dirname, // Documentation: https://webpack.js.org/configuration/ configOverride: { - externals: { - react: 'React', - 'react-dom': 'ReactDOM', - 'react-dom/server': 'ReactDOMServer' - }, module: { rules: [ { // For the lib/samples files which are imported as source code test: /\.ts$/, type: 'asset/source' + }, + // The following rules are needed to support the Monaco Editor + { + test: /\.css$/, + use: [getPackagePathRelativeToRig('style-loader'), getPackagePathRelativeToRig('css-loader')], + include: /node_modules[\/\\]monaco-editor/ + }, + { + test: /\.ttf$/, + type: 'asset/resource', + include: /node_modules[\/\\]monaco-editor/ } ] }, plugins: [ new HtmlWebpackPlugin({ inject: true, - template: `handlebars-loader!${path.join(__dirname, 'public', 'index.hbs')}`, - chunks: {}, - templateParameters: { - scriptsToInclude: [ - { url: isProduction ? REACT_URL.production : REACT_URL.dev }, - { url: isProduction ? REACT_DOM_URL.production : REACT_DOM_URL.dev }, - { url: isProduction ? REACT_DOM_SERVER_URL.production : REACT_DOM_SERVER_URL.dev }, - { url: `${monacoUrl}vs/loader.js` } - ] - } + template: `handlebars-loader!${__dirname}/public/index.hbs`, + chunks: {} }), new webpack.optimize.ModuleConcatenationPlugin(), new webpack.DefinePlugin({ - COMMIT_ID: `'${process.env['BUILD_SOURCEVERSION'] || 'COMMIT_SHA'}'`, - MONACO_URL: JSON.stringify(monacoUrl) - }) - ] + COMMIT_ID: `'${process.env['BUILD_SOURCEVERSION'] || 'COMMIT_SHA'}'` + }), + new MonacoWebpackPlugin() + ], + performance: { + hints: false + } } }); };