fix(compiler-sfc): check lang before attempt to compile script #13508

alex-snezhko · 2025-06-21T02:56:07Z

Move the logic to avoid compilation if the script is not JS or TS before the file is actually attempted to be compiled.

I tested with a similar example to the reproduction link given in the issue:

App.vue:

<script lang="coffee">
export default
  data: ->
    count: 0

  methods:
    increment: ->
      @count += 1
</script>

<template>
  <button type="button" @click="increment">Count: {{ count }}</button>
</template>

vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import CoffeeScript from "coffeescript"
import * as sfcCompiler from "<locally built SFC compiler path>"

export default defineConfig({
  plugins: [
    vue({ compiler: sfcCompiler }),
    {
      name: 'coffee_compile',
      transform: (src, id) => {
        // compile coffee files to js
        if (/\.coffee$/.test(id)) {
          const { js, sourceMap } = CoffeeScript.compile(src, { sourceMap: true })
          return { code: js, map: sourceMap }
        }
      }
    }
  ],
})

Builds and functions as expected:

Summary by CodeRabbit

New Features
- Improved handling of script blocks with unrecognized language attributes, ensuring unsupported languages are preserved as-is and not processed.
Bug Fixes
- Prevented unnecessary processing of non-JavaScript/TypeScript script blocks.
Refactor
- Centralized language detection logic for scripts, streamlining checks for JavaScript and TypeScript.
Tests
- Added a test to verify correct behavior with unsupported script languages.

coderabbitai · 2025-06-21T02:56:14Z

Walkthrough

The changes introduce utility functions to detect JavaScript and TypeScript script blocks, refactor the script language detection logic, and ensure that non-JS/TS scripts (such as CoffeeScript) are returned unprocessed. Tests are added to verify that unsupported script languages are preserved verbatim and not parsed or transformed.

Changes

Files/Groups	Change Summary
packages/compiler-sfc/src/script/utils.ts	Added `isJS` and `isTS` utility functions for language detection.
packages/compiler-sfc/src/compileScript.ts, src/script/context.ts	Refactored language detection to use new utility functions; deferred context creation for non-JS/TS scripts.
packages/compiler-sfc/src/script/normalScript.ts	Removed early return for non-JS/TS scripts, aligning with new detection logic.
packages/compiler-sfc/tests/compileScript.spec.ts	Added test to verify handling of scripts with unrecognized language attributes.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant compileScript
    participant isJS/isTS utils
    participant ScriptCompileContext

    User->>compileScript: Call with SFC containing <script lang="coffee">
    compileScript->>isJS/isTS utils: Check if lang is JS/TS
    isJS/isTS utils-->>compileScript: Return false
    compileScript-->>User: Return script block verbatim (no context created)

Assessment against linked issues

