airframe-rx-widget: Scala.js UI widget collection (#883)

* Add airframe-rx, airframe-rx-widget
* Support custom style of components
* Support generic attributes
* Add scala.xml to support Function0, 1 binding
* Handle mouse click event
* Extract Twitter bootstrap-specific components
* Support embedding RxElement within XML
* Add RxComponent, RxElement demo
* Split compile steps for Scala.js as a workaround for scala-js/scala-js#3921
* Using jsdom@10.0.0 is necessary to run tests
* Add node.js fs access test (pending)
* Support Scala.js 0.6.x build

.github/workflows/test.yml

@@ -75,14 +75,19 @@ jobs:
       - uses: olafurpg/setup-scala@v5
         with:
           java-version: adopt@1.11
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '10.x'
+      - name: Node.js setup
+        run: npm install jsdom@10.0.0
       - uses: actions/cache@v1
         with:
           path: ~/.cache
           key: ${{ runner.os }}-scala-js-${{ hashFiles('**/*.sbt') }}
           restore-keys: ${{ runner.os }}-scala-js-
       - name: Scala.js test
         # A workaround for Scala.js linker error
-        run: ./sbt "; airspecJS/test:fastOptJS; projectJS/test"
+        run: ./sbt "; projectJSCore/test; projectJSSub/test"
   test_js_2_13:
     name: Scala.js with Scala 2.13
     runs-on: ubuntu-latest
@@ -91,11 +96,16 @@ jobs:
       - uses: olafurpg/setup-scala@v5
         with:
           java-version: adopt@1.11
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '10.x'
+      - name: Node.js setup
+        run: npm install jsdom@10.0.0
       - uses: actions/cache@v1
         with:
           path: ~/.cache
-          key: ${{ runner.os }}-scala-js-${{ hashFiles('**/*.sbt') }}
-          restore-keys: ${{ runner.os }}-scala-js-
+          key: ${{ runner.os }}-scala-js_2.13-${{ hashFiles('**/*.sbt') }}
+          restore-keys: ${{ runner.os }}-scala-js_2.13-
       - name: Scala.js test
         # A workaround for Scala.js linker error
-        run: ./sbt ++2.13.1 "; airspecJS/test:fastOptJS; projectJS/test"
+        run: ./sbt ++2.13.1 "; projectJSCore/test; projectJSSub/test"

airframe-rx-widget/README.md

@@ -0,0 +1,26 @@
+# airframe-rx-widget
+
+Reactive Widget Library for Scala.js
+
+## Development
+
+
+### Developing Scala.js Widgets
+
+```
+$ npm install jsdom@10.0.0
+
+$ ./sbt 
+> ~widgetJS/fastOptJS
+```
+
+Open another terminal and run:
+```
+$ npm install -g browser-sync
+
+$ browser-sync start --server airframe-rx-widget/src/main/public --serveStatic airframe-rx-widget/.js/target/scala-2.12 --files airframe-rx-widget/.js/target/scala-2.12/airframe-rx-widget-fastopt.js
+```
+
+It will refresh the browser automatically.
+
+

airframe-rx-widget/src/main/public/css/overwrite.css

@@ -0,0 +1,108 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+pre .hljs {
+    padding: 10px;
+}
+
+.navbar-dark {
+    background-color: #07405b;
+}
+
+.hljs {
+    padding: 10px;
+    background-color: #333333;
+}
+
+a {
+    color: #1e909f;
+}
+
+.navbar .navbar-collapse ul {
+    padding-left: 10px;
+}
+
+.hljs-comment,
+.hljs-quote {
+    color: #f1c2a2;
+}
+
+/* Ocean Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+    color: #d04754;
+}
+
+/* Ocean Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-meta,
+.hljs-link {
+    color: #99b2e8;
+}
+
+.hljs-params {
+    color: #f2b9d9;
+}
+
+/* Ocean Yellow */
+.hljs-subst,
+.hljs-attribute {
+    color: #f1ce88;
+}
+
+/* Ocean Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+    color: #f5b2a8;
+}
+
+/* Ocean Blue */
+.hljs-title,
+.hljs-section {
+    color: #21c5d2;
+}
+
+/* Ocean Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+    color: #c192bd;
+}
+
+.hljs {
+    display: block;
+    overflow-x: auto;
+    color: #c8cdd6;
+    padding: 0.5em;
+}
+
+.hljs-emphasis {
+    font-style: italic;
+}
+
+.hljs-strong {
+    font-weight: bold;
+}
+

airframe-rx-widget/src/main/public/index.html

@@ -0,0 +1,89 @@
+<!--
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<!doctype html>
+<html lang="en">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/styles/default.min.css">
+    <link rel="stylesheet" href="css/overwrite.css"/>
+
+    <title>Airframe Widget</title>
+    <style>
+        body {
+            /* for fixed-top navbar */
+            min-height: 75rem;
+            padding-top: 4.5rem;
+        }
+
+        .sidebar {
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 100; /* Behind the navbar */
+            padding: 52px 8px 0; /* Height of navbar */
+            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+        }
+
+        .sidebar-sticky {
+            position: relative;
+            top: 0;
+            height: calc(100vh - 48px);
+            padding-top: .5rem;
+            overflow-x: hidden;
+            overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+        }
+    </style>
+</head>
+<body>
+
+
+<div id="main" class="container">
+</div>
+
+<!-- Optional JavaScript -->
+<!-- jQuery first, then Popper.js, then Bootstrap JS -->
+<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+        crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+        crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+        crossorigin="anonymous"></script>
+
+<script src="scripts/highlight.pack.js"></script>
+
+<!--
+<script type="text/javascript" src="../../../.js/target/scala-2.12/airframe-widget-fastopt.js"></script>
+-->
+<script type="text/javascript" src="airframe-rx-widget-fastopt.js"></script>
+
+<script type="text/javascript">
+    Gallery.main();
+    hljs.initHighlightingOnLoad();
+</script>
+
+</body>
+</html>
+