feat(runtime-utils): refactor mount + render helpers

examples/app-vitest-full/components/OptionsApiComputed.vue

@@ -9,6 +9,14 @@
     <li data-testid="object-with-get-and-set">
       {{ objectWithGetAndSet }}
     </li>
+    <li>
+      <button
+        data-testid="hanlde-change-object-with-get-and-set"
+        @click="hanldeChangeObjectWithGetAndSet"
+      >
+        Change
+      </button>
+    </li>
   </ul>
 </template>
 
@@ -37,5 +45,10 @@ export default {
       },
     },
   },
+  methods: {
+    hanldeChangeObjectWithGetAndSet() {
+      this.objectWithGetAndSet = `${this.objectWithGetAndSet} (changed)`
+    },
+  },
 }
 </script>

examples/app-vitest-full/components/TestComponentWithCompostionApi.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+const {
+  none = false,
+  show = true,
+  label = '',
+} = defineProps<{
+  none?: boolean
+  show?: boolean
+  label?: string
+}>()
+
+const emit = defineEmits<{
+  blur: []
+  unmount: []
+  unmounted: []
+}>()
+
+const disabled = ref(false)
+const inputRef = useTemplateRef('inputRef')
+const modelValue = defineModel<string>({ default: '' })
+const counter = computed(() => disabled.value ? '' : `[${modelValue.value.length}/30]`)
+
+function setValue(value: string) {
+  modelValue.value = value
+}
+
+function getValue() {
+  return modelValue.value
+}
+
+onBeforeUnmount(() => emit('unmount'))
+onUnmounted(() => emit('unmounted'))
+
+defineExpose({
+  disabled,
+  setValue,
+  getValue,
+})
+</script>
+
+<template>
+  <div
+    v-if="!none"
+    v-show="show"
+    data-testid="container"
+  >
+    <label
+      for="input"
+      :class="$style.label"
+      data-testid="label"
+    >
+      {{ label }}
+    </label>
+    <input
+      id="input"
+      ref="inputRef"
+      v-model="modelValue"
+      :disabled
+      data-testid="input"
+      @blur="emit('blur')"
+    >
+    <span data-testid="counter">{{ counter }}</span>
+    <div data-testid="slot">
+      <slot />
+    </div>
+    <SomeComponent data-testid="some-component" />
+  </div>
+</template>
+
+<style module>
+.label {
+  color: red;
+}
+</style>

examples/app-vitest-full/components/TestComponentWithOptionsApiWithData.vue

@@ -0,0 +1,88 @@
+<script>
+export default defineComponent({
+  props: {
+    label: {
+      type: String,
+      default: () => '',
+    },
+    none: {
+      type: Boolean,
+      default: false,
+    },
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    modelValue: {
+      type: String,
+      default: () => '',
+    },
+    modelModifiers: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['blur', 'update:modelValue', 'unmount', 'unmounted'],
+  expose: ['disabled', 'getValue', 'setValue'],
+  data() {
+    return {
+      disabled: false,
+    }
+  },
+  computed: {
+    counter() {
+      return this.disabled ? '' : `[${this.modelValue.length}/30]`
+    },
+  },
+  beforeUnmount() {
+    this.$emit('unmount')
+  },
+  unmounted() {
+    this.$emit('unmounted')
+  },
+  methods: {
+    setValue(value) {
+      this.$emit('update:modelValue', value)
+    },
+    getValue() {
+      return this.modelValue
+    },
+  },
+})
+</script>
+
+<template>
+  <div
+    v-if="!none"
+    v-show="show"
+    data-testid="container"
+  >
+    <label
+      for="input"
+      :class="$style.label"
+      data-testid="label"
+    >
+      {{ label }}
+    </label>
+    <input
+      id="input"
+      ref="inputRef"
+      :value="modelValue"
+      :disabled
+      data-testid="input"
+      @blur="$emit('blur')"
+      @input="$emit('update:modelValue', $event.target.value)"
+    >
+    <span data-test-id="counter">{{ counter }}</span>
+    <div data-testid="slot">
+      <slot />
+    </div>
+    <SomeComponent data-testid="some-component" />
+  </div>
+</template>
+
+<style module>
+.label {
+  color: red;
+}
+</style>

examples/app-vitest-full/components/TestComponentWithOptionsApiWithSetup.vue

@@ -0,0 +1,92 @@
+<script>
+export default defineComponent({
+  props: {
+    label: {
+      type: String,
+      default: () => '',
+    },
+    none: {
+      type: Boolean,
+      default: false,
+    },
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    modelValue: {
+      type: String,
+      default: () => '',
+    },
+    modelModifiers: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['blur', 'update:modelValue', 'unmount', 'unmounted'],
+  expose: ['disabled', 'getValue', 'setValue'],
+  setup(props, { emit }) {
+    const disabled = ref(false)
+
+    function setValue(value) {
+      emit('update:modelValue', value)
+    }
+
+    return {
+      disabled,
+      setValue,
+    }
+  },
+  computed: {
+    counter() {
+      return this.disabled ? '' : `[${this.modelValue.length}/30]`
+    },
+  },
+  beforeUnmount() {
+    this.$emit('unmount')
+  },
+  unmounted() {
+    this.$emit('unmounted')
+  },
+  methods: {
+    getValue() {
+      return this.modelValue
+    },
+  },
+})
+</script>
+
+<template>
+  <div
+    v-if="!none"
+    v-show="show"
+    data-testid="container"
+  >
+    <label
+      for="input"
+      :class="$style.label"
+      data-testid="label"
+    >
+      {{ label }}
+    </label>
+    <input
+      id="input"
+      ref="inputRef"
+      :value="modelValue"
+      :disabled
+      data-test-id="input"
+      @blur="$emit('blur')"
+      @input="$emit('update:modelValue', $event.target.value)"
+    >
+    <span data-testid="counter">{{ counter }}</span>
+    <div data-testid="slot">
+      <slot />
+    </div>
+    <SomeComponent data-testid="some-component" />
+  </div>
+</template>
+
+<style module>
+.label {
+  color: red;
+}
+</style>

examples/app-vitest-full/components/WrapperTests.vue

@@ -29,6 +29,8 @@ defineExpose({
     <button
       id="changeModelValue"
       @click="modelValue = true"
-    />
+    >
+      Change model!
+    </button>
   </div>
 </template>