diff --git a/demo/config/webpack.common.js b/demo/config/webpack.common.js
index eb30d9b1..cade074a 100644
--- a/demo/config/webpack.common.js
+++ b/demo/config/webpack.common.js
@@ -61,6 +61,14 @@ module.exports = {
template: "../modern/index.html",
chunks: ["modern"],
}),
+ // Ideally we could just do this via client-side routing, but it's tricky
+ // with both the real app and this sub directory. So we just hack it to
+ // duplicate the html file in both places and move on with our lives.
+ new HtmlWebpackPlugin({
+ filename: "modern/ready/index.html",
+ template: "../modern/index.html",
+ chunks: ["modern"],
+ }),
// Automatically generates the manifest.json file inside the built
// directory, and injects a tag into the gererated index.html file
// it also, applies cache-busting for all the icons.
@@ -104,6 +112,7 @@ module.exports = {
entry: {
webamp: ["./js/index.js"],
modern: ["../modern/src/index.js"],
+ wat: ["../modern/src/index.js"],
},
context: path.resolve(__dirname, "../"),
output: {
diff --git a/modern/src/App.js b/modern/src/App.js
index 73075de1..23877ca8 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer } from "react";
+import React, { useEffect, useReducer, Suspense } from "react";
import "./App.css";
import * as Utils from "./utils";
import * as Actions from "./Actions";
@@ -9,6 +9,7 @@ import { useDispatch, useSelector, useStore } from "react-redux";
import DropTarget from "../../js/components/DropTarget";
import Debugger from "./debugger";
import Sidebar from "./Sidebar";
+const Dashboard = React.lazy(() => import("./Dashboard"));
const skinUrls = [
cornerSkin,
@@ -647,7 +648,11 @@ function setSkinUrlToQueryParams(skinUrl) {
window.history.pushState(null, "", newRelativePathQuery);
}
-function App() {
+function Loading() {
+ return Loading... ;
+}
+
+function Modern() {
const dispatch = useDispatch();
const store = useStore();
const root = useSelector(Selectors.getMakiTree);
@@ -656,7 +661,7 @@ function App() {
dispatch(Actions.gotSkinUrl(defaultSkinUrl, store));
}, [store]);
if (root == null) {
- return Loading... ;
+ return
@@ -689,5 +694,12 @@ function App() {
);
}
+function App() {
+ return (
+
+
+ {Math.round(percent * 100)}%
+
+
+
+
+ {label}
+ {" "}
+
+ ({number}/{total})
+
+
+
+
Are Modern Skins Ready Yet?
+
+
method.implemented).length}
+ total={foundMethods.length}
+ label="Used Methods"
+ />
+
+
+
+ setOrToggleSort("implemented")}>Status
+ setOrToggleSort("className")}>Class
+ setOrToggleSort("methodName")}>Method Name
+ setOrToggleSort("foundInSkins")}>
+ Found In Skins
+
+ setOrToggleSort("totalCalls")}>Total Calls
+
+
+
+ {normalizedMethods
+ .sort(sortFunction)
+ .filter(filterFunction)
+ .map(
+ ({
+ className,
+ methodName,
+ foundInSkins,
+ totalCalls,
+ implemented,
+ }) => {
+ return (
+
+
+
+ {className}
+ {methodName}
+ {foundInSkins}
+ {totalCalls}
+
+ );
+ }
+ )}
+
+
+