{"id":21867318,"url":"https://github.com/ktbsomen/httl-s","last_synced_at":"2025-03-21T21:25:42.099Z","repository":{"id":227592594,"uuid":"771868061","full_name":"KTBsomen/httl-s","owner":"KTBsomen","description":"html but templating language, hyper text templating language","archived":false,"fork":false,"pushed_at":"2024-11-22T17:26:39.000Z","size":23,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T16:13:55.543Z","etag":null,"topics":["client-side-rendering","custom-element-js","custom-elements","html-parser","html-template","html5","htpl","javascript","new-programming-language"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KTBsomen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-03-14T05:13:04.000Z","updated_at":"2024-11-22T17:26:43.000Z","dependencies_parsed_at":"2024-03-14T06:30:09.458Z","dependency_job_id":"e4de21f8-ec51-4c06-8fbc-92664ddd70b7","html_url":"https://github.com/KTBsomen/httl-s","commit_stats":null,"previous_names":["ktbsomen/htpl","ktbsomen/httl"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KTBsomen%2Fhttl-s","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KTBsomen%2Fhttl-s/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KTBsomen%2Fhttl-s/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KTBsomen%2Fhttl-s/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KTBsomen","download_url":"https://codeload.github.com/KTBsomen/httl-s/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244871123,"owners_count":20523993,"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":["client-side-rendering","custom-element-js","custom-elements","html-parser","html-template","html5","htpl","javascript","new-programming-language"],"created_at":"2024-11-28T05:09:12.020Z","updated_at":"2025-03-21T21:25:42.044Z","avatar_url":"https://github.com/KTBsomen.png","language":"JavaScript","readme":"# hypertext templating language\nhtml but templating language client side, \n\nit has \n1) for loop\n2) if-else\n3) Import HTML as components\n4) All javascript functions will work\n5) listen for variable change\n6) auto update ui as variable change\n\nmore features will come if you contribute\nso please contribute and make it happen.\n# Custom HTML UI Library Documentation\n\n## Overview\n\nThis library provides a suite of customizable components and utilities to enhance your HTML-based applications. From loaders to template parsing, custom loops, and conditional rendering, this library simplifies common tasks for developers building dynamic and interactive UIs.\n\n---\n\n## Table of Contents\n\n1. [Installation](#installation)  \n2. [Getting Started](#getting-started)  \n3. [Library Features](#library-features)  \n    - [Loader](#loader)  \n    - [State Watcher](#state-watcher)  \n    - [Template Parsing](#template-parsing)  \n    - [Custom Loops](#custom-loops)  \n    - [Conditional Rendering](#conditional-rendering)  \n    - [Include Templates](#include-templates)  \n4. [Utility Functions](#utility-functions)  \n5. [Directory Structure](#directory-structure)  \n6. [FAQs and Discussions](#faqs-and-discussions)  \n\n---\n\n## Installation\n\nTo use this library, simply include the script in your HTML file `after the body tag this should be loaded at last after defining all custom components`:\n\n```html\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/KTBsomen/httl-s@main/statejs.js\"\u003e\u003c/script\u003e\n```\n\nEnsure your project has the necessary setup for JavaScript.\n\n---\n\n## Getting Started\n\nHere is an example of how to show a loader using this library:\n\n```html\n\u003cscript\u003e\n    loader.show(); // Displays the loader\n    setTimeout(() =\u003e loader.hide(), 3000); // Hides it after 3 seconds\n\u003c/script\u003e\n```\n\nThis library provides reusable components such as loaders, custom loops, and more, helping you build dynamic UI elements effortlessly.\n\n---\n\n## Library Features\n\n### Loader\n\nA customizable loader that can display a spinning animation and blur the background.\n\n#### Example:\n\n```javascript\n// Show loader with default animation\nloader.show();\n\n// Hide loader\nloader.hide();\n\n// Show loader with custom HTML\nloader.show('\u003cdiv class=\"my-custom-loader\"\u003eLoading...\u003c/div\u003e');\n```\n\n---\n\n### State Watcher\n\nMonitor and react to changes in global variables dynamically.\n\n#### Example:\n\n```javascript\nwatch('myState', (propName, value) =\u003e {\n    console.log(`${propName} changed to:`, value);\n});\n\nmyState = 'newValue'; // Console logs: \"myState changed to: newValue\"\n```\n\n---\n\n### Template Parsing\n\nParse dynamic JavaScript expressions embedded in HTML using `{{}}`.\n\n#### Example:\n\n```javascript\nconst template = '\u003cp\u003eHello, {{ user.name }}\u003c/p\u003e';\nconst parsedTemplate = parseTemplate(template); // Replaces {{ user.name }} with its evaluated value\ndocument.body.innerHTML = parsedTemplate;\n```\n\n---\n\n### Custom Loops\n\nRender dynamic arrays or range-based loops directly in HTML.\n\n#### Example:\n\n```html\n\u003cfor-loop array=\"[1, 2, 3]\" valueVar=\"item\" indexVar=\"index\" loopid=\"loop1\"\u003e\n    \u003ctemplate loopid=\"loop1\"\u003e\n        \u003cp\u003eIndex: ${index}, Value: ${item}\u003c/p\u003e\n    \u003c/template\u003e\n\u003c/for-loop\u003e\n```\n\n#### Result:\n\n```html\n\u003cp\u003eIndex: 0, Value: 1\u003c/p\u003e\n\u003cp\u003eIndex: 1, Value: 2\u003c/p\u003e\n\u003cp\u003eIndex: 2, Value: 3\u003c/p\u003e\n```\n\n---\n\n### Conditional Rendering\n\nRender elements based on conditions directly in HTML.\n\n#### Example:\n\n```html\n\u003ccondition-block ifid=\"condition1\"\u003e\n    \u003cif-condition value=\"5\" eq=\"5\" elseid=\"conditionElse\"\u003e\n        \u003cp\u003eCondition is true!\u003c/p\u003e\n    \u003c/if-condition\u003e\n    \u003celse-condition elseid=\"conditionElse\"\u003e\n        \u003cp\u003eCondition is false!\u003c/p\u003e\n    \u003c/else-condition\u003e\n\u003c/condition-block\u003e\n```\n\n---\n\n### Include Templates\n\nInclude and render external HTML files dynamically.\n\n#### Example:\n\n```html\n\u003cinclude-template file=\"components/header.html\"\u003e\u003c/include-template\u003e\n```\n\nThis will load `header.html` and replace the tag's content with the parsed HTML.\n\n---\n\n## Utility Functions\n\n1. **Convert Relative to Absolute URLs**  \n   ```javascript\n   const absoluteHtml = convertRelativeToAbsolute('\u003cimg src=\"./image.jpg\"\u003e', 'https://example.com/');\n   ```\n\n2. **Create Range Arrays**  \n   ```javascript\n   const rangeArray = createRangeArray(1, 10, 2); // [1, 3, 5, 7, 9]\n   ```\n\n3. **Set State**  \n   Update UI components dynamically:  \n   ```javascript\n   setState({ loopid: 'loop1' });\n   ```\n\n---\n\n## Directory Structure\n\nHere’s how you can organize files when using this library:\n\n```\nproject/\n├── components/\n│   ├── header.html\n│   └── footer.html\n├── scripts/\n│   ├── library.js\n│   └── main.js\n└── index.html\n```\n\n---\n\n## FAQs and Discussions\n\n### Q: How do I customize the loader animation?  \nA: Use the `loader.show()` method with a custom HTML string as a parameter.\n\n### Q: Can I use this library with React or Vue?  \nA: While primarily designed for vanilla JavaScript, parts of the library (like template parsing) can integrate into React or Vue.\n\n### Q: What browsers are supported?  \nA: The library supports modern browsers. Ensure `backdrop-filter` is supported for blur effects.\n\n---\n\nFor more details or contributions, feel free to submit issues or pull requests to the project repository. Happy coding!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktbsomen%2Fhttl-s","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fktbsomen%2Fhttl-s","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktbsomen%2Fhttl-s/lists"}