fix(compiler-vapor): prefix identifiers

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

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;
 }

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
 }

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>

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>

playground/src/event-modifier.vue

@@ -2,9 +2,6 @@
 const handleClick = () => {
   console.log('Hello, Vapor!')
 }
-
-// @ts-expect-error
-globalThis.handleClick = handleClick
 </script>
 
 <template>