feat(svelte-template-compiler): first implementation svelte binding

kazupon · kazupon · commit 3b3595120bdd · 2024-09-17T19:03:57.000+09:00
diff --git a/packages/global.d.ts b/packages/global.d.ts
@@ -1,3 +1,4 @@
 declare let __BROWSER__: boolean
 declare let __COMMIT__: string
 declare let __TEST__: string
+declare let __DEV__: boolean
diff --git a/packages/svelte-template-compiler/src/ir/converter.test.ts b/packages/svelte-template-compiler/src/ir/converter.test.ts
@@ -537,6 +537,32 @@ describe('convertProps', () => {
     })
   })
 
+  describe('Svelte Binding Node', () => {
+    test('basic: <input bind:value={name} />', () => {
+      const el = getSvelteElement('<input bind:value={name} />')
+      expect(convertProps(el!)).toMatchObject([
+        {
+          type: NodeTypes.DIRECTIVE,
+          name: 'model',
+          rawName: 'v-model',
+          modifiers: [],
+          loc: {
+            // TODO: we want to map for svelte code correctly...
+            // source: 'v-model:value={name}'
+          },
+          arg: undefined,
+          exp: {
+            // ast: null,
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'name',
+            constType: ConstantTypes.NOT_CONSTANT,
+            isStatic: false
+          }
+        }
+      ])
+    })
+  })
+
   test('no attribute', () => {
     const el = getSvelteElement('<div />')
     expect(convertProps(el!)).toMatchObject([])
diff --git a/packages/svelte-template-compiler/src/ir/converter.ts b/packages/svelte-template-compiler/src/ir/converter.ts
@@ -3,6 +3,7 @@ import { NodeTypes, createSimpleExpression } from '@vue-vapor/compiler-dom'
 import { generate } from 'astring'
 import {
   isSvelteAttribute,
+  isSvelteBindingDirective,
   isSvelteEventHandler,
   isSvelteMustacheTag,
   isSvelteShorthandAttribute,
@@ -31,7 +32,11 @@ export function convertProps(node: SvelteElement): (VaporDirectiveNode | Attribu
       } else {
         props.push(convertSvelteAttribute(attr))
       }
-    } else if (isSvelteSpreadAttribute(attr) || isSvelteEventHandler(attr)) {
+    } else if (
+      isSvelteSpreadAttribute(attr) ||
+      isSvelteEventHandler(attr) ||
+      isSvelteBindingDirective(attr)
+    ) {
       props.push(convertVaporDirective(attr))
     }
   }
@@ -161,11 +166,24 @@ function convertVaporDirective(
       type: NodeTypes.DIRECTIVE,
       name: 'on',
       rawName: `v-on:${node.name}${vaporModifiers}`,
+      // @ts-expect-error -- FIXME
       modifiers,
       loc: convertSvelteLocation(directiveLoc, directiveLocSource),
       arg,
       exp
     }
+  } else if (isSvelteBindingDirective(node)) {
+    const content = node.expression ? generate(node.expression) : ''
+    return {
+      type: NodeTypes.DIRECTIVE,
+      name: 'model',
+      rawName: 'v-model',
+      // @ts-expect-error -- FIXME
+      modifiers: node.modifiers,
+      loc: convertSvelteLocation(node, `v-model="${content}"`),
+      exp: createSimpleExpression(content, false, convertSvelteLocation(node, content)),
+      arg: undefined
+    }
   } else {
     // TODO: we should consider error strategy
     throw new Error('unexpected node type')
diff --git a/packages/svelte-template-compiler/src/ir/svelte.ts b/packages/svelte-template-compiler/src/ir/svelte.ts
@@ -100,6 +100,10 @@ export function isIfBlockOnElseBlock(node: SvelteIfBlock): boolean {
   return node.type === 'IfBlock' && !!node.elseif
 }
 
+export function isSvelteBindingDirective(node: unknown): node is SvelteBaseExpressionDirective {
+  return isObject(node) && 'type' in node && node.type === 'Binding'
+}
+
 export interface SvelteCompileError {
   code: string
   start: {
diff --git a/packages/svelte-template-compiler/src/transforms/__snapshots__/model.test.ts.snap b/packages/svelte-template-compiler/src/transforms/__snapshots__/model.test.ts.snap
@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`bind:property > simple binding > input > expected 1`] = `
+"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue/vapor';
+const t0 = _template("<input>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  _withDirectives(n0, [[_vModelText, () => text]])
+  _delegate(n0, "update:modelValue", () => $event => (text = $event))
+  return n0
+}"
+`;
+
+exports[`bind:property > simple binding > input > received 1`] = `
+"import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue/vapor';
+const t0 = _template("<input>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  _withDirectives(n0, [[_vModelText, () => text]])
+  _delegate(n0, "update:modelValue", () => $event => (text = $event))
+  return n0
+}"
+`;
diff --git a/packages/svelte-template-compiler/src/transforms/model.test.ts b/packages/svelte-template-compiler/src/transforms/model.test.ts
@@ -1,18 +1,82 @@
+import { NodeTypes } from '@vue-vapor/compiler-dom'
+import { compile as vaporCompile } from '@vue-vapor/compiler-vapor'
 import { describe, expect, test } from 'vitest'
+import { IRNodeTypes } from '../ir/index.ts'
+import { makeCompile } from './_utils.ts'
+import { transformVBind } from './bind.ts'
+import { transformChildren } from './children.ts'
+import { transformComment } from './comment.ts'
+import { transformElement } from './element.ts'
+import { transformVModel } from './model.ts'
+import { transformVOn } from './on.ts'
+import { transformText } from './text.ts'
+
+const compileWithVModel = makeCompile({
+  prefixIdentifiers: false,
+  nodeTransforms: [transformElement, transformChildren, transformText, transformComment],
+  directiveTransforms: {
+    bind: transformVBind,
+    on: transformVOn,
+    model: transformVModel
+  }
+})
 
 describe('bind:property', () => {
-  describe.todo('simple binding', () => {
+  describe('simple binding', () => {
     test('input', () => {
       const source1 = `<input bind:value={text} />`
-      expect(source1).toBe('todo')
+      const source2 = `<input v-model="text" />`
+      const { code, vaporHelpers, ir, helpers } = compileWithVModel(source1)
+      const expectedResult = vaporCompile(source2)
+
+      expect(code).toMatchSnapshot('received')
+      expect(expectedResult.code).toMatchSnapshot('expected')
+
+      expect(code).contains(`_withDirectives(n0, [[_vModelText, () => text]])`)
+      expect(code).contains(`"update:modelValue", () => $event => (text = $event))`)
+
+      expect(vaporHelpers).toContain('vModelText')
+      expect(helpers.size).toBe(0)
+      expect(ir.template).toEqual(['<input>'])
+      expect(ir.block.operation).toMatchObject([
+        {
+          type: IRNodeTypes.SET_MODEL_VALUE,
+          element: 0,
+          isComponent: false,
+          key: {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'modelValue',
+            isStatic: true
+          },
+          value: {
+            type: NodeTypes.SIMPLE_EXPRESSION,
+            content: 'text',
+            isStatic: false
+          }
+        },
+        {
+          type: IRNodeTypes.WITH_DIRECTIVE,
+          name: 'vModelText',
+          element: 0,
+          builtin: true,
+          dir: {
+            arg: undefined,
+            exp: {
+              type: NodeTypes.SIMPLE_EXPRESSION,
+              content: 'text',
+              isStatic: false
+            }
+          }
+        }
+      ])
     })
 
-    test('textarea', () => {
+    test.todo('textarea', () => {
       const source1 = `<textarea bind:value={text} />`
       expect(source1).toBe('todo')
     })
 
-    test('checkbox', () => {
+    test.todo('checkbox', () => {
       const source1 = `<input type="checkbox" bind:checked={yes} />`
       expect(source1).toBe('todo')
     })
@@ -84,7 +148,7 @@ describe.todo('Binding <select> value', () => {
   })
 })
 
-describe('contenteditable', () => {
+describe.todo('contenteditable', () => {
   test('innerHTML', () => {
     const source1 = `<div contenteditable="true" bind:innerHTML={html} />`
     expect(source1).toBe('todo')
diff --git a/packages/svelte-template-compiler/src/transforms/model.ts b/packages/svelte-template-compiler/src/transforms/model.ts
@@ -5,11 +5,157 @@
 // Repository url: https://github.com/vuejs/core-vapor
 // Code url: https://github.com/vuejs/core-vapor/blob/6608bb31973d35973428cae4fbd62026db068365/packages/compiler-vapor/src/transforms/vModel.ts
 
+import { BindingTypes, createSimpleExpression, isMemberExpression } from '@vue-vapor/compiler-dom'
+import { IRNodeTypes } from '../ir/index.ts'
+import { getExpSource } from './utils.ts'
+
+import type { VaporHelper } from '@vue-vapor/compiler-vapor'
 import type { DirectiveTransform } from './types.ts'
 
-export const transformVModel: DirectiveTransform = (_dir, _node, _context) => {
-  // TODO: transform vapor v-model from svelte some bindings
-  // https://svelte.dev/docs/element-directives#bind-property
-  // https://svelte.dev/docs/element-directives#binding-select-value
-  // ... and more on https://svelte.dev/docs/element-directives
+// TODO: transform vapor v-model from svelte some bindings
+// https://svelte.dev/docs/element-directives#bind-property
+// https://svelte.dev/docs/element-directives#binding-select-value
+// ... and more on https://svelte.dev/docs/element-directives
+export const transformVModel: DirectiveTransform = (dir, node, context) => {
+  console.log('transformVModel', dir, node)
+
+  const { exp, arg } = dir
+  if (!exp) {
+    // TODO: should throw error on `onError`
+    return
+  }
+
+  // we assume v-model directives are always parsed
+  // (not artificially created by a transform)
+  const rawExp = exp.loc.source
+  console.log('rawExp', rawExp)
+  console.log('bindingMetadata', context.options.bindingMetadata)
+
+  // TODO: do we need to handle from `bindingMetadata`?
+  const bindingType = (context.options.bindingMetadata || {})[rawExp]
+  console.log('bindingType', bindingType)
+
+  // check props
+  if (bindingType === BindingTypes.PROPS || bindingType === BindingTypes.PROPS_ALIASED) {
+    // TODO: should throw error on `onError`
+    return
+  }
+
+  const expString = exp.content
+  const maybeRef =
+    !__BROWSER__ &&
+    context.options.inline &&
+    (bindingType === BindingTypes.SETUP_LET ||
+      bindingType === BindingTypes.SETUP_REF ||
+      bindingType === BindingTypes.SETUP_MAYBE_REF)
+  console.log('maybeRef', maybeRef)
+  console.log('expString', expString)
+
+  if (!expString.trim() || (!isMemberExpression(getExpSource(exp), context.options) && !maybeRef)) {
+    // TODO: should throw error on `onError`
+    return
+  }
+
+  const isComponent = node.type === 'InlineComponent'
+  if (isComponent) {
+    return {
+      // eslint-disable-next-line unicorn/prefer-logical-operator-over-ternary
+      key: arg ? arg : createSimpleExpression('modelValue', true),
+      value: exp,
+      model: true,
+
+      modelModifiers: dir.modifiers.map(m => m.content)
+    }
+  }
+
+  const { name: tag } = node
+  const isCustomElement = context.options.isCustomElement(tag)
+
+  let runtimeDirective: VaporHelper | undefined = 'vModelText'
+  if (tag === 'input' || tag === 'textarea' || tag === 'select' || isCustomElement) {
+    if (tag === 'input' || isCustomElement) {
+      /*
+      const type = findProp(node, 'type')
+      if (type) {
+        if (type.type === NodeTypes.DIRECTIVE) {
+          // :type="foo"
+          runtimeDirective = 'vModelDynamic'
+        } else if (type.value) {
+          switch (type.value.content) {
+            case 'radio':
+              runtimeDirective = 'vModelRadio'
+              break
+            case 'checkbox':
+              runtimeDirective = 'vModelCheckbox'
+              break
+            case 'file':
+              runtimeDirective = undefined
+              context.options.onError(
+                createDOMCompilerError(
+                  DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT,
+                  dir.loc,
+                ),
+              )
+              break
+            default:
+              // text type
+              __DEV__ && checkDuplicatedValue()
+              break
+          }
+        }
+      } else if (hasDynamicKeyVBind(node)) {
+        // element has bindings with dynamic keys, which can possibly contain
+        // "type".
+        runtimeDirective = 'vModelDynamic'
+      } else {
+        // text type
+        __DEV__ && checkDuplicatedValue()
+      }
+        */
+    } else if (tag === 'select') {
+      runtimeDirective = 'vModelSelect'
+    } else {
+      // textarea
+      // __DEV__ && checkDuplicatedValue()
+    }
+  } else {
+    // TODO:
+    // context.options.onError(
+    //   createDOMCompilerError(
+    //     DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT,
+    //     dir.loc,
+    //   ),
+    // )
+  }
+
+  context.registerOperation({
+    type: IRNodeTypes.SET_MODEL_VALUE,
+    element: context.reference(),
+    key: arg || createSimpleExpression('modelValue', true),
+    value: exp,
+    isComponent
+  })
+
+  if (runtimeDirective) {
+    context.registerOperation({
+      type: IRNodeTypes.WITH_DIRECTIVE,
+      element: context.reference(),
+      dir,
+      name: runtimeDirective,
+      builtin: true
+    })
+  }
+
+  // NOTE: we don't need duplicate value check, because svelte binding allows it
+  // function checkDuplicatedValue() {
+  //   const value = findDir(node, 'bind')
+  //   if (value && isStaticArgOf(value.arg, 'value')) {
+  //     context.options.onError(
+  //       createDOMCompilerError(
+  //         DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE,
+  //         value.loc,
+  //       ),
+  //     )
+  //   }
+  // }
 }
diff --git a/packages/svelte-template-compiler/src/transforms/utils.ts b/packages/svelte-template-compiler/src/transforms/utils.ts
