#154 fix js fonts works

icerockdev · Mar 12, 2023 · 855e079 · 855e079
1 parent f22d282
commit 855e079
Show file tree

Hide file tree

Showing 7 changed files with 338 additions and 152 deletions.
diff --git a/kotlin-js-store/yarn.lock b/kotlin-js-store/yarn.lock
diff --git a/resources-generator/src/main/kotlin/dev/icerock/gradle/generator/js/JsFontsGenerator.kt b/resources-generator/src/main/kotlin/dev/icerock/gradle/generator/js/JsFontsGenerator.kt
@@ -32,9 +32,11 @@ class JsFontsGenerator(
 
     @Suppress("StringTemplate")
     override fun getPropertyInitializer(fontFile: File): CodeBlock {
-        return CodeBlock.of("FontResource(" +
-                "fileUrl = js(\"require(\\\"$FONTS_DIR/${fontFile.name}\\\")\") as String, " +
-                "fontFamily = %S)", fontFile.nameWithoutExtension)
+        return CodeBlock.of(
+            "FontResource(" +
+                    "fileUrl = js(\"require(\\\"$FONTS_DIR/${fontFile.name}\\\")\") as String, " +
+                    "fontFamily = %S)", fontFile.nameWithoutExtension
+        )
     }
 
     override fun beforeGenerateResources(objectBuilder: TypeSpec.Builder, files: List<FontFile>) {
@@ -57,12 +59,12 @@ class JsFontsGenerator(
 
         if (files.isEmpty()) return
 
-        objectBuilder.addSuperinterface(ClassName("dev.icerock.moko.resources", "CssDeclarationsUriHolder"))
-
-        objectBuilder.addProperty(
-            PropertySpec.builder("cssDeclarationsUri", STRING, KModifier.OVERRIDE)
-                .initializer("js(%S) as String", """require("$FONTS_DIR/$cssDeclarationsFileName")""")
-                .build()
+        objectBuilder.addFunction(
+            FunSpec.builder("addFontsToPage")
+                .addCode(
+                    "js(%S)",
+                    """require("$FONTS_DIR/$cssDeclarationsFileName")"""
+                ).build()
         )
     }
 
@@ -82,7 +84,7 @@ class JsFontsGenerator(
                 """
                     @font-face {
                         font-family: "$family";
-                        src: url("$FONTS_DIR/${file.name}");
+                        src: url("${file.name}");
                     }
                 """.trimIndent()
             }

diff --git a/resources-generator/src/main/kotlin/dev/icerock/gradle/generator/js/JsMRGenerator.kt b/resources-generator/src/main/kotlin/dev/icerock/gradle/generator/js/JsMRGenerator.kt
@@ -5,6 +5,7 @@
 package dev.icerock.gradle.generator.js
 
 import com.squareup.kotlinpoet.ClassName
+import com.squareup.kotlinpoet.CodeBlock
 import com.squareup.kotlinpoet.KModifier
 import com.squareup.kotlinpoet.PropertySpec
 import com.squareup.kotlinpoet.STRING
@@ -48,7 +49,6 @@ class JsMRGenerator(
                 .build()
         )
 
-        @OptIn(ExperimentalStdlibApi::class)
         val stringsLoaderInitializer = buildList {
             val stringsObjectLoader = mrClass
                 .typeSpecs
@@ -147,41 +147,54 @@ class JsMRGenerator(
             webpackDir.mkdirs()
 
             val webpackConfig: File = File(webpackDir, "moko-resources-generated.js")
+            val webpackResourcesDir: String = resourcesOutput.absolutePath
+                .replace("\\","\\\\")
+
             webpackConfig.writeText(
                 // language=js
                 """
-                const path = require('path');
-
-                const mokoResourcePath = path.resolve("${resourcesOutput.absolutePath.replace("\\","\\\\")}");
-
-                config.module.rules.push(
-                    {
-                        test: /\.(.*)/,
-                        include: [
-                            path.resolve(mokoResourcePath)
-                        ],
-                        type: 'asset/resource'
-                    }
-                );
-                
-                config.module.rules.push(
-                    {
-                        test: /\.(otf|ttf)?${'$'}/,
-                        use: [
-                            {
-                                loader: 'file-loader',
-                                options: {
-                                    name: '[name].[ext]',
-                                    outputPath: 'fonts/'
-                                }
-                            }
-                        ]
-                    }
-                )
-                
-                config.resolve.modules.push(
-                    path.resolve(mokoResourcePath)
-                );
+// noinspection JSUnnecessarySemicolon
+;(function(config) {
+    const path = require('path');
+    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+    const mokoResourcePath = path.resolve("$webpackResourcesDir");
+
+    config.module.rules.push(
+        {
+            test: /\.(.*)/,
+            resource: [
+                path.resolve(mokoResourcePath, "files"),
+                path.resolve(mokoResourcePath, "images"),
+                path.resolve(mokoResourcePath, "localization"),
+            ],
+            type: 'asset/resource'
+        }
+    );
+    
+    config.plugins.push(new MiniCssExtractPlugin())
+    config.module.rules.push(
+        {
+            test: /\.css${'$'}/,
+            resource: [
+                path.resolve(mokoResourcePath, "fonts"),
+            ],
+            use: ['style-loader', 'css-loader']
+        }
+    )
+
+    config.module.rules.push(
+        {
+            test: /\.(otf|ttf)?${'$'}/,
+            resource: [
+                path.resolve(mokoResourcePath, "fonts"),
+            ],
+            type: 'asset/resource',
+        }
+    )
+    
+    config.resolve.modules.push(mokoResourcePath);
+})(config);
                 """.trimIndent()
             )
         }

diff --git a/resources/build.gradle.kts b/resources/build.gradle.kts
@@ -18,8 +18,9 @@ kotlin {
             dependencies {
                 api(npm("bcp-47", "1.0.8"))
                 api(npm("@messageformat/core", "3.0.0"))
-                implementation(npm("url-loader", "4.1.1"))
-                implementation(npm("file-loader", "6.2.0"))
+                api(npm("mini-css-extract-plugin", "2.6.1"))
+                api(npm("css-loader", "6.7.3"))
+                api(npm("style-loader", "3.3.1"))
 
                 implementation(libs.kotlinxCoroutines)
             }

diff --git a/resources/src/jsMain/kotlin/dev/icerock/moko/resources/CssDeclarationsUriHolder.kt b/resources/src/jsMain/kotlin/dev/icerock/moko/resources/CssDeclarationsUriHolder.kt