usfm-grammar-web 3.0.0-alpha.1 → 3.0.0-alpha.2

package/README.md

@@ -1,37 +1,74 @@
 # USFM Grammar
 
 ## Description
-USFM Grammar is a JavaScript library for parsing and converting USFM (Unified Standard Format Markers) to/from USJ (Unified Standard JSON) format. This library provides functionalities to parse USFM strings into a syntax tree and convert them into a JSON-like structure (USJ), and vice versa.
+This is the web alternative to the (USFM-Grammar 3.x)[https://www.npmjs.com/package/usfm-grammar] library to be used from HTML, react etc. USFM Grammar is a JavaScript library for parsing and converting USFM (Unified Standard Format Markers) to/from USJ (Unified Standard JSON) format. This library provides functionalities to parse USFM strings into a syntax tree and convert them into a JSON-like structure (USJ), and vice versa.
 
 ## Installation
 You can install USFM Grammar via npm:
 
-```bash
-npm install usfm-grammar
-```
 
 ## Usage
-Here's how you can use USFM Grammar in your JavaScript/TypeScript projects:
+Here's how you can use USFM Grammar in your react projects:
+```bash
+npm install usfm-grammar-web
+```
 
 ```javascript
-const { USFMParser}  = require('usfm-grammar');
+import React, { useState, useEffect } from 'react';
+import { USFMParser } from 'usfm-grammar-web';
+
+function App() {
+  const [result, setResult] = useState(null);
+  const [result2, setResult2] = useState(null);
+
+  useEffect(() => {
+    const initParser = async () => {
+      await USFMParser.init("https://cdn.jsdelivr.net/npm/usfm-grammar-web@3.0.0-alpha.1/tree-sitter-usfm.wasm",
+                            "https://cdn.jsdelivr.net/npm/usfm-grammar-web@3.0.0-alpha.1/tree-sitter.wasm");
+    };
+    initParser();
+  }, []);
+
+  const calculateValue = async () => {
+    const usfmParser = new USFMParser();
+    const output = await usfmParser.usfmToUsj('\\id GEN\n\\c 1\n\\p\n\\v 1 In the begining..\\v 2 more text');
+    setResult(JSON.stringify(output));
+    const usfm = usfmParser.usjToUsfm(output);
+    setResult2(usfm);
+  };
+
+  return (
+    <div className="App">
+      <div>
+        <button onClick={calculateValue}>Test</button>
+        <p>USJ: {result}</p>
+        <p>USFM: {result2}</p>
+      </div>
+    </div>
+  );
+}
+
+export default App;
+```
 
-(async () => {
-  await USFMParser.init();
+It can be used directly in the HTML script tag too.
+
+```html
+<script type="module">
+  import { USFMParser } from 'https://cdn.jsdelivr.net/npm/usfm-grammar-web@3.0.0-alpha.2/dist/bundle.mjs';
+  console.log('Hello world');
+  (async () => {
+  await USFMParser.init("https://cdn.jsdelivr.net/npm/usfm-grammar-web@3.0.0-alpha.2/tree-sitter-usfm.wasm",
+                            "https://cdn.jsdelivr.net/npm/usfm-grammar-web@3.0.0-alpha.2/tree-sitter.wasm");
   const usfmParser = new USFMParser()
   const output = usfmParser.usfmToUsj('\\id GEN\n\\c 1\n\\p\n\\v 1 In the begining..\\v 2 more text')
   console.log({ output })
   const usfm = usfmParser.usjToUsfm(output)
   console.log({ usfm })
-})();
+  })();
+</script>
 ```
 
-If the above import cause issue in an esm project use the below format:
-```javascript
-import pkg from 'usfm-grammar';
-const USFMParser = pkg.USFMParser;
-
-```
 
 If using from react, please refer the instructions for it [here](../docs/react-usage.md).
 

package/dist/{esm/index.mjs → bundle.mjs}

@@ -2510,4 +2510,4 @@ console.log("COmes in index.js");
 
 
 export {$236d01ba6f80be5e$export$2e2bcd8739ae039 as USFMParser};
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=bundle.mjs.map