Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

graphiql

Package Overview
Dependencies
Maintainers
2
Versions
559
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

graphiql - npm Package Compare versions

Comparing version 0.8.1 to 0.9.0

dist/components/DocExplorer/Argument.js
dist/components/ToolbarGroup.js
dist/components/ToolbarMenu.js
dist/components/ToolbarSelect.js
dist/info.css
dist/jump.css

161

dist/components/DocExplorer.js

@@ -8,2 +8,4 @@ 'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

@@ -44,7 +46,7 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -77,3 +79,5 @@

_this.handleNavBackClick = function () {
_this.setState({ navStack: _this.state.navStack.slice(0, -1) });
if (_this.state.navStack.length > 1) {
_this.setState({ navStack: _this.state.navStack.slice(0, -1) });
}
};

@@ -86,9 +90,11 @@

_this.handleSearch = function (value) {
_this.showSearch({
name: 'Search Results',
searchValue: value
});
_this.showSearch(value);
};
_this.state = { navStack: [] };
var initialNav = {
name: 'Schema',
title: 'Documentation Explorer'
};
_this.state = { navStack: [initialNav] };
return _this;

@@ -100,3 +106,3 @@ }

value: function shouldComponentUpdate(nextProps, nextState) {
return this.props.schema !== nextProps.schema || this.state.navStack !== nextState.navStack || this.state.searchValue !== nextState.searchValue;
return this.props.schema !== nextProps.schema || this.state.navStack !== nextState.navStack;
}

