fix(compiler-vapor): prefix identifiers

diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index e0c4099e40ea7fc20e5a5c8d3577cfe5c60c27a6..c00952809241a9e6ccf30fe3408a9cc4deac5f42 100644 (file)
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -228,15 +228,6 @@ export interface TransformOptions
    * Used by some transforms that expects only native elements
    */
   isCustomElement?: (tag: string) => boolean | void
-  /**
-   * Transform expressions like {{ foo }} to `_ctx.foo`.
-   * If this option is false, the generated code will be wrapped in a
-   * `with (this) { ... }` block.
-   * - This is force-enabled in module mode, since modules are by default strict
-   * and cannot use `with`
-   * @default mode === 'module'
-   */
-  prefixIdentifiers?: boolean
   /**
    * Hoist static VNodes and props objects to `_hoisted_x` constants
    * @default false

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
index bc7dc37728e9204a445cf138a647334416f3d467..5090fc42e97b4be941a35b805b29d931664bd828 100644 (file)
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`compile > bindings 1`] = `
 "import { template, children, createTextNode, insert, effect, setText } from 'vue/vapor';
 const t0 = template('<div>count is <!>.</div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     0: [
@@ -26,7 +26,7 @@ export function render() {
 exports[`compile > directives > v-bind > simple expression 1`] = `
 "import { template, children, effect, setAttr } from 'vue/vapor';
 const t0 = template('<div></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     0: [n1],
@@ -42,7 +42,7 @@ export function render() {
 exports[`compile > directives > v-html > no expression 1`] = `
 "import { template, children, effect, setHtml } from 'vue/vapor';
 const t0 = template('<div></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     0: [n1],
@@ -58,7 +58,7 @@ export function render() {
 exports[`compile > directives > v-html > simple expression 1`] = `
 "import { template, children, effect, setHtml } from 'vue/vapor';
 const t0 = template('<div></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     0: [n1],
@@ -74,7 +74,7 @@ export function render() {
 exports[`compile > directives > v-on > event modifier 1`] = `
 "import { template, children, effect, withModifiers, on } from 'vue/vapor';
 const t0 = template('<div></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     0: [n1],
@@ -90,7 +90,7 @@ export function render() {
 exports[`compile > directives > v-on > simple expression 1`] = `
 "import { template, children, effect, on } from 'vue/vapor';
 const t0 = template('<div></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     0: [n1],
@@ -106,7 +106,7 @@ export function render() {
 exports[`compile > directives > v-once > as root node 1`] = `
 "import { template, children, effect, setAttr } from 'vue/vapor';
 const t0 = template('<div></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     0: [n1],
@@ -122,7 +122,7 @@ export function render() {
 exports[`compile > directives > v-once > basic 1`] = `
 "import { template, children, createTextNode, setText, setAttr, prepend } from 'vue/vapor';
 const t0 = template('<div> <span></span></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     0: [
@@ -144,7 +144,7 @@ export function render() {
 exports[`compile > directives > v-pre > basic 1`] = `
 "import { template } from 'vue/vapor';
 const t0 = template('<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   return n0;
 }
@@ -154,7 +154,7 @@ export function render() {
 exports[`compile > directives > v-pre > self-closing v-pre 1`] = `
 "import { template, children, createTextNode, append, effect, setAttr, setText } from 'vue/vapor';
 const t0 = template('<div></div><div><Comp></Comp></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     1: [n1],
@@ -175,7 +175,7 @@ export function render() {
 exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
 "import { template, children, createTextNode, append, effect, setAttr, setText } from 'vue/vapor';
 const t0 = template('<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div><div><Comp></Comp></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     1: [n1],
@@ -196,7 +196,7 @@ export function render() {
 exports[`compile > directives > v-text > no expression 1`] = `
 "import { template, children, effect, setText } from 'vue/vapor';
 const t0 = template('<div></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     0: [n1],
@@ -212,7 +212,7 @@ export function render() {
 exports[`compile > directives > v-text > simple expression 1`] = `
 "import { template, children, effect, setText } from 'vue/vapor';
 const t0 = template('<div></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     0: [n1],
@@ -227,7 +227,7 @@ export function render() {
 
 exports[`compile > dynamic root 1`] = `
 "import { fragment, createTextNode, append, effect, setText } from 'vue/vapor';
-export function render() {
+export function render(_ctx) {
   const t0 = fragment();
   const n0 = t0();
   const n1 = createTextNode(1);
@@ -247,7 +247,7 @@ export function render() {
 exports[`compile > dynamic root nodes and interpolation 1`] = `
 "import { template, children, createTextNode, prepend, insert, append, effect, on, setAttr, setText } from 'vue/vapor';
 const t0 = template('<button>foo<!>foo</button>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     0: [
@@ -280,7 +280,7 @@ export function render() {
 exports[`compile > fragment 1`] = `
 "import { template } from 'vue/vapor';
 const t0 = template('<p></p><span></span><div></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   return n0;
 }
@@ -290,7 +290,7 @@ export function render() {
 exports[`compile > static + dynamic root 1`] = `
 "import { template, children, createTextNode, prepend, insert, append, effect, setText } from 'vue/vapor';
 const t0 = template('3<!>6<!>9');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   const {
     1: [n9],
@@ -340,7 +340,7 @@ export function render() {
 exports[`compile > static template 1`] = `
 "import { template } from 'vue/vapor';
 const t0 = template('<div><p>hello</p><input><span></span></div>');
-export function render() {
+export function render(_ctx) {
   const n0 = t0();
   return n0;
 }

diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts
index d304c28963359b30b16f9afb2249f0e934f431bc..fed7b5a9dc35525294ad875c55b190c0259cd59d 100644 (file)
--- a/packages/compiler-vapor/src/transform.ts
+++ b/packages/compiler-vapor/src/transform.ts
@@ -9,6 +9,7 @@ import {
   type DirectiveNode,
   type ExpressionNode,
   NodeTypes,
+  BindingTypes,
 } from '@vue/compiler-dom'
 import {
   type OperationNode,
@@ -461,9 +462,13 @@ function processExpression(
     // TODO
     return ''
   }
-  const { content } = expr
-  if (ctx.options.bindingMetadata?.[content] === 'setup-ref') {
-    return content + '.value'
+
+  let { content } = expr
+  if (ctx.options.bindingMetadata?.[content] === BindingTypes.SETUP_REF) {
+    content += '.value'
+  }
+  if (ctx.options.prefixIdentifiers && !ctx.options.inline) {
+    content = `_ctx.${content}`
   }
   return content
 }

diff --git a/playground/src/App-root.vue b/playground/src/App-root.vue
index 0d5def4bd174b24f5aa82cebc326a226778174f7..81b7585918562dc1eab8bf59a2c4ebfd6a88a82b 100644 (file)
--- a/playground/src/App-root.vue
+++ b/playground/src/App-root.vue
@@ -6,11 +6,6 @@ const count = ref(1)
 const handleClick = () => {
   count.value++
 }
-
-// @ts-expect-error
-globalThis.count = count
-// @ts-expect-error
-globalThis.handleClick = handleClick
 </script>
 
 <template>

diff --git a/playground/src/App.vue b/playground/src/App.vue
index 2ac090327f2b135ef2a3ccb2dd4433ec1b6aa900..eb83971a3e0ef6f13c9f19892e1a8a47600949ec 100644 (file)
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -7,17 +7,6 @@ const html = computed(() => `<button>HTML! ${count.value}</button>`)
 
 const inc = () => count.value++
 const dec = () => count.value--
-
-// @ts-expect-error
-globalThis.count = count
-// @ts-expect-error
-globalThis.double = double
-// @ts-expect-error
-globalThis.inc = inc
-// @ts-expect-error
-globalThis.dec = dec
-// @ts-expect-error
-globalThis.html = html
 </script>
 
 <template>

diff --git a/playground/src/event-modifier.vue b/playground/src/event-modifier.vue
index 97e6fe3afd5d3a06f2b61afdd66ace48ff3a4c68..01f14883fb09cfc386878568b48985df28ff827f 100644 (file)
--- a/playground/src/event-modifier.vue
+++ b/playground/src/event-modifier.vue
@@ -2,9 +2,6 @@
 const handleClick = () => {
   console.log('Hello, Vapor!')
 }
-
-// @ts-expect-error
-globalThis.handleClick = handleClick
 </script>
 
 <template>