switch to vite

.github/workflows/ci.yml

@@ -18,12 +18,13 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           cache: "yarn"
       - name: Install, build, test
         run: |
-          yarn install-r
-          yarn build-library
+          yarn install-all
+          yarn build-lib
+          yarn build-components
           yarn build-website
           yarn test --silent
           yarn check-all-inflections

.github/workflows/publish.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           cache: "yarn"
       - name: Check if version has been updated
         id: check
@@ -27,10 +27,10 @@ jobs:
       - name: Publish when version changed
         if: steps.check.outputs.changed == 'true'
         run: |
-          yarn install-r
-          yarn build-library
+          yarn install-all
+          yarn build-lib
+          yarn build-components
           yarn test --silent
-          yarn check-all-inflections
           cp .npmrc src/lib
           cp .npmrc src/components
           cd src/lib

.gitignore

@@ -1,33 +1,42 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# compiled library files
-dist
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# dependencies
-node_modules
-/.pnp
-.pnp.js
+# fetched vocab
+src/verbs.ts
+src/nouns-adjs.ts
 
 # testing
 /coverage
 
 dict
 diac.ts
 
-# production
+node_modules
 build
 dist
+dist-ssr
+*.local
+/.pnp
+.pnp.js
 
-# misc
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
 .DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-src/verbs.ts
-src/nouns-adjs.ts
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.nvmrc

@@ -1 +1 @@
-16
+20

.vscode/settings.json

@@ -1,8 +1,5 @@
 {
   "typescript.preferences.autoImportFileExcludePatterns": [
-    "../../library.ts"
-  ],
-  "cSpell.words": [
-    "کارخانه"
+    "library.ts"
   ],
 }

README.md

@@ -20,7 +20,7 @@ This library uses a 3-step process to generate gramattically correct Pashto phra
 | | Pashto Inflector Function | Chomskian Grammar Level |
 |-|--------------------------| ----------------------- |
 |1.| Assemble the phrase tree | Phrase Structure Rules |
-|2.| Inflect the words in tree | Morphophonemic Rules |
+|2.| Inflect the words in tree | Morphophonemic Rules   |
 |3.| Arrange the inflected words in order | Transformational Rules |
 
 ### 1. Assemble the phrase tree

check-all-inflections.ts

@@ -2,7 +2,6 @@ import * as T from "./src/types";
 import { inflectWord } from "./src/lib/src/pashto-inflector";
 import * as tp from "./src/lib/src/type-predicates";
 import { conjugateVerb } from "./src/lib/src/verb-conjugation";
-import fetch from "node-fetch";
 
 // Script to try inflecting all the words in the dictionary and make sure that
 // no errors are thrown in the process
