Skip to content

Conversation

@Judahmeek
Copy link
Contributor

@Judahmeek Judahmeek commented Jan 30, 2025

Closes #1685

Summary

Remove this paragraph and provide a general description of the code changes in your pull
request... were there any bugs you had fixed? If so, mention them. If
these bugs have open GitHub issues, be sure to tag them here as well,
to keep the conversation linked together.

Pull Request checklist

Remove this line after checking all the items here. If the item is not applicable to the PR, both check it out and wrap it by ~.

  • Add/update test to cover these changes
  • Update documentation
  • Update CHANGELOG file
    Add the CHANGELOG entry at the top of the file.

Other Information

Remove this paragraph and mention any other important and relevant information such as benchmarks.


This change is Reviewable

Summary by CodeRabbit

Summary by CodeRabbit

  • Bug Fixes

    • Fixed ESLint configuration to ensure proper linting of the spec/dummy directory.
  • Chores

    • Enhanced GitHub Actions workflow for linting JavaScript and Ruby.
    • Updated package dependencies.
    • Refined project configuration files.
    • Improved code organization and import statements.
  • Documentation

    • Updated changelog with version 14.1.1 fix details.
  • Refactor

    • Simplified component structures.
    • Added PropTypes for improved type checking.
    • Streamlined import and export statements.
    • Removed unused props from components.
    • Updated component signatures for clarity.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 30, 2025

Walkthrough

This pull request introduces a series of configuration and code modifications across multiple files in the project. The changes primarily focus on ESLint configurations, component prop type validations, and minor structural adjustments in React components. The updates enhance code quality, type safety, and project structure, with specific attention to linting rules, import statements, and component prop handling.

Changes

File Change Summary
.eslintignore Updated ignore paths, added spec/dummy/.yalc, spec/dummy/public, spec/dummy/vendor, etc.; removed spec/dummy and node_package/tests/node_modules.
.eslintrc Added new rules, updated import resolver settings, added alias configuration.
CHANGELOG.md Added entry for version 14.1.1 fix related to ESLint compatibility.
package.json Added main entry, added eslint-import-resolver-alias dev dependency, updated dependencies section.
spec/dummy/babel.config.js Updated function name and import path.
spec/dummy/client/.eslintignore File deleted.
spec/dummy/client/.eslintrc Configuration file removed.
spec/dummy/client/app/components/RouterLayout.jsx Removed children prop and associated PropTypes validation.
spec/dummy/client/app/packs/rescript-components.js Modified export from named to default export for HelloWorldReScript.
spec/dummy/client/app/packs/server-bundle.js Modified import statement by removing file extension.
spec/dummy/client/app/startup/ContextFunctionReturnInvalidJSX.jsx Added PropTypes for helloWorldData.
spec/dummy/client/app/startup/HelloWorldHooks.jsx Added PropTypes for helloWorldData.
spec/dummy/client/app/startup/HelloWorldHooksContext.jsx Introduced inner Result component and added PropTypes validation.
spec/dummy/client/app/startup/HelloWorldProps.jsx Renamed component from HelloWorldHooks to HelloWorldProps and added PropTypes validation.
spec/dummy/client/app/startup/ImageExample.jsx Removed unused parameter from TestComponent.
spec/dummy/client/app/startup/RouterApp.server.jsx Simplified export statement by removing explicit return.
spec/dummy/config/webpack/commonWebpackConfig.js Updated import statement and comments.
spec/dummy/config/webpack/serverWebpackConfig.js Removed merge function from import and clarified comments.
spec/dummy/config/webpack/webpack.config.js Modified logic in envSpecificConfig function.
.github/workflows/lint-js-and-ruby.yml Added steps for global package installation, caching, and publishing with yalc.
spec/dummy/app/views/shared/_header.erb Added new list item linking to TurboStream Demo.
spec/dummy/client/app/startup/HelloWorldReScript.jsx Added ESLint directive to import statement.

Suggested reviewers

  • justin808

Poem

🐰 Linting rabbits hop with glee,
Config files dancing, wild and free!
PropTypes validated, imports aligned,
Code quality polished, perfectly designed.
A bunny's code review, crisp and bright! 🌟


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 83d0d2e and e844e79.

