[PR#888] build: utilize `react-fresh` for Fast Fresh integration

未分类 bolang 6个月前 (10-14) 66次浏览

Issue #888 | 状态: 已关闭 | 作者: cheton | 创建时间: 2024-10-21

标签: Enhancement Review effort [1-5]: 3 configuration changes


PR Type

enhancement, configuration changes

_

Description

– Integrated React Refresh for improved hot module replacement by replacing react-hot-loader with react-refresh and adding ReactRefreshWebpackPlugin.
– Updated Webpack development server configuration to enhance development experience.
– Modified ESLint configuration to ignore certain React prop types.
– Updated package dependencies to include @pmmmwh/react-refresh-webpack-plugin and react-refresh.

_

Changes walkthrough 📝

Relevant files
Configuration changes
.eslintrc.js

Update ESLint configuration for React prop types                 

.eslintrc.js

– Added ESLint rules to ignore certain React prop types.

+2/-0     
Enhancement
webpack.config.development.js

Integrate React Refresh for hot module replacement             

webpack.config.development.js

  • Replaced react-hot-loader with react-refresh.
  • Added ReactRefreshWebpackPlugin.
  • Updated Webpack dev server configuration.
  • +17/-8   
    Dependencies
    package.json

    Update package dependencies for React Refresh                       

    package.json

  • Added @pmmmwh/react-refresh-webpack-plugin and react-refresh
    dependencies.
  • Updated start-app-dev script to include progress.
  • +5/-2     

    _

    > 💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information


    评论 (4)

    #1 – codesandbox[bot] 于 2024-10-21

    #### Review or Edit in CodeSandbox

    Open the branch in source=ghapp”>VS Codesource=ghapp”>Preview


    #2 – codiumai-pr-agent-free[bot] 于 2024-10-21

    PR Reviewer Guide 🔍

    Here are some key observations to aid the review process:

    ⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
    🧪 No relevant tests
    🔒 No security concerns identified
    ⚡ Recommended focus areas for review

    Configuration Change
    The webpack configuration has been significantly modified to integrate React Refresh. Ensure that all necessary plugins and loaders are correctly configured and that the development server settings are appropriate.

    ESLint Rule Changes
    New ESLint rules have been added to ignore certain React prop types. Verify if these changes align with the project’s coding standards and won’t lead to potential issues in the future.

    Dependency Updates
    New dependencies have been added and some existing ones updated. Ensure that these changes don’t introduce conflicts with other parts of the project and that all dependencies are compatible.


    #3 – codiumai-pr-agent-free[bot] 于 2024-10-21

    PR Code Suggestions ✨

    Explore these optional code suggestions:

    Category Suggestion                                                                                                                                    Score
    Enhancement

    Remove redundant HotModuleReplacementPlugin as it’s automatically added by devServer.hot option

    _

    Consider using the devServer.hot option instead of manually adding the
    HotModuleReplacementPlugin. The devServer.hot option automatically adds this plugin
    when set to true, which is already the case in your configuration.

    [webpack.config.development.js [144]](https://github.com/cncjs/cncjs/pull/888/files#diff-11b2debd2ccb75181542fb336aed9674b4aef05560f69b1508f7c985225b9d39R144-R144)

    -new webpack.HotModuleReplacementPlugin(),
    +// HotModuleReplacementPlugin is automatically added by devServer.hot
    

    – [ ] Apply this suggestion

    Suggestion importance[1-10]: 8

    Why: The suggestion correctly identifies that the HotModuleReplacementPlugin is redundant since it’s automatically added by the devServer.hot option, improving code simplicity and reducing potential confusion.

    8

    Simplify proxy configuration using object spread for better maintainability

    _

    Consider using the spread operator to merge the proxy configurations instead of
    using an array. This can make the code more concise and easier to maintain,
    especially if you need to add more proxy rules in the future.

    [webpack.config.development.js [195-206]](https://github.com/cncjs/cncjs/pull/888/files#diff-11b2debd2ccb75181542fb336aed9674b4aef05560f69b1508f7c985225b9d39R195-R206)

    -proxy: [
    -  {
    -    context: ['/api'],
    +proxy: {
    +  '/api': {
         target: process.env.PROXY_TARGET,
         changeOrigin: true,
       },
    -  {
    -    context: ['/socket.io'],
    +  '/socket.io': {
         target: process.env.PROXY_TARGET,
         changeOrigin: true,
       },
    -],
    +},
    

    – [ ] Apply this suggestion

    Suggestion importance[1-10]: 7

    Why: This suggestion improves the maintainability of the proxy configuration by using an object instead of an array, making it easier to add or modify proxy rules in the future.

    7

    Best practice

    Configure prop-types ESLint rule for more granular control instead of disabling it entirely

    _

    Instead of disabling react/prop-types rule entirely, consider using more specific
    configurations to allow certain patterns or components to skip prop type checks.
    This maintains type safety for most of your components while allowing exceptions
    where needed.

    [.eslintrc.js [40]](https://github.com/cncjs/cncjs/pull/888/files#diff-e2954b558f2aa82baff0e30964490d12942e0e251c1aa56c3294de6ec67b7cf5R40-R40)

    -'react/prop-types': 0,
    +'react/prop-types': ['error', { 'ignore': ['children'], 'skipUndeclared': true }],
    

    – [ ] Apply this suggestion

    Suggestion importance[1-10]: 6

    Why: This suggestion enhances type safety by proposing a more specific configuration for the react/prop-types rule, allowing exceptions while maintaining checks for most components.

    6

    >💡 Need additional feedback ? start a PR chat


    #4 – codiumai-pr-agent-free[bot] 于 2024-10-23

    CI Failure Feedback 🧐

    Action: build-macos-x64 (18.x)

    Failed stage: Build macOS binaries [❌]

    Failed test name: “”

    Failure summary:

    The action failed due to multiple issues:

  • A patch could not be applied to typescript@5.5.4, as indicated by the error Cannot apply hunk #1.
  • The fsevents package failed to build because it requires node-gyp, which was not found in the
    top-level dependencies. The error message suggests adding node-gyp to the dependencies.
  • The electron-rebuild process failed because of a ModuleNotFoundError for distutils in the node-gyp
    module, causing the rebuild of @serialport/bindings-cpp to fail.
  • The hdiutil process failed during the build step with the error ERRELECTRONBUILDERCANNOTEXECUTE,
    causing the build to exit with code 1.

  • Relevant error logs:

    1:  ##[group]Operating System
    2:  macOS
    ...

    594: ➤ YN0000: ┌ Fetch step 595: ##[group]Fetch step 596: ➤ YN0066: │ typescript@patch:typescript@npm%3A5.5.4#~builtin::version=5.5.4&hash=ad5954: Cannot apply hunk #1 597: ➤ YN0013: │ 5 packages were already cached, 2260 had to be fetched 598: ##[endgroup] 599: ➤ YN0000: └ Completed in 50s 153ms 600: ➤ YN0000: ┌ Link step 601: ##[group]Link step 602: ➤ YN0007: │ core-js@npm:2.6.12 must be built because it never has been before or the last one failed 603: ➤ YN0007: │ core-js@npm:3.26.1 must be built because it never has been before or the last one failed 604: ➤ YN0007: │ electron@npm:22.0.3 must be built because it never has been before or the last one failed 605: ➤ YN0007: │ final-form@npm:4.12.0 must be built because it never has been before or the last one failed 606: ➤ YN0007: │ core-js@npm:3.27.2 must be built because it never has been before or the last one failed 607: ➤ YN0007: │ core-js@npm:3.38.0 must be built because it never has been before or the last one failed 608: ➤ YN0007: │ react-final-form@npm:3.7.0 [890d5] must be built because it never has been before or the last one failed 609: ➤ YN0007: │ styled-components@npm:3.4.10 [890d5] must be built because it never has been before or the last one failed 610: ➤ YN0007: │ lzma-native@npm:8.0.6 must be built because it never has been before or the last one failed 611: ➤ YN0007: │ spawn-sync@npm:1.0.15 must be built because it never has been before or the last one failed 612: ➤ YN0007: │ @serialport/bindings-cpp@npm:10.8.0 must be built because it never has been before or the last one failed 613: ➤ YN0007: │ fsevents@patch:fsevents@npm%3A1.2.13#~builtin::version=1.2.13&hash=d11327 must be built because it never has been before or the last one failed 614: ➤ YN0007: │ core-js-pure@npm:3.38.1 must be built because it never has been before or the last one failed 615: ➤ YN0000: │ final-form@npm:4.12.0 STDOUT Using final-form at work? You can now donate to our open collective: 616: ➤ YN0000: │ final-form@npm:4.12.0 STDOUT > https://opencollective.com/final-form/donate 617: ➤ YN0000: │ styled-components@npm:3.4.10 [890d5] STDOUT Use styled-components at work? Consider supporting our development efforts at opencollective.com/styled-components 618: ➤ YN0000: │ react-final-form@npm:3.7.0 [890d5] STDOUT Use react-final-form at work? Consider supporting our development efforts at opencollective.com/final-form 619: ➤ YN0000: │ fsevents@patch:fsevents@npm%3A1.2.13#~builtin::version=1.2.13&hash=d11327 STDOUT Usage Error: Couldn't find a script name "node-gyp" in the top-level (used by fsevents@patch:fsevents@npm%3A1.2.13#~builtin::version=1.2.13&hash=d11327). This typically happens because some package depends on "node-gyp" to build itself, but didn't list it in their dependencies. To fix that, please run "yarn add node-gyp" into your top-level workspace. You also can open an issue on the repository of the specified package to suggest them to use an optional peer dependency. 620: ➤ YN0000: │ fsevents@patch:fsevents@npm%3A1.2.13#~builtin::version=1.2.13&hash=d11327 STDOUT 621: ➤ YN0000: │ fsevents@patch:fsevents@npm%3A1.2.13#~builtin::version=1.2.13&hash=d11327 STDOUT $ yarn run [--inspect] [--inspect-brk] [-T,--top-level] [-B,--binaries-only] ... 622: ➤ YN0007: │ pre-push@npm:0.1.4 must be built because it never has been before or the last one failed 623: ➤ YN0000: │ pre-push@npm:0.1.4 STDOUT pre-push: 624: ➤ YN0000: │ pre-push@npm:0.1.4 STDOUT pre-push: Found .git folder in /Users/runner/work/cncjs/cncjs/.git 625: ➤ YN0007: │ cncjs@workspace:. must be built because it never has been before or the last one failed ...

    736: [stylint] 18:29 colons warning missing colon between property and value 737: [stylint] 738: [stylint] src/app/widgets/Visualizer/widget.styl 739: [stylint] 18:35 semicolons warning missing semicolon 740: [stylint] 741: [stylint] src/app/widgets/Visualizer/widget.styl 742: [stylint] 19:32 brackets warning always use brackets when defining selectors 743: [stylint] 744: [stylint] Stylint: 0 Errors. ...

    824: [i18nlint] Linting src/server/i18n/en/resource.json 825: [i18nlint] Linting src/server/i18n/tr/config.json 826: [i18nlint] Linting src/server/i18n/tr/resource.json 827: [i18nlint] yarn i18nlint exited with code 0 828: [eslint] 829: [eslint] /Users/runner/work/cncjs/cncjs/src/main.js 830: [eslint] 150:7 warning Unexpected console statement no-console 831: [eslint] 832: [eslint] ✖ 1 problem (0 errors, 1 warning) ...

    881: ok 11 - should be equal 882: ok 12 - should be equal 883: ok 13 - should be equal 884: 1..13 885: ok 3 - ensureString # time=2.247ms 886: 1..3 887: ok 1 - test/ensure-type.js # time=4543.409ms 888: # Subtest: test/evaluate-assignment-expression.js 889: - error evaluate-assignment-expression src="Not a valid expression", vars={} 890: - error evaluate-assignment-expression Error: Line 1: Unexpected identifier 891: at ErrorHandler.constructError (/Users/runner/work/cncjs/cncjs/node_modules/esprima/dist/esprima.js:5012:22) 892: at ErrorHandler.createError (/Users/runner/work/cncjs/cncjs/node_modules/esprima/dist/esprima.js:5028:27) 893: at Parser.unexpectedTokenError (/Users/runner/work/cncjs/cncjs/node_modules/esprima/dist/esprima.js:1985:39) ...

    1036: ok 1 - should be equal 1037: ok 2 - should be equivalent 1038: 1..2 1039: ok 4 - GrblLineParserResultStatus: set all bits to 1 ($10=31) # time=1.166ms 1040: # Subtest: GrblLineParserResultOk 1041: ok 1 - should be equal 1042: 1..1 1043: ok 5 - GrblLineParserResultOk # time=1.07ms 1044: # Subtest: GrblLineParserResultError 1045: ok 1 - should be equal 1046: ok 2 - should be equal 1047: 1..2 1048: ok 6 - GrblLineParserResultError # time=0.802ms ...

    1315: 1..16 1316: ok 4 - test/grbl.js # time=6997.247ms 1317: # Subtest: test/marlin.js 1318: # Subtest: MarlinLineParserResultEcho 1319: ok 1 - should be equal 1320: ok 2 - should be equal 1321: 1..2 1322: ok 1 - MarlinLineParserResultEcho # time=6.052ms 1323: # Subtest: MarlinLineParserResultError 1324: ok 1 - should be equal 1325: ok 2 - should be equal 1326: 1..2 1327: ok 2 - MarlinLineParserResultError # time=3.168ms ...

    1485: ok 5 - test/marlin.js # time=6446.58ms 1486: # Subtest: test/sender.js 1487: # Subtest: null streaming protocol 1488: ok 1 - should be equal 1489: 1..1 1490: ok 1 - null streaming protocol # time=10.596ms 1491: # Subtest: send-response streaming protocol 1492: ok 1 - send-response streaming protocol 1493: ok 2 - Failed to load "/Users/runner/work/cncjs/cncjs/test/fixtures/jsdc.gcode". ...

    1502: ok 1 - character-counting streaming protocol 1503: ok 2 - should be equal 1504: ok 3 - should be equal 1505: ok 4 - The buffer size cannot be reduced below the size of the data within the buffer. 1506: ok 5 - should be equal 1507: ok 6 - should be equal 1508: ok 7 - should be equal 1509: ok 8 - should be equal 1510: ok 9 - Failed to load "/Users/runner/work/cncjs/cncjs/test/fixtures/jsdc.gcode". ...

    1565: 1..4 1566: ok 6 - state transition # time=2.184ms 1567: 1..6 1568: ok 3 - SmoothieRunnerLineParserResultStatus: new status format # time=341.927ms 1569: # Subtest: SmoothieRunnerLineParserResultOk 1570: ok 1 - should be equal 1571: 1..1 1572: ok 4 - SmoothieRunnerLineParserResultOk # time=0.599ms 1573: # Subtest: SmoothieRunnerLineParserResultError 1574: ok 1 - should be equal 1575: ok 2 - should be equal 1576: 1..2 1577: ok 5 - SmoothieRunnerLineParserResultError # time=0.753ms ...

    1729: ok 1 - {"r":{},"f":[1,0,4]} # time=2.028ms 1730: 1..1 1731: ok 7 - TinyGParserResultReceiveReports # time=29.788ms 1732: 1..7 1733: ok 8 - test/tinyg.js # time=6856.137ms 1734: # Subtest: test/translate-expression.js 1735: # Subtest: exceptions 1736: ok 1 - should be equal 1737: - error evaluate-expression src="!", vars={} 1738: - error evaluate-expression Error: Line 1: Unexpected end of input 1739: index: 1, 1740: lineNumber: 1, 1741: description: 'Unexpected end of input' 1742: } 1743: at ErrorHandler.constructError (/Users/runner/work/cncjs/cncjs/node_modules/esprima/dist/esprima.js:5012:22) 1744: at ErrorHandler.createError (/Users/runner/work/cncjs/cncjs/node_modules/esprima/dist/esprima.js:5028:27) 1745: at Parser.unexpectedTokenError (/Users/runner/work/cncjs/cncjs/node_modules/esprima/dist/esprima.js:1985:39) ...

    1766: config | 99.63 | 33.33 | 100 | 99.63 | 1767: settings.base.js | 100 | 50 | 100 | 100 | 10 1768: settings.development.js | 100 | 0 | 100 | 100 | 26 1769: settings.js | 93.33 | 0 | 100 | 93.33 | 10 1770: settings.production.js | 100 | 50 | 100 | 100 | 37 1771: controllers/Grbl | 93.16 | 81.57 | 51.28 | 93.16 | 1772: GrblLineParserResultAlarm.js | 100 | 100 | 50 | 100 | 1773: GrblLineParserResultEcho.js | 52.38 | 66.66 | 50 | 52.38 | 9-18 1774: GrblLineParserResultError.js | 100 | 100 | 50 | 100 | ...

    1781: GrblLineParserResultSettings.js | 100 | 100 | 50 | 100 | 1782: GrblLineParserResultStartup.js | 100 | 100 | 50 | 100 | 1783: GrblLineParserResultStatus.js | 86.12 | 63.63 | 50 | 86.12 | ...52-153,163-164 1784: GrblLineParserResultVersion.js | 52.38 | 66.66 | 50 | 52.38 | 9-18 1785: GrblRunner.js | 87.86 | 77.41 | 33.33 | 87.86 | ...29-231,234-236 1786: controllers/Marlin | 93 | 88.34 | 47.82 | 93 | 1787: MarlinLineParser.js | 84.9 | 83.33 | 100 | 84.9 | 43-50 1788: MarlinLineParserResultEcho.js | 100 | 100 | 50 | 100 | 1789: MarlinLineParserResultError.js | 100 | 100 | 50 | 100 | ...

    1791: MarlinLineParserResultOk.js | 100 | 100 | 50 | 100 | 1792: MarlinLineParserResultPosition.js | 100 | 100 | 50 | 100 | 1793: MarlinLineParserResultStart.js | 100 | 100 | 50 | 100 | 1794: MarlinLineParserResultTemperature.js | 92.75 | 83.72 | 50 | 92.75 | ...44-146,149-152 1795: MarlinRunner.js | 89.2 | 82.6 | 28.57 | 89.2 | ...66-168,171-173 1796: controllers/Smoothie | 94.32 | 82.64 | 51.85 | 94.32 | 1797: SmoothieLineParserResultAction.js | 54.54 | 66.66 | 50 | 54.54 | 10-19 1798: SmoothieLineParserResultAlarm.js | 100 | 100 | 50 | 100 | 1799: SmoothieLineParserResultError.js | 100 | 100 | 50 | 100 | ...

    2040: Traceback (most recent call last): 2041: File "/Users/runner/work/cncjs/cncjs/nodemodules/node-gyp/gyp/gypmain.py", line 42, in 2042: import gyp # noqa: E402 2043: ^^^^^^^^^^ 2044: File "/Users/runner/work/cncjs/cncjs/node_modules/node-gyp/gyp/pylib/gyp/init.py", line 9, in 2045: import gyp.input 2046: File "/Users/runner/work/cncjs/cncjs/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 19, in 2047: from distutils.version import StrictVersion 2048: ModuleNotFoundError: No module named 'distutils' 2049: ✖ Rebuild Failed 2050: An unhandled error occurred inside electron-rebuild 2051: node-gyp failed to rebuild '/Users/runner/work/cncjs/cncjs/dist/cncjs/node_modules/@serialport/bindings-cpp'. 2052: For more information, rerun with the DEBUG environment variable set to "electron-rebuild". 2053: Error: gyp failed with exit code: 1 2054: Error: node-gyp failed to rebuild '/Users/runner/work/cncjs/cncjs/dist/cncjs/node_modules/@serialport/bindings-cpp'. 2055: For more information, rerun with the DEBUG environment variable set to "electron-rebuild". 2056: Error: gyp failed with exit code: 1 ...

    2075: • downloaded url=https://github.com/electron/electron/releases/download/v22.0.3/electron-v22.0.3-darwin-x64.zip duration=1.435s 2076: • asar usage is disabled — this is strongly not recommended solution=enable asar and use asarUnpack to unpack files that must be externally available 2077: • asar usage is disabled — this is strongly not recommended solution=enable asar and use asarUnpack to unpack files that must be externally available 2078: • Current build is a part of pull request, code signing will be skipped. 2079: Set env CSCFORPULL_REQUEST to true to force code signing. 2080: There are serious security concerns with CSCFORPULL_REQUEST=true (see the CircleCI documentation (https://circleci.com/docs/1.0/fork-pr-builds/) for details) 2081: If you have SSH keys, sensitive env vars or AWS credentials stored in your project settings and untrusted forks can make pull requests against your repo, then this option isn't for you. 2082: • building target=DMG arch=x64 file=output/CNCjs-1.10.4-d59ac1f.dmg 2083: • Above command failed, retrying 5 more times 2084: • Above command failed, retrying 4 more times 2085: • Above command failed, retrying 3 more times 2086: • Above command failed, retrying 2 more times 2087: • Above command failed, retrying 1 more times 2088: • Above command failed, retrying 0 more times 2089: ⨯ hdiutil process failed ERRELECTRONBUILDERCANNOTEXECUTE 2090: Exit code: 2091: 1 failedTask=build stackTrace=Error: hdiutil process failed ERRELECTRONBUILDERCANNOTEXECUTE 2092: Exit code: 2093: 1 2094: at ChildProcess. (/Users/runner/work/cncjs/cncjs/node_modules/builder-util/src/util.ts:250:14) 2095: at Object.onceWrapper (node:events:632:26) 2096: at ChildProcess.emit (node:events:517:28) 2097: at maybeClose (node:internal/child_process:1098:16) 2098: at Process.ChildProcess.handle.onexit (node:internal/childprocess:303:5) 2099: ##[error]Process completed with exit code 1.


    ✨ CI feedback usage guide:

    The CI feedback tool (/checks) automatically triggers when a PR has a failed check.
    The tool analyzes the failed checks and provides several feedbacks:
    – Failed stage
    – Failed test name
    – Failure summary
    – Relevant error logs

    In addition to being automatically triggered, the tool can also be invoked manually by commenting on a PR:

    /checks "https://github.com/{reponame}/actions/runs/{runnumber}/job/{job_number}"
    

    where {reponame} is the name of the repository, {runnumber} is the run number of the failed check, and {job_number} is the job number of the failed check.

    #### Configuration options
    enableautochecks_feedback – if set to true, the tool will automatically provide feedback when a check is failed. Default is true.
    excludedcheckslist – a list of checks to exclude from the feedback, for example: [“check1”, “check2”]. Default is an empty list.
    enablehelptext – if set to true, the tool will provide a help message with the feedback. Default is true.
    persistent_comment – if set to true, the tool will overwrite a previous checks comment with the new feedback. Default is true.
    finalupdatemessage – if persistent_comment is true and updating a previous checks message, the tool will also create a new message: “Persistent checks updated to latest commit”. Default is true.

    See more information about the checks tool in the docs.


    原始Issue: https://github.com/cncjs/cncjs/pull/888

    喜欢 (0)