Integrating npm Package within the Hypothesis Client

[anuj pachawadkar]

Hi,

I want to ask, For local development or POCs how to add any third party npm Package to the existing Hypothesis Client code? Let's say I want to add (Third Party NPM 

Package: https://www.npmjs.com/package/react-dropdown-tree-select#usage) this package into the Hypothesis code. This Package is designed & developed for react code. Hypothesis uses preact for the sidebar.

Can we have step by step guide specifically for Hypothesis to integrate third Party NPM Package.

[Note: "https://preactjs.com/guide/v10/switching-to-preact/" this link doesn't help or give enough information to do the same]

Thanks in advance!

[Robert Knight]

Hello,

Can we have step by step guide specifically for Hypothesis to integrate third Party NPM Package.

Since you’re trying to do something that we haven’t tried to do in the client yet, you’ll have to figure this out for yourself. I can give you a couple of pointers though: 1) One approach is to treat it as if you were trying to use the package in an ordinary web page that didn’t already use a framework (ie. create a DOM element and render the custom component into it with `ReactDOM.render`). 2) An alternative approach might be to try making using of `preact/compat`. We haven’t tested this second option so we don’t know if it will work.

Kind Regards,

Robert.

--
You received this message because you are subscribed to the Google Groups "dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dev+uns...@list.hypothes.is.
To view this discussion on the web visit https://groups.google.com/a/list.hypothes.is/d/msgid/dev/4faf852d-990e-464a-a587-0edc35998e13o%40list.hypothes.is.

[anuj pachawadkar]

Thank you very much Robert,

I have actually tried the second option you mentioned(preact/compat), but it didn't work. Control didn't appear on the screen and it also gave a warning saying: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the t component.

I'll try to apply the first approach you mentioned & let you know further findings.

Warm Regards,
Anuj A. Pachawadkar