@atomicsmash/compiler 0.7.3 → 0.7.5

package/dist/index.js

@@ -65,15 +65,16 @@ const tailwindPostCSSPlugin = await import("@tailwindcss/postcss")
 // Add optional support for Vue if vue-loader is installed
 const vueConfig = await import("vue-loader")
     .then((vueLoaderModule) => ({
-    loader: [
-        {
-            test: /\.vue$/,
-            loader: "vue-loader",
-        },
-    ],
+    loader: [{ test: /\.vue$/, loader: "vue-loader" }],
     plugin: [new vueLoaderModule.VueLoaderPlugin()],
+    globals: {
+        __VUE_OPTIONS_API__: "true",
+        __VUE_PROD_DEVTOOLS__: "false",
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",
+    },
+    aliases: { vue: "vue/dist/vue.esm-bundler.js" },
 }))
-    .catch(() => ({ loader: [], plugin: [] }));
+    .catch(() => ({ loader: [], plugin: [], globals: {}, aliases: {} }));
 const postCSSConfig = [
     [
         // Support tailwind if package is found
@@ -89,6 +90,30 @@ const postCSSConfig = [
     ],
     ...(MODE === "production" ? [cssNano] : []),
 ];
+function getEsBuildLoaderSetup(loader) {
+    return {
+        use: {
+            loader: "esbuild-loader",
+            options: {
+                loader: loader,
+                // Set target to match the browserslist config
+                target: browserslistToEsbuild(),
+                tsconfig: process.cwd() + "/tsconfig.json",
+            },
+        },
+        exclude: (file) => {
+            // Exclude all block.json.ts files (handled by a separate loader).
+            if (argv.experimentalBlocksSupport && file.includes("block.json")) {
+                return true;
+            }
+            // Exclude node_modules files from transpilation unless they are vue files and the vue-loader is present
+            if (vueConfig.loader.length > 0) {
+                return file.includes("node_modules") && !file.includes(".vue.js");
+            }
+            return file.includes("node_modules");
+        },
+    };
+}
 const compiler = webpack({
     resolveLoader: {
         modules: [
@@ -143,14 +168,13 @@ const compiler = webpack({
         path: distFolder,
     },
     resolve: {
+        alias: { ...vueConfig.aliases },
         // support TSConfig paths as aliases
         plugins: [
-            new TsconfigPathsPlugin({
-                configFile: process.cwd() + "/tsconfig.json",
-            }),
+            new TsconfigPathsPlugin({ configFile: process.cwd() + "/tsconfig.json" }),
         ],
         // resolve TS extensions
-        extensions: [".tsx", ".ts", ".js", ".jsx"],
+        extensions: [".tsx", ".ts", ".js", ".jsx", ".vue"],
     },
     module: {
         rules: [
@@ -159,25 +183,14 @@ const compiler = webpack({
             // Use ESBuild loader to transpile JS & TS files
             {
                 test: /\.[jt]sx?$/,
-                use: {
-                    loader: "esbuild-loader",
-                    options: {
-                        // Set target to match the browserslist config
-                        target: browserslistToEsbuild(),
-                        tsconfig: process.cwd() + "/tsconfig.json",
-                    },
-                },
-                exclude: (file) => {
-                    // Exclude all block.json.ts files (handled by a separate loader).
-                    if (argv.experimentalBlocksSupport && file.includes("block.json")) {
-                        return true;
-                    }
-                    // Exclude node_modules files from transpilation unless they are vue files and the vue-loader is present
-                    if (vueConfig.loader.length > 0) {
-                        return file.includes("node_modules") && !file.includes(".vue.js");
-                    }
-                    return file.includes("node_modules");
-                },
+                resourceQuery: (value) => value.includes("vue"),
+                // Vue files require explicitly informing ESBuild of the type of loader to use.
+                ...getEsBuildLoaderSetup("ts"),
+            },
+            {
+                test: /\.[jt]sx?$/,
+                resourceQuery: (value) => !value.includes("vue"),
+                ...getEsBuildLoaderSetup("default"),
             },
             ...(argv.experimentalBlocksSupport
                 ? [
@@ -196,13 +209,34 @@ const compiler = webpack({
             // Transpile SCSS files and run the result through postcss
             {
                 test: /\.s[ac]ss$/i,
-                exclude: /node_modules/,
                 type: "asset/resource",
                 generator: {
                     binary: false,
-                    filename: (pathData) => relative(srcFolder, pathData.filename ?? "")
-                        .replace(".scss", ".[contenthash].css")
-                        .replace("styles/", "css/"),
+                    filename: (pathData) => {
+                        const fileName = pathData.filename;
+                        if (!fileName) {
+                            return;
+                        }
+                        const isVendorFile = fileName.includes("node_modules");
+                        if (isVendorFile) {
+                            const vendorPathData = fileName.split(pathSeparator);
+                            const nodeModulesPosition = vendorPathData.findIndex((value) => value.includes("node_modules"));
+                            const vendorArray = vendorPathData.slice(nodeModulesPosition + 1, nodeModulesPosition + 3);
+                            let vendor;
+                            if (vendorArray[0]?.startsWith("@")) {
+                                vendor = vendorArray.join(pathSeparator);
+                            }
+                            else {
+                                vendor = vendorArray[0] ?? "";
+                            }
+                            return ["css", "vendor", vendor, vendorPathData.at(-1)]
+                                .join(pathSeparator)
+                                .replace(".scss", ".[contenthash].css");
+                        }
+                        return relative(srcFolder, pathData.filename ?? "")
+                            .replace(".scss", ".[contenthash].css")
+                            .replace("styles/", "css/");
+                    },
                 },
                 use: [
                     {
@@ -216,22 +250,41 @@ const compiler = webpack({
                     },
                     {
                         loader: "sass-loader",
-                        options: {
-                            sourceMap: MODE === "development",
-                        },
+                        options: { sourceMap: MODE === "development" },
                     },
                 ],
             },
             // Run the css files through postcss
             {
                 test: /\.css$/i,
-                exclude: /node_modules/,
                 type: "asset/resource",
                 generator: {
                     binary: false,
-                    filename: (pathData) => relative(srcFolder, pathData.filename ?? "")
-                        .replace(".css", ".[contenthash].css")
-                        .replace("styles/", "css/"),
+                    filename: (pathData) => {
+                        const fileName = pathData.filename;
+                        if (!fileName) {
+                            return;
+                        }
+                        const isVendorFile = fileName.includes("node_modules");
+                        if (isVendorFile) {
+                            const vendorPathData = fileName.split(pathSeparator);
+                            const nodeModulesPosition = vendorPathData.findIndex((value) => value.includes("node_modules"));
+                            const vendorArray = vendorPathData.slice(nodeModulesPosition + 1, nodeModulesPosition + 3);
+                            let vendor;
+                            if (vendorArray[0]?.startsWith("@")) {
+                                vendor = vendorArray.join(pathSeparator);
+                            }
+                            else {
+                                vendor = vendorArray[0] ?? "";
+                            }
+                            return ["css", "vendor", vendor, vendorPathData.at(-1)]
+                                .join(pathSeparator)
+                                .replace(".css", ".[contenthash].css");
+                        }
+                        return relative(srcFolder, pathData.filename ?? "")
+                            .replace(".css", ".[contenthash].css")
+                            .replace("styles/", "css/");
+                    },
                 },
                 use: [
                     {
@@ -260,6 +313,7 @@ const compiler = webpack({
                 }
                 if (entry.key === "assets.php" ||
                     entry.key === "wordpress-assets-info.php" ||
+                    entry.key.endsWith(".map") ||
                     entry.key.startsWith("fonts") ||
                     entry.key.startsWith("images")) {
                     return false;
@@ -281,15 +335,8 @@ const compiler = webpack({
         }),
         // Create an SVG sprite from a folder of provided icons
         new SVGSpritemapPlugin(`${srcFolder}/icons/*.svg`, {
-            output: {
-                filename: "icons/sprite.[contenthash].svg",
-            },
-            sprite: {
-                prefix: "",
-                generate: {
-                    title: false,
-                },
-            },
+            output: { filename: "icons/sprite.[contenthash].svg" },
+            sprite: { prefix: "", generate: { title: false } },
         }),
         // Copy fonts and images from the src folder to assets (available for backwards compatibility, not recommended)
         new CopyPlugin({
@@ -331,13 +378,12 @@ const compiler = webpack({
         // Support Vue files if vue-loader is present
         ...vueConfig.plugin,
         ...(argv.experimentalBlocksSupport ? [new BlocksPlugin(srcFolder)] : []),
+        new webpack.DefinePlugin({ ...vueConfig.globals }),
     ],
     optimization: {
         minimizer: [
             // Minify JS files
-            new EsbuildPlugin({
-                target: browserslistToEsbuild(),
-            }),
+            new EsbuildPlugin({ target: browserslistToEsbuild() }),
         ],
     },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atomicsmash/compiler",
 	"type": "module",
-	"version": "0.7.3",
+	"version": "0.7.5",
 	"description": "A universal compiler for all Atomic Smash projects.",
 	"keywords": [
 		"cli",