krakenjs / zoid Goto Github PK
View Code? Open in Web Editor NEWCross domain components
License: Apache License 2.0
Cross domain components
License: Apache License 2.0
I should be able to pass the post-robot bridge url into an xcomponent definition, and have it automatically set up the bridge for me on the parent page when the component loads.
For example:
let FooComponent = xcomponent.create({
...
postMessageBridge: 'http://foo.com/bar/bridge'
});
I'd like to be able to have components pick different urls based on, for example, whether they are mobile/desktop or potentially other differences.
Right now we only support url differences based on env
.
One possibility is to add a devieUrls
.
Another is to allow url
to be a function which would let the component author determine the logic for deciding on the url. But this releases the 'running custom javascript on the parent' cat out of the bag.
Calling .focus()
does not work from a different frame, in Firefox. Mainly relevant for .renderToParent()
cases.
The problem is (I believe) that the focus call is happening asynchronously after the button click, since there's a post message being sent to do the focus.
Somehow this isn't an issue in other browsers. Go figure.
Could potentially fix this by getting a handle on the window. But that isn't easy in IE -- using the var win = window.open('', winName);
trick doesn't work particularly well cross-domain.
Would rather not do this with if (isFirefox()) { ... }
...
Need to complete building drivers for:
Others?
Can we make it easier for people to error out if they don't support cookies-disabled mode?
Right now props are sent down as query params. I should be able to specify that they should be sent down in the hash instead.
For example:
foo: {
type: 'string',
hashParam: true
}
foo: 'bar'
-> http://myurl.com#foo=bar
By default all props (except functions) are serialized and passed down in the url. I should be able to specify props which are not passed down in the url.
For example:
myProp: {
type: 'string',
url: false
}
Also certain built-in props (like url
) should not be passed down by default.
I should be able to specify autoResize: true
and have my lightbox automatically resize itself to match the size of the child window body size.
For example
let FooComponent = xcomponent.create({
...
autoResize: true
});
Should probably use a setInterval
loop in the child and postMessage
up to resize if the document.body
size changes.
Note -- unless we can find a way to resize popup windows outside of user interaction events, this is probably just going to have to be limited to lightboxes.
Hi,
I expect 'master/demo/basic/iframe.htm' will display inline component.
Actual result: lightbox component gets displayed.
Tested against branch master, on Chrome and Safari.
Please verify.
Thanks,
Ky
We should namespace all CSS under an autogenerated component id, to prevent conflicts.
Right now these are on ParentComponent
, would be better to have them on Component
Is it possible to access a global function defined in the child's window from the parent's window object? Does xcomponent or postRobot have this feature built in?
The use case is, when a user clicks a button in the parent component, I want the child component to respond to the click.
Thanks!
The lightbox should be correctly centered when the user has a multi-monitor setup
Allow component authors to specify which devices/browsers they support.
How can we break this down a bit?
I got this error on production environment, but not locally.
Uncaught Error: No ack for postMessage xcomponent_init in 1000ms
I'm here to ask how can I provide the timeout. Thank you.
When I build the url, I should make sure any props are placed before the hash.
For example: if my url is http://foo.bar#baz
and I have a prop x=1
, the final url should be http://foo.bar?x=1#baz
.
So the parent can optionally error out if the child redirects or stops being responsive.
Something like xcomponent_tag_name_4324kbj23kj234b324232
Right now, because so much is async/callback based, we don't actually catch a lot of errors in our tests, they just fail and timeout. Is there a way to do testing better when we have multiple async callbacks that all rely on postMessages? Can we direct all errors into a single rejected promise or something?
On the child window:
window.xchild.exports.foo = function() { ... };
On the parent:
this.exports.foo();
Also need a way to declare this on the component definition, so we can mock out function calls until the child is ready.
Right now we're monkey patching angular to get the directive auto-attached.
Let's not do this. It would be better to have the user have to include a custom angular module prior to bootstrap.
I should be able to restrict a component to only run on a certain url / url pattern.
Need to think about how to implement this, and if there's any reliable client side way to ensure I'm being rendered from a certain domain.
We should use beaver-logger to instrument xcomponent, and allow people to pass in their own beaver back-end url, for example:
let FooComponent = xcomponent.create({
...
logUrl: 'http://foo.com/api/log'
});
Right now we provide:
parentStyleSheet
overlayStyleSheet
overlayTemplate
componentStyleSheet
componentTemplate
Thinking we should whittle these down to (at least)
parentStyleSheet
parentTemplate
componentStyleSheet
componentTemplate
and have the overlay encapsulated within the parentTemplate
/ parentStyleSheet
.
Another thought -- get rid of stylesheets altogether and just rely on inline <style>
tags in templates to reduce the work we're doing on the xcomponent side?
This will make it easier to upgrade and add new props after releasing a live xcomponent.
Makes sense for inline components, doesn't make so much sense for iframes and popups.
Not totally convinced this is necessary or a good idea -- might add more spaghetti code. Leaving a note here to think about it.
It's kinda lazy that this isn't happening right now. The promise should wait for the child to send an INIT
message, then either resolve or reject.
We have plans, at least in PayPal, for some pretty complex objects being passed down as props.
Should be include support for json schema? Maybe this is overkill and could just be done on the child window though...
The way I've been designing this so far is to prevent any custom javascript from running on the parent site.
This makes it safer for component users, because they can see that the only code they're running is:
xcomponent
, which is open source and unlikely to contain vulnerabilitiesBut allowing parent-side logic is becoming more and more necessary, for features like:
And probably other future features.
Is there a way to mitigate this? I'd love to keep some of this executable logic in the child window, but the issues above are both things we need to know before we can even begin to render.
Also we're limited to having to do a lot synchronously, since if the component author wants to render a popup, we have to do everything in the same frame as the button click.
Thoughts?
gulp test
for every PRRight now can't test in offline mode because we're using cdn urls for angular and react.
There are situations where we need to figure out what render context we want to use, on the fly in the parent page.
For example: for PayPal Checkout, if the user is one-touch logged in, we render checkout in a lightbox iframe, otherwise we use a popup window.
One possibility is to add a method like:
determineContext() {
return someContextDeterminingPromise();
}
The only problem with this is it begins to add runnable code / logic to the parent page, which I'm not sure if we want to do for xcomponent
Would it be a good idea to allow single-track components, which have one purpose and a 'success' or 'rejection' state?
I'm imagining something like:
LoginComponent.run().then( ... ).catch( ... );
The idea is the component would tear itself down when it's done with a resolved value. In the login component example, when the user logs in, the component's sole purpose is complete, so it can tear itself down and resolve the promise.
This contrasts to more complex components which can accept an unlimited number of prop based callbacks. These simpler component might be more easy to reason about since invoking them is more of a 'function call'-esque approach.
Thank you for such an amazing library! I can't image all the efforts being put into making this library and sharing it with the community.
ParentXComponent
from ChildXComponent
. I can't find a way to access details in the parent such as the parent origin or source. I've tried to use window.parent
, event.source
but can't seem to make it work.attach
callback in the child.Thanks!
Right now post-robot will share error stacks between windows for function based props that are created on one window and invoked on another.
Wondering if this is a horrible idea from a security perspective, and we should prevent it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.