Update README: elaborate all usage methods (browser, Node.js, JS apps) #37
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
paramsiddharth
requested changes
Oct 21, 2025
Owner
paramsiddharth
left a comment
paramsiddharth
left a comment
There was a problem hiding this comment.
Some questions, some changes requested. Please take a look. Thank you!
Comment on lines
+3
to
+8
| Aksharamukha in your browser and Node.js! | ||
|
|
||
| ## Description | ||
| This project aspires to be a browser-compatible version of the [Aksharamukha](https://www.aksharamukha.com/) and its [Python library](https://github.com/virtualvinodh/aksharamukha-python), which is a transliteration tool for Indic scripts. | ||
| This project aspires to be a browser-compatible version of the [Aksharamukha](https://www.aksharamukha.com/) and its [Python library](https://github.com/virtualvinodh/aksharamukha-python), which is a transliteration tool for Indic scripts. The goal is to enable users to perform script conversions directly in their web browsers or Node.js applications without needing to rely on server-side processing. | ||
|
|
||
| The goal is to enable users to perform script conversions directly in their web browsers without needing to rely on server-side processing. | ||
| #### Aksharamukha.js can be used in multiple ways: directly in the browser via CDN, as a Node.js library, or imported in frontend JS apps using modern bundlers. |
Owner
There was a problem hiding this comment.
I think we can mostly skip these changes. The goal and intention don't change – we just want to specify other ways the package can be used.
| #### Aksharamukha.js can be used in multiple ways: directly in the browser via CDN, as a Node.js library, or imported in frontend JS apps using modern bundlers. | ||
|
|
||
| ## Plug & Play | ||
| ## 1. **Plug-n-Play(Browser via CDN)** |
Owner
There was a problem hiding this comment.
No need to bold the text or to add a numeral.
Suggested change
| ## 1. **Plug-n-Play(Browser via CDN)** | |
| ## Plug-&-Play (Browser via CDN) |
| </script> | ||
| </body> | ||
| </html> | ||
|
|
Owner
There was a problem hiding this comment.
Code block not terminated here.
Suggested change
| ``` |
| yarn add aksharamukha | ||
| ``` | ||
|
|
||
| ESM example (Node with "type": "module" or .mjs): |
Owner
There was a problem hiding this comment.
This should be a level 3 header.
| </html> | ||
|
|
||
|
|
||
| ## 2. Node.js Usage |
|
|
||
| ESM example (Node with "type": "module" or .mjs): | ||
|
|
||
| > **Note:** Top-level `await` requires Node.js v14.8+ and `"type": "module"` in your `package.json`. |
Owner
There was a problem hiding this comment.
No need to mention this. :) This is irrelevant to the package.
Comment on lines
+72
to
+75
| Notes: | ||
| - Wrap usage in an async function (or use top-level await where supported). | ||
| - Choose ESM vs CommonJS according to your project's configuration. | ||
| - Check your Node version and bundler settings if you encounter import issues. |
Owner
There was a problem hiding this comment.
This can be skipped for the same reason.
Comment on lines
+76
to
+117
| ## 3. Import in JS apps | ||
|
|
||
| Install the package for your app: | ||
|
|
||
| ```bash | ||
| # npm | ||
| npm install aksharamukha | ||
|
|
||
| # yarn | ||
| yarn add aksharamukha | ||
|
|
||
| # pnpm | ||
| pnpm add aksharamukha | ||
| ``` | ||
|
|
||
| Basic ESM usage (bundlers like Vite, Webpack, Rollup): | ||
|
|
||
| ```javascript | ||
| // src/main.js | ||
| import Aksharamukha from 'aksharamukha'; | ||
|
|
||
| async function run() { | ||
| const ak = await Aksharamukha.new(); | ||
| const out = await ak.process('autodetect', 'Devanagari', 'namaste'); | ||
| console.log(out); | ||
| } | ||
|
|
||
| run().catch(console.error); | ||
| ``` | ||
|
|
||
| CommonJS usage: | ||
|
|
||
| ```javascript | ||
| // src/main.cjs | ||
| const Aksharamukha = require('aksharamukha'); | ||
|
|
||
| (async () => { | ||
| const ak = await Aksharamukha.new(); | ||
| console.log(await ak.process('autodetect', 'Malayalam', 'śrī')); | ||
| })().catch(console.error); | ||
| ``` | ||
|
|
Owner
There was a problem hiding this comment.
This is repeated, I think.
Comment on lines
+142
to
+158
| Next.js note: | ||
| - Use the component client-side only (disable SSR) if the package relies on browser APIs or WASM. Example: | ||
|
|
||
| ```javascript | ||
| // pages/index.js (Next.js) | ||
| import dynamic from 'next/dynamic'; | ||
| const TransliterateClient = dynamic(() => import('../components/TransliterateClient'), { ssr: false }); | ||
|
|
||
| export default function Page() { | ||
| return <TransliterateClient text="praNAm." />; | ||
| } | ||
| ``` | ||
|
|
||
| Bundler / WASM considerations: | ||
| - If the package includes a WASM asset, ensure your bundler is configured to load it (Vite/webpack may need asset rules or a plugin). If you encounter import errors, check your bundler docs for handling .wasm and async module initialization. | ||
| That’s it — import normally according to your project's module system and run Aksharamukha.new() before calling process(). | ||
|
|
Owner
There was a problem hiding this comment.
I don't think this is needed at the moment, either.
Comment on lines
+118
to
+140
| React (client-side) example: | ||
|
|
||
| ```jsx | ||
| // components/TransliterateClient.jsx | ||
| import React, { useEffect, useState } from 'react'; | ||
| import Aksharamukha from 'aksharamukha'; | ||
|
|
||
| export default function TransliterateClient({ text }) { | ||
| const [out, setOut] = useState(''); | ||
|
|
||
| useEffect(() => { | ||
| let alive = true; | ||
| (async () => { | ||
| const ak = await Aksharamukha.new(); | ||
| const result = await ak.process('autodetect', 'Tamil', text); | ||
| if (alive) setOut(result); | ||
| })(); | ||
| return () => { alive = false; }; | ||
| }, [text]); | ||
|
|
||
| return <div>{out}</div>; | ||
| } | ||
| ``` |
Owner
There was a problem hiding this comment.
Could you explain the relevance of alive here? Also, please use React Fragments instead of the div in this example.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Title:
Update README with all usage methods for Aksharamukha.js
Description:
This pull request updates the README to provide a comprehensive guide for using Aksharamukha.js.
Changes include:
1)Plug-n-play browser usage via CDN
2)Node.js backend usage with ESM and CommonJS examples
3)Importing in frontend JS apps with modern bundlers (Vite, Webpack, Rollup)
4)React and Next.js client-side usage examples