graphqlvisualizer
Advanced tools
Comparing version
"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); |
@@ -1,1 +0,1 @@ | ||
export { Visualize, GenerateHtml } from './visualizer/visualizer'; | ||
export { Visualize, GenerateHtmlFromString, GenerateHtmlFromLocalFile } from './visualizer/visualizer'; |
"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; } }); |
export declare function generateHtml(schema: any): string; | ||
export declare function buildBody(schema: any): string; | ||
export declare function buildScript(): string; | ||
export declare function buildStyle(): string; |
"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> | ||
 ` + 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; |
@@ -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; |
"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; |
{ | ||
"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": [ |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
22778
54.61%17
54.55%580
40.1%3
50%10
11.11%1
Infinity%+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added