fix(compiler): module resolve and compile errors

lcui-dev · Oct 5, 2023 · 8f47fdb · 8f47fdb
1 parent 6db68cd
commit 8f47fdb
Show file tree

Hide file tree

Showing 16 changed files with 380 additions and 761 deletions.
diff --git a/bin/lcui.js b/bin/lcui.js
@@ -4,7 +4,7 @@ import path from "path";
 import { Command } from "commander";
 import { fileURLToPath } from "url";
 import { create } from "../lib/create.js";
-import { compile } from "../lib/compiler/index.js";
+import compile from "../lib/compiler/index.js";
 
 const { version } = fs.readJSONSync(
   path.join(path.dirname(fileURLToPath(import.meta.url)), "../package.json")
@@ -32,11 +32,6 @@ program
   .command("compile")
   .description("compile resource files into C soruce files")
   .argument("<filePath>", "file or directory")
-  .option(
-    "--type <name>",
-    "specify which type of compiler to use to compile files",
-    "auto"
-  )
   .action(wrapAction(compile));
 
 program.version(version).parse(process.argv);
diff --git a/lib/compile.js b/lib/compile.js
diff --git a/lib/compiler/config.js b/lib/compiler/config.js
@@ -1,3 +1,5 @@
+import path from "path";
+
 export default {
   module: {
     rules: [
@@ -14,7 +16,14 @@ export default {
         use: ["ui-loader", "yaml-loader"],
       },
       {
-        test: /^.*\.module.(css|sass|scss)$/,
+        test: (filePath) => {
+          const { name, ext } = path.parse(filePath);
+          return (
+            !name.startsWith("_") &&
+            name.endsWith(".module") &&
+            [".css", ".scss", ".sass"].includes(ext)
+          );
+        },
         use: [
           {
             loader: "css-loader",
@@ -26,7 +35,14 @@ export default {
         ],
       },
       {
-        test: /^(?!.*\.module\.(css|sass|scss)$).*\.(css|sass|scss)$/,
+        test: (filePath) => {
+          const { name, ext } = path.parse(filePath);
+          return (
+            !name.startsWith("_") &&
+            !name.endsWith(".module") &&
+            [".css", ".scss", ".sass"].includes(ext)
+          );
+        },
         use: ["css-loader", "sass-loader"],
       },
       {
@@ -39,13 +55,13 @@ export default {
           loader: "file-loader",
           options: {
             outputPath: "assets",
-            name: "[name].[pathhash].[ext]",
+            name: "[name].[pathhash:8].[ext]",
           },
         },
       },
     ],
   },
   resolve: {
-    extensions: [".ts", ".tsx", ".js", ".jsx"],
+    extensions: [".ts", ".tsx", ".mjs", ".js", ".jsx"],
   },
 };
diff --git a/lib/compiler/css-loader.js b/lib/compiler/css-loader.js
@@ -12,16 +12,21 @@ export default async function CSSLoader(content) {
     [
       postcssUrl({
         async url(asset) {
-          const outputPath = (await this.importModule(asset.url)).default;
-          if (typeof outputPath !== "string") {
-            loader.emitError(
-              new Error(
-                `${asset.url}: file output path parsing failed. Please check if the file is correctly configured with file-loader`
-              )
-            );
-            return asset.url;
+          try {
+            const outputPath = (await loader.importModule(asset.url)).default;
+            if (typeof outputPath === "string") {
+              return outputPath;
+            }
+          } catch (err) {
+            err.message = `url(${asset.url}):\n${err.message}`;
+            loader.emitError(err);
           }
-          return outputPath;
+          loader.emitError(
+            new Error(
+              `url(${asset.url}): File does not exist or there is no matching loader`
+            )
+          );
+          return asset.url;
         },
       }),
       modules &&
@@ -43,21 +48,23 @@ export default async function CSSLoader(content) {
     type: "asset",
     path: loader.resourcePath,
     outputPath: loader.outputPath,
-    headerFiles: ["<ui.h>", `"${path.parse(loader.resourcePath).base}.h"`],
+    headerFiles: ["<ui.h>", `"${loader.resourceOutputPath}"`],
     initCode: `ui_load_css_string(${ident}, ${JSON.stringify(
       path.relative(loader.context, loader.resourcePath)
     )});`,
   };
   await loader.generateModule(loader.resourcePath, () => {
+    const metadataStr = JSON.stringify(metadata, null, 2);
+    const metadataLine = `export const metadata = ${metadataStr};\n`;
     if (modules) {
       const cssExport = result.messages.find((m) => m.type === "export");
       const cssExportTokens = cssExport ? cssExport.exportTokens : {};
       return (
-        `export metadata = ${JSON.stringify(metadata)};\n` +
-        `export default ${JSON.stringify(cssExportTokens)};\n\n`
+        metadataLine +
+        `export default ${JSON.stringify(cssExportTokens, null, 2)};\n`
       );
     }
-    return result.css;
+    return metadataLine + `export default ${JSON.stringify(result.css)};\n`;
   });
 
   const cssStr = JSON.stringify(
@@ -70,9 +77,9 @@ export default async function CSSLoader(content) {
     .join("\\\n");
 
   return [
-    `/** Generated from: ${this.resourcePath} */`,
+    `/** Generated from: ${path.basename(this.resourcePath)} */`,
     `static const char *${ident} = "\\`,
-    `${cssStr.substring(1, cssCode.length - 1)}\\`,
+    `${cssStr.substring(1, cssStr.length - 1)}\\`,
     '";\n',
   ].join("\n");
 }