A new repo to experiment with a simpler, more consistent, and (hopefully) more general approach to creating UI widgets for browser-based "client" software.
Clone both repos:
git clone https://github.com/cawasser/widget-workshop.git
git clone https://github.com/cawasser/reagent-table.git
You first need to compile and "install" the react-table, as we've made changed to make it compatible with the latest Reagent
Run: lein uberjar
lein install
This compiles the library and installs it into your local Maven repository. Don't
worry, shadow-cljs can find it automatically by the new veriosn number.
Now Run:
npm install
shadow-cljs watch app
Open your browser to:
[http://localhost:3333](http://localhost:3333)
Import the project into Cursive using "File | Project | Project form existing sources...".
In the popup, navigate into your new folder, and select the "pom.xlm" file. Click OK.
An nREPL is automatically started on port 7777.
Currently this code replicated the client-only portion of Sample Task #2, providing a simple Reagent-based "equation" UI to play with. The server-side is not included as this ia a shadow-cljs only project. The built-in http-server is used only to load the SPA into the browser.
Next? Move to Re-frame (including re-frame-10x) and then start looking at the widget creation sequencing.
Drag & Drop code mimics:
atlassian/react-beautiful-dnd#427 (comment)
"the story so far..."
seems that Draggables must be inside a Droppable, not just inside a DragDropContext. this is just what the JS tutorial, through part 4, does. Might be some other configuration that removes this requirements (since we don't need to support dropping back on the data-sources list anyway)
If you need to update the react-table library, be sure to both:
- update the version number in project.clj
- run
lein uberjar - run
lein install - restart
shadow-cljs watch :appso it picks recognized the updated CLJS dependency(ies)