{"id":25246933,"url":"https://github.com/yhwh-script/yhwh-script","last_synced_at":"2026-01-29T06:33:11.943Z","repository":{"id":276696796,"uuid":"929984184","full_name":"yhwh-script/yhwh-script","owner":"yhwh-script","description":"yhwh-script is vanilla JavaScript","archived":false,"fork":false,"pushed_at":"2025-03-12T13:27:14.000Z","size":1207,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-07T13:43:31.933Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yhwh-script.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,"zenodo":null}},"created_at":"2025-02-09T20:55:26.000Z","updated_at":"2025-03-12T13:35:01.000Z","dependencies_parsed_at":"2025-06-07T13:33:46.447Z","dependency_job_id":"09316ce8-9ed5-4bd0-8b51-a0a527f6aa64","html_url":"https://github.com/yhwh-script/yhwh-script","commit_stats":null,"previous_names":["yhwh-script/yhwh-script"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yhwh-script/yhwh-script","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhwh-script%2Fyhwh-script","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhwh-script%2Fyhwh-script/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhwh-script%2Fyhwh-script/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhwh-script%2Fyhwh-script/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yhwh-script","download_url":"https://codeload.github.com/yhwh-script/yhwh-script/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhwh-script%2Fyhwh-script/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28867101,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T05:56:06.453Z","status":"ssl_error","status_checked_at":"2026-01-29T05:55:57.668Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-02-12T02:56:33.908Z","updated_at":"2026-01-29T06:33:11.929Z","avatar_url":"https://github.com/yhwh-script.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"## Hi there 👋\n\n# yhwh-script\n\nWith YHWH-Script ( pronounced: /jɑːhwe/-script) your web app can become whatever you want it to become. There is nothing so complicated that it can't be made simple.\n\nI kid You not: yhwh-script is an advanced, yet minimalistic WebComponents framework featuring most of the functionality of popular JavaScript frameworks, but in a fraction of their complexity. It is written in vanilla JavaScript.\n\nyhwh-script is solely built on \u003ca title=\"Vite\" href=\"https://vitejs.dev\"\u003e\u003cimg height=\"20\" alt=\"Vitejs-logo\" src=\"https://vitejs.dev/logo.svg\"\u003e\u003c/a\u003e and has an optional \u003ca title=\"SQLite\" href=\"https://sqlite.org/wasm\"\u003e\u003cimg height=\"20\" alt=\"SQLite-logo\" src=\"https://sqlite.org/images/sqlite370_banner.gif\"\u003e\u003c/a\u003e support within the [Origin Private Filesystem (OPFS)](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system).\n\n[The Unclicense](https://choosealicense.com/licenses/unlicense/)\n\n## Features\n\n- written in vanilla JavaScript\n- support for custom elements in dedicated .html files (SinglePageApplications SPAs and SingleFile WebComponents SFCs), create or use your own library of custom-elements\n- following [W3C standards and MDN-recommended best practices](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks) with just a few hacks to accomplish things where people claim: *\"This is impossible with WebComponents\"*\n- direct access to ShadowDOM in each component's script (via `shadowDocument`)\n- direct access to each module (via its `{moduleName}`)\n\n- SQLite WebAssembly (WASM) for global state management with OriginPrivateFileSystem (OPFS), your data stays private\n- dedicated workers for database pooling\n- [Responding to attribute changes](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes)\n- offline capabilities\n- history-driven sitemap router [navigation module](https://github.com/yhwh-script/examples/blob/main/public/elements/router/router-app.html)\n- support for containerized builds\n- https support out of the box ([@vitejs/plugin-basic-ssl](https://github.com/vitejs/vite-plugin-basic-ssl))\n- basic functionality in under \u003c100LOC\n\n## Installation\n\n### Prerequisites\n\nYou need to have \u003ca title=\"NodeJS\" href=\"https://nodejs.org\"\u003e\u003cimg height=\"20\" alt=\"NodeJS-logo\" src=\"https://www.vectorlogo.zone/logos/nodejs/nodejs-ar21.svg\"\u003e\u003c/a\u003e installed.\n\n### Running \n\nRunning yhwh-script is as easy as cloning one of the repositories below.\n```bash\n  git clone https://github.com/yhwh-script/sqlite-examples.git\n  cd sqlite-examples\n  npm install\n```\nOR you can use npx, which is the recommended way\n```bash\n  npx @yhwh-script/create-app {your_project}\n  cd {your_project}\n  npm install\n```\nand then simply \n```bash\n  npm run dev\n```\nto quickly setup a yhwh-script project. You can then access the app via https://localhost:3443 in your browser.\n\n## Creating\n\nHave you ever thought about creating WebComponents in dedicated HTML-files? Just create your custom elements inside the `public/elements` folder. You just have to stick to (custom elements naming conventions)[https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name]. They will work out of the box as HTML, (S)CSS and JavaScript custom elements with ```script```, ```style``` and ```template``` fragments à la Vue or Svelte.\n\nThat's basically everything. **Happy coding!**\n\n[Examples](https://github.com/yhwh-script/examples) without and [with SQLite support](https://github.com/yhwh-script/sqlite-examples) can be found in the corresponding sub-projects. It is recommended to use SQLite examples for demonstration purposes and if you need local-persistent state!\n\n## API description and restrictions\n\nHere are some further features You can use in a .html file\n\n- ```shadowDocument``` is the private scope DOM of the element. You can use most methods that are also available on the ```document```, for instance ```shadowDocument.getElementById(...)``` or  ```shadowDocument.querySelector(...)```.\n\n## Component Lifecycle\n\nIn case you want some deeper insights you should learn and understand how the [WebComponents lifecycle](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks) is working.\n\n![Preview](https://raw.githubusercontent.com/yhwh-script/yhwh-script/refs/heads/main/docs/excalidraw_customElements-lifecycle.png)\n\n1. Put your custom elements in the [./public/elements/](https://github.com/yhwh-script/sqlite-examples/public/elements) folder (/src/elements/elements.js is automagically generated when you run ```npm run dev```)\n2. After having created your custom elements you can instantiate them programmatically or by tag-name like in the [animals-view.html](https://github.com/yhwh-script/examples/public/elements/animals/animals-view.html) (Check out [the other examples](https://github.com/yhwh-script/examples/public/elements/) to see variations.)\n\n## Adding a navigation \n\nAdding a navigation is very easy. [As the example shows](https://github.com/yhwh-script/sqlite-examples/public/elements/home/home-navigation.html) You can have an entire navigation in one single html file defined as just another custom element. After having it integrated into your app with a single tag (``\u003chome-navigation\u003e\u003c/home-navigation\u003e), you can have routing support and all the things you would expect.\n\nOf course you are completely free to customize the themes, modules and components and make them whatever you want them to become!\n\n## Feedback\n\nIf you still have questions please let me know. Your opinion is valuable to me and sharing what you think is higly appreciated! If you have any feedback and want to share your suggestions please consider the contribution guidelines and reach out to @jahro_me\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhwh-script%2Fyhwh-script","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyhwh-script%2Fyhwh-script","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhwh-script%2Fyhwh-script/lists"}