feat(front-vike): vike版フロントエンド#4
Draft
sousuke0422 wants to merge 11 commits into
Draft
Conversation
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
🧹 Nitpick comments (7)
apps/frontend-vike/stories/button.css (1)
1-30: ⚡ Quick winAdd an explicit keyboard focus style for button variants.
This improves accessibility consistency across browsers/themes for Storybook interaction testing.
Suggested CSS patch
.storybook-button { display: inline-block; cursor: pointer; border: 0; border-radius: 3em; font-weight: 700; line-height: 1; font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } +.storybook-button:focus-visible { + outline: 2px solid `#1f6feb`; + outline-offset: 2px; +}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/stories/button.css` around lines 1 - 30, Add explicit keyboard focus styles for the button base and each variant so keyboard users and Storybook tests get a consistent visible focus ring: update .storybook-button to include a :focus and :focus-visible rule (e.g., outline or box-shadow) and ensure .storybook-button--primary, .storybook-button--secondary, .storybook-button--small, .storybook-button--medium, and .storybook-button--large either inherit or define matching focus styling so the visual contrast is sufficient across variants; use the existing class names (.storybook-button and .storybook-button--*) to locate where to add these focus rules.apps/frontend-vike/package.json (1)
16-21: ⚡ Quick winVerify whether Hono packages are still required after the Elysia migration.
If
@vikejs/honoandhonoare now unused, removing them will reduce dependency surface and maintenance overhead.#!/bin/bash set -euo pipefail echo "Checking for Hono usage in source files..." rg -n --hidden -g '!**/node_modules/**' -g '!**/dist/**' \ 'from\s+["'\''](`@vikejs/hono`|hono)["'\'']|require\(["'\''](`@vikejs/hono`|hono)["'\'']\)|\bcreateHono|\bHono\b' . echo echo "Checking for Elysia usage (for comparison)..." rg -n --hidden -g '!**/node_modules/**' -g '!**/dist/**' \ 'from\s+["'\''](`@vikejs/elysia`|elysia)["'\'']|require\(["'\''](`@vikejs/elysia`|elysia)["'\'']\)|\bElysia\b' .🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/package.json` around lines 16 - 21, Confirm whether the Hono packages are unused: search the codebase for imports/usages of "@vikejs/hono", "hono", "createHono", or "Hono" and also check for "@vikejs/elysia"/"Elysia" references to validate the migration; if no hits, remove the "@vikejs/hono" and "hono" entries from package.json, delete or regenerate lockfiles (package-lock.json / yarn.lock / pnpm-lock.yaml) by reinstalling dependencies, run the project build/tests to ensure nothing breaks, and if any imports remain replace them with the new Elysia equivalents (update code references that use createHono/Hono to the corresponding Elysia APIs) before committing.apps/frontend-vike/.gitignore (1)
248-250: ⚡ Quick winDo not ignore the entire
test/directory.Ignoring
test/here can cause legitimate frontend test files to be unintentionally untracked.Suggested patch
-# TODO: where does this rule come from? -test/🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/.gitignore` around lines 248 - 250, The .gitignore currently ignores the entire test/ directory which will untrack legitimate frontend tests; open apps/frontend-vike/.gitignore and remove the broad "test/" entry (or replace it with a more specific pattern or scoped path) and if you need to ignore generated test artifacts add explicit patterns or negation rules (e.g., leave actual test files with !test/**) so that real test sources under test/ remain tracked.apps/frontend-vike/pages/+onPageTransitionStart.ts (2)
6-7: ⚡ Quick winConsider removing console.log statements from production code.
These debug logs will execute on every page transition in production. Consider using a proper logging utility that can be conditionally enabled, or remove them before merging to main.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/pages/`+onPageTransitionStart.ts around lines 6 - 7, Remove the two console.log debug statements from the page transition handler (+onPageTransitionStart.ts) so they don't run in production; either delete them or replace them with a conditional logging call to your app logger (e.g., use a logging utility or feature-flagged debug logger) that checks an environment flag before emitting messages, and if you replace them ensure any retained log references still use the pageContext.isBackwardNavigation identifier for context.
5-5: ⚡ Quick winRemove unnecessary
asynckeyword.The function is declared
asyncbut contains noawaitexpressions. This adds unnecessary overhead and may mislead readers about asynchronous behavior.♻️ Proposed fix
-export async function onPageTransitionStart(pageContext: Partial<PageContextClient>) { +export function onPageTransitionStart(pageContext: Partial<PageContextClient>) { console.log("Page transition start");🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/pages/`+onPageTransitionStart.ts at line 5, The function onPageTransitionStart is marked async but contains no awaits; remove the unnecessary async keyword from the function declaration (export async function onPageTransitionStart(...) -> export function onPageTransitionStart(...)) so it becomes a plain synchronous function, ensuring any callers expecting a Promise still handle the returned value if needed and verifying there are no await-dependent behaviors inside onPageTransitionStart.apps/frontend-vike/.env.example (1)
13-15: 💤 Low valueConsider alphabetizing the Sentry keys for consistency.
The linter suggests placing
PUBLIC_ENV__SENTRY_DSNbeforeSENTRY_DSNfor alphabetical ordering. While not critical, consistent ordering improves maintainability.♻️ Proposed reordering
## Sentry +# Sentry DNS. Used for Error Reporting in the Browser +PUBLIC_ENV__SENTRY_DSN= # Sentry DNS. Used for Error Reporting on the Server SENTRY_DSN= -# Sentry DNS. Used for Error Reporting in the Browser -PUBLIC_ENV__SENTRY_DSN=🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/.env.example` around lines 13 - 15, Reorder the two Sentry env keys so they are alphabetized: place PUBLIC_ENV__SENTRY_DSN above SENTRY_DSN in the .env.example; ensure the comment “# Sentry DNS. Used for Error Reporting in the Browser” stays with the PUBLIC_ENV__SENTRY_DSN entry (or is updated to remain correct) and no other lines are changed. Reference keys: PUBLIC_ENV__SENTRY_DSN and SENTRY_DSN.apps/frontend-vike/pages/star-wars/index/+Page.vue (1)
5-5: 💤 Low valueConsider using a template literal for the href.
String concatenation works but a template literal would be slightly more readable and consistent with modern JavaScript practices.
♻️ Proposed refactor
- <a :href="'/star-wars/' + item.id">{{ item.title }}</a> ({{ item.release_date }}) + <a :href="`/star-wars/${item.id}`">{{ item.title }}</a> ({{ item.release_date }})🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/pages/star-wars/index/`+Page.vue at line 5, Replace the string-concatenation href binding in the template (the :href="'/star-wars/' + item.id" expression) with a template literal for readability and consistency; update the binding to use backtick interpolation (e.g., `\`/star-wars/${item.id}\``) while keeping the rest of the anchor unchanged so it still renders {{ item.title }} and {{ item.release_date }}.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/frontend-vike/.env.example`:
- Line 3: Remove the surrounding double quotes from environment variable values
so they are not included as literal characters in the loaded environment: update
the APP_URL entry (and the other env keys mentioned) to use unquoted values
(e.g., APP_URL=http://localhost:3000) ensuring variables like APP_URL, and the
two other keys referenced are written without leading/trailing quotes so
downstream URL parsing/validation receives the raw value.
In `@apps/frontend-vike/`+server.ts:
- Line 4: The PORT environment value may parse to NaN and propagate into
prod.port; update the code that sets the port (the const port assignment using
process.env.PORT and parseInt) to validate the parsed value and fall back to
3000 when invalid: parse process.env.PORT, check Number.isInteger(parsedPort) &&
parsedPort > 0 (or Number.isFinite and >0) and only then assign parsedPort to
port, otherwise use the default 3000; ensure the same validated `port` value is
what gets passed into prod.port or server config.
In `@apps/frontend-vike/components/Link.vue`:
- Around line 2-16: The anchor is not getting the href attribute and the
computed isActive uses startsWith unsafely; update the Link.vue component to
bind the incoming href onto the <a> (e.g., pass href from useAttrs to the anchor
element) and make isActive robust by checking href is a string before using
startsWith (or coerce to a string/fallback to "/" when missing) — update
references to useAttrs(), the href variable, the isActive computed, and the
rendered <a> so the link is navigable and urlPathname.startsWith(href) is only
called when href is a valid string.
In `@apps/frontend-vike/components/Logo.vue`:
- Around line 3-4: The logo link in the Logo.vue component contains an image
with no accessible name; add an explicit accessible label by providing a
meaningful alt attribute on the <img> (e.g., alt="YourAppName logo") or, if
decorative, use alt="" plus an appropriate aria-label on the <a> to name the
link; update the <img> inside the anchor (<a href="/">) so screen readers
announce the link correctly.
In `@apps/frontend-vike/pages/star-wars/`@id/+data.ts:
- Around line 13-15: The fetch of the film JSON using pageContext.routeParams.id
should validate the HTTP response before calling response.json(); update the
logic around the fetch (the response variable and the subsequent assignment to
movie) to check response.ok and handle non-OK responses (e.g., throw a
meaningful error or return a 404/undefined result) so invalid or non-existent
IDs don't cause a JSON parsing exception; reference the fetch call using
`pageContext.routeParams.id`, the `response` variable, and the `movie`
assignment in +data.ts to locate and update the code.
In `@apps/frontend-vike/pages/star-wars/index/`+data.ts:
- Around line 12-14: The code calls response.json() without checking response.ok
which can mask upstream failures; before parsing, check response.ok for the
fetch to "https://brillout.github.io/star-wars/api/films.json" (the response
variable) and if not ok throw or return a deterministic error containing status
and statusText so SSR can fail clearly; only call response.json() to populate
moviesData when response.ok is true.
In `@apps/frontend-vike/pages/todo/TodoList.vue`:
- Around line 34-47: submitNewTodo currently mutates todoItems (optimistic add)
before the POST completes and never checks response.ok or catches network
errors; wrap the fetch call in try/catch and either (a) perform the optimistic
push but record a reference/index to the pushed item and on non-ok response or
thrown error remove/rollback that item and restore newTodo.value (and surface an
error), or (b) only push to todoItems after a successful response; implement
checking of response.ok (and parse error body if needed) and ensure
newTodo.value is cleared only on success, referencing submitNewTodo, todoItems
and newTodo in your changes.
In `@apps/frontend-vike/README.md`:
- Around line 1-5: Update the README bootstrap command to reflect the migrated
backend by replacing the `--hono` flag with `--elysia` in the generated pnpm
create vike command; locate the command line in apps/frontend-vike/README.md
(the line containing "pnpm create vike@latest --vue --tailwindcss --hono
--sentry --storybook") and change `--hono` to `--elysia` so the documented
bootstrap matches the current backend choice.
In `@apps/frontend-vike/server/middlewares/create-todo-handler.ts`:
- Line 7: The handler currently calls request.json() unconditionally (newTodo)
which will throw on GET/no-body or malformed JSON; update the request handling
in the createTodo handler to first branch on request.method (allow POST and
optionally handle GET separately) and return 405 for other methods, then only
call await request.json() for POST requests; also wrap the JSON parse in a
try/catch to return a 400 with a clear message for invalid/missing JSON and
validate the parsed shape (e.g., ensure text is a non-empty string) before
proceeding.
- Line 10: The console.log in the create-todo handler is printing raw user input
(newTodo) which can leak sensitive text; update the logging in the function that
handles creating todos (referencing newTodo) to either remove the log entirely
or log only safe metadata such as the todo id and character length (e.g.,
newTodo.id and newTodo.text.length) or a sanitized flag; ensure no raw
newTodo.text or full payload is written to logs.
In `@apps/frontend-vike/stories/Button.vue`:
- Around line 32-34: The click emitter is currently sending a hardcoded value
instead of the real event/context; find the defineEmits declaration and every
place using emit (the emit(...) calls near the current defineEmits and the
handler around lines referenced) and change emit('click', 1) to emit('click',
id) or emit('click', eventId) (or pass the incoming event parameter) so the
actual id/event is forwarded; ensure the variable you pass matches the handler
parameter name (e.g., use the click handler's id or event argument) and update
both occurrences mentioned.
In `@apps/frontend-vike/stories/Configure.mdx`:
- Around line 50-218: Anchors using target="_blank" (e.g., the <a> elements with
className="sb-action-link" and other anchor tags in this MDX like the ones
alongside RightArrow) lack rel="noopener noreferrer"; update every external
anchor that opens a new tab to include rel="noopener noreferrer" to ensure
proper tab isolation and security — search for occurrences of target="_blank" in
this file and add rel="noopener noreferrer" to each matching <a> element.
In `@apps/frontend-vike/stories/Header.stories.ts`:
- Around line 19-29: The story template currently only passes the user prop and
doesn't bind the emitted events to the action handlers (args.onLogin,
args.onLogout, args.onCreateAccount), so the handlers never run; update the
template string (the template property in this file) to add event listeners that
forward component emits to the story args (e.g., bind `@login` to args.onLogin,
`@logout` to args.onLogout, and the component's createAccount emit to
args.onCreateAccount using kebab-case if necessary) so the action handlers are
invoked when the component emits those events.
In `@apps/frontend-vike/vite.config.ts`:
- Around line 22-24: The build config currently sets sourcemap: true which
exposes client source maps publicly; change the Vite build option by updating
the build.sourcemap value from true to "hidden" so sourcemaps are generated but
not referenced in output (allowing the Sentry plugin to upload them privately);
locate the build block that contains build.sourcemap in vite.config.ts and
replace the boolean with the string "hidden".
---
Nitpick comments:
In `@apps/frontend-vike/.env.example`:
- Around line 13-15: Reorder the two Sentry env keys so they are alphabetized:
place PUBLIC_ENV__SENTRY_DSN above SENTRY_DSN in the .env.example; ensure the
comment “# Sentry DNS. Used for Error Reporting in the Browser” stays with the
PUBLIC_ENV__SENTRY_DSN entry (or is updated to remain correct) and no other
lines are changed. Reference keys: PUBLIC_ENV__SENTRY_DSN and SENTRY_DSN.
In `@apps/frontend-vike/.gitignore`:
- Around line 248-250: The .gitignore currently ignores the entire test/
directory which will untrack legitimate frontend tests; open
apps/frontend-vike/.gitignore and remove the broad "test/" entry (or replace it
with a more specific pattern or scoped path) and if you need to ignore generated
test artifacts add explicit patterns or negation rules (e.g., leave actual test
files with !test/**) so that real test sources under test/ remain tracked.
In `@apps/frontend-vike/package.json`:
- Around line 16-21: Confirm whether the Hono packages are unused: search the
codebase for imports/usages of "@vikejs/hono", "hono", "createHono", or "Hono"
and also check for "@vikejs/elysia"/"Elysia" references to validate the
migration; if no hits, remove the "@vikejs/hono" and "hono" entries from
package.json, delete or regenerate lockfiles (package-lock.json / yarn.lock /
pnpm-lock.yaml) by reinstalling dependencies, run the project build/tests to
ensure nothing breaks, and if any imports remain replace them with the new
Elysia equivalents (update code references that use createHono/Hono to the
corresponding Elysia APIs) before committing.
In `@apps/frontend-vike/pages/`+onPageTransitionStart.ts:
- Around line 6-7: Remove the two console.log debug statements from the page
transition handler (+onPageTransitionStart.ts) so they don't run in production;
either delete them or replace them with a conditional logging call to your app
logger (e.g., use a logging utility or feature-flagged debug logger) that checks
an environment flag before emitting messages, and if you replace them ensure any
retained log references still use the pageContext.isBackwardNavigation
identifier for context.
- Line 5: The function onPageTransitionStart is marked async but contains no
awaits; remove the unnecessary async keyword from the function declaration
(export async function onPageTransitionStart(...) -> export function
onPageTransitionStart(...)) so it becomes a plain synchronous function, ensuring
any callers expecting a Promise still handle the returned value if needed and
verifying there are no await-dependent behaviors inside onPageTransitionStart.
In `@apps/frontend-vike/pages/star-wars/index/`+Page.vue:
- Line 5: Replace the string-concatenation href binding in the template (the
:href="'/star-wars/' + item.id" expression) with a template literal for
readability and consistency; update the binding to use backtick interpolation
(e.g., `\`/star-wars/${item.id}\``) while keeping the rest of the anchor
unchanged so it still renders {{ item.title }} and {{ item.release_date }}.
In `@apps/frontend-vike/stories/button.css`:
- Around line 1-30: Add explicit keyboard focus styles for the button base and
each variant so keyboard users and Storybook tests get a consistent visible
focus ring: update .storybook-button to include a :focus and :focus-visible rule
(e.g., outline or box-shadow) and ensure .storybook-button--primary,
.storybook-button--secondary, .storybook-button--small,
.storybook-button--medium, and .storybook-button--large either inherit or define
matching focus styling so the visual contrast is sufficient across variants; use
the existing class names (.storybook-button and .storybook-button--*) to locate
where to add these focus rules.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 29d99911-76ee-4ef9-ad94-da396d4d56a7
⛔ Files ignored due to path filters (17)
apps/frontend-vike/assets/logo.svgis excluded by!**/*.svgapps/frontend-vike/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlapps/frontend-vike/stories/assets/accessibility.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/accessibility.svgis excluded by!**/*.svgapps/frontend-vike/stories/assets/addon-library.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/assets.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/context.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/discord.svgis excluded by!**/*.svgapps/frontend-vike/stories/assets/docs.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/figma-plugin.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/github.svgis excluded by!**/*.svgapps/frontend-vike/stories/assets/share.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/styling.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/testing.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/theming.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/tutorials.svgis excluded by!**/*.svgapps/frontend-vike/stories/assets/youtube.svgis excluded by!**/*.svg
📒 Files selected for processing (54)
apps/frontend-vike/+server.tsapps/frontend-vike/.env.exampleapps/frontend-vike/.env.sentry-build-pluginapps/frontend-vike/.gitignoreapps/frontend-vike/.storybook/main.tsapps/frontend-vike/.storybook/preview.tsapps/frontend-vike/README.mdapps/frontend-vike/TODO.mdapps/frontend-vike/components/Content.vueapps/frontend-vike/components/Counter.vueapps/frontend-vike/components/Link.vueapps/frontend-vike/components/Logo.vueapps/frontend-vike/components/Sidebar.vueapps/frontend-vike/package.jsonapps/frontend-vike/pages/+Head.vueapps/frontend-vike/pages/+Layout.vueapps/frontend-vike/pages/+config.tsapps/frontend-vike/pages/+headHtmlEnd.tsapps/frontend-vike/pages/+onCreateApp.tsapps/frontend-vike/pages/+onPageTransitionEnd.tsapps/frontend-vike/pages/+onPageTransitionStart.tsapps/frontend-vike/pages/_error/+Page.vueapps/frontend-vike/pages/index/+Page.vueapps/frontend-vike/pages/sentry/+Page.vueapps/frontend-vike/pages/star-wars/@id/+Page.vueapps/frontend-vike/pages/star-wars/@id/+data.tsapps/frontend-vike/pages/star-wars/index/+Page.vueapps/frontend-vike/pages/star-wars/index/+data.tsapps/frontend-vike/pages/star-wars/types.tsapps/frontend-vike/pages/tailwind.cssapps/frontend-vike/pages/todo/+Page.vueapps/frontend-vike/pages/todo/+data.tsapps/frontend-vike/pages/todo/TodoList.vueapps/frontend-vike/pnpm-workspace.yamlapps/frontend-vike/sentry.browser.config.tsapps/frontend-vike/server/elysia.tsapps/frontend-vike/server/hono.tsapps/frontend-vike/server/middlewares/create-todo-handler.tsapps/frontend-vike/server/middlewares/setting-injector.tsapps/frontend-vike/server/settings/env.tsapps/frontend-vike/stories/Button.stories.tsapps/frontend-vike/stories/Button.vueapps/frontend-vike/stories/Configure.mdxapps/frontend-vike/stories/Header.stories.tsapps/frontend-vike/stories/Header.vueapps/frontend-vike/stories/Page.stories.tsapps/frontend-vike/stories/Page.vueapps/frontend-vike/stories/assets/avif-test-image.avifapps/frontend-vike/stories/button.cssapps/frontend-vike/stories/header.cssapps/frontend-vike/stories/page.cssapps/frontend-vike/tsconfig.jsonapps/frontend-vike/vite.config.tsapps/frontend-vike/vitest.shims.d.ts
| import type { Server } from "vike/types"; | ||
| import { app } from "./server/elysia"; | ||
|
|
||
| const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000; |
There was a problem hiding this comment.
Validate PORT before assigning it to server config.
Line 4 can produce NaN for invalid env values, which propagates into prod.port.
Proposed fix
-const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;
+const parsedPort = Number(process.env.PORT);
+const port =
+ Number.isInteger(parsedPort) && parsedPort > 0 && parsedPort <= 65535
+ ? parsedPort
+ : 3000;📝 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
| const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000; | |
| const parsedPort = Number(process.env.PORT); | |
| const port = | |
| Number.isInteger(parsedPort) && parsedPort > 0 && parsedPort <= 65535 | |
| ? parsedPort | |
| : 3000; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/frontend-vike/`+server.ts at line 4, The PORT environment value may
parse to NaN and propagate into prod.port; update the code that sets the port
(the const port assignment using process.env.PORT and parseInt) to validate the
parsed value and fall back to 3000 when invalid: parse process.env.PORT, check
Number.isInteger(parsedPort) && parsedPort > 0 (or Number.isFinite and >0) and
only then assign parsedPort to port, otherwise use the default 3000; ensure the
same validated `port` value is what gets passed into prod.port or server config.
Comment on lines
+32
to
+34
| const emit = defineEmits<{ | ||
| (e: 'click', id: number): void; | ||
| }>(); |
There was a problem hiding this comment.
Emit the actual click event instead of a hardcoded value.
Current implementation always emits 1, which discards event context for consumers.
Suggested patch
const emit = defineEmits<{
- (e: 'click', id: number): void;
+ (e: 'click', event: MouseEvent): void;
}>();
@@
-const onClick = () => {
- emit('click', 1);
+const onClick = (event: MouseEvent) => {
+ emit('click', event);
};Also applies to: 47-49
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/frontend-vike/stories/Button.vue` around lines 32 - 34, The click
emitter is currently sending a hardcoded value instead of the real
event/context; find the defineEmits declaration and every place using emit (the
emit(...) calls near the current defineEmits and the handler around lines
referenced) and change emit('click', 1) to emit('click', id) or emit('click',
eventId) (or pass the incoming event parameter) so the actual id/event is
forwarded; ensure the variable you pass matches the handler parameter name
(e.g., use the click handler's id or event argument) and update both occurrences
mentioned.
Comment on lines
+50
to
+218
| <a | ||
| className="sb-action-link" | ||
| href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=vue3&ref=configure" | ||
| target="_blank" | ||
| >Learn more<RightArrow /></a> | ||
| </div> | ||
| <div className="sb-section-item"> | ||
| <img | ||
| src={Context} | ||
| alt="An abstraction representing the composition of data for a component" | ||
| /> | ||
| <h4 className="sb-section-item-heading">Provide context and mocking</h4> | ||
| <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p> | ||
| <a | ||
| className="sb-action-link" | ||
| href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=vue3&ref=configure#context-for-mocking" | ||
| target="_blank" | ||
| >Learn more<RightArrow /></a> | ||
| </div> | ||
| <div className="sb-section-item"> | ||
| <img src={Assets} alt="A representation of typography and image assets" /> | ||
| <div> | ||
| <h4 className="sb-section-item-heading">Load assets and resources</h4> | ||
| <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the | ||
| `staticDirs` configuration option to specify folders to load when | ||
| starting Storybook.</p> | ||
| <a | ||
| className="sb-action-link" | ||
| href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=vue3&ref=configure" | ||
| target="_blank" | ||
| >Learn more<RightArrow /></a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="sb-container"> | ||
| <div className='sb-section-title'> | ||
| # Do more with Storybook | ||
|
|
||
| Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. | ||
| </div> | ||
|
|
||
| <div className="sb-section"> | ||
| <div className="sb-features-grid"> | ||
| <div className="sb-grid-item"> | ||
| <img src={Docs} alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated" /> | ||
| <h4 className="sb-section-item-heading">Autodocs</h4> | ||
| <p className="sb-section-item-paragraph">Auto-generate living, | ||
| interactive reference documentation from your components and stories.</p> | ||
| <a | ||
| className="sb-action-link" | ||
| href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=vue3&ref=configure" | ||
| target="_blank" | ||
| >Learn more<RightArrow /></a> | ||
| </div> | ||
| <div className="sb-grid-item"> | ||
| <img src={Share} alt="A browser window showing a Storybook being published to a chromatic.com URL" /> | ||
| <h4 className="sb-section-item-heading">Publish to Chromatic</h4> | ||
| <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p> | ||
| <a | ||
| className="sb-action-link" | ||
| href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=vue3&ref=configure#publish-storybook-with-chromatic" | ||
| target="_blank" | ||
| >Learn more<RightArrow /></a> | ||
| </div> | ||
| <div className="sb-grid-item"> | ||
| <img src={FigmaPlugin} alt="Windows showing the Storybook plugin in Figma" /> | ||
| <h4 className="sb-section-item-heading">Figma Plugin</h4> | ||
| <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live | ||
| implementation in one place.</p> | ||
| <a | ||
| className="sb-action-link" | ||
| href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=vue3&ref=configure#embed-storybook-in-figma-with-the-plugin" | ||
| target="_blank" | ||
| >Learn more<RightArrow /></a> | ||
| </div> | ||
| <div className="sb-grid-item"> | ||
| <img src={Testing} alt="Screenshot of tests passing and failing" /> | ||
| <h4 className="sb-section-item-heading">Testing</h4> | ||
| <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how | ||
| complex.</p> | ||
| <a | ||
| className="sb-action-link" | ||
| href="https://storybook.js.org/docs/writing-tests/?renderer=vue3&ref=configure" | ||
| target="_blank" | ||
| >Learn more<RightArrow /></a> | ||
| </div> | ||
| <div className="sb-grid-item"> | ||
| <img src={Accessibility} alt="Screenshot of accessibility tests passing and failing" /> | ||
| <h4 className="sb-section-item-heading">Accessibility</h4> | ||
| <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p> | ||
| <a | ||
| className="sb-action-link" | ||
| href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=vue3&ref=configure" | ||
| target="_blank" | ||
| >Learn more<RightArrow /></a> | ||
| </div> | ||
| <div className="sb-grid-item"> | ||
| <img src={Theming} alt="Screenshot of Storybook in light and dark mode" /> | ||
| <h4 className="sb-section-item-heading">Theming</h4> | ||
| <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p> | ||
| <a | ||
| className="sb-action-link" | ||
| href="https://storybook.js.org/docs/configure/theming/?renderer=vue3&ref=configure" | ||
| target="_blank" | ||
| >Learn more<RightArrow /></a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className='sb-addon'> | ||
| <div className='sb-addon-text'> | ||
| <h4>Addons</h4> | ||
| <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p> | ||
| <a | ||
| className="sb-action-link" | ||
| href="https://storybook.js.org/addons/?ref=configure" | ||
| target="_blank" | ||
| >Discover all addons<RightArrow /></a> | ||
| </div> | ||
| <div className='sb-addon-img'> | ||
| <img src={AddonLibrary} alt="Integrate your tools with Storybook to connect workflows." /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="sb-section sb-socials"> | ||
| <div className="sb-section-item"> | ||
| <img src={Github} alt="Github logo" className="sb-explore-image"/> | ||
| Join our contributors building the future of UI development. | ||
|
|
||
| <a | ||
| className="sb-action-link" | ||
| href="https://github.com/storybookjs/storybook" | ||
| target="_blank" | ||
| >Star on GitHub<RightArrow /></a> | ||
| </div> | ||
| <div className="sb-section-item"> | ||
| <img src={Discord} alt="Discord logo" className="sb-explore-image"/> | ||
| <div> | ||
| Get support and chat with frontend developers. | ||
|
|
||
| <a | ||
| className="sb-action-link" | ||
| href="https://discord.gg/storybook" | ||
| target="_blank" | ||
| >Join Discord server<RightArrow /></a> | ||
| </div> | ||
| </div> | ||
| <div className="sb-section-item"> | ||
| <img src={Youtube} alt="Youtube logo" className="sb-explore-image"/> | ||
| <div> | ||
| Watch tutorials, feature previews and interviews. | ||
|
|
||
| <a | ||
| className="sb-action-link" | ||
| href="https://www.youtube.com/@chromaticui" | ||
| target="_blank" | ||
| >Watch on YouTube<RightArrow /></a> | ||
| </div> | ||
| </div> | ||
| <div className="sb-section-item"> | ||
| <img src={Tutorials} alt="A book" className="sb-explore-image"/> | ||
| <p>Follow guided walkthroughs on for key workflows.</p> | ||
|
|
||
| <a | ||
| className="sb-action-link" | ||
| href="https://storybook.js.org/tutorials/?ref=configure" | ||
| target="_blank" | ||
| >Discover tutorials<RightArrow /></a> |
There was a problem hiding this comment.
Add rel="noopener noreferrer" to all external _blank links.
Multiple anchors open new tabs with target="_blank" but omit rel, which weakens tab isolation.
Suggested pattern (apply to each external link)
- target="_blank"
+ target="_blank"
+ rel="noopener noreferrer"📝 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
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=vue3&ref=configure" | |
| target="_blank" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-section-item"> | |
| <img | |
| src={Context} | |
| alt="An abstraction representing the composition of data for a component" | |
| /> | |
| <h4 className="sb-section-item-heading">Provide context and mocking</h4> | |
| <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=vue3&ref=configure#context-for-mocking" | |
| target="_blank" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-section-item"> | |
| <img src={Assets} alt="A representation of typography and image assets" /> | |
| <div> | |
| <h4 className="sb-section-item-heading">Load assets and resources</h4> | |
| <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the | |
| `staticDirs` configuration option to specify folders to load when | |
| starting Storybook.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=vue3&ref=configure" | |
| target="_blank" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="sb-container"> | |
| <div className='sb-section-title'> | |
| # Do more with Storybook | |
| Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. | |
| </div> | |
| <div className="sb-section"> | |
| <div className="sb-features-grid"> | |
| <div className="sb-grid-item"> | |
| <img src={Docs} alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated" /> | |
| <h4 className="sb-section-item-heading">Autodocs</h4> | |
| <p className="sb-section-item-paragraph">Auto-generate living, | |
| interactive reference documentation from your components and stories.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=vue3&ref=configure" | |
| target="_blank" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-grid-item"> | |
| <img src={Share} alt="A browser window showing a Storybook being published to a chromatic.com URL" /> | |
| <h4 className="sb-section-item-heading">Publish to Chromatic</h4> | |
| <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=vue3&ref=configure#publish-storybook-with-chromatic" | |
| target="_blank" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-grid-item"> | |
| <img src={FigmaPlugin} alt="Windows showing the Storybook plugin in Figma" /> | |
| <h4 className="sb-section-item-heading">Figma Plugin</h4> | |
| <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live | |
| implementation in one place.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=vue3&ref=configure#embed-storybook-in-figma-with-the-plugin" | |
| target="_blank" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-grid-item"> | |
| <img src={Testing} alt="Screenshot of tests passing and failing" /> | |
| <h4 className="sb-section-item-heading">Testing</h4> | |
| <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how | |
| complex.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/writing-tests/?renderer=vue3&ref=configure" | |
| target="_blank" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-grid-item"> | |
| <img src={Accessibility} alt="Screenshot of accessibility tests passing and failing" /> | |
| <h4 className="sb-section-item-heading">Accessibility</h4> | |
| <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=vue3&ref=configure" | |
| target="_blank" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-grid-item"> | |
| <img src={Theming} alt="Screenshot of Storybook in light and dark mode" /> | |
| <h4 className="sb-section-item-heading">Theming</h4> | |
| <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/configure/theming/?renderer=vue3&ref=configure" | |
| target="_blank" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className='sb-addon'> | |
| <div className='sb-addon-text'> | |
| <h4>Addons</h4> | |
| <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/addons/?ref=configure" | |
| target="_blank" | |
| >Discover all addons<RightArrow /></a> | |
| </div> | |
| <div className='sb-addon-img'> | |
| <img src={AddonLibrary} alt="Integrate your tools with Storybook to connect workflows." /> | |
| </div> | |
| </div> | |
| <div className="sb-section sb-socials"> | |
| <div className="sb-section-item"> | |
| <img src={Github} alt="Github logo" className="sb-explore-image"/> | |
| Join our contributors building the future of UI development. | |
| <a | |
| className="sb-action-link" | |
| href="https://github.com/storybookjs/storybook" | |
| target="_blank" | |
| >Star on GitHub<RightArrow /></a> | |
| </div> | |
| <div className="sb-section-item"> | |
| <img src={Discord} alt="Discord logo" className="sb-explore-image"/> | |
| <div> | |
| Get support and chat with frontend developers. | |
| <a | |
| className="sb-action-link" | |
| href="https://discord.gg/storybook" | |
| target="_blank" | |
| >Join Discord server<RightArrow /></a> | |
| </div> | |
| </div> | |
| <div className="sb-section-item"> | |
| <img src={Youtube} alt="Youtube logo" className="sb-explore-image"/> | |
| <div> | |
| Watch tutorials, feature previews and interviews. | |
| <a | |
| className="sb-action-link" | |
| href="https://www.youtube.com/@chromaticui" | |
| target="_blank" | |
| >Watch on YouTube<RightArrow /></a> | |
| </div> | |
| </div> | |
| <div className="sb-section-item"> | |
| <img src={Tutorials} alt="A book" className="sb-explore-image"/> | |
| <p>Follow guided walkthroughs on for key workflows.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/tutorials/?ref=configure" | |
| target="_blank" | |
| >Discover tutorials<RightArrow /></a> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=vue3&ref=configure" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-section-item"> | |
| <img | |
| src={Context} | |
| alt="An abstraction representing the composition of data for a component" | |
| /> | |
| <h4 className="sb-section-item-heading">Provide context and mocking</h4> | |
| <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=vue3&ref=configure#context-for-mocking" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-section-item"> | |
| <img src={Assets} alt="A representation of typography and image assets" /> | |
| <div> | |
| <h4 className="sb-section-item-heading">Load assets and resources</h4> | |
| <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the | |
| `staticDirs` configuration option to specify folders to load when | |
| starting Storybook.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=vue3&ref=configure" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="sb-container"> | |
| <div className='sb-section-title'> | |
| # Do more with Storybook | |
| Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. | |
| </div> | |
| <div className="sb-section"> | |
| <div className="sb-features-grid"> | |
| <div className="sb-grid-item"> | |
| <img src={Docs} alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated" /> | |
| <h4 className="sb-section-item-heading">Autodocs</h4> | |
| <p className="sb-section-item-paragraph">Auto-generate living, | |
| interactive reference documentation from your components and stories.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=vue3&ref=configure" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-grid-item"> | |
| <img src={Share} alt="A browser window showing a Storybook being published to a chromatic.com URL" /> | |
| <h4 className="sb-section-item-heading">Publish to Chromatic</h4> | |
| <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=vue3&ref=configure#publish-storybook-with-chromatic" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-grid-item"> | |
| <img src={FigmaPlugin} alt="Windows showing the Storybook plugin in Figma" /> | |
| <h4 className="sb-section-item-heading">Figma Plugin</h4> | |
| <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live | |
| implementation in one place.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=vue3&ref=configure#embed-storybook-in-figma-with-the-plugin" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-grid-item"> | |
| <img src={Testing} alt="Screenshot of tests passing and failing" /> | |
| <h4 className="sb-section-item-heading">Testing</h4> | |
| <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how | |
| complex.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/writing-tests/?renderer=vue3&ref=configure" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-grid-item"> | |
| <img src={Accessibility} alt="Screenshot of accessibility tests passing and failing" /> | |
| <h4 className="sb-section-item-heading">Accessibility</h4> | |
| <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=vue3&ref=configure" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| <div className="sb-grid-item"> | |
| <img src={Theming} alt="Screenshot of Storybook in light and dark mode" /> | |
| <h4 className="sb-section-item-heading">Theming</h4> | |
| <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/docs/configure/theming/?renderer=vue3&ref=configure" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Learn more<RightArrow /></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className='sb-addon'> | |
| <div className='sb-addon-text'> | |
| <h4>Addons</h4> | |
| <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/addons/?ref=configure" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Discover all addons<RightArrow /></a> | |
| </div> | |
| <div className='sb-addon-img'> | |
| <img src={AddonLibrary} alt="Integrate your tools with Storybook to connect workflows." /> | |
| </div> | |
| </div> | |
| <div className="sb-section sb-socials"> | |
| <div className="sb-section-item"> | |
| <img src={Github} alt="Github logo" className="sb-explore-image"/> | |
| Join our contributors building the future of UI development. | |
| <a | |
| className="sb-action-link" | |
| href="https://github.com/storybookjs/storybook" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Star on GitHub<RightArrow /></a> | |
| </div> | |
| <div className="sb-section-item"> | |
| <img src={Discord} alt="Discord logo" className="sb-explore-image"/> | |
| <div> | |
| Get support and chat with frontend developers. | |
| <a | |
| className="sb-action-link" | |
| href="https://discord.gg/storybook" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Join Discord server<RightArrow /></a> | |
| </div> | |
| </div> | |
| <div className="sb-section-item"> | |
| <img src={Youtube} alt="Youtube logo" className="sb-explore-image"/> | |
| <div> | |
| Watch tutorials, feature previews and interviews. | |
| <a | |
| className="sb-action-link" | |
| href="https://www.youtube.com/@chromaticui" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Watch on YouTube<RightArrow /></a> | |
| </div> | |
| </div> | |
| <div className="sb-section-item"> | |
| <img src={Tutorials} alt="A book" className="sb-explore-image"/> | |
| <p>Follow guided walkthroughs on for key workflows.</p> | |
| <a | |
| className="sb-action-link" | |
| href="https://storybook.js.org/tutorials/?ref=configure" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| >Discover tutorials<RightArrow /></a> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/frontend-vike/stories/Configure.mdx` around lines 50 - 218, Anchors
using target="_blank" (e.g., the <a> elements with className="sb-action-link"
and other anchor tags in this MDX like the ones alongside RightArrow) lack
rel="noopener noreferrer"; update every external anchor that opens a new tab to
include rel="noopener noreferrer" to ensure proper tab isolation and security —
search for occurrences of target="_blank" in this file and add rel="noopener
noreferrer" to each matching <a> element.
Comment on lines
+19
to
+29
| template: '<my-header :user="args.user" />', | ||
| }), | ||
| parameters: { | ||
| // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout | ||
| layout: 'fullscreen', | ||
| }, | ||
| args: { | ||
| onLogin: fn(), | ||
| onLogout: fn(), | ||
| onCreateAccount: fn(), | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -type f -name "Header.stories.ts" | head -20Repository: TeamBlackCrystal/task
Length of output: 112
🏁 Script executed:
git ls-files | grep -i header | grep -E "\.(ts|js|vue)$"Repository: TeamBlackCrystal/task
Length of output: 314
🏁 Script executed:
cat -n apps/frontend-vike/stories/Header.stories.tsRepository: TeamBlackCrystal/task
Length of output: 1558
🏁 Script executed:
cat -n apps/frontend-vike/stories/Header.vueRepository: TeamBlackCrystal/task
Length of output: 1920
🏁 Script executed:
rg -A 5 -B 5 "Storybook" apps/frontend-vike/stories/Header.stories.ts | head -30Repository: TeamBlackCrystal/task
Length of output: 47
🌐 Web query:
Storybook Vue 3 event handlers fn() actions binding
💡 Result:
Storybook + Vue 3: event handlers and “Actions” are wired via story args (Vue props), not by “binding” an fn to template events directly. Recommended pattern 1) Define the callback prop as an arg, using the Storybook test helper fn (or action). 2) Bind args into your Vue component with v-bind="args". 3) Ensure Actions addon is configured to recognize those callback args. Example (CSF 3) const meta = { component: Button, args: { // callback prop/event handler onClick: fn, }, }; export default meta; Then in the story render/template you pass args to the component (e.g., v-bind="args"). Storybook’s Actions docs say Actions work by supplying Storybook-generated mock functions to your story’s event handler args, and the recommended way is using the fn utility from storybook/test to spy on callback args [1]. Automatic binding of which args become actions In.storybook/preview.ts you can configure: export const parameters = { actions: { argTypesRegex: '^on.' }, }; This is documented as a way to automatically create actions for each argType whose name matches an on pattern [1]. Common gotcha: v-bind="$props" vs v-bind="args" If you previously used older patterns (like v-bind="$props") and Actions stopped working after migrating, refactoring the story to use the args-based approach (v-bind="args") is the fix reported by the community [2]. If you paste your exact Vue story (template + method/emit names), I can tell you the exact arg name (e.g., onClick vs on-input vs onMyEvent) to use so Actions logs correctly.
Citations:
- 1: https://storybook.js.org/docs/9/essentials/actions
- 2: Why did the v-bind="$props" stopped to work on Vue 3? storybookjs/storybook#23798
Bind event listeners to capture component emits so action handlers are actually triggered
Line 19 currently passes only user, leaving the action handlers defined on lines 26-28 unconnected. The component emits login, logout, and createAccount events but the template has no listeners for them.
Proposed fix
- template: '<my-header :user="args.user" />',
+ template: '<my-header :user="args.user" `@login`="args.onLogin" `@logout`="args.onLogout" `@createAccount`="args.onCreateAccount" />',🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/frontend-vike/stories/Header.stories.ts` around lines 19 - 29, The story
template currently only passes the user prop and doesn't bind the emitted events
to the action handlers (args.onLogin, args.onLogout, args.onCreateAccount), so
the handlers never run; update the template string (the template property in
this file) to add event listeners that forward component emits to the story args
(e.g., bind `@login` to args.onLogin, `@logout` to args.onLogout, and the
component's createAccount emit to args.onCreateAccount using kebab-case if
necessary) so the action handlers are invoked when the component emits those
events.
Comment on lines
+22
to
+24
| build: { | ||
| sourcemap: true | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Read the vite.config.ts file to see full context
cat -n apps/frontend-vike/vite.config.tsRepository: TeamBlackCrystal/task
Length of output: 1865
🏁 Script executed:
# Search for Sentry configuration in the project
rg -i "sentry" --type ts --type js --type json -B 2 -A 2Repository: TeamBlackCrystal/task
Length of output: 4720
🏁 Script executed:
# Check if there's any build output or deployment configuration that handles .map files
rg -i "\.map" --type ts --type js -B 2 -A 2Repository: TeamBlackCrystal/task
Length of output: 2813
🏁 Script executed:
# Look for any vite plugins or build configuration related to sourcemaps
rg "sourcemap" --type ts --type js -B 3 -A 3Repository: TeamBlackCrystal/task
Length of output: 771
Use hidden sourcemaps with Sentry to prevent exposing client source code publicly.
sourcemap: true generates sourcemaps that are publicly accessible to clients. With the Sentry plugin enabled, use sourcemap: "hidden" instead—this generates the .map files but doesn't reference them in the output bundles, allowing Sentry to upload them privately while keeping your source code unexposed.
Suggested change
build: {
- sourcemap: true
+ sourcemap: "hidden"
},📝 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
| build: { | |
| sourcemap: true | |
| }, | |
| build: { | |
| sourcemap: "hidden" | |
| }, |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/frontend-vike/vite.config.ts` around lines 22 - 24, The build config
currently sets sourcemap: true which exposes client source maps publicly; change
the Vite build option by updating the build.sourcemap value from true to
"hidden" so sourcemaps are generated but not referenced in output (allowing the
Sentry plugin to upload them privately); locate the build block that contains
build.sourcemap in vite.config.ts and replace the boolean with the string
"hidden".
Member
Author
|
現段階ではnuxtより起動早い |
Contributor
|
ほー |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#1 の解決に対するアプローチ案
ToDo(順不同)
Note
Summary by CodeRabbit
New Features
Documentation
Tests
Style
Chores