You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

graphqlvisualizer

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

graphqlvisualizer - npm Package Compare versions

Comparing version

1.0.2
to
1.0.3

dist/visualizer/body-generator.d.ts
dist/visualizer/body-generator.js
dist/visualizer/script-generator.d.ts
dist/visualizer/script-generator.js
dist/visualizer/style-generator.d.ts
dist/visualizer/style-generator.js

116

dist/client.js
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });

@@ -6,65 +18,34 @@ const visualizer_1 = require("./visualizer/visualizer");

var schemaString = `
type Tweet {
id: ID!
# The tweet text. No more than 140 characters!
body: String!
# When the tweet was published
date: Date
# Who published the tweet
author: User!
# Views, retweets, likes, etc
stats: Stat
commenters: [User]
type User{
id:ID!
firstname:String
lastname:String
address:Address
}
type User {
id: ID!
username: String
first_name: String
last_name: String
full_name: String
name: String @deprecated
avatar_url: Url
type Address{
postalCode:Int
city:String
}
type Stat {
views: Int
likes: Int
retweets: Int
responses: Int
}
type Notification {
id: ID
date: Date
type: String
}
scalar Url
scalar Date
type Query {
type Query{
"""
Returns a list of 'Tweet' type according to parameters
Returns user with specified id
"""
tweets(limit: Int, skip: Int, sort_field: String, sort_order: String): [Tweet]
user(id: ID): User
"""
Returns specified Tweet
Returns a list of users that have the specified address
"""
tweet(id: ID!): Tweet
user(id: ID!): User
notifications(limit: Int): [Notification]
isTweetRead: Boolean
usersOnAddress(address: Address): [User]
}
type Mutation {
createTweet (
body: String
): Tweet
deleteTweet(id: ID!): Tweet
markTweetRead(id: ID!): Boolean
}`;
enum Episode {
NEWHOPE
EMPIRE
JEDI
}
type Mutation{
createAddress(postalCode:Int!, city:String): Address
deleteUser(id:ID):Boolean
}
`;
var fileName = 'src/generated/genExample.html';
var schema = (0, visualizer_1.GenerateHtml)(schemaString);
var schema = (0, visualizer_1.GenerateHtmlFromString)(schemaString);
var stream = fs.createWriteStream(fileName);

@@ -74,1 +55,26 @@ stream.once('open', function () {

});
const puppeteer_1 = __importDefault(require("puppeteer"));
(() => __awaiter(void 0, void 0, void 0, function* () {
const browser = yield puppeteer_1.default.launch({ headless: false });
const page = yield browser.newPage();
// __dirname is a global node variable that corresponds to the absolute
// path of the folder containing the currently executing file
yield page.goto(`file://D:/faks/Master/Master%20rad/graphQL_Visualizer/src/generated/genExample.html`);
//await page.setContent(schema);
}))();
// const { platform } = require('os');
// const { exec } = require('child_process');
// const WINDOWS_PLATFORM = 'win32';
// const MAC_PLATFORM = 'darwin';
// const osPlatform = platform();
// const url = "file:///D:/faks/Master/Master%20rad/graphQL_Visualizer/src/generated/genExample.html";
// let command;
// if (osPlatform === WINDOWS_PLATFORM) {
// command = `start microsoft-edge:${url}`;
// } else if (osPlatform === MAC_PLATFORM) {
// command = `open -a "Google Chrome" ${url}`;
// } else {
// command = `google-chrome --no-sandbox ${url}`;
// }
// console.log(`executing command: ${command}`);
// exec(command);

2

dist/main.d.ts

@@ -1,1 +0,1 @@

export { Visualize, GenerateHtml } from './visualizer/visualizer';
export { Visualize, GenerateHtmlFromString, GenerateHtmlFromLocalFile } from './visualizer/visualizer';

5

dist/main.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GenerateHtml = exports.Visualize = void 0;
exports.GenerateHtmlFromLocalFile = exports.GenerateHtmlFromString = exports.Visualize = void 0;
var visualizer_1 = require("./visualizer/visualizer");
Object.defineProperty(exports, "Visualize", { enumerable: true, get: function () { return visualizer_1.Visualize; } });
Object.defineProperty(exports, "GenerateHtml", { enumerable: true, get: function () { return visualizer_1.GenerateHtml; } });
Object.defineProperty(exports, "GenerateHtmlFromString", { enumerable: true, get: function () { return visualizer_1.GenerateHtmlFromString; } });
Object.defineProperty(exports, "GenerateHtmlFromLocalFile", { enumerable: true, get: function () { return visualizer_1.GenerateHtmlFromLocalFile; } });

3

dist/visualizer/html-generator.d.ts
export declare function generateHtml(schema: any): string;
export declare function buildBody(schema: any): string;
export declare function buildScript(): string;
export declare function buildStyle(): string;

297

