Checkpoint for webui

blinkk · Feb 20, 2021 · 3d9ca18 · 3d9ca18
1 parent 7a66963
commit 3d9ca18
Show file tree

Hide file tree

Showing 12 changed files with 7,432 additions and 3,174 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   "scripts": {
     "check": "gts check",
     "clean": "gts clean",
-    "compile": "tsc",
+    "compile": "tsc; webpack --config webpack.common.js --mode development",
     "copy": "cpx 'src/static/**' 'dist/src/static'",
     "dev:start": "npm run copy; npm run compile",
     "dev": "nodemon --watch src -e ts --exec npm run dev:start",
@@ -40,14 +40,26 @@
     "@types/js-yaml": "^3.12.5",
     "@types/mime-types": "^2.1.0",
     "@types/node": "^14.14.16",
+    "@types/webpack": "^4.41.26",
     "ava": "^3.14.0",
     "cpx": "^1.5.0",
+    "file-loader": "^6.2.0",
+    "glob": "^7.1.6",
     "gts": "^3.0.3",
     "nodemon": "^2.0.6",
+    "preact-material-components": "^1.6.1",
+    "preact-router": "^3.2.1",
+    "preact": "^10.4.4",
+    "sass": "^1.32.4",
+    "sass-loader": "^10.1.1",
     "ts-loader": "^8.0.12",
     "ts-node": "^9.1.1",
     "typedoc": "^0.19.2",
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.3",
+    "webpack-cli": "^3.3.11",
+    "webpack-merge": "^5.7.3",
+    "webpack": "^4.43.0",
+    "webpack-stream": "^5.2.1"
   },
   "dependencies": {
     "@google-cloud/datastore": "^6.3.1",

diff --git a/src/index.js b/src/index.js
diff --git a/src/server.ts b/src/server.ts
@@ -89,6 +89,10 @@ export function createApp(siteId: string, branchOrRef: string) {
 
   const app = express();
   app.disable('x-powered-by');
+  app.use('/fileset/static/', express.static('./dist/'));
+  app.all('/fileset/', async (req: express.Request, res: express.Response) => {
+    res.sendFile(fsPath.join(__dirname, './static/', 'webui.html'));
+  });
   app.all('/*', async (req: express.Request, res: express.Response) => {
     const envFromHostname = parseHostname(
       req.hostname,

diff --git a/src/static/webui.html b/src/static/webui.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Fileset</title>
+<link rel="stylesheet" href="/fileset/static/webui.min.css">
+</head>
+<body>
+<div class="webui">container</div>
+<script src="/fileset/static/webui.min.js"></script>
+</body>
+</html>
diff --git a/src/upload.ts b/src/upload.ts
@@ -7,10 +7,16 @@ import {asyncify, mapLimit} from 'async';
 
 import {Datastore} from '@google-cloud/datastore';
 import {Storage} from '@google-cloud/storage';
+import {Type} from 'js-yaml';
 import {entity} from '@google-cloud/datastore/build/src/entity';
 
 const NUM_CONCURRENT_UPLOADS = 64;
 
+const EntityType = {
+  Ref: 'ref',
+  Branch: 'branch',
+};
+
 function getBlobPath(siteId: string, hash: string) {
   return `fileset/sites/${siteId}/blobs/${hash}`;
 }
@@ -161,12 +167,15 @@ async function finalize(
     'Fileset2Manifest',
     `${manifest.site}:ref:${manifest.shortSha}`,
   ]);
+  const modified = new Date();
   await saveManifestEntity(datastore, key, {
     branch: manifest.branch,
+    modified: modified,
     paths: manifestPaths,
     redirects: manifest.redirects,
     ref: manifest.ref,
     site: manifest.site,
+    type: EntityType.Ref,
   });
 
   // Create branch mapping, so a branch name can be used to lookup filesets.
@@ -178,10 +187,12 @@ async function finalize(
     ]);
     await saveManifestEntity(datastore, branchKey, {
       branch: manifest.branch,
+      modified: modified,
       paths: manifestPaths,
       redirects: manifest.redirects,
       ref: manifest.ref,
       site: manifest.site,
+      type: EntityType.Branch,
     });
   }
 

diff --git a/src/webui/main.tsx b/src/webui/main.tsx
@@ -0,0 +1,20 @@
+import {Component, h, render} from 'preact';
+
+interface MainState {
+  currentPath: string;
+}
+
+class Main extends Component<unknown, MainState> {
+  constructor() {
+    super();
+    this.state = {
+      currentPath: window.location.pathname,
+    };
+  }
+  render() {
+    return <div>hello world!</div>;
+  }
+}
+
+const container = document.querySelector('.webui');
+render(<Main />, container);
diff --git a/src/webui/sass/webui.sass b/src/webui/sass/webui.sass
@@ -0,0 +1,2 @@
+body
+    background: seablue
diff --git a/src/webui/tsconfig.json b/src/webui/tsconfig.json
@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+      "target": "es2015",
+      "module": "commonjs",
+      "jsx": "react",
+      "jsxFactory": "h",
+      "declaration": false,
+      "removeComments": true,
+      "allowJs": true,
+      "strict": true,
+      "strictNullChecks": false,
+      "suppressImplicitAnyIndexErrors": true
+    },
+    "lib": [
+      "dom",
+      "es2018"
+    ],
+    "exclude": [
+      "node_modules"
+    ]
+  }
diff --git a/webpack.common.js b/webpack.common.js
@@ -0,0 +1,47 @@
+const glob = require('glob');
+const path = require('path');
+
+module.exports = env => {
+  return {
+    entry: ['./src/webui/main.tsx'].concat(
+      glob.sync('./src/webui/sass/**/*.sass', {
+        ignore: ['./src/webui/sass/**/_*'],
+      })
+    ),
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.json'],
+    },
+    mode: 'development',
+    plugins: [],
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          loader: 'ts-loader',
+          options: {
+            configFile: path.resolve(__dirname, './src/webui/tsconfig.json'),
+          },
+          include: [path.resolve(__dirname, './src/webui/')],
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.s[ac]ss$/i,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: '[name].min.css',
+              },
+            },
+            'sass-loader',
+          ],
+        },
+      ],
+    },
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: '[name].min.js',
+    },
+  };
+};
diff --git a/webpack.dev.js b/webpack.dev.js
@@ -0,0 +1,7 @@
+const {merge} = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+});
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -0,0 +1,7 @@
+const {merge} = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: 'inline-source-map',
+});