squid/blog
1
2
Fork 2
Code Issues 15 Pull Requests Actions Projects 1 Releases 22 Wiki Activity

BLOG-290 Migrate the frontend JS runtime to bun #294

Merged
squid merged 11 commits from BLOG-290_migrate_to_bun into main 2026-05-14 17:26:40 +08:00
Conversation 3 Commits 11 Files Changed 138 +1581 -6156
squid commented 2026-04-30 19:40:51 +08:00
Owner
Copy Link

Description

This change migrates the frontend environment from Node.js/pnpm to Bun to improve build performance and runtime efficiency. The migration includes updating CI/CD workflows, Docker configurations, and the SvelteKit adapter. Additionally, the PR introduces stricter linting rules via eslint-plugin-simple-import-sort and a global restriction on relative imports to enforce the use of path aliases ($lib/...), ensuring a cleaner and more maintainable import structure across the project. Backend environment variables were also renamed for consistency.

Package Changes

Package Action Version
svelte-adapter-bun Added 1.0.1
eslint-plugin-simple-import-sort Added 13.0.0
@types/node Added 22.19.17
eslint-plugin-import Removed 2.32.0
@sveltejs/adapter-node Removed 5.5.4
svelte Updated 5.55.1 -> 5.55.5
@sentry/sveltekit Updated 10.47.0 -> 10.51.0
@sveltejs/kit Updated 2.55.0 -> 2.58.0
tailwindcss Updated 4.2.2 -> 4.2.4
typescript-eslint Updated 8.58.0 -> 8.59.1

Screenshots

No response

Reference

Resolves #290.

Checklist

  • A milestone is set
  • The related issuse has been linked to this branch
### Description This change migrates the frontend environment from Node.js/pnpm to Bun to improve build performance and runtime efficiency. The migration includes updating CI/CD workflows, Docker configurations, and the SvelteKit adapter. Additionally, the PR introduces stricter linting rules via eslint-plugin-simple-import-sort and a global restriction on relative imports to enforce the use of path aliases ($lib/...), ensuring a cleaner and more maintainable import structure across the project. Backend environment variables were also renamed for consistency. ### Package Changes Package | Action | Version -- | -- | -- svelte-adapter-bun | Added | 1.0.1 eslint-plugin-simple-import-sort | Added | 13.0.0 @types/node | Added | 22.19.17 eslint-plugin-import | Removed | 2.32.0 @sveltejs/adapter-node | Removed | 5.5.4 svelte | Updated | 5.55.1 -> 5.55.5 @sentry/sveltekit | Updated | 10.47.0 -> 10.51.0 @sveltejs/kit | Updated | 2.55.0 -> 2.58.0 tailwindcss | Updated | 4.2.2 -> 4.2.4 typescript-eslint | Updated | 8.58.0 -> 8.59.1 ### Screenshots _No response_ ### Reference Resolves #290. ### Checklist - [x] A milestone is set - [x] The related issuse has been linked to this branch
squid added this to the 0.8 milestone 2026-04-30 19:40:51 +08:00
squid added 6 commits 2026-04-30 19:40:51 +08:00
BLOG-290 build: update minor and patch versions a99f7b5c04
BLOG-290 build: migrate to bun b1cb4a2d46
BLOG-290 fix: relative import ed9def3dae
BLOG-290 fix: embedding cache path error
Some checks failed
Frontend CI / build (push) Failing after 1m0s
Details
a486a73ba3
BLOG-290 build: container built with bun c12d4b7359
BLOG-290 build: update pre-commit script
Some checks failed
Frontend CI / build (push) Failing after 50s
Details
PR Title Check / pr-title-check (pull_request) Successful in 13s
Details
Auto Comment On PR / add_improve_comment (pull_request) Failing after 1m5s
Details
8fd0eb7ba7
squid added 1 commit 2026-04-30 19:43:45 +08:00
BLOG-290 fix: remove unsued eslint plugin
Some checks failed
Frontend CI / build (push) Failing after 54s
Details
PR Title Check / pr-title-check (pull_request) Successful in 15s
Details
ac18b67798
squid added 1 commit 2026-04-30 20:00:18 +08:00
BLOG-290 fix: add --bun to lint and check
All checks were successful
Frontend CI / build (push) Successful in 1m23s
Details
PR Title Check / pr-title-check (pull_request) Successful in 13s
Details
2cda70138c
squid changed title from BLOG-290 Migrate the frontend JS runtime to bun to BLOG-290 Migrate the frontend js runtime to bun 2026-04-30 20:07:26 +08:00
squid changed title from BLOG-290 Migrate the frontend js runtime to bun to BLOG-290 Migrate the frontend JS runtime to bun 2026-04-30 20:07:55 +08:00
squid commented 2026-04-30 20:08:20 +08:00
Author
Owner
Copy Link

