From 031492b396a0b9165f32b8c97f4bd5dc4fb8f79b Mon Sep 17 00:00:00 2001
From: Dave Caruso <me@paperdave.net>
Date: Thu, 11 May 2023 21:32:44 -0400
Subject: start vue tests

---
 test/bundler/integration/package.json              |  4 +-
 test/bundler/integration/react-client.test.ts      | 51 ----------------------
 test/bundler/integration/react-ssr.test.ts         | 47 --------------------
 .../bundler/integration/react/react-client.test.ts | 44 +++++++++++++++++++
 test/bundler/integration/react/react-ssr.test.ts   | 47 ++++++++++++++++++++
 test/bundler/integration/vue/App.vue               | 36 +++++++++++++++
 test/bundler/integration/vue/benchmark.ts          | 19 ++++++++
 test/bundler/integration/vue/build.ts              | 18 ++++++++
 test/bundler/integration/vue/index.html            | 13 ++++++
 test/bundler/integration/vue/index.js              |  6 +++
 test/bundler/integration/vue/serve.mjs             | 25 +++++++++++
 test/bundler/integration/vue/vue-client.test.ts    | 51 ++++++++++++++++++++++
 12 files changed, 262 insertions(+), 99 deletions(-)
 delete mode 100644 test/bundler/integration/react-client.test.ts
 delete mode 100644 test/bundler/integration/react-ssr.test.ts
 create mode 100644 test/bundler/integration/react/react-client.test.ts
 create mode 100644 test/bundler/integration/react/react-ssr.test.ts
 create mode 100644 test/bundler/integration/vue/App.vue
 create mode 100644 test/bundler/integration/vue/benchmark.ts
 create mode 100644 test/bundler/integration/vue/build.ts
 create mode 100644 test/bundler/integration/vue/index.html
 create mode 100644 test/bundler/integration/vue/index.js
 create mode 100644 test/bundler/integration/vue/serve.mjs
 create mode 100644 test/bundler/integration/vue/vue-client.test.ts

(limited to 'test')

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-client.test.ts
deleted file mode 100644
index b301dd1fe..000000000
--- a/test/bundler/integration/react-client.test.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-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("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 x = Bun.spawnSync(
-        [
-          bunExe(),
-          "build",
-          ...(args ?? []),
-          "--outdir=" + out,
-          "--splitting",
-          path.join(import.meta.dir, "react/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, "react/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");
-    });
-  }
-});
diff --git a/test/bundler/integration/react-ssr.test.ts b/test/bundler/integration/react-ssr.test.ts
deleted file mode 100644
index f290158fc..000000000
--- a/test/bundler/integration/react-ssr.test.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-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("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 x = Bun.spawnSync(
-        [
-          bunExe(),
-          "build",
-          ...(args ?? []),
-          "--target=bun",
-          "--outdir=" + out,
-          path.join(import.meta.dir, "react/ssr_test.jsx"),
-        ],
-        {
-          // cwd: import.meta.dir + "/react",
-          env: nodeEnv ? { NODE_ENV: nodeEnv } : undefined,
-        },
-      );
-      const proc = Bun.spawnSync(["bun", path.join(out, "ssr-print.js")], {
-        cwd: path.join(import.meta.dir, "react"),
-      });
-      if (!proc.success) {
-        console.error(proc.stderr.toString());
-        throw new Error("Process failed");
-      }
-      expect(proc.stdout).toMatchSnapshot("Output");
-    });
-  }
-});
diff --git a/test/bundler/integration/react/react-client.test.ts b/test/bundler/integration/react/react-client.test.ts
new file mode 100644
index 000000000..0785b7630
--- /dev/null
+++ b/test/bundler/integration/react/react-client.test.ts
@@ -0,0 +1,44 @@
+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, react client", () => {
+  for (const {
+    options: { label, args },
+    nodeEnv,
+  } of combinations) {
+    test(label + ", NODE_ENV=" + nodeEnv, async () => {
+      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, "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");
+    });
+  }
+});
diff --git a/test/bundler/integration/react/react-ssr.test.ts b/test/bundler/integration/react/react-ssr.test.ts
new file mode 100644
index 000000000..9b4d49e19
--- /dev/null
+++ b/test/bundler/integration/react/react-ssr.test.ts
@@ -0,0 +1,47 @@
+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, react SSR", () => {
+  for (const {
+    options: { label, args },
+    nodeEnv,
+  } of combinations) {
+    test(label + ", NODE_ENV=" + nodeEnv, async () => {
+      const out = path.join(import.meta.dir, "dist/ssr/" + label + "-" + nodeEnv);
+      const x = Bun.spawnSync(
+        [
+          bunExe(),
+          "build",
+          ...(args ?? []),
+          "--target=bun",
+          "--outdir=" + out,
+          path.join(import.meta.dir, "ssr-print.jsx"),
+        ],
+        {
+          // cwd: import.meta.dir + "/react",
+          env: nodeEnv ? { NODE_ENV: nodeEnv } : undefined,
+        },
+      );
+      const proc = Bun.spawnSync(["bun", path.join(out, "ssr-print.js")], {
+        cwd: path.join(import.meta.dir, "react"),
+      });
+      if (!proc.success) {
+        console.error(proc.stderr.toString());
+        throw new Error("Process failed");
+      }
+      expect(proc.stdout).toMatchSnapshot("Output");
+    });
+  }
+});
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");
+    });
+  }
+});
-- 
cgit v1.2.3