Migrate from glimmer.js to svelte

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    "@babel/preset-typescript"
+  ],
+  "plugins": ["svelte-inline-compile"]
+}

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.github/workflows/yarn-test.yml

@@ -0,0 +1,16 @@
+name: Test Vorfreude
+
+on: [push]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 16
+      - run: yarn
+      - run: yarn svelte-kit sync
+      - run: yarn playwright install
+      - run: yarn test

.gitignore

@@ -1,5 +1,15 @@
-node_modules
-tmp/*
-dist
+# svelte defaults
 .DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+# extension build artifact
 /chrome/vorfreude.zip

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierrc

@@ -0,0 +1,6 @@
+{
+	"useTabs": false,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100
+}

README.md

@@ -7,32 +7,37 @@
 
 ## Prerequisites
 
-You will need the following things properly installed on your computer.
+You will need the following things installed on your computer.
 
 * [Git](https://git-scm.com/)
-* [Node.js](https://nodejs.org/) (with NPM)
+* [Node.js](https://nodejs.org/) (see package.json "engines" for required version)
 * [Yarn](https://yarnpkg.com/en/)
-* [Ember CLI](https://ember-cli.com/)
 
 ## Installation
 
 * `git clone <repository-url>` this repository
 * `cd vorfreude`
 * `yarn`
 
-## Running / Development
+## Local Development
 
-* `yarn start`
-* Visit your app at [http://localhost:4200](http://localhost:4200).
+* `yarn dev`
+* Visit the locally running app at the listed outputted in the terminal.
 
-### Building & Relasing
+## Tests
 
-1. `yarn release` (create the release)
-2. `yarn build` (create build)
-3. `yarn package` (create zip package of build for stores)
+* Unit and Component Tests (`yarn test:unit`) use [jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/)
+* Acceptance Tests (`yarn test:acceptance`) use [Playwright](https://playwright.dev/)
+	* Playwright runs tests in the browser and these need to be installed first. This can be done by running `yarn playwright install`
+* Both unit/component and acceptance tests can be ran with `yarn test`
+
+### Building / Package / Release
+
+1. `yarn version` (bump version)
+2. `yarn build` (create build, both svelte and the extension)
+3. `yarn package` (create zip package for upload to extension/addon stores)
 4. Upload zip to chrome and firefox stores
 
 ## Further Reading / Useful Links
 
-* [glimmerjs](http://github.com/tildeio/glimmer/)
-* [ember-cli](https://ember-cli.com/)
+* This project is built using [Svelte](https://svelte.dev/) and [SvelteKit](https://kit.svelte.dev/)

chrome/.gitignore

@@ -1,5 +1,6 @@
-# background.js is built an artifact by rollup in this directory
+# built artifacts
 background.js
+manifest.json
 
 # rollup typescript plugin build
 .rpt2_cache/

chrome/app

@@ -0,0 +1 @@
+../build/app

chrome/background.ts

@@ -1,15 +1,17 @@
-import { replenish } from '../src/utils/lib/manager/fetcher';
+import { Replenisher } from '../src/photo-manager/replenisher'
 
 chrome.runtime.onMessage.addListener(function(message) {
   if (message.operation === 'replenishBacklog') {
-    let { searchTerms, downloadBatchSize } = message;
+    const { searchTerms, downloadBatchSize } = message;
 
-    return replenish(searchTerms, downloadBatchSize);
+    const replenisher = new Replenisher(searchTerms);
+    replenisher.downloadBatchSize = downloadBatchSize;
+    replenisher.replenish();
   }
 });
 
 function openVorfreudeTab() {
-  let vorfreudeUrl = chrome.extension.getURL('window.html');
+  const vorfreudeUrl = chrome.extension.getURL('index.html');
   chrome.tabs.create({ url: vorfreudeUrl });
 }
 

chrome/build-manifest.js

@@ -0,0 +1,29 @@
+const { readFileSync, writeFileSync } = require('fs');
+
+function readManiestBluePrint() {
+  const manifestBlueprint = readFileSync('manifest.blueprint.json').toString();
+  return manifestBlueprint;
+}
+
+function readHtmlCspMeta() {
+  const htmlContents = readFileSync('index.html').toString();
+  const [, cspDirectives] = htmlContents.match(/<meta http-equiv="content-security-policy" content="(.+)">/);
+  return cspDirectives;
+}
+
+function generateManifest(blueprint, { csp }) {
+  const blueprintCspToken = '{{ContentSecurityPolicy}}';
+  const processed = blueprint.replace(blueprintCspToken, csp);
+  return processed;
+}
+
+function writeManifest(contents) {
+  writeFileSync('manifest.json', contents);
+}
+
+const blueprint = readManiestBluePrint();
+const csp = readHtmlCspMeta();
+const manifest = generateManifest(blueprint, { csp });
+writeManifest(manifest);
+
+console.log('🙌  Generated manifest.json');

chrome/fonts

@@ -1 +1 @@
-../dist/fonts
+../build/fonts

chrome/images

@@ -1 +1 @@
-../dist/images
+../build/images

chrome/index.html

@@ -0,0 +1 @@
+../build/index.html

chrome/manifest.json → chrome/manifest.blueprint.json

@@ -13,11 +13,12 @@
     "128": "images/icon128.png"
   },
   "options_ui": {
-    "page": "window.html#settings",
+    "page": "settings.html",
     "open_in_tab": true
   },
+  "content_security_policy": "{{ContentSecurityPolicy}}",
   "chrome_url_overrides": {
-    "newtab": "window.html"
+    "newtab": "index.html"
   },
   "background": {
     "scripts": [

chrome/package.json

@@ -6,16 +6,17 @@
   "author": "Chad Carbert",
   "license": "MIT",
   "scripts": {
-    "build": "rollup -c rollup.config.js",
-    "package": "bestzip vorfreude.zip app.css app.js background.js manifest.json fonts images window.html"
+    "build": "yarn build-js && yarn build-manifest",
+    "build-js": "rollup -c rollup.config.js",
+    "build-manifest": "node build-manifest.js",
+    "package": "bestzip vorfreude.zip index.html settings.html background.js manifest.json app fonts images"
   },
   "dependencies": {
-    "@types/chrome": "^0.0.69",
-    "bestzip": "^2.1.7",
-    "rollup": "^0.62.0",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-terser": "^1.0.1",
-    "rollup-plugin-typescript2": "^0.15.1"
+    "bestzip": "^2.2.1",
+    "rollup": "^2.79.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.33.0"
   }
 }

chrome/rollup.config.js

@@ -11,12 +11,12 @@ export default {
   plugins: [
     commonjs(),
     typescript({
-      rollupCommonJSResolveHack: true,
       include: ['**/*.ts', '../src/**/*.ts'],
+      exclude: ['**/*.test.ts'],
       tsconfigOverride: {
         types: ["chrome"],
         compilerOptions: {
-          "lib": ["es2015", "DOM"],
+          "lib": ["ESNext", "DOM"],
           inlineSources: false
         }
       }

chrome/settings.html

@@ -0,0 +1,4 @@
+<script>
+  document.location = "index.html#settings";
+</script>
+