Merge pull request #4 from sehyun-hwang/vite2esbuild

Vite2esbuild

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
-build
+dist.js
 
 *.log

express/index.js

@@ -1,9 +1,9 @@
 import { userInfo as getUserInfo } from "os";
 import { createHash } from 'crypto';
+import { buffer as stream2buffer } from 'stream/consumers';
 
 import { Router } from 'express';
 import got from 'got';
-import { streamToBuffer } from '@jorgeferrero/stream-to-buffer';
 import { Base64Encode } from 'base64-stream';
 
 const { uid } = getUserInfo();
@@ -37,7 +37,7 @@ export const router = Router()
 
             const { date } = req.query;
             type = _type;
-            streamToBuffer(req).then(_buffer => buffer = _buffer);
+            stream2buffer(req).then(_buffer => buffer = _buffer);
 
             try {
                 Promise.all([
@@ -59,7 +59,8 @@ export const router = Router()
 
                     ])
 
-                    .then(([json]) => res.json(json));
+                    .then(([json]) => res.json(json))
+                    .catch(console.log);
             }
 
             catch (error) {

express/package.json

@@ -5,7 +5,6 @@
         "curl-svg": "curl --data-binary @/mnt/plantym/news-title/result.svg -H 'Content-Type: image/svg+xml' localhost:8080/imshow?date=`date -Ins | sed 's/\\+/%2B/; s/\\,/\\./'`"
     },
     "dependencies": {
-        "@jorgeferrero/stream-to-buffer": "^2.0.6",
         "base64-stream": "^1.0.0",
         "express": "^4.17.3",
         "got": "^12.0.2"

nginx/.dockerignore

@@ -1,4 +1,4 @@
 node_modules
-snowpack/build
+dist.js
 
-Dockerfile
+Dockerfile

nginx/Dockerfile

@@ -1,17 +1,15 @@
 FROM node:alpine as build
 
 WORKDIR /mnt
-COPY package.json yarn.lock ./
+COPY package.json ./
 RUN yarn
 
-COPY snowpack.config.json ./
-COPY snowpack/index.js snowpack/
-
+COPY esbuild ./esbuild
 RUN yarn build
 
 FROM shurco/nginx-push-stream-module
 
 COPY . /var/www/html
-COPY --from=build /mnt/snowpack/build /var/www/html/snowpack/build
+COPY --from=build /mnt/esbuild/dist.js /var/www/html/esbuild/dist.js
 
 LABEL org.opencontainers.image.source https://github.com/sehyun-hwang/imshow

nginx/esbuild/lib.js

@@ -0,0 +1,4 @@
+import { fileTypeFromBuffer } from 'file-type/core';
+import sanitizeHtml from 'sanitize-html';
+
+export { fileTypeFromBuffer, sanitizeHtml };

nginx/esbuild/mock-stream.js

@@ -0,0 +1 @@
+export default null;

nginx/index.html

@@ -7,9 +7,13 @@
         <title>Real-Time imshow Viewer</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🖼</text></svg>">
 
+        <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
+
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material/[email protected]/dist/mdc.tab-bar.min.css" />
         <style>
             html {
                 padding: 0;
+                font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
             }
 
             #mouse-position {
@@ -19,6 +23,10 @@
                 padding: 1rem;
                 background: white;
             }
+
+            #subscription-management h3 {
+                display: inline;
+            }
         </style>
         <script type="module" src="./index.js"></script>
     </head>
@@ -32,6 +40,29 @@ <h1>Real-Time <code>imshow</code> Viewer</h1>
             <input type="file" onchange="Upload(this)">
         </p>
 
+        <section>
+            <h2>Subscription Management</h2>
+            <ul id="subscription-management">
+                <li>
+                    <h3><code>/</code></h3>
+                    <input type="checkbox" />
+                    <label for="">Append images</label>
+                    <button>Delete</button>
+                </li>
+            </ul>
+            <button></button>
+        </section>
+
+        <button class="mdc-tab" role="tab" aria-selected="false" tabindex="-1">
+            <span class="mdc-tab__content">
+                <span class="mdc-tab__text-label">Favorites</span>
+                <span class="mdc-tab-indicator">
+                    <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+                </span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+        </button>
+
         <img id="initial" class="content" src="https://proxy.hwangsehyun.com/imshow/last">
     </body>
 

nginx/index.js

@@ -2,8 +2,11 @@ import WebSocket from 'https://cdn.jsdelivr.net/npm/[email protected]
 import { WordArray } from 'https://cdn.jsdelivr.net/npm/[email protected]/lib/core.js';
 import { MD5 } from 'https://cdn.jsdelivr.net/npm/[email protected]/lib/md5.js';
 
-import { fromStream } from './snowpack/build/index.js';
+import { fileTypeFromBuffer } from './esbuild/dist.js';
 import { onMouseMove, SUB_URL } from './misc.js';
+//import { MDCTabBar } from 'https://cdn.jsdelivr.net/npm/@material/[email protected]/dist/mdc.tabBar.min.js/+esm'
+
+//const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
 
 const selectHashElement = hash => {
     const elements = document.querySelectorAll(`.content[data-hash="${hash}"]`);
@@ -29,7 +32,7 @@ websocket.addEventListener('message', ({ data }) => Promise.resolve(data)
         }, () => fetch('data:image/png;base64,' + data)
 
         .then(async res => {
-            const type = await fromStream(res.clone().body)
+            const type = await fileTypeFromBuffer(await res.clone().arrayBuffer())
                 .then(result => result ? result.mime : 'image/svg+xml');
             const buffer = await res.arrayBuffer();
             const blob = new Blob([buffer], { type });
@@ -76,7 +79,7 @@ websocket.addEventListener('message', ({ data }) => Promise.resolve(data)
             }
         }
         child ? child.after(newElement) : document.body.appendChild(newElement);
-        window.scrollTo(0, document.body.scrollHeight);
+        //window.scrollTo(0, document.body.scrollHeight);
     })
     .catch(console.error)
 

nginx/package.json

@@ -1,11 +1,12 @@
 {
     "type": "module",
     "scripts": {
-        "build": "snowpack build"
+        "build": "cd esbuild && esbuild lib.js --bundle --format=esm --alias:node:buffer=buffer --alias:node:stream=./mock-stream.js --outfile=./dist.js"
     },
     "devDependencies": {
-        "file-type": "^16.5.3",
-        "sanitize-html": "^2.5.1",
-        "snowpack": "^3.8.8"
+        "buffer": "^6.0.3",
+        "esbuild": "^0.17.14",
+        "file-type": "^18.2.1",
+        "sanitize-html": "^2.5.1"
     }
 }