allow for JSX in Pashto text!! 💪Ÿ™Œ

This commit is contained in:
lingdocs 2021-06-24 12:22:19 +04:00
parent aae06148ad
commit cdea37e024
8 changed files with 149 additions and 23 deletions

View File

@ -1,6 +1,6 @@
{
"name": "@lingdocs/pashto-inflector",
"version": "0.4.4",
"version": "0.4.5",
"author": "lingdocs.com",
"description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
"homepage": "https://verbs.lingdocs.com",

View File

@ -11,6 +11,7 @@ import ConjugationViewer from "./components/ConjugationViewer";
import verbs from "./verbs";
import Pashto from "./components/Pashto";
import Phonetics from "./components/Phonetics";
import InlinePs from "./components/InlinePs";
import { conjugateVerb } from "./lib/verb-conjugation";
import { getVerbInfo } from "./lib/verb-info";
import ButtonSelect from "./components/ButtonSelect";
@ -25,7 +26,6 @@ import {
} from "react-bootstrap";
import * as T from "./types";
import defualtTextOptions from "./lib/default-text-options";
import InlinePs from "./components/InlinePs";
type VerbType = "simple" | "stative compound" | "dynamic compound";
const verbTypes: VerbType[] = [
@ -181,14 +181,12 @@ function App() {
const conjugation = v
? conjugateVerb(v.verb.entry, aayTailType, v.verb.complement)
: undefined;
if (v) {
console.log("Verb chosen:");
console.log(v.verb);
console.log("Conjugation of verb:")
console.log(conjugation);
}
console.log(verbTypeShowing);
console.log(textOptions);
// if (v) {
// console.log("Verb chosen:");
// console.log(v.verb);
// console.log("Conjugation of verb:")
// console.log(conjugation);
// }
return <>
<main className="flex-shrink-0 mb-4">
<div className="container" style={{ maxWidth: "800px" }}>

View File

@ -15,8 +15,8 @@ function InlinePs ({
ps,
opts,
}: {
ps?: T.PsString,
children: T.PsString,
ps?: T.PsString | (T.PsJSX & { e?: string }),
children: T.PsString | (T.PsJSX & { e?: string }),
opts: T.TextOptions,
}) {
const text = children || ps;

View File

@ -12,21 +12,34 @@ import {
import {
phoneticsToDiacritics
} from "../lib/phonetics-to-diacritics";
import { psJSXMap } from "../lib/jsx-map";
import * as T from "../types";
const Pashto = ({ opts, children: text }: {
opts: T.TextOptions,
children: T.PsString,
children: T.PsString | T.PsJSX,
}) => {
function convertText(ps: T.PsString, opts: T.TextOptions): string {
const p = opts.diacritics
? (phoneticsToDiacritics(text.p, text.f) || text.p)
: text.p;
? (phoneticsToDiacritics(ps.p, ps.f) || ps.p)
: ps.p;
return opts.spelling === "Afghan"
? p
: convertAfToPkSpelling(p);
}
if (typeof text.p !== "string" && typeof text.f !== "string") {
return psJSXMap(
text as T.PsJSX,
"p",
(ps: T.PsString) => convertText(ps, opts),
);
}
const style = opts.pTextSize === "normal"
? undefined
: { fontSize: opts.pTextSize === "larger" ? "large" : "larger" };
return (
<span className="p-text" dir="rtl" style={style}>
{opts.spelling === "Afghan" ? p : convertAfToPkSpelling(p)}
{convertText(text as T.PsString, opts)}
</span>
);
};

View File

@ -9,22 +9,31 @@
import {
translatePhonetics,
} from "../lib/translate-phonetics";
import { psJSXMap } from "../lib/jsx-map";
import * as T from "../types";
const Phonetics = ({ opts, children: text }: {
opts: T.TextOptions,
children: T.PsString,
children: T.PsJSX | T.PsString | string,
}) => {
if (opts.phonetics === "none") {
return null;
}
return <span className="f-text">
{opts.phonetics === "lingdocs"
? text.f
: translatePhonetics(text.f, {
const handleText = (f: string) => (
opts.phonetics === "lingdocs"
? f
: translatePhonetics(f, {
dialect: opts.dialect,
// @ts-ignore - weird TS not picking up the elimination of "none herre"
system: opts.phonetics,
})}
})
);
if (typeof text !== "string" && typeof text.f !== "string") {
return psJSXMap(text as T.PsJSX, "f", ({f}) => handleText(f));
}
const f = typeof text === "string" ? text : text.f as string;
return <span className="f-text">
{handleText(f)}
</span>
};

26
src/lib/jsx-map.test.tsx Normal file
View File

@ -0,0 +1,26 @@
import { psJSXMap, JSXMap } from "./jsx-map";
test("psJSXMap should work with f as a target", () => {
const input = { p: <>زه کور ته <strong>ځم</strong></>, f: <>zu kor ta <strong>dzum</strong></> };
const output = psJSXMap(input, "p", (ps) => ps.p.replace(/ځ/g, "ز"));
expect(output).toEqual(<>زه کور ته <strong>زم</strong></>);
});
test("psJSXMap should work with f as a target", () => {
const input = { p: <>زه کور ته <strong>ځم</strong></>, f: <>zu kor ta <strong>dzum</strong></> };
const output = psJSXMap(input, "f", (ps) => ps.f.replace(/dz/g, "z"));
expect(output).toEqual(<>zu kor ta <strong>zum</strong></>);
});
test("psJSXMap will error if given an uneven/unbalanced pair of JSX Elements", () => {
expect(() => {
const input = { p: <>زه کور ته <strong>ځم</strong></>, f: <>zu kor ta dzum</> };
psJSXMap(input, "p", (ps) => ps.p.replace(/ځ/g, "ز"));
}).toThrow("error mapping out PsJSX - unbalanced trees");
});
test("plain JSX map util", () => {
const input = <>this <em>will be <strong>transformed</strong></em> <span>nicely</span></>;
const output = JSXMap(input, (s) => s.toUpperCase());
expect(output).toEqual(<>THIS <em>WILL BE <strong>TRANSFORMED</strong></em> <span>NICELY</span></>);
});

79
src/lib/jsx-map.tsx Normal file
View File

@ -0,0 +1,79 @@
/**
* Copyright (c) 2021 lingdocs.com
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import * as T from "../types";
/**
* Allows PsString transforming methods to be applied to a Pashto/Phonetics set of JSX elements
* outputs a single part of the pair (p or f) with the transform function applied to all the text
* within
* eg: { p: <>زه <strong>ځم</strong></>, f : <>zu <strong>dzum</strong></> }
*
* @param ps
* @param target
* @param dealWithString
* @returns
*/
export function psJSXMap(ps: T.PsJSX, target: "p" | "f", dealWithString: (ps: T.PsString) => string): JSX.Element {
const base = ps[target];
const sec = ps[target === "p" ? "f" : "p"];
try {
return {
...base,
props: {
...base.props,
children: typeof base.props.children === "string"
? dealWithString({
p: (target === "p" ? base : sec).props.children,
f: (target === "p" ? sec : base).props.children,
})
: base.props.children.map((x: string | JSX.Element, i: number) => {
if (typeof x === "string") {
return dealWithString({
p: (target === "p" ? x : sec.props.children[i]),
f: (target === "p" ? sec.props.children[i] : x),
});
}
return psJSXMap({
p: (target === "p" ? x : sec.props.children[i]),
f: (target === "p" ? sec.props.children[i] : x),
}, target, dealWithString);
}),
},
};
} catch (e) {
console.error(e);
throw new Error("error mapping out PsJSX - unbalanced trees");
}
}
// UNUSED POC OF THE BASIC JSXMAP - COULD BE PUBLISHED SEPERATELY
/**
* Allows a text transform function to be run over all the text in a JSX element
*
* @param e a JSX Element
* @param f a function to transform the text
* @returns the JSX Element with all the text transformed
*/
export function JSXMap(e: JSX.Element, f: (s: string) => string): JSX.Element {
return {
...e,
props: {
...e.props,
children: typeof e.props.children === "string"
? f(e.props.children)
: e.props.children.map((x: string | JSX.Element, i: number) => {
if (typeof x === "string") {
return f(x);
}
return JSXMap(x, f);
}),
},
};
}

View File

@ -12,6 +12,7 @@ export type PsString = {
} & {
e?: string;
};
export type PsJSX = { p: JSX.Element, f: JSX.Element };
export type DictionaryInfo = {
title: string;