using any str function makes ags give a str.replace is not a function

[enessmr]

The error:

(gjs:185091): Gjs-CRITICAL **: 17:26:41.194: JS ERROR: TypeError: str.replace is not a function
kebabify@file:///run/user/1000/ags.js:253:14
createBinding@file:///run/user/1000/ags.js:340:24
$@file:///run/user/1000/ags.js:1264:37
jsx@file:///run/user/1000/ags.js:467:6
EmojiPicker@file:///run/user/1000/ags.js:1255:23
jsx@file:///run/user/1000/ags.js:411:25
EmojiPickerWindow@file:///run/user/1000/ags.js:1333:33
main/<@file:///run/user/1000/ags.js:1928:53
main@file:///run/user/1000/ags.js:1928:32
mkApp/start/</<@file:///run/user/1000/ags.js:192:17
createRoot/<@file:///run/user/1000/ags.js:137:28
run@file:///run/user/1000/ags.js:107:14
createRoot@file:///run/user/1000/ags.js:137:16
mkApp/start/<@file:///run/user/1000/ags.js:190:19
_init/GLib.MainLoop.prototype.runAsync/</<@resource:///org/gnome/gjs/modules/core/overrides/GLib.js:263:34

the cause in /run/user/1000/ags.js:

// ../../../../../../usr/share/ags/js/src/overrides.ts
function snakeify(str) {
  return str.replace(/([a-z])([A-Z])/g, "$1_$2").replaceAll("-", "_").toLowerCase();
}

Emoji.tsx:

// by koeqaife ;)

import app from "ags/gtk4/app"
import Astal from "gi://Astal?version=4.0"
import Gtk from "gi://Gtk?version=4.0";
import Gdk from "gi://Gdk?version=4.0";
import { createState, createBinding, onCleanup } from "ags"
import { exec } from "ags/process"
import { readFile, writeFile } from "ags/file"
import GLib from "gi://GLib"

// Types
interface EmojiData {
  [category: string]: {
    [subcategory: string]: {
      [key: string]: string
    }
  }
}

interface RecentEmojis {
  [key: string]: string
}

// Constants
const RECENT_EMOJI_FILE = GLib.build_filenamev([GLib.get_home_dir(), ".cache", "recent_emoji.json"])

const CATEGORY_ICONS = {
  "smileys-emotion": "😊",
  "people-body": "👤", 
  "animals-nature": "🐾",
  "food-drink": "🍕",
  "travel-places": "✈️",
  "activities": "⚽",
  "objects": "📱",
  "symbols": "🔣",
  "flags": "🏳️"
}

// Load emoji data
const emojiDataPath = `${GLib.get_home_dir()}/.config/ags/assets/emoji.json`
let emojiData: EmojiData = {}
try {
  const jsonContent = readFile(emojiDataPath)
  emojiData = JSON.parse(jsonContent)
} catch (error) {
  console.error("Failed to load emoji data:", error)
}

// State management
const [currentPage, setCurrentPage] = createState("recent")
const [searchQuery, setSearchQuery] = createState("")
const [recent, setRecent] = createState<RecentEmojis>(readRecentEmoji())

// Helper functions
function readRecentEmoji(): RecentEmojis {
  try {
    const contents = readFile(RECENT_EMOJI_FILE)
    return JSON.parse(contents)
  } catch (error) {
    console.log("No recent emoji file found, starting fresh")
    return {}
  }
}

function writeRecentEmoji(recentData: RecentEmojis) {
  const data = JSON.stringify(recentData, null, 2)
  writeFile(RECENT_EMOJI_FILE, data)
}

function addRecentEmoji(name: string, emoji: string) {
  const newRecent = { ...recent(), [name]: emoji }
  const movedToFront = moveItemsToFront(name, newRecent)
  setRecent(movedToFront)
  writeRecentEmoji(movedToFront)
}

function moveItemsToFront(item: string, arr: RecentEmojis): RecentEmojis {
  const newArray: RecentEmojis = { [item]: arr[item] }
  for (const _item in arr) {
    if (_item !== item) {
      newArray[_item] = arr[_item]
    }
  }
  return newArray
}

function extractEmojis(data: EmojiData) {
  const emojis: { [key: string]: string } = {}
  
  Object.values(data).forEach((subgroup) => {
    Object.values(subgroup).forEach((emojiGroup) => {
      Object.entries(emojiGroup).forEach(([key, value]) => {
        emojis[key] = value
      })
    })
  })
  
  return emojis
}

function searchString(str: string, keywords: string): boolean {
  const searchTerms = keywords.split(" ")
  
  for (const term of searchTerms) {
    if (!str.toLowerCase().includes(term.toLowerCase())) {
      return false
    }
  }
  
  return true
}

// Components
function EmojiButton({ emojiKey, emoji }: {
  emojiKey: string
  emoji: string
}) {
  const tooltipText = typeof emojiKey === 'string' 
    ? emojiKey.replace(/^e\d+-\d+/, "").replace(/-/g, " ").trim()
    : ""

  return (
    <button
      className="standard_icon_button emoji"
      tooltipText={tooltipText}
      onClicked={() => {
        addRecentEmoji(emojiKey, emoji)
        exec(`wl-copy "${emoji}"`)
        app.get_window("emoji-picker")?.set_visible(false)
      }}
    >
      <label label={emoji} />
    </button>
  )
}

function CategoryButton({ icon, name }: {
  icon: string
  name: string
}) {
  return (
    <button
      class={currentPage((page) => 
        `emoji_category standard_icon_button ${page === name ? "active" : ""}`
      )}
      onClicked={() => setCurrentPage(name)}
    >
      <label label={icon} />
    </button>
  )
}

