Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update dependencies #196

Merged
merged 3 commits into from
Dec 6, 2024
Merged

Conversation

maehr
Copy link
Member

@maehr maehr commented Dec 4, 2024

Pull request

Proposed changes

Types of changes

  • New feature (non-breaking change which adds functionality).
  • Enhancement (non-breaking change which enhances functionality)
  • Bug Fix (non-breaking change which fixes an issue).
  • Breaking change (fix or feature that would cause existing functionality to change).

Checklist

  • I have read the README document.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.

Summary by CodeRabbit

  • Chores
    • Improved readability of the .prettierrc configuration file.
    • Updated Node.js version compatibility in package.json.
    • Incremented multiple package versions in devDependencies for better compatibility and performance.
    • Added type safety to the Tailwind CSS configuration in tailwind.config.ts.

Copy link

changeset-bot bot commented Dec 4, 2024

⚠️ No Changeset found

Latest commit: d9decee

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@maehr maehr requested a review from Copilot December 4, 2024 18:01
Copy link
Contributor

coderabbitai bot commented Dec 4, 2024

Walkthrough

The pull request includes modifications to three files: .prettierrc, package.json, and tailwind.config.ts. The .prettierrc file's "overrides" section has been reformatted for improved readability. The package.json file has updated Node.js version constraints and incremented several development dependencies. Finally, the tailwind.config.ts file now includes type declarations for enhanced type safety, with the configuration object exported as a constant.

Changes

File Change Summary
.prettierrc Reformatted the "overrides" section from single-line to multi-line for better readability.
package.json Updated engines.node version constraint to ">=20 <23" and incremented versions of multiple devDependencies.
tailwind.config.ts Added type declaration for the configuration, enforcing type safety, and updated export to use a constant config.

Possibly related PRs

  • Fix config #177: This PR updates the package.json file, which includes changes to the prettier dependency, relevant to the formatting changes made in the .prettierrc file in the main PR.
  • chore: dependencies updated #188: Similar to Fix config #177, this PR also updates the prettier dependency in package.json, which is directly related to the changes in the .prettierrc configuration file.

Suggested reviewers

  • koilebeit

Poem

In the garden where we play,
Configs change in a bright array.
Prettier's rules now dance and sway,
With types in Tailwind, come what may!
Let's hop along, it's a joyful day! 🐇✨


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 1cef0a4 and d9decee.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (1)
  • package.json (2 hunks)
🔇 Additional comments (4)
package.json (4)

52-52: ⚠️ Potential issue

Critical: Security vulnerabilities in dependencies

Several critical security issues remain in the updated dependencies:

  1. dompurify@^3.2.2:

    • CRITICAL: Vulnerable to tampering by prototype pollution
    • HIGH: Has a nesting-based mXSS vulnerability
  2. vite@^5.4.11:

    • MODERATE: server.fs.deny bypass vulnerability
    • MODERATE: DOM Clobbering gadget leading to XSS

Please update to the minimum secure versions:

-    "dompurify": "^3.2.2",
+    "dompurify": "^3.1.3",
-    "vite": "^5.4.11",
+    "vite": "^5.1.8",

Also applies to: 57-57, 82-82


25-25: LGTM: Node.js version constraint is well-defined

The addition of an upper bound (<23) is a good practice to prevent potential compatibility issues with future Node.js versions.

Let's verify the Node.js version compatibility:

✅ Verification successful

Node.js version constraint is correctly set and compatible with the current environment

The current Node.js version (v22.9.0) falls within the specified constraint range of ">=20 <23", confirming that the version constraint is appropriate and working as intended.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if the current Node.js version in the CI environment matches the constraints
node -v | grep -E "v2[0-2]\."

Length of output: 39


47-48: LGTM: Minor version updates look good

The minor version bumps across development dependencies follow good maintenance practices.

Let's check for any breaking changes in the updates:

Also applies to: 58-58, 67-71, 77-77, 79-79, 81-81, 83-84

✅ Verification successful

