Home / File/ model.ts — vue Source File

model.ts — vue Source File

Architecture documentation for model.ts, a typescript file in the vue codebase. 1 imports, 1 dependents.

File typescript VueCore Instance 1 imports 1 dependents 8 functions

Entity Profile

Dependency Diagram

graph LR
  1f566fbb_35e7_982c_1234_287d1ad7f72c["model.ts"]
  a80b8e3b_d720_9146_3bf6_594d4ee5dd77["compiler"]
  1f566fbb_35e7_982c_1234_287d1ad7f72c --> a80b8e3b_d720_9146_3bf6_594d4ee5dd77
  101d3d34_ac07_228f_62b9_5d5ac4a0ea2e["index.ts"]
  101d3d34_ac07_228f_62b9_5d5ac4a0ea2e --> 1f566fbb_35e7_982c_1234_287d1ad7f72c
  style 1f566fbb_35e7_982c_1234_287d1ad7f72c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { ASTElement, ASTModifiers } from 'types/compiler'

/**
 * Cross-platform code generation for component v-model
 */
export function genComponentModel(
  el: ASTElement,
  value: string,
  modifiers: ASTModifiers | null
): void {
  const { number, trim } = modifiers || {}

  const baseValueExpression = '$$v'
  let valueExpression = baseValueExpression
  if (trim) {
    valueExpression =
      `(typeof ${baseValueExpression} === 'string'` +
      `? ${baseValueExpression}.trim()` +
      `: ${baseValueExpression})`
  }
  if (number) {
    valueExpression = `_n(${valueExpression})`
  }
  const assignment = genAssignmentCode(value, valueExpression)

  el.model = {
    value: `(${value})`,
    expression: JSON.stringify(value),
    callback: `function (${baseValueExpression}) {${assignment}}`
  }
}

/**
 * Cross-platform codegen helper for generating v-model value assignment code.
 */
export function genAssignmentCode(value: string, assignment: string): string {
  const res = parseModel(value)
  if (res.key === null) {
    return `${value}=${assignment}`
  } else {
    return `$set(${res.exp}, ${res.key}, ${assignment})`
  }
}

/**
 * Parse a v-model expression into a base path and a final key segment.
 * Handles both dot-path and possible square brackets.
 *
 * Possible cases:
 *
 * - test
 * - test[key]
 * - test[test1[key]]
 * - test["a"][key]
 * - xxx.test[a[a].test1[key]]
 * - test.xxx.a["asa"][test1[key]]
 *
 */

let len, str, chr, index, expressionPos, expressionEndPos
// ... (86 more lines)

Domain

Subdomains

Dependencies

  • compiler

Frequently Asked Questions

What does model.ts do?
model.ts is a source file in the vue codebase, written in typescript. It belongs to the VueCore domain, Instance subdomain.
What functions are defined in model.ts?
model.ts defines 8 function(s): eof, genAssignmentCode, genComponentModel, isStringStart, next, parseBracket, parseModel, parseString.
What does model.ts depend on?
model.ts imports 1 module(s): compiler.
What files import model.ts?
model.ts is imported by 1 file(s): index.ts.
Where is model.ts in the architecture?
model.ts is located at src/compiler/directives/model.ts (domain: VueCore, subdomain: Instance, directory: src/compiler/directives).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free