/improve

/improve
bot commented 2026-04-30 20:08:25 +08:00
Collaborator
Copy Link

PR Code Suggestions ✨

CategorySuggestion                                                                                                                                    Impact
Possible issue
Correct invalid Tailwind CSS syntax

The : variant syntax for targeting descendant elements is incorrect. The attribute
selector should be enclosed in square brackets. This syntax error prevents Tailwind
CSS from applying the intended styles, breaking the component's layout.**

frontend/src/lib/common/framework/components/ui/command/command-dialog.svelte [34]

-class="**:data-command-group:px-2 **:data-command-input:h-12 **:data-command-item:px-2 **:data-command-item:py-3 **:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
+class="**:[data-command-group]:px-2 **:[data-command-input]:h-12 **:[data-command-item]:px-2 **:[data-command-item]:py-3 **:[data-slot=command-input-wrapper]:h-12 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
Suggestion importance[1-10]: 8

__

Why: The suggestion correctly identifies an invalid syntax for Tailwind CSS v4's **: variant when used with attribute selectors. The existing_code **:data-command-group:px-2 is incorrect and would fail to apply styles, whereas the improved_code **:[data-command-group]:px-2 is the correct syntax. This is a valuable correction that fixes a styling bug.

Medium
Add missing package.json to image

The final runner stage is missing the package.json file. Some Node.js packages may
attempt to read package.json at runtime to check for versions or other metadata,
which would cause a crash if the file is not present.

frontend/Dockerfile [20-28]

 FROM base AS runner
 WORKDIR /app
 COPY --from=deps /temp/prod/node_modules ./node_modules
 COPY --from=builder /app/build ./build
+COPY --from=builder /app/package.json ./
 EXPOSE 3000
 ENV NODE_ENV=production
 ENV HOSTNAME=0.0.0.0
 ENV PORT=3000
 CMD ["bun", "run", "build/index.js"]
Suggestion importance[1-10]: 7

__

Why: The suggestion correctly points out that the package.json file is missing from the final runner stage in the Dockerfile. While not an immediate bug, some packages rely on this file at runtime, and its absence could lead to difficult-to-debug crashes. Adding it is a best practice that improves the image's robustness.

Medium
General
Improve incomplete ESLint glob pattern

The glob patterns to ignore relative CSS imports are incomplete. They only cover
paths in the current and parent directories, but will incorrectly flag valid deeper
relative imports like ../../styles.css. Using a more general pattern will correctly
ignore all relative CSS imports.

frontend/eslint.config.js [56-67]

 'no-restricted-imports': [
     'error',
     {
         patterns: [
             {
-                group: ['./*', '../*', '!./$types', '!./**/*.css', '!../**/*.css'],
+                group: ['./*', '../*', '!./$types', '!**/*.css'],
                 message:
                     'Relative imports are not allowed. Please use path aliases (e.g., $lib/...) instead.',
             },
         ],
     },
 ],
Suggestion importance[1-10]: 5

__