Minor version updates are safe to proceed

Looking at the package versions in package.json:

  • @playwright/test: ^1.49.0 (minor version)
  • eslint: ^9.16.0 (minor version)
  • postcss: ^8.4.49 (minor version)
  • prettier: ^3.4.2 (minor version)
  • tailwindcss: ^3.4.16 (minor version)
  • vitest: ^2.1.8 (minor version)

All updates are minor version changes (indicated by the middle number in semver) and use caret (^) versioning which ensures backward compatibility. These changes follow semantic versioning principles where minor versions only add functionality in a backward-compatible manner.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check changelogs for breaking changes
for pkg in "playwright" "eslint" "postcss" "prettier" "tailwindcss" "vitest"; do
  echo "Checking $pkg changelog..."
  gh api repos/$pkg/$pkg/releases/latest --jq '.body' | grep -i "breaking"
done

Length of output: 1423


Script:

#!/bin/bash
# Let's try a different approach to check the package versions and their changes
# First, let's get the exact version changes from package.json
rg -A1 '"dependencies"|"devDependencies"' package.json

# Then let's check if there are any major version changes by looking at the version numbers
cat package.json | jq -r '.dependencies,.devDependencies | to_entries[] | "\(.key): \(.value)"' | grep -E "@playwright/test|eslint|postcss|prettier|tailwindcss|vitest"

Length of output: 333


Script:

#!/bin/bash
# Let's try one more time with a simpler approach to read package.json
cat package.json

Length of output: 2703


53-53: Strategic downgrade to stable versions

The downgrade from Svelte 5 (beta) to Svelte 4 (stable) and its corresponding plugin is a good decision to resolve the reported installation and build issues.

Let's verify the compatibility between these versions:

Also applies to: 76-76

✅ Verification successful

Strategic downgrade verified as compatible

The downgrade from Svelte 5 (beta) to Svelte 4.2.19 and @sveltejs/vite-plugin-svelte to 3.1.2 is verified as compatible based on:

  • The package.json shows all related dependencies are aligned:
    • svelte: ^4.2.19
    • @sveltejs/vite-plugin-svelte: ^3.1.2
    • @sveltejs/kit: ^2.9.0
    • vite: ^5.4.11
  • The svelte.config.js shows proper configuration with vitePreprocess from @sveltejs/vite-plugin-svelte
  • All other Svelte ecosystem packages (svelte-check, prettier-plugin-svelte, etc.) are compatible with Svelte 4.x
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check for any known compatibility issues between svelte and its plugin
rg -A 5 "svelte.*4\.2\.19|vite-plugin-svelte.*3\.1\.2" ./package-lock.json

Length of output: 136


Script:

#!/bin/bash
# Let's check if pnpm-lock.yaml exists and verify the dependencies
fd -g "pnpm-lock.yaml" -x cat {}

# Also check if there are any other files mentioning these versions
rg -A 5 "svelte.*4\.2\.19|vite-plugin-svelte.*3\.1\.2"

Length of output: 65627


Script:

#!/bin/bash
# Let's check the package.json to verify the dependencies and their compatibility
cat package.json

# Also check for any svelte config files that might show plugin configuration
fd -g "svelte.config.*" -x cat {}

Length of output: 3723


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 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.

@maehr maehr requested a review from koilebeit December 4, 2024 18:01

Choose a reason for hiding this comment

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

Copilot reviewed 2 out of 4 changed files in this pull request and generated no suggestions.

Files not reviewed (2)
  • .prettierrc: Language not supported
  • package.json: Language not supported
Comments skipped due to low confidence (1)

tailwind.config.ts:6

  • The comment should be updated to reflect the new TypeScript type usage. Suggest changing to: /** @type {import('tailwindcss').Config} */
/** @type {import('tailwindcss').Config} */
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: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between da35949 and 1cef0a4.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (3)
  • .prettierrc (1 hunks)
  • package.json (2 hunks)
  • tailwind.config.ts (2 hunks)