📒 Files selected for processing (8)
  • spec/dummy/client/app/packs/server-bundle.js (1 hunks)
  • spec/dummy/client/app/startup/ContextFunctionReturnInvalidJSX.jsx (2 hunks)
  • spec/dummy/client/app/startup/HelloWorldHooks.jsx (2 hunks)
  • spec/dummy/client/app/startup/HelloWorldHooksContext.jsx (2 hunks)
  • spec/dummy/client/app/startup/HelloWorldProps.jsx (2 hunks)
  • spec/dummy/client/app/startup/HelloWorldReScript.jsx (1 hunks)
  • spec/dummy/client/app/startup/RouterApp.server.jsx (1 hunks)
  • spec/dummy/config/webpack/serverWebpackConfig.js (4 hunks)
🚧 Files skipped from review as they are similar to previous changes (8)
  • spec/dummy/client/app/startup/HelloWorldReScript.jsx
  • spec/dummy/client/app/startup/HelloWorldHooks.jsx
  • spec/dummy/client/app/startup/RouterApp.server.jsx
  • spec/dummy/client/app/startup/ContextFunctionReturnInvalidJSX.jsx
  • spec/dummy/client/app/packs/server-bundle.js
  • spec/dummy/client/app/startup/HelloWorldHooksContext.jsx
  • spec/dummy/config/webpack/serverWebpackConfig.js
  • spec/dummy/client/app/startup/HelloWorldProps.jsx
⏰ Context from checks skipped due to timeout of 90000ms (5)
  • GitHub Check: dummy-app-integration-tests (newest)
  • GitHub Check: dummy-app-integration-tests (oldest)
  • GitHub Check: rspec-package-tests (newest)
  • GitHub Check: rspec-package-tests (oldest)
  • GitHub Check: build

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (4)
spec/dummy/client/app/startup/HelloWorldHooksContext.jsx (2)

Line range hint 9-23: Consider extracting Result component to a separate file.

While the restructuring improves hooks usage, the inner Result component could be moved to its own file to improve maintainability and reusability.


25-29: PropTypes should be moved with the Result component.

If the Result component is extracted, ensure the PropTypes validation moves with it.

spec/dummy/client/app/startup/HelloWorldProps.jsx (1)

Line range hint 11-14: Consider simplifying the delayed value implementation.

The current implementation using state and useEffect could be simplified since delayedValue is only set once and never updated.

-  const [delayedValue, setDelayedValue] = useState(null);
-
-  useEffect(() => {
-    setDelayedValue(props.modificationTarget);
-  }, []);
+  const delayedValue = React.useMemo(() => props.modificationTarget, []);
.eslintrc (1)

49-50: Consider documenting the rationale for disabled rules.

While disabling these rules might be necessary for your use case, it would be helpful to document why these specific rules are disabled:

  • react/forbid-prop-types
  • jsx-a11y/anchor-is-valid
-  react/forbid-prop-types: 0
-  jsx-a11y/anchor-is-valid: 0
+  # Disabled because we use compound prop types in legacy components
+  react/forbid-prop-types: 0
+  # Disabled because we handle anchor clicks via custom handlers
+  jsx-a11y/anchor-is-valid: 0
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 90033e7 and 07e1665.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (20)
  • .eslintignore (1 hunks)
  • .eslintrc (1 hunks)
  • CHANGELOG.md (1 hunks)
  • package.json (3 hunks)
  • spec/dummy/babel.config.js (1 hunks)
  • spec/dummy/client/.eslintignore (0 hunks)
  • spec/dummy/client/.eslintrc (0 hunks)
  • spec/dummy/client/app/components/RouterLayout.jsx (1 hunks)
  • spec/dummy/client/app/packs/rescript-components.js (1 hunks)
  • spec/dummy/client/app/packs/server-bundle.js (1 hunks)
  • spec/dummy/client/app/startup/ContextFunctionReturnInvalidJSX.jsx (2 hunks)
  • spec/dummy/client/app/startup/HelloTurboStream.jsx (1 hunks)
  • spec/dummy/client/app/startup/HelloWorldHooks.jsx (2 hunks)
  • spec/dummy/client/app/startup/HelloWorldHooksContext.jsx (2 hunks)
  • spec/dummy/client/app/startup/HelloWorldProps.jsx (2 hunks)
  • spec/dummy/client/app/startup/ImageExample.jsx (1 hunks)
  • spec/dummy/client/app/startup/RouterApp.server.jsx (1 hunks)
  • spec/dummy/config/webpack/commonWebpackConfig.js (2 hunks)
  • spec/dummy/config/webpack/serverWebpackConfig.js (4 hunks)
  • spec/dummy/config/webpack/webpack.config.js (1 hunks)
