add docs and refactor

.npmignore

@@ -5,7 +5,6 @@ docs/
 .changeset/
 .github/
 .vscode/
-dist/
 
 #files
 .eslintignore

README.md

@@ -53,10 +53,17 @@ Ensure that all prerequisites are met to guarantee a seamless experience.
 
 ### 1. Install the package:
 
+Package Manager
 ```bash
 $ npm i bpac-js
 ```
 
+Content Delivery Network - Latest
+```link
+https://cdn.jsdelivr.net/npm/bpac-js@latest/dist/index.mjs
+```
+Note: While using the `latest` tag is convenient, it is recommended to exercise caution, especially in production environments. The latest tag always points to the most recent version, which may include breaking changes. To ensure stability, consider specifying a specific version.
+
 ### 2. Explore Documentation:
 
 Visit the docs section in this repository to explore detailed guides and examples for utilizing the SDK functionalities.
@@ -68,35 +75,40 @@ If you encounter issues or have suggestions, feel free to contribute to the proj
 ## Usage
 
 ```javascript
-// Example: Printing a label
-import BrotherSdk from "bpac-js";
+// CommonJS Script File
+import BrotherSdk from "https://cdn.jsdelivr.net/npm/bpac-js@2.0.3/dist/index.mjs";
+
+const printBtn = document.getElementById("print-btn");
 
 const tag = new BrotherSdk({
-    templatePath: "C:/Templates/first.lbx",
-    exportPath: "C:/Users/YourName/Desktop/Exported Labels/",
+    templatePath: "C:/Templates/shoe-template.lbx",
+    exportPath: "C:/Users/YourProfile/Desktop/Exported Labels/",
 });
 
-const print = async () => {
+// The keys and values must match the objects/types in the template file.
+const data = {
+    title: "Air Force 1",
+    price: "$149.99",
+    barcode: "091207567724",
+    date: new Date("2024-1-20"),
+};
+
+const options = {
+    copies: 1, // Optional - Defaults to 1
+    printName: "Air Force Label", // Optional - Defaults to BPAC-Document
+    quality: "high" // Optional - Defaults to "default"
+}
+
+const sendToPrinter = async () => {
     try {
-        const data = { 
-            title: "Canned Soup", 
-            price: "$2.99" 
-        };
-
-        const opts = {
-            copies: 1,
-            printName: "Canned Soup Label",
-            quality: "highQuality",
-        };
-
-        const status = await tag.print(data, opts);
-        console.log({ status });
-    } catch (err) {
-        console.log(err);
+        const isPrinted = await tag.print(data, options);
+        console.log({isPrinted})
+    } catch (error) {
+        console.log({error})
     }
 };
 
-print();
+printBtn.addEventListener("click", sendToPrinter);
 ```
 
 ## Acknowledgments

docs/react-js.md

@@ -0,0 +1,2 @@
+# React JS
+Docs Coming Soon.

docs/vanilla-js.md

@@ -9,7 +9,7 @@
 ### Printer Name
 ```javascript
 // script.js file
-import BrotherSdk from "./bundle.js";
+import BrotherSdk from "https://cdn.jsdelivr.net/npm/bpac-js@latest/dist/index.mjs";
 
 const getNameBtn = document.getElementById("get-name-btn");
 
@@ -32,10 +32,30 @@ getNameBtn.addEventListener("click", getName);
 
 ```
 
+### List of Printer Names
+```javascript
+// script.js file
+import BrotherSdk from "https://cdn.jsdelivr.net/npm/bpac-js@latest/dist/index.mjs";
+
+const getNameBtn = document.getElementById("get-name-btn");
+
+const getNames = async () => {
+    try {
+        const printers = await BrotherSdk.getPrinterList();
+        console.log({printers}) // Output: {printers: ["Brother QL-820NWB", "Brother PT-9800PCN"]}
+    } catch (error) {
+        console.log({error})
+    }
+};
+
+getNameBtn.addEventListener("click", getNames);
+
+```
+
 ### Printing
 ```javascript
 // script.js file
-import BrotherSdk from "./bundle.js";
+import BrotherSdk from "https://cdn.jsdelivr.net/npm/bpac-js@latest/dist/index.mjs";
 
 const printBtn = document.getElementById("print-btn");
 
@@ -55,7 +75,7 @@ const data = {
 const options = {
     copies: 1, // Optional - Defaults to 1
     printName: "Air Force Label", // Optional - Defaults to BPAC-Document
-    quality: "highQuality" // Optional - Defaults to "default"
+    quality: "high" // Optional - Defaults to "default"
 }
 
 const sendToPrinter = async () => {
@@ -74,7 +94,7 @@ printBtn.addEventListener("click", sendToPrinter);
 ### Preview
 ```javascript
 // script.js file