function RecentPage() {
  const emojiList = extractEmojis(emojiData)
  
  return (
    <scrollable hscroll={Gtk.PolicyType.NEVER} vexpand>
      <box vertical vpack="start">
        <flowbox
          homogeneous
          minChildrenPerLine={5}
          maxChildrenPerLine={25}
        >
          {recent((recentData) => 
            Object.entries(recentData).map(([emojiKey, emoji]) => 
              emojiList[emojiKey] ? (
                <EmojiButton
                  key={emojiKey}
                  emojiKey={emojiKey}
                  emoji={emoji}
                />
              ) : null
            ).filter(Boolean)
          )}
        </flowbox>
      </box>
    </scrollable>
  )
}

function SearchPage() {
  const emojiList = extractEmojis(emojiData)
  
  return (
    <scrollable hscroll={Gtk.PolicyType.NEVER} vexpand>
      <box vertical vpack="start">
        <flowbox
          homogeneous
          minChildrenPerLine={5}
          maxChildrenPerLine={25}
        >
          {searchQuery((query) => {
            if (query.length === 0) return []
            
            return Object.entries(emojiList)
              .filter(([emojiKey]) => searchString(emojiKey, query))
              .map(([emojiKey, emoji]) => (
                <EmojiButton
                  key={emojiKey}
                  emojiKey={emojiKey}
                  emoji={emoji}
                />
              ))
          })}
        </flowbox>
      </box>
    </scrollable>
  )
}

function CategoryPage({ category }: { category: any }) {
  return (
    <scrollable hscroll={Gtk.PolicyType.NEVER} vexpand>
      <box vertical>
        {Object.entries(category).map(([subcategoryKey, emojis]: [string, any]) => (
          <box vertical key={subcategoryKey}>
            <label
              label={`${subcategoryKey.charAt(0).toUpperCase() + subcategoryKey.replaceAll("-", " ").slice(1)}:`}
              class="title"
              halign={Gtk.Align.START}
            />
            <flowbox
              homogeneous
              minChildrenPerLine={5}
              maxChildrenPerLine={25}
            >
              {Object.entries(emojis).map(([emojiKey, emoji]: [string, string]) => (
                <EmojiButton
                  key={emojiKey}
                  emojiKey={emojiKey}
                  emoji={emoji}
                />
              ))}
            </flowbox>
          </box>
        ))}
      </box>
    </scrollable>
  )
}

function EmojiPicker() {
  return (
    <box class="emoji_list" vertical>
      {/* Top bar with search and category buttons */}
      <scrollable vscroll={Gtk.PolicyType.NEVER} hscroll={Gtk.PolicyType.ALWAYS}>
        <box class="top_bar">
          <entry
            placeholderText="Search"
            class="search"
            onChanged={(self) => {
              setSearchQuery(self.text || "")
            }}
            $={(self) => {
              // Clear search when switching pages
              const id = createBinding(currentPage, (page) => {
                if (page !== "search") {
                  self.set_text("")
                }
              })
              onCleanup(() => id?.destroy())
            }}
          />
          
          <CategoryButton icon="⏰" name="recent" />
          
          {Object.entries(CATEGORY_ICONS).map(([categoryName, icon]) => (
            <CategoryButton
              key={categoryName}
              icon={icon}
              name={categoryName}
            />
          ))}
        </box>
      </scrollable>

      {/* Main content stack */}
      <stack 
        transitionType={Gtk.StackTransitionType.CROSSFADE}
        $={(self) => {
          // Handle stack visibility based on search and current page
          const updateVisible = () => {
            const query = searchQuery()
            const page = currentPage()
            const targetPage = query.length > 0 ? "search" : page
            self.set_visible_child_name(targetPage)
          }
          
          const searchId = createBinding(searchQuery, updateVisible)
          const pageId = createBinding(currentPage, updateVisible)
          
          onCleanup(() => {
            searchId?.destroy()
            pageId?.destroy()
          })
          
          // Initial $
          updateVisible()
        }}
      >
        <stackpage name="search">
          <SearchPage />
        </stackpage>
        
        <stackpage name="recent">
          <RecentPage />
        </stackpage>
        
        {Object.entries(emojiData).map(([categoryName, category]) => (
          <stackpage key={categoryName} name={categoryName}>
            <CategoryPage category={category} />
          </stackpage>
        ))}
      </stack>
    </box>
  )
}

// Main window function
function EmojiPickerWindow() {
  return (
    <window
      name="emoji-picker"
      title="Emoji Picker"
      class="emojis"
      defaultHeight={600}
      defaultWidth={400}
      keymode={Astal.Keymode.ON_DEMAND}
      onKeyPressed={(self, keyval) => {
        if (keyval === Gdk.KEY_Escape) {
          self.set_visible(false)
          return true
        }
        return false
      }}
      onDeleteEvent={(self) => {
        self.set_visible(false)
        return true
      }}
      application={app}
    >
      <EmojiPicker />
    </window>
  )
}

// Export function to open emoji picker
export function openEmojiPicker() {
  setCurrentPage("recent")
  const window = app.get_window("emoji-picker")
  if (window) {
    if (window.visible) {
      window.set_visible(false)
    } else {
      window.set_visible(true)
      window.present()
    }
  }
}

// Export the window component for use in main app
export default EmojiPickerWindow

[Aylur]

createBinding takes an object and a key

            $={(self) => {
              // Clear search when switching pages
              const id = createBinding(currentPage, (page) => {
                if (page !== "search") {
                  self.set_text("")
                }
              })
              onCleanup(() => id?.destroy())
            }}

Are you not using an LSP? this should be caught by typescript LSP

[enessmr]

I don't know if im using an lsp

I switched to developing qs bramch recently