💤 Files with no reviewable changes (2)
  • spec/dummy/client/.eslintignore
  • spec/dummy/client/.eslintrc
✅ Files skipped from review due to trivial changes (4)
  • spec/dummy/client/app/packs/server-bundle.js
  • spec/dummy/client/app/startup/HelloTurboStream.jsx
  • spec/dummy/client/app/startup/RouterApp.server.jsx
  • spec/dummy/config/webpack/commonWebpackConfig.js
⏰ Context from checks skipped due to timeout of 90000ms (7)
  • GitHub Check: build-dummy-app-webpack-test-bundles (newest)
  • GitHub Check: examples (newest)
  • GitHub Check: rspec-package-tests (newest)
  • GitHub Check: examples (oldest)
  • GitHub Check: build-dummy-app-webpack-test-bundles (oldest)
  • GitHub Check: build
  • GitHub Check: rspec-package-tests (oldest)
🔇 Additional comments (19)
spec/dummy/client/app/packs/rescript-components.js (1)

7-7: Verify all import statements for HelloWorldReScript component.

The change from named export to default export requires updating all import statements from import { HelloWorldReScript } to import HelloWorldReScript.

✅ Verification successful

Export change is compatible with existing imports

All existing imports of HelloWorldReScript are already using the default import syntax, so no updates are required.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for any remaining destructured imports of HelloWorldReScript
rg "import \{ .*HelloWorldReScript.* \}" spec/dummy/

Length of output: 54


Script:

#!/bin/bash
# Search for any imports containing HelloWorldReScript
echo "=== Searching for all HelloWorldReScript imports ==="
rg "import.*HelloWorldReScript" -A 2

# Search for any usage of HelloWorldReScript in JSX/TSX files
echo -e "\n=== Searching for HelloWorldReScript usage in components ==="
rg "<HelloWorldReScript" -A 2

Length of output: 857

spec/dummy/client/app/startup/HelloWorldHooks.jsx (1)

6-6: Address the TODO comment.

The comment "TODO: make more like the HelloWorld.jsx" should be addressed or removed if no longer applicable.

Would you like me to help implement the changes to make this component more similar to HelloWorld.jsx?

spec/dummy/client/app/components/RouterLayout.jsx (1)

6-6: LGTM! Clean refactor removing unused children prop.

The removal of the unused children prop and its PropTypes definition improves code clarity. The router implementation remains correct and follows React Router best practices.

spec/dummy/babel.config.js (2)

1-1: LGTM! Import path updated to follow ESLint conventions.

The removal of the .js extension aligns with common ESLint import rules.


3-3: LGTM! Named function improves code clarity.

Replacing the anonymous function with createBabelConfig enhances debugging and stack traces.

spec/dummy/client/app/startup/ContextFunctionReturnInvalidJSX.jsx (2)

15-19: LGTM! Added PropTypes validation.

The addition of PropTypes improves type checking and aligns with ESLint best practices.


Line range hint 6-13: Verify if this incorrect implementation is intentional.

The component's implementation takes two parameters but doesn't wrap them correctly as noted in the comments below. If this is meant to be a test case for invalid implementations, please add a comment at the top of the file explaining this purpose.

✅ Verification successful

Implementation is intentionally incorrect as a test case

The file contains explicit comments indicating this is an example of incorrect implementation:

  • Top comment states: "Example of incorrectly taking two params and returning JSX"
  • Detailed comments explain the correct implementation that would use a wrapped function
  • Located in spec/dummy directory alongside other test cases
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for test files or documentation referencing this component
rg -l "ContextFunctionReturnInvalidJSX" --type=test