-import BrotherSdk from "./bundle.js";
+import BrotherSdk from "https://cdn.jsdelivr.net/npm/bpac-js@latest/dist/index.mjs";
 
 const previewBtn = document.getElementById("preview-btn");
 const imgOutput = document.getElementById("img")

package.json

@@ -2,13 +2,13 @@
   "name": "bpac-js",
   "version": "2.0.3",
   "description": "High level API for interacting with the Brother BPAC SDK",
-  "main": "./lib/index.js",
-  "module": "./lib/index.mjs",
-  "types": "./lib/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "build": "tsup",
-    "lint": "eslint src/ --fix",
-    "dev": "tsup src/index.ts --watch",
+    "lint": "eslint ./src --fix",
+    "dev": "tsup ./src/**/*.ts --watch",
     "type-check": "tsc",
     "version": "npx changeset"
   },
@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/yeasir01/bpac-js/issues"
   },
-  "keywords": [],
+  "keywords": ["bpac", "brother", "print", "barcode", "web print"],
   "author": "Yeasir H. (https://yeasirhugais.com)",
   "license": "MIT",
   "devDependencies": {

test/browser/index.html

@@ -13,7 +13,6 @@ <h1>bpac test</h1>
         <button id="preview-btn">Preview</button>
         <button id="export-btn">Export</button>
     </div>
-
-    <script type="module" src="./test-script.js"></script>
+    <script type="module" src="playground.js"></script>
 </body>
 </html>

test/browser/test-script.js → test/browser/playground.js

@@ -1,12 +1,12 @@
-import BrotherSdK from "../../lib/index.mjs"
+import BrotherSdK from "https://cdn.jsdelivr.net/npm/bpac-js@2.0.3/dist/index.mjs"
 
 const printBtn = document.getElementById("print-btn");
 const previewBtn = document.getElementById("preview-btn");
 const exportBtn = document.getElementById("export-btn");
 const preview = document.getElementById("preview");
 
 const tag = new BrotherSdK({
-    templatePath: "C:/Users/YMH/Desktop/example.lbx",
+    templatePath: "https://github.com/yeasir01/shelf-tags/raw/main/templates/shelf_tag.lbx",
     exportDir: "C:/Users/YMH/Desktop/Exported Labels/",
 });
 
@@ -29,7 +29,7 @@ const printTag = async () => {
 const previewTag = async () => {
     try {
         preview.src = "";
-        const imgData = await tag.getImageData(data, { height: 120 });
+        const imgData = await tag.getImageData({}, { height: 120 });
         preview.src = imgData;
     } catch (error) {
         console.log({ error });

tsconfig.json

@@ -16,11 +16,11 @@
         // compatibility with tools like tsup
         "allowJs": true, // Permits inclusion of JavaScript files within the project, enabling a gradual migration to TypeScript.
         "checkJs": false, //Disables type checking for JavaScript files, focusing on TypeScript for type safety.
-        "lib": ["es2022", "dom", "dom.iterable"] //Includes additional libraries for DOM-related features and newer ECMAScript features,
+        "lib": ["ES2017", "DOM", "DOM.Iterable"] //Includes additional libraries for DOM-related features and newer ECMAScript features,
         //supporting web development scenarios.
     },
-    "include": ["src/**/*.ts", "src/**/*.js"], // Specifies the root directory and file pattern for inclusion in compilation,
+    "include": ["src/*.ts", "src/*.js"], // Specifies the root directory and file pattern for inclusion in compilation,
     // focusing on TypeScript files within the "src" directory.
-    "exclude": ["node_modules"] // Excludes the "node_modules" directory from compilation, avoiding redundant
+    "exclude": ["./node_modules"] // Excludes the "node_modules" directory from compilation, avoiding redundant
     // checks for external dependencies.
 }

tsup.config.js

@@ -4,13 +4,12 @@ const inDev = process.env.NODE_ENV !== "production";
 const inProd = process.env.NODE_ENV === "production"
 
 export default defineConfig({
-    entry: ["src/**/*.ts"],
+    entry: ["src/index.ts"],
     clean: true,
     splitting: false,
     sourcemap: inDev,
     minify: inProd,
     bundle: true,
     format: ["esm", "cjs"],
     dts: true,
-    outDir: "lib",
 });