feat: add Vue template example and fix other folders#6
feat: add Vue template example and fix other folders#6pzanella wants to merge 2 commits intomoq-dev:mainfrom
Conversation
WalkthroughThis pull request adds Vue to the main README framework list and introduces a new vue-moq project: a Vue 3 + Vite scaffold with configuration (ESLint, Oxlint, TypeScript, Vite, .editorconfig, .gitattributes, .gitignore), package metadata, app entry, styles, and an App.vue demonstrating moq-watch and moq-publish. It also updates example projects (vite-5, vite-6, vite-7) and documentation to rename the moq-watch attribute from `path` to `name` and to add explicit width/height styling for watch and publish elements. 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 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: 3
🧹 Nitpick comments (3)
vue-moq/vite.config.ts (1)
5-5: Use Vite'sapply: 'serve'to explicitly limitvueDevTools()to the dev server.While
vite-plugin-vue-devtoolsv8.0.6 is designed to only run in development, explicitly gating it using Vite'sapplyproperty is the idiomatic way to ensure it never runs duringvite build.Apply plugin only during dev server
- plugins: [ - vue({ ... }), - vueDevTools(), - ], + plugins: [ + vue({ ... }), + { ...vueDevTools(), apply: 'serve' }, + ],Also applies to: 17-17
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@vue-moq/vite.config.ts` at line 5, The vueDevTools plugin is currently imported and used without restricting it to the dev server; update the plugin invocation (vueDevTools) in the Vite config so it is applied only during serve by passing apply: 'serve' (e.g., use vueDevTools({ apply: 'serve' }) or wrap the plugin entry with { ...vueDevTools(), apply: 'serve' } as appropriate) to ensure it never runs during vite build.vue-moq/src/App.vue (1)
30-31: Empty<style scoped>block can be removed.No styles are defined — the block is just scaffold noise.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@vue-moq/src/App.vue` around lines 30 - 31, Remove the empty <style scoped> block from App.vue since it contains no CSS; locate the <style scoped>...</style> tag pair in the file and delete it (ensuring you don't remove other blocks like <script> or <template>), and save the file without leaving an empty or dangling style tag.vue-moq/index.html (1)
7-7: Consider updating the generic page title.
"Vite App"is the default scaffold title. Since this is a template example meant to demonstrate MoQ usage, a more descriptive title like"MoQ + Vue"would be clearer for users cloning the example.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@vue-moq/index.html` at line 7, Update the HTML document title element to something descriptive for this template example: locate the <title> element in index.html (currently "Vite App") and replace its content with a more specific label such as "MoQ + Vue" so the page title accurately reflects the project's purpose.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@vue-moq/index.html`:
- Line 2: The html root element currently has an empty lang attribute which
hurts accessibility; update the <html> element in index.html to set a valid
language code (for example set lang="en") so screen readers and search engines
can detect page language correctly.
In `@vue-moq/README.md`:
- Line 36: Update the README entry for the <moq-watch> element to reflect the
component API change: replace references to the `path` attribute with `name`
(e.g., list of attributes should be `url`, `name`, `muted`, `paused`, `volume`,
`jitter`), and update any example usages or descriptions to use `name` instead
of `path` so the docs match the implementation in App.vue and related
components.
In `@vue-moq/src/style.css`:
- Around line 6-11: Remove the unexpected empty line before the root
declarations and normalize the keyword casing: delete the blank line immediately
before the font-synthesis declaration so there is no empty line between
background-color and font-synthesis (addressing declaration-empty-line-before
for font-synthesis), and change the text-rendering value from optimizeLegibility
to the lowercase optimizelegibility to satisfy value-keyword-case; confirm other
root properties like color-scheme and background-color remain unchanged.
---
Nitpick comments:
In `@vue-moq/index.html`:
- Line 7: Update the HTML document title element to something descriptive for
this template example: locate the <title> element in index.html (currently "Vite
App") and replace its content with a more specific label such as "MoQ + Vue" so
the page title accurately reflects the project's purpose.
In `@vue-moq/src/App.vue`:
- Around line 30-31: Remove the empty <style scoped> block from App.vue since it
contains no CSS; locate the <style scoped>...</style> tag pair in the file and
delete it (ensuring you don't remove other blocks like <script> or <template>),
and save the file without leaving an empty or dangling style tag.
In `@vue-moq/vite.config.ts`:
- Line 5: The vueDevTools plugin is currently imported and used without
restricting it to the dev server; update the plugin invocation (vueDevTools) in
the Vite config so it is applied only during serve by passing apply: 'serve'
(e.g., use vueDevTools({ apply: 'serve' }) or wrap the plugin entry with {
...vueDevTools(), apply: 'serve' } as appropriate) to ensure it never runs
during vite build.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
vue-moq/package-lock.jsonis excluded by!**/package-lock.jsonvue-moq/public/favicon.icois excluded by!**/*.ico
📒 Files selected for processing (23)
README.mdvite-5/README.mdvite-5/src/App.tsxvite-6/README.mdvite-6/src/App.tsxvite-7/README.mdvite-7/src/App.tsxvue-moq/.editorconfigvue-moq/.gitattributesvue-moq/.gitignorevue-moq/.oxlintrc.jsonvue-moq/README.mdvue-moq/env.d.tsvue-moq/eslint.config.tsvue-moq/index.htmlvue-moq/package.jsonvue-moq/src/App.vuevue-moq/src/main.tsvue-moq/src/style.cssvue-moq/tsconfig.app.jsonvue-moq/tsconfig.jsonvue-moq/tsconfig.node.jsonvue-moq/vite.config.ts
| color-scheme: light dark; | ||
| color: rgba(255, 255, 255, 0.87); | ||
| background-color: #242424; | ||
|
|
||
| font-synthesis: none; | ||
| text-rendering: optimizeLegibility; |
There was a problem hiding this comment.
Fix stylelint violations in root declarations.
Line 6 and Line 10 trigger declaration-empty-line-before, and Line 11 violates value-keyword-case (optimizeLegibility → optimizelegibility).
🔧 Proposed lint-fix diff
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
-
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: `#242424`;
-
font-synthesis: none;
- text-rendering: optimizeLegibility;
+ text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}📝 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.
| color-scheme: light dark; | |
| color: rgba(255, 255, 255, 0.87); | |
| background-color: #242424; | |
| font-synthesis: none; | |
| text-rendering: optimizeLegibility; | |
| color-scheme: light dark; | |
| color: rgba(255, 255, 255, 0.87); | |
| background-color: `#242424`; | |
| font-synthesis: none; | |
| text-rendering: optimizelegibility; |
🧰 Tools
🪛 Stylelint (17.3.0)
[error] 6-6: Unexpected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 10-10: Unexpected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 11-11: Expected "optimizeLegibility" to be "optimizelegibility" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@vue-moq/src/style.css` around lines 6 - 11, Remove the unexpected empty line
before the root declarations and normalize the keyword casing: delete the blank
line immediately before the font-synthesis declaration so there is no empty line
between background-color and font-synthesis (addressing
declaration-empty-line-before for font-synthesis), and change the text-rendering
value from optimizeLegibility to the lowercase optimizelegibility to satisfy
value-keyword-case; confirm other root properties like color-scheme and
background-color remain unchanged.
There was a problem hiding this comment.
♻️ Duplicate comments (2)
vue-moq/index.html (1)
2-2:lang="en"correctly set.The previously flagged empty
langattribute has been fixed.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@vue-moq/index.html` at line 2, The HTML root element's language is correctly set (html lang attribute) so keep the lang="en" change, remove the stray duplicate review token "[duplicate_comment]" from this file/commit message, and verify there are no other empty lang attributes elsewhere in the markup.vue-moq/src/style.css (1)
9-9:⚠️ Potential issue | 🟡 MinorRemaining Stylelint
value-keyword-caseviolation —optimizeLegibilitymust be lowercase.The
declaration-empty-line-beforeissues from the previous review are resolved, buttext-rendering: optimizeLegibilitystill fails Stylelint'svalue-keyword-caserule.🔧 Proposed fix
- text-rendering: optimizeLegibility; + text-rendering: optimizelegibility;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@vue-moq/src/style.css` at line 9, The CSS declaration uses a capitalized keyword: change the text-rendering property value from "optimizeLegibility" to the lowercase "optimizelegibility" (or use the canonical lowercase "optimize-legibility" if your linter/project expects that form) to satisfy Stylelint's value-keyword-case rule; update the declaration in the style.css file where the rule appears (text-rendering property) so the keyword is fully lowercase.
🧹 Nitpick comments (1)
vue-moq/index.html (1)
7-7: Update the generic scaffold title.
"Vite App"is the Vite default placeholder; replace it with something that describes the project (e.g.,"vue-moq").✏️ Proposed fix
- <title>Vite App</title> + <title>vue-moq</title>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@vue-moq/index.html` at line 7, The HTML title currently uses the Vite default placeholder "Vite App"; update the <title> element in index.html to a project-appropriate name such as "vue-moq" by replacing the existing text content inside the title tag so the page metadata reflects the project.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@vue-moq/index.html`:
- Line 2: The HTML root element's language is correctly set (html lang
attribute) so keep the lang="en" change, remove the stray duplicate review token
"[duplicate_comment]" from this file/commit message, and verify there are no
other empty lang attributes elsewhere in the markup.
In `@vue-moq/src/style.css`:
- Line 9: The CSS declaration uses a capitalized keyword: change the
text-rendering property value from "optimizeLegibility" to the lowercase
"optimizelegibility" (or use the canonical lowercase "optimize-legibility" if
your linter/project expects that form) to satisfy Stylelint's value-keyword-case
rule; update the declaration in the style.css file where the rule appears
(text-rendering property) so the keyword is fully lowercase.
---
Nitpick comments:
In `@vue-moq/index.html`:
- Line 7: The HTML title currently uses the Vite default placeholder "Vite App";
update the <title> element in index.html to a project-appropriate name such as
"vue-moq" by replacing the existing text content inside the title tag so the
page metadata reflects the project.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
vue-moq/README.mdvue-moq/index.htmlvue-moq/src/style.css
🚧 Files skipped from review as they are similar to previous changes (1)
- vue-moq/README.md
1 participant
Add Vue template example and fix configurations across all project folders.