feat(riot-v5): create the skeleton for riot5

.gitignore

@@ -5,3 +5,4 @@ registry-data
 .idea
 _site
 *.orig
+.serve/

package.json

@@ -2,7 +2,8 @@
   "name": "docker-registry-ui",
   "version": "1.5.4",
   "scripts": {
-    "build": "./node_modules/gulp/bin/gulp.js build",
+    "start": "ROLLUP_SERVE=true rollup -c -w",
+    "build": "rollup -c",
     "build:electron": "npm run build && cd examples/electron && npm install && npm run dist"
   },
   "repository": {
@@ -12,24 +13,28 @@
   "author": "Jones Magloire (Joxit)",
   "license": "AGPL-3.0",
   "description": "A web UI for private docker registry",
-  "dependencies": {},
+  "dependencies": {
+    "marked": "^0.8.0"
+  },
   "devDependencies": {
-    "del": "^3.0.0",
-    "gulp": "^4.0.2",
-    "gulp-clean-css": "^4.2.0",
-    "gulp-concat": "^2.6.0",
-    "gulp-filter": "^5.1.0",
-    "gulp-htmlmin": "^5.0.1",
-    "gulp-if": "^2.0.0",
-    "gulp-inject-version": "^1.0.1",
-    "gulp-license": "^1.1.0",
-    "gulp-riot": "^1.1.5",
-    "gulp-uglify": "^3.0.2",
-    "gulp-useref": "^3.1.6",
-    "riot": "^3.13.2",
-    "riot-mui": "^0.1.1",
-    "riot-route": "^3.1.4",
-    "stream-series": "^0.1.1",
-    "uglify-es": "^3.3.10"
+    "@babel/core": "^7.12.9",
+    "@babel/preset-env": "^7.12.7",
+    "@riotjs/compiler": "^5.3.1",
+    "@riotjs/route": "^7.0.0",
+    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-html": "^0.2.3",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "js-beautify": "^1.13.0",
+    "riot": "^5.3.1",
+    "riot-mui": "joxit/riot-5-mui#53a3399a",
+    "rollup": "^2.34.2",
+    "rollup-plugin-app-utils": "^1.0.6",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-riot": "^5.0.0",
+    "rollup-plugin-scss": "^2.6.1",
+    "rollup-plugin-serve": "^1.1.0",
+    "rollup-plugin-styles": "^3.14.1",
+    "rollup-plugin-terser": "^7.0.2"
   }
 }

rollup.config.js

@@ -0,0 +1,39 @@
+import riot from 'rollup-plugin-riot';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
+import { emptyDirectories } from 'rollup-plugin-app-utils';
+import { babel } from '@rollup/plugin-babel';
+import scss from 'rollup-plugin-scss';
+import serve from 'rollup-plugin-serve';
+import html from '@rollup/plugin-html';
+import htmlUseref from './rollup/html-useref';
+
+const useServe = process.env.ROLLUP_SERVE === 'true';
+const output = useServe ? '.serve' : 'dist';
+
+const plugins = [
+  riot(),
+  nodeResolve(),
+  commonjs(),
+  scss({ output: `./${output}/docker-registry-ui.css`, outputStyle: 'compressed' }),
+  babel({ babelHelpers: 'bundled', presets: ['@babel/env'] }),
+  html({ template: () => htmlUseref('./src/index.html') }),
+];
+
+if (useServe) {
+  plugins.push(serve({ host: 'localhost', port: 8000, contentBase: [output, './'] }));
+} else {
+  plugins.push(terser());
+}
+
+export default [
+  {
+    input: { 'docker-registry-ui': 'src/index.js' },
+    output: {
+      dir: output,
+      format: 'iife',
+    },
+    plugins: [emptyDirectories(output)].concat(plugins),
+  },
+];

rollup/html-useref.js

@@ -0,0 +1,21 @@
+import fs from 'fs';
+
+const useref = /<!--\s*build:([a-z]+) ([-a-zA-Z./]+)\s*-->.*?<!--\s*endbuild\s*-->/;
+
+const generateBalise = (type, output) => {
+  switch(type) {
+    case 'css':
+      return `<link href="${output}" rel="stylesheet" type="text/css">`;
+    case 'js':
+      return `<script src="${output}"></script>`
+  }
+}
+
+export default function(src) {
+  let html = fs.readFileSync(src).toString().replace(/>\n+\s*/g, '>');
+  while (useref.test(html)) {
+    const [ raw, type, output ] = useref.exec(html);
+    html = html.replace(raw, generateBalise(type, output)); 
+  }
+  return html;
+}

src/components/docker-registry-ui.riot

@@ -0,0 +1,28 @@
+<!--
+Copyright (C) 2016-2021 Jones Magloire @Joxit
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<docker-registry-ui>
+  <header>
+  </header>
+  <main>
+  </main>
+  <footer>
+  </footer>
+  <script>
+    export default {
+    }
+  </script>
+</docker-registry-ui>

src/index.html

@@ -19,10 +19,8 @@
 
 <head>
   <meta charset="UTF-8">
-  <!-- build:css vendor.css -->
+  <!-- build:css docker-registry-ui.css -->
   <link href="../node_modules/riot-mui/build/styles/riot-mui.min.css" rel="stylesheet" type="text/css">
-  <!-- endbuild -->
-  <!-- build:css style.css -->
   <link href="style.css" rel="stylesheet" type="text/css">
   <link href="material-icons.css" rel="stylesheet" type="text/css">
   <link href="roboto.css" rel="stylesheet" type="text/css">
@@ -37,12 +35,10 @@
 
 <body>
   <app></app>
-  <!-- build:js scripts/vendor.js -->
+  <!-- build:js docker-registry-ui.js -->
   <script src="../node_modules/riot/riot+compiler.min.js"></script>
   <script src="../node_modules/riot-route/dist/route.js"></script>
   <script src="../node_modules/riot-mui/build/js/riot-mui.js"></script>
-  <!-- endbuild -->
-  <!-- build:js scripts/docker-registry-ui.js -->
   <script src="tags/catalog.riot" type="riot/tag"></script>
   <script src="tags/catalog-element.riot" type="riot/tag"></script>
   <script src="tags/tag-history-button.riot" type="riot/tag"></script>

src/index.js

@@ -0,0 +1,10 @@
+import { component } from 'riot';
+
+import DockerRegistryUI from './components/docker-registry-ui.riot';
+
+import './style.css';
+import './roboto.css';
+import './material-icons.css';
+
+
+component(DockerRegistryUI)(document.getElementsByTagName('body').item(0))