Length of output: 80


Script:

#!/bin/bash
# Check the content of the file for comments
echo "=== File content ==="
cat spec/dummy/client/app/startup/ContextFunctionReturnInvalidJSX.jsx

echo -e "\n=== Similar files in directory ==="
ls -1 spec/dummy/client/app/startup/

echo -e "\n=== References in JS/JSX files ==="
rg "ContextFunctionReturnInvalidJSX" -t js -t jsx

Length of output: 2161

spec/dummy/client/app/startup/HelloWorldProps.jsx (1)

28-33: LGTM! Added comprehensive PropTypes validation.

The addition of PropTypes for both helloWorldData and modificationTarget improves type safety.

spec/dummy/client/app/startup/ImageExample.jsx (2)

7-10: LGTM! Import statements are now properly organized.

The imports are now logically grouped and placed at the top of the file, improving code organization.


12-12: Good cleanup: Removed unused props parameter.

Removing the unused _props parameter improves code clarity since the component doesn't use any props.

spec/dummy/config/webpack/serverWebpackConfig.js (3)

31-33: LGTM! Properly documented ESLint rule exception.

The ESLint disable comment is correctly scoped to the specific line where parameter reassignment is necessary.


Line range hint 72-81: LGTM! Well-structured CSS loader filtering logic.

The code properly filters out mini-css-extract-plugin and style-loader while maintaining clear logic flow.


98-99: LGTM! Properly documented ESLint rule exception for SSR file handling.

The ESLint disable comment is correctly scoped to the specific line where parameter reassignment is needed for SSR file handling.

.eslintignore (1)

4-10: LGTM! Well-structured ESLint ignore patterns.

The changes properly:

  • Remove the broad spec/dummy ignore to enable linting
  • Add specific ignore patterns for build artifacts, vendor files, and generated code
  • Maintain proper linting coverage while excluding appropriate files

This aligns well with the PR objective to ensure spec/dummy is linted by ESLint.

.eslintrc (2)

44-44: LGTM! Proper extension handling configuration.

The import/extensions rule is properly configured to handle both JS and JSX files.


56-58: LGTM! Good configuration for module resolution.

The changes:

  • Add proper alias for Assets directory
  • Include .jsx in the extensions list for proper module resolution
package.json (2)

30-30: LGTM: ESLint import resolver addition

The addition of eslint-import-resolver-alias is appropriate for resolving the ESLint compatibility issues mentioned in the PR objectives.


Line range hint 42-43: Verify React version compatibility

The package.json specifies React version ^19.0.0, but React 19 has not been officially released yet. This could lead to compatibility issues.

CHANGELOG.md (1)

21-24: LGTM: Well-formatted changelog entry

The changelog entry is properly formatted, accurately describes the changes, and provides appropriate attribution to the contributor.

const nameDomRef = useRef(null);

// eslint-disable-next-line no-unused-vars
const handleChange = () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this simply be removed instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose. None of the useState code is actually necessary for the current demo.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (2)
.github/workflows/lint-js-and-ruby.yml (2)

48-48: Review Global Installation of yalc
The workflow now runs sudo yarn global add yalc. Please double-check if using sudo is necessary in this GitHub Actions environment. If not required, consider removing it to reduce elevated privilege usage.


58-59: Review Dummy App Node Modules Installation
There is a newly added step that installs Node modules for the dummy app with the command yarn install --no-progress --no-emoji. Note that later in the workflow (line 65) a similar installation is performed with the --ignore-scripts flag. Please verify if both installations are required or if they can be consolidated to streamline the workflow.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 07e1665 and 1620ef8.

📒 Files selected for processing (1)
  • .github/workflows/lint-js-and-ruby.yml (1 hunks)
🧰 Additional context used
🪛 actionlint (1.7.4)
.github/workflows/lint-js-and-ruby.yml

55-55: property "versions" is not defined in object type {}

(expression)


70-70: property "versions" is not defined in object type {}

(expression)

