Comments (7)
May you please clarify which Fluent version are you using?
from tabster.
If I understand things correctly, you want to use two versions simultaneously with the core of one version and the parts from another version. That wouldn't and shouldn't work. From the public API perspective Tabster should be compatible between the major versions. So, you should add a resolution to 4.6.0 from the host side first. There should be just one copy of Tabster in the bundle.
It doesn't concern just Tabster. If you need to use separate versions of anything simultaneously, you need to isolate the guests from the host using iframes.
from tabster.
@lesyk we're in the way to upgrade Fluent UI from 9.18.2 to 9.22.0. since tabster is not locked by Fluent UI (range using ^
), so actually we're bumping tabster from 4.2.0 to 4.6.0
from tabster.
@mshoho Thanks for your comments. I've also tested the case that host version 4.6.0 + guest version 4.2.0, it would also throw because of the DummyInputObserver
API change in #264, when opening a dialog in guest UI, updateOffsets
would be called which is no longer provided in v4.6.0.
I understand that this micro-frontend pattern is less popular, but I think such requirement would exist. Let me try to explain more.
Our project is a WebUI embedded and shipped in Edge browser, so there's no way to populate 1 version immediately to all clients. We need to consider the time for users to check and download updates as well as release channels.
I firstly would like to suggest we skip iframe solution because iframe has its own problems in user experience and development, and we cannot quickly switch to iframes now given that we've spent much effort on current architecture since the era with Fluent UI v8.
Because both projects are developed, built and shipped separately, it is difficult to keep only 1 version of Fluent UI v9
especially v9 is under fast development with many new components created or unstable components promoted to stable. So as a result both host and guest UI would bundle its own versions of Fluent UI.
And because version propagation takes time, it's difficult to avoid the coexistence of different tabster
versions. This should be temporary and both UI would be using the same version finally, but still I don't think UI should crash in this case.
We've done several updates of Fluent UI and this is the first time we have this incompat issue.
from tabster.
@KagamiChan it is not about the less popular pattern.
If you have a library that provides, let's say, class A
and class B
. You cannot mix instances class A
from one version and class B
from another version together. Even from the JavaScript perspective, instanceof (new A.v1)
will never equal to instanceof (new A.v2)
— they physically have different constructor. And they see different closures, different library-level global variables and so on.
And nobody will guarantee the compatibility of the private internal APIs between the versions. They are internal and private. Things will get even worse between the major versions where nobody will guarantee even the public API compatibility.
So, if the system uses A.v1 and B.v2 together at the same time, it's not a pattern issue, it is a system's design flaw. The fact that this is the first issue of that type you have encountered is likely just a sheer amount of luck. If you couldn't isolate things using iframes for some reason, your system should fundamentally address that flaw somehow differently. For example, you can try to avoid bundling the component library (and relative deps) inside both Host and Guest and use it as a separate dependency that is imported by Host and Guest at runtime from the same location. Or something else. The system shouldn't allow mixing parts of external deps from different versions in the same runtime.
from tabster.
Would it be helpful if tabster instance is more self-contained? for example, instead of calling an utility function getModalizer(tabster)
, could it be tabster.getModalizer()
?
Thanks for you suggestion, but I'm afraid this often works well on web apps but not in our product's case. For us, host A and guest B are released separately and in parallel, and it depends on clients to check and download updates, adding up that there're multiple channels to release our projects to. This creates a dependency for B on A's version.
Well I understand that tabster might have to be a singleton for its design purpose, and while I need to discuss more within our team on your suggested solution, I'm planning to do a quick mitigation to patch the old tabster instance from guest UI side:
export const renderGuestUI = (root: HTMLElement) => {
const tabster = getTabster(window);
if (compare((tabster as any).core._version ?? '9.9.9', '4.3.0', '<')) {
(tabster as any).core.queueInit = (callback: () => void) => setTimeout(callback, 0);
(tabster as any).core.drainInitQueue = () => {};
(tabster as any).core._dummyObserver.updatePositions = () => {};
}
ReactDOM.render(<App />, root);
};
This does not intend to fix the missing functionality, and something might not work properly. All its purpose is to prevent crashing the UI before the new version of host reaches the client side.
from tabster.
tabster.getModalizer means that it is not treeshakable and the modalizer code will get into the bundle regardless of being not used.
A better way to mitigate would be to call getModalizer(getTabster())
from your host side before the guest. That way the instance will be created already and when the guest will be calling getModalizer()
, the instance created by the host will be reused.
But again, it seems to me that your system's design is asking for trouble and should be addressed from that point of view.
from tabster.
Related Issues (20)
- Mover does not work for checkboxes HOT 1
- Unable to use mover with two divs next to each other? HOT 8
- Tab stops on the last arrow navigation group HOT 8
- [Bug] Deloser throws error when a form has an input with name `id` HOT 2
- Make mover `hasDefault` option true by default
- Error: 'using disposed tabster'. HOT 3
- Tabster async autoroot initialization breaks certain Fluent scenarios HOT 3
- Rethink Context
- Performance tests
- Screen Reader announcing "button collapsed" for tabster dom element HOT 2
- Race condition between deloser creation and focusing
- Verifying components relying on tabster through unit tests HOT 1
- aria-hidden-focus rule is broken by TabsterDummyInput element HOT 1
- Allow Mover to trigger arrow navigation from within Groupper
- Accessible modalizer skips focus HOT 1
- Restorer relies on focusout event firing when element is removed HOT 1
- (feat) Restorer: investigate allowing child removal to trigger focus restoration in Safari & Firefox HOT 1
- Mover: have symmetrical forwards/backwards tabbing behavior
- Groupper: reset focus trap when focus leaves the group
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tabster.