{"id":17655226,"url":"https://github.com/valerauko/checkbox-tree-example","last_synced_at":"2025-03-10T23:33:41.482Z","repository":{"id":51364045,"uuid":"271555467","full_name":"valerauko/checkbox-tree-example","owner":"valerauko","description":"React / reagent / re-frame example using the CheckboxTree component","archived":true,"fork":false,"pushed_at":"2024-10-31T02:00:53.000Z","size":121,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-13T08:52:22.622Z","etag":null,"topics":["clojurescript","example","hacktoberfest","re-frame","react","reagent"],"latest_commit_sha":null,"homepage":"","language":"Clojure","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/valerauko.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-06-11T13:37:22.000Z","updated_at":"2024-10-31T02:48:14.000Z","dependencies_parsed_at":"2024-06-19T10:44:49.645Z","dependency_job_id":null,"html_url":"https://github.com/valerauko/checkbox-tree-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valerauko%2Fcheckbox-tree-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valerauko%2Fcheckbox-tree-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valerauko%2Fcheckbox-tree-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valerauko%2Fcheckbox-tree-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valerauko","download_url":"https://codeload.github.com/valerauko/checkbox-tree-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242945524,"owners_count":20210762,"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":["clojurescript","example","hacktoberfest","re-frame","react","reagent"],"created_at":"2024-10-23T12:42:31.708Z","updated_at":"2025-03-10T23:33:40.873Z","avatar_url":"https://github.com/valerauko.png","language":"Clojure","readme":"# CheckboxTree example\n\nA [re-frame](https://github.com/day8/re-frame) application example of using the [CheckboxTree](https://github.com/jakezatecky/react-checkbox-tree) React component.\n\n![image](https://user-images.githubusercontent.com/6322484/84403165-5ad4c780-ac40-11ea-9f57-177b686cdbf1.png)\n\n## Getting Started\n\n### Project Overview\n\n* Architecture:\n[Single Page Application (SPA)](https://en.wikipedia.org/wiki/Single-page_application)\n* Languages\n  - Front end ([re-frame](https://github.com/day8/re-frame)): [ClojureScript](https://clojurescript.org/) (CLJS)\n* Dependencies\n  - UI framework: [re-frame](https://github.com/day8/re-frame)\n  ([docs](https://github.com/day8/re-frame/blob/master/docs/README.md),\n  [FAQs](https://github.com/day8/re-frame/blob/master/docs/FAQs/README.md)) -\u003e\n  [Reagent](https://github.com/reagent-project/reagent) -\u003e\n  [React](https://github.com/facebook/react)\n* Build tools\n  - Project task \u0026 dependency management: [Leiningen](https://github.com/technomancy/leiningen)\n  - CLJS compilation, REPL, \u0026 hot reload: [`shadow-cljs`](https://github.com/thheller/shadow-cljs)\n* Development tools\n  - Debugging: [CLJS DevTools](https://github.com/binaryage/cljs-devtools)\n\n#### Directory structure\n\n* [`/`](/../../): project config files\n* [`dev/`](dev/): source files compiled only with the [dev](#running-the-app) profile\n  - [`cljs/user.cljs`](dev/cljs/user.cljs): symbols for use during development in the\n[ClojureScript REPL](#connecting-to-the-browser-repl-from-a-terminal)\n* [`resources/public/`](resources/public/): SPA root directory;\n[dev](#running-the-app) / [prod](#production) profile depends on the most recent build\n  - [`index.html`](resources/public/index.html): SPA home page\n    - Dynamic SPA content rendered in the following `div`:\n        ```html\n        \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n        ```\n    - Customizable; add headers, footers, links to other scripts and styles, etc.\n  - Generated directories and files\n    - Created on build with either the [dev](#running-the-app) or [prod](#production) profile\n    - Deleted on `lein clean` (run by all `lein` aliases before building)\n    - `js/compiled/`: compiled CLJS (`shadow-cljs`)\n      - Not tracked in source control; see [`.gitignore`](.gitignore)\n* [`src/cljs/checkbox_tree/`](src/cljs/checkbox_tree/): SPA source files (ClojureScript,\n[re-frame](https://github.com/Day8/re-frame))\n  - [`core.cljs`](src/cljs/checkbox_tree/core.cljs): contains the SPA entry point, `init`\n\n### Editor/IDE\n\nUse your preferred editor or IDE that supports Clojure/ClojureScript development. See\n[Clojure tools](https://clojure.org/community/resources#_clojure_tools) for some popular options.\n\n### Environment Setup\n\n1. Install [JDK 8 or later](https://openjdk.java.net/install/) (Java Development Kit)\n2. Install [Leiningen](https://leiningen.org/#install) (Clojure/ClojureScript project task \u0026\ndependency management)\n3. Install [Node.js](https://nodejs.org/) (JavaScript runtime environment) which should include\n   [NPM](https://docs.npmjs.com/cli/npm) or if your Node.js installation does not include NPM also install it.\n7. Clone this repo and open a terminal in the `checkbox-tree` project root directory\n8. (Optional) Download project dependencies:\n    ```sh\n    lein deps\n    ```\n\n### Browser Setup\n\nBrowser caching should be disabled when developer tools are open to prevent interference with\n[`shadow-cljs`](https://github.com/thheller/shadow-cljs) hot reloading.\n\nCustom formatters must be enabled in the browser before\n[CLJS DevTools](https://github.com/binaryage/cljs-devtools) can display ClojureScript data in the\nconsole in a more readable way.\n\n#### Chrome/Chromium\n\n1. Open [DevTools](https://developers.google.com/web/tools/chrome-devtools/) (Linux/Windows: `F12`\nor `Ctrl-Shift-I`; macOS: `⌘-Option-I`)\n2. Open DevTools Settings (Linux/Windows: `?` or `F1`; macOS: `?` or `Fn+F1`)\n3. Select `Preferences` in the navigation menu on the left, if it is not already selected\n4. Under the `Network` heading, enable the `Disable cache (while DevTools is open)` option\n5. Under the `Console` heading, enable the `Enable custom formatters` option\n\n#### Firefox\n\n1. Open [Developer Tools](https://developer.mozilla.org/en-US/docs/Tools) (Linux/Windows: `F12` or\n`Ctrl-Shift-I`; macOS: `⌘-Option-I`)\n2. Open [Developer Tools Settings](https://developer.mozilla.org/en-US/docs/Tools/Settings)\n(Linux/macOS/Windows: `F1`)\n3. Under the `Advanced settings` heading, enable the `Disable HTTP Cache (when toolbox is open)`\noption\n\nUnfortunately, Firefox does not yet support custom formatters in their devtools. For updates, follow\nthe enhancement request in their bug tracker:\n[1262914 - Add support for Custom Formatters in devtools](https://bugzilla.mozilla.org/show_bug.cgi?id=1262914).\n\n## Development\n\n### Running the App\n\nStart a temporary local web server, build the app with the `dev` profile, and serve the app with\nhot reload:\n\n```sh\nlein dev\n```\n\nPlease be patient; it may take over 20 seconds to see any output, and over 40 seconds to complete.\n\nWhen `[:app] Build completed` appears in the output, browse to\n[http://localhost:8280/](http://localhost:8280/).\n\n[`shadow-cljs`](https://github.com/thheller/shadow-cljs) will automatically push ClojureScript code\nchanges to your browser on save. To prevent a few common issues, see\n[Hot Reload in ClojureScript: Things to avoid](https://code.thheller.com/blog/shadow-cljs/2019/08/25/hot-reload-in-clojurescript.html#things-to-avoid).\n\nOpening the app in your browser starts a\n[ClojureScript browser REPL](https://clojurescript.org/reference/repl#using-the-browser-as-an-evaluation-environment),\nto which you may now connect.\n\n#### Connecting to the browser REPL from your editor\n\nSee\n[Shadow CLJS User's Guide: Editor Integration](https://shadow-cljs.github.io/docs/UsersGuide.html#_editor_integration).\nNote that `lein dev` runs `shadow-cljs watch` for you, and that this project's running build id is\n`app`, or the keyword `:app` in a Clojure context.\n\nAlternatively, search the web for info on connecting to a `shadow-cljs` ClojureScript browser REPL\nfrom your editor and configuration.\n\nFor example, in Vim / Neovim with `fireplace.vim`\n1. Open a `.cljs` file in the project to activate `fireplace.vim`\n2. In normal mode, execute the `Piggieback` command with this project's running build id, `:app`:\n    ```vim\n    :Piggieback :app\n    ```\n\n#### Connecting to the browser REPL from a terminal\n\n1. Connect to the `shadow-cljs` nREPL:\n    ```sh\n    lein repl :connect localhost:8777\n    ```\n    The REPL prompt, `shadow.user=\u003e`, indicates that is a Clojure REPL, not ClojureScript.\n\n2. In the REPL, switch the session to this project's running build id, `:app`:\n    ```clj\n    (shadow.cljs.devtools.api/nrepl-select :app)\n    ```\n    The REPL prompt changes to `cljs.user=\u003e`, indicating that this is now a ClojureScript REPL.\n3. See [`user.cljs`](dev/cljs/user.cljs) for symbols that are immediately accessible in the REPL\nwithout needing to `require`.\n\n### Running `shadow-cljs` Actions\n\nSee a list of [`shadow-cljs CLI`](https://shadow-cljs.github.io/docs/UsersGuide.html#_command_line)\nactions:\n```sh\nlein run -m shadow.cljs.devtools.cli --help\n```\n\nPlease be patient; it may take over 10 seconds to see any output. Also note that some actions shown\nmay not actually be supported, outputting \"Unknown action.\" when run.\n\nRun a shadow-cljs action on this project's build id (without the colon, just `app`):\n```sh\nlein run -m shadow.cljs.devtools.cli \u003caction\u003e app\n```\n### Debug Logging\n\nThe `debug?` variable in [`config.cljs`](src/cljs/checkbox_tree/config.cljs) defaults to `true` in\n[`dev`](#running-the-app) builds, and `false` in [`prod`](#production) builds.\n\nUse `debug?` for logging or other tasks that should run only on `dev` builds:\n\n```clj\n(ns checkbox-tree.example\n  (:require [checkbox-tree.config :as config])\n\n(when config/debug?\n  (println \"This message will appear in the browser console only on dev builds.\"))\n```\n\n## Production\n\nBuild the app with the `prod` profile:\n\n```sh\nlein prod\n```\n\nPlease be patient; it may take over 15 seconds to see any output, and over 30 seconds to complete.\n\nThe `resources/public/js/compiled` directory is created, containing the compiled `app.js` and\n`manifest.edn` files.\n\nThe [`resources/public`](resources/public/) directory contains the complete, production web front\nend of your app.\n\nAlways inspect the `resources/public/js/compiled` directory prior to deploying the app. Running any\n`lein` alias in this project after `lein dev` will, at the very least, run `lein clean`, which\ndeletes this generated directory. Further, running `lein dev` will generate many, much larger\ndevelopment versions of the files in this directory.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalerauko%2Fcheckbox-tree-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalerauko%2Fcheckbox-tree-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalerauko%2Fcheckbox-tree-example/lists"}