@citizendev/bubble-multi-select
v0.0.29
Published
## About:
Downloads
1,977
Readme
Bubble.io plugin with Preact.js
About:
This is a simple proof-of-concept to set up a viable development workflow to build a Bubble plugin element using Preact.js. The aim is to allow plugin developers to break out of the limited Bubble plugin SDK.
Write up:
Steps to reproduce:
Clone this repository, run
yarn
to install dependencies.Create a Bubble plugin. You can also fork this plugin to skip the next Bubble plugin setup steps.
Add this piece of code into the shared header of Bubble:
<script> function loadJS(url, module = false) { let scriptEle = document.createElement("script"); scriptEle.setAttribute("src", url); scriptEle.setAttribute("type", module ? "module" : "text/javascript" ); document.head.appendChild(scriptEle); } function loadCSS(url) { let link = document.createElement("link"); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = url; link.media = 'all'; document.head.appendChild(link); } window.devServerURL = "_*_DEV_SERVER_URL_*_"; if (!!window.devServerURL) { loadJS(window.devServerURL + "/index.umd.js"); loadCSS(window.devServerURL + "/style.css"); } </script>
Add a new Bubble plugin element. Set the update function as below:
function(instance, properties, context) { if (!instance.data.element) { instance.data.element = document.createElement("custom-multiSelect"); instance.canvas.append(instance.data.element); } instance.data.element.properties = properties; }
Add the plugin into a test app, and set the
DEV_SERVER_URL
plugin key to behttp://localhost:3000
.Put the new Bubble element in your test app.
Run
yarn dev
on your machine.Open test app.
Caveats
- No hot reload right now. When you update the Preact code, you need to reload the browser tab again.
- Speed optimization is still in question.