{"id":15010421,"url":"https://github.com/pink-gorilla/pinkie","last_synced_at":"2025-04-09T22:41:17.619Z","repository":{"id":52623627,"uuid":"233390783","full_name":"pink-gorilla/pinkie","owner":"pink-gorilla","description":"Pinkie reagent component registry.","archived":false,"fork":false,"pushed_at":"2024-04-16T17:40:20.000Z","size":375,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T00:38:15.588Z","etag":null,"topics":["clj","clojure","clojurescript","pinkie","reagent","reagent-components","visualizations"],"latest_commit_sha":null,"homepage":"","language":"Clojure","has_issues":false,"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/pink-gorilla.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":"2020-01-12T12:42:17.000Z","updated_at":"2022-05-04T23:18:49.000Z","dependencies_parsed_at":"2024-04-16T18:48:51.444Z","dependency_job_id":null,"html_url":"https://github.com/pink-gorilla/pinkie","commit_stats":{"total_commits":203,"total_committers":3,"mean_commits":67.66666666666667,"dds":0.4482758620689655,"last_synced_commit":"c3f5ec5af97ad36ffd86c9b7155b71725e6cd348"},"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pink-gorilla%2Fpinkie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pink-gorilla%2Fpinkie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pink-gorilla%2Fpinkie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pink-gorilla%2Fpinkie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pink-gorilla","download_url":"https://codeload.github.com/pink-gorilla/pinkie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247773732,"owners_count":20993634,"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":["clj","clojure","clojurescript","pinkie","reagent","reagent-components","visualizations"],"created_at":"2024-09-24T19:34:08.674Z","updated_at":"2025-04-09T22:41:17.594Z","avatar_url":"https://github.com/pink-gorilla.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pinkie\n [![GitHub Actions status |pink-gorilla/pinkie](https://github.com/pink-gorilla/pinkie/workflows/CI/badge.svg)](https://github.com/pink-gorilla/pinkie/actions?workflow=CI)[![Clojars Project](https://img.shields.io/clojars/v/org.pinkgorilla/pinkie.svg)](https://clojars.org/org.pinkgorilla/pinkie)\n\n- Pinkie is a simple registry for reagent components. \n- Instead of referring to components by symbol, you refer to by keyword.\n- Think of it as new html tags that are linked to your reagent components.\n- This is useful to declaratively specify ui. \n- This project is used in [Notebook](https://github.com/pink-gorilla/gorilla-notebook) and [Goldly](https://github.com/pink-gorilla/goldly).\n- Pinkie has minimal dependencies, so it can be painlessly integrated to your project. \n\n\n# Pinkie DSL\n\nThe idea is to extend Reagent hiccup syntax to do visualizations in an easier way.\n\n## :p/ renderers\n\nThe idea is that renderers are just reagent components, that can be triggered with (namespaced keywords). \n\n```  \n[:p/vega spec]\n[:p/leaflet spec]\n[:p/bongo spec]\n```\n\n- Tags with :p namespace will be rendered with the corresponding render function.\n- The tags are namespaced for 2 reasons: 1. When user trys to render to a non-existing renderer, then an appropriate error-component can be displayed, and 2. the tag replacing will then not replace tags that it should not replace (for example svg drawing instructions inide a : svg tag, or other custom dsl that could be confused with reagent hiccup syntax).  \n- The spec needs to be serializable to clojurescript. In cases where data is not serializable, it needs to be converted before using pinkie system (for example to render images). \n- The rendering system needs to handle the management of the tag replacement table. In pinkie, the renderers can be added dynamically at runtime. \n\nThe reagent syntax can be nested:\n\n```  \n[:div\n  [:h1 \"demo\"] \n  [:p/vega spec]]\n```\n\n## cljs - reagent atoms / dynamic updates\n\n- If spec is a dereferenced reagent atom, then reagent will re-render the\n  component upon change of the data. \n- Note that this works only on cljs. (Goldly will be able to convert \n  clojure atoms to mirrored reagent atoms.)\n\n## Dynamically loaded renderers\n\n- If renderers are loaded at runtime, a loading component must\nbe displayed until renderer is loaded.\n\n\n## Style as string\n\n- In hiccup styles can be rendered as string.\n```\n   [:rect {:width \"100%\" :height \"100%\"\n           :style \"background-color: blue; font-size: 14px\"}]\n```\n- Such syntax is not accepted by reagent though, but it should\n- Pinkie will therefore preprocess this data, so that reagent gets this:\n``` \n   [:rect {:width \"100%\" :height \"100%\"\n           :style {:background-color \"blue\" :font-size \"14px\"}}]\n```\n- This is important for certain libraris that define styles as strings\n  (happens for example in R html output). \n\n## ui demo\n\n`lein demo`\n\n## unit tests\n\n```\nlein npm-install\nlein test-js\n```\n\n\n# Licence\n\nThis code is licensed to you under the MIT licence. See LICENCE.txt for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpink-gorilla%2Fpinkie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpink-gorilla%2Fpinkie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpink-gorilla%2Fpinkie/lists"}