From 71a4760d37ec125de08364efaea04827127c7ab0 Mon Sep 17 00:00:00 2001 From: Yeasir H Date: Sun, 21 Jan 2024 21:52:23 -0800 Subject: [PATCH] add docs and refactor --- .npmignore | 1 - README.md | 54 +++++++++++-------- docs/react-js.md | 2 + docs/vanilla-js.md | 28 ++++++++-- package.json | 12 ++--- test/browser/index.html | 3 +- .../browser/{test-script.js => playground.js} | 6 +-- tsconfig.json | 6 +-- tsup.config.js | 3 +- 9 files changed, 73 insertions(+), 42 deletions(-) rename test/browser/{test-script.js => playground.js} (82%) diff --git a/.npmignore b/.npmignore index 29ff5f6..d0aae53 100644 --- a/.npmignore +++ b/.npmignore @@ -5,7 +5,6 @@ docs/ .changeset/ .github/ .vscode/ -dist/ #files .eslintignore diff --git a/README.md b/README.md index 4920701..efa1afd 100644 --- a/README.md +++ b/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 diff --git a/docs/react-js.md b/docs/react-js.md index e69de29..d1d4611 100644 --- a/docs/react-js.md +++ b/docs/react-js.md @@ -0,0 +1,2 @@ +# React JS +Docs Coming Soon. diff --git a/docs/vanilla-js.md b/docs/vanilla-js.md index 4d64c0a..2423e30 100644 --- a/docs/vanilla-js.md +++ b/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") diff --git a/package.json b/package.json index 5d7d431..8d24ec3 100644 --- a/package.json +++ b/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": { diff --git a/test/browser/index.html b/test/browser/index.html index 7fa69f9..bda6a03 100644 --- a/test/browser/index.html +++ b/test/browser/index.html @@ -13,7 +13,6 @@

bpac test

- - + \ No newline at end of file diff --git a/test/browser/test-script.js b/test/browser/playground.js similarity index 82% rename from test/browser/test-script.js rename to test/browser/playground.js index a7f5602..a76d942 100644 --- a/test/browser/test-script.js +++ b/test/browser/playground.js @@ -1,4 +1,4 @@ -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"); @@ -6,7 +6,7 @@ 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 }); diff --git a/tsconfig.json b/tsconfig.json index 39df3bb..dd6a5d4 100644 --- a/tsconfig.json +++ b/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. } diff --git a/tsup.config.js b/tsup.config.js index 808f540..f79e901 100644 --- a/tsup.config.js +++ b/tsup.config.js @@ -4,7 +4,7 @@ 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, @@ -12,5 +12,4 @@ export default defineConfig({ bundle: true, format: ["esm", "cjs"], dts: true, - outDir: "lib", });