Improve gallery dirs and DOM types (#121)

* Add dom types

* Refactor directory constants

* Add noEmit true

We use Vite to process TypeScript.

src/lib/account-settings.ts

@@ -31,9 +31,9 @@ interface AvatarFile extends PuttableUnixTree, WNFile {
   }
 }
 
-export const ACCOUNT_SETTINGS_DIR = [ 'private', 'settings' ]
+export const ACCOUNT_SETTINGS_DIR = wn.path.directory('private', 'settings')
-const AVATAR_DIR = [ ...ACCOUNT_SETTINGS_DIR, 'avatars' ]
+const AVATAR_DIR = wn.path.combine(ACCOUNT_SETTINGS_DIR, wn.path.directory('avatars'))
-const AVATAR_ARCHIVE_DIR = [ ...AVATAR_DIR, 'archive' ]
+const AVATAR_ARCHIVE_DIR = wn.path.combine(AVATAR_DIR, wn.path.directory('archive'))
 const AVATAR_FILE_NAME = 'avatar'
 const FILE_SIZE_LIMIT = 20
 
@@ -44,14 +44,13 @@ const archiveOldAvatar = async (): Promise<void> => {
   const fs = getStore(filesystemStore)
 
   // Return if user has not uploaded an avatar yet
-  const avatarDirExists = await fs.exists(wn.path.file(...AVATAR_DIR))
+  const avatarDirExists = await fs.exists(AVATAR_DIR)
   if (!avatarDirExists) {
     return
   }
 
   // Find the filename of the old avatar
-  const path = wn.path.directory(...AVATAR_DIR)
+  const links = await fs.ls(AVATAR_DIR)
-  const links = await fs.ls(path)
   const oldAvatarFileName = Object.keys(links).find(key =>
     key.includes(AVATAR_FILE_NAME)
   )
@@ -60,8 +59,8 @@ const archiveOldAvatar = async (): Promise<void> => {
     }`
 
   // Move old avatar to archive dir
-  const fromPath = wn.path.file(...AVATAR_DIR, oldAvatarFileName)
+  const fromPath = wn.path.combine(AVATAR_DIR, wn.path.file(oldAvatarFileName))
-  const toPath = wn.path.file(...AVATAR_ARCHIVE_DIR, archiveFileName)
+  const toPath = wn.path.combine(AVATAR_ARCHIVE_DIR, wn.path.file(archiveFileName))
   await fs.mv(fromPath, toPath)
 
   // Announce the changes to the server
@@ -79,7 +78,7 @@ export const getAvatarFromWNFS = async (): Promise<void> => {
     const fs = getStore(filesystemStore)
 
     // If the avatar dir doesn't exist, silently fail and let the UI handle it
-    const avatarDirExists = await fs.exists(wn.path.file(...AVATAR_DIR))
+    const avatarDirExists = await fs.exists(AVATAR_DIR)
     if (!avatarDirExists) {
       accountSettingsStore.update(store => ({
         ...store,
@@ -89,8 +88,7 @@ export const getAvatarFromWNFS = async (): Promise<void> => {
     }
 
     // Find the file that matches the AVATAR_FILE_NAME
-    const path = wn.path.directory(...AVATAR_DIR)
+    const links = await fs.ls(AVATAR_DIR)
-    const links = await fs.ls(path)
     const avatarName = Object.keys(links).find(key =>
       key.includes(AVATAR_FILE_NAME)
     )
@@ -104,7 +102,7 @@ export const getAvatarFromWNFS = async (): Promise<void> => {
       return
     }
 
-    const file = await fs.get(wn.path.file(...AVATAR_DIR, `${avatarName}`))
+    const file = await fs.get(wn.path.combine(AVATAR_DIR, wn.path.file(`${avatarName}`)))
 
     // The CID for private files is currently located in `file.header.content`
     const cid = (file as AvatarFile).header.content.toString()
@@ -169,7 +167,7 @@ export const uploadAvatarToWNFS = async (image: File): Promise<void> => {
 
     // Create a sub directory and add the avatar
     await fs.write(
-      wn.path.file(...AVATAR_DIR, updatedImage.name),
+      wn.path.combine(AVATAR_DIR, wn.path.file(updatedImage.name)),
       await fileToUint8Array(updatedImage)
     )
 

src/lib/auth/account.ts

@@ -1,5 +1,4 @@
 import * as uint8arrays from 'uint8arrays'
-import * as webnative from 'webnative'
 import { sha256 } from 'webnative/components/crypto/implementation/browser'
 import { publicKeyToDid } from 'webnative/did/transformers'
 import type { Crypto } from 'webnative'
@@ -83,7 +82,7 @@ export const register = async (hashedUsername: string): Promise<boolean> => {
     username: {
       full: fullUsername,
       hashed: hashedUsername,
-      trimmed: fullUsername.split('#')[0]
+      trimmed: fullUsername.split('#')[ 0 ]
     },
     session
   }))
@@ -97,9 +96,9 @@ export const register = async (hashedUsername: string): Promise<boolean> => {
  * @param fs FileSystem
  */
 const initializeFilesystem = async (fs: FileSystem): Promise<void> => {
-  await fs.mkdir(webnative.path.directory(...GALLERY_DIRS[ AREAS.PUBLIC ]))
+  await fs.mkdir(GALLERY_DIRS[ AREAS.PUBLIC ])
-  await fs.mkdir(webnative.path.directory(...GALLERY_DIRS[ AREAS.PRIVATE ]))
+  await fs.mkdir(GALLERY_DIRS[ AREAS.PRIVATE ])
-  await fs.mkdir(webnative.path.directory(...ACCOUNT_SETTINGS_DIR))
+  await fs.mkdir(ACCOUNT_SETTINGS_DIR)
 }
 
 export const loadAccount = async (hashedUsername: string, fullUsername: string): Promise<void> => {
@@ -117,7 +116,7 @@ export const loadAccount = async (hashedUsername: string, fullUsername: string):
     username: {
       full: fullUsername,
       hashed: hashedUsername,
-      trimmed: fullUsername.split('#')[0],
+      trimmed: fullUsername.split('#')[ 0 ],
     },
     session,
     backupCreated: backupStatus.created

src/routes/gallery/lib/gallery.ts

@@ -30,8 +30,8 @@ type Link = {
 }
 
 export const GALLERY_DIRS = {
-  [ AREAS.PUBLIC ]: [ 'public', 'gallery' ],
+  [ AREAS.PUBLIC ]: wn.path.directory('public', 'gallery'),
-  [ AREAS.PRIVATE ]: [ 'private', 'gallery' ]
+  [ AREAS.PRIVATE ]: wn.path.directory('private', 'gallery')
 }
 const FILE_SIZE_LIMIT = 20
 
@@ -48,7 +48,7 @@ export const getImagesFromWNFS: () => Promise<void> = async () => {
     const fs = getStore(filesystemStore)
 
     // Set path to either private or public gallery dir
-    const path = wn.path.directory(...GALLERY_DIRS[ selectedArea ])
+    const path = GALLERY_DIRS[ selectedArea ]
 
     // Get list of links for files in the gallery dir
     const links = await fs.ls(path)
@@ -56,7 +56,7 @@ export const getImagesFromWNFS: () => Promise<void> = async () => {
     let images = await Promise.all(
       Object.entries(links).map(async ([ name ]) => {
         const file = await fs.get(
-          wn.path.file(...GALLERY_DIRS[ selectedArea ], `${name}`)
+          wn.path.combine(GALLERY_DIRS[ selectedArea ], wn.path.file(`${name}`))
         )
 
         if (!isFile(file)) return null
@@ -131,7 +131,7 @@ export const uploadImageToWNFS: (
 
     // Reject the upload if the image already exists in the directory
     const imageExists = await fs.exists(
-      wn.path.file(...GALLERY_DIRS[ selectedArea ], image.name)
+      wn.path.combine(GALLERY_DIRS[ selectedArea ], wn.path.file(image.name))
     )
     if (imageExists) {
       throw new Error(`${image.name} image already exists`)
@@ -139,7 +139,7 @@ export const uploadImageToWNFS: (
 
     // Create a sub directory and add some content
     await fs.write(
-      wn.path.file(...GALLERY_DIRS[ selectedArea ], image.name),
+      wn.path.combine(GALLERY_DIRS[ selectedArea ], wn.path.file(image.name)),
       await fileToUint8Array(image)
     )
 
@@ -165,12 +165,12 @@ export const deleteImageFromWNFS: (
     const fs = getStore(filesystemStore)
 
     const imageExists = await fs.exists(
-      wn.path.file(...GALLERY_DIRS[ selectedArea ], name)
+      wn.path.combine(GALLERY_DIRS[ selectedArea ], wn.path.file(name))
     )
 
     if (imageExists) {
       // Remove images from server
-      await fs.rm(wn.path.file(...GALLERY_DIRS[ selectedArea ], name))
+      await fs.rm(wn.path.combine(GALLERY_DIRS[ selectedArea ], wn.path.file(name)))
 
       // Announce the changes to the server
       await fs.publish()

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "moduleResolution": "node",
     "module": "es2020",
-    "lib": ["es2020"],
+    "lib": ["dom", "es2020"],
     "target": "es2019",
     /**
     svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
@@ -22,6 +22,7 @@
     "baseUrl": ".",
     "allowJs": true,
     "checkJs": true,
+    "noEmit": true,
     "paths": {
       "$components": ["src/components"],
       "$components/*": ["src/components/*"],