dist/visualizer/html-generator.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.buildStyle = exports.buildScript = exports.buildBody = exports.generateHtml = void 0;
const graphql_1 = require("graphql");
exports.generateHtml = void 0;
const script_generator_1 = require("./script-generator");
const style_generator_1 = require("./style-generator");
const body_generator_1 = require("./body-generator");
function generateHtml(schema) {

@@ -16,3 +18,3 @@ var html = buildHtml(schema);

</head>
<body>` + buildBody(schema) + buildScript() + `
<body>` + (0, body_generator_1.generateBody)(schema) + (0, script_generator_1.generateScript)() + `
</body>

@@ -25,291 +27,4 @@ </html>`;

var header = '';
header += buildStyle();
header += (0, style_generator_1.generateStyle)();
return header;
}
function buildBody(schema) {
var _a, _b;
var body = '';
var queries = (_a = schema.getQueryType()) === null || _a === void 0 ? void 0 : _a.getFields();
var mutations = (_b = schema.getMutationType()) === null || _b === void 0 ? void 0 : _b.getFields();
var types = schema.getTypeMap();
body += buildQueriesContent(queries);
body += buildMutationsContent(mutations);
body += buildTypesContent(types);
return body;
}
exports.buildBody = buildBody;
function buildQueriesContent(queriesFieldMap) {
var content = '';
if (queriesFieldMap == undefined || queriesFieldMap == null) {
return content;
}
content += `
<br>
<div class="list">
<h3>Queries</h3>
<hr>
<br>`;
content += buildContentForFieldMap(queriesFieldMap, 'query');
content += `
</div>`;
return content;
}
function buildMutationsContent(mutationsFieldMap) {
var content = '';
if (mutationsFieldMap == undefined || mutationsFieldMap == null) {
return content;
}
content += `
<br>
<div class="list">
<h3>Mutations</h3>
<hr>
<br>`;
content += buildContentForFieldMap(mutationsFieldMap, 'mutation');
content += `
</div>`;
return content;
}
function buildContentForFieldMap(fieldMap, queryOrMutation) {
var content = '';
var map = fieldMap;
var mutations = Object.entries(map);
for (let index = 0; index < mutations.length; index++) {
var mutation = mutations[index];
var nameOfMutation = mutation[0];
var mutationContent = mutation[1];
var args = mutationContent.args;
var desc = mutationContent.description;
if (desc == undefined)
desc = '';
console.log(nameOfMutation);
content += buildSingleCardContent(nameOfMutation, args, mutation[1].type, desc, queryOrMutation);
}
content += `
</div>`;
return content;
}
function buildSingleCardContent(name, args, ret, desc, queryOrMutation) {
var content = '';
var argsMap = args;
var argsNew = Object.entries(argsMap);
content += `
<div>
<button type="button" class="collapsible collapsible-` + queryOrMutation + `">` + name + `: ` + ret + `</button>
<div class="content">
<p class="description">` + desc + `</p>
<p>Example:</p>
<div style="padding-left: 15mm; margin-bottom: 5mm">
` + name + `(` + buildParametersContent(argsNew) + `) {
` + buildExampleContent(ret) +
`<br>}
</div>
</div>
</div>`;
return content;
}
function buildParametersContent(args) {
var content = ' ';
for (let j = 0; j < args.length; j++) {
var parameter = args[j];
var nameOfParam = parameter[1].name;
var paramType = '';
if (parameter[1].type.name == undefined)
paramType = parameter[1].type.ofType.name;
else
paramType = parameter[1].type.name;
content += ` ` + nameOfParam + `: ` + parameter[1].type + `,`;
}
return content.slice(0, -1);
}
function buildExampleContent(ret) {
var content = '';
var fields;
if (ret instanceof graphql_1.GraphQLList)
fields = ret.ofType._fields;
else
fields = ret._fields;
var fieldsMap = fields;
if (fieldsMap == null || fieldsMap == undefined)
return content;
var fieldsNew = Object.entries(fieldsMap);
for (let j = 0; j < fieldsNew.length; j++) {
var field = fieldsNew[j];
var nameOffield = field[0];
content += `<br>
&emsp;` + nameOffield;
}
return content;
}
function buildTypesContent(typesFieldMap) {
var content = '';
if (typesFieldMap == undefined || typesFieldMap == null) {
return content;
}
var typesMap = typesFieldMap;
var types = Object.entries(typesMap);
content += `
<br>
<div class="list">
<h3>Types</h3>
<hr>
<br>`;
for (let index = 0; index < types.length; index++) {
var type = types[index];
if (type[1].astNode == undefined || type[1].astNode.kind == undefined || type[1].astNode.kind == 'ScalarTypeDefinition')
continue;
content += buildSingleTypeContent(type);
}
content += `
</div>`;
return content;
}
function buildSingleTypeContent(type) {
var content = '';
var nameOfType = type[0];
if (nameOfType == 'Query' || nameOfType == 'Mutation')
return content;
var contentOfType = type[1];
var fields = contentOfType._fields;
var fieldsMap = fields;
var fieldsNew = Object.entries(fieldsMap);
var fieldsString = buildFieldsContent(fieldsNew);
content += `
<div>
<button type="button" class="collapsible collapsible-type">` + nameOfType + `</button>
<div class="content">
<p>` + nameOfType + ` {</p>
<div style="padding-left: 15mm; margin-bottom: 5mm">`
+ fieldsString +
`</div>
<p>}</p>
</div>
</div>`;
return content;
}
function buildFieldsContent(fieldsNew) {
var content = '';
for (let j = 0; j < fieldsNew.length; j++) {
var field = fieldsNew[j];
var nameOffield = field[0];
content += nameOffield + `: ` + field[1].type + `<br>`;
}
return content;
}
function buildScript() {
var script = `\n
<script>
var coll = document.getElementsByClassName('collapsible-query');
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active-query');
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
});
}
coll = document.getElementsByClassName('collapsible-mutation');
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active-mutation');
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
});
}
coll = document.getElementsByClassName('collapsible-type');
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active-type');
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
});
}
</script>`;
return script;
}
exports.buildScript = buildScript;
function buildStyle() {
var style = `
<style>
html {
background-color: white;
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
margin: 3px;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
border-radius: 10px;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible-query {
background-color: rgb(189, 210, 232);
color: rgb(17, 4, 48);
}
.collapsible-mutation {
background-color: rgb(185, 212, 169);
color: rgb(21, 46, 5);
}
.collapsible-type {
background-color: rgb(237, 206, 188);
color: rgb(55, 36, 9);
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active-query, .collapsible-query:hover {
background-color: rgb(163, 193, 225);
}
.active-mutation, .collapsible-mutation:hover {
background-color: rgb(156, 189, 137);
}
.active-type, .collapsible-type:hover {
background-color: rgb(221, 186, 165);
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.description{
color: rgb(125, 125, 125);
}
.list{
padding-left: 15%;
padding-right: 15%;
}
</style>`;
return style;
}
exports.buildStyle = buildStyle;

3

dist/visualizer/visualizer.d.ts

@@ -1,2 +0,3 @@

export declare function GenerateHtml(schemaModel: string): string;
export declare function GenerateHtmlFromString(schemaModel: string): string;
export declare function GenerateHtmlFromLocalFile(schemaPath: string): string;
export declare function Visualize(schemaModel: string): {

@@ -3,0 +4,0 @@ body: string;

31

dist/visualizer/visualizer.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Visualize = exports.GenerateHtml = void 0;
exports.Visualize = exports.GenerateHtmlFromLocalFile = exports.GenerateHtmlFromString = void 0;
const load_1 = require("@graphql-tools/load");
const graphql_file_loader_1 = require("@graphql-tools/graphql-file-loader");
const html_generator_1 = require("./html-generator");
function GenerateHtml(schemaModel) {
// const schema = loadSchemaSync('src/graphql-examples/example.graphql', {
// loaders: [new GraphQLFileLoader()]
// })
const script_generator_1 = require("./script-generator");
const style_generator_1 = require("./style-generator");
const body_generator_1 = require("./body-generator");
function GenerateHtmlFromString(schemaModel) {
const schema = (0, load_1.loadSchemaSync)(schemaModel, {

@@ -16,3 +17,11 @@ loaders: []

}
exports.GenerateHtml = GenerateHtml;
exports.GenerateHtmlFromString = GenerateHtmlFromString;
function GenerateHtmlFromLocalFile(schemaPath) {
const schema = (0, load_1.loadSchemaSync)(schemaPath, {
loaders: [new graphql_file_loader_1.GraphQLFileLoader()]
});
var html = (0, html_generator_1.generateHtml)(schema);
return html;
}
exports.GenerateHtmlFromLocalFile = GenerateHtmlFromLocalFile;
function Visualize(schemaModel) {

@@ -22,6 +31,6 @@ const schema = (0, load_1.loadSchemaSync)(schemaModel, {

});
var bodyContent = (0, html_generator_1.buildBody)(schema);
var styleContent = (0, html_generator_1.buildStyle)();
var scriptContent = (0, html_generator_1.buildScript)();
var contents = {
var bodyContent = (0, body_generator_1.generateBody)(schema);
var styleContent = (0, style_generator_1.generateStyle)();
var scriptContent = (0, script_generator_1.generateScript)();
var content = {
body: bodyContent,

@@ -31,4 +40,4 @@ style: styleContent,

};
return contents;
return content;
}
exports.Visualize = Visualize;

8

package.json
{
"name": "graphqlvisualizer",
"version": "1.0.2",
"version": "1.0.3",
"description": "",

@@ -13,3 +13,4 @@ "main": "dist/main.js",

"@graphql-tools/graphql-file-loader": "7.5.2",
"@graphql-tools/load": "7.7.4"
"@graphql-tools/load": "7.7.4",
"puppeteer": "^18.0.2"
},

@@ -25,3 +26,4 @@ "devDependencies": {

"webpack": "^5.74.0",
"wepack-cli": "^0.0.1-security"
"wepack-cli": "^0.0.1-security",
"puppeteer": "18.0.2"
},

@@ -28,0 +30,0 @@ "files": [