I ended up needing to add some custom components to Squarespace. Thought, "why not use sci?" And boom, super easy. Just add the tags to the header script and then you can start calling it directly in the html custom components. Then you can use Squarespace's WYSIWYG editor to move the component around and resize it, etc
You just have to put the code between script tags like usual:
You can have some components depend on code in other components in the same page, but if you do then you have to arrange the components in the page in dependency order. What I've been doing is adding all common code between components to custom code in the Title of the page, so it loads before everything else, and then I can rearrange components wherever I want
For the head section, you just go into Squarespace at Settings > Developer Tools > Code Injection. And then in the header section just add whatever you need:
Also, I'm using local-storage hooks with reframe to store the app-db to disk, so the component state is resilient to page reloads and navigation away and back. Seems like a very lightweight solution (from a devops perspective) for shipping client-side functionality quickly
I also recommend adding this to the custom CSS for the website in Developer Tools:
.sqs-edit-mode-active .code-block .sqs-blockStatus, .sqs-edit-mode-active .code-block .removed-script {
display: none !important;
}
That will remove a warning text block (about custom omponents) that ends up stopping you from making custom components smaller than the warning block itself