@@ -108,60 +114,54 @@ }, {

var navStack = this.state.navStack;
var navItem = navStack[navStack.length - 1];
var navItem = void 0;
if (navStack.length > 0) {
navItem = navStack[navStack.length - 1];
}
var title = void 0;
var content = void 0;
if (navItem) {
if (navItem.name === 'Search Results') {
title = navItem.name;
content = _react2.default.createElement(_SearchResults2.default, {
searchValue: navItem.searchValue,
schema: schema,
onClickType: this.handleClickTypeOrField,
onClickField: this.handleClickTypeOrField
});
} else {
title = navItem.name;
if ((0, _graphql.isType)(navItem)) {
content = _react2.default.createElement(_TypeDoc2.default, {
key: navItem.name,
schema: schema,
type: navItem,
onClickType: this.handleClickTypeOrField,
onClickField: this.handleClickTypeOrField
});
} else {
content = _react2.default.createElement(_FieldDoc2.default, {
key: navItem.name,
field: navItem,
onClickType: this.handleClickTypeOrField
});
}
}
} else if (schema) {
title = 'Documentation Explorer';
if (schema === undefined) {
// Schema is undefined when it is being loaded via introspection.
content = _react2.default.createElement(
'div',
{ className: 'spinner-container' },
_react2.default.createElement('div', { className: 'spinner' })
);
} else if (!schema) {
// Schema is null when it explicitly does not exist, typically due to
// an error during introspection.
content = _react2.default.createElement(
'div',
{ className: 'error-container' },
'No Schema Available'
);
} else if (navItem.search) {
content = _react2.default.createElement(_SearchResults2.default, {
searchValue: navItem.search,
withinType: navItem.def,
schema: schema,
onClickType: this.handleClickTypeOrField,
onClickField: this.handleClickTypeOrField
});
} else if (navStack.length === 1) {
content = _react2.default.createElement(_SchemaDoc2.default, { schema: schema, onClickType: this.handleClickTypeOrField });
} else if ((0, _graphql.isType)(navItem.def)) {
content = _react2.default.createElement(_TypeDoc2.default, {
schema: schema,
type: navItem.def,
onClickType: this.handleClickTypeOrField,
onClickField: this.handleClickTypeOrField
});
} else {
content = _react2.default.createElement(_FieldDoc2.default, {
field: navItem.def,
onClickType: this.handleClickTypeOrField
});
}
var shouldSearchBoxAppear = navStack.length === 1 || (0, _graphql.isType)(navItem.def) && navItem.def.getFields;
var prevName = void 0;
if (navStack.length === 1) {
prevName = 'Schema';
} else if (navStack.length > 1) {
if (navStack.length > 1) {
prevName = navStack[navStack.length - 2].name;
}
var spinnerDiv = _react2.default.createElement(
'div',
{ className: 'spinner-container' },
_react2.default.createElement('div', { className: 'spinner' })
);
var shouldSearchBoxAppear = content && (content.type === _SearchResults2.default || content.type === _SchemaDoc2.default);
return _react2.default.createElement(
'div',
{ className: 'doc-explorer' },
{ className: 'doc-explorer', key: navItem.name },
_react2.default.createElement(

@@ -180,3 +180,3 @@ 'div',

{ className: 'doc-explorer-title' },
title
navItem.title || navItem.name
),

@@ -192,7 +192,8 @@ _react2.default.createElement(

{ className: 'doc-explorer-contents' },
_react2.default.createElement(_SearchBox2.default, {
isShown: shouldSearchBoxAppear,
shouldSearchBoxAppear && _react2.default.createElement(_SearchBox2.default, {
value: navItem.search,
placeholder: 'Search ' + navItem.name + '...',
onSearch: this.handleSearch
}),
this.props.schema ? content : spinnerDiv
content
)

@@ -208,8 +209,27 @@ );

var navStack = this.state.navStack;
var isCurrentlyShown = navStack.length > 0 && navStack[navStack.length - 1] === typeOrField;
if (!isCurrentlyShown) {
navStack = navStack.concat([typeOrField]);
var topNav = navStack[navStack.length - 1];
if (topNav.def !== typeOrField) {
this.setState({
navStack: navStack.concat([{
name: typeOrField.name,
def: typeOrField
}])
});
}
}
this.setState({ navStack: navStack });
// Public API
}, {
key: 'showDocForReference',
value: function showDocForReference(reference) {
if (reference.kind === 'Type') {
this.showDoc(reference.type);
} else if (reference.kind === 'Field') {
this.showDoc(reference.field);
} else if (reference.kind === 'Argument' && reference.field) {
this.showDoc(reference.field);
} else if (reference.kind === 'EnumValue' && reference.type) {
this.showDoc(reference.type);
}
}

@@ -221,11 +241,6 @@

key: 'showSearch',
value: function showSearch(searchItem) {
var navStack = this.state.navStack;
var lastEntry = navStack.length > 0 && navStack[navStack.length - 1];
if (!lastEntry) {
navStack = navStack.concat([searchItem]);
} else if (lastEntry.searchValue !== searchItem.searchValue) {
navStack = navStack.slice(0, -1).concat([searchItem]);
}
value: function showSearch(search) {
var navStack = this.state.navStack.slice();
var topNav = navStack[navStack.length - 1];
navStack[navStack.length - 1] = _extends({}, topNav, { search: search });
this.setState({ navStack: navStack });

@@ -232,0 +247,0 @@ }

18

dist/components/DocExplorer/FieldDoc.js

@@ -13,2 +13,6 @@ 'use strict';

var _Argument = require('./Argument');
var _Argument2 = _interopRequireDefault(_Argument);
var _MarkdownContent = require('./MarkdownContent');

@@ -29,7 +33,7 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -75,9 +79,3 @@

null,
_react2.default.createElement(
'span',
{ className: 'arg-name' },
arg.name
),
': ',
_react2.default.createElement(_TypeLink2.default, { type: arg.type, onClick: _this2.props.onClickType })
_react2.default.createElement(_Argument2.default, { arg: arg, onClickType: _this2.props.onClickType })
),

@@ -101,3 +99,3 @@ _react2.default.createElement(_MarkdownContent2.default, {

field.deprecationReason && _react2.default.createElement(_MarkdownContent2.default, {
className: 'doc-alert-text',
className: 'doc-deprecation',
markdown: field.deprecationReason

@@ -104,0 +102,0 @@ }),

4

dist/components/DocExplorer/MarkdownContent.js

@@ -24,7 +24,7 @@ 'use strict';

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -31,0 +31,0 @@

4

dist/components/DocExplorer/SchemaDoc.js

@@ -28,7 +28,7 @@ 'use strict';

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -35,0 +35,0 @@

50

dist/components/DocExplorer/SearchBox.js

@@ -24,7 +24,7 @@ 'use strict';

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -41,11 +41,14 @@

_this.handleChange = function (event) {
_this.setState({ value: event.target.value });
_this._debouncedOnSearch();
var value = event.target.value;
_this.setState({ value: value });
_this.debouncedOnSearch(value);
};
_this.state = { value: '' };
_this.handleClear = function () {
_this.setState({ value: '' });
_this.props.onSearch('');
};
_this._debouncedOnSearch = (0, _debounce2.default)(200, function () {
_this.props.onSearch(_this.state.value);
});
_this.state = { value: props.value || '' };
_this.debouncedOnSearch = (0, _debounce2.default)(200, _this.props.onSearch);
return _this;

@@ -55,21 +58,17 @@ }

_createClass(SearchBox, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return nextProps.isShown !== this.props.isShown || nextState.value !== this.state.value;
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
this.props.isShown && _react2.default.createElement(
'label',
{ className: 'search-box-outer' },
_react2.default.createElement('input', { className: 'search-box-input',
onChange: this.handleChange,
type: 'text',
value: this.state.value,
placeholder: 'Search the schema ...'
})
'label',
{ className: 'search-box' },
_react2.default.createElement('input', {
value: this.state.value,
onChange: this.handleChange,
type: 'text',
placeholder: this.props.placeholder
}),
this.state.value && _react2.default.createElement(
'div',
{ className: 'search-box-clear', onClick: this.handleClear },
'\u2715'
)

@@ -84,5 +83,6 @@ );

SearchBox.propTypes = {
isShown: _react.PropTypes.bool,
value: _react.PropTypes.string,
placeholder: _react.PropTypes.string,
onSearch: _react.PropTypes.func
};
exports.default = SearchBox;

194

dist/components/DocExplorer/SearchResults.js

@@ -13,2 +13,6 @@ 'use strict';

var _Argument = require('./Argument');
var _Argument2 = _interopRequireDefault(_Argument);
var _TypeLink = require('./TypeLink');

@@ -25,7 +29,7 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -50,5 +54,4 @@

value: function render() {
var _this2 = this;
var searchValue = this.props.searchValue;
var withinType = this.props.withinType;
var schema = this.props.schema;

@@ -58,8 +61,17 @@ var onClickType = this.props.onClickType;

var typeMap = schema.getTypeMap();
var matchedWithin = [];
var matchedTypes = [];
var matchedFields = [];
var typeMap = schema.getTypeMap();
var typeNames = Object.keys(typeMap);
// Move the within type name to be the first searched.
if (withinType) {
typeNames = typeNames.filter(function (n) {
return n !== withinType.name;
});
typeNames.unshift(withinType.name);
}
var _iteratorNormalCompletion = true;

@@ -73,3 +85,3 @@ var _didIteratorError = false;

if (matchedTypes.length + matchedFields.length >= 100) {
if (matchedWithin.length + matchedTypes.length + matchedFields.length >= 100) {
return 'break';

@@ -79,11 +91,6 @@ }

var type = typeMap[typeName];
var matchedOn = [];
if (_this2._isMatch(typeName, searchValue)) {
matchedOn.push('Type Name');
}
if (matchedOn.length) {
if (withinType !== type && isMatch(typeName, searchValue)) {
matchedTypes.push(_react2.default.createElement(
'div',
{ className: 'doc-category-item' },
{ className: 'doc-category-item', key: typeName },
_react2.default.createElement(_TypeLink2.default, { type: type, onClick: onClickType })

@@ -98,57 +105,48 @@ ));

var field = fields[fieldName];
if (_this2._isMatch(fieldName, searchValue)) {
matchedFields.push(_react2.default.createElement(
'div',
{ className: 'doc-category-item' },
_react2.default.createElement(
'a',
{ className: 'field-name',
onClick: function onClick(event) {
return onClickField(field, type, event);
} },
field.name
),
' on ',
_react2.default.createElement(_TypeLink2.default, { type: type, onClick: onClickType })
));
} else if (field.args && field.args.length) {
var matches = field.args.filter(function (arg) {
return _this2._isMatch(arg.name, searchValue);
});
if (matches.length > 0) {
matchedFields.push(_react2.default.createElement(
'div',
{ className: 'doc-category-item' },
_react2.default.createElement(
'a',
{ className: 'field-name',
onClick: function onClick(event) {
return onClickField(field, type, event);
} },
field.name
),
'(',
_react2.default.createElement(
'span',
null,
matches.map(function (arg) {
return _react2.default.createElement(
'span',
{ className: 'arg', key: arg.name },
_react2.default.createElement(
'span',
{ className: 'arg-name' },
arg.name
),
': ',
_react2.default.createElement(_TypeLink2.default, { type: arg.type, onClick: onClickType })
);
})
),
')',
' on ',
_react2.default.createElement(_TypeLink2.default, { type: type, onClick: onClickType })
));
var matchingArgs = void 0;
if (!isMatch(fieldName, searchValue)) {
if (field.args && field.args.length) {
matchingArgs = field.args.filter(function (arg) {
return isMatch(arg.name, searchValue);
});
if (matchingArgs.length === 0) {
return;
}
} else {
return;
}
}
var match = _react2.default.createElement(
'div',
{ className: 'doc-category-item', key: typeName + '.' + fieldName },
withinType !== type && [_react2.default.createElement(_TypeLink2.default, { key: 'type', type: type, onClick: onClickType }), '.'],
_react2.default.createElement(
'a',
{ className: 'field-name',
onClick: function onClick(event) {
return onClickField(field, type, event);
} },
field.name
),
matchingArgs && ['(', _react2.default.createElement(
'span',
{ key: 'args' },
matchingArgs.map(function (arg) {
return _react2.default.createElement(_Argument2.default, {
key: arg.name,
arg: arg,
onClickType: onClickType,
showDefaultValue: false
});
})
), ')']
);
if (withinType === type) {
matchedWithin.push(match);
} else {
matchedFields.push(match);
}
});

@@ -179,3 +177,3 @@ })();

if (matchedTypes.length === 0 && matchedFields.length === 0) {
if (matchedWithin.length + matchedTypes.length + matchedFields.length === 0) {
return _react2.default.createElement(

@@ -188,30 +186,29 @@ 'span',

if (withinType && matchedTypes.length + matchedFields.length > 0) {
return _react2.default.createElement(
'div',
null,
matchedWithin,
_react2.default.createElement(
'div',
{ className: 'doc-category' },
_react2.default.createElement(
'div',
{ className: 'doc-category-title' },
'other results'
),
matchedTypes,
matchedFields
)
);
}
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ className: 'doc-category' },
(matchedTypes.length > 0 || matchedFields.length > 0) && _react2.default.createElement(
'div',
{ className: 'doc-category-title' },
'search results'
),
matchedTypes,
matchedFields
)
matchedWithin,
matchedTypes,
matchedFields
);
}
}, {
key: '_isMatch',
value: function _isMatch(sourceText, searchValue) {
try {
var escaped = searchValue.replace(/[^_0-9A-Za-z]/g, function (ch) {
return '\\' + ch;
});
return sourceText.search(new RegExp(escaped, 'i')) !== -1;
} catch (e) {
return sourceText.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
}
}
}]);

@@ -224,2 +221,3 @@

schema: _react.PropTypes.object,
withinType: _react.PropTypes.object,
searchValue: _react.PropTypes.string,

@@ -229,2 +227,14 @@ onClickType: _react.PropTypes.func,

};
exports.default = SearchResults;
exports.default = SearchResults;
function isMatch(sourceText, searchValue) {
try {
var escaped = searchValue.replace(/[^_0-9A-Za-z]/g, function (ch) {
return '\\' + ch;
});
return sourceText.search(new RegExp(escaped, 'i')) !== -1;
} catch (e) {
return sourceText.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
}
}

236

dist/components/DocExplorer/TypeDoc.js

@@ -15,2 +15,6 @@ 'use strict';

var _Argument = require('./Argument');
var _Argument2 = _interopRequireDefault(_Argument);
var _MarkdownContent = require('./MarkdownContent');

@@ -31,7 +35,7 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -42,6 +46,13 @@

function TypeDoc() {
function TypeDoc(props) {
_classCallCheck(this, TypeDoc);
return _possibleConstructorReturn(this, (TypeDoc.__proto__ || Object.getPrototypeOf(TypeDoc)).apply(this, arguments));
var _this = _possibleConstructorReturn(this, (TypeDoc.__proto__ || Object.getPrototypeOf(TypeDoc)).call(this, props));
_this.handleShowDeprecated = function () {
return _this.setState({ showDeprecated: true });
};
_this.state = { showDeprecated: false };
return _this;
}

@@ -51,4 +62,4 @@

key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return this.props.type !== nextProps.type || this.props.schema !== nextProps.schema;
value: function shouldComponentUpdate(nextProps, nextState) {
return this.props.type !== nextProps.type || this.props.schema !== nextProps.schema || this.state.showDeprecated !== nextState.showDeprecated;
}

@@ -58,2 +69,4 @@ }, {

value: function render() {
var _this2 = this;
var schema = this.props.schema;

@@ -99,2 +112,3 @@ var type = this.props.type;

var fieldsDef = void 0;
var deprecatedFieldsDef = void 0;
if (type.getFields) {

@@ -114,49 +128,42 @@ (function () {

),
fields.map(function (field) {
fields.filter(function (field) {
return !field.isDeprecated;
}).map(function (field) {
return _react2.default.createElement(Field, {
key: field.name,
type: type,
field: field,
onClickType: onClickType,
onClickField: onClickField
});
})
);
// Field arguments
var argsDef = void 0;
if (field.args && field.args.length > 0) {
argsDef = field.args.map(function (arg) {
return _react2.default.createElement(
'span',
{ className: 'arg', key: arg.name },
_react2.default.createElement(
'span',
{ className: 'arg-name' },
arg.name
),
': ',
_react2.default.createElement(_TypeLink2.default, { type: arg.type, onClick: onClickType })
);
var deprecatedFields = fields.filter(function (field) {
return field.isDeprecated;
});
if (deprecatedFields.length > 0) {
deprecatedFieldsDef = _react2.default.createElement(
'div',
{ className: 'doc-category' },
_react2.default.createElement(
'div',
{ className: 'doc-category-title' },
'deprecated fields'
),
!_this2.state.showDeprecated ? _react2.default.createElement(
'button',
{ className: 'show-btn', onClick: _this2.handleShowDeprecated },
'Show deprecated fields...'
) : deprecatedFields.map(function (field) {
return _react2.default.createElement(Field, {
key: field.name,
type: type,
field: field,
onClickType: onClickType,
onClickField: onClickField
});
}
return _react2.default.createElement(
'div',
{ key: field.name, className: 'doc-category-item' },
_react2.default.createElement(
'a',
{
className: 'field-name',
onClick: function onClick(event) {
return onClickField(field, type, event);
} },
field.name
),
argsDef && ['(', _react2.default.createElement(
'span',
{ key: 'args' },
argsDef
), ')'],
': ',
_react2.default.createElement(_TypeLink2.default, { type: field.type, onClick: onClickType }),
(field.isDeprecated || field.deprecationReason) && _react2.default.createElement(
'span',
{ className: 'doc-alert-text' },
' (DEPRECATED)'
)
);
})
);
})
);
}
})();

@@ -166,3 +173,5 @@ }

var valuesDef = void 0;
var deprecatedValuesDef = void 0;
if (type instanceof _graphql.GraphQLEnumType) {
var values = type.getValues();
valuesDef = _react2.default.createElement(

@@ -176,27 +185,30 @@ 'div',

),
type.getValues().map(function (value) {
return _react2.default.createElement(
'div',
{ key: value.name, className: 'doc-category-item' },
_react2.default.createElement(
'div',
{ className: 'enum-value' },
value.name,
(value.isDeprecated || value.deprecationReason) && _react2.default.createElement(
'span',
{ className: 'doc-alert-text' },
' (DEPRECATED)'
)
),
_react2.default.createElement(_MarkdownContent2.default, {
className: 'doc-value-description',
markdown: value.description
}),
value.deprecationReason && _react2.default.createElement(_MarkdownContent2.default, {
className: 'doc-alert-text',
markdown: value.deprecationReason
})
);
values.filter(function (value) {
return !value.isDeprecated;
}).map(function (value) {
return _react2.default.createElement(EnumValue, { key: value.name, value: value });
})
);
var deprecatedValues = values.filter(function (value) {
return value.isDeprecated;
});
if (deprecatedValues.length > 0) {
deprecatedValuesDef = _react2.default.createElement(
'div',
{ className: 'doc-category' },
_react2.default.createElement(
'div',
{ className: 'doc-category-title' },
'deprecated values'
),
!this.state.showDeprecated ? _react2.default.createElement(
'button',
{ className: 'show-btn', onClick: this.handleShowDeprecated },
'Show deprecated values...'
) : deprecatedValues.map(function (value) {
return _react2.default.createElement(EnumValue, { key: value.name, value: value });
})
);
}
}

@@ -213,3 +225,5 @@

fieldsDef,
deprecatedFieldsDef,
valuesDef,
deprecatedValuesDef,
!(type instanceof _graphql.GraphQLObjectType) && typesDef

@@ -229,2 +243,74 @@ );

};
exports.default = TypeDoc;
exports.default = TypeDoc;
function Field(_ref) {
var type = _ref.type,
field = _ref.field,
onClickType = _ref.onClickType,
onClickField = _ref.onClickField;
return _react2.default.createElement(
'div',
{ className: 'doc-category-item' },
_react2.default.createElement(
'a',
{
className: 'field-name',
onClick: function onClick(event) {
return onClickField(field, type, event);
} },
field.name
),
field.args && field.args.length > 0 && ['(', _react2.default.createElement(
'span',
{ key: 'args' },
field.args.map(function (arg) {
return _react2.default.createElement(_Argument2.default, {
key: arg.name,
arg: arg,
onClickType: onClickType
});
})
), ')'],
': ',
_react2.default.createElement(_TypeLink2.default, { type: field.type, onClick: onClickType }),
field.deprecationReason && _react2.default.createElement(_MarkdownContent2.default, {
className: 'doc-deprecation',
markdown: field.deprecationReason
})
);
}
Field.propTypes = {
type: _react.PropTypes.object,
field: _react.PropTypes.object,
onClickType: _react.PropTypes.func,
onClickField: _react.PropTypes.func
};
function EnumValue(_ref2) {
var value = _ref2.value;
return _react2.default.createElement(
'div',
{ className: 'doc-category-item' },
_react2.default.createElement(
'div',
{ className: 'enum-value' },
value.name
),
_react2.default.createElement(_MarkdownContent2.default, {
className: 'doc-value-description',
markdown: value.description
}),
value.deprecationReason && _react2.default.createElement(_MarkdownContent2.default, {
className: 'doc-deprecation',
markdown: value.deprecationReason
})
);
}
EnumValue.propTypes = {
value: _react.PropTypes.object
};

4

dist/components/DocExplorer/TypeLink.js

@@ -22,7 +22,7 @@ 'use strict';

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -29,0 +29,0 @@

4

dist/components/ExecuteButton.js

@@ -21,7 +21,7 @@ 'use strict';

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -28,0 +28,0 @@

297

dist/components/GraphiQL.js

@@ -28,2 +28,8 @@ 'use strict';

var _ToolbarGroup = require('./ToolbarGroup');
var _ToolbarMenu = require('./ToolbarMenu');
var _ToolbarSelect = require('./ToolbarSelect');
var _QueryEditor = require('./QueryEditor');

@@ -70,7 +76,7 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -145,8 +151,12 @@

value: function componentDidMount() {
// Ensure a form of a schema exists (including `null`) and
// if not, fetch one using an introspection query.
this._ensureOfSchema();
// Only fetch schema via introspection if a schema has not been
// provided, including if `null` was provided.
if (this.state.schema === undefined) {
this._fetchSchema();
}
// Utility for keeping CodeMirror correctly sized.
this.codeMirrorSizer = new _CodeMirrorSizer2.default();
global.g = this;
}

@@ -156,2 +166,4 @@ }, {

value: function componentWillReceiveProps(nextProps) {
var _this2 = this;
var nextSchema = this.state.schema;

@@ -182,2 +194,8 @@ var nextQuery = this.state.query;

// If schema is not supplied via props and the fetcher changed, then
// remove the schema so fetchSchema() will be called with the new fetcher.
if (nextProps.schema === undefined && nextProps.fetcher !== this.props.fetcher) {
nextSchema = undefined;
}
this.setState({

@@ -189,2 +207,6 @@ schema: nextSchema,

response: nextResponse
}, function () {
if (_this2.state.schema === undefined) {
_this2._fetchSchema();
}
});

@@ -207,3 +229,3 @@ }

this._storageSet('query', this.state.query);
this._storageSet('variables', this.state.variables || '');
this._storageSet('variables', this.state.variables);
this._storageSet('operationName', this.state.operationName);

@@ -218,3 +240,3 @@ this._storageSet('editorFlex', this.state.editorFlex);

value: function render() {
var _this2 = this;
var _this3 = this;

@@ -229,3 +251,11 @@ var children = _react2.default.Children.toArray(this.props.children);

return child.type === GraphiQL.Toolbar;
}) || _react2.default.createElement(GraphiQL.Toolbar, null);
}) || _react2.default.createElement(
GraphiQL.Toolbar,
null,
_react2.default.createElement(_ToolbarButton.ToolbarButton, {
onClick: this.handlePrettifyQuery,
title: 'Prettify Query',
label: 'Prettify'
})
);

@@ -271,7 +301,2 @@ var footer = (0, _find2.default)(children, function (child) {

}),
_react2.default.createElement(GraphiQL.ToolbarButton, {
onClick: this.handlePrettifyQuery,
title: 'Prettify Query',
label: 'Prettify'
}),
toolbar

@@ -291,3 +316,3 @@ ),

