From 839bb69d09da05532c57711869e46055e2df1e4c Mon Sep 17 00:00:00 2001
From: Miao Wang <shankerwangmiao@gmail.com>
Date: Thu, 11 Apr 2024 02:45:44 +0800
Subject: [PATCH] Using babel for polyfill js

---
 _vite.config.mjs | 54 ++++++++++++++++++++++++++++++++++++++++++++++++
 package.json     |  2 ++
 2 files changed, 56 insertions(+)

diff --git a/_vite.config.mjs b/_vite.config.mjs
index 164aeeb..e89c46b 100644
--- a/_vite.config.mjs
+++ b/_vite.config.mjs
@@ -6,6 +6,8 @@ import components from "unplugin-vue-components/vite";
 import legacy from "@vitejs/plugin-legacy";
 import { toSass } from "sass-cast";
 import { Liquid, Tag as LiquidTag } from "liquidjs";
+import Babel from "@babel/core";
+import BabelPresetEnv from "@babel/preset-env";
 
 const visualizer = await (async () => {
   if (process.env.VISUALIZER) {
@@ -129,6 +131,58 @@ export default defineConfig(({ mode }) => ({
         resolve(__dirname, "_src/lib/legacy-polyfill.js"),
       ],
     }),
+    (() => {
+      const savedConfig = {};
+      const targets = [];
+      return {
+        name: "babel-transform-legacy-polyfill",
+        config(config, env) {
+          savedConfig.minify = !!config.build?.minify;
+        },
+        generateBundle(opts, bundle) {
+          const legacyPolyfill = (() => {
+            for (const key in bundle) {
+              if (
+                key.includes("legacy") &&
+                bundle[key].facadeModuleId === "\0" + "vite/legacy-polyfills"
+              ) {
+                return bundle[key];
+              }
+            }
+            return null;
+          })();
+          if (!legacyPolyfill) {
+            return;
+          }
+          const result = Babel.transform(legacyPolyfill.code, {
+            babelrc: false,
+            configFile: false,
+            compact: savedConfig.minify,
+            sourceMaps: false,
+            inputSourceMap: undefined,
+            presets: [
+              [
+                BabelPresetEnv,
+                {
+                  targets: targets,
+                  bugfixes: true,
+                  loose: false,
+                  modules: false,
+                  useBuiltIns: false,
+                  corejs: undefined,
+                  shippedProposals: true,
+                  ignoreBrowserslistConfig: true,
+                  exclude: [
+                    "@babel/plugin-transform-typeof-symbol",
+                  ],
+                },
+              ],
+            ],
+          });
+          legacyPolyfill.code = result.code;
+        },
+      };
+    })(),
     visualizer({
       filename: "_stats.html",
       gzipSize: true,
diff --git a/package.json b/package.json
index d714217..85e13a9 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,8 @@
     "format": "prettier --write \"_src/**/*.vue\" \"_src/**/*.html\" \"_src/**/*.js\" \"_src/**/*.scss\" *.mjs"
   },
   "dependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
     "@vitejs/plugin-legacy": "^5.3.2",
     "@vitejs/plugin-vue": "^5.0.4",
     "@webcomponents/template": "^1.5.1",