vue-compiler/test.mjs at main · esm-dev/vue-compiler · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import { transform } from "./index.mjs";

const appVue = `
<script setup>
import { ref } from "vue"

const msg = ref("Hello Vue!")
</script>

<template>
<h1>{{ msg }}</h1>
<input v-model="msg">
</template>

<style scoped>
h1 {
  color: #42b883;
}
</style>
`;

const appVueTS = `
<script setup lang="ts">
import { ref } from "vue"

const msg = ref<string>("Hello Vue!")
</script>

<template>
<h1>{{ msg }}</h1>
<input v-model="msg">
</template>

<style scoped>
h1 {
  color: #42b883;
}
</style>
`;

// development mode
try {
  const { code, map, lang } = await transform("/src/App.vue", appVue, { isDev: true, devRuntime: "/@vue-dev-runtime" });
  try {
    await import("data:text/javascript;base64," + btoa(code));
  } catch (e) {
    if (e instanceof SyntaxError) {
      throw new Error("Syntax error", { cause: e });
    }
  }
  if (lang !== "js") {
    throw new Error("invalid lang", { cause: lang });
  }
  if (!map) {
    throw new Error("Source map not generated");
  }
  if (!code.includes("$SFC")) {
    throw new Error("script setup not compiled", { cause: code });
  }
  if (!code.includes('_createElementVNode("h1"')) {
    throw new Error("template not compiled", { cause: code });
  }
  if (!code.includes("function $SFC_render(_ctx, _cache, $props, $setup, $data, $options)")) {
    throw new Error("template not imported", { cause: code });
  }
  if (!code.includes("color: #42b883")) {
    throw new Error("CSS not inlined", { cause: code });
  }
  if (!code.includes("h1[data-v-")) {
    throw new Error("CSS not scoped", { cause: code });
  }
  if (!code.includes("import.meta.hot.accept(") || !code.includes("__VUE_HMR_RUNTIME__")) {
    throw new Error("HMR not enabled", { cause: code });
  }
  if (!code.includes('from "/@vue-dev-runtime"')) {
    throw new Error("Dev runtime not imported", { cause: code });
  }
} catch (e) {
  console.error("❌ ", e);
  process.exit(1);
}

// production mode
try {
  const { code, map, lang } = await transform("/src/App.vue", appVue);
  try {
    await import("data:text/javascript;base64," + btoa(code));
  } catch (e) {
    if (e instanceof SyntaxError) {
      throw new Error("Syntax error", { cause: e });
    }
  }
  if (lang !== "js") {
    throw new Error("invalid lang", { cause: lang });
  }
  if (map) {
    throw new Error("Source map not expected");
  }
  if (!code.includes("$SFC")) {
    throw new Error("script setup not compiled", { cause: code });
  }
  if (!code.includes('_createElementVNode("h1"') || !code.includes("return (_ctx, _cache) => {")) {
    throw new Error("template not compiled", { cause: code });
  }
  if (!code.includes("color: #42b883") || !code.includes(`document.head.insertAdjacentHTML("beforeend", "<style>"`)) {
    throw new Error("CSS not inlined", { cause: code });
  }
  if (!code.includes("h1[data-v-")) {
    throw new Error("CSS not scoped", { cause: code });
  }
} catch (e) {
  console.error("❌ ", e);
  process.exit(1);
}

// typescript
try {
  const { code, lang } = await transform("/src/App.vue", appVueTS);
  if (lang !== "ts") {
    throw new Error("invalid lang", { cause: lang });
  }
  if (!code.includes('_createElementVNode("h1"') || !code.includes("return (_ctx: any,_cache: any) => {")) {
    throw new Error("template not compiled", { cause: code });
  }
} catch (e) {
  console.error("❌ ", e);
  process.exit(1);
}

console.log("✔️ All tests passed");