Release 2.0.0

.gitignore

@@ -8,3 +8,4 @@ packages/*
 node_modules/
 yarn-error.log
 package-lock.json
+*.tsbuildinfo

README.md

@@ -4,22 +4,40 @@
 
 ## Introduction
 
-Hostelworld on Roids (H.O.R) is a browser extension designed to enhance your experience while searching and selecting
-hostels.
+Hostelworld on Roids (H.O.R) is an open source browser extension designed to enhance your experience
+while searching and selecting hostels.
 
-It eliminates obstructions from featured/promoted properties and unlocks hidden native features on hostelworld, such as
-displaying guest-origin stats per property and searched cities. Moreover, it lists some properties which may be
-unavailable due to scheduling conflicts, but would have been more ideal for you if your travel dates were more flexible.
+It eliminates obstructions from featured/promoted properties and unlocks hidden native features on Hostelworld. Moreover,
+it lists some properties which may be unavailable due to scheduling conflicts, but would have been more ideal for you if
+your travel dates were more flexible.
 
-In addition, the extension provides extra metrics by analyzing the availability and reviews per property, presenting
+In a nutshell, the extension provides extra metrics by analyzing the availability and reviews per property, presenting
 this data directly on the property card. This might help to facilitate your decision-making process when selecting a
 hostel.
 
+Here's what it does:
+
+* Removes featured/promoted property statue obstructions from search results.
+* Surfaces mobile-exclusive deals that are normally reserved only for the mobile app.
+* Displays guest-origin stats per property, showing where upcoming guests are arriving from.
+* Shows the gender split (male, female, solo travelers) and age group distribution of past guests.
+* Checks room availability by type (mixed dorms, female-only dorms, private rooms) and their capacity.
+* Assigns demographic badges like "Great for Solo", "Female Friendly", "Young Crowd", and more.
+* Offers a custom filter system to narrow down properties by badge, demographics, and age groups.
+
 H.O.R was developed as a personal side project to simplify the process of selecting the "best" hostel from an extensive
 range of good ones. It proved & continues to prove useful during my travels, assisting me in finding the most suitable
 place to stay depending on my mood, whether I was looking for some busy or quieter place to stay at. :)
 
 
+## Support
+
+If you find this extension useful, consider buying me a coffee! It helps keep the project alive and motivates
+further development.
+
+[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://buymeacoffee.com/karamanisdev)
+
+
 ## Installation
 
 [![Chrome Web Store Version](https://img.shields.io/chrome-web-store/v/dfilmjjmeegkakfmnadkimgflocnnnbg.svg?style=for-the-badge)](https://chrome.google.com/webstore/detail/dfilmjjmeegkakfmnadkimgflocnnnbg)

babel.config.js

@@ -1,14 +1,24 @@
 'use strict'
 
-module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
+module.exports = (api) => {
+  api.cache(true)
+
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          useBuiltIns: 'usage',
+          corejs: '3',
+          targets: '> 1%, not dead'
+        }
+      ]
+    ],
+    overrides: [
       {
-        useBuiltIns: 'usage',
-        corejs: '3',
-        targets: '> 1%, not dead'
+        test: /\.tsx$/,
+        presets: ['babel-preset-solid']
       }
     ]
-  ]
+  }
 }

eslint.config.mjs

@@ -24,17 +24,23 @@ export default [
     'plugin:@typescript-eslint/recommended'
   ),
   {
-    files: ['**/*.{ts,js,mjs}'],
+    files: ['**/*.{ts,tsx,js,mjs}'],
     plugins: {
       unicorn
     },
     languageOptions: {
       globals: {
-        ...globals.node
+        ...globals.node,
+        ...globals.browser
       },
       parser: tsParser,
       ecmaVersion: 2023,
-      sourceType: 'module'
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      }
     },
     rules: {
       'max-len': ['error', { code: 120 }],
@@ -55,6 +61,10 @@ export default [
       }],
       'import/no-useless-path-segments': ['error', {
         noUselessIndex: true
+      }],
+      'import/no-cycle': ['error', {
+        maxDepth: Infinity,
+        ignoreExternal: true
       }]
     }
   }

package.json

@@ -2,17 +2,21 @@
   "name": "hostelworld-on-roids-extension",
   "engines": {
     "npm": "^11.4.2",
-    "yarn": "^4.9.2",
+    "yarn": "^4.12.0",
     "node": "^24.3.0"
   },