✅ Files skipped from review due to trivial changes (1)
  • .prettierrc
🔇 Additional comments (4)
tailwind.config.ts (1)

Line range hint 4-19: LGTM! Type safety improvements are well implemented.

The changes enhance type safety by:

  1. Adding proper type imports
  2. Using the satisfies operator to ensure type conformance
  3. Maintaining the same configuration while adding compile-time type checking

This is a good practice that helps catch configuration errors early.

package.json (3)

25-25: Verify Node.js version compatibility with CI/CD

The Node.js version constraint has been updated to ">=20 <23". This is more specific than before and could affect CI/CD environments.


47-85: Verify compatibility between interdependent packages

Several related packages have been updated:

  • @sveltejs/kit^2.9.0
  • @sveltejs/vite-plugin-svelte^4.0.2
  • vite^5.4.11

Please ensure these versions are compatible with each other.

Additionally, some packages have significant version jumps that warrant careful testing:

  • dompurify^3.2.2
  • eslint^9.16.0
  • prettier^3.4.2

77-77: Review Svelte major version update carefully

The update from svelte ^5.1.0 to ^5.6.1 is significant. Svelte 5 is still in beta, and these updates might include breaking changes.

Also applies to: 78-78

✅ Verification successful

Let me gather more specific information about Svelte usage patterns that might be affected by version changes.


Based on the search results, I can now provide a final response:

Svelte 5.6.1 update appears safe for this codebase

The codebase primarily uses standard Svelte features that are stable across versions:

  • Traditional component props (export let)
  • Standard control flow ({#if}, {#each}, {#await})
  • No usage of new Svelte 5 runes ($state, $derived, $effect)
  • No advanced or beta-specific syntax patterns

The update from 5.1.0 to 5.6.1 should be safe as the codebase doesn't utilize any of the new experimental features introduced in Svelte 5.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for Svelte-specific syntax that might be affected
rg -l "(\$:|let:|\{#|@\w+)" src/

Length of output: 1510


Script:

#!/bin/bash
# Check for specific Svelte 5 syntax patterns and features
# Looking for runes ($state, $derived, etc.), new control flow syntax, and component props
rg -A 2 "\$state|let \$|const \$|\$derived|\$effect|\{#each|\{#if|\{#await|export let" src/

# Also check package-lock.json for the previous version
cat package-lock.json | grep -A 5 '"svelte":'

Length of output: 8426

package.json Outdated Show resolved Hide resolved
Copy link
Contributor

@koilebeit koilebeit left a comment

Choose a reason for hiding this comment

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

Maybe I'm doing something wrong. But after pnpm install and pnpm run prebuild I get this:
image

@maehr
Copy link
Member Author

maehr commented Dec 5, 2024

Maybe I'm doing something wrong. But after pnpm install and pnpm run prebuild I get this: image

The dev server does not work for me as well. But it builds. We would need to update skeleton to v3 which is a huge thing. I am out of ideas to fix this. We might be able to downgrade certain dependencies. But all of this would require a deep dive into the skeleton docs (or a time consuming upgrade to v3). What's you take on this?

PS: npm run build && npm run preview works for me.

@maehr
Copy link
Member Author

maehr commented Dec 5, 2024

@koilebeit Can you run the current configuration on main without problem?
I ran into the same problems with the actual config on main. I'll try to downgrade.

@koilebeit
Copy link
Contributor

@koilebeit Can you run the current configuration on main without problem? I ran into the same problems with the actual config on main. I'll try to downgrade.

Yes, with the actual main it is the same problem

@maehr
Copy link
Member Author

maehr commented Dec 5, 2024

@koilebeit I downgraded the relevant dependencies. It's still inconsistent, but less ;)

Copy link
Contributor

@koilebeit koilebeit left a comment

Choose a reason for hiding this comment

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

With this change, the dev server works again

@maehr maehr merged commit d637f5e into Stadt-Geschichte-Basel:main Dec 6, 2024
4 checks passed
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.

2 participants