Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
@graphcms/zoid
Advanced tools
⚠️ This is a temporary fork maintained by GraphCMS for the specific needs of the package @graphcms/uix-sdk. Please use the original packages/repository krakenjs/zoid instead;
A cross-domain component toolkit, supporting:
It's 'data-down, actions up' style components, but 100% cross-domain using iframes and popups!
Public options and methods supported by zoid
Working demos of different zoid patterns
Forkable demo app with build, test, publishing and demos pre-configured.
A full example of a cross-domain component using zoid
Define a component to be put on both the parent and child pages:
var MyLoginComponent = zoid.create({
tag: "my-login-component",
url: "http://www.my-site.com/my-login-component",
});
Render the component on the parent page:
<div id="container"></div>
<script src="script-where-my-login-component-is-defined.js"></script>
<script>
MyLoginComponent({
prefilledEmail: 'foo@bar.com',
onLogin: function(email) {
console.log('User logged in with email:', email);
}
}).render('#container');
</script>
Implement the component in the iframe:
<input type="text" id="email" />
<input type="password" id="password" />
<button id="login">Log In</button>
<script src="script-where-my-login-component-is-defined.js"></script>
<script>
var email = document.querySelector('#email');
var password = document.querySelector('#password');
var button = document.querySelector('#login');
email.value = window.xprops.prefilledEmail;
function validUser (email, password) {
return email && password;
}
button.addEventListener('click', function() {
if (validUser(email.value, password.value)) {
window.xprops.onLogin(email.value);
}
});
</script>
Writing cross domain components is tricky.
Consider this: I own foo.com
, you own bar.com
, and I have some functionality I want to share on your page.
I could just give you some javascript to load in your page. But then:
What about an iframe?
You could just use a vanilla iframe for all of this. But:
zoid solves all of these problems.
It will even automatically generate React and Angular bindings, so people can drop-in your component anywhere and not worry about iframes or post-messages.
Do I need to use a particular framework like React to use zoid?
No, zoid is framework agnostic. You can:
Why write another ui / component library?
This isn't designed to replace libraries like React, which are responsible for rendering same-domain components. In fact, the only real rendering zoid does is iframes and popups; the rest is up to you! You can build your components using any framework, library or pattern you want, then use zoid to expose your components cross-domain. It should play nicely with any other framework!
Aren't iframes really slow?
Yes, but there are a few things to bear in mind here:
zoid isn't designed for building components for your own site. For that you should use native component libraries like React, which render quickly onto your page. Use zoid to share functionality with other sites, that you can't share native-javascript components with
zoid also provides mechanisms for pre-rendering html and css into iframes and popups, so you can at least render a loading spinner, or maybe something more advanced, while the new window loads its content.
I don't want to bother with popups, can I get zoid with just the iframe support?
You can indeed. There's an zoid.frame.js
and zoid.frame.min.js
in the dist/
folder. There's a lot of
magic that's needed to make popups work with IE, and that's all trimmed out.
Can I contribute?
By all means! But please raise an issue first if it's more than a small change, to discuss the feasibility.
Is this different to react-frame-component?
Yes. react-frame-component
allows you to render html into a sandboxed iframe on the same domain. zoid
is geared
around sharing functionality from one domain to another, in a cross-domain iframe.
FAQs
Cross domain components.
The npm package @graphcms/zoid receives a total of 0 weekly downloads. As such, @graphcms/zoid popularity was classified as not popular.
We found that @graphcms/zoid demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.