🔇 Additional comments (2)
.github/workflows/lint-js-and-ruby.yml (2)

49-50: Confirm yalc Publish Step
The newly added step to publish the react-on-rails package via yalc is clear. Ensure that this command reliably publishes the expected local package version for your development workflow.


56-57: Local Package Addition via yalc
The step to add react-on-rails to the dummy app using yalc appears correctly structured. Just ensure that the published package from the previous step is the intended version for local testing.

Comment on lines 66 to 70
- name: Save dummy app ruby gems to cache
uses: actions/cache@v4
with:
path: spec/dummy/vendor/bundle
key: dummy-app-gem-cache-${{ hashFiles('react_on_rails.gemspec') }}-${{ hashFiles('Gemfile.development_dependencies') }}-${{ matrix.versions }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Verify Cache Key Consistency for Dummy App Ruby Gems
Similar to the node modules cache key, the gem cache key also includes ${{ matrix.versions }}. Confirm that this variable is defined in your job’s matrix; otherwise, consider removing it. For example:

-        key: dummy-app-gem-cache-${{ hashFiles('react_on_rails.gemspec') }}-${{ hashFiles('Gemfile.development_dependencies') }}-${{ matrix.versions }}
+        key: dummy-app-gem-cache-${{ hashFiles('react_on_rails.gemspec') }}-${{ hashFiles('Gemfile.development_dependencies') }}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- name: Save dummy app ruby gems to cache
uses: actions/cache@v4
with:
path: spec/dummy/vendor/bundle
key: dummy-app-gem-cache-${{ hashFiles('react_on_rails.gemspec') }}-${{ hashFiles('Gemfile.development_dependencies') }}-${{ matrix.versions }}
- name: Save dummy app ruby gems to cache
uses: actions/cache@v4
with:
path: spec/dummy/vendor/bundle
key: dummy-app-gem-cache-${{ hashFiles('react_on_rails.gemspec') }}-${{ hashFiles('Gemfile.development_dependencies') }}
🧰 Tools
🪛 actionlint (1.7.4)

70-70: property "versions" is not defined in object type {}

(expression)

Comment on lines 51 to 55
- name: Save spec/dummy/node_modules to cache
uses: actions/cache@v4
with:
path: spec/dummy/node_modules
key: dummy-app-node-modules-cache-${{ hashFiles('spec/dummy/package.json') }}-${{ matrix.versions }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Verify Cache Key Consistency for Dummy App Node Modules
The caching configuration uses a key ending with ${{ matrix.versions }}. Static analysis indicates that the versions property might not be defined within the job's matrix. Please verify that you intend to reference a matrix.versions variable. If it isn’t defined, you may consider removing it from the key to avoid unintended cache misses. For example:

-        key: dummy-app-node-modules-cache-${{ hashFiles('spec/dummy/package.json') }}-${{ matrix.versions }}
+        key: dummy-app-node-modules-cache-${{ hashFiles('spec/dummy/package.json') }}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- name: Save spec/dummy/node_modules to cache
uses: actions/cache@v4
with:
path: spec/dummy/node_modules
key: dummy-app-node-modules-cache-${{ hashFiles('spec/dummy/package.json') }}-${{ matrix.versions }}
- name: Save spec/dummy/node_modules to cache
uses: actions/cache@v4
with:
path: spec/dummy/node_modules
key: dummy-app-node-modules-cache-${{ hashFiles('spec/dummy/package.json') }}
🧰 Tools
🪛 actionlint (1.7.4)

55-55: property "versions" is not defined in object type {}

(expression)

@Judahmeek
Copy link
Contributor Author

I completely removed the workflow and Github actions are still not running, so I'm not sure how to proceed.

@Judahmeek Judahmeek force-pushed the judahmeek/eslint-spec-dummy branch from 6053cbb to 07e9e2b Compare February 26, 2025 21:51
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
.eslintrc (1)

49-50: Consider documenting reasons for disabled ESLint rules

You've disabled two ESLint rules (react/forbid-prop-types and jsx-a11y/anchor-is-valid) without any explanation. Adding comments explaining why these rules are disabled would improve maintainability and help future contributors understand the reasoning.

-  react/forbid-prop-types: 0
-  jsx-a11y/anchor-is-valid: 0
+  # Disabled to allow array/object prop types in legacy components
+  react/forbid-prop-types: 0
+  # Disabled to allow anchor tags with onClick handlers in legacy components
+  jsx-a11y/anchor-is-valid: 0
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6053cbb and 07e9e2b.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (21)
  • .eslintignore (1 hunks)
  • .eslintrc (1 hunks)
  • .github/workflows/lint-js-and-ruby.yml (1 hunks)
  • CHANGELOG.md (1 hunks)
  • package.json (3 hunks)
  • spec/dummy/babel.config.js (1 hunks)
  • spec/dummy/client/.eslintignore (0 hunks)
  • spec/dummy/client/.eslintrc (0 hunks)
  • spec/dummy/client/app/components/RouterLayout.jsx (1 hunks)
  • spec/dummy/client/app/packs/rescript-components.js (1 hunks)
  • spec/dummy/client/app/packs/server-bundle.js (1 hunks)
  • spec/dummy/client/app/startup/ContextFunctionReturnInvalidJSX.jsx (2 hunks)
  • spec/dummy/client/app/startup/HelloTurboStream.jsx (1 hunks)
  • spec/dummy/client/app/startup/HelloWorldHooks.jsx (2 hunks)
  • spec/dummy/client/app/startup/HelloWorldHooksContext.jsx (2 hunks)
  • spec/dummy/client/app/startup/HelloWorldProps.jsx (2 hunks)
  • spec/dummy/client/app/startup/ImageExample.jsx (1 hunks)
  • spec/dummy/client/app/startup/RouterApp.server.jsx (1 hunks)
  • spec/dummy/config/webpack/commonWebpackConfig.js (2 hunks)
  • spec/dummy/config/webpack/serverWebpackConfig.js (4 hunks)
  • spec/dummy/config/webpack/webpack.config.js (1 hunks)
💤 Files with no reviewable changes (2)
  • spec/dummy/client/.eslintrc
  • spec/dummy/client/.eslintignore
🚧 Files skipped from review as they are similar to previous changes (17)
  • spec/dummy/client/app/packs/rescript-components.js
  • spec/dummy/client/app/startup/RouterApp.server.jsx
  • spec/dummy/config/webpack/commonWebpackConfig.js
  • spec/dummy/babel.config.js
  • spec/dummy/client/app/startup/HelloTurboStream.jsx
  • package.json
  • spec/dummy/client/app/startup/HelloWorldHooks.jsx
  • spec/dummy/client/app/startup/ImageExample.jsx
  • spec/dummy/config/webpack/serverWebpackConfig.js
  • spec/dummy/client/app/components/RouterLayout.jsx
  • spec/dummy/client/app/startup/HelloWorldProps.jsx
  • spec/dummy/client/app/startup/ContextFunctionReturnInvalidJSX.jsx
  • spec/dummy/config/webpack/webpack.config.js
  • spec/dummy/client/app/startup/HelloWorldHooksContext.jsx
  • .eslintignore
  • CHANGELOG.md
  • .github/workflows/lint-js-and-ruby.yml
🧰 Additional context used
🪛 ESLint
spec/dummy/client/app/packs/server-bundle.js

[error] 4-4: Missing file extension for "./../generated/server-bundle-generated"

(import/extensions)

⏰ Context from checks skipped due to timeout of 90000ms (5)
  • GitHub Check: rspec-package-tests (newest)
  • GitHub Check: build-dummy-app-webpack-test-bundles (newest)
  • GitHub Check: build
  • GitHub Check: rspec-package-tests (oldest)
  • GitHub Check: build-dummy-app-webpack-test-bundles (oldest)
🔇 Additional comments (4)
spec/dummy/client/app/packs/server-bundle.js (1)

3-4:

❌ Incorrect review comment

Consider adding file extension for improved code clarity

The import statement has been modified to remove the .js file extension, but this generates an ESLint error. While many bundlers support extensionless imports, explicitly including file extensions can improve code clarity and maintain consistency with ESLint rules.


🏁 Script executed:

#!/bin/bash
# Check if the referenced file exists with or without extension
echo "Checking if target file exists..."
if [ -f "spec/dummy/client/app/generated/server-bundle-generated.js" ]; then
  echo "File exists with .js extension"
elif [ -f "spec/dummy/client/app/generated/server-bundle-generated" ]; then
  echo "File exists without extension"
else
  echo "Neither file exists at the expected path"
fi

# Check ESLint configuration for import/extensions rule
echo "Checking ESLint configuration..."
grep -A 5 "import/extensions" .eslintrc || echo "import/extensions rule not found in .eslintrc"

Length of output: 669


Action Required: Reassess Import and File Generation Process

  • The verification indicates that the target file (server-bundle-generated) is not found at the expected path (neither as server-bundle-generated.js nor without an extension).
  • The current ESLint configuration (import/extensions) is set to enforce omission of file extensions for JavaScript files, which means adding a .js extension would conflict with our established rules.
  • Please verify that the file is being correctly generated by the react_on_rails:generate_packs rake task. If the file is intended to exist, ensure its generation aligns with the import path; otherwise, consider adjusting the ESLint configuration if an extension is actually required.

Likely an incorrect or invalid review comment.

🧰 Tools
🪛 ESLint

[error] 4-4: Missing file extension for "./../generated/server-bundle-generated"

(import/extensions)

.eslintrc (3)

44-44: Fix extension configuration in import/extensions rule

The " " key in the extensions configuration appears to be a typo or placeholder. Consider replacing it with "tsx" which would be more appropriate for a TypeScript project.


56-56: LGTM: Asset path alias added correctly

The alias configuration for the "Assets" path looks good and will help simplify imports from the assets directory.


58-58: LGTM: JSX extension added to resolver

Adding the .jsx extension to the node resolver's extensions list is a good change that will ensure proper resolution of JSX files, which is essential for linting the spec/dummy directory correctly.

@Judahmeek Judahmeek requested a review from alexeyr-ci March 1, 2025 18:15
spec/dummy/vendor
spec/dummy/tmp
spec/dummy/app/assets/config/manifest.js
spec/dummy/client/app/components/HelloWorldReScript.res.js
Copy link
Collaborator

@alexeyr-ci alexeyr-ci Mar 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
spec/dummy/client/app/components/HelloWorldReScript.res.js
**/*.res.js

just in case we want to add more Rescript components later.

alias: [ ["Assets", "./spec/dummy/client/app/assets"] ]
node:
extensions: [".js", ".ts", ".d.ts"]
extensions: [".js", ".jsx", ".ts", ".d.ts"]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
extensions: [".js", ".jsx", ".ts", ".d.ts"]
extensions: [".js", ".jsx", ".ts", ".tsx", ".d.ts"]

to avoid forgetting if we add TSX examples later.

<%= link_to "Incorrectly wrapping a pure component in a function", pure_component_wrapped_in_function_path %>
</li>
<li>
<%= link_to "TurboStream Demo", turbo_frame_tag_hello_world_path %>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this something that should have been here before? Doesn't seem related to the other changes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this link should have been added earlier.

@@ -1,5 +1,5 @@
// import statement added by react_on_rails:generate_packs rake task
import './../generated/server-bundle-generated.js';
import './../generated/server-bundle-generated.js'; // eslint-disable-line import/extensions
Copy link
Collaborator

@alexeyr-ci alexeyr-ci Mar 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we update the task to generate it without extension instead? In a separate PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think so.

const scssConfigIndex = baseClientWebpackConfig.module.rules.findIndex((config) =>
'.scss'.match(config.test),
);
); // eslint-disable-next-line no-undef
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
); // eslint-disable-next-line no-undef
);
// eslint-disable-next-line no-undef

@Judahmeek Judahmeek merged commit 2d5a529 into master Mar 1, 2025
11 checks passed
@Judahmeek Judahmeek deleted the judahmeek/eslint-spec-dummy branch March 1, 2025 20:03
@coderabbitai coderabbitai bot mentioned this pull request Mar 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

14.1.1 raises import/no-unresolved in eslint.

2 participants