Use tsx-dom. Add paginator.

Some cleanup still needed.

.eslintrc.js

@@ -11,12 +11,18 @@ module.exports = {
     ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
     sourceType: 'module', // Allows for the use of imports
     indent: 2,
-    project: './tsconfig.json'
+    project: './tsconfig.json',
   },
   rules: {
-    '@typescript-eslint/consistent-type-assertions': ['error', { assertionStyle: 'angle-bracket' }],
     '@typescript-eslint/no-explicit-any': false,
-    "@typescript-eslint/no-floating-promises": ["error"],
+    '@typescript-eslint/consistent-type-assertions': ['error', { assertionStyle: 'as' }],
+    '@typescript-eslint/no-floating-promises': ['error'],
     '@typescript-eslint/explicit-function-return-type': ['warn', { allowExpressions: true }],
+    '@typescript-eslint/no-unused-vars': ['warn', { varsIgnorePattern: '(^h$|Component$)' }],
+    // Need these two for TSXDom.
+    '@typescript-eslint/no-namespace': false,
+    '@typescript-eslint/no-empty-interface': false,
+    '@typescript-eslint/ban-ts-ignore': false,
+    'prefer-spread': false,
   },
 };

.gitignore

@@ -1,9 +1,9 @@
-.DS_Store/
-.DS_Store
-node_modules/
-dist/
 .idea/
-mix-manifest.json
 .nyc_output/
 coverage/
-extension/
+dist/
+node_modules/
+pack/
+
+.DS_Store
+mix-manifest.json

.nycrc.json

@@ -1,17 +1,20 @@
 {
   "extension": [
-    ".ts"
+    ".ts",
+    ".tsx"
   ],
   "exclude": [
     "src/app.ts",
-    "src/background.ts"
+    "src/background.ts",
+    "src/tsxdom.ts"
   ],
   "reporter": [
     "text",
     "lcov"
   ],
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
+    "src/**/*.tsx"
   ],
   "all": true,
   "cache": false

.prettierrc.js

@@ -1,8 +1,8 @@
 module.exports = {
-    semi: true,
-    trailingComma: 'all',
-    singleQuote: true,
-    printWidth: 100,
-    tabWidth: 2,
-    useTabs: false,
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
 };

build_hook.sh

@@ -18,16 +18,6 @@ if [[ "$NODE_ENV" == "development" ]]; then
   VERSION="$VERSION-`date +"%T"`"
 fi
 
-echo "stamping build with $VERSION"
-sed -i.bak "s/!!VERSION!!/$VERSION/" dist/app.html
-rm dist/app.html.bak
-
-
-if [[ "$NODE_ENV" != "development" ]]; then
-  # production build
-  [[ -d extension ]] && rm -rf extension
-  mkdir extension
-  cd dist
-  zip -r "graytabby-$VERSION.zip" *
-  mv "graytabby-$VERSION.zip" ../extension
-fi
+# echo "stamping build with $VERSION"
+# sed -i.bak "s/!!VERSION!!/$VERSION/" dist/app.html
+# rm dist/app.html.bak

package.json

@@ -9,7 +9,9 @@
     "develop": "NODE_ENV=development webpack --watch",
     "develop:once": "NODE_ENV=development webpack",
     "build": "NODE_ENV=production webpack",
-    "clean": "rm -rf dist node_modules coverage extension; npm i",
+    "clean": "rm -rf dist coverage pack",
+    "deps": "rm -rf node_modules; npm i",
+    "bundle": "ts-node scripts/bundle.ts",
     "lint": "eslint src/**/*.ts tests/**/*.ts"
   },
   "keywords": [],
@@ -46,6 +48,7 @@
     "ts-loader": "^6.2.2",
     "ts-node": "^8.10.1",
     "ts-sinon": "^1.2.0",
+    "tsx-dom": "^0.8.3",
     "typescript": "^3.8.3",
     "web-ext": "^4.2.0",
     "webextension-polyfill-ts": "^0.9.1",

bundle.ts → scripts/bundle.ts

@@ -2,7 +2,7 @@ import * as childProcess from 'child_process';
 import * as archiver from 'archiver';
 import * as fs from 'fs';
 import * as path from 'path';
-import * as readdir from 'recursive-readdir';
+import readdir from 'recursive-readdir';
 import rimraf from 'rimraf';
 
 async function rmrf(target: string): Promise<void> {
@@ -14,15 +14,6 @@ async function rmrf(target: string): Promise<void> {
   });
 }
 