@@ -15,8 +14,8 @@ type InflectionError = {
 };
 
 async function checkAll() {
+  console.log("Checking inflection functions on all dictionary words");
   const res = await fetch(process.env.LINGDOCS_DICTIONARY_URL);
-  // @ts-ignore
   const { entries }: T.Dictionary = await res.json();
   const errors: InflectionError[] = [];
 

eslint.config.js

@@ -0,0 +1,26 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config({
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ['**/*.{ts,tsx}'],
+  ignores: ['dist'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
+  },
+  plugins: {
+    'react-hooks': reactHooks,
+    'react-refresh': reactRefresh,
+  },
+  rules: {
+    ...reactHooks.configs.recommended.rules,
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+})

get-words.js → get-words.cjs

@@ -6,7 +6,6 @@
  *
  */
 const fs = require("fs");
-const fetch = require("node-fetch-commonjs");
 const path = require("path");
 const verbCollectionPath = path.join(".", "vocab", "verbs");
 const nounAdjCollectionPath = path.join(".", "vocab", "nouns-adjs");

global.d.ts

@@ -0,0 +1 @@
+import "jest-extended";

public/index.html → index.html

@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="An open source TypeScript/React library for Pashto inflection, verb conjugation, phrase generation, text conversion, and more" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta name="keywords" content="Pashto, Verbs, Conjugation, Grammar, Linguistics" />
     <meta name="author" content="lingdocs.com" />
     <link rel="canonical" href="https://pashto-inflector.lingdocs.com/" />
@@ -25,10 +25,11 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:creator" content="@lingdocs" />
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <title>Pashto Inflector</title>
   </head>
-  <body class="d-flex flex-column h-100" id="root">
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

jest.config.js

@@ -0,0 +1,13 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+export default {
+  testEnvironment: "node",
+  transform: {
+    "^.+.tsx?$": [
+      "ts-jest",
+      {
+        tsconfig: "tsconfig.app.json",
+      },
+    ],
+  },
+  setupFilesAfterEnv: ["./testSetup.ts"],
+};

netlify.toml

@@ -1,3 +1,3 @@
 [build]
-  command = "yarn install-r && yarn test --silent && yarn build-website"
+  command = "yarn install-all && yarn test --silent && yarn build-website"
   publish = "build/"

package.json

@@ -1,82 +1,48 @@
 {
-  "name": "pashto-inflector",
-  "version": "7.5.1",
-  "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",
-  "license": "MIT",
-  "private": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/lingdocs/pashto-inflector.git"
-  },
-  "devDependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.2",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.20",
-    "@types/node": "^15.12.1",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
-    "bootstrap": "^4.6.0",
-    "jest-extended": "^4.0.1",
-    "node-fetch": "^3.3.2",
-    "node-fetch-commonjs": "^3.2.4",
-    "pbf": "^3.2.1",
-    "react": "^17.0.1",
-    "react-bootstrap": "^1.5.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "4.0.3",
-    "tsx": "^3.14.0",
-    "typescript": "^5.1.6",
-    "web-vitals": "^1.0.1"
-  },
+  "name": "minrep",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "patch": "npm version patch --no-git-tag-version && cd src/lib && npm version patch --no-git-tag-version && cd ../components && npm version patch --no-git-tag-version",
     "minor": "npm version minor --no-git-tag-version && cd src/lib && npm version minor --no-git-tag-version && cd ../components && npm version minor --no-git-tag-version",
     "major": "npm version major --no-git-tag-version && cd src/lib && npm version major --no-git-tag-version && cd ../components && npm version major --no-git-tag-version",
-    "preinstall": "echo '*** Be sure to use yarn install-r not yarn install ***!'",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "install-r": "yarn install && node get-words.js && cd src/lib && yarn install && cd ../components && yarn install",
-    "build-website": "node get-words.js && npm run build",
-    "build-library": "cd src/components && rimraf dist && tsc --project lib-tsconfig.json && node post-build.cjs && cd ../lib && rimraf dist && tsc --project lib-tsconfig.json && node_modules/rollup/dist/bin/rollup -c",
-    "test-ci": "npm run test -- --watchAll=false",
-    "get-words": "node get-words.js",
+    "preinstall": "echo '*** Be sure to use 'yarn install-all' not 'yarn install' ***!'",
+    "dev": "vite",
+    "lint": "eslint .",
+    "test": "jest",
+    "preview": "vite preview",
+    "install-all": "yarn install && node get-words.cjs $$ cd src/lib && yarn install && cd ../components && yarn install",
+    "build-website": "tsc -b && vite build",
+    "build-components": "rm -rf src/components/dist && tsc --project src/components/tsconfig.json && cd src/components && node post-build.cjs",
+    "build-lib": "rm -rf src/lib/dist && tsc --project src/lib/tsconfig.json",
+    "get-words": "node get-words.cjs",
     "check-all-inflections": "tsx check-all-inflections.ts"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "rules": {
-      "no-warning-comments": [
-        1,
-        {
-          "terms": [
-            "fixme",
-            "xxx"
-          ],
-          "location": "anywhere"
-        }
-      ]
-    }
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "bootstrap": "4.6.1",
+    "react-bootstrap": "1.5.1",
+    "@fortawesome/fontawesome-free": "^5.15.2"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "dependencies": {}
-}
+  "devDependencies": {
+    "@eslint/js": "^9.8.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.8.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-extended": "^4.0.2",
+    "ts-jest": "^29.2.4",
+    "tsx": "^4.17.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.4.0"
+  }
+}

src/App.tsx

@@ -8,7 +8,7 @@
 
 import { useEffect, useState } from "react";
 
-import ButtonSelect from "./components/src/ButtonSelect";
+import ButtonSelect from "./components/src/selects/ButtonSelect";
 import { Modal } from "react-bootstrap";
 import * as T from "./types";
 import defualtTextOptions from "./lib/src/default-text-options";
@@ -36,6 +36,7 @@ function App() {
   function handleHiderClick(label: string) {
     setShowing((os) => (os === label ? "" : label));
   }
+
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", theme);
   }, [theme]);