Why: The suggestion correctly identifies that the ESLint glob patterns for ignoring relative CSS imports are incomplete. The existing patterns !./**/*.css and !../**/*.css do not cover deeper relative paths. The proposed change to !**/*.css is more robust and correctly covers all relative CSS imports, improving the accuracy of the linting rule.

Low
## PR Code Suggestions ✨ <!-- --> <table><thead><tr><td><strong>Category</strong></td><td align=left><strong>Suggestion&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </strong></td><td align=center><strong>Impact</strong></td></tr><tbody><tr><td rowspan=2>Possible issue</td> <td> <details><summary>Correct invalid Tailwind CSS syntax</summary> ___ **The <code>**:</code> variant syntax for targeting descendant elements is incorrect. The attribute <br>selector should be enclosed in square brackets. This syntax error prevents Tailwind <br>CSS from applying the intended styles, breaking the component's layout.** [frontend/src/lib/common/framework/components/ui/command/command-dialog.svelte [34]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-290_migrate_to_bun/frontend/src/lib/common/framework/components/ui/command/command-dialog.svelte#L34-L34) ```diff -class="**:data-command-group:px-2 **:data-command-input:h-12 **:data-command-item:px-2 **:data-command-item:py-3 **:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5" +class="**:[data-command-group]:px-2 **:[data-command-input]:h-12 **:[data-command-item]:px-2 **:[data-command-item]:py-3 **:[data-slot=command-input-wrapper]:h-12 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5" ``` <details><summary>Suggestion importance[1-10]: 8</summary> __ Why: The suggestion correctly identifies an invalid syntax for Tailwind CSS v4's `**:` variant when used with attribute selectors. The `existing_code` `**:data-command-group:px-2` is incorrect and would fail to apply styles, whereas the `improved_code` `**:[data-command-group]:px-2` is the correct syntax. This is a valuable correction that fixes a styling bug. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Add missing package.json to image</summary> ___ **The final runner stage is missing the <code>package.json</code> file. Some Node.js packages may <br>attempt to read <code>package.json</code> at runtime to check for versions or other metadata, <br>which would cause a crash if the file is not present.** [frontend/Dockerfile [20-28]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-290_migrate_to_bun/frontend/Dockerfile#L20-L28) ```diff FROM base AS runner WORKDIR /app COPY --from=deps /temp/prod/node_modules ./node_modules COPY --from=builder /app/build ./build +COPY --from=builder /app/package.json ./ EXPOSE 3000 ENV NODE_ENV=production ENV HOSTNAME=0.0.0.0 ENV PORT=3000 CMD ["bun", "run", "build/index.js"] ``` <details><summary>Suggestion importance[1-10]: 7</summary> __ Why: The suggestion correctly points out that the `package.json` file is missing from the final runner stage in the Dockerfile. While not an immediate bug, some packages rely on this file at runtime, and its absence could lead to difficult-to-debug crashes. Adding it is a best practice that improves the image's robustness. </details></details></td><td align=center>Medium </td></tr><tr><td rowspan=1>General</td> <td> <details><summary>Improve incomplete ESLint glob pattern</summary> ___ **The glob patterns to ignore relative CSS imports are incomplete. They only cover <br>paths in the current and parent directories, but will incorrectly flag valid deeper <br>relative imports like <code>../../styles.css</code>. Using a more general pattern will correctly <br>ignore all relative CSS imports.** [frontend/eslint.config.js [56-67]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-290_migrate_to_bun/frontend/eslint.config.js#L56-L67) ```diff 'no-restricted-imports': [ 'error', { patterns: [ { - group: ['./*', '../*', '!./$types', '!./**/*.css', '!../**/*.css'], + group: ['./*', '../*', '!./$types', '!**/*.css'], message: 'Relative imports are not allowed. Please use path aliases (e.g., $lib/...) instead.', }, ], }, ], ``` <details><summary>Suggestion importance[1-10]: 5</summary> __ Why: The suggestion correctly identifies that the ESLint glob patterns for ignoring relative CSS imports are incomplete. The existing patterns `!./**/*.css` and `!../**/*.css` do not cover deeper relative paths. The proposed change to `!**/*.css` is more robust and correctly covers all relative CSS imports, improving the accuracy of the linting rule. </details></details></td><td align=center>Low </td></tr></tr></tbody></table>
squid added 2 commits 2026-04-30 20:15:24 +08:00
BLOG-290 fix: copy package.json ee97c4d81e
BLOG-290 refactor: simplify file matching pattern
All checks were successful
Frontend CI / build (push) Successful in 1m29s
Details
PR Title Check / pr-title-check (pull_request) Successful in 15s
Details
f7ec5fd7a2
squid commented 2026-05-14 15:35:44 +08:00
Author
Owner
Copy Link

Improve incomplete ESLint glob pattern

f7ec5fd7a2

Add missing package.json to image

ee97c4d81e

> Improve incomplete ESLint glob pattern https://git.squidspirit.com/squid/blog/commit/f7ec5fd7a2ffb086d535a2046fa88d7a0387dcaf --- > Add missing package.json to image https://git.squidspirit.com/squid/blog/commit/ee97c4d81e06ed72b248249795672748c56149a6
squid added 1 commit 2026-05-14 16:00:29 +08:00
BLOG-209 fix: specify package version
All checks were successful
Frontend CI / build (push) Successful in 1m47s
Details
PR Title Check / pr-title-check (pull_request) Successful in 14s
Details
e65c217854
squid merged commit 815877efba into main 2026-05-14 17:26:40 +08:00
squid deleted branch BLOG-290_migrate_to_bun 2026-05-14 17:26:40 +08:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
bug
Something is not working
 dashboard
design
dev/automation
dev/backend
dev/frontend
dev/improvement
invalid
Something is wrong
 wontfix
This won't be fixed
No Label
Milestone
No items
No Milestone 0.8
Projects
Clear projects
No project
Assignees
Clear assignees
bot zoe squid
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: squid/blog#294
Delete Branch "BLOG-290_migrate_to_bun"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?