Skip to content

Commit 63dff09

Browse files
ShreckYeShreckYe
committed
Initially set up the Gradle project, move and copy code here from an internal project, add a Gradle plugin, add some demo code, and update README.md
1 parent f8c00e2 commit 63dff09

File tree

30 files changed

+3944
-0
lines changed

30 files changed

+3944
-0
lines changed

‎.gitattributes‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#
2+
# https://help.github.com/articles/dealing-with-line-endings/
3+
#
4+
# These are explicitly windows files and should use crlf
5+
*.bat text eol=crlf
6+

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.gradle
2+
build
3+
.idea

‎README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Compose for Web Material
2+
Some Material components for Compose for Web, based on [Material Web (Web Components)](https://github.com/material-components/material-web) (preferred) and [Material Components for the web](https://github.com/material-components/material-components-web) (fallback)
3+
4+
This project is in prototype and the components are not complete. More components will be added. It will probably go through huge refactors and API changes, too.
5+
6+
## Instructions on how to use
7+
Some configurations are needed to use this library due to the immaturities of this project and Kotlin/JS.
8+
9+
### Add the dependency
10+
```kotlin
11+
implementation("com.huanshankeji:compose-web-material:$version")
12+
```
13+
14+
### In code
15+
Call `mwcRequires()` in your `main` function before calling any component Composable functions.
16+
17+
### Webpack configuration
18+
If you use this library in an app project with Webpack [which Kotlin/JS currently uses](https://kotlinlang.org/docs/js-project-setup.html), you might want to configure it as recommended by Material Web and Material Components for the web. Some instructions on how to do this simply are as below.
19+
20+
This plugin helps add the dependency to this project (if you do this you can skip the "Add the dependency" step above) and the `devNpm` dependencies:
21+
```kotlin
22+
plugins {
23+
id("com.huanshankeji.compose-web-material-conventions") version someVersion
24+
}
25+
```
26+
27+
It's not published to Gradle Plugin Portal yet, so you may need to publish it to Maven Local yourself and use it from there.
28+
29+
However, the plugin doesn't [make further adjustments to the webpack configuration](https://kotlinlang.org/docs/js-project-setup.html#webpack-configuration-file), so you also need to refer to [the demo further adjustments](demo/webpack.config.d/further_adjustments.js) and [the demo HTML page](demo/html/demo.html) to add your own. Just copy and possibly adapt them as you like.

‎build.gradle.kts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
tasks.wrapper {
2+
distributionType = Wrapper.DistributionType.ALL
3+
}

‎buildSrc/build.gradle.kts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
plugins {
2+
`kotlin-dsl`
3+
}
4+
5+
repositories {
6+
gradlePluginPortal()
7+
}

‎buildSrc/src/main/kotlin/Versions.kt‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
val projectVersion = "0.1.0-compose-1.1.1-SNAPSHOT"
2+
3+
object DependencyVersions {
4+
val webcomponents = "2.6.0"
5+
val mwc = "0.25.3"
6+
7+
val mdc = "13.0.0"
8+
}

‎demo/html/demo.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<meta charset="UTF-8">
7+
<title>Demo page</title>
8+
<script src="webcomponents-loader.js"></script>
9+
<link href="https://fonts.googleapis.com" rel="preconnect">
10+
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
11+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
12+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&amp;display=block" rel="stylesheet">
13+
<link href="app.css" rel="stylesheet">
14+
</head>
15+
16+
<body>
17+
<script src="app.js"></script>
18+
</body>
19+
20+
</html>

‎demo/webpack.config.d/further_adjustments.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// for both webpack.config.js and karma.conf.js
2+
3+
const extraEntry = {
4+
'webcomponents-loader': '@webcomponents/webcomponentsjs/webcomponents-loader.js',
5+
};
6+
7+
config.entry = config.entry != null ? Object.assign(config.entry, extraEntry) : extraEntry;
8+
9+
if (config.output != null) {
10+
const kotlinJsFilename = config.output.filename;
11+
config.output.filename = chunkData =>
12+
chunkData.chunk.name in extraEntry ? "[name].js" : kotlinJsFilename(chunkData);
13+
}
14+
else
15+
config.output = { filename: "[name].js" };
16+
17+
// see: https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md
18+
19+
const mainEntryExtras = ['./kotlin/app.scss',];
20+
if (config.entry.main != null)
21+
config.entry.main.push(...mainEntryExtras);
22+
else
23+
config.entry.main = mainEntryExtras;
24+
25+
config.module.rules.push({
26+
test: /\.scss$/,
27+
use: [
28+
{
29+
loader: 'file-loader',
30+
options: {
31+
name: 'app.css',
32+
},
33+
},
34+
{ loader: 'extract-loader' },
35+
{ loader: 'css-loader' },
36+
{ loader: 'sass-loader' },
37+
],
38+
});

‎gradle-plugins/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Gradle plugins
2+
TODO: find a way to [make further adjustments to the webpack configuration](https://kotlinlang.org/docs/js-project-setup.html#webpack-configuration-file) in the target project.

‎gradle-plugins/build.gradle.kts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
plugins {
2+
`kotlin-dsl`
3+
id("com.gradle.plugin-publish") version "1.0.0-rc-2"
4+
}
5+
6+
repositories {
7+
mavenCentral()
8+
}
9+
10+
dependencies {
11+
implementation(kotlin("gradle-plugin", "1.6.10"))
12+
}
13+
14+
15+
val generateVersion = "generateVersion"
16+
val generatedSourcesDir = buildDir.resolve("gen/main/kotlin")
17+
18+
tasks.register(generateVersion) {
19+
generatedSourcesDir.mkdirs()
20+
val generatedVersionsSourceFile = generatedSourcesDir.resolve("GeneratedVersions.kt")
21+
generatedVersionsSourceFile.writeText("const val projectVersion = \"$projectVersion\"\n")
22+
}
23+
24+
tasks.compileKotlin {
25+
dependsOn(generateVersion)
26+
}
27+
28+
kotlin.sourceSets["main"].kotlin.srcDir(generatedSourcesDir)
29+
30+
31+
group = "com.huanshankeji"
32+
version = projectVersion
33+
34+
gradlePlugin {
35+
plugins {
36+
getByName("com.huanshankeji.compose-web-material-conventions") {
37+
displayName = "Compose for Web Material conventions"
38+
description =
39+
"This plugin adds the needed Maven dependencies and npm devDependencies (mainly for Webpack) for a Compose for Web project with Material components."
40+
}
41+
}
42+
}

0 commit comments

Comments
 (0)