Preact: Question: How does preact work with other libraries on the same page?

[jawadst]

I am planning to use Preact in a library that gets distributed and embedded on websites through a <script> tag.

I was wondering how Preact would behave in that environment: does it pollute the global scope? Does it have expectations about the environment? Or does it simply stick to the elements that we make it render to?

A few examples I am looking at are: what if Preact and jQuery are on the same page? Preact/React? Preact/Angular?
I am not looking to use multiple libraries at once but want to make sure that they can be on the same page (if, for instance, someone embeds my library in an Angular app) without any conflict/interaction.

I know my question is a little broad but I could not find much on the topic and Preact seems to be the perfect fit for me: I do not want to resort to writing old-school JS and I want to keep the library lightweight.

Happy to review code/articles/etc. if you have pointers!

Thanks,
Jawad

[developit]

Hi @jawadst - Preact has no global effects, so it's perfectly suited to your use-case 👍

It doesn't use global variables, doesn't modify the DOM beyond the elements you use it to render, and doesn't install delegated event listeners into the document. It plays nicely with jQuery too - you can even use jQuery to add elements within a preact-controlled section of the DOM, and they will work just fine.

A good way to think of Preact is that it's going to act just like hand-written vanilla JavaScript code. Your question is broad, but thankfully this is one of the design goals Preact has had since the very beginning, so it's easy to answer.

Cheers!

-- edit - here's an example to illustrate: --

function handler(){}
let div = document.getElementById('my-widget')

// in preact, this:
render(<a onClick={handler}>Hello!</a>, div)

// ... will run only these operations on the DOM:
let a = document.createElement('a')
a.addEventListener('click', handler)
a.appendChild(document.createTextNode('Hello!'))
div.appendChild(a)

[jawadst]

Thanks for the answer and for all your hard work!

[developit]

Added an illustration to clarify :)

[MatheusMoura17]

I have an accessibility plugin developed in vanilla. The plugin is embedded on websites through a <script /> tag by customers.

I am planning migrate to preact + typescript. But some important customers, in minimal cases overwrites the vanilla code 😫, crashing the application.

Example, customers using MooTools JavaScript utilities.

I am researching on migration, do you have something to consider?

Thanks!