Objective	Addressed	Explanation
Preserve and do not parse/transform custom script languages (e.g., CoffeeScript) in SFCs (#8368)	✅
Ensure compileScript returns the original script for unsupported languages, avoiding syntax errors (#8368)	✅
Add/verify tests for correct handling of non-JS/TS script blocks (#8368)	✅

Suggested labels

ready to merge, scope: sfc

Poem

In the garden of scripts, a new path we see,
Coffee and others now roam wild and free.
No longer parsed by a JS-only gate,
Each language preserved, its own special fate.
The bunny hops on, with a satisfied grin—
All scripts are welcome, let compilation begin!
☕🐇

📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 5f8314c and 5b3d26c.

📒 Files selected for processing (5)

packages/compiler-sfc/__tests__/compileScript.spec.ts (1 hunks)
packages/compiler-sfc/src/compileScript.ts (3 hunks)
packages/compiler-sfc/src/script/context.ts (2 hunks)
packages/compiler-sfc/src/script/normalScript.ts (0 hunks)
packages/compiler-sfc/src/script/utils.ts (1 hunks)

💤 Files with no reviewable changes (1)

packages/compiler-sfc/src/script/normalScript.ts

🧰 Additional context used

🧬 Code Graph Analysis (2)

packages/compiler-sfc/src/compileScript.ts (2)

packages/compiler-sfc/src/script/utils.ts (2)

isJS (125-126)

isTS (127-128)

packages/compiler-sfc/src/script/context.ts (1)

ScriptCompileContext (14-151)

packages/compiler-sfc/src/script/context.ts (1)

packages/compiler-sfc/src/script/utils.ts (2)

isJS (125-126)

isTS (127-128)

⏰ Context from checks skipped due to timeout of 90000ms (7)

GitHub Check: Redirect rules
GitHub Check: Header rules
GitHub Check: Pages changed
GitHub Check: test / lint-and-test-dts
GitHub Check: test / unit-test-windows
GitHub Check: test / e2e-test
GitHub Check: continuous-release

🔇 Additional comments (10)

packages/compiler-sfc/src/script/utils.ts (1)

125-128: Well-designed utility functions for language detection.

The isJS and isTS utility functions provide a clean, reusable way to detect JavaScript and TypeScript script languages. The implementation correctly handles null/undefined values and uses Array.prototype.some appropriately to check for language variants.

packages/compiler-sfc/__tests__/compileScript.spec.ts (1)

1547-1560: Excellent test coverage for unsupported script languages.

This test case properly validates the expected behavior when encountering unsupported script languages. It confirms that:

Original content is preserved unchanged

The lang property is correctly maintained

No AST is generated (scriptAst is undefined)

The CoffeeScript example effectively demonstrates the intended functionality.

packages/compiler-sfc/src/script/context.ts (2)

12-12: Good centralization of language detection logic.

Importing the utility functions from ./utils allows for consistent language detection across the codebase.

91-92: Clean refactoring using centralized utility functions.

Replacing inline language checks with calls to isJS and isTS utility functions improves maintainability and reduces code duplication. The logic remains functionally equivalent while being more readable.

packages/compiler-sfc/src/compileScript.ts (6)

58-64: Proper imports for centralized language detection.

Adding imports for isJS and isTS utilities enables consistent language detection throughout the compilation process.

181-182: Effective consolidation of language detection logic.

Creating a single isJSOrTS boolean by combining the utility functions simplifies the subsequent conditional checks and improves readability.

190-193: Efficient early return for unsupported script languages.

This early return prevents unnecessary processing of non-JS/TS scripts in normal script mode, aligning with the PR objective to check language before compilation. The script is returned unchanged as expected.

195-195: Optimized context creation timing.

Moving ScriptCompileContext creation after the language check avoids expensive context initialization for unsupported scripts, improving performance.

206-209: Consistent early return for script setup blocks.

This mirrors the logic for normal scripts, ensuring that script setup blocks with unsupported languages are also returned unchanged without processing.

211-211: Proper deferred context creation.

Context creation is appropriately deferred until after confirming the script language is supported, optimizing the compilation flow.

✨ Finishing Touches

📝 Generate Docstrings

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.

❤️ 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.
- Explain this complex logic.
- 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 explain this code block.
- @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 explain its main purpose.
- @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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

CodeRabbit Commands (Invoked using PR comments)

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

Other keywords and placeholders

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

CodeRabbit Configuration File (`.coderabbit.yaml`)

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

Documentation and Community

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

pkg-pr-new · 2025-06-21T02:57:12Z

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@13508

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@13508

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@13508

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@13508

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@13508

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@13508

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@13508

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@13508

@vue/shared

npm i https://pkg.pr.new/@vue/shared@13508

vue

npm i https://pkg.pr.new/vue@13508

@vue/compat

npm i https://pkg.pr.new/@vue/compat@13508

commit: 5b3d26c

github-actions · 2025-06-21T02:57:14Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB	38.3 kB	34.5 kB
vue.global.prod.js	159 kB	58.5 kB	52 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.5 kB	18.2 kB	16.7 kB
createApp	54.5 kB	21.2 kB	19.4 kB
createSSRApp	58.7 kB	22.9 kB	20.9 kB
defineCustomElement	59.4 kB	22.8 kB	20.8 kB
overall	68.5 kB	26.4 kB	24 kB

edison1105 · 2025-06-23T05:28:39Z

/ecosystem-ci run

vue-bot · 2025-06-23T05:35:47Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
nuxt	✅ success	✅ success
primevue	✅ success	✅ success
pinia	✅ success	✅ success
language-tools	❌ failure	❌ failure
vite-plugin-vue	✅ success	✅ success
quasar	✅ success	✅ success
test-utils	✅ success	✅ success
vitepress	✅ success	✅ success
vue-macros	❌ failure	✅ success
radix-vue	✅ success	❌ failure
vue-i18n	✅ success	✅ success
router	✅ success	✅ success
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vant	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

fix(compiler-sfc): check lang before attempt to compile script

5b3d26c

edison1105 added scope: sfc ready for review This PR requires more reviews labels Jun 23, 2025

edison1105 added ready to merge The PR is ready to be merged. 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. and removed ready for review This PR requires more reviews labels Jun 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(compiler-sfc): check lang before attempt to compile script #13508

fix(compiler-sfc): check lang before attempt to compile script #13508

Uh oh!

alex-snezhko commented Jun 21, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jun 21, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

pkg-pr-new bot commented Jun 21, 2025

Uh oh!

github-actions bot commented Jun 21, 2025

Uh oh!

edison1105 commented Jun 23, 2025

Uh oh!

vue-bot commented Jun 23, 2025

Uh oh!

Uh oh!

Uh oh!

fix(compiler-sfc): check lang before attempt to compile script #13508

Are you sure you want to change the base?

fix(compiler-sfc): check lang before attempt to compile script #13508

Uh oh!

Conversation

alex-snezhko commented Jun 21, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jun 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Assessment against linked issues

Suggested labels

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

pkg-pr-new bot commented Jun 21, 2025

Uh oh!

github-actions bot commented Jun 21, 2025

Size Report

Bundles

Usages

Uh oh!

edison1105 commented Jun 23, 2025

Uh oh!

vue-bot commented Jun 23, 2025

Uh oh!

Uh oh!

alex-snezhko commented Jun 21, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jun 21, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)