Merge pull request #182 from element-hq/t3chguy/segmenter

Switch from graphemer to Intl.Segmenter

package.json

@@ -111,7 +111,6 @@
     "@radix-ui/react-tooltip": "^1.0.6",
     "@storybook/manager-api": "^8.1.1",
     "classnames": "^2.3.2",
-    "graphemer": "^1.4.0",
     "vaul": "^0.7.0"
   },
   "peerDependencies": {

src/utils/string.ts

@@ -14,26 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import GraphemeSplitter from "graphemer";
-
 export const MX_USERNAME_PREFIX = "@";
 export const MX_ROOM_PREFIX = "#";
 export const MX_ALIAS_PREFIX = "+";
 
-/**
- * The CommonJS output of the graphemer package looks wrong,
- * this is a workaround
- * To remove when https://github.com/flmnt/graphemer/issues/11 is fixed
- * @param value the constructor or wrapper with `default`
- * @returns the Graphemer constructor
- */
-function interopDefault<T>(value: T): T {
-  if ((value as unknown as { default: T }).default) {
-    return (value as unknown as { default: T }).default;
-  }
-
-  return value;
-}
+const graphemeSegmenter = new Intl.Segmenter();
 
 /**
  * returns the first (non-sigil) character of 'name',
@@ -52,7 +37,6 @@ export function getInitialLetter(name: string): string {
   }
 
   // rely on a grapheme cluster splitter so that we don't break apart compound emojis
-  const splitter = new (interopDefault(GraphemeSplitter))();
-  const result = splitter.iterateGraphemes(name).next();
-  return result.done ? "" : result.value;
+  const result = graphemeSegmenter.segment(name)[Symbol.iterator]().next();
+  return result.done ? "" : result.value.segment;
 }

vite.config.ts

@@ -32,7 +32,6 @@ export default defineConfig({
         "react/jsx-runtime",
         "react/jsx-dev-runtime",
         "classnames",
-        "graphemer",
         "vaul",
         "@radix-ui/react-context-menu",
         "@radix-ui/react-dropdown-menu",