feat(riot-v5): add config for router and register tag instead of import

package.json

@@ -13,9 +13,6 @@
   "author": "Jones Magloire (Joxit)",
   "license": "AGPL-3.0",
   "description": "A web UI for private docker registry",
-  "dependencies": {
-    "marked": "^0.8.0"
-  },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/preset-env": "^7.12.7",
@@ -26,6 +23,7 @@
     "@rollup/plugin-html": "^0.2.3",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
+    "core-js": "^3.9.1",
     "js-beautify": "^1.13.0",
     "riot": "^5.3.1",
     "riot-mui": "joxit/riot-5-mui#53a3399a",

rollup.config.js

@@ -9,7 +9,7 @@ import serve from 'rollup-plugin-serve';
 import html from '@rollup/plugin-html';
 import htmlUseref from './rollup/html-useref';
 import json from '@rollup/plugin-json';
-import copy from 'rollup-plugin-copy'
+import copy from 'rollup-plugin-copy';
 
 const useServe = process.env.ROLLUP_SERVE === 'true';
 const output = useServe ? '.serve' : 'dist';
@@ -20,14 +20,14 @@ const plugins = [
   nodeResolve(),
   commonjs(),
   scss({ output: `./${output}/docker-registry-ui.css`, outputStyle: 'compressed' }),
-  babel({ babelHelpers: 'bundled', presets: ['@babel/env'] }),
+  babel({ babelHelpers: 'bundled', presets: [['@babel/env', { useBuiltIns: 'usage' }]] }),
   html({ template: () => htmlUseref('./src/index.html') }),
   copy({
     targets: [
       { src: 'src/fonts', dest: `${output}` },
       { src: 'src/images', dest: `${output}` },
-    ]
-  })
+    ],
+  }),
 ];
 
 if (useServe) {

src/components/catalog/catalog-element.riot

@@ -33,6 +33,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       each="{item in props.item.images}" item="{ item }" />
   </div>
   <script>
+    import router from '../../scripts/router';
+
     export default {
       onMounted(props) {
         const card = this.$('material-card');
@@ -44,7 +46,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         }
         card.onclick = (e) => {
           if (!props.item.repo) {
-            // registryUI.taglist.go(props.item);
+            router.taglist(props.item);
           } else {
             this.update({
               expanded: !this.state.expanded,

src/components/catalog/catalog.riot

@@ -28,8 +28,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   </div>
   <catalog-element each="{ item in state.repositories }" item="{ item }" />
   <script>
-    import MaterialCard from 'riot-mui/src/material-elements/material-card/material-card.riot';
-    import MaterialSpinner from 'riot-mui/src/material-elements/material-spinner/material-spinner.riot';
     import CatalogElement from './catalog-element.riot'
     import {
       Http
@@ -37,8 +35,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
     export default {
       components: {
-        MaterialCard,
-        MaterialSpinner,
         CatalogElement
       },
       state: {

src/components/docker-registry-ui.riot

@@ -21,8 +21,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     </material-navbar>
   </header>
   <main>
-    <catalog registry-url="{ state.registryUrl }" name="{ state.name }"
-      catalog-elements-limit="{ state.catalogElementsLimit }"></catalog>
+    <router base="#!">
+      <route path="{baseRoute}">
+        <catalog registry-url="{ state.registryUrl }" name="{ state.name }"
+          catalog-elements-limit="{ state.catalogElementsLimit }" />
+      </route>
+      <route path="{baseRoute}taglist/(.*)">
+
+      </route>
+    </router>
   </main>
   <footer>
     <material-footer>
@@ -41,8 +48,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     import {
       version
     } from '../../package.json';
-    import MaterialNavbar from 'riot-mui/src/material-elements/material-navbar/material-navbar.riot';
-    import MaterialFooter from 'riot-mui/src/material-elements/material-footer/material-footer.riot';
+    import {
+      Router,
+      Route,
+    } from '@riotjs/route'
     import Catalog from './catalog/catalog.riot';
     import {
       stripHttps
@@ -50,9 +59,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
     export default {
       components: {
-        MaterialNavbar,
-        MaterialFooter,
-        Catalog
+        Catalog,
+        Router,
+        Route
       },
       onBeforeMount(props) {
         this.state.registryUrl = props.registryUrl || (window.location.origin + window.location.pathname.replace(/\/+$/,
@@ -60,6 +69,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         this.state.name = props.name || stripHttps(props.registryUrl);
         this.state.catalogElementsLimit = props.catalogElementsLimit || 100000;
       },
+      baseRoute: '/(\\?[^#]*)?(#!)?(/?)',
       version
     }
   </script>

src/index.js

@@ -1,9 +1,18 @@
-import { component } from 'riot';
+import { component, register } from 'riot';
+import MaterialCard from 'riot-mui/src/material-elements/material-card/material-card.riot';
+import MaterialSpinner from 'riot-mui/src/material-elements/material-spinner/material-spinner.riot';
+import MaterialNavbar from 'riot-mui/src/material-elements/material-navbar/material-navbar.riot';
+import MaterialFooter from 'riot-mui/src/material-elements/material-footer/material-footer.riot';
 
 import DockerRegistryUI from './components/docker-registry-ui.riot';
 
 import './style.scss';
 
+register('material-card', MaterialCard);
+register('material-footer', MaterialFooter);
+register('material-navbar', MaterialNavbar);
+register('material-spinner', MaterialSpinner);
+
 const createApp = component(DockerRegistryUI);
 const tags = document.getElementsByTagName('docker-registry-ui');
 for (let i = 0; i < tags.length; i++) {

src/scripts/router.js

@@ -0,0 +1,14 @@
+import { route, router, getCurrentRoute } from '@riotjs/route';
+
+function baseUrl() {
+  return getCurrentRoute().replace(/#!(.*)/, '');
+}
+
+export default {
+  home() {
+    router.pus(baseUrl());
+  },
+  taglist(image) {
+    router.push(`${baseUrl()}#!/taglist/${image}`);
+  },
+};