Impler's VueJS SDK - Githubissues

chavda-bhavik commented 3 months ago

Is your feature request related to a problem? Please describe. Create SDK to integrate Impler's Import Widget in VueJS Application

Describe the solution you'd like The SDK would be headless, like calling a function. Headless SDK doesn't come into the way of the developer way and just does its work. The SDK would behave the same as the react implementation at, https://github.com/implerhq/impler.io/blob/next/packages/react/src/hooks/useImpler.ts

Additional context Here is the Pure HTML & JS Implementation of Logic in Angular SDK,

  <body>
    <button class="btn btn-primary" disabled id="btnOpenImpler">
      Import
    </button>

    <script
      type="text/javascript"
      src="https://embed.impler.io/embed.umd.min.js"
      async
    ></script>
    <script type="text/javascript">
      function generateUuid() {
        return window.crypto.getRandomValues(new Uint32Array(1))[0];
      }

      let uuid = generateUuid();
      let isImplerInitialized = false;
      const EleBtnOpenImpler = document.getElementById("btnOpenImpler");

      window.onload = (e) => {
        if (window.impler) {
          window.impler.init(uuid);

          const readyCheckInterval = setInterval(() => {
            if (window.impler.isReady()) {
              clearInterval(readyCheckInterval);
              EleBtnOpenImpler.removeAttribute("disabled");
            }
          }, 1000);

          EleBtnOpenImpler.addEventListener("click", (e) => {
            window.impler.show({
              uuid,
              projectId: "",
              templateId: "",
              accessToken: "",
              // Get these credentials from https://web.impler.io, (create import, add columns, got to "snippet", open "Add Import Button" to find credentials)
              // find out about more options here: https://docs.impler.io/widget/react-embed#props
            });
          });

          const closeWidget = () => {
            if (window.impler) {
              window.impler.close();
            }
          };

          window.impler.on('message', (eventData) => {
            switch (eventData.type) {
              case "WIDGET_READY":
                console.log("Widget is ready");
                break;
              case "CLOSE_WIDGET":
                console.log("Widget is closed");
                break;
              case "UPLOAD_STARTED":
                console.log("Upload started", eventData.value);
                break;
              case "UPLOAD_TERMINATED":
                console.log("Upload skipped in middle", eventData.value);
                break;
              case "UPLOAD_COMPLETED":
                console.log("Upload completed", eventData.value);
                break;
              case "DATA_IMPORTED":
                console.log("Data imported", eventData.value);
                break;
              default:
                break;
            }
          }, uuid);
        }
      };
    </script>
  </body>

Here we will allow the developer to provide following things,

  projectId,
  primaryColor,
  templateId,
  accessToken,
  authHeaderValue,
  title,
  extra,
  onUploadComplete,
  onWidgetClose,
  onUploadStart,
  onDataImported,
  onUploadTerminate,

Logic will export isImplerInitiated, showWidget, and closeWidget.

manya706 commented 1 month ago

Hi! can you assign this to me?

chavda-bhavik commented 1 month ago

@manya706 You can refer to https://github.com/implerhq/impler.io/tree/next/packages for more information. You can join discord for a quick discussion.

implerhq / impler.io

Impler's VueJS SDK #723