Use tsconfig file

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+	env: {
+		browser: true,
+		es2021: true,
+	},
+	extends: [
+		'plugin:react/recommended',
+		'xo',
+	],
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true,
+		},
+		ecmaVersion: 12,
+		sourceType: 'module',
+	},
+	plugins: [
+		'react',
+	],
+	rules: {
+      "arrow-parens": ["error", "always"]
+	},
+};

package.json

@@ -8,12 +8,18 @@
   "private": true,
   "scripts": {
     "start": "parcel index.html",
-    "build": "parcel build index.html"
+    "build": "parcel build index.html --no-source-maps",
+    "prebuild": "yarn run typecheck",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@parcel/transformer-image": "2.0.0-rc.0",
     "@parcel/transformer-sass": "2.0.0-rc.0",
-    "parcel": "^2.0.0-rc.0"
+    "eslint": "^7.32.0",
+    "eslint-config-xo": "^0.38.0",
+    "eslint-plugin-react": "^7.25.1",
+    "parcel": "^2.0.0-rc.0",
+    "typescript": "^4.4.3"
   },
   "dependencies": {
     "react": "^17.0.2",

src/App.jsx

@@ -1,70 +1,71 @@
-import React, { Component } from "react";
+import React, {Component} from 'react';
 
 import './App.scss';
-import { declineSaimiar } from './saimiar_morphology.js';
+import {declineSaimiar} from './saimiar_morphology.ts';
 
-const backendUrl = "https://kucinakobackend.ichigo.everydayimshuflin.com";
+const backendUrl = 'https://kucinakobackend.ichigo.everydayimshuflin.com';
 
 function makeRequest(queryString, jsonHandler) {
-  const effectiveUrl = `${backendUrl}/${queryString}`
+	const effectiveUrl = `${backendUrl}/${queryString}`;
-  fetch(`${effectiveUrl}`)
+	fetch(`${effectiveUrl}`)
-    .then((resp) => {
+		.then((resp) => resp.json())
-      return resp.json()
+		.then((json) => {
-    })
+			jsonHandler(json);
-    .then((json) => {
+		});
-      jsonHandler(json);
-    });
 }
 
 function renderConlangName(name) {
-  if (name == "saimiar") {
+	if (name === 'saimiar') {
-    return "Saimiar";
+		return 'Saimiar';
-  }
+	}
-  if (name == "elesu") {
-    return "Elésu";
-  }
 
-  if (name === "juteyuji") {
+	if (name === 'elesu') {
-    return "Juteyuji";
+		return 'Elésu';
-  }
+	}
-  if (name === "tukvaysi") {
+
-    return "Tukvaysi";
+	if (name === 'juteyuji') {
-  }
+		return 'Juteyuji';
+	}
+
+	if (name === 'tukvaysi') {
+		return 'Tukvaysi';
+	}
 }
 
-function Entry(props) {
+const Entry = (props) => {
-  const conlang = props.conlang;
+	const {conlang} = props;
-  if (conlang === "saimiar") {
+	if (conlang === 'saimiar') {
-    return <SaiEntry entry={ props.entry } />;
+		return <SaiEntry entry={ props.entry } />;
-  }
+	}
-  return <div>Unknown entry type for { conlang }</div>;
-}
 
-function SaiEntry(props) {
+	return <div>Unknown entry type for { conlang }</div>;
-  const entry = props.entry;
+};
-  const synCategory = entry.syn_category;
+
-  const isNominal = synCategory == 'nominal';
+const SaiEntry = (props) => {
-  console.log(isNominal);
+	const {entry} = props;
-  return (
+	const synCategory = entry.syn_category;
-    <div className="searchResult" key={ entry.id }>
+	const isNominal = synCategory === 'nominal';
-      <b>{ entry.sai }</b> - { entry.eng }
+	return (
-      <br />
+		<div className="searchResult" key={ entry.id }>
-      <span className="synclass">
+			<b>{ entry.sai }</b> - { entry.eng }
-        <i>{ entry.syn_category }</i>
+			<br />
-        { entry.morph_type ? `\t\t${entry.morph_type}` : null }
+			<span className="synclass">
-        <br/>
+				<i>{ entry.syn_category }</i>
-        { isNominal ? formatMorphology(entry) : null }
+				{ entry.morph_type ? `\t\t${entry.morph_type}` : null }
-      </span>
+				<br/>
-    </div>
+				{ isNominal ? formatMorphology(entry) : null }
-  );
+			</span>
-}
+		</div>
+	);
+};
 
 function formatMorphology(entry) {
-  const decl = declineSaimiar(entry);
+	const decl = declineSaimiar(entry);
-  if (!decl) {
+	if (!decl) {
-    return '';
+		return '';
-  }
+	}
-  return (<span style={ {fontSize: 'medium', color: '#6a3131'} } >
+
+	return (<span style={ {fontSize: 'medium', color: '#6a3131'} } >
         Abs: <i>{decl.abs}</i>, Erg: <i>{decl.erg}</i>,
         Adp: <i>{decl.adp}</i>,
         All: <i>{decl.all}</i>,
@@ -72,118 +73,108 @@ function formatMorphology(entry) {
         Ell: <i>{decl.ell}</i>,
         Inst: <i>{decl.inst}</i>,
         Rel: <i>{decl.rel}</i>
-    </span>);
+	</span>);
 }
 
-class Results extends Component {
+const Results = (props) => {
-  constructor(props) {
+	const content = () => {
-    super(props);
+		const {conlang} = props;
-    this.content = this.content.bind(this);
+		const num = props.searchResults.length;
-  }
+		const renderedName = renderConlangName(conlang);
+		const searchType = (props.direction === 'toConlang') ? `English -> ${renderedName}` : `${renderedName} -> English`;
+		const header = (
+			<div className="searchResultHeader" key="header">
+        Searched for <b>{ props.searchTerm }</b>, { searchType }, found { num } result(s)
+			</div>);
+		const entries = props.searchResults.map(
+			(entry, _idx) => <Entry entry={ entry } key= { entry.id } conlang={ conlang } />,
+		);
+		return [header].concat(entries);
+	};
 
-  content() {
+	const results = props.searchResults;
-    const conlang = this.props.conlang;
+	return (
-    const num = this.props.searchResults.length;
+		<div className="results">
-    const renderedName = renderConlangName(conlang);
+			{ results ? content() : 'No search' }
-    const searchType = (this.props.direction === "toConlang") ? `English -> ${renderedName}` : `${renderedName} -> English`;
+		</div>
-    const header = (
+	);
-      <div className="searchResultHeader" key="header">
+};
-        Searched for <b>{ this.props.searchTerm }</b>, { searchType }, found { num } result(s)
-      </div>);
-    const entries = this.props.searchResults.map(
-      (entry, idx) => <Entry entry={ entry } key= { entry.id } conlang={ conlang } />
-    );
-    return [header].concat(entries);
-  }
-
-  render() {
-    const results = this.props.searchResults;
-    return(
-      <div className='results'>
-        { results ? this.content() : "No search" }
-      </div>
-    );
-  }
-}
 
 class App extends Component {
-  constructor(props) {
+	constructor(props) {
-    super(props);
+		super(props);
-    this.input = React.createRef();
+		this.input = React.createRef();
-    this.handleLangChange = this.handleLangChange.bind(this);
+		this.handleLangChange = this.handleLangChange.bind(this);
 
-    this.searchEng = this.searchEng.bind(this);
+		this.searchEng = this.searchEng.bind(this);
-    this.searchSaimiar = this.searchSaimiar.bind(this);
+		this.searchSaimiar = this.searchSaimiar.bind(this);
 
-    this.state = {
+		this.state = {
-      searchResults: null,
+			searchResults: null,
-      conlang: "saimiar",
+			conlang: 'saimiar',
-      direction: null,
+			direction: null,
-      searchTerm: null
+			searchTerm: null,
-    };
+		};
-  }
+	}
 
-  searchSaimiar(evt) {
+	searchSaimiar(_evt) {
-    const searchTerm = this.input.current.value;
+		const searchTerm = this.input.current.value;
-    const request = `saimiar?sai=like.*${searchTerm}*`
+		const request = `saimiar?sai=like.*${searchTerm}*`;
-    if (searchTerm === "") {
+		if (searchTerm === '') {
-      this.setState({ searchResults: null, searchTerm: null, direction: null });
+			this.setState({searchResults: null, searchTerm: null, direction: null});
-    } else {
+		} else {
-      makeRequest(request, (json) => {
+			makeRequest(request, (json) => {
-        this.setState({ searchResults: json, searchTerm, direction: "toEnglish" });
+				this.setState({searchResults: json, searchTerm, direction: 'toEnglish'});
-      });
+			});
-    }
+		}
-  }
+	}
 
-  searchEng(evt) {
+	searchEng(_evt) {
-    const searchTerm = this.input.current.value;
+		const searchTerm = this.input.current.value;
-    const request = `saimiar?eng=like.*${searchTerm}*`
+		const request = `saimiar?eng=like.*${searchTerm}*`;
-    if (searchTerm === "") {
+		if (searchTerm === '') {
-      this.setState({ searchResults: null, searchTerm: null, });
+			this.setState({searchResults: null, searchTerm: null});
-    } else {
+		} else {
-      makeRequest(request, (json) => {
+			makeRequest(request, (json) => {
-        this.setState({ searchResults: json, searchTerm, direction: "toConlang" });
+				this.setState({searchResults: json, searchTerm, direction: 'toConlang'});
-      });
+			});
-    }
+		}
-  }
+	}
 
-  handleLangChange(evt) {
+	handleLangChange(evt) {
-    const conlang = evt.target.value;
+		const conlang = evt.target.value;
-    this.setState({ conlang });
+		this.setState({conlang});
-  }
+	}
 
-  render() {
+	render() {
-
+		return (
-    return(
+			<main>
-      <main>
+				<div className="container">
-        <div className='container'>
+					<div className="search">
-          <div className='search'>
+						<h1>Kucinako</h1>
-            <h1>Kucinako</h1>
+						<div className="textInput">
-            <div className='textInput'>
+							<input className="textInput" type="text" ref={ this.input } />
-                <input className='textInput' type="text" ref={ this.input } />
+						</div>
-            </div>
+						<br/>
-            <br/>
+						<select ref={ this.langSelection } onChange={ this.handleLangChange } defaultValue="saimiar">
-            <select ref={ this.langSelection } onChange={ this.handleLangChange } defaultValue="saimiar">
+							<option value="saimiar">Saimiar</option>
-              <option value="saimiar">Saimiar</option>
+							<option value="elesu">Elesu</option>
-              <option value="elesu">Elesu</option>
+							<option value="tukvaysi">Tukvaysi</option>
-              <option value="tukvaysi">Tukvaysi</option>
+							<option value="juteyuji">Juteyuji</option>
-              <option value="juteyuji">Juteyuji</option>
+						</select>
-            </select>
+						<button onClick={ this.searchSaimiar } className="searchButton">Saimiar</button>
-            <button onClick={ this.searchSaimiar } className="searchButton">Saimiar</button>
+						<button onClick={ this.searchEng } className="searchButton">English</button>
-            <button onClick={ this.searchEng } className="searchButton">English</button>
+					</div>
-          </div>
+					<Results
-          <Results
+						searchResults={ this.state.searchResults }
-            searchResults={ this.state.searchResults }
+						searchTerm= { this.state.searchTerm }
-            searchTerm= { this.state.searchTerm }
+						conlang={ this.state.conlang }
-            conlang={ this.state.conlang }
+						direction={ this.state.direction }
-            direction={ this.state.direction }
+					/>
-          />
+				</div>
-        </div>
+			</main>
-      </main>
+		);
-    );
+	}
-  }
 }
 
-
-
 export default App;

src/saimiar_morphology.js

@@ -1,96 +0,0 @@
-const rootEndingPair = (str) => {
-  return { root: str.slice(0, -1), ending: str.slice(-1) };
-};
-
-function declineSaimiar(entry) {
-  const split = entry.sai.split(" ");
-  const sai = split.at(-1);
-  const morph = entry.morph_type;
-
-  let declined;
-  if (morph == '-V') {
-    return vowelDeclension(sai);
-  } else if (morph == '-a/i') {
-    return aiDeclension(sai)
-  } else if (morph == "e-") {
-    return initalDeclension(sai);
-  } else if (morph == "-C") {
-    return consonantDeclension(sai);
-  } else {
-    console.warn(`Can't decline entry '${entry.sai}'`);
-    console.log(entry)
-    return null;
-  }
-}
-
-function vowelDeclension(sai) {
-  const { root, ending } = rootEndingPair(sai);
-  const adpEnding = ending == "u" ? "ys" : `${ending}s`;
-
-  return {
-    "abs": `${root}${ending}`,
-    "erg": `${root}${ending}na`,
-    "adp": `${root}${adpEnding}`,
-    "all": `so${root}${adpEnding}`,
-    "loc": `${root}${ending}xa`,
-    "ell": `tlê${root}${adpEnding}`,
-    "inst": `${root}${ending}ŕa`,
-    "rel": `${root}${ending}źi`
-  };
-}
-
-function aiDeclension(sai) {
-  const { root, ending } = rootEndingPair(sai);
-  return {
-    "abs": `${root}${ending}`,
-    "erg": `${root}iad`,
-    "adp": `${root}i`,
-    "all": `so${root}i`,
-    "loc": `${root}iath`,
-    "ell": `tlê${root}i`,
-    "inst": `${root}iar`,
-    "rel": `${root}iai`
-  };
-}
-
-function consonantDeclension(sai) {
-  const split = rootEndingPair(sai);
-  const root = split.ending == 'ø' ? split.root : sai;
-  const absFinal = split.ending == 'ø' ? 'ø' : '';
-
-  return {
-    "abs": `${root}${absFinal}`,
-    "erg": `${root}ad`,
-    "adp": `${root}e`,
-    "all": `so${root}i`,
-    "loc": `${root}ak`,
-    "ell": `tlê${root}i`,
-    "inst": `${root}ar`,
-    "rel": `${root}ai`
-  };
-}
-
-const vowels = ['a', 'e', 'ê', 'i', 'o', 'ô', 'u', 'y'];
-
-function initalDeclension(sai) {
-  const initial = sai.slice(0,1);
-  const root = sai.slice(1);
-
-  const finalRootSound = root.slice(-1);
-  const finalVowel = vowels.includes(finalRootSound);
-  const instEnding = finalVowel ? "ŕø" : "ar";
-  const relEnding = finalVowel ? "źi" : "ai";
-
-  return {
-    "abs": `${initial}${root}`,
-    "erg": `da${root}`,
-    "adp": `i${root}`,
-    "all": `so${root}`,
-    "loc": `xa${root}`,
-    "ell": `tlê${root}`,
-    "inst": `i${root}${instEnding}`,
-    "rel": `${initial}${root}${relEnding}`,
-  };
-}
-
-export { declineSaimiar };

src/saimiar_morphology.ts

@@ -0,0 +1,99 @@
+const rootEndingPair = (str) => ({root: str.slice(0, -1), ending: str.slice(-1)});
+
+function declineSaimiar(entry) {
+	const split = entry.sai.split(' ');
+	const sai = split.at(-1);
+	const morph = entry.morph_type;
+
+	if (morph === '-V') {
+		return vowelDeclension(sai);
+	}
+
+	if (morph === '-a/i') {
+		return aiDeclension(sai);
+	}
+
+	if (morph === 'e-') {
+		return initalDeclension(sai);
+	}
+
+	if (morph === '-C') {
+		return consonantDeclension(sai);
+	}
+
+	console.warn(`Can't decline entry '${entry.sai}'`);
+	console.log(entry);
+	return null;
+}
+
+function vowelDeclension(sai: string) {
+	const {root, ending} = rootEndingPair(sai);
+	const adpEnding = ending === 'u' ? 'ys' : `${ending}s`;
+
+	return {
+		abs: `${root}${ending}`,
+		erg: `${root}${ending}na`,
+		adp: `${root}${adpEnding}`,
+		all: `so${root}${adpEnding}`,
+		loc: `${root}${ending}xa`,
+		ell: `tlê${root}${adpEnding}`,
+		inst: `${root}${ending}ŕa`,
+		rel: `${root}${ending}źi`,
+	};
+}
+
+function aiDeclension(sai) {
+	const {root, ending} = rootEndingPair(sai);
+	return {
+		abs: `${root}${ending}`,
+		erg: `${root}iad`,
+		adp: `${root}i`,
+		all: `so${root}i`,
+		loc: `${root}iath`,
+		ell: `tlê${root}i`,
+		inst: `${root}iar`,
+		rel: `${root}iai`,
+	};
+}
+
+function consonantDeclension(sai) {
+	const split = rootEndingPair(sai);
+	const root = split.ending === 'ø' ? split.root : sai;
+	const absFinal = split.ending === 'ø' ? 'ø' : '';
+
+	return {
+		abs: `${root}${absFinal}`,
+		erg: `${root}ad`,
+		adp: `${root}e`,
+		all: `so${root}i`,
+		loc: `${root}ak`,
+		ell: `tlê${root}i`,
+		inst: `${root}ar`,
+		rel: `${root}ai`,
+	};
+}
+
+const vowels = ['a', 'e', 'ê', 'i', 'o', 'ô', 'u', 'y'];
+
+function initalDeclension(sai) {
+	const initial = sai.slice(0, 1);
+	const root = sai.slice(1);
+
+	const finalRootSound = root.slice(-1);
+	const finalVowel = vowels.includes(finalRootSound);
+	const instEnding = finalVowel ? 'ŕø' : 'ar';
+	const relEnding = finalVowel ? 'źi' : 'ai';
+
+	return {
+		abs: `${initial}${root}`,
+		erg: `da${root}`,
+		adp: `i${root}`,
+		all: `so${root}`,
+		loc: `xa${root}`,
+		ell: `tlê${root}`,
+		inst: `i${root}${instEnding}`,
+		rel: `${initial}${root}${relEnding}`,
+	};
+}
+
+export {declineSaimiar};

tsconfig.json

@@ -0,0 +1,4 @@
+{
+"compilerOptions": {},
+"include": ["src/**/*"]
+}