-async function mkdir(target: string): Promise<void> {
-  return new Promise((resolve, reject) => {
-    fs.mkdir(target, '755', err => {
-      if (err) reject(err);
-      resolve();
-    });
-  });
-}
-
 async function rename(src: string, dst: string): Promise<void> {
   return new Promise((resolve, reject) => {
     fs.rename(src, dst, err => {
@@ -41,36 +32,45 @@ async function subcommand(cmd: string): Promise<string[]> {
   });
 }
 
+function abspath(...parts: string[]): string {
+  return path.join(process.cwd(), ...parts);
+}
+
 async function bundle(): Promise<void> {
-  await rmrf('dist');
+  process.chdir(path.join(__dirname, '..'));
+  await rmrf(abspath('dist'));
   const build = subcommand('npm run build');
 
-  await rmrf('pack');
-  await mkdir(__dirname + '/pack');
+  await rmrf(abspath('pack'));
+  fs.mkdirSync(abspath('pack'));
   const zip = archiver.default('zip');
-  const output = fs.createWriteStream(__dirname + '/pack/chrome.zip');
+  const output = fs.createWriteStream(abspath('pack', 'chrome.zip'));
   zip.pipe(output);
 
   await build;
-  zip.directory('dist', false);
+  zip.directory(abspath('dist'), false);
   await zip.finalize();
 
   process.chdir('dist');
   await subcommand('web-ext build');
   process.chdir('..');
   let basename = '';
-  for (const f of await readdir.default('dist')) {
-    if (f.endsWith('.zip') && f.startsWith('dist/web-ext-artifacts')) {
+  for (const f of await readdir(abspath('dist'))) {
+    if (f.endsWith('.zip') && f.includes('dist/web-ext-artifacts')) {
       basename = path.basename(f);
-      await rename(f, `pack/${basename}`);
+      await rename(f, abspath('pack', basename));
     }
   }
   if (basename === '') {
     throw 'Could not find firefox bundle.';
   }
 
   basename = basename.substring(0, basename.length - '.zip'.length);
-  await rename('pack/chrome.zip', `pack/${basename}-chrome.zip`);
+  await rename(abspath('pack', 'chrome.zip'), abspath('pack', `${basename}-chrome.zip`));
+
+  for (const f of await readdir(abspath('pack'))) {
+    console.log(f);
+  }
 }
 
 function run<T>(promise: Promise<T>): void {

src/app.html

@@ -8,35 +8,6 @@
 </head>
 
 <body>
-  <!-- Options Modal -->
-  <div id="optionsModal" class="modal">
-    <div class="content">
-      <form class='pure-form pure-form-stacked'>
-        <fieldset>
-          <legend>Options</legend>
-          <label for="optionsLimit">Tabs Limit</label>
-          <input type="text" id="optionsLimit" />
-          <span class="pure-form-message">How many tabs to keep. Older tab groups are removed to keep you under this
-            limit.</span>
-
-          <label for="stacked-remember" class="pure-checkbox">
-            <input type="checkbox" id="optionsDupes" /><span>Keep duplicates.</span>
-          </label>
-          <span class="pure-form-message">If checked, identical tabs will not de-duplicate on archival.</span>
-        </fieldset>
-        <legend>Info</legend>
-        <a href="https://github.com/moribellamy/graytabby" target="_new">Source Code (on GitHub)</a>
-      </form>
-    </div>
-  </div>
-
-  <!-- App -->
-  <div id="app">
-    <h1>Welcome to GrayTabby!</h1>
-    <p id="info"></p>
-    <div id="groups"></div>
-    <img src="assets/img/blobbycat/logo.png" id="logo" />
-  </div>
   <script src="app.js"></script>
 </body>
 

src/app.ts

@@ -4,10 +4,41 @@
  */
 
 // Webpack uses MiniCssExtractPlugin when it sees this.
-import './scss/app.scss';
-
-import { graytabby } from './app/graytabby';
+import './style/app.scss';
+import { DOCUMENT } from './lib/globals';
+import { App } from './components/app';
 import { PAGE_LOAD } from './lib/globals';
+import { loadAllTabGroups } from './lib/tabs_store';
+
+export class Debugger {
+  async double(): Promise<void> {
+    const groups = await loadAllTabGroups();
+    let earliest = Math.min(...groups.map(g => g.date));
+    const groupDiv: HTMLDivElement = DOCUMENT.get().querySelector('#groups');
+    const promises: Promise<void>[] = [];
+    for (const group of groups) {
+      earliest -= 1000;
+      // TODO
+      // await ingestTabs(group.tabs, groupDiv, () => earliest);
+    }
+    await Promise.all(promises);
+  }
+}
+
+declare global {
+  interface Window {
+    gt: Debugger;
+  }
+}
+
+/**
+ * The main entry point for GrayTabby.
+ */
+export async function graytabby(): Promise<void> {
+  DOCUMENT.get().title = 'GrayTabbyzee';
+  DOCUMENT.get().body.appendChild(App());
+  DOCUMENT.get().defaultView.gt = new Debugger();
+}
 
 graytabby().then(
   () => {