{"id":24594579,"url":"https://github.com/appsaeed/utilies","last_synced_at":"2025-03-18T04:29:00.028Z","repository":{"id":232062380,"uuid":"783364602","full_name":"appsaeed/utilies","owner":"appsaeed","description":"JavaScript utilities helpers to enhance super faster developer experience, productivity, and optimized performance. Compatible with both browsers and limited NodeJS support.","archived":false,"fork":false,"pushed_at":"2024-04-22T12:35:30.000Z","size":135,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-23T08:59:25.153Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/appsaeed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-07T17:31:00.000Z","updated_at":"2024-05-16T23:26:08.888Z","dependencies_parsed_at":"2024-05-16T23:26:08.298Z","dependency_job_id":"a9c7c94c-7e8e-488d-98ca-799ab8fced3c","html_url":"https://github.com/appsaeed/utilies","commit_stats":null,"previous_names":["appsaeed/utilies"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appsaeed%2Futilies","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appsaeed%2Futilies/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appsaeed%2Futilies/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appsaeed%2Futilies/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appsaeed","download_url":"https://codeload.github.com/appsaeed/utilies/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244155941,"owners_count":20407444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-24T11:15:28.864Z","updated_at":"2025-03-18T04:29:00.009Z","avatar_url":"https://github.com/appsaeed.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## intro\nJavaScript utilities helpers to enhance super faster developer experience, productivity, and optimized performance. Compatible with both browsers and limited NodeJS support.\n\n\u003e Fast, generic JavaScript utilities helpers to boost your project productivity and performance\n\n# Other packages\n Best NPM Packages and Vite Plugins\" - Uncover user-friendly tools that boost performance and simplify tasks in your Vite-based web development. From streamlining workflows to adding exciting features, find everything you need to take your projects to the next level.\n \u003cbr\u003e\n- [vite-svg](https://github.com/appsaeed/vite-svg) | Vite SVG plugin: effortless SVG import with support for various formats (JSON, raw string, object, etc.).\n- [vite-sitemap](https://github.com/appsaeed/vite-sitemap) | The plugin helps to create a sitemap in the vite project.\n## Overview\nJump to a specific section to help with this overview\n\n\u003c!-- START --\u003e\n-   [Installation](#Installation) Easily install with and start using.\n-   [Usage](#Usage) Please look at the section before start the package.\n-   [Common](#Common) Necessary JavaScript utility functions and methods.\n-   [Theme](#Theme) Utilies theme with local storage and easily control them\n-   [Clipboard](#Clipboard) Copy text/image to clipboard function for browser\n-   [Convert](#Convert) Convert price, symbol, string, number etc.\n-   [Cookies](#Cookies)  cookies uses secure level encrypted data (only browsers)\n-   [Datetime](#Datetime) convience function to convert date and time (comming more..)\n-   [Detection](#Detection) detection device theme scheme and browser information etc.\n-   [Encryption](#Encryption) simple xor and window crypto encryption with secret key\n-   [Errors](#Errors) Errors to string convert to display message \n-   [Exporting](#Exporting) Exportion pdf,docs files with client side javascript\n-   [Generate](#Generate) generate random string, randmo number, uuid and much more\n-   [Load](#Load) load dom, elements, images and many more functions (only browser)\n-   [Math](#Math) simple math calculations in javascript applications \n-   [Storage](#Storage) local storage, session used to get, save data (only browser)\n-   [String](#String) remove html from string and modify a string (comming more...)\n-   [URL](#URL) modify url/string is very convenient by using this package\n-   [Validation](#Validation) validate client side email, number, form field ete.\n-   [Author](#Author) Package author details and github page\n-   [Developers](#Developers) Developers maintaince repository and command scripts\n-   [License](#License) MIT License\n\u003c!--FINISHED--\u003e\n\n\n## Installation\nInstall with [npm](https://www.npmjs.com/)\n```sh\nnpm i utilies\n```\nor Install with [yarn](https://www.npmjs.com/package/yarn)\n```sh\nyarn add utilies\n```\nor Install with [pnpm](https://www.npmjs.com/package/pnpm)\n```sh\npnpm install utilies\n```\n# Usage\n```js\nimport { yourfunctions } from 'utilies'\n//or \nimport * as utilies from 'utilies'\nutilies.yourfunctions\n```\n\n# Theme \n\n\n**Detect device schema**\n```js\nimport { themeSchema } from 'utilies'\nthemeSchema // output : dark or light base on device theme schema\n```\n\n**Detect device dark schema**\n```js\nimport { isDarkSchema } from 'utilies'\nisDarkSchema // output : true or false base on device theme schema\n// or use isDark \n```\n\n**Set theme to local storage**\n```js\nimport { setTheme } from 'utilies'\n\nsetTheme('dark') // save the dark theme to local storage\nsetTheme('light')\n```\n**Get Theme from saved storage**\n```js\nimport { getTheme , theme } from 'utilies'\n\ngetTheme() // your saved theme dark or light or system\ngetTheme('my_theme') // with storage key name (optional)\ntheme // output: dark or light \u003e work save as getTheme if don't have storage key name\n```\n**Get theme condiction**\n```js\nimport { themeIs , theme } from 'utilies'\n\nthemeIs('dark',theme) // true \nthemeIs('light', theme) // false \n```\n\n\n\n\n# Common\nUse try-catch in single line \n````js\nimport { catchOrNull, catchOR } from 'utilies';\n\n//e.g catchOrNull( callback, callbackError )\n\ncatchOrNull(()=\u003e 'Hello World!'); //output: Hello World!\n\n\nfunction helloWorld(){\n    throw \"Server Error\";\n}\n\n//will not throw exception ereror\ncatchOrNull(helloWorld); //output: null\ncatchOR(helloWorld, false); //output: false\ncatchOR(helloWorld, 0); //output: 0\n\n//get error message \ncatchOrNull(helloWorld, function(error){\n    console.log('Custom: ',error)\n});\n````\n## Clipboard\nCopy text/image to clipboard using window navigator [clipboard](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard) or fallback document textarea.\n```js\n//copy text to clipboard\ntoClipboard(\"hello world\");\n//or \ncopyToClipboard(\"hello world\");\n\n\n//copy image to clipboard\nconst imageUrl = \"image/examples/image.png\";\n\ncopyImageToClipboard(imageUrl);\n```\n## Convert\n```js\n//formate the prite for payment gateway : stipe or anything else\nformatPrice(20.3);\n\n//Currency to symbol\ncurrencyToSymbol(\"USD\"); //output: $\n```\n\n[Our online rgb to hex tool](https://appsaeed.github.io/ftools/rgb-to-hex)\n**rgbToHex | hexToRgb**\n\n```js\nrgbToHex(10, 20, 100); //output: hex string: #0a1464\n\nhexToRgb(\"#1a098b\"); //output: { red: number, green: number, blue: number } or  null\n```\nquery string parameters to json object\n\n```js\nqueryTojson('name=Javascript\u0026ext=js\u0026founder=Brendan Eich');\n//output: { name: 'Javascript', ext: 'js', founder: 'Brendan Eich' }\n```\n\n## Cookies\nset cookie only for client side document cookies so please when use client side cookies make sure doesn't have sensitive information (only browsers supports)\n```js\nconst cookieName = \"cookie-name\";\nconst cookieValue = \"example_value\";\nconst cookieDays = 30;\nconst cookiePath = \"\"; // optional\n\nsetCookie(cookieName, cookieValue, cookieDays , cookiePath);\ngetCookie(cookieName) // output: example_value;\n\nhasCookie(cookieName); //output: true or false;\n```\n## Datetime\nformat date/time with your on choose by using js built-in option of [toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) (browsers / NodeJS supports)\n```js\n//common js \nconst { toDate } = require('utilies'); // common js required with name import\ntoDate(\"2023-03-28 20:04:10\"); // output: Mar 28, 23\n\nconst utils = require('utilies'); // common js import all\nutils.toDate(\"2023-03-28 20:04:10\"); // output: Mar 28, 23\n\n//es6 module import syntax \ntoDate(\"2023-03-28 20:04:10\"); // output: Mar 28, 23\n```\n\n```js\ntoDatetime(\"2023-03-28 20:04:10\"); // output: Mar 28, 23 08:04 PM\n\ntoDate(\"2023-03-28 20:04:10\"); // output: Mar 28, 23\ntoTime(\"2023-03-28 20:04:10\"); // output: 08:04 PM\n\n/*\n * custom format for all date functions are same\n * options details https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString\n */\ntoDatetime(\"2023-03-28 20:04:10\", options);\n\nconst language = 'en-US' //or ['en-US', 'en-GB'];\ntoDatetime(\"2023-03-28 20:04:10\", options, language);\ntoTime(\"2023-03-28 20:04:10\", options, language);\ntoDate(\"2023-03-28 20:04:10\", options, language);\n```\n## Detection\nGet system theme schema, check is mobile, is touch device etc (browsers)\n```js\n//get device theme schema\nconsole.log(is_dark); //output: true or false\n\nconsole.log(deviceTheme); //output: dark or light\nconsole.log(systemTheme); //output: dark or light\n\n//device is mobile device or not\nconsole.log(isMobile) //output: true or false\n\n//detect is touch device\nconsole.log(isTouchDevice) //output: true or false\n```\n## Encryption\nUse simple encryption in javascript application browser and nodejs environment\n````js\n//encrypted text using secret key\nconst encrypted = encryptSync('Hello world!', 'my_secret')\nconsole.log('Encrypted: ', encrypted)//Encrypted:  JRwzHwpDBQoGAR1+\n\n//decrypted text using secret key and encrypted\nconst decrypted = decryptSync('JRwzHwpDBQoGAR1+', 'my_secret')\nconsole.log('Decrypted: ', decrypted) //Decrypted:  Hello world!\n\n````\n## Errors\nAny Errors to string/text (browsers / NodeJS supports)\n```js\n//any error to string \nerrorToString(['unknow', 'fatal error']) //output: \"unknow, fatal error\"\n//or\nextractError(['unknow', 'fatal error']) //output: \"unknow, fatal error\"\n\n//extract many errors to a string\nerrorsToString('error 1', 'error 2') //output: \"error 1, error 2\"\n// or \nextractErrors('error 1', 'error 2') //output: \"error 1, error 2\"\n```\n## Exporting\nExport to pdf, docs (Only browsers supports)\n```js\nexportToDocs(\"filename\", \"Hello world\");\n\nexportToPdf(\"filename\", \"Hello world\", options); //options is optional\n/*\noptions accpeted properties\n{\n    width: 800,\n    height: 660,\n    top: 100,\n    left: 100,\n}\n*/\n```\n## Generate\n```js\ngenerateToken(10) // output: e.g: GkF25LJxSI\n\n//generate random number between start number to end number\nrandom(10, 100)//output: between 10, 100\n\n//generate unique id by crypto \nuniqid() //output: random string\n//with length\nuniqid(10)\n//with prefix\nuniqid('cg_') //output: cg_omvowejg\n\n//random string similar to uniqid but without dash\nrandomString(20, 'cg_') //output: random string e.g cg_omvowejg\n\n//generate image url for avatar by latters\navatar(\"Javascript\"); //output:https://ui-avatars.com/api/?name=Javascripts\n\nuuid(); //output: string unique uuid\n\nuuidv1(); //output: string unique uuidv1\n\nuuidv4(); //output: string unique uuidv4\n```\n## Load\nLoad/observer images, elements etc (Only browsers supports)\n```js\n//load image by url in javascript\nloadImage(\"image-url.png\").then(function (image) {\n    image.classList.add(\"show-image\");\n}).catch((err)=\u003e {\n    console.lor('imge error: ', err);\n});\n\n//image load will be completes when it gose to view\n//The system work efficiently by using under IntersectionObserver\nlazyLoadImage(\"image-url.png\").then(function (image) {\n    image.classList.add(\"show-image\");\n}).catch((err)=\u003e {\n    console.lor('imge error: ', err);\n});\n\n\n//elements load will be completes when it gose to view\n//The system work efficiently by using under IntersectionObserver\nconst elm = document.queySelector(\"section\");\nlazyLoadElm(elem).then(function (elm) {\n    elm.classList.add(\"show\");\n})\n.catch((err)=\u003e {\n    console.lor('element load error: ', err);\n});\n\n\n\n//When a element is in the viewport\nconst element = document.querySelector('#element');\nisElementInViewport(element) //output: true when the element is in view\n//or \nisViewElm(element) //output: true when the element is in view\n```\n## Math\nLoan interest calculate (browsers / NodeJS supports)\n```js\nloanPerMonth(amount, interest, duration); //output: number of loan per month\n\nloanPerYear(amount, interest, duration); //output: number of loan per month\n\nloanPerday(amount, interest, duration); //output: number of loan per month\n```\n## Storage\n\n**Session storage**\nworking with **browser** session storage\n```js\nsetSession(\"sessionName\", \"Hello World!\");\ngetSession(\"sessionName\");// output: \"Hello World!\"\n\n//set object and return object\nsetSession(\"sessionName\", { text: 'Hello'});\ngetSession(\"sessionName\");// output: { text: 'Hello'}\n\n//set number and return number\nsetSession(\"sessionName\", 120);\ngetSession(\"sessionName\");// output: 120\n\ncleanSession(\"sessionName\");\n// The session is removed\n```\n\n**local storage**\n**browser** local storage\n```js\nsetStorage(\"store_name\", \"Hello World!\");\ngetStorage(\"store_name\");// output: \"Hello World!\"\n\n//set object and return object\nsetStorage(\"store_name\", { text: 'Hello'});\ngetStorage(\"store_name\");// output: { text: 'Hello'}\n\n//set number and return number\nsetStorage(\"store_name\", 120);\ngetStorage(\"store_name\");// output: 120\n\ncleanStorage(\"store_name\");\n// The session is removed\n```\n\n**themeStorage**\nThe theme store using built-in localStorage \n```js\nsetThemeStore(\"dark\");\n\ngetThemeStore(); // output: dark\n\n//theme storage with key name defined\nsetThemeStore(\"light\", 'app_theme');\n\ngetThemeStore('app_theme'); // output: light\n```\n## String\nModify a string, html string tags to valid text etc (browsers/NodeJS supports)\n```js\n//remove html characters from string\nremoveHtml(\"\u003ch1\u003eHello world\u003c/h1\u003e\"); // output: Hello world\n\n\n//css duration to milliseconds\ncssDurationToMillisecond(\"1s\"); // output: 1000\ncssDurationToMillisecond(\"100ms\"); // output: 100\n//or \ncssToMillisecond('1s'); // output: 1000\n```\n## URL\nGet Home url (only browsers support)\n```js\nimport { url } from \"utilies\";\n\n//Get home url only browser support\nurl() //output: http://example.com\nurl('hello-world') //output: http://example.com/hello-world\nurl(['hello','world']) //output: http://example.com/hello/world\n```\nGet text to seo url and seo url to text (browsers / NodeJS supports) \n```js\n// text to seo friendly url\ntextToSeo(\"Hello: I am javascript\"); //output: hello-i-am-javascript\n//or\ntoSeoUrl(\"Hello: I am javascript\"); //output: hello-i-am-javascript\n\n//seo url to valid text\nseoToString(\"hello-iam-javascript\"); //output: hello i am javascript\n//or\nseoToText(\"hello-iam-javascript\");  //output: hello i am javascript\n//or \nurlToText(\"hello-iam-javascript\")   //output: hello i am javascript\n```\nAdd/remove slash from a url (browsers / NodeJS supports) \n```js\n//add slash end of the url\naddSlash(\"http://example.com\"); //output: http://example.com/\n\naddSlash(\"http://example.com/hello\"); //output: http://example.com/hello/\n\naddSlash(\"example.com/hello\"); //output: example.com/hello/\n\n//add slash to start and end of the url\naddSlashs(\"example.com/hello\"); //output: /example.com/hello/\naddSlashs(\"example.com\"); //output: /example.com/\n\n//remove slashes from a string url\n\n//remove slash from a url start and end of the url\nunSlash(\"http://example.com/\"); //output: http://example.com\n\nunSlash(\"/example.com/hello/\"); //output: example.com/hello\n\n//remove slash from left side of path or url\nunSlashL(\"/example.com/hello/\"); //output: example.com/hello/\n\n//remove slash from right side of path or url\nunSlashR(\"/example.com/hello/\"); //output: /example.com/hello\n```\n**Path/URL join** (support NodeJS \u0026 Browsers by module support)\n```js\npathJoin('example.com', 'hello', false, [], {name: 'Saeed'}, 10) \n//output: example.com/hello/10\npathJoin('example.com', 'hello', false, ['new', 'task'], { name: 'Saeed' }, 10) \n//output: example.com/hello/new/task/10\n\n//or might be urlJoin is pathJoin\n```\nquery string parameters to json object\n\n```js\nimport { queryTojson } from 'utilies';\nqueryTojson('name=Javascript\u0026ext=js\u0026founder=Brendan Eich');\n//output: { name: 'Javascript', ext: 'js', founder: 'Brendan Eich' }\n```\n\n## Validation\nValidate email, phone number (browsers / NodeJS supports)\n```js\nisMail(\"yourmail@domain.com\"); //ouput: true\nisMail(\"domain.com\"); //output: false\n\nisPhoneNumber(\"abc10832749\"); //output: false\n\nisPhoneNumber(\"10986499204\"); //output: true\n```\n## Author\n**Saeed Web Developer**\n\n-   [website](https://appsaeed.github.io)\n-   [Linkden](https://www.linkedin.com/in/appsaeed)\n-   [email](appsaeed7@gmail.com)\n## Developers\n```sh\ngit clone https://github.com/appsaeed/utilies.git\n\n# TypeScript build\nnpm run build # test and compile typeScript\n```\n## License\n\nCopyright © 2023 [appsaeed](https://appsaeed.github.io)\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappsaeed%2Futilies","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappsaeed%2Futilies","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappsaeed%2Futilies/lists"}