Socket
Socket
Sign inDemoInstall

suitup

Package Overview
Dependencies
50
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.0.1 to 0.0.3

dist/suitup.min.js
example/suitup.min.js
src/virtual-dom.js

66

example/app.js

@@ -13,3 +13,3 @@ var router = SuitUp.Router;

this.onAction("listFriends", function(element) {
$(".friends-list").toggle();
$(document).find(".friends-list").toggle();
});

@@ -20,2 +20,10 @@ };

var FriendComponent = function() {
SuitUp.Component.call(this, {
template: "friend" //template name that this component is going to use
});
};
FriendComponent.prototype = Object.create(SuitUp.Component.prototype);
FriendComponent.prototype.constructor = FriendComponent;
//Header component

@@ -31,3 +39,21 @@ var HeaderComponent = function() {

//Users component
var UsersComponent = function() {
SuitUp.Component.call(this, {
template: "users" //template name that this component is going to use
});
};
UsersComponent.prototype = Object.create(SuitUp.Component.prototype);
UsersComponent.prototype.constructor = UsersComponent;
//Index component
var IndexComponent = function() {
SuitUp.Component.call(this, {
template: "index" //template name that this component is going to use
});
};
IndexComponent.prototype = Object.create(SuitUp.Component.prototype);
IndexComponent.prototype.constructor = IndexComponent;
//define filters for the reactive and filter helper

@@ -39,8 +65,27 @@ SuitUp.DataFilter.extend("inverseText", function (text) {

//Routing consist in defining a path, a template name and a callback
var links = [
{
href: "/",
text: "home",
title: "SuitUp"
},
{
href: "/users",
text: "Users",
title: "SuitUp - users"
},
{
href: "/friends",
text: "Friends",
title: "SuitUp - friends"
},
]
//Routing consist in defining a path, a component name and a callback
//req: Allows you to read parameters from url. Use req.query.parameter
//res: Allows you to render your html based on a model
var index = router.map ("/", "index", function(req, res) {
var index = router.map ("/", "IndexComponent", function(req, res) {
var model = {
request: req.param
request: req.param,
links: links
};

@@ -50,5 +95,6 @@ res.render(model);

var users = router.map ("/users", "users", function(req, res) {
var users = router.map ("/users", "UsersComponent", function(req, res) {
var model = {
request: req.param
request: req.param,
links: links
};

@@ -58,3 +104,3 @@ res.render(model);

var friends = router.map ("/friends", "friends", function(req, res) {
var friends = router.map ("/friends", "FriendsComponent", function(req, res) {

@@ -66,2 +112,3 @@ //if "friends" template uses actions, you must specify a component,

request: req.param,
links: links
};

@@ -71,8 +118,9 @@ res.render(model);

var friend = router.map ("/friend/:id", "friend", function(req, res) {
var friend = router.map ("/friend/:id", "FriendComponent", function(req, res) {
console.log(req);
var model = {
id: req.query.id
id: req.query.id,
links: links
};
res.render(model);
});

46

example/templates/templates.js

@@ -6,7 +6,7 @@ (function() {

return ((stack1 = (helpers.component || (depth0 && depth0.component) || alias2).call(alias1,"HeaderComponent",{"name":"component","hash":{},"data":data})) != null ? stack1 : "")
return ((stack1 = (helpers.component || (depth0 && depth0.component) || alias2).call(alias1,"HeaderComponent",(depth0 != null ? depth0.model : depth0),"header",{"name":"component","hash":{},"data":data})) != null ? stack1 : "")
+ "\n\n<section class=\"main-content\">\n "
+ ((stack1 = ((helper = (helper = helpers.context || (depth0 != null ? depth0.context : depth0)) != null ? helper : alias2),(typeof helper === "function" ? helper.call(alias1,{"name":"context","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+ "\n</section>\n\n"
+ ((stack1 = (helpers.partial || (depth0 && depth0.partial) || alias2).call(alias1,"footer",{"name":"partial","hash":{},"data":data})) != null ? stack1 : "");
+ ((stack1 = (helpers.partial || (depth0 && depth0.partial) || alias2).call(alias1,"footer","footer",{"name":"partial","hash":{},"data":data})) != null ? stack1 : "");
},"useData":true});

@@ -24,3 +24,3 @@ templates['footer'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {

templates['friends'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
var stack1, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing;
var stack1, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3=container.lambda;

@@ -40,23 +40,29 @@ return "\n<div class=\"friends-container\">\n <p>In SuitUp you can create actions and make things move</p>\n <div class=\"button col-30\" "

+ "</li>\n </ul>\n </div>\n</div>\n\n<div class=\"friends-container\">\n <p>Inputs, buttons or divs respond to changes using the reactive helper. Try to write some html in this html editor.</p>\n <textarea class=\"reactive-input col-40 left\" "
+ ((stack1 = (helpers.reactive || (depth0 && depth0.reactive) || alias2).call(alias1,"text",{"name":"reactive","hash":{},"data":data})) != null ? stack1 : "")
+ "><div style=\"color: red\">Hi</div></textarea>\n <div class=\"reactive-output col-40 right\" "
+ ((stack1 = (helpers.reactive || (depth0 && depth0.reactive) || alias2).call(alias1,"text",{"name":"reactive","hash":{},"data":data})) != null ? stack1 : "")
+ "><div style=\"color: red\">Hi</div></div>\n</div>\n\n<div class=\"friends-container\">\n <p>Apply filters to your data. Just specify a filter in reactive helper.</p>\n <textarea class=\"reactive-input col-40 left\" "
+ ((stack1 = (helpers.reactive || (depth0 && depth0.reactive) || alias2).call(alias1,"text2",{"name":"reactive","hash":{},"data":data})) != null ? stack1 : "")
+ "></textarea>\n <div class=\"reactive-output col-40 right\" "
+ ((stack1 = (helpers.reactive || (depth0 && depth0.reactive) || alias2).call(alias1,"text2","inverseText",{"name":"reactive","hash":{},"data":data})) != null ? stack1 : "")
+ "></div>\n</div>";
+ ((stack1 = (helpers.modelVar || (depth0 && depth0.modelVar) || alias2).call(alias1,"text",{"name":"modelVar","hash":{},"data":data})) != null ? stack1 : "")
+ ">"
+ ((stack1 = alias3(((stack1 = (depth0 != null ? depth0.model : depth0)) != null ? stack1.text : stack1), depth0)) != null ? stack1 : "")
+ "</textarea>\n <div class=\"reactive-output col-40 right\">"
+ ((stack1 = alias3(((stack1 = (depth0 != null ? depth0.model : depth0)) != null ? stack1.text : stack1), depth0)) != null ? stack1 : "")
+ "</div>\n</div>\n\n<div class=\"friends-container\">\n <p>Apply filters to your data. Just specify a filter in reactive helper.</p>\n <textarea class=\"reactive-input col-40 left\" "
+ ((stack1 = (helpers.modelVar || (depth0 && depth0.modelVar) || alias2).call(alias1,"text2",{"name":"modelVar","hash":{},"data":data})) != null ? stack1 : "")
+ ">"
+ ((stack1 = alias3(((stack1 = (depth0 != null ? depth0.model : depth0)) != null ? stack1.text2 : stack1), depth0)) != null ? stack1 : "")
+ "</textarea>\n <div class=\"reactive-output col-40 right\">"
+ ((stack1 = alias3(((stack1 = (depth0 != null ? depth0.model : depth0)) != null ? stack1.text2 : stack1), depth0)) != null ? stack1 : "")
+ "</div>\n</div>";
},"useData":true});
templates['header'] = template({"1":function(container,depth0,helpers,partials,data) {
var stack1;
return " <li>"
+ ((stack1 = (helpers.link || (depth0 && depth0.link) || helpers.helperMissing).call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.href : depth0),(depth0 != null ? depth0.text : depth0),(depth0 != null ? depth0.title : depth0),{"name":"link","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ "</li>\n";
},"2":function(container,depth0,helpers,partials,data) {
return "";
},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
var stack1, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing;
var stack1;
return "<header>\n <ul class=\"menu\">\n <li>"
+ ((stack1 = (helpers.link || (depth0 && depth0.link) || alias2).call(alias1,"/","Home","SuitUp Framework",{"name":"link","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ "</li>\n <li>"
+ ((stack1 = (helpers.link || (depth0 && depth0.link) || alias2).call(alias1,"/users","Users","SuitUp Framework",{"name":"link","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ "</li>\n <li>"
+ ((stack1 = (helpers.link || (depth0 && depth0.link) || alias2).call(alias1,"/friends","Friends","SuitUp Framework",{"name":"link","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ "</li>\n </ul>\n <div class=\"logo\"></div>\n</header>";
return "<header>\n <ul class=\"menu\">\n"
+ ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},((stack1 = (depth0 != null ? depth0.model : depth0)) != null ? stack1.links : stack1),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ " </ul>\n <div class=\"logo\"></div>\n</header>";
},"useData":true});

@@ -67,3 +73,3 @@ templates['index'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {

return "<p>Context Index</p>\n\n"
+ ((stack1 = (helpers.component || (depth0 && depth0.component) || helpers.helperMissing).call(depth0 != null ? depth0 : {},"FriendsComponent",{"name":"component","hash":{},"data":data})) != null ? stack1 : "");
+ ((stack1 = (helpers.component || (depth0 && depth0.component) || helpers.helperMissing).call(depth0 != null ? depth0 : {},"FriendsComponent",(depth0 != null ? depth0.model : depth0),"friendsComponent",{"name":"component","hash":{},"data":data})) != null ? stack1 : "");
},"useData":true});

@@ -70,0 +76,0 @@ templates['users'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {

11

package.json
{
"name": "suitup",
"version": "0.0.1",
"description": "SuitUp is a javascript OpenSource framework allows you to create sweet apps with less code",
"version": "0.0.3",
"description": "SuitUp is a javascript OpenSource MVC framework that allows you to create sweet apps with less code that makes sense",
"main": "src/suitup.js",

@@ -15,2 +15,4 @@ "directories": {

"mvc",
"frontend",
"front-end",
"framework",

@@ -33,4 +35,7 @@ "handlebars",

"location-bar": "^2.1.0",
"url-parse": "^1.1.1"
"uglifyify": "^3.0.1",
"url-parse": "^1.1.1",
"vdom-virtualize": "^1.0.6",
"virtual-dom": "2.1.1"
}
}

92

README.md

@@ -1,9 +0,24 @@

![SuitUpJs](https://raw.githubusercontent.com/erasmo-marin/suitupjs/master/example/img/logo-small.png)
<img src="https://github.com/erasmo-marin/suitup/blob/master/example/img/logo-small.png" width="350">
SuitUp.js is an Open Source Javascript framework that allows you to create single web apps with less code. SuitUp comes with jquery included, so you are free to use your jquery plugins without inconvenients or hacks.
**SuitUp.js** is an Open Source Javascript OOP-MVC framework that allows you to create **sweet apps** with less code. SuitUp.js comes with jquery included, so you are free to use your jquery plugins without inconvenients or hacks. Also, any change in your model instances will result in DOM updates.
SuitUp.js is in early development. **Don't use in production.**
SuitUp.js uses Handlebars as template language and a virtual copy of your DOM. When your data changes, SuitUp.js re-render the template and updates the virtual tree.
SuitUp.js is in early development.
##Components
Create components by extending from **SuitUp.Component** *Class*. Instances of the component are created from any template you want.
```js
var HeaderComponent = function() {
SuitUp.Component.call(this, {
template: "header" //handlebars template name that this component is going to use
});
};
HeaderComponent.prototype = Object.create(SuitUp.Component.prototype);
HeaderComponent.prototype.constructor = HeaderComponent;
```
##Routing
Creating routes is easy and clean in suitup. Just specify the route, template name and a callback function.
Creating routes is easy and clean in suitup. Just specify the route, component name and a callback function.

@@ -14,22 +29,22 @@ app.js

var index = router.map ("/", "index", function(req, res) {
var model = {
var index = router.map ("/", "IndexComponent", function(req, res) {
var data = {
data: "your data"
};
res.render(model);
res.render(data);
});
var friends = router.map ("/friends", "friends", function(req, res) {
var model = {
var friends = router.map ("/friends", "FriendsComponent", function(req, res) {
var data = {
friends: ["your","friends","list"]
};
res.render(model);
res.render(data);
});
var friend = router.map ("/friend/:id", "friend", function(req, res) {
var friend = router.map ("/friend/:id", "FriendComponent", function(req, res) {
console.log(req);
var model = {
var data = {
id: req.query.id
};
res.render(model);
res.render(data);
});

@@ -39,7 +54,7 @@ ```

##Templates
SuitUp uses handlebars. It's fast and easy. Call a template with the *component* helper. Load templates based on url with the *context* helper. Every route has a component with an asociated template. You can reuse your components saving time.
SuitUp uses handlebars. It's fast and easy. Call a template with the *partial* helper. Create a component instance with the *component* helper. Load templates based on url with the *context* helper. Load static templates with *partial* helper.
application.handlebars
```html
{{{component "header"}}}
{{{component "HeaderComponent" model "header"}}}

@@ -50,12 +65,40 @@ <section class="main-content">

{{{component "footer"}}}
{{{partial "footer"}}}
```
Update your model when inputs change
friend.handlebars
component.handlebars
```html
<p>Your friend id is {{model.id}}</p>
{{{link "/" "back" "Home"}}}
<textarea {{{modelVar "text"}}}>
{{{model.text}}}
</textarea>
<p>{{{model.text}}}</p>
```
##Components inside other components
In SuitUp, components are encapsulated reducing coupling. You can define a component inside another component in your template and access to the component instance. For example, if you have 2 components, IndexComponent and HeaderComponent, you can define the IndexComponent template, **index.handlebars** like this:
*first argument*: The Component Class.
*second argument*: The Model to use.
*third argument*: A property name to access the child Component from parent component.
index.handlebars
```html
{{{component "HeaderComponent" model "headerComponent"}}}
<p>this is index</p>
```
Then, if you have an instance of your IndexComponent called index, you can access to your header data like this:
```js
//first
var headerModel = index.headerComponent.getModel();
//then you can update your model and your Html will be updated.
var headerTitle = headerModel.set("title", "home");
//you can do this too
var link = headerModel.get("menu.links[2].href");
```
##Running example
Just execute the server file included in the example folder. Then open it in your browser [http://localhost:4200/](http://localhost:4200/)
If not enough documentation here, check the example included. Just execute the server file included in the example folder. Then open it in your browser [http://localhost:4200/](http://localhost:4200/)
```sh

@@ -67,13 +110,11 @@ $ cd example

##Including it in your html
Just include suitup-dist.js from dist folder and your compiled handlebars templates.
Just include suitup.min.js from dist folder and your compiled handlebars templates.
```html
<script src="templates.js"></script>
<script src="suitup-dist.js"></script>
<script src="suitup.min.js"></script>
```
##TODO
- Reactive elements
- Model Class
- More helpers
- Support for ember-like actions

@@ -83,1 +124,4 @@ ##Contributing

##Thanks
[virtual-dom](https://github.com/Matt-Esch/virtual-dom) - A Virtual DOM and diffing algorithm
[handlebars](https://github.com/wycats/handlebars.js) - Logicless templating language

45

src/component.js

@@ -32,7 +32,14 @@ var SuitUp = require("./suitup.js");

SuitUp.Component = function (params) {
var template = null || params.template;
var template = params.template;
var id = SuitUp.ComponentRegistry.registerComponent(this);
var self = this;
var actions = {};
var model = {} || params.model;
var model = {};
var firstRender = true;
if (params.model) {
model = new SuitUp.Model(params.model);
model.setComponent(this);
model.onChange(onModelChange);
}
var html = "";

@@ -42,7 +49,20 @@

actions[action] = callback;
var actionHandler = $(document).on("click change", '*[data-suitup-action="'+ action +'"]', function () {
actions[$(this).data("suitup-action")](this);
//$(document).find('div[data-suitup-component="'+ id +'"] *[data-suitup-action="'+ action +'"]').off();
var actionHandler = $(document).on("click change", 'div[data-suitup-component="'+ id +'"] *[data-suitup-action="'+ action +'"]', function (event) {
console.log("Action called");
actions[$(this).data("suitup-action")](this, event);
});
}
this.render = function () {
var ctx = {
model: model.getModelData(),
componentReference: this
}
html = Handlebars.templates[template](ctx);
html = '<div class="suitup-component" data-suitup-component="'+ this.getId() +'">' + html + '</div>';
firstRender = false;
return html;
}
this.getId = function () {

@@ -61,3 +81,5 @@ return id;

this.setModel = function (m) {
model = m;
model = new SuitUp.Model(m);
model.setComponent(this);
model.onChange(onModelChange);
}

@@ -69,12 +91,13 @@

this.render = function () {
var ctx = {
model: model
}
html = Handlebars.templates[template](ctx);
return html;
this.getData = function () {
return model.getModelData();
}
var onModelChange = function () {
self.render();
SuitUp.virtualDom.updateComponent(html);
}
}
module.exports = SuitUp;

58

src/helpers.js

@@ -7,3 +7,3 @@ var SuitUp = require("./suitup.js");

SuitUp.Helpers = new function () {
Handlebars.registerHelper('context', function () {
/*Handlebars.registerHelper('context', function () {
var route = SuitUp.Router.getCurrentRoute();

@@ -16,3 +16,3 @@ console.log(this);

return Handlebars.templates[route.getComponent()](ctx, opt);
});
});*/

@@ -35,5 +35,8 @@

//carga el componente requerido en el contexto actual
Handlebars.registerHelper('component', function(componentClass, model) {
Handlebars.registerHelper('component', function(componentClass, model, varName) {
var component = SuitUp.ComponentRegistry.createComponentByName(componentClass);
if (this.componentReference && varName) {
this.componentReference[varName] = component;
}

@@ -43,8 +46,5 @@ if (model) {

} else {
component.setModel(this.model);
component.setModel({});
}
var html = '<div class="suitup-component" data-suitup-component="'+ component.getId() +'">' + component.render() + '</div>';
return html;
return component.render();
});

@@ -59,13 +59,42 @@

//carga el componente requerido en el contexto actual
Handlebars.registerHelper('action', function(actionName) {
var data = ' data-suitup-action="' + actionName + '" ';
if (this.model.component) {
var data = data + 'data-suitup-component="'+ this.model.component.getId() +'"';
} else if (this.component) {
var data = data + 'data-suitup-component="'+ this.component.getId() +'"';
}
return data;
});
//helper that links a
Handlebars.registerHelper('modelVar', function(varName) {
var data = ' data-suitup-model-var="' + varName + '" ';
return data;
});
//TODO: Mejorar este script
var modelVarHandler = $(document).on("keyup change", '*[data-suitup-model-var]', function () {
//buscamos el componente padre
var varName = $(this).data("suitup-model-var");
var val = null;
if($(this).is("textarea, input")) {
val = $(this).val();
} else {
val = $(this).html();
}
var element = $(this);
do {
element = element.parent();
if(element == null || element.length == 0)
return;
var componentId = parseInt(element.data("suitup-component"));
if(!isNaN(componentId)) {
var component = SuitUp.ComponentRegistry.getComponentById(componentId);
var model = component.getModel();
model.set(varName, val);
return;
}
} while (element);
});
/**Reactive elements implementation**/

@@ -78,3 +107,2 @@ SuitUp.DataFilter = new function () {

//carga el componente requerido en el contexto actual

@@ -81,0 +109,0 @@ Handlebars.registerHelper('reactive', function(varName, filter) {

62

src/model.js

@@ -1,3 +0,61 @@

HADRON.Model = function() {
var SuitUp = require("./suitup.js");
SuitUp.Model = function (dataModelDefault) {
var _dataModel = dataModelDefault;
var _component = {};
var onModelChangeFuncs = [];
}
this.setComponent = function (component) {
_component = component;
}
this.getComponent = function () {
return _component;
}
//TODO: Add support for JSONPath
this.get = function (varExp) {
var st = "_dataModel";
//if array
if (!varExp.startsWith("[")) {
st = st + ".";
}
return eval(st + varExp);
}
this.getModelData = function () {
return _dataModel;
}
this.set = function (varExp, val) {
var st = "_dataModel";
//if array
if (!varExp.startsWith("[")) {
st = st + ".";
}
var value = val;
var exp = st + varExp;
var exp = exp + "= value";
eval(exp);
notifyChange();
}
this.onChange = function(func) {
if (func != null && typeof func === "function") {
onModelChangeFuncs.push(func);
} else {
console.warn("WARNING: onChange argument 1 is not a function");
}
}
var notifyChange = function () {
for (var i = 0; i<onModelChangeFuncs.length; i++) {
onModelChangeFuncs[i]();
}
}
}
module.exports = SuitUp;

29

src/route-response.js
var SuitUp = require("./suitup.js");
SuitUp.RouteResponse = function (componentName) {
var componentName = componentName;
SuitUp.RouteResponse = function (componentClass) {
var componentClass = componentClass;
this.render = function(model) {
console.log(model);
var ctx = {
model: model
var component = SuitUp.ComponentRegistry.createComponentByName(componentClass);
component.setModel(model);
var componentHtml = '<div class="suitup-component" data-suitup-component="'+ component.getId() +'">' + component.render() + '</div>';
var ctx2 = {
model: model,
context: componentHtml
};
var opt = {};
var html = Handlebars.templates.application(ctx, opt);
$("body").empty();
$("body").append(html);
//render entire new html
//Components are not re-rendered if model has not changed thanks to component helper
var html = Handlebars.templates.application(ctx2);
if (SuitUp.virtualDom == null) {
SuitUp.virtualDom = new SuitUp.VirtualDom(html);
return;
}
SuitUp.virtualDom.render(html);
}

@@ -16,0 +29,0 @@ }

11

src/router.js

@@ -64,4 +64,4 @@ var $ = require("jquery");

}
//cargamos index
//load application.handlebars template
$(document).ready(function() {

@@ -72,3 +72,5 @@ var url = new URL(window.location.href );

$(document).on("click", ".suitup-link", function(e){
$(document).on("click", "a.suitup-link", function(e){
e.stopImmediatePropagation();
e.preventDefault();
var url = $(this).attr("href");

@@ -79,4 +81,3 @@ url = new URL(url);

document.title = $(this).data("suitup-link-title");
e.preventDefault();
e.stopPropagation();
return false;
});

@@ -83,0 +84,0 @@

2

src/suitup.js

@@ -8,3 +8,5 @@ var SuitUp = SuitUp || {};

SuitUp = require ("./component.js");
SuitUp = require ("./model.js")
SuitUp = require ("./virtual-dom.js");
module.exports = SuitUp;
dist/hadron-dist.js
dist/suitup-dist.js
example/hadron-dist.js
example/suitup-dist.js
src/action.js
dist.sh

Sorry, the diff of this file is not supported yet

example/index.html

Sorry, the diff of this file is not supported yet

example/style.css

Sorry, the diff of this file is not supported yet

example/templates/application.handlebars

Sorry, the diff of this file is not supported yet

example/templates/friends.handlebars

Sorry, the diff of this file is not supported yet

example/templates/header.handlebars

Sorry, the diff of this file is not supported yet

example/templates/index.handlebars

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc