issure with mapJSX single child - still ugly though

This commit is contained in:
adueck 2022-09-23 14:39:44 +04:00
parent 03a4abbaa1
commit 82a4f557e7
3 changed files with 21 additions and 36 deletions

View File

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

View File

@ -1,6 +1,6 @@
import { psJSXMap } from "./jsx-map"; import { psJSXMap } from "./jsx-map";
test("psJSXMap should work with f as a target", () => { test("psJSXMap should work with p as a target", () => {
const input = { p: <>زه کور ته <strong>ځم</strong></>, f: <>zu kor ta <strong>dzum</strong></> }; const input = { p: <>زه کور ته <strong>ځم</strong></>, f: <>zu kor ta <strong>dzum</strong></> };
const output = psJSXMap(input, "p", (ps) => ps.p.replace(/ځ/g, "ز")); const output = psJSXMap(input, "p", (ps) => ps.p.replace(/ځ/g, "ز"));
expect(output).toEqual(<>زه کور ته <strong>زم</strong></>); expect(output).toEqual(<>زه کور ته <strong>زم</strong></>);
@ -12,6 +12,12 @@ test("psJSXMap should work with f as a target", () => {
expect(output).toEqual(<>zu kor ta <strong>zum</strong></>); expect(output).toEqual(<>zu kor ta <strong>zum</strong></>);
}); });
test("psJSXMap should work with single child", () => {
const input = { p: <div><span>کور</span></div>, f: <div><span>kor</span></div> };
const output = psJSXMap(input, "f", (ps) => ps.f.replace(/k/g, "q"));
expect(output).toEqual(<div><span>qor</span></div>);
});
test("psJSXMap will error if given an uneven/unbalanced pair of JSX Elements", () => { test("psJSXMap will error if given an uneven/unbalanced pair of JSX Elements", () => {
expect(() => { expect(() => {
const input = { p: <>زه کور ته <strong>ځم</strong></>, f: <>zu kor ta dzum</> }; const input = { p: <>زه کور ته <strong>ځم</strong></>, f: <>zu kor ta dzum</> };

View File

@ -26,13 +26,16 @@ export function psJSXMap(ps: T.PsJSX, target: "p" | "f", dealWithString: (ps: T.
return { return {
...base, ...base,
props: { props: {
// TODO: could make this a lot cleaner/less repetitive by following a better recursive formula
// see https://adueck.github.io/blog/recursively-modify-text-jsx-react/
...base.props, ...base.props,
children: typeof base.props.children === "string" children: typeof base.props.children === "string"
? dealWithString({ ? dealWithString({
p: (target === "p" ? base : sec).props.children, p: (target === "p" ? base : sec).props.children,
f: (target === "p" ? sec : base).props.children, f: (target === "p" ? sec : base).props.children,
}) })
: base.props.children.map((x: string | JSX.Element, i: number) => ( : base.props.children.map
? base.props.children.map((x: string | JSX.Element, i: number) => (
(typeof x === "string") (typeof x === "string")
? dealWithString({ ? dealWithString({
p: (target === "p" ? x : sec.props.children[i]), p: (target === "p" ? x : sec.props.children[i]),
@ -42,7 +45,15 @@ export function psJSXMap(ps: T.PsJSX, target: "p" | "f", dealWithString: (ps: T.
p: (target === "p" ? x : sec.props.children[i]), p: (target === "p" ? x : sec.props.children[i]),
f: (target === "p" ? sec.props.children[i] : x), f: (target === "p" ? sec.props.children[i] : x),
}, target, dealWithString) }, target, dealWithString)
)), )) : (typeof base.props.children === "string")
? dealWithString({
p: (target === "p" ? base.props.children : sec.props.children),
f: (target === "p" ? sec.props.children : base.props.children),
})
: psJSXMap({
p: (target === "p" ? base.props.children : sec.props.children),
f: (target === "p" ? sec.props.children : base.props.children),
}, target, dealWithString)
}, },
}; };
} catch (e) { } catch (e) {
@ -50,35 +61,3 @@ export function psJSXMap(ps: T.PsJSX, target: "p" | "f", dealWithString: (ps: T.
throw new Error("error mapping out PsJSX - unbalanced trees"); 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 JSXTextTransform(
e: JSX.Element | string,
f: (s: string) => string
): JSX.Element | string {
if (typeof e === "string") {
return f(e);
}
return {
...e,
props: {
...e.props,
children:
typeof e.props.children === "string"
? f(e.props.children)
: Array.isArray(e.props.children)
? e.props.children.map((x: string | JSX.Element) => (
JSXTextTransform(x, f)
))
: JSXTextTransform(e.props.children, f)
}
};
}