Refactor/vite playground

cli/plasmo/package.json

@@ -46,6 +46,7 @@
     "@plasmohq/init": "workspace:*",
     "@plasmohq/parcel-config": "workspace:*",
     "@plasmohq/parcel-core": "workspace:*",
+    "@vitejs/plugin-react": "4.3.4",
     "buffer": "6.0.3",
     "chalk": "5.4.1",
     "change-case": "5.4.4",
@@ -67,7 +68,8 @@
     "semver": "7.7.1",
     "sharp": "0.33.5",
     "tempy": "3.1.0",
-    "typescript": "5.7.3"
+    "typescript": "5.7.3",
+    "vite": "6.2.0"
   },
   "devDependencies": {
     "@plasmo/config": "workspace:*",

cli/plasmo/src/commands/build.ts

@@ -5,12 +5,13 @@ import { iLog, sLog } from "@plasmo/utils/logging"
 import { getBundleConfig } from "~features/extension-devtools/get-bundle-config"
 import { nextNewTab } from "~features/extra/next-new-tab"
 import { checkNewVersion } from "~features/framework-update/version-tracker"
-import { createParcelBuilder } from "~features/helpers/create-parcel-bundler"
+import { createViteBuilder } from "~features/helpers/create-vite-bundler"
 import { printHeader } from "~features/helpers/print"
 import { createManifest } from "~features/manifest-factory/create-manifest"
 import { zipBundle } from "~features/manifest-factory/zip"
+import { build } from 'vite'
 
-async function build() {
+async function buildPlasmo() {
   printHeader()
   checkNewVersion()
 
@@ -31,24 +32,32 @@ async function build() {
 
   const plasmoManifest = await createManifest(bundleConfig)
 
-  const bundler = await createParcelBuilder(plasmoManifest, {
+  // Use the Vite builder function
+  const viteConfig = await createViteBuilder(plasmoManifest, {
     mode: "production",
-    shouldDisableCache: true,
-    shouldContentHash: false,
-    defaultTargetOptions: {
-      shouldOptimize: true,
-      shouldScopeHoist: hasFlag("--hoist")
-    }
+    // defaultTargetOptions: {
+    //   shouldOptimize: true,
+    //   shouldScopeHoist: hasFlag("--hoist")
+    // }
   })
 
-  const result = await bundler.run()
-  sLog(`Finished in ${result.buildTime}ms!`)
+  // Measure build time
+  const startTime = Date.now()
 
-  await plasmoManifest.postBuild()
+  // Call vite.build() directly with the generated Vite config
+  const result = await build(viteConfig)
+
+  const endTime = Date.now()
+
+  // Log the build time manually
+  const buildDuration = endTime - startTime
+  sLog(`Finished in ${buildDuration}ms!`)
+
+  // await plasmoManifest.postBuild()
 
   if (hasFlag("--zip")) {
     await zipBundle(plasmoManifest.commonPath)
   }
 }
 
-export default build
+export default buildPlasmo

cli/plasmo/src/commands/dev.ts

@@ -8,10 +8,11 @@ import { eLog, iLog, sLog, vLog } from "@plasmo/utils/logging"
 import { getBundleConfig } from "~features/extension-devtools/get-bundle-config"
 import { createProjectWatcher } from "~features/extension-devtools/project-watcher"
 import { checkNewVersion } from "~features/framework-update/version-tracker"
-import { createParcelBuilder } from "~features/helpers/create-parcel-bundler"
 import { startLoading, stopLoading } from "~features/helpers/loading-animation"
 import { printHeader } from "~features/helpers/print"
+import { createViteBuilder } from "~features/helpers/create-vite-bundler"
 import { createManifest } from "~features/manifest-factory/create-manifest"
+import { createServer } from 'vite'
 
 async function dev() {
   printHeader()
@@ -46,91 +47,145 @@ async function dev() {
 
   const projectWatcher = await createProjectWatcher(plasmoManifest)
 
-  const bundler = await createParcelBuilder(plasmoManifest, {
-    logLevel: "verbose",
-    shouldBundleIncrementally: true,
-    serveOptions: {
+  const { default: chalk } = await import("chalk")
+
+  const viteConfig = await createViteBuilder(plasmoManifest, {
+    mode: "production",
+    server: {
       host: serveHost,
-      port: servePort
+      port: servePort,
+      hmr: {
+        host: hmrHost,
+        port: hmrPort
+      }
     },
-    hmrOptions: {
-      host: hmrHost,
-      port: hmrPort
-    }
-  })
+    plugins: [
+      {
+        name: "build-logger",
 
-  const { default: chalk } = await import("chalk")
+        // 🔥 DEVELOPMENT MODE (vite dev)
+        configureServer(server) {
+          server.middlewares.use((req, res, next) => {
+            console.log(`📢 Incoming request: ${req.url}`);
+            next();
+          });
+        },
 
-  const bundlerWatcher = await bundler.watch(async (err, event) => {
-    if (err) {
-      stopLoading()
-      throw err
-    }
-
-    if (event === undefined) {
-      return
-    }
-
-    if (event.type === "buildStart") {
-      startLoading()
-      return
-    }
-
-    if (event.type === "buildSuccess") {
-      stopLoading()
-      sLog(`Extension re-packaged in ${chalk.bold(event.buildTime)}ms! 🚀`)
-      await plasmoManifest.postBuild()
-      buildWatcher.broadcast(BuildSocketEvent.BuildReady)
-      return
-    }
-
-    if (event.type === "buildFailure") {
-      stopLoading()
-      if (!isVerbose()) {
-        eLog(
-          chalk.redBright(
-            `Build failed. To debug, run ${chalk.bold("plasmo dev --verbose")}.`
-          )
-        )
-      }
-      event.diagnostics.forEach((diagnostic) => {
-        eLog(chalk.redBright(diagnostic.message))
-        if (diagnostic.stack) {
-          vLog(diagnostic.stack)
-        }
-
-        diagnostic.hints?.forEach((hint) => {
-          vLog(hint)
-        })
-
-        diagnostic.codeFrames?.forEach((codeFrame) => {
-          if (codeFrame.code) {
-            vLog(codeFrame.code)
-          }
-          codeFrame.codeHighlights.forEach((codeHighlight) => {
-            if (codeHighlight.message) {
-              vLog(codeHighlight.message)
-            }
-
-            vLog(
-              chalk.underline(
-                `${codeFrame.filePath}:${codeHighlight.start.line}:${codeHighlight.start.column}`
-              )
-            )
-          })
-        })
-      })
-    }
-    process.env.__PLASMO_FRAMEWORK_INTERNAL_WATCHER_STARTED = "true"
+        async handleHotUpdate() {
+          startLoading();
+
+          const startTime = performance.now();
+
+          return new Promise((resolve) => {
+            setTimeout(async () => {
+              stopLoading();
+
+              const endTime = performance.now();
+              const buildTime = (endTime - startTime).toFixed(2);
+
+              sLog(`Extension re-packaged in ${chalk.bold(buildTime)}ms! 🚀`);
+
+              await plasmoManifest.postBuild();
+              buildWatcher.broadcast(BuildSocketEvent.BuildReady);
+
+              resolve([]);
+            }, 0);
+          });
+        },
+
+
+        // 🏗 BUILD MODE (vite build)
+        buildStart() {
+        },
+
+        // 🏗 BUILD MODE (vite build)
+        async buildEnd(this, error) {
+
+        },
+
+        closeBundle() {
+          console.log("🎉 Finalizing build...");
+        },
+      },
+    ]
+    // defaultTargetOptions: {
+    //   shouldOptimize: true,
+    //   shouldScopeHoist: hasFlag("--hoist")
+    // }
   })
 
-  const cleanup = () => {
-    projectWatcher?.unsubscribe()
-    bundlerWatcher.unsubscribe()
-  }
+  const watchPath = plasmoManifest.commonPath.projectDirectory
+
+  console.log("watchPath:", watchPath)
+
+  const previewServer = await createServer({
+    ...viteConfig,
+    root: watchPath,
+    server: {
+      host: hmrHost,
+      port: hmrPort
+    },
+  })
 
-  process.on("SIGINT", cleanup)
-  process.on("SIGTERM", cleanup)
+  await previewServer.listen()
+
+  previewServer.printUrls()
+  previewServer.bindCLIShortcuts({ print: true })
+
+  // const bundlerWatcher = await bundler.watch(async (err, event) => {
+  //   if (err) {
+  //     stopLoading()
+  //     throw err
+  //   }
+
+
+  //   if (event.type === "buildFailure") {
+  //     stopLoading()
+  //     if (!isVerbose()) {
+  //       eLog(
+  //         chalk.redBright(
+  //           `Build failed. To debug, run ${chalk.bold("plasmo dev --verbose")}.`
+  //         )
+  //       )
+  //     }
+  //     event.diagnostics.forEach((diagnostic) => {
+  //       eLog(chalk.redBright(diagnostic.message))
+  //       if (diagnostic.stack) {
+  //         vLog(diagnostic.stack)
+  //       }
+
+  //       diagnostic.hints?.forEach((hint) => {
+  //         vLog(hint)
+  //       })
+
+  //       diagnostic.codeFrames?.forEach((codeFrame) => {
+  //         if (codeFrame.code) {
+  //           vLog(codeFrame.code)
+  //         }
+  //         codeFrame.codeHighlights.forEach((codeHighlight) => {
+  //           if (codeHighlight.message) {
+  //             vLog(codeHighlight.message)
+  //           }
+
+  //           vLog(
+  //             chalk.underline(
+  //               `${codeFrame.filePath}:${codeHighlight.start.line}:${codeHighlight.start.column}`
+  //             )
+  //           )
+  //         })
+  //       })
+  //     })
+  //   }
+  //   process.env.__PLASMO_FRAMEWORK_INTERNAL_WATCHER_STARTED = "true"
+  // })
+
+  // const cleanup = () => {
+  //   projectWatcher?.unsubscribe()
+  //   bundlerWatcher.unsubscribe()
+  // }
+
+  // process.on("SIGINT", cleanup)
+  // process.on("SIGTERM", cleanup)
 }
 
 export default dev

cli/plasmo/src/features/extension-devtools/generate-icons.ts

@@ -62,6 +62,8 @@ export async function generateIcons({
   assetsDirectory,
   genAssetsDirectory
 }: CommonPath) {
+  console.log("Generating assets in", genAssetsDirectory)
+
   // Precalculate the base icon paths
   if (iconState.baseIconPaths.length === 0) {
     const iconNameList = getPrioritizedIconPaths()
@@ -120,8 +122,8 @@ export async function generateIcons({
         return devProvidedIcon !== undefined
           ? copy(devProvidedIcon, generatedIconPath)
           : sharp(Buffer.from(baseIconBuffer))
-              .resize({ width, height: width })
-              .toFile(generatedIconPath)
+            .resize({ width, height: width })
+            .toFile(generatedIconPath)
       }
     })
   )

cli/plasmo/src/features/extension-devtools/project-watcher.ts

@@ -140,6 +140,7 @@ export const handleProjectFile = async (
     }
 
     case WatchReason.PopupHtml: {
+      console.log("Creating popup.html")
       await plasmoManifest.scaffolder.createPageHtml("popup", isEnabled && path)
       return
     }

cli/plasmo/src/features/extra/next-new-tab.ts

@@ -69,8 +69,11 @@ export const nextNewTab = async () => {
 
   // Create manifest.json with chrome_url_overrides with index.html
 
+  const path = resolve(extensionDirectory, "manifest.json")
+
+  console.log(">>>>>>>>>>>>> Writing to manifest:", path)
   await writeJson(
-    resolve(extensionDirectory, "manifest.json"),
+    path,
     generateNewTabManifest(packageData),
     {
       spaces: 2