Implement TextSegmenter

Author: NotFounds

example/src/App.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React from 'react';
 
-import { ExampleComponent } from 'react-segmenter'
-import 'react-segmenter/dist/index.css'
+import { TextSegmenter } from 'react-segmenter';
 
 const App = () => {
-  return <ExampleComponent text="Create React Library Example 😄" />
-}
+  return (
+    <TextSegmenter>Hello World!</TextSegmenter>)
+  ;
+};
 
-export default App
+export default App;

example/tsconfig.json

@@ -2,7 +2,10 @@
   "compilerOptions": {
     "outDir": "dist",
     "module": "esnext",
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "moduleResolution": "node",
     "jsx": "react",
     "sourceMap": true,
@@ -15,8 +18,21 @@
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "build"]
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "build"
+  ]
 }

src/index.test.tsx

@@ -1,7 +1,7 @@
-import { ExampleComponent } from '.'
+import { TextSegmenter } from '.'
 
-describe('ExampleComponent', () => {
+describe('TextSegmenter', () => {
   it('is truthy', () => {
-    expect(ExampleComponent).toBeTruthy()
+    expect(TextSegementer).toBeTruthy()
   })
 })

src/index.tsx

@@ -1,10 +1,92 @@
-import * as React from 'react'
-import styles from './styles.module.css'
+import React, { useMemo, useState, useEffect } from "react";
 
-interface Props {
-  text: string
-}
+const joinWbr2StringArray = (ary: string[]) => {
+  const res: React.ReactNode[] = ary
+    .filter((e) => !!e)
+    .flatMap((e, i) => [e, <wbr key={i} />]);
+  return res;
+};
+
+type TextSegmenterCoreProps = {
+  children: string;
+  locale: string;
+};
+
+const TextSegmenterCore: React.FC<TextSegmenterCoreProps> = ({
+  locale,
+  children
+}) => {
+  const segmenter = useMemo(
+    () => new Intl.Segmenter(locale, { granularity: "word" }),
+    [locale]
+  );
+  const splittedText = useMemo(() => {
+    return Array.from(segmenter.segment(children)).map((s) => s.segment);
+  }, [segmenter, children]);
+
+  return <>{joinWbr2StringArray(splittedText)}</>;
+};
+
+type Props = {
+  children: React.ReactNode;
+  locale?: string;
+};
+
+const TextSegmenterInner: React.FC<Required<Props>> = ({
+  locale,
+  children
+}) => {
+  return (
+    <>
+      {React.Children.map(children, (child) => {
+        if (typeof child === "string")
+          return <TextSegmenterCore locale={locale}>{child}</TextSegmenterCore>;
+        if (!React.isValidElement(child)) return child;
+        if (child.props.children) {
+          return React.cloneElement(
+            child,
+            {},
+            <TextSegmenterInner locale={locale}>
+              {child.props.children}
+            </TextSegmenterInner>
+          );
+        }
+        return child;
+      })}
+    </>
+  );
+};
+
+/**
+ * A component to split a word by semantics for non-separated sentences like Japanese.
+ * @param children [ReactNode] target node
+ * @param locale [string] target locale. default is "ja-JP"
+ * @return sentences separated by semantics and wrapped with span
+ */
+export const TextSegmenter: React.FC<Props> = ({
+  locale = "ja-JP",
+  children
+}) => {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => setIsClient(true), []);
+
+  if (!isClient) {
+    // two-pass rendering.
+    return <>{children}</>;
+  }
+  if (Intl.Segmenter === undefined) {
+    // Intl.Segmenter is unavailable.
+    return <>{children}</>;
+  }
+  if (!Intl.Segmenter.supportedLocalesOf(locale)) {
+    // the locale is not supported.
+    return <>{children}</>;
+  }
+
+  return (
+    <span style={{ wordBreak: "keep-all" }}>
+      <TextSegmenterInner locale={locale}>{children}</TextSegmenterInner>
+    </span>
+  );
+};
 
-export const ExampleComponent = ({ text }: Props) => {
-  return <div className={styles.test}>Example Component: {text}</div>
-}

src/styles.module.css

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs"
+    "module": "esnext"
   }
-}
+}