-  "packageManager": "yarn@4.9.2",
+  "packageManager": "yarn@4.12.0",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
   "scripts": {
     "watch": "yarn build:dev --watch --mode=development",
     "build:prod": "webpack --config webpack.config.mjs --mode=production",
     "build:dev": "webpack --config webpack.config.mjs --mode=development",
     "lint": "yarn lint:tsc && yarn lint:eslint && yarn lint:scss && yarn lint:commit",
     "lint:tsc": "tsc --noEmit --incremental false",
-    "lint:eslint": "eslint \"{src,scripts}/**/*.{ts,js,mjs}\"",
+    "lint:eslint": "eslint \"{src,scripts}/**/*.{ts,tsx,js,mjs}\"",
     "lint:scss": "stylelint \"src/**/*.scss\"",
     "lint:commit": "node scripts/commitlint.mjs",
     "crx:key": "node scripts/crx-key.mjs",
@@ -37,6 +41,7 @@
     "@typescript-eslint/parser": "^8.54.0",
     "archiver": "^7.0.1",
     "babel-loader": "^10.0.0",
+    "babel-preset-solid": "^1.9.0",
     "chalk": "^5.6.2",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^13.0.1",
@@ -70,6 +75,7 @@
   },
   "dependencies": {
     "ky": "^1.14.3",
-    "serialize-anything": "^1.2.3"
+    "serialize-anything": "^1.2.3",
+    "solid-js": "^1.9.0"
   }
 }

src/app/Core/ContentInitializer.ts

@@ -1,11 +1,23 @@
 import { ScriptLoader } from 'Utils/ScriptLoader'
 import { ExtensionRuntime } from 'Utils/ExtensionRuntime'
