refactor: completely remove existing javascript and use Svelte app

exclusively for rendering

lib/frontend/components/Input.svelte

@@ -8,11 +8,16 @@
   #form input {
     margin: 5px;
   }
+
+  input#url {
+    flex: 1;
+    font-size: 1rem;
+  }
 </style>
 
 <script>
   import { createEvent } from '../actions'
-  import logger from '../../static/app/logger'
+  import logger from '../services/logger'
 
   let value
 

lib/frontend/constants.js

@@ -0,0 +1,5 @@
+export const STORAGE_KEYS = {
+  CONFIG: 'fb-to-ical-config',
+  EVENTS: 'fb-to-ical-events',
+}
+

lib/frontend/index.js

@@ -24,4 +24,4 @@ const boot = () => {
   }
 }
 
-export default boot
+boot()

lib/frontend/logger-boot.js

@@ -1,4 +1,4 @@
-import logger from '../static/app/logger'
+import logger from './services/logger'
 import { configStore } from './stores'
 
 export default () => {

lib/frontend/services/storageListener.js

@@ -1,10 +1,6 @@
+import { STORAGE_KEYS } from '../constants'
 import { configStore, eventStore } from '../stores'
 
-export const STORAGE_KEYS = {
-  CONFIG: 'fb-to-ical-config',
-  EVENTS: 'fb-to-ical-events',
-}
-
 class StorageListener {
   constructor() {
     this._storeSubscribers = new Set()

lib/frontend/stores/configStore.js

@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store'
 
-import { STORAGE_KEYS } from '../services/storageListener'
+import { STORAGE_KEYS } from '../constants'
 
 const createConfigStore = () => {
   const state = JSON.parse(localStorage.getItem(STORAGE_KEYS.CONFIG) || '{}')

lib/frontend/stores/eventStore.js

@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store'
 
-import { STORAGE_KEYS } from '../services/storageListener'
+import { STORAGE_KEYS } from '../constants'
 import { migrateRecord, sortRecord }  from '../utils'
 
 const createEventStore = () => {

lib/static/app/crawler.js

@@ -1,20 +0,0 @@
-const crawl = async (url, { logger }) => {
-  if (logger) {
-    logger.log({
-      message: `Crawl started for url: ${url}`,
-      level: 'info',
-      service: 'parser',
-    })
-  }
-
-  return new Promise((resolve, reject) => {
-    fetch(url, {
-      method: 'GET',
-    }).then((response) => {
-      console.log(response)
-      resolve()
-    }).catch(reject)
-  })
-}
-
-export default crawl

lib/static/app/storage.js

@@ -1,27 +0,0 @@
-// TODO: this import should be removed once refactoring is finished
-import { eventStore } from '../../frontend/stores'
-
-const getConfigStorage = () => {
-  const storage = localStorage.getItem('fb-to-ical-config')
-
-  if (!storage) {
-    localStorage.setItem('fb-to-ical-config', JSON.stringify({}))
-    return "{}"
-  }
-
-  return storage
-}
-
-const getStorageContents = (storage) => {
-  return JSON.parse(storage)
-}
-
-const saveRecord = ({ id, link, createdAt, startTime, title }) => {
-  eventStore.setCalculation({ id, link, createdAt, startTime, title })
-}
-
-export {
-  getConfigStorage,
-  getStorageContents,
-  saveRecord,
-}

lib/static/app/utils.js

@@ -1,27 +0,0 @@
-// NOTE: Generate random IDs: https://stackoverflow.com/a/2117523/3056783
-const uuidv4 = () => {
-  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
-    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
-  )
-}
-
-const parseStartTimeFromiCalString = (text = '') => {
-  const [ dateStr, timeStr ] = text.split('T')
-  const rawDate = dateStr || ''
-  const rawTime = timeStr || ''
-
-  const year = Number(rawDate.slice(0, 4))
-  const month = Number(Math.max(rawDate.slice(4, 6) - 1), 0)
-  const date = Number(rawDate.slice(6, 8))
-  const hour = Number(rawTime.slice(0, 2))
-  const minutes = Number(rawTime.slice(2, 4))
-  const seconds = Number(rawTime.slice(4, 6))
-
-  const parsedDate = new Date(year, month, date, hour, minutes, seconds)
-  return parsedDate.toString()
-}
-
-export {
-  uuidv4,
-  parseStartTimeFromiCalString,
-}

lib/static/index.html

@@ -41,15 +41,6 @@
 
       </noscript>
 
-      <div id="status">
-        <div class="status-item" id="error">
-        </div>
-        <div class="status-item" id="service-worker">
-        </div>
-      </div>
-
-      <br />
-
       <div id="root"></div>
     </article>
     

lib/static/index.js

@@ -1,17 +0,0 @@
-import { uuidv4, parseStartTimeFromiCalString } from './app/utils'
-import {
-  getConfigStorage,
-  getStorageContents,
-  saveRecord,
-} from './app/storage'
-import logger from './app/logger'
-import { extractEventDataFromHTML } from '../../lib/services/ics-retriever'
-import generateICS from '../../lib/services/ics-generator'
-
-import boot from '../frontend'
-import { requestStore } from '../frontend/stores'
-import { Request } from '../frontend/records'
-
-(() => {
-  document.addEventListener('DOMContentLoaded', boot)
-})()

lib/static/style.css

@@ -73,37 +73,7 @@ img#logo {
   margin: 5px;
 }
 
-input {
-  font-size: 1rem;
-}
-
 #current-download {
   display: none;
 }
 
-.row {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-input#url {
-  flex: 1;
-}
-
-.show {
-  display: block;
-}
-
-.hidden {
-  display: none;
-}
-
-.notice {
-  font-size: 0.9rem;
-}
-
-#nojs {
-  margin: 5px 0;
-}
-

webpack.common.js

@@ -16,7 +16,7 @@ if (isFirebaseEnv && hasFirebaseConfig) {
 }
 
 module.exports = {
-  entry: path.join(__dirname, 'lib', 'static', 'index.js'),
+  entry: path.join(__dirname, 'lib', 'frontend', 'index.js'),
   output: {
     filename: '[name].[hash].js',
     path: destination,