start vue tests

10 files changed, 178 insertions, 15 deletions

diff --git a/test/bundler/integration/package.json b/test/bundler/integration/package.json
index de45fb795..464956318 100644
--- a/test/bundler/integration/package.json
+++ b/test/bundler/integration/package.json
@@ -1,8 +1,10 @@
 {
   "dependencies": {
+    "esbuild-plugin-vue-next": "^0.1.4",
     "puppeteer": "^20.2.0",
     "react": "next",
-    "react-dom": "next"
+    "react-dom": "next",
+    "vue": "^3.3.1"
   },
   "scripts": {
     "postinstall": "node ./node_modules/puppeteer/install.js"
diff --git a/test/bundler/integration/react-client.test.ts b/test/bundler/integration/react/react-client.test.ts
index b301dd1fe..0785b7630 100644
--- a/test/bundler/integration/react-client.test.ts
+++ b/test/bundler/integration/react/react-client.test.ts
@@ -13,22 +13,15 @@ const modes = [
 const nodeEnvs = ["development", "production"];
 const combinations = nodeEnvs.flatMap(nodeEnv => modes.map(mode => ({ options: mode, nodeEnv })));
 
-describe("integration, react client", () => {
+describe("bundler integration, react client", () => {
   for (const {
     options: { label, args },
     nodeEnv,
   } of combinations) {
     test(label + ", NODE_ENV=" + nodeEnv, async () => {
-      const out = path.join(import.meta.dir, "react/dist/client/" + label + "-" + nodeEnv);
+      const out = path.join(import.meta.dir, "dist/client/" + label + "-" + nodeEnv);
       const x = Bun.spawnSync(
-        [
-          bunExe(),
-          "build",
-          ...(args ?? []),
-          "--outdir=" + out,
-          "--splitting",
-          path.join(import.meta.dir, "react/index.jsx"),
-        ],
+        [bunExe(), "build", ...(args ?? []), "--outdir=" + out, "--splitting", path.join(import.meta.dir, "index.jsx")],
         {
           // cwd: import.meta.dir + "/react",
           env: nodeEnv ? { NODE_ENV: nodeEnv } : undefined,
@@ -38,7 +31,7 @@ describe("integration, react client", () => {
         console.error(x.stderr.toString());
         throw new Error("Failed to build");
       }
-      const proc = Bun.spawn(["node", path.join(import.meta.dir, "react/puppeteer.mjs"), out], {
+      const proc = Bun.spawn(["node", path.join(import.meta.dir, "puppeteer.mjs"), out], {
         cwd: path.join(import.meta.dir, "react"),
       });
       await proc.exited;
diff --git a/test/bundler/integration/react-ssr.test.ts b/test/bundler/integration/react/react-ssr.test.ts
index f290158fc..9b4d49e19 100644
--- a/test/bundler/integration/react-ssr.test.ts
+++ b/test/bundler/integration/react/react-ssr.test.ts
@@ -13,13 +13,13 @@ const modes = [
 const nodeEnvs = ["development", "production"];
 const combinations = nodeEnvs.flatMap(nodeEnv => modes.map(mode => ({ options: mode, nodeEnv })));
 
-describe("integration, react SSR", () => {
+describe("bundler integration, react SSR", () => {
   for (const {
     options: { label, args },
     nodeEnv,
   } of combinations) {
     test(label + ", NODE_ENV=" + nodeEnv, async () => {
-      const out = path.join(import.meta.dir, "react/dist/ssr/" + label + "-" + nodeEnv);
+      const out = path.join(import.meta.dir, "dist/ssr/" + label + "-" + nodeEnv);
       const x = Bun.spawnSync(
         [
           bunExe(),
@@ -27,7 +27,7 @@ describe("integration, react SSR", () => {
           ...(args ?? []),
           "--target=bun",
           "--outdir=" + out,
-          path.join(import.meta.dir, "react/ssr_test.jsx"),
+          path.join(import.meta.dir, "ssr-print.jsx"),
         ],
         {
           // cwd: import.meta.dir + "/react",
diff --git a/test/bundler/integration/vue/App.vue b/test/bundler/integration/vue/App.vue
new file mode 100644
index 000000000..83e38ecd1
--- /dev/null
+++ b/test/bundler/integration/vue/App.vue
@@ -0,0 +1,36 @@
+<script>
+  import { defineAsyncComponent } from 'vue'
+
+  const AsyncComp = defineAsyncComponent(() => {
+    return new Promise((resolve, reject) => {
+      // ...load component from server
+      resolve(/* loaded component */)
+    })
+  })
+  // ... use `AsyncComp` like a normal component
+
+  export default {
+    // reactive state
+    data() {
+      return {
+        count: 0
+      }
+    },
+
+    // functions that mutate state and trigger updates
+    methods: {
+      increment() {
+        this.count++
+      }
+    },
+
+    // lifecycle hooks
+    mounted() {
+      console.log(`The initial count is ${this.count}.`)
+    }
+  }
+</script>
+
+<template>
+  <button @click="increment">Count is: {{ count }}</button>
+</template>
diff --git a/test/bundler/integration/vue/benchmark.ts b/test/bundler/integration/vue/benchmark.ts
new file mode 100644
index 000000000..32fe6d717
--- /dev/null
+++ b/test/bundler/integration/vue/benchmark.ts
@@ -0,0 +1,19 @@
+import path from "path";
+import vue from "esbuild-plugin-vue-next";
+
+const build = await Bun.build({
+  entrypoints: [path.join(import.meta.dir, "/index.js")],
+  outdir: path.join(import.meta.dir, "/dist"),
+
+  plugins: [vue({})],
+
+  minify: true,
+  splitting: true,
+  sourcemap: "external",
+});
+
+if (!build.success) {
+  throw new AggregateError(build.logs);
+}
+
+console.log(build);
diff --git a/test/bundler/integration/vue/build.ts b/test/bundler/integration/vue/build.ts
new file mode 100644
index 000000000..c97d3f8c0
--- /dev/null
+++ b/test/bundler/integration/vue/build.ts
@@ -0,0 +1,18 @@
+import path from "path";
+import vue from "esbuild-plugin-vue-next";
+
+const build = await Bun.build({
+  entrypoints: [path.join(import.meta.dir, "/index.js")],
+  outdir: path.join(import.meta.dir, "/dist"),
+
+  plugins: [vue({})],
+
+  minify: true,
+  splitting: true,
+});
+
+if (!build.success) {
+  throw new AggregateError(build.logs);
+}
+
+console.log(build);
diff --git a/test/bundler/integration/vue/index.html b/test/bundler/integration/vue/index.html
new file mode 100644
index 000000000..bd8cb0d79
--- /dev/null
+++ b/test/bundler/integration/vue/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vue App Integration Test</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="/index.js" type="module"></script>
+</body>
+</html>
diff --git a/test/bundler/integration/vue/index.js b/test/bundler/integration/vue/index.js
new file mode 100644
index 000000000..df43f5b72
--- /dev/null
+++ b/test/bundler/integration/vue/index.js
@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+const app = createApp(App);
+
+app.mount("#app");
diff --git a/test/bundler/integration/vue/serve.mjs b/test/bundler/integration/vue/serve.mjs
new file mode 100644
index 000000000..acaaeea58
--- /dev/null
+++ b/test/bundler/integration/vue/serve.mjs
@@ -0,0 +1,25 @@
+import * as http from "http";
+import * as fs from "fs";
+
+const distDir = process.argv[2];
+if (!distDir) {
+  throw new Error(".");
+}
+
+const server = http.createServer((req, res) => {
+  if (req.url === "/") {
+    res.writeHead(200, { "Content-Type": "text/html" });
+    fs.createReadStream("./index.html").pipe(res);
+  } else if (req.url === "/favicon.ico") {
+    res.writeHead(200, { "Content-Type": "image/x-icon" });
+    fs.createReadStream("../favicon.ico").pipe(res);
+  } else if (!req.url.includes("..") && fs.existsSync(distDir + req.url)) {
+    res.writeHead(200, { "Content-Type": "text/javascript" });
+    fs.createReadStream(distDir + req.url).pipe(res);
+  } else {
+    res.writeHead(404);
+    res.end();
+  }
+});
+server.listen(3000, "127.0.0.1");
+console.log("Listening on http://localhost:3000");
diff --git a/test/bundler/integration/vue/vue-client.test.ts b/test/bundler/integration/vue/vue-client.test.ts
new file mode 100644
index 000000000..327098062
--- /dev/null
+++ b/test/bundler/integration/vue/vue-client.test.ts
@@ -0,0 +1,51 @@
+import path from "path";
+import { describe, test, expect } from "bun:test";
+import { bunExe } from "harness";
+
+const modes = [
+  //
+  { label: "base" },
+  { label: "minify-all", args: ["--minify"] },
+  { label: "minify-syntax", args: ["--minify-syntax"] },
+  { label: "minify-whitespace", args: ["--minify-whitespace"] },
+  { label: "sourcemaps", args: ["--minify", "--sourcemap=external"] },
+];
+const nodeEnvs = ["development", "production"];
+const combinations = nodeEnvs.flatMap(nodeEnv => modes.map(mode => ({ options: mode, nodeEnv })));
+
+describe("bundler integration, vue client", () => {
+  for (const {
+    options: { label, args },
+    nodeEnv,
+  } of combinations) {
+    test(label + ", NODE_ENV=" + nodeEnv, async () => {
+      const out = path.join(import.meta.dir, "react/dist/client/" + label + "-" + nodeEnv);
+      const x = Bun.spawnSync(
+        [
+          bunExe(),
+          "build",
+          ...(args ?? []),
+          "--outdir=" + out,
+          "--splitting",
+          path.join(import.meta.dir, "/index.jsx"),
+        ],
+        {
+          // cwd: import.meta.dir + "/react",
+          env: nodeEnv ? { NODE_ENV: nodeEnv } : undefined,
+        },
+      );
+      if (x.exitCode !== 0) {
+        console.error(x.stderr.toString());
+        throw new Error("Failed to build");
+      }
+      const proc = Bun.spawn(["node", path.join(import.meta.dir, "puppeteer.mjs"), out], {
+        cwd: path.join(import.meta.dir, "react"),
+      });
+      await proc.exited;
+      expect(proc.exitCode).toBe(0);
+      const output = JSON.parse(await new Response(proc.stdout).text());
+      expect(output.logs).toMatchSnapshot("Browser console logs");
+      expect(output.domSnapshots).toMatchSnapshot("DOM Snapshots");
+    });
+  }
+});