+import { ExtensionConfig } from 'Utils/ExtensionConfig'
 import { WorkerRPCEndpoint } from 'Communication/WorkerRPCEndpoint'
 
 export class ContentInitializer {
   public static async init (): Promise<void> {
     WorkerRPCEndpoint.listen()
 
+    ExtensionConfig.init(
+      {
+        name: ExtensionRuntime.manifestName(),
+        version: ExtensionRuntime.manifestVersion(),
+        homepage: ExtensionRuntime.manifestHomepage(),
+        assets: {
+          icon: ExtensionRuntime.assetUrl('icons/icon32.png')
+        }
+      }
+    )
+
     /*
      Why? you wonder?
      Well in order to have access to the window attributes to be able to do things like intercepting XHR requests etc...

src/app/Core/WorkerInitializer.ts

@@ -1,7 +1,9 @@
 import { WorkerRPCEndpoint } from 'Communication/WorkerRPCEndpoint'
 import { WorkerTaskDispatcher } from 'WorkerTasks/WorkerTaskDispatcher'
 import type { WorkerTaskResult } from 'WorkerTasks/WorkerTaskDispatcher'
-import { ComposePropertyTask } from 'WorkerTasks/Tasks/ComposePropertyTask'
+import { FetchReviewsTask } from 'WorkerTasks/Tasks/FetchReviewsTask'
+import { FetchAvailabilityTask } from 'WorkerTasks/Tasks/FetchAvailabilityTask'
+import { FetchCountriesTask } from 'WorkerTasks/Tasks/FetchCountriesTask'
 
 export class WorkerInitializer {
   public static init (): void {
@@ -13,6 +15,8 @@ export class WorkerInitializer {
   }
 
   private static registerTasks (): void {
-    WorkerTaskDispatcher.register('compose:property', new ComposePropertyTask())
+    WorkerTaskDispatcher.register('fetch:reviews', new FetchReviewsTask())
+    WorkerTaskDispatcher.register('fetch:availability', new FetchAvailabilityTask())
+    WorkerTaskDispatcher.register('fetch:countries', new FetchCountriesTask())
   }
 }

src/app/DTOs/AvailabilityMetrics.ts

@@ -5,7 +5,7 @@ export class AvailabilityMetrics {
   private max!: Metrics
   private current!: Metrics
 
-  constructor (attributes: Record<string, Metrics>) {
+  constructor (attributes: { max: Metrics; current: Metrics }) {
     Object.assign(this, attributes)
   }
 

src/app/DTOs/Property.ts

@@ -1,15 +1,26 @@
 import type { AvailabilityMetrics } from 'DTOs/AvailabilityMetrics'
 import type { ReviewMetrics } from 'DTOs/ReviewMetrics'
 import type { BookedCountry } from 'DTOs/BookedCountry'
+import type { PropertyBadge } from 'Services/PropertyBadgeService'
+
+type PropertyAttributes = {
+  id: number
+  name: string
+  reviewMetrics: ReviewMetrics
+  availabilityMetrics: AvailabilityMetrics
+  bookedCountries: BookedCountry[]
+  badges: PropertyBadge[]
+}
 
 export class Property {
   private id!: number
   private name!: string
   private reviewMetrics!: ReviewMetrics
   private availabilityMetrics!: AvailabilityMetrics
   private bookedCountries!: BookedCountry[]
+  private badges!: PropertyBadge[]
 
-  constructor (attributes: Record<string, unknown>) {
+  constructor (attributes: PropertyAttributes) {
     Object.assign(this, attributes)
   }
 
@@ -32,4 +43,8 @@ export class Property {
   public getBookedCountries (): BookedCountry[] {
     return this.bookedCountries
   }
+
+  public getBadges (): PropertyBadge[] {
+    return this.badges
+  }
 }

src/app/DTOs/ReviewMetrics.ts

@@ -1,3 +1,4 @@
+import type { PropertyReviews } from 'Services/Hostelworld/Api/ReviewsClient'
 import { toPercent } from 'Utils'
 
 export class ReviewMetrics {
@@ -6,8 +7,9 @@ export class ReviewMetrics {
   private other!: number
   private solo!: number
   private total!: number
+  private ages!: Record<string, number>
 
-  constructor (attributes: Record<string, number>) {
+  constructor (attributes: PropertyReviews) {
     Object.assign(this, attributes)
   }
 
@@ -46,4 +48,12 @@ export class ReviewMetrics {
   public getTotal (): number {
     return this.total
   }
+
+  public getAges (): Record<string, number> {
+    return this.ages
+  }
+
+  public getAgePercentage (age: string): number {
+    return toPercent(this.ages[age] ?? 0, this.getTotal())
+  }
 }

src/app/DTOs/Search.ts

@@ -1,11 +1,17 @@
 import { dateAddDays } from 'Utils'
 
+type SearchAttributes = {
+  to: Date
+  from: Date
+  cityId: string
+}
+
 export class Search {
   private to!: Date
   private from!: Date
   private cityId!: string
 
-  constructor (attributes: Record<string, Date | string>) {
+  constructor (attributes: SearchAttributes) {
     Object.assign(this, attributes)
   }
 
@@ -21,15 +27,20 @@ export class Search {
     return this.cityId
   }
 
-  public static createFromHostelworldSearchUrl (url: URL): typeof this.prototype {
+  public static createFromHostelworldSearchUrl (url: URL): Search {
     const parameters: URLSearchParams = url.searchParams
     if (!parameters.has('date-start') || !parameters.has('num-nights')) {
       throw new Error('Not a hostelworld search url.')
     }
 
     const from: Date = new Date(<string>parameters.get('date-start'))
     const daysToAdd: number = Number(parameters.get('num-nights'))
-    const [, cityId]: [string, string] = url.toString().match(/cities\/(\d+)\/properties\//) as [string, string]
+
+    const match: RegExpMatchArray | null = url.toString().match(/cities\/(\d+)\/properties\//)
+    if (!match) {
+      throw new Error('Not a hostelworld search url.')
+    }
+    const [, cityId]: [string, string] = match as [string, string]
 
     return new this({
       cityId, from, to: dateAddDays(from, daysToAdd)

src/app/Factories/PropertyFactory.ts

@@ -1,39 +1,33 @@
-import type { Search } from 'DTOs/Search'
-import type { Property as HostelworldProperty } from 'Types/HostelworldSearch'
 import { Property } from 'DTOs/Property'
 import { AvailabilityMetrics } from 'DTOs/AvailabilityMetrics'
 import type { PropertyAvailability } from 'Services/Hostelworld/Api/AvailabilityClient'
 import type { PropertyReviews } from 'Services/Hostelworld/Api/ReviewsClient'
 import type { PropertyGuestsCountries } from 'Services/Hostelworld/Api/VisitorsCountryClient'
 import { ReviewMetrics } from 'DTOs/ReviewMetrics'
-import { ReviewsClient } from 'Services/Hostelworld/Api/ReviewsClient'
-import { VisitorsCountryClient } from 'Services/Hostelworld/Api/VisitorsCountryClient'
 import { BookedCountry } from 'DTOs/BookedCountry'
-import { AvailabilityClient } from 'Services/Hostelworld/Api/AvailabilityClient'
+import { PropertyBadgeService, type PropertyBadge, type PropertyMetrics } from 'Services/PropertyBadgeService'
 
 export class PropertyFactory {
-  public static async create (property: HostelworldProperty, search: Search): Promise<Property> {
-    const { id, name } = property
-
-    const [reviews, availability, countries]: [PropertyReviews, PropertyAvailability, PropertyGuestsCountries] =
-      await Promise.all([
-        ReviewsClient.fetch(id),
-        AvailabilityClient.fetch(id, search.getFrom(), search.getTo()),
-        VisitorsCountryClient.fetch(id, search.getFrom(), search.getTo())
-      ])
-
+  public static create (
+    id: number,
+    name: string,
+    reviews: PropertyReviews,
+    availability: PropertyAvailability,
+    countries: PropertyGuestsCountries
+  ): Property {
     const reviewMetrics: ReviewMetrics = new ReviewMetrics(reviews)
     const availabilityMetrics: AvailabilityMetrics = new AvailabilityMetrics(availability)
-    const bookedCountries: BookedCountry[] = countries.map(
-      country => new BookedCountry(country)
-    )
+    const bookedCountries: BookedCountry[] = countries.map(country => new BookedCountry(country))
+    const metrics: PropertyMetrics = { reviews: reviewMetrics, availability: availabilityMetrics }
+    const badges: PropertyBadge[] = PropertyBadgeService.badgesFor(metrics)
 
     return new Property({
       id,
       name,
       reviewMetrics,
+      availabilityMetrics,
       bookedCountries,
-      availabilityMetrics
+      badges
     })
   }
 }