Render react resources as separate css to allow overriding (#1416)

* Render react resources as separate css to allow overriding * Improve build.gradle.kts
Kotlin · Oct 5, 2020 · 49d4757 · 49d4757
1 parent 2495564
commit 49d4757
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 43 deletions.
diff --git a/...le/src/integrationTest/kotlin/org/jetbrains/dokka/it/gradle/BasicGradleIntegrationTest.kt b/...le/src/integrationTest/kotlin/org/jetbrains/dokka/it/gradle/BasicGradleIntegrationTest.kt
@@ -51,9 +51,13 @@ class BasicGradleIntegrationTest(override val versions: BuildVersions) : Abstrac
 
         val scriptsDir = File(this, "scripts")
         assertTrue(scriptsDir.isDirectory, "Missing scripts directory")
+        val reactFile = File(this, "scripts/main.js")
+        assertTrue(reactFile.isFile, "Missing main.js")
 
         val stylesDir = File(this, "styles")
         assertTrue(stylesDir.isDirectory, "Missing styles directory")
+        val reactStyles = File(this, "styles/main.css")
+        assertTrue(reactStyles.isFile, "Missing main.css")
 
         val navigationHtml = File(this, "navigation.html")
         assertTrue(navigationHtml.isFile, "Missing navigation.html")

diff --git a/plugins/base/.gitignore b/plugins/base/.gitignore
@@ -1,5 +1,7 @@
 src/main/resources/dokka/scripts/main.js
+src/main/resources/dokka/scripts/main.css
 src/main/resources/dokka/scripts/main.js.map
 src/main/resources/dokka/scripts/highlight-*
 src/main/resources/dokka/scripts/vendors~*
-search-component/dist/
+search-component/dist/
+/src/main/resources/dokka/styles/main.css
diff --git a/plugins/base/build.gradle.kts b/plugins/base/build.gradle.kts
@@ -18,14 +18,32 @@ dependencies {
     implementation("org.jetbrains.kotlinx:kotlinx-html-jvm:$kotlinx_html_version")
 }
 
-task("copy_frontend", Copy::class) {
-    from(File(project(":plugins:base:frontend").projectDir, "dist/"))
+val projectDistDir = project(":plugins:base:frontend").file("dist")
+val generateFrontendFiles = tasks.getByPath(":plugins:base:frontend:generateFrontendFiles")
+
+val copyJsFiles by tasks.registering(Copy::class){
+    from(projectDistDir){
+        include("*.js")
+    }
+    dependsOn(generateFrontendFiles)
     destinationDir = File(sourceSets.main.get().resources.sourceDirectories.singleFile, "dokka/scripts")
-}.dependsOn(":plugins:base:frontend:generateFrontendFiles")
+}
+
+val copyCssFiles by tasks.registering(Copy::class){
+    from(projectDistDir){
+        include("*.css")
+    }
+    dependsOn(generateFrontendFiles)
+    destinationDir = File(sourceSets.main.get().resources.sourceDirectories.singleFile, "dokka/styles")
+}
+
+val copyFrontend by tasks.registering {
+    dependsOn(copyJsFiles, copyCssFiles)
+}
 
 tasks {
     processResources {
-        dependsOn("copy_frontend")
+        dependsOn(copyFrontend)
     }
 
     test {

diff --git a/plugins/base/frontend/package-lock.json b/plugins/base/frontend/package-lock.json
diff --git a/plugins/base/frontend/package.json b/plugins/base/frontend/package.json
@@ -48,6 +48,7 @@
     "@types/lodash": "^4.14.158",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.8.0",
+    "mini-css-extract-plugin": "^0.11.0",
     "react-svg-loader": "^3.0.3",
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",

diff --git a/plugins/base/frontend/src/main/components/search/search.tsx b/plugins/base/frontend/src/main/components/search/search.tsx
@@ -1,12 +1,12 @@
-import React, {useCallback, useState} from 'react';
-import {Select, List} from '@jetbrains/ring-ui';
+import React, { useCallback, useState } from 'react';
+import { Select, List } from '@jetbrains/ring-ui';
 import '@jetbrains/ring-ui/components/input-size/input-size.scss';
 import './search.scss';
-import {IWindow, Option, Props} from "./types";
-import {DokkaSearchAnchor} from "./dokkaSearchAnchor";
-import {DokkaFuzzyFilterComponent} from "./dokkaFuzzyFilter";
+import { IWindow, Option, Props } from "./types";
+import { DokkaSearchAnchor } from "./dokkaSearchAnchor";
+import { DokkaFuzzyFilterComponent } from "./dokkaFuzzyFilter";
 
-const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
+const WithFuzzySearchFilterComponent: React.FC<Props> = ({ data }: Props) => {
     const [selected, onSelected] = useState<Option>(data[0]);
     const onChangeSelected = useCallback(
         (option: Option) => {
@@ -32,12 +32,12 @@ const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
                     data={data}
                     popupClassName={"popup-wrapper"}
                     onSelect={onChangeSelected}
-                    customAnchor={({wrapperProps, buttonProps, popup}) =>
-                        <DokkaSearchAnchor wrapperProps={wrapperProps} buttonProps={buttonProps} popup={popup}/>
+                    customAnchor={({ wrapperProps, buttonProps, popup }) =>
+                        <DokkaSearchAnchor wrapperProps={wrapperProps} buttonProps={buttonProps} popup={popup} />
                     }
                 />
+            </div>
         </div>
-      </div>
     )
 }
 
@@ -54,5 +54,5 @@ export const WithFuzzySearchFilter = () => {
         }));
     }
 
-    return <WithFuzzySearchFilterComponent data={data}/>;
+    return <WithFuzzySearchFilterComponent data={data} />;
 };
diff --git a/plugins/base/frontend/webpack.config.js b/plugins/base/frontend/webpack.config.js
@@ -1,6 +1,7 @@
 const {join, resolve} = require('path');
 
 const ringUiWebpackConfig = require('@jetbrains/ring-ui/webpack.config');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const pkgConfig = require('./package.json').config;
 
@@ -35,7 +36,7 @@ const webpackConfig = () => ({
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
+          MiniCssExtractPlugin.loader,
           'css-loader',
           'sass-loader',
         ],
@@ -55,7 +56,14 @@ const webpackConfig = () => ({
       }
     ]
   },
-  plugins: [],
+  plugins: [
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }),
+  ],
   output: {
     path: __dirname + '/dist/'
   }

diff --git a/plugins/base/src/main/kotlin/DokkaBase.kt b/plugins/base/src/main/kotlin/DokkaBase.kt
@@ -202,12 +202,16 @@ class DokkaBase : DokkaPlugin() {
         htmlPreprocessors with SearchPageInstaller order { after(rootCreator) }
     }
 
-    val resourceInstaller by extending {
-        htmlPreprocessors with ResourceInstaller order { after(rootCreator) }
+    val scriptsInstaller by extending {
+        htmlPreprocessors with ScriptsInstaller order { after(rootCreator) }
     }
 
-    val styleAndScriptsAppender by extending {
-        htmlPreprocessors with StyleAndScriptsAppender order { after(rootCreator) }
+    val stylesInstaller by extending {
+        htmlPreprocessors with StylesInstaller order { after(rootCreator) }
+    }
+
+    val assetsInstaller by extending {
+        htmlPreprocessors with AssetsInstaller order { after(rootCreator) }
     }
 
     val packageListCreator by extending {

diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
@@ -682,6 +682,7 @@ open class HtmlRenderer(
                         else -> unsafe { +it }
                     }
                 }
+                link(rel = LinkRel.stylesheet, href = page.root("styles/main.css")) {}
                 script { unsafe { +"""var pathToRoot = "${locationProvider.pathToRoot(page)}";""" } }
             }
             body {

diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
@@ -62,7 +62,8 @@ object NavigationPageInstaller : PageTransformer {
             name = "scripts/navigation-pane.json",
             children = emptyList(),
             strategy = RenderingStrategy.LocationResolvableWrite { resolver ->
-                mapper.writeValueAsString(nodes.withDescendants().map { NavigationNodeView.from(it, resolver(it.dri, it.sourceSets)) })
+                mapper.writeValueAsString(
+                    nodes.withDescendants().map { NavigationNodeView.from(it, resolver(it.dri, it.sourceSets)) })
             })
 
         return input.modified(
@@ -88,27 +89,53 @@ object NavigationPageInstaller : PageTransformer {
         }.sortedBy { it.name.toLowerCase() }
 }
 
-object ResourceInstaller : PageTransformer {
-    override fun invoke(input: RootPageNode) = input.modified(children = input.children + resourcePages)
-
-    private val resourcePages = listOf("styles", "scripts", "images").map {
-        RendererSpecificResourcePage(it, emptyList(), RenderingStrategy.Copy("/dokka/$it"))
+object ScriptsInstaller : PageTransformer {
+    override fun invoke(input: RootPageNode): RootPageNode {
+        return input.modified(
+            children = input.children + RendererSpecificResourcePage(
+                "scripts",
+                emptyList(),
+                RenderingStrategy.Copy("/dokka/scripts")
+            )
+        ).transformContentPagesTree {
+            it.modified(
+                embeddedResources = it.embeddedResources + listOf(
+                    "scripts/navigationLoader.js",
+                    "scripts/platformContentHandler.js",
+                    "scripts/sourceset_dependencies.js",
+                    "scripts/clipboard.js",
+                )
+            )
+        }
     }
 }
 
-object StyleAndScriptsAppender : PageTransformer {
-    override fun invoke(input: RootPageNode) = input.transformContentPagesTree {
-        it.modified(
-            embeddedResources = it.embeddedResources + listOf(
-                "styles/style.css",
-                "scripts/navigationLoader.js",
-                "scripts/platformContentHandler.js",
-                "scripts/sourceset_dependencies.js",
-                "scripts/clipboard.js",
-                "styles/jetbrains-mono.css"
+object StylesInstaller : PageTransformer {
+    override fun invoke(input: RootPageNode): RootPageNode =
+        input.modified(
+            children = input.children + RendererSpecificResourcePage(
+                "styles",
+                emptyList(),
+                RenderingStrategy.Copy("/dokka/styles")
+            )
+        ).transformContentPagesTree {
+            it.modified(
+                embeddedResources = it.embeddedResources + listOf(
+                    "styles/style.css",
+                    "styles/jetbrains-mono.css"
+                )
             )
+        }
+}
+
+object AssetsInstaller : PageTransformer {
+    override fun invoke(input: RootPageNode) = input.modified(
+        children = input.children + RendererSpecificResourcePage(
+            "images",
+            emptyList(),
+            RenderingStrategy.Copy("/dokka/images")
         )
-    }
+    )
 }
 
 class SourcesetDependencyAppender(val context: DokkaContext) : PageTransformer {
@@ -118,11 +145,13 @@ class SourcesetDependencyAppender(val context: DokkaContext) : PageTransformer {
         }.toMap()
 
         fun createDependenciesJson(): String = "sourceset_dependencies = '{${
-        dependenciesMap.entries.joinToString(", ") {
-            "\"${it.key}\": [${it.value.joinToString(",") {
-                "\"$it\""
-            }}]"
-        }
+            dependenciesMap.entries.joinToString(", ") {
+                "\"${it.key}\": [${
+                    it.value.joinToString(",") {
+                        "\"$it\""
+                    }
+                }]"
+            }
         }}'"
 
         val deps = RendererSpecificResourcePage(