vite-mix 0.7.3

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026 Hugo Rodrigues
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,202 @@
+# vite-mix
+
+[![npm version](https://img.shields.io/npm/v/vite-mix)](https://www.npmjs.com/package/vite-mix)
+[![npm downloads](https://img.shields.io/npm/dt/vite-mix)](https://www.npmjs.com/package/vite-mix)
+[![License: ISC](https://img.shields.io/badge/license-ISC-blue)](LICENSE)
+[![CI](https://github.com/hugoboss17/vite-mix/actions/workflows/ci.yml/badge.svg)](https://github.com/hugoboss17/vite-mix/actions/workflows/ci.yml)
+[![codecov](https://codecov.io/gh/hugoboss17/vite-mix/graph/badge.svg)](https://codecov.io/gh/hugoboss17/vite-mix)
+[![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/hugoboss17/vite-mix/badge)](https://scorecard.dev/viewer/?uri=github.com/hugoboss17/vite-mix)
+[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/12098/badge)](https://www.bestpractices.dev/projects/12098)
+[![SLSA Level 3](https://slsa.dev/images/gh-badge-level3.svg)](https://slsa.dev)
+[![Socket Badge](https://socket.dev/api/badge/npm/package/vite-mix)](https://socket.dev/npm/package/vite-mix)
+
+Use Vite with a Laravel Mix-like API.
+
+## Purpose
+
+Laravel Mix is no longer maintained. This package helps migrate legacy Mix-style build definitions to Vite with minimal frontend structure changes.
+
+## Install
+
+```bash
+npm install vite-mix
+```
+
+Peer dependencies (install only what you need):
+
+```bash
+npm install --save-dev vite                  # required
+npm install --save-dev sass                  # if using .scss/.sass
+npm install --save-dev @vitejs/plugin-vue    # if using Vue 3
+```
+
+## Usage
+
+Replace your `webpack.mix.js` with `vite.config.js` with a Mix-style definition:
+
+```js
+// vite.config.js
+import { defineConfig } from "vite";
+import { mix, viteConfigFromGraph } from "vite-mix";
+
+const graph = mix()
+  .setPublicPath("public")
+  .js("resources/assets/js/app.js", "public/js")
+  .vue()
+  .sass("resources/assets/sass/app.scss", "public/css")
+  .css("resources/assets/css/simple.css", "public/css")
+  .copy("resources/assets/images/logo.png", "public/images/logo.png")
+  .copyDirectory("resources/assets/fonts", "public/fonts")
+  .autoload({ jquery: ["$", "jQuery", "window.jQuery"] })
+  .toGraph();
+
+export default defineConfig(
+  async ({ mode }) => await viteConfigFromGraph(graph, mode),
+);
+```
+
+If you need to set the mode manually (e.g. outside Vite):
+
+```js
+const mode =
+  process.env.NODE_ENV === "production" ? "production" : "development";
+await viteConfigFromGraph(graph, mode);
+```
+
+Add scripts to your `package.json`:
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "watch": "vite build --watch"
+  }
+}
+```
+
+Then run:
+
+```bash
+npm run build    # production
+npm run watch    # watch mode
+npm run dev      # dev server
+```
+
+## Supported API
+
+| Method                             | Description                                                       |
+| ---------------------------------- | ----------------------------------------------------------------- |
+| `mix()`                            | Create a new Mix instance                                         |
+| `.setPublicPath(path)`             | Output directory (default: `"public"`)                            |
+| `.js(src, dest)`                   | JavaScript/TypeScript entry point                                 |
+| `.vue()`                           | Enable Vue 3                                                      |
+| `.sass(src, dest)`                 | Sass/SCSS entry point                                             |
+| `.css(src, dest)`                  | Plain CSS entry point                                             |
+| `.copy(src, dest)`                 | Copy a file to the output directory                               |
+| `.copyDirectory(src, dest)`        | Copy a directory to the output directory                          |
+| `.autoload(map)`                   | Inject globals (e.g. jQuery, Lodash)                              |
+| `.toGraph()`                       | Returns the build graph (pass to `viteConfigFromGraph`)           |
+| `viteConfigFromGraph(graph, mode)` | Returns a Vite `InlineConfig` (`mode` from Vite's `defineConfig`) |
+
+## Examples
+
+### Basic JavaScript
+
+```js
+import { defineConfig } from "vite";
+import { mix, viteConfigFromGraph } from "vite-mix";
+
+const graph = mix()
+  .setPublicPath("public")
+  .js("resources/assets/js/app.js", "public/js")
+  .toGraph();
+
+export default defineConfig(
+  async ({ mode }) => await viteConfigFromGraph(graph, mode),
+);
+```
+
+### Sass / CSS
+
+```js
+mix()
+  .setPublicPath("public")
+  .sass("resources/assets/sass/app.scss", "public/css")
+  .css("resources/assets/css/vendor.css", "public/css")
+  .toGraph();
+```
+
+### Vue 3
+
+```js
+mix()
+  .setPublicPath("public")
+  .js("resources/assets/js/app.js", "public/js")
+  .js("resources/assets/js/admin.js", "public/js")
+  .vue()
+  .toGraph();
+```
+
+only the second JS import uses Vue
+
+### Autoloading
+
+Works with any library, not just jQuery:
+
+```js
+mix()
+  .setPublicPath("public")
+  .autoload({
+    jquery: ["$", "jQuery", "window.jQuery"],
+    lodash: ["_"],
+  })
+  .toGraph();
+```
+
+### Static Assets
+
+```js
+mix()
+  .setPublicPath("public")
+  .copy("resources/assets/images/logo.png", "public/images/logo.png")
+  .copyDirectory("resources/assets/fonts", "public/fonts")
+  .toGraph();
+```
+
+### Full Example
+
+```js
+// vite.config.js
+import { defineConfig } from "vite";
+import { mix, viteConfigFromGraph } from "vite-mix";
+
+const graph = mix()
+  .setPublicPath("public")
+  .js("resources/assets/js/app.js", "public/js")
+  .vue()
+  .sass("resources/assets/sass/app.scss", "public/css")
+  .css("resources/assets/css/vendor.css", "public/css")
+  .autoload({
+    jquery: ["$", "jQuery", "window.jQuery"],
+    lodash: ["_"],
+  })
+  .copy("resources/assets/images/logo.png", "public/images/logo.png")
+  .copyDirectory("resources/assets/fonts", "public/fonts")
+  .toGraph();
+
+export default defineConfig(
+  async ({ mode }) => await viteConfigFromGraph(graph, mode),
+);
+```
+
+## Webpack compatibility handled
+
+- Sass `~` imports — `@import "~bootstrap-sass/assets/stylesheets/bootstrap"`
+- Extensionless Vue imports — `import Component from "../Component"`
+- Directory Vue imports resolving to `index.vue`
+- Legacy bare asset paths in templates resolving from `resources/assets`
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md).

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import { InlineConfig } from 'vite';
+
+declare function viteConfigFromGraph(graph: MixGraph, mode: string): Promise<InlineConfig>;
+
+type CopyTarget = {
+    src: string;
+    dest: string;
+    rename?: string;
+};
+type CopyDirTarget = {
+    src: string;
+    dest: string;
+};
+type CssEntry = {
+    src: string;
+    destDir: string;
+};
+type JsEntry = {
+    src: string;
+    destDirOrFile: string;
+};
+type MixGraph = {
+    publicPath: string;
+    js: JsEntry[];
+    css: CssEntry[];
+    sass: Array<{
+        src: string;
+        destDir: string;
+    }>;
+    copies: CopyTarget[];
+    copyDirs: CopyDirTarget[];
+    autoload: Record<string, string[]>;
+    vue: boolean;
+};
+declare class Mix {
+    private graph;
+    constructor();
+    setPublicPath(p: string): this;
+    js(src: string, dest: string): this;
+    vue(): this;
+    sass(src: string, dest: string): this;
+    css(src: string, destDir: string): this;
+    copy(src: string, dest: string): this;
+    copyDirectory(src: string, dest: string): this;
+    autoload(map: Record<string, string[]>): this;
+    toGraph(): MixGraph;
+}
+declare function mix(): Mix;
+
+export { type CopyDirTarget, type CopyTarget, type CssEntry, type JsEntry, Mix, type MixGraph, mix, viteConfigFromGraph };

package/dist/index.js

@@ -0,0 +1,342 @@
+// src/index.ts
+import path2 from "path";
+
+// src/driver-vite.ts
+import path from "path";
+import fs from "fs";
+import vue from "@vitejs/plugin-vue";
+function relKeyFromResources(file) {
+  return file.replace(/^resources\/assets\/(js|css|sass)\//, "").replace(/\.(js|css|scss|sass)$/, "");
+}
+function ensurePosix(p) {
+  return p.split(path.sep).join("/");
+}
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+var VALID_IDENT = /^[a-zA-Z_$][\w$]*(\.[a-zA-Z_$][\w$]*)*$/;
+var VALID_MODULE = /^[@a-zA-Z][\w./@-]*$/;
+function hasFile(p) {
+  try {
+    return fs.statSync(p).isFile();
+  } catch {
+    return false;
+  }
+}
+function hasDir(p) {
+  try {
+    return fs.statSync(p).isDirectory();
+  } catch {
+    return false;
+  }
+}
+function isBareAssetImport(source) {
+  if (source.startsWith(".") || source.startsWith("/") || source.startsWith("@")) return false;
+  if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(source)) return false;
+  const sourcePath = source.split("?")[0].split("#")[0];
+  if (!sourcePath.includes("/")) return false;
+  return /\.(png|jpe?g|gif|svg|webp|avif|ico|bmp|tiff|woff2?|eot|ttf|otf)$/i.test(sourcePath);
+}
+function webpackCompatResolvePlugin() {
+  return {
+    name: "mix-webpack-compat-resolve",
+    enforce: "pre",
+    resolveId(source, importer) {
+      if (!importer) return null;
+      const isRelative = source.startsWith(".");
+      if (isRelative && !path.extname(source)) {
+        const importerPath = importer.split("?")[0];
+        const baseDir = path.dirname(importerPath);
+        const abs = path.resolve(baseDir, source);
+        const vueSibling = `${abs}.vue`;
+        if (hasFile(vueSibling)) return vueSibling;
+        if (hasDir(abs)) {
+          const vueIndex = path.join(abs, "index.vue");
+          if (hasFile(vueIndex)) return vueIndex;
+        }
+        const parentDir = path.dirname(abs);
+        if (path.basename(abs) === path.basename(parentDir)) {
+          const parentIndexVue = path.join(parentDir, "index.vue");
+          if (hasFile(parentIndexVue)) return parentIndexVue;
+        }
+      }
+      if (isBareAssetImport(source)) {
+        const sourcePath = source.split("?")[0].split("#")[0];
+        const candidates = [path.resolve(process.cwd(), "resources/assets", sourcePath), path.resolve(process.cwd(), "resources", sourcePath)];
+        for (const candidate of candidates) {
+          if (hasFile(candidate)) return candidate;
+        }
+      }
+      return null;
+    }
+  };
+}
+function autoloadPlugin(identMap) {
+  const patterns = Object.entries(identMap).map(([ident, module]) => {
+    if (!VALID_IDENT.test(ident)) throw new Error(`Invalid autoload identifier: ${ident}`);
+    if (!VALID_MODULE.test(module)) throw new Error(`Invalid autoload module: ${module}`);
+    return {
+      ident,
+      module,
+      localName: ident.startsWith("window.") ? ident.slice(7) : ident,
+      isWindow: ident.startsWith("window."),
+      regex: ident.startsWith("window.") ? null : new RegExp(`(?<![.\\w$])${escapeRegExp(ident)}(?![\\w$])`)
+    };
+  });
+  return {
+    name: "mix-inject",
+    enforce: "post",
+    transform(code, id) {
+      if (id.includes("node_modules")) return;
+      if (!/\.[jt]sx?$/.test(id.split("?")[0])) return;
+      const toAdd = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (const { ident, module, localName, isWindow, regex } of patterns) {
+        if (seen.has(localName)) continue;
+        if (code.includes(`from '${module}'`) || code.includes(`from "${module}"`) || code.includes(`require('${module}')`) || code.includes(`require("${module}")`))
+          continue;
+        const used = isWindow ? code.includes(ident) : regex.test(code);
+        if (used) {
+          toAdd.push(`import ${localName} from '${module}';`);
+          seen.add(localName);
+        }
+      }
+      if (!toAdd.length) return;
+      return { code: toAdd.join("\n") + "\n" + code, map: null };
+    }
+  };
+}
+async function collectFiles(dir) {
+  const entries = await fs.promises.readdir(dir, { recursive: true, withFileTypes: true });
+  return entries.filter((e) => e.isFile()).map((e) => {
+    const abs = path.join(e.parentPath, e.name);
+    return { abs, rel: path.relative(dir, abs) };
+  });
+}
+function safePath(base, untrusted) {
+  const resolved = path.resolve(base, untrusted);
+  return resolved.startsWith(base + path.sep) ? resolved : null;
+}
+function outputPath(dest, filename) {
+  return dest && dest !== "." ? `${dest}/${filename}` : filename;
+}
+function staticCopyPlugin(targets) {
+  return {
+    name: "mix-static-copy",
+    async buildStart() {
+      for (const { src, dest, rename } of targets) {
+        try {
+          if (src.endsWith("/**/*")) {
+            const srcDir = src.slice(0, -5);
+            for (const { abs, rel } of await collectFiles(srcDir)) {
+              this.emitFile({ type: "asset", fileName: outputPath(dest, rel), source: await fs.promises.readFile(abs) });
+            }
+          } else {
+            const filename = rename ?? path.basename(src);
+            this.emitFile({ type: "asset", fileName: outputPath(dest, filename), source: await fs.promises.readFile(src) });
+          }
+        } catch (err) {
+          if (err.code !== "ENOENT") throw err;
+        }
+      }
+    },
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const url = decodeURIComponent(req.url?.split("?")[0] ?? "");
+        for (const { src, dest, rename } of targets) {
+          if (src.endsWith("/**/*")) {
+            const prefix = `/${dest}/`;
+            if (url.startsWith(prefix)) {
+              const srcDir = path.resolve(src.slice(0, -5));
+              const file = safePath(srcDir, url.slice(prefix.length));
+              if (!file) {
+                next();
+                return;
+              }
+              fs.promises.readFile(file).then((content) => res.end(content)).catch(() => next());
+              return;
+            }
+          } else {
+            const filename = rename ?? path.basename(src);
+            if (url === `/${outputPath(dest, filename)}`) {
+              fs.promises.readFile(src).then((content) => res.end(content)).catch(() => next());
+              return;
+            }
+          }
+        }
+        next();
+      });
+    }
+  };
+}
+async function viteConfigFromGraph(graph, mode) {
+  const isProd = mode === "production";
+  const input = {};
+  for (const e of graph.js) {
+    input[relKeyFromResources(e.src)] = path.resolve(e.src);
+  }
+  for (const e of graph.sass) {
+    input[relKeyFromResources(e.src)] = path.resolve(e.src);
+  }
+  for (const e of graph.css) {
+    input[relKeyFromResources(e.src)] = path.resolve(e.src);
+  }
+  const staticTargets = [];
+  const resolvedPublic = path.resolve(graph.publicPath);
+  const publicPrefixRe = new RegExp(`^${escapeRegExp(ensurePosix(graph.publicPath))}/?`);
+  function guardDest(dest) {
+    const resolved = path.resolve(graph.publicPath, dest);
+    if (resolved !== resolvedPublic && !resolved.startsWith(resolvedPublic + path.sep)) {
+      throw new Error(`copy destination escapes publicPath: ${dest}`);
+    }
+  }
+  for (const c of graph.copies) {
+    const normalizedDest = ensurePosix(c.dest).replace(publicPrefixRe, "");
+    guardDest(normalizedDest);
+    const destDir = path.posix.dirname(normalizedDest);
+    const base = path.posix.basename(normalizedDest);
+    const hasExt = /\.[a-z0-9]+$/i.test(base);
+    staticTargets.push({
+      src: ensurePosix(c.src),
+      dest: hasExt ? destDir : normalizedDest,
+      ...hasExt ? { rename: base } : {}
+    });
+  }
+  for (const cd of graph.copyDirs) {
+    const normalizedDest = ensurePosix(cd.dest).replace(publicPrefixRe, "");
+    guardDest(normalizedDest);
+    staticTargets.push({
+      src: ensurePosix(cd.src) + "/**/*",
+      dest: normalizedDest
+    });
+  }
+  const autoloadMap = {};
+  for (const [module, identifiers] of Object.entries(graph.autoload)) {
+    for (const ident of identifiers) {
+      autoloadMap[ident] = module;
+    }
+  }
+  const plugins = [webpackCompatResolvePlugin()];
+  if (graph.vue) {
+    plugins.push(vue());
+  }
+  if (Object.keys(autoloadMap).length) {
+    plugins.push(autoloadPlugin(autoloadMap));
+  }
+  if (staticTargets.length) {
+    plugins.push(staticCopyPlugin(staticTargets));
+  }
+  return {
+    resolve: {
+      extensions: [".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json", ".vue"],
+      alias: [{ find: /^~(.*)$/, replacement: "$1" }]
+    },
+    plugins,
+    build: {
+      manifest: true,
+      outDir: graph.publicPath,
+      emptyOutDir: false,
+      assetsDir: "",
+      rollupOptions: {
+        input,
+        output: isProd ? {
+          entryFileNames: `js/[name]-[hash].js`,
+          assetFileNames: (assetInfo) => {
+            const name = assetInfo.names[0] || "";
+            if (name.endsWith(".css")) return `css/[name]-[hash][extname]`;
+            return `assets/[name]-[hash][extname]`;
+          }
+        } : {
+          entryFileNames: `js/[name].js`,
+          assetFileNames: (assetInfo) => {
+            const name = assetInfo.names[0] || "";
+            if (name.endsWith(".css")) return `css/${name}`;
+            return `assets/${name}`;
+          }
+        }
+      }
+    },
+    server: {
+      strictPort: true
+    }
+  };
+}
+
+// src/index.ts
+function normalizePublicPath(p) {
+  let end = p.length;
+  while (end > 0 && p[end - 1] === "/") end--;
+  return p.slice(0, end);
+}
+var Mix = class {
+  graph;
+  constructor() {
+    this.graph = {
+      publicPath: "public",
+      js: [],
+      css: [],
+      sass: [],
+      copies: [],
+      copyDirs: [],
+      autoload: {},
+      vue: false
+    };
+  }
+  setPublicPath(p) {
+    const normalized = normalizePublicPath(p);
+    const resolved = path2.resolve(process.cwd(), normalized);
+    if (resolved !== process.cwd() && !resolved.startsWith(process.cwd() + path2.sep)) {
+      throw new Error(`publicPath must be within the project directory: ${p}`);
+    }
+    this.graph.publicPath = normalized;
+    return this;
+  }
+  js(src, dest) {
+    this.graph.js.push({ src, destDirOrFile: dest });
+    return this;
+  }
+  vue() {
+    this.graph.vue = true;
+    return this;
+  }
+  sass(src, dest) {
+    this.graph.sass.push({ src, destDir: dest });
+    return this;
+  }
+  css(src, destDir) {
+    this.graph.css.push({ src, destDir });
+    return this;
+  }
+  copy(src, dest) {
+    this.graph.copies.push({ src, dest });
+    return this;
+  }
+  copyDirectory(src, dest) {
+    this.graph.copyDirs.push({ src, dest });
+    return this;
+  }
+  autoload(map) {
+    this.graph.autoload = { ...this.graph.autoload, ...map };
+    return this;
+  }
+  toGraph() {
+    return {
+      publicPath: this.graph.publicPath,
+      js: this.graph.js.map((entry) => ({ ...entry })),
+      css: this.graph.css.map((entry) => ({ ...entry })),
+      sass: this.graph.sass.map((entry) => ({ ...entry })),
+      copies: this.graph.copies.map((entry) => ({ ...entry })),
+      copyDirs: this.graph.copyDirs.map((entry) => ({ ...entry })),
+      autoload: Object.fromEntries(Object.entries(this.graph.autoload).map(([key, values]) => [key, [...values]])),
+      vue: this.graph.vue
+    };
+  }
+};
+function mix() {
+  return new Mix();
+}
+export {
+  Mix,
+  mix,
+  viteConfigFromGraph
+};

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "vite-mix",
+  "version": "0.7.3",
+  "description": "Use Vite as Laravel Mix",
+  "keywords": [
+    "vite",
+    "laravel",
+    "mix",
+    "laravel-mix",
+    "webpack",
+    "build-tool"
+  ],
+  "author": {
+    "name": "Hugo Rodrigues",
+    "url": "https://github.com/hugoboss17"
+  },
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hugoboss17/vite-mix.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hugoboss17/vite-mix/issues"
+  },
+  "type": "module",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=24"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "verify:pack": "node scripts/verify-pack.ts",
+    "check:lockfile": "node scripts/check-lockfile-change.ts",
+    "prepack": "npm run build && npm run verify:pack",
+    "lint": "node -e \"console.log('add eslint if you want')\"",
+    "prepare": "pre-commit install || true"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "sass": "^1.0.0",
+    "vite": "^7.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "25.3.5",
+    "@vitest/coverage-v8": "4.0.18",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3",
+    "vite": "7.3.1",
+    "vitest": "4.0.18"
+  }
+}