ref: function ref(n) {
_this2.editorBarComponent = n;
_this3.editorBarComponent = n;
},

@@ -301,3 +326,3 @@ className: 'editorBar',

ref: function ref(n) {
_this2.queryEditorComponent = n;
_this3.queryEditorComponent = n;
},

@@ -308,2 +333,3 @@ schema: this.state.schema,

onHintInformationRender: this.handleHintInformationRender,
onClickReference: this.handleClickReference,
onRunQuery: this.handleEditorRunQuery

@@ -324,3 +350,3 @@ }),

ref: function ref(n) {
_this2.variableEditorComponent = n;
_this3.variableEditorComponent = n;
},

@@ -345,3 +371,3 @@ value: this.state.variables,

ref: function ref(c) {
_this2.resultComponent = c;
_this3.resultComponent = c;
},

@@ -365,3 +391,3 @@ value: this.state.response

ref: function ref(c) {
_this2.docExplorerComponent = c;
_this3.docExplorerComponent = c;
},

@@ -380,2 +406,40 @@ schema: this.state.schema },

/**
* Get the query editor CodeMirror instance.
*
* @public
*/
}, {
key: 'getQueryEditor',
value: function getQueryEditor() {
return this.queryEditorComponent.getCodeMirror();
}
/**
* Get the variable editor CodeMirror instance.
*
* @public
*/
}, {
key: 'getVariableEditor',
value: function getVariableEditor() {
return this.variableEditorComponent.getCodeMirror();
}
/**
* Refresh all CodeMirror instances.
*
* @public
*/
}, {
key: 'refresh',
value: function refresh() {
this.queryEditorComponent.getCodeMirror().refresh();
this.variableEditorComponent.getCodeMirror().refresh();
this.resultComponent.getCodeMirror().refresh();
}
/**
* Inspect the query, automatically filling in selection sets for non-leaf

@@ -390,3 +454,3 @@ * fields which do not yet have them.

value: function autoCompleteLeafs() {
var _this3 = this;
var _this4 = this;

@@ -399,3 +463,3 @@ var _fillLeafs = (0, _fillLeafs2.fillLeafs)(this.state.schema, this.state.query, this.props.getDefaultFieldNames),

(function () {
var editor = _this3.queryEditorComponent.getCodeMirror();
var editor = _this4.getQueryEditor();
editor.operation(function () {

@@ -440,11 +504,6 @@ var cursor = editor.getCursor();

}, {
key: '_ensureOfSchema',
value: function _ensureOfSchema() {
var _this4 = this;
key: '_fetchSchema',
value: function _fetchSchema() {
var _this5 = this;
// Only perform introspection if a schema is not provided (undefined)
if (this.state.schema !== undefined) {
return;
}
var fetcher = this.props.fetcher;

@@ -478,3 +537,3 @@

// provided schema.
if (_this4.state.schema !== undefined) {
if (_this5.state.schema !== undefined) {
return;

@@ -485,10 +544,17 @@ }

var schema = (0, _graphql.buildClientSchema)(result.data);
var queryFacts = (0, _getQueryFacts2.default)(schema, _this4.state.query);
_this4.setState(_extends({ schema: schema }, queryFacts));
var queryFacts = (0, _getQueryFacts2.default)(schema, _this5.state.query);
_this5.setState(_extends({ schema: schema }, queryFacts));
} else {
var responseString = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
_this4.setState({ response: responseString });
_this5.setState({
// Set schema to `null` to explicitly indicate that no schema exists.
schema: null,
response: responseString
});
}
}).catch(function (error) {
_this4.setState({ response: error && String(error.stack || error) });
_this5.setState({
schema: null,
response: error && String(error.stack || error)
});
});

@@ -499,3 +565,11 @@ }

value: function _storageGet(name) {
return this._storage && this._storage.getItem('graphiql:' + name);
if (this._storage) {
var value = this._storage.getItem('graphiql:' + name);
// Clean up any inadvertently saved null/undefined values.
if (value === 'null' || value === 'undefined') {
this._storage.removeItem('graphiql:' + name);
} else {
return value;
}
}
}

@@ -506,3 +580,7 @@ }, {

if (this._storage) {
this._storage.setItem('graphiql:' + name, value);
if (value) {
this._storage.setItem('graphiql:' + name, value);
} else {
this._storage.removeItem('graphiql:' + name);
}
}

@@ -513,3 +591,3 @@ }

value: function _fetchQuery(query, variables, operationName, cb) {
var _this5 = this;
var _this6 = this;

@@ -539,3 +617,3 @@ var fetcher = this.props.fetcher;

fetch.then(cb).catch(function (error) {
_this5.setState({
_this6.setState({
isWaitingForResponse: false,

@@ -552,3 +630,3 @@ response: error && String(error.stack || error)

error: function error(_error) {
_this5.setState({
_this6.setState({
isWaitingForResponse: false,

@@ -560,3 +638,3 @@ response: _error && String(_error.stack || _error),

complete: function complete() {
_this5.setState({
_this6.setState({
isWaitingForResponse: false,

@@ -584,3 +662,3 @@ subscription: null

if (operations) {
var editor = this.queryEditorComponent.getCodeMirror();
var editor = this.getQueryEditor();
if (editor.hasFocus()) {

@@ -653,7 +731,13 @@ var cursor = editor.getCursor();

var _initialiseProps = function _initialiseProps() {
var _this6 = this;
var _this7 = this;
this.handleClickReference = function (reference) {
_this7.setState({ docExplorerOpen: true }, function () {
_this7.docExplorerComponent.showDocForReference(reference);
});
};
this.handleRunQuery = function (selectedOperationName) {
_this6._editorQueryID++;
var queryID = _this6._editorQueryID;
_this7._editorQueryID++;
var queryID = _this7._editorQueryID;

@@ -663,5 +747,5 @@ // Use the edited query after autoCompleteLeafs() runs or,

// the current query from the editor.
var editedQuery = _this6.autoCompleteLeafs() || _this6.state.query;
var variables = _this6.state.variables;
var operationName = _this6.state.operationName;
var editedQuery = _this7.autoCompleteLeafs() || _this7.state.query;
var variables = _this7.state.variables;
var operationName = _this7.state.operationName;

@@ -672,3 +756,3 @@ // If an operation was explicitly provided, different from the current

operationName = selectedOperationName;
var onEditOperationName = _this6.props.onEditOperationName;
var onEditOperationName = _this7.props.onEditOperationName;
if (onEditOperationName) {

@@ -680,3 +764,3 @@ onEditOperationName(operationName);

try {
_this6.setState({
_this7.setState({
isWaitingForResponse: true,

@@ -688,5 +772,5 @@ response: null,

// _fetchQuery may return a subscription.
var subscription = _this6._fetchQuery(editedQuery, variables, operationName, function (result) {
if (queryID === _this6._editorQueryID) {
_this6.setState({
var subscription = _this7._fetchQuery(editedQuery, variables, operationName, function (result) {
if (queryID === _this7._editorQueryID) {
_this7.setState({
isWaitingForResponse: false,

@@ -698,5 +782,5 @@ response: JSON.stringify(result, null, 2)

_this6.setState({ subscription: subscription });
_this7.setState({ subscription: subscription });
} catch (error) {
_this6.setState({
_this7.setState({
isWaitingForResponse: false,

@@ -709,4 +793,4 @@ response: error.message

this.handleStopQuery = function () {
var subscription = _this6.state.subscription;
_this6.setState({
var subscription = _this7.state.subscription;
_this7.setState({
isWaitingForResponse: false,

@@ -721,39 +805,38 @@ subscription: null

this.handlePrettifyQuery = function () {
var query = (0, _graphql.print)((0, _graphql.parse)(_this6.state.query));
var editor = _this6.queryEditorComponent.getCodeMirror();
editor.setValue(query);
var editor = _this7.getQueryEditor();
editor.setValue((0, _graphql.print)((0, _graphql.parse)(editor.getValue())));
};
this.handleEditQuery = function (value) {
if (_this6.state.schema) {
_this6._updateQueryFacts(value);
this.handleEditQuery = (0, _debounce2.default)(100, function (value) {
if (_this7.state.schema) {
_this7._updateQueryFacts(value);
}
_this6.setState({ query: value });
if (_this6.props.onEditQuery) {
return _this6.props.onEditQuery(value);
_this7.setState({ query: value });
if (_this7.props.onEditQuery) {
return _this7.props.onEditQuery(value);
}
};
});
this._updateQueryFacts = (0, _debounce2.default)(150, function (query) {
var queryFacts = (0, _getQueryFacts2.default)(_this6.state.schema, query);
this._updateQueryFacts = function (query) {
var queryFacts = (0, _getQueryFacts2.default)(_this7.state.schema, query);
if (queryFacts) {
// Update operation name should any query names change.
var operationName = (0, _getSelectedOperationName2.default)(_this6.state.operations, _this6.state.operationName, queryFacts.operations);
var operationName = (0, _getSelectedOperationName2.default)(_this7.state.operations, _this7.state.operationName, queryFacts.operations);
// Report changing of operationName if it changed.
var onEditOperationName = _this6.props.onEditOperationName;
if (onEditOperationName && operationName !== _this6.state.operationName) {
var onEditOperationName = _this7.props.onEditOperationName;
if (onEditOperationName && operationName !== _this7.state.operationName) {
onEditOperationName(operationName);
}
_this6.setState(_extends({
_this7.setState(_extends({
operationName: operationName
}, queryFacts));
}
});
};
this.handleEditVariables = function (value) {
_this6.setState({ variables: value });
if (_this6.props.onEditVariables) {
_this6.props.onEditVariables(value);
_this7.setState({ variables: value });
if (_this7.props.onEditVariables) {
_this7.props.onEditVariables(value);
}

@@ -763,3 +846,3 @@ };

this.handleHintInformationRender = function (elem) {
elem.addEventListener('click', _this6._onClickHintInformation);
elem.addEventListener('click', _this7._onClickHintInformation);

@@ -769,3 +852,3 @@ var _onRemoveFn = void 0;

elem.removeEventListener('DOMNodeRemoved', _onRemoveFn);
elem.removeEventListener('click', _this6._onClickHintInformation);
elem.removeEventListener('click', _this7._onClickHintInformation);
});

@@ -775,3 +858,3 @@ };

this.handleEditorRunQuery = function () {
_this6._runQueryAtCursor();
_this7._runQueryAtCursor();
};

@@ -782,3 +865,3 @@

var typeName = event.target.innerHTML;
var schema = _this6.state.schema;
var schema = _this7.state.schema;
if (schema) {

@@ -788,4 +871,4 @@ (function () {

if (type) {
_this6.setState({ docExplorerOpen: true }, function () {
_this6.docExplorerComponent.showDoc(type);
_this7.setState({ docExplorerOpen: true }, function () {
_this7.docExplorerComponent.showDoc(type);
});

@@ -799,10 +882,10 @@ }

this.handleToggleDocs = function () {
if (typeof _this6.props.onToggleDocs === 'function') {
_this6.props.onToggleDocs(!_this6.state.docExplorerOpen);
if (typeof _this7.props.onToggleDocs === 'function') {
_this7.props.onToggleDocs(!_this7.state.docExplorerOpen);
}
_this6.setState({ docExplorerOpen: !_this6.state.docExplorerOpen });
_this7.setState({ docExplorerOpen: !_this7.state.docExplorerOpen });
};
this.handleResizeStart = function (downEvent) {
if (!_this6._didClickDragBar(downEvent)) {
if (!_this7._didClickDragBar(downEvent)) {
return;

@@ -820,6 +903,6 @@ }

var editorBar = _reactDom2.default.findDOMNode(_this6.editorBarComponent);
var editorBar = _reactDom2.default.findDOMNode(_this7.editorBarComponent);
var leftSize = moveEvent.clientX - (0, _elementPosition.getLeft)(editorBar) - offset;
var rightSize = editorBar.clientWidth - leftSize;
_this6.setState({ editorFlex: leftSize / rightSize });
_this7.setState({ editorFlex: leftSize / rightSize });
};

@@ -851,3 +934,3 @@

var hadWidth = _this6.state.docExplorerWidth;
var hadWidth = _this7.state.docExplorerWidth;
var offset = downEvent.clientX - (0, _elementPosition.getLeft)(downEvent.target);

@@ -860,3 +943,3 @@

var app = _reactDom2.default.findDOMNode(_this6);
var app = _reactDom2.default.findDOMNode(_this7);
var cursorPos = moveEvent.clientX - (0, _elementPosition.getLeft)(app) - offset;

@@ -866,5 +949,5 @@ var docsSize = app.clientWidth - cursorPos;

if (docsSize < 100) {
_this6.setState({ docExplorerOpen: false });
_this7.setState({ docExplorerOpen: false });
} else {
_this6.setState({
_this7.setState({
docExplorerOpen: true,

@@ -887,4 +970,4 @@ docExplorerWidth: Math.min(docsSize, 650)

}(function () {
if (!_this6.state.docExplorerOpen) {
_this6.setState({ docExplorerWidth: hadWidth });
if (!_this7.state.docExplorerOpen) {
_this7.setState({ docExplorerWidth: hadWidth });
}

@@ -906,4 +989,4 @@

var didMove = false;
var wasOpen = _this6.state.variableEditorOpen;
var hadHeight = _this6.state.variableEditorHeight;
var wasOpen = _this7.state.variableEditorOpen;
var hadHeight = _this7.state.variableEditorHeight;
var offset = downEvent.clientY - (0, _elementPosition.getTop)(downEvent.target);

@@ -918,7 +1001,7 @@

var editorBar = _reactDom2.default.findDOMNode(_this6.editorBarComponent);
var editorBar = _reactDom2.default.findDOMNode(_this7.editorBarComponent);
var topSize = moveEvent.clientY - (0, _elementPosition.getTop)(editorBar) - offset;
var bottomSize = editorBar.clientHeight - topSize;
if (bottomSize < 60) {
_this6.setState({
_this7.setState({
variableEditorOpen: false,

@@ -928,3 +1011,3 @@ variableEditorHeight: hadHeight

} else {
_this6.setState({
_this7.setState({
variableEditorOpen: true,

@@ -948,3 +1031,3 @@ variableEditorHeight: bottomSize

if (!didMove) {
_this6.setState({ variableEditorOpen: !wasOpen });
_this7.setState({ variableEditorOpen: !wasOpen });
}

@@ -991,4 +1074,16 @@

// Add a button to the Toolbar.
GraphiQL.ToolbarButton = _ToolbarButton.ToolbarButton;
GraphiQL.Button = _ToolbarButton.ToolbarButton;
GraphiQL.ToolbarButton = _ToolbarButton.ToolbarButton; // Don't break existing API.
// Add a group of buttons to the Toolbar
GraphiQL.Group = _ToolbarGroup.ToolbarGroup;
// Add a menu of items to the Toolbar.
GraphiQL.Menu = _ToolbarMenu.ToolbarMenu;
GraphiQL.MenuItem = _ToolbarMenu.ToolbarMenuItem;
// Add a select-option input to the Toolbar.
GraphiQL.Select = _ToolbarSelect.ToolbarSelect;
GraphiQL.SelectOption = _ToolbarSelect.ToolbarSelectOption;
// Configure the UI by providing this Component as a child of GraphiQL.

@@ -1003,3 +1098,3 @@ GraphiQL.Footer = function GraphiQLFooter(props) {

var defaultQuery = '# Welcome to GraphiQL\n#\n# GraphiQL is an in-browser IDE for writing, validating, and\n# testing GraphQL queries.\n#\n# Type queries into this side of the screen, and you will\n# see intelligent typeaheads aware of the current GraphQL type schema and\n# live syntax and validation errors highlighted within the text.\n#\n# To bring up the auto-complete at any point, just press Ctrl-Space.\n#\n# Press the run button above, or Cmd-Enter to execute the query, and the result\n# will appear in the pane to the right.\n\n';
var defaultQuery = '# Welcome to GraphiQL\n#\n# GraphiQL is an in-browser tool for writing, validating, and\n# testing GraphQL queries.\n#\n# Type queries into this side of the screen, and you will see intelligent\n# typeaheads aware of the current GraphQL type schema and live syntax and\n# validation errors highlighted within the text.\n#\n# GraphQL queries typically start with a "{" character. Lines that starts\n# with a # are ignored.\n#\n# An example GraphQL query might look like:\n#\n# {\n# field(arg: "value") {\n# subField\n# }\n# }\n#\n# Keyboard shortcuts:\n#\n# Run Query: Ctrl-Enter (or press the play button above)\n#\n# Auto Complete: Ctrl-Space (or just start typing)\n#\n\n';

@@ -1006,0 +1101,0 @@ // Duck-type promise detection.

28

dist/components/QueryEditor.js

@@ -16,2 +16,6 @@ 'use strict';

var _marked = require('marked');
var _marked2 = _interopRequireDefault(_marked);
var _onHasCompletion = require('../utility/onHasCompletion');

@@ -28,7 +32,7 @@

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -106,2 +110,4 @@

require('codemirror-graphql/lint');
require('codemirror-graphql/info');
require('codemirror-graphql/jump');
require('codemirror-graphql/mode');

@@ -130,2 +136,17 @@

},
info: {
schema: this.props.schema,
renderDescription: function renderDescription(text) {
return (0, _marked2.default)(text, { sanitize: true });
},
onClick: function onClick(reference) {
return _this2.props.onClickReference(reference);
}
},
jump: {
schema: this.props.schema,
onClick: function onClick(reference) {
return _this2.props.onClickReference(reference);
}
},
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],

@@ -181,2 +202,4 @@ extraKeys: {

this.editor.options.hintOptions.schema = this.props.schema;
this.editor.options.info.schema = this.props.schema;
this.editor.options.jump.schema = this.props.schema;
CodeMirror.signal(this.editor, 'change', this.editor);

@@ -247,3 +270,4 @@ }

onHintInformationRender: _react.PropTypes.func,
onClickReference: _react.PropTypes.func,
onRunQuery: _react.PropTypes.func
};

4

dist/components/ResultViewer.js

@@ -21,7 +21,7 @@ 'use strict';

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -28,0 +28,0 @@

12

dist/components/ToolbarButton.js

@@ -21,7 +21,7 @@ 'use strict';

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -65,2 +65,3 @@

className: 'toolbar-button' + (error ? ' error' : ''),
onMouseDown: preventDefault,
onClick: this.handleClick,

@@ -80,2 +81,7 @@ title: error ? error.message : this.props.title },

label: _react.PropTypes.string
};
};
function preventDefault(e) {
e.preventDefault();
}

4

dist/components/VariableEditor.js

@@ -25,7 +25,7 @@ 'use strict';

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -32,0 +32,0 @@

4

dist/index.js
'use strict';
/**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -10,0 +10,0 @@

4

dist/utility/CodeMirrorSizer.js

@@ -12,7 +12,7 @@ "use strict";

/**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -19,0 +19,0 @@

4

dist/utility/debounce.js

@@ -8,7 +8,7 @@ "use strict";

/**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -15,0 +15,0 @@

4

dist/utility/elementPosition.js

@@ -9,7 +9,7 @@ "use strict";

/**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -16,0 +16,0 @@

4

dist/utility/fillLeafs.js

@@ -67,7 +67,7 @@ 'use strict';

/**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -74,0 +74,0 @@

7

dist/utility/find.js

@@ -10,8 +10,7 @@ "use strict";

/**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
* This source code is licensed under the license found in the
* LICENSE file in the root directory of this source tree.
*/

@@ -18,0 +17,0 @@

4

dist/utility/getQueryFacts.js

@@ -46,7 +46,7 @@ 'use strict';

/**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -53,0 +53,0 @@

4

dist/utility/getSelectedOperationName.js

@@ -8,7 +8,7 @@ "use strict";

/**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE-examples file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*/

@@ -15,0 +15,0 @@

74

dist/utility/onHasCompletion.js

@@ -21,8 +21,7 @@ 'use strict';

/**
* Copyright (c) 2015, Facebook, Inc.
* Copyright (c) Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
* This source code is licensed under the license found in the
* LICENSE file in the root directory of this source tree.
*/

@@ -33,39 +32,13 @@

var wrapper = void 0;
var information = void 0;
var deprecation = void 0;
// When a hint result is selected, we touch the UI.
// When a hint result is selected, we augment the UI with information.
CodeMirror.on(data, 'select', function (ctx, el) {
// Only the first time (usually when the hint UI is first displayed)
// do we create the wrapping node.
if (!wrapper) {
// do we create the information nodes.
if (!information) {
(function () {
// Wrap the existing hint UI, so we have a place to put information.
var hintsUl = el.parentNode;
var container = hintsUl.parentNode;
wrapper = document.createElement('div');
container.appendChild(wrapper);
// CodeMirror vertically inverts the hint UI if there is not enough
// space below the cursor. Since this modified UI appends to the bottom
// of CodeMirror's existing UI, it could cover the cursor. This adjusts
// the positioning of the hint UI to accomodate.
var top = hintsUl.style.top;
var bottom = '';
var cursorTop = cm.cursorCoords().top;
if (parseInt(top, 10) < cursorTop) {
top = '';
bottom = window.innerHeight - cursorTop + 3 + 'px';
}
// Style the wrapper, remove positioning from hints. Note that usage
// of this option will need to specify CSS to remove some styles from
// the existing hint UI.
wrapper.className = 'CodeMirror-hints-wrapper';
wrapper.style.left = hintsUl.style.left;
wrapper.style.top = top;
wrapper.style.bottom = bottom;
hintsUl.style.left = '';
hintsUl.style.top = '';
// This "information" node will contain the additional info about the

@@ -75,20 +48,17 @@ // highlighted typeahead option.

information.className = 'CodeMirror-hint-information';
if (bottom) {
wrapper.appendChild(information);
wrapper.appendChild(hintsUl);
} else {
wrapper.appendChild(hintsUl);
wrapper.appendChild(information);
}
hintsUl.appendChild(information);
// This "deprecation" node will contain info about deprecated usage.
deprecation = document.createElement('div');
deprecation.className = 'CodeMirror-hint-deprecation';
hintsUl.appendChild(deprecation);
// When CodeMirror attempts to remove the hint UI, we detect that it was
// removed from our wrapper and in turn remove the wrapper from the
// original container.
// removed and in turn remove the information nodes.
var _onRemoveFn = void 0;
wrapper.addEventListener('DOMNodeRemoved', _onRemoveFn = function onRemoveFn(event) {
hintsUl.addEventListener('DOMNodeRemoved', _onRemoveFn = function onRemoveFn(event) {
if (event.target === hintsUl) {
wrapper.removeEventListener('DOMNodeRemoved', _onRemoveFn);
wrapper.parentNode.removeChild(wrapper);
wrapper = null;
hintsUl.removeEventListener('DOMNodeRemoved', _onRemoveFn);
information = null;
deprecation = null;
_onRemoveFn = null;

@@ -101,3 +71,3 @@ }

// Now that the UI has been set up, add info to information.
var description = ctx.description ? (0, _marked2.default)(ctx.description, { smartypants: true }) : 'Self descriptive.';
var description = ctx.description ? (0, _marked2.default)(ctx.description, { sanitize: true }) : 'Self descriptive.';
var type = ctx.type ? '<span class="infoType">' + renderType(ctx.type) + '</span>' : '';

@@ -107,2 +77,10 @@

if (ctx.isDeprecated) {
var reason = ctx.deprecationReason ? (0, _marked2.default)(ctx.deprecationReason, { sanitize: true }) : '';
deprecation.innerHTML = '<span class="deprecation-label">Deprecated</span>' + reason;
deprecation.style.display = 'block';
} else {
deprecation.style.display = 'none';
}
// Additional rendering?

@@ -109,0 +87,0 @@ if (onHintInformationRender) {

45

package.json
{
"name": "graphiql",
"version": "0.8.1",
"version": "0.9.0",
"description": "An graphical interactive in-browser GraphQL IDE.",

@@ -45,8 +45,8 @@ "contributors": [

"dependencies": {
"codemirror": "^5.15.2",
"codemirror-graphql": "^0.5.9",
"marked": "^0.3.5"
"codemirror": "5.23.0",
"codemirror-graphql": "0.6.2",
"marked": "0.3.6"
},
"peerDependencies": {
"graphql": "^0.6.0 || ^0.7.0 || ^0.8.0-b",
"graphql": "^0.6.0 || ^0.7.0 || ^0.8.0-b || ^0.9.0",
"react": ">=0.14.8",

@@ -56,28 +56,29 @@ "react-dom": ">=0.14.8"

"devDependencies": {
"autoprefixer": "^6.5.4",
"babel-cli": "6.18.0",
"autoprefixer": "6.7.0",
"babel-cli": "6.22.2",
"babel-eslint": "7.1.1",
"babel-plugin-syntax-async-functions": "6.13.0",
"babel-plugin-transform-class-properties": "6.19.0",
"babel-plugin-transform-object-rest-spread": "^6.20.2",
"babel-preset-es2015": "6.18.0",
"babel-preset-react": "6.16.0",
"babel-plugin-transform-class-properties": "6.22.0",
"babel-plugin-transform-object-rest-spread": "6.22.0",
"babel-plugin-transform-regenerator": "6.22.0",
"babel-preset-es2015": "6.22.0",
"babel-preset-react": "6.22.0",
"babelify": "7.3.0",
"browserify": "13.1.1",
"browserify": "13.3.0",
"browserify-shim": "3.8.12",
"chai": "3.5.0",
"chai-subset": "1.4.0",
"eslint": "^3.12.0",
"eslint-plugin-babel": "4.0.0",
"eslint-plugin-react": "6.8.0",
"eslint": "3.14.0",
"eslint-plugin-babel": "4.0.1",
"eslint-plugin-react": "6.9.0",
"express": "4.14.0",
"express-graphql": "0.6.1",
"flow-bin": "0.37.4",
"graphql": "0.8.2",
"express-graphql": "0.6.2",
"flow-bin": "0.38.0",
"graphql": "0.9.0",
"jsdom": "9.9.1",
"mocha": "3.2.0",
"postcss-cli": "^2.6.0",
"react": "15.4.1",
"react-dom": "15.4.1",
"react-test-renderer": "15.4.1",
"postcss-cli": "2.6.0",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-test-renderer": "15.4.2",
"uglify-js": "2.7.5",

@@ -84,0 +85,0 @@ "uglifyify": "3.0.4",

51

README.md

@@ -85,3 +85,3 @@ GraphiQL

- `storage`: an instance of [Storage][] GraphiQL will use to persist state. Only `getItem` and `setItem` are called. Default: `window.localStorage`
- `storage`: an instance of [Storage][] GraphiQL will use to persist state. Default: `window.localStorage`.

@@ -104,6 +104,20 @@ - `defaultQuery`: an optional GraphQL string to use when no query is provided and no stored query exists from a previous session. If `undefined` is provided, GraphiQL will use its own default query.

* `<GraphiQL.Toolbar>`: Add a custom toolbar above GraphiQL.
* `<GraphiQL.Toolbar>`: Add a custom toolbar above GraphiQL. If not provided, a
default toolbar may contain common operations. Pass the empty
`<GraphiQL.Toolbar />` if an empty toolbar is desired.
* `<GraphiQL.ToolbarButton>`: Add a button to the toolbar above GraphiQL.
* `<GraphiQL.Button>`: Add a button to the toolbar above GraphiQL.
* `<GraphiQL.Menu>`: Add a dropdown menu to the toolbar above GraphiQL.
* `<GraphiQL.MenuItem>`: Items for a menu.
* `<GraphiQL.Select>`: Add a select list to the toolbar above GraphiQL.
* `<GraphiQL.SelectOption>`: Options for a select list.
* `<GraphiQL.Group>`: Add a group of associated controls to the
toolbar above GraphiQL. Expects children to be `<GraphiQL.Button>`,
`<GraphiQL.Menu>`, or `<GraphiQL.Select>`.
* `<GraphiQL.Footer>`: Add a custom footer below GraphiQL Results.

@@ -152,4 +166,9 @@

_onClickToolbarButton(event) {
alert('Clicked toolbar button!');
// Example of using the GraphiQL Component API via a toolbar button.
handleClickPrettifyButton(event) {
const editor = this.graphiql.getQueryEditor();
const currentText = editor.getValue();
const { parse, print } = require('graphql');
const prettyText = print(parse(currentText));
editor.setValue(prettyText);
}

@@ -159,3 +178,3 @@

return (
<GraphiQL ...this.state>
<GraphiQL ref={c => { this.graphiql = c; }} ...this.state>
<GraphiQL.Logo>

@@ -165,11 +184,17 @@ Custom Logo

<GraphiQL.Toolbar>
// GraphiQL.ToolbarButton usage
<GraphiQL.ToolbarButton
onClick={this._onClickToolbarButton}
title="ToolbarButton"
label="Click Me as well!"
// GraphiQL.Button usage
<GraphiQL.Button
onClick={this.handleClickPrettifyButton}
label="Prettify"
title="Prettify Query"
/>
// Some other possible toolbar items
<button name="GraphiQLButton">Click Me</button>
<GraphiQL.Toolbar.Menu title="File">
<GraphiQL.Toolbar.MenuItem title="Save" onClick={...}>
<GraphiQL.Toolbar.Menu>
<OtherReactComponent someProps="true" />
</GraphiQL.Toolbar>

@@ -204,3 +229,3 @@ <GraphiQL.Footer>

Given this schema,
```
```js
const schema = new GraphQLSchema({

@@ -207,0 +232,0 @@ query: new GraphQLObjectType({

dist/app.css

Sorry, the diff of this file is not supported yet

dist/doc-explorer.css

Sorry, the diff of this file is not supported yet

dist/lint.css

Sorry, the diff of this file is not supported yet

dist/show-hint.css

Sorry, the diff of this file is not supported yet

graphiql.css

Sorry, the diff of this file is not supported yet

graphiql.js

Sorry, the diff of this file is too big to display

graphiql.min.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc