zeus-form 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- package/jest.config.ts +14 -0
- package/lib/InputForm.d.ts +3 -0
- package/lib/InputForm.js +114 -0
- package/lib/InputForm.js.map +1 -0
- package/lib/index.d.ts +4 -0
- package/lib/index.js +21 -0
- package/lib/index.js.map +1 -0
- package/lib/models.d.ts +80 -0
- package/lib/models.js +9 -0
- package/lib/models.js.map +1 -0
- package/lib/outsideUse.d.ts +10 -0
- package/lib/outsideUse.js +112 -0
- package/lib/outsideUse.js.map +1 -0
- package/lib/renderer/fields.d.ts +3 -0
- package/lib/renderer/fields.js +63 -0
- package/lib/renderer/fields.js.map +1 -0
- package/lib/renderer/index.d.ts +3 -0
- package/lib/renderer/index.js +66 -0
- package/lib/renderer/index.js.map +1 -0
- package/lib/resolve.d.ts +6 -0
- package/lib/resolve.js +62 -0
- package/lib/resolve.js.map +1 -0
- package/package.json +33 -0
- package/src/InputForm.tsx +87 -0
- package/src/__tests__/consts.ts +40 -0
- package/src/__tests__/index.ts +2 -0
- package/src/__tests__/testUtils.ts +2 -0
- package/src/index.tsx +4 -0
- package/src/models.ts +101 -0
- package/src/outsideUse.tsx +102 -0
- package/src/renderer/fields.tsx +61 -0
- package/src/renderer/index.tsx +39 -0
- package/src/resolve.ts +53 -0
- package/tsconfig.build.json +36 -0
- package/tsconfig.json +20 -0
package/jest.config.ts
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
import type { Config } from '@jest/types';
|
2
|
+
|
3
|
+
const config: Config.InitialOptions = {
|
4
|
+
verbose: true,
|
5
|
+
preset: 'ts-jest',
|
6
|
+
moduleFileExtensions: ['ts', 'tsx', 'js'],
|
7
|
+
moduleNameMapper: {
|
8
|
+
'@/(.*)': ['<rootDir>/src/'],
|
9
|
+
},
|
10
|
+
testMatch: ['**/*.spec.(ts|tsx)'],
|
11
|
+
watchPathIgnorePatterns: ['node_modules'],
|
12
|
+
watchman: false,
|
13
|
+
};
|
14
|
+
export default config;
|
package/lib/InputForm.js
ADDED
@@ -0,0 +1,114 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
14
|
+
if (k2 === undefined) k2 = k;
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
18
|
+
}
|
19
|
+
Object.defineProperty(o, k2, desc);
|
20
|
+
}) : (function(o, m, k, k2) {
|
21
|
+
if (k2 === undefined) k2 = k;
|
22
|
+
o[k2] = m[k];
|
23
|
+
}));
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
26
|
+
}) : function(o, v) {
|
27
|
+
o["default"] = v;
|
28
|
+
});
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
30
|
+
if (mod && mod.__esModule) return mod;
|
31
|
+
var result = {};
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
33
|
+
__setModuleDefault(result, mod);
|
34
|
+
return result;
|
35
|
+
};
|
36
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
37
|
+
var t = {};
|
38
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
39
|
+
t[p] = s[p];
|
40
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
41
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
42
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
43
|
+
t[p[i]] = s[p[i]];
|
44
|
+
}
|
45
|
+
return t;
|
46
|
+
};
|
47
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
48
|
+
exports.InputForm = void 0;
|
49
|
+
var renderer_1 = require("./renderer");
|
50
|
+
var resolve_1 = require("./resolve");
|
51
|
+
var graphql_js_tree_1 = require("graphql-js-tree");
|
52
|
+
var react_1 = __importStar(require("react"));
|
53
|
+
function InputForm(_a) {
|
54
|
+
var onChange = _a.onChange, schema = _a.schema, values = _a.values, inputName = _a.inputName, props = __rest(_a, ["onChange", "schema", "values", "inputName"]);
|
55
|
+
var nodes = (0, react_1.useMemo)(function () {
|
56
|
+
return graphql_js_tree_1.Parser.parse(schema).nodes;
|
57
|
+
}, [schema]);
|
58
|
+
var formObject = (0, react_1.useMemo)(function () {
|
59
|
+
var _a;
|
60
|
+
var node = nodes.find(function (n) { return n.name === inputName && n.data.type === graphql_js_tree_1.TypeDefinition.InputObjectTypeDefinition; });
|
61
|
+
if (!node)
|
62
|
+
throw new Error("Invalid node: \"".concat(inputName, "\". Your schema does not have such input node."));
|
63
|
+
var v = (_a = {},
|
64
|
+
_a[inputName] = values,
|
65
|
+
_a);
|
66
|
+
return buildForm({
|
67
|
+
node: node,
|
68
|
+
nodes: nodes,
|
69
|
+
values: v,
|
70
|
+
});
|
71
|
+
}, [inputName, values]);
|
72
|
+
return (react_1.default.createElement(renderer_1.Renderer, __assign({}, props, { nodes: nodes, formObject: formObject, key: inputName, currentPath: inputName, onChange: function (changedForm) {
|
73
|
+
var toValue = (0, resolve_1.resolveQlValue)({ v: changedForm, nodes: nodes });
|
74
|
+
onChange(toValue);
|
75
|
+
}, f: formObject.__form__node })));
|
76
|
+
}
|
77
|
+
exports.InputForm = InputForm;
|
78
|
+
function buildForm(props) {
|
79
|
+
var _a;
|
80
|
+
var node = props.node, nodes = props.nodes, values = props.values;
|
81
|
+
if (node.type.fieldType.type === graphql_js_tree_1.Options.array ||
|
82
|
+
(node.type.fieldType.type === graphql_js_tree_1.Options.required && node.type.fieldType.nest.type === graphql_js_tree_1.Options.array)) {
|
83
|
+
return {
|
84
|
+
__form__node: node,
|
85
|
+
__form__value: (_a = values === null || values === void 0 ? void 0 : values[node.name]) === null || _a === void 0 ? void 0 : _a.map(function (av) { return ({
|
86
|
+
__form__node: node,
|
87
|
+
__form__value: av,
|
88
|
+
}); }),
|
89
|
+
};
|
90
|
+
}
|
91
|
+
var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(node.type.fieldType); });
|
92
|
+
var isFieldOfInputType = node.data.type === graphql_js_tree_1.ValueDefinition.InputValueDefinition &&
|
93
|
+
(seekNode === null || seekNode === void 0 ? void 0 : seekNode.data.type) === graphql_js_tree_1.TypeDefinition.InputObjectTypeDefinition;
|
94
|
+
if (isFieldOfInputType) {
|
95
|
+
return buildForm(__assign(__assign({}, props), { node: seekNode, switchInput: true, switchFieldName: node.name }));
|
96
|
+
}
|
97
|
+
var isInputType = node.data.type === graphql_js_tree_1.TypeDefinition.InputObjectTypeDefinition;
|
98
|
+
if (isInputType) {
|
99
|
+
var valueObject = node.args.reduce(function (a, b) {
|
100
|
+
var fv = buildForm(__assign(__assign({}, props), { node: b, values: (values === null || values === void 0 ? void 0 : values[props.switchFieldName || node.name]) || {} }));
|
101
|
+
a[b.name] = fv;
|
102
|
+
return a;
|
103
|
+
}, {});
|
104
|
+
return {
|
105
|
+
__form__node: props.switchInput ? __assign(__assign({}, node), { data: { type: graphql_js_tree_1.ValueDefinition.InputValueDefinition } }) : node,
|
106
|
+
__form__value: valueObject,
|
107
|
+
};
|
108
|
+
}
|
109
|
+
return {
|
110
|
+
__form__node: node,
|
111
|
+
__form__value: values === null || values === void 0 ? void 0 : values[node.name],
|
112
|
+
};
|
113
|
+
}
|
114
|
+
//# sourceMappingURL=InputForm.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"InputForm.js","sourceRoot":"","sources":["../src/InputForm.tsx"],"names":[],"mappings":"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"}
|
package/lib/index.d.ts
ADDED
package/lib/index.js
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
|
+
if (k2 === undefined) k2 = k;
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
7
|
+
}
|
8
|
+
Object.defineProperty(o, k2, desc);
|
9
|
+
}) : (function(o, m, k, k2) {
|
10
|
+
if (k2 === undefined) k2 = k;
|
11
|
+
o[k2] = m[k];
|
12
|
+
}));
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
15
|
+
};
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
17
|
+
__exportStar(require("./models"), exports);
|
18
|
+
__exportStar(require("./renderer"), exports);
|
19
|
+
__exportStar(require("./outsideUse"), exports);
|
20
|
+
__exportStar(require("./InputForm"), exports);
|
21
|
+
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,6CAA2B;AAC3B,+CAA6B;AAC7B,8CAA4B"}
|
package/lib/models.d.ts
ADDED
@@ -0,0 +1,80 @@
|
|
1
|
+
import { ParserField } from 'graphql-js-tree';
|
2
|
+
import React from 'react';
|
3
|
+
export declare type FieldComponent = React.FC<PassedFormProps>;
|
4
|
+
export declare type FormLabelProps = React.FC<PassedFormProps & {
|
5
|
+
open?: boolean;
|
6
|
+
setOpen: (b: boolean) => void;
|
7
|
+
}>;
|
8
|
+
export declare type WidgetSavedData = {
|
9
|
+
widget: string;
|
10
|
+
[x: string]: unknown;
|
11
|
+
};
|
12
|
+
export declare type SavedWidgets = {
|
13
|
+
[selector: string]: WidgetSavedData | undefined;
|
14
|
+
};
|
15
|
+
export declare const enum Errs {
|
16
|
+
REQUIRED = "REQUIRED",
|
17
|
+
VALUE_IN_ARRAY_REQUIRED = "VALUE_IN_ARRAY_REQUIRED"
|
18
|
+
}
|
19
|
+
export declare type Errors = {
|
20
|
+
[selector: string]: string;
|
21
|
+
};
|
22
|
+
export declare type SavedForms = {
|
23
|
+
[selector: string]: FormObject;
|
24
|
+
};
|
25
|
+
export declare type ReturnedDictType = any;
|
26
|
+
export declare type WidgetVariantType = {
|
27
|
+
name: string;
|
28
|
+
widget: string;
|
29
|
+
data: ReturnedDictType;
|
30
|
+
};
|
31
|
+
export declare type PassedFormProps<WidgetData = ReturnedDictType> = {
|
32
|
+
f: ParserField;
|
33
|
+
nodes: ParserField[];
|
34
|
+
formObject: FormObject;
|
35
|
+
onChange: (formObject: FormObject) => void;
|
36
|
+
required?: boolean;
|
37
|
+
widgetComponents: WidgetType[];
|
38
|
+
widgetVariants?: WidgetVariantType[];
|
39
|
+
currentPath: string;
|
40
|
+
widgets?: SavedWidgets;
|
41
|
+
widgetData?: WidgetData;
|
42
|
+
errors?: Errors;
|
43
|
+
components: {
|
44
|
+
ArrayField: FieldComponent;
|
45
|
+
ObjectField: FieldComponent;
|
46
|
+
BooleanField: FieldComponent;
|
47
|
+
UniversalField: FieldComponent;
|
48
|
+
NumberField: FieldComponent;
|
49
|
+
EnumField: FieldComponent;
|
50
|
+
NullField: FieldComponent;
|
51
|
+
FormLabel: FormLabelProps;
|
52
|
+
FormField: FieldComponent;
|
53
|
+
};
|
54
|
+
};
|
55
|
+
export declare type FormFile = {
|
56
|
+
widgets?: SavedWidgets;
|
57
|
+
forms?: SavedForms;
|
58
|
+
};
|
59
|
+
export declare type InputFormProps<InputZeusType> = Omit<PassedFormProps, 'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets' | 'nodes' | 'formFile' | 'runQuery'> & {
|
60
|
+
schema: string;
|
61
|
+
inputName: string;
|
62
|
+
values: Partial<InputZeusType>;
|
63
|
+
onChange: (o: Partial<InputZeusType>) => void;
|
64
|
+
};
|
65
|
+
export declare type InputFormLibraryProps<T> = Omit<InputFormProps<T>, 'required' | 'components'>;
|
66
|
+
export declare type WidgetProps<Props> = {
|
67
|
+
Component: React.FC<PassedFormProps<Props>>;
|
68
|
+
name: string;
|
69
|
+
};
|
70
|
+
export declare type WidgetType = WidgetProps<ReturnedDictType>;
|
71
|
+
export declare type FormValueBase = {
|
72
|
+
__form__value: FormValue;
|
73
|
+
} | {
|
74
|
+
[x: string]: FormValue;
|
75
|
+
} | string | boolean | number | null | undefined | Array<FormValue>;
|
76
|
+
export declare type FormValue = FormValueBase | FormObject;
|
77
|
+
export declare type FormObject = {
|
78
|
+
__form__value?: FormValue;
|
79
|
+
__form__node: ParserField;
|
80
|
+
};
|
package/lib/models.js
ADDED
@@ -0,0 +1,9 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.Errs = void 0;
|
4
|
+
var Errs;
|
5
|
+
(function (Errs) {
|
6
|
+
Errs["REQUIRED"] = "REQUIRED";
|
7
|
+
Errs["VALUE_IN_ARRAY_REQUIRED"] = "VALUE_IN_ARRAY_REQUIRED";
|
8
|
+
})(Errs = exports.Errs || (exports.Errs = {}));
|
9
|
+
//# sourceMappingURL=models.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"models.js","sourceRoot":"","sources":["../src/models.ts"],"names":[],"mappings":";;;AAgBA,IAAkB,IAGjB;AAHD,WAAkB,IAAI;IAClB,6BAAqB,CAAA;IACrB,2DAAmD,CAAA;AACvD,CAAC,EAHiB,IAAI,GAAJ,YAAI,KAAJ,YAAI,QAGrB"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { Errs, FormObject, FormValue, PassedFormProps } from "./models";
|
2
|
+
export declare const getWidgetFromProps: (props: PassedFormProps) => {
|
3
|
+
data: any;
|
4
|
+
widget: import("./models").WidgetType;
|
5
|
+
} | undefined;
|
6
|
+
export declare const getErrorFromProps: (props: PassedFormProps) => string | undefined;
|
7
|
+
export declare const graphqlFormUtils: () => {
|
8
|
+
validateForm: (v: FormObject, errors: Record<Errs, string>) => Record<string, string>;
|
9
|
+
validateValue: (f: FormValue, path: string, pushErrors: (path: string, value: Errs) => void) => void;
|
10
|
+
};
|
@@ -0,0 +1,112 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.graphqlFormUtils = exports.getErrorFromProps = exports.getWidgetFromProps = void 0;
|
15
|
+
var models_1 = require("./models");
|
16
|
+
var graphql_js_tree_1 = require("graphql-js-tree");
|
17
|
+
var getWidgetFromProps = function (props) {
|
18
|
+
var _a, _b;
|
19
|
+
var w = (_a = props.widgets) === null || _a === void 0 ? void 0 : _a[props.currentPath];
|
20
|
+
var FoundBasicWidget = props.widgetComponents.find(function (wc) { return wc.name === (w === null || w === void 0 ? void 0 : w.widget); });
|
21
|
+
if (!FoundBasicWidget) {
|
22
|
+
var widgetVariant_1 = (_b = props.widgetVariants) === null || _b === void 0 ? void 0 : _b.find(function (wv) { return wv.name === (w === null || w === void 0 ? void 0 : w.widget); });
|
23
|
+
if (!widgetVariant_1) {
|
24
|
+
return;
|
25
|
+
}
|
26
|
+
var FoundVariantWidget = props.widgetComponents.find(function (wc) { return wc.name === widgetVariant_1.widget; });
|
27
|
+
if (!FoundVariantWidget) {
|
28
|
+
return;
|
29
|
+
}
|
30
|
+
return {
|
31
|
+
data: __assign({ widget: widgetVariant_1.widget }, widgetVariant_1.data),
|
32
|
+
widget: FoundVariantWidget,
|
33
|
+
};
|
34
|
+
}
|
35
|
+
return {
|
36
|
+
data: w,
|
37
|
+
widget: FoundBasicWidget,
|
38
|
+
};
|
39
|
+
};
|
40
|
+
exports.getWidgetFromProps = getWidgetFromProps;
|
41
|
+
var getErrorFromProps = function (props) {
|
42
|
+
var _a;
|
43
|
+
return (_a = props.errors) === null || _a === void 0 ? void 0 : _a[props.currentPath];
|
44
|
+
};
|
45
|
+
exports.getErrorFromProps = getErrorFromProps;
|
46
|
+
var graphqlFormUtils = function () {
|
47
|
+
var validateValue = function (f, path, pushErrors) {
|
48
|
+
if (f === null ||
|
49
|
+
typeof f === 'string' ||
|
50
|
+
typeof f === 'boolean' ||
|
51
|
+
typeof f === 'number' ||
|
52
|
+
typeof f === 'undefined') {
|
53
|
+
return;
|
54
|
+
}
|
55
|
+
if ('__form__node' in f &&
|
56
|
+
typeof f.__form__node === 'object' &&
|
57
|
+
f.__form__node !== null &&
|
58
|
+
'args' in f.__form__node &&
|
59
|
+
'data' in f.__form__node &&
|
60
|
+
typeof f.__form__node.data === 'object' &&
|
61
|
+
!!f.__form__node.data &&
|
62
|
+
'type' in f.__form__node.data &&
|
63
|
+
'directives' in f.__form__node) {
|
64
|
+
var _a = f, __form__node = _a.__form__node, __form__value = _a.__form__value;
|
65
|
+
if (__form__node.data.type === graphql_js_tree_1.ValueDefinition.InputValueDefinition) {
|
66
|
+
if (__form__node.type.fieldType.type === graphql_js_tree_1.Options.required &&
|
67
|
+
(0, graphql_js_tree_1.getTypeName)(__form__node.type.fieldType) !== graphql_js_tree_1.ScalarTypes.Boolean) {
|
68
|
+
if (typeof __form__value === 'undefined' || __form__value === '') {
|
69
|
+
pushErrors(path, models_1.Errs.REQUIRED);
|
70
|
+
}
|
71
|
+
if (Array.isArray(__form__value)) {
|
72
|
+
for (var _i = 0, __form__value_1 = __form__value; _i < __form__value_1.length; _i++) {
|
73
|
+
var v = __form__value_1[_i];
|
74
|
+
validateValue(v, path, pushErrors);
|
75
|
+
}
|
76
|
+
}
|
77
|
+
}
|
78
|
+
}
|
79
|
+
}
|
80
|
+
if ('__form__value' in f && !!f.__form__value) {
|
81
|
+
var __form__value = f.__form__value;
|
82
|
+
if (Array.isArray(__form__value)) {
|
83
|
+
__form__value.map(function (vv) { return validateValue(vv, path, pushErrors); });
|
84
|
+
return;
|
85
|
+
}
|
86
|
+
if (typeof __form__value === 'object' && !!__form__value) {
|
87
|
+
Object.entries(__form__value).forEach(function (_a) {
|
88
|
+
var k = _a[0], v = _a[1];
|
89
|
+
return validateValue(v, "".concat(path, ".").concat(k), pushErrors);
|
90
|
+
});
|
91
|
+
return;
|
92
|
+
}
|
93
|
+
}
|
94
|
+
return;
|
95
|
+
};
|
96
|
+
var validateForm = function (v, errors) {
|
97
|
+
var errorDict = {};
|
98
|
+
Object.entries(v.__form__value).forEach(function (_a) {
|
99
|
+
var k = _a[0], val = _a[1];
|
100
|
+
validateValue(val, k, function (p, err) {
|
101
|
+
errorDict[p] = errors[err];
|
102
|
+
});
|
103
|
+
});
|
104
|
+
return errorDict;
|
105
|
+
};
|
106
|
+
return {
|
107
|
+
validateForm: validateForm,
|
108
|
+
validateValue: validateValue,
|
109
|
+
};
|
110
|
+
};
|
111
|
+
exports.graphqlFormUtils = graphqlFormUtils;
|
112
|
+
//# sourceMappingURL=outsideUse.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"outsideUse.js","sourceRoot":"","sources":["../src/outsideUse.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,63 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
15
|
+
};
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
17
|
+
exports.Fields = void 0;
|
18
|
+
var outsideUse_1 = require("../outsideUse");
|
19
|
+
var graphql_js_tree_1 = require("graphql-js-tree");
|
20
|
+
var react_1 = __importDefault(require("react"));
|
21
|
+
var Fields = function (props) {
|
22
|
+
var nodes = props.nodes, f = props.f, _a = props.components, ArrayField = _a.ArrayField, ObjectField = _a.ObjectField;
|
23
|
+
var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(f.type.fieldType); });
|
24
|
+
var isInput = f.data.type === graphql_js_tree_1.TypeDefinition.InputObjectTypeDefinition;
|
25
|
+
if (isInput) {
|
26
|
+
return react_1.default.createElement(ObjectField, __assign({}, props));
|
27
|
+
}
|
28
|
+
var isFieldInput = (seekNode === null || seekNode === void 0 ? void 0 : seekNode.data.type) === graphql_js_tree_1.TypeDefinition.InputObjectTypeDefinition;
|
29
|
+
if (f.type.fieldType.type === graphql_js_tree_1.Options.array) {
|
30
|
+
return react_1.default.createElement(ArrayField, __assign({}, props));
|
31
|
+
}
|
32
|
+
if (isFieldInput) {
|
33
|
+
return react_1.default.createElement(ObjectField, __assign({}, props, { f: seekNode }));
|
34
|
+
}
|
35
|
+
var w = (0, outsideUse_1.getWidgetFromProps)(props);
|
36
|
+
if (w) {
|
37
|
+
var data = w.data, Component = w.widget.Component;
|
38
|
+
return react_1.default.createElement(Component, __assign({}, props, { widgetData: data }));
|
39
|
+
}
|
40
|
+
return react_1.default.createElement(ScalarField, __assign({}, props));
|
41
|
+
};
|
42
|
+
exports.Fields = Fields;
|
43
|
+
var ScalarField = function (props) {
|
44
|
+
var f = props.f, nodes = props.nodes, children = props.children, _a = props.components, BooleanField = _a.BooleanField, NumberField = _a.NumberField, EnumField = _a.EnumField, UniversalField = _a.UniversalField;
|
45
|
+
var typeName = (0, graphql_js_tree_1.getTypeName)(f.type.fieldType);
|
46
|
+
var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(f.type.fieldType); });
|
47
|
+
if (typeName === graphql_js_tree_1.ScalarTypes.String ||
|
48
|
+
typeName === graphql_js_tree_1.ScalarTypes.ID ||
|
49
|
+
(seekNode === null || seekNode === void 0 ? void 0 : seekNode.data.type) === graphql_js_tree_1.TypeDefinition.ScalarTypeDefinition) {
|
50
|
+
return react_1.default.createElement(UniversalField, __assign({}, props));
|
51
|
+
}
|
52
|
+
if (typeName === graphql_js_tree_1.ScalarTypes.Float || typeName === graphql_js_tree_1.ScalarTypes.Int) {
|
53
|
+
return react_1.default.createElement(NumberField, __assign({}, props));
|
54
|
+
}
|
55
|
+
if (typeName === graphql_js_tree_1.ScalarTypes.Boolean) {
|
56
|
+
return react_1.default.createElement(BooleanField, __assign({}, props));
|
57
|
+
}
|
58
|
+
if ((seekNode === null || seekNode === void 0 ? void 0 : seekNode.data.type) === graphql_js_tree_1.TypeDefinition.EnumTypeDefinition) {
|
59
|
+
return react_1.default.createElement(EnumField, __assign({}, props));
|
60
|
+
}
|
61
|
+
return react_1.default.createElement(react_1.default.Fragment, null, children);
|
62
|
+
};
|
63
|
+
//# sourceMappingURL=fields.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"fields.js","sourceRoot":"","sources":["../../src/renderer/fields.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,66 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
14
|
+
if (k2 === undefined) k2 = k;
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
18
|
+
}
|
19
|
+
Object.defineProperty(o, k2, desc);
|
20
|
+
}) : (function(o, m, k, k2) {
|
21
|
+
if (k2 === undefined) k2 = k;
|
22
|
+
o[k2] = m[k];
|
23
|
+
}));
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
26
|
+
}) : function(o, v) {
|
27
|
+
o["default"] = v;
|
28
|
+
});
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
30
|
+
if (mod && mod.__esModule) return mod;
|
31
|
+
var result = {};
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
33
|
+
__setModuleDefault(result, mod);
|
34
|
+
return result;
|
35
|
+
};
|
36
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
37
|
+
var t = {};
|
38
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
39
|
+
t[p] = s[p];
|
40
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
41
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
42
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
43
|
+
t[p[i]] = s[p[i]];
|
44
|
+
}
|
45
|
+
return t;
|
46
|
+
};
|
47
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
48
|
+
exports.Renderer = void 0;
|
49
|
+
var fields_1 = require("./fields");
|
50
|
+
var graphql_js_tree_1 = require("graphql-js-tree");
|
51
|
+
var react_1 = __importStar(require("react"));
|
52
|
+
var Renderer = function (props) {
|
53
|
+
var formObject = props.formObject, f = props.f, nodes = props.nodes, _a = props.components, NullField = _a.NullField, FormLabel = _a.FormLabel, FormField = _a.FormField;
|
54
|
+
var children = props.children, allProps = __rest(props, ["children"]);
|
55
|
+
var seekNode = nodes.find(function (n) { return n.name === (0, graphql_js_tree_1.getTypeName)(f.type.fieldType); });
|
56
|
+
var isInput = (seekNode === null || seekNode === void 0 ? void 0 : seekNode.data.type) === graphql_js_tree_1.TypeDefinition.InputObjectTypeDefinition;
|
57
|
+
var _b = (0, react_1.useState)(props.required), open = _b[0], setOpen = _b[1];
|
58
|
+
if (f.type.fieldType.type === graphql_js_tree_1.Options.required) {
|
59
|
+
return (react_1.default.createElement(exports.Renderer, __assign({}, props, { f: __assign(__assign({}, f), { type: __assign(__assign({}, f.type), { fieldType: __assign({}, f.type.fieldType.nest) }) }), required: true })));
|
60
|
+
}
|
61
|
+
return (react_1.default.createElement(FormField, __assign({}, allProps),
|
62
|
+
react_1.default.createElement(FormLabel, __assign({}, allProps, { open: open, setOpen: setOpen, children: children })),
|
63
|
+
formObject.__form__value === null ? (react_1.default.createElement(NullField, __assign({}, allProps))) : (react_1.default.createElement(react_1.default.Fragment, null, (!isInput || open) && react_1.default.createElement(fields_1.Fields, __assign({}, allProps))))));
|
64
|
+
};
|
65
|
+
exports.Renderer = Renderer;
|
66
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/renderer/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,mCAA2C;AAC3C,mDAAuE;AACvE,6CAAwC;AAEjC,IAAM,QAAQ,GAA8B,UAAC,KAAK;IAEjD,IAAA,UAAU,GAIV,KAAK,WAJK,EACV,CAAC,GAGD,KAAK,EAHJ,EACD,KAAK,GAEL,KAAK,MAFA,EACL,KACA,KAAK,WAD0C,EAAjC,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAE,CACzC;IACF,IAAA,QAAQ,GAAkB,KAAK,SAAvB,EAAK,QAAQ,UAAK,KAAK,EAAjC,YAAyB,CAAF,CAAW;IACxC,IAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,IAAI,KAAK,IAAA,6BAAW,EAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAAxC,CAAwC,CAAC,CAAC;IAC7E,IAAM,OAAO,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,CAAC,IAAI,MAAK,gCAAc,CAAC,yBAAyB,CAAC;IAC3E,IAAA,KAAkB,IAAA,gBAAQ,EAAC,KAAK,CAAC,QAAQ,CAAC,EAAzC,IAAI,QAAA,EAAE,OAAO,QAA4B,CAAC;IACjD,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,KAAK,yBAAO,CAAC,QAAQ,EAAE;QAC5C,OAAO,CACH,8BAAC,gBAAQ,eACD,KAAK,IACT,CAAC,wBACM,CAAC,KACJ,IAAI,wBAAO,CAAC,CAAC,IAAI,KAAE,SAAS,eAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,SAE5D,QAAQ,EAAE,IAAI,IAChB,CACL,CAAC;KACL;IACD,OAAO,CACH,8BAAC,SAAS,eAAK,QAAQ;QACnB,8BAAC,SAAS,eAAK,QAAQ,IAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IAAI;QAC5E,UAAU,CAAC,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,CACjC,8BAAC,SAAS,eAAK,QAAQ,EAAI,CAC9B,CAAC,CAAC,CAAC,CACA,8DAAG,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,8BAAC,eAAM,eAAK,QAAQ,EAAI,CAAI,CACxD,CACO,CACf,CAAC;AACN,CAAC,CAAC;AAjCW,QAAA,QAAQ,YAiCnB"}
|
package/lib/resolve.d.ts
ADDED
package/lib/resolve.js
ADDED
@@ -0,0 +1,62 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
+
exports.resolveQlValue = void 0;
|
15
|
+
var graphql_js_tree_1 = require("graphql-js-tree");
|
16
|
+
var resolveQlValue = function (_a) {
|
17
|
+
var v = _a.v, nodes = _a.nodes;
|
18
|
+
if (typeof v === 'undefined') {
|
19
|
+
return;
|
20
|
+
}
|
21
|
+
if (v === null) {
|
22
|
+
return v;
|
23
|
+
}
|
24
|
+
if (Array.isArray(v)) {
|
25
|
+
if (v.length === 0)
|
26
|
+
return;
|
27
|
+
return v.map(function (vv) { return (0, exports.resolveQlValue)({ v: vv, nodes: nodes }); });
|
28
|
+
}
|
29
|
+
if (typeof v === 'object') {
|
30
|
+
if ('__form__value' in v) {
|
31
|
+
if ('__form__node' in v) {
|
32
|
+
var n = v.__form__node;
|
33
|
+
if (n.type.fieldType.type === graphql_js_tree_1.Options.required) {
|
34
|
+
return (0, exports.resolveQlValue)({
|
35
|
+
v: {
|
36
|
+
__form__node: __assign(__assign({}, n), { type: __assign(__assign({}, n.type), { fieldType: __assign({}, n.type.fieldType.nest) }) }),
|
37
|
+
__form__value: v.__form__value,
|
38
|
+
},
|
39
|
+
nodes: nodes,
|
40
|
+
});
|
41
|
+
}
|
42
|
+
}
|
43
|
+
return (0, exports.resolveQlValue)({ v: v.__form__value, nodes: nodes });
|
44
|
+
}
|
45
|
+
var e = Object.entries(v).reduce(function (a, _a) {
|
46
|
+
var key = _a[0], val = _a[1];
|
47
|
+
var value = (0, exports.resolveQlValue)({ v: val, nodes: nodes });
|
48
|
+
if (typeof value === 'undefined' || value === null) {
|
49
|
+
return a;
|
50
|
+
}
|
51
|
+
if (typeof value === 'object' && Object.keys(value).length === 0) {
|
52
|
+
return a;
|
53
|
+
}
|
54
|
+
a[key] = value;
|
55
|
+
return a;
|
56
|
+
}, {});
|
57
|
+
return e;
|
58
|
+
}
|
59
|
+
return v;
|
60
|
+
};
|
61
|
+
exports.resolveQlValue = resolveQlValue;
|
62
|
+
//# sourceMappingURL=resolve.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"resolve.js","sourceRoot":"","sources":["../src/resolve.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,mDAAuD;AAEhD,IAAM,cAAc,GAAG,UAAC,EAAgE;QAA9D,CAAC,OAAA,EAAE,KAAK,WAAA;IACrC,IAAI,OAAO,CAAC,KAAK,WAAW,EAAE;QAC1B,OAAO;KACV;IACD,IAAI,CAAC,KAAK,IAAI,EAAE;QACZ,OAAO,CAAC,CAAC;KACZ;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;QAClB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAC3B,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,EAAE,IAAK,OAAA,IAAA,sBAAc,EAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,OAAA,EAAE,CAAC,EAAhC,CAAgC,CAAC,CAAC;KAC1D;IACD,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE;QACvB,IAAI,eAAe,IAAI,CAAC,EAAE;YACtB,IAAI,cAAc,IAAI,CAAC,EAAE;gBACrB,IAAM,CAAC,GAAG,CAAC,CAAC,YAA2B,CAAC;gBACxC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,KAAK,yBAAO,CAAC,QAAQ,EAAE;oBAC5C,OAAO,IAAA,sBAAc,EAAC;wBAClB,CAAC,EAAE;4BACC,YAAY,wBACL,CAAC,KACJ,IAAI,wBACG,CAAC,CAAC,IAAI,KACT,SAAS,eACF,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,OAGnC;4BACD,aAAa,EAAE,CAAC,CAAC,aAAa;yBACjC;wBACD,KAAK,OAAA;qBACR,CAAC,CAAC;iBACN;aACJ;YACD,OAAO,IAAA,sBAAc,EAAC,EAAE,CAAC,EAAE,CAAC,CAAC,aAAa,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;SACxD;QACD,IAAM,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAC,CAAC,EAAE,EAAU;gBAAT,GAAG,QAAA,EAAE,GAAG,QAAA;YAC5C,IAAM,KAAK,GAAG,IAAA,sBAAc,EAAC,EAAE,CAAC,EAAE,GAAgB,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;YAC7D,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,IAAI,EAAE;gBAChD,OAAO,CAAC,CAAC;aACZ;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9D,OAAO,CAAC,CAAC;aACZ;YACD,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;YACf,OAAO,CAAC,CAAC;QACb,CAAC,EAAE,EAAS,CAAC,CAAC;QACd,OAAO,CAAC,CAAC;KACZ;IACD,OAAO,CAAkB,CAAC;AAC9B,CAAC,CAAC;AAjDW,QAAA,cAAc,kBAiDzB"}
|
package/package.json
ADDED
@@ -0,0 +1,33 @@
|
|
1
|
+
{
|
2
|
+
"name": "zeus-form",
|
3
|
+
"version": "0.1.1",
|
4
|
+
"description": "Easy form creation with GraphQL Editor and React",
|
5
|
+
"main": "lib/index.js",
|
6
|
+
"scripts": {
|
7
|
+
"test": "jest",
|
8
|
+
"test:watch": "jest --watch",
|
9
|
+
"build": "ttsc -p tsconfig.build.json",
|
10
|
+
"start": "ttsc -p tsconfig.build.json --watch",
|
11
|
+
"lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
|
12
|
+
},
|
13
|
+
"types": "lib/index.d.ts",
|
14
|
+
"private": false,
|
15
|
+
"publishConfig": {
|
16
|
+
"access": "public"
|
17
|
+
},
|
18
|
+
"repository": {
|
19
|
+
"type": "git",
|
20
|
+
"url": "git+https://github.com/graphql-editor/graphql-form.git"
|
21
|
+
},
|
22
|
+
"author": "Aexol <aexol@aexol.com> (http://aexol.com)",
|
23
|
+
"license": "MIT",
|
24
|
+
"homepage": "https://form.graphqleditor.com",
|
25
|
+
"devDependencies": {},
|
26
|
+
"peerDependencies": {
|
27
|
+
"react": ">=16.8.0",
|
28
|
+
"react-dom": ">=16.8.0"
|
29
|
+
},
|
30
|
+
"dependencies": {
|
31
|
+
"graphql-js-tree": "^0.1.1"
|
32
|
+
}
|
33
|
+
}
|
@@ -0,0 +1,87 @@
|
|
1
|
+
import { InputFormProps, FormObject, FormValue } from '@/models';
|
2
|
+
import { Renderer } from '@/renderer';
|
3
|
+
import { resolveQlValue } from '@/resolve';
|
4
|
+
import { getTypeName, Options, Parser, ParserField, TypeDefinition, ValueDefinition } from 'graphql-js-tree';
|
5
|
+
import React, { useMemo } from 'react';
|
6
|
+
|
7
|
+
export function InputForm<T>({ onChange, schema, values, inputName, ...props }: InputFormProps<T>) {
|
8
|
+
const nodes = useMemo(() => {
|
9
|
+
return Parser.parse(schema).nodes;
|
10
|
+
}, [schema]);
|
11
|
+
|
12
|
+
const formObject = useMemo(() => {
|
13
|
+
const node = nodes.find(
|
14
|
+
(n) => n.name === inputName && n.data.type === TypeDefinition.InputObjectTypeDefinition,
|
15
|
+
);
|
16
|
+
if (!node) throw new Error(`Invalid node: "${inputName}". Your schema does not have such input node.`);
|
17
|
+
const v = {
|
18
|
+
[inputName]: values,
|
19
|
+
};
|
20
|
+
return buildForm<typeof v>({
|
21
|
+
node,
|
22
|
+
nodes,
|
23
|
+
values: v,
|
24
|
+
});
|
25
|
+
}, [inputName, values]);
|
26
|
+
|
27
|
+
return (
|
28
|
+
<Renderer
|
29
|
+
{...props}
|
30
|
+
nodes={nodes}
|
31
|
+
formObject={formObject}
|
32
|
+
key={inputName}
|
33
|
+
currentPath={inputName}
|
34
|
+
onChange={(changedForm: FormObject) => {
|
35
|
+
const toValue = resolveQlValue({ v: changedForm, nodes });
|
36
|
+
onChange(toValue as Partial<T>);
|
37
|
+
}}
|
38
|
+
f={formObject.__form__node}
|
39
|
+
/>
|
40
|
+
);
|
41
|
+
}
|
42
|
+
|
43
|
+
function buildForm<T>(props: {
|
44
|
+
node: ParserField;
|
45
|
+
nodes: ParserField[];
|
46
|
+
values?: any;
|
47
|
+
switchInput?: boolean;
|
48
|
+
switchFieldName?: string;
|
49
|
+
}): FormObject {
|
50
|
+
const { node, nodes, values } = props;
|
51
|
+
if (
|
52
|
+
node.type.fieldType.type === Options.array ||
|
53
|
+
(node.type.fieldType.type === Options.required && node.type.fieldType.nest.type === Options.array)
|
54
|
+
) {
|
55
|
+
return {
|
56
|
+
__form__node: node,
|
57
|
+
__form__value: values?.[node.name]?.map((av: any) => ({
|
58
|
+
__form__node: node,
|
59
|
+
__form__value: av,
|
60
|
+
})),
|
61
|
+
};
|
62
|
+
}
|
63
|
+
const seekNode = nodes.find((n) => n.name === getTypeName(node.type.fieldType));
|
64
|
+
const isFieldOfInputType =
|
65
|
+
node.data.type === ValueDefinition.InputValueDefinition &&
|
66
|
+
seekNode?.data.type === TypeDefinition.InputObjectTypeDefinition;
|
67
|
+
|
68
|
+
if (isFieldOfInputType) {
|
69
|
+
return buildForm({ ...props, node: seekNode, switchInput: true, switchFieldName: node.name });
|
70
|
+
}
|
71
|
+
const isInputType = node.data.type === TypeDefinition.InputObjectTypeDefinition;
|
72
|
+
if (isInputType) {
|
73
|
+
const valueObject = node.args.reduce<Record<string, FormValue>>((a, b) => {
|
74
|
+
const fv = buildForm({ ...props, node: b, values: values?.[props.switchFieldName || node.name] || {} });
|
75
|
+
a[b.name] = fv;
|
76
|
+
return a;
|
77
|
+
}, {});
|
78
|
+
return {
|
79
|
+
__form__node: props.switchInput ? { ...node, data: { type: ValueDefinition.InputValueDefinition } } : node,
|
80
|
+
__form__value: valueObject,
|
81
|
+
};
|
82
|
+
}
|
83
|
+
return {
|
84
|
+
__form__node: node,
|
85
|
+
__form__value: values?.[node.name],
|
86
|
+
};
|
87
|
+
}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import { FormObject } from '@/models';
|
2
|
+
import { Options, ParserField, TypeDefinition } from 'graphql-js-tree';
|
3
|
+
|
4
|
+
// Global Arrange
|
5
|
+
export const typeNode: ParserField = {
|
6
|
+
name: 'Type',
|
7
|
+
args: [],
|
8
|
+
data: { type: TypeDefinition.ObjectTypeDefinition },
|
9
|
+
directives: [],
|
10
|
+
interfaces: [],
|
11
|
+
type: { fieldType: { name: 'type', type: Options.name } },
|
12
|
+
};
|
13
|
+
|
14
|
+
export const inputNode: ParserField = {
|
15
|
+
name: 'Input',
|
16
|
+
args: [],
|
17
|
+
data: { type: TypeDefinition.InputObjectTypeDefinition },
|
18
|
+
directives: [],
|
19
|
+
interfaces: [],
|
20
|
+
type: { fieldType: { name: 'type', type: Options.name } },
|
21
|
+
};
|
22
|
+
|
23
|
+
export const nodeWithArgs: ParserField = {
|
24
|
+
name: 'Root',
|
25
|
+
args: [typeNode, inputNode],
|
26
|
+
data: { type: TypeDefinition.ObjectTypeDefinition },
|
27
|
+
directives: [],
|
28
|
+
interfaces: [],
|
29
|
+
type: { fieldType: { name: 'type', type: Options.name } },
|
30
|
+
};
|
31
|
+
|
32
|
+
export const singleNode: ParserField[] = [typeNode];
|
33
|
+
export const nodes: ParserField[] = [typeNode, inputNode, nodeWithArgs];
|
34
|
+
|
35
|
+
export const fields: Record<string, FormObject> = { test: { node: typeNode, value: 5 } };
|
36
|
+
export const extenedFields: Record<string, FormObject> = { testInput: { node: inputNode, value: fields } };
|
37
|
+
export const fieldsNodeWithArgs: Record<string, FormObject> = { testInput: { node: nodeWithArgs, value: fields } };
|
38
|
+
export const fieldsNodeWithArgsWithInput: Record<string, FormObject> = {
|
39
|
+
testInput: { node: nodeWithArgs, value: extenedFields },
|
40
|
+
};
|
package/src/index.tsx
ADDED
package/src/models.ts
ADDED
@@ -0,0 +1,101 @@
|
|
1
|
+
import { ParserField } from 'graphql-js-tree';
|
2
|
+
import React from 'react';
|
3
|
+
|
4
|
+
export type FieldComponent = React.FC<PassedFormProps>;
|
5
|
+
|
6
|
+
export type FormLabelProps = React.FC<PassedFormProps & { open?: boolean; setOpen: (b: boolean) => void }>;
|
7
|
+
|
8
|
+
export type WidgetSavedData = {
|
9
|
+
widget: string;
|
10
|
+
[x: string]: unknown;
|
11
|
+
};
|
12
|
+
|
13
|
+
export type SavedWidgets = {
|
14
|
+
[selector: string]: WidgetSavedData | undefined;
|
15
|
+
};
|
16
|
+
|
17
|
+
export const enum Errs {
|
18
|
+
REQUIRED = 'REQUIRED',
|
19
|
+
VALUE_IN_ARRAY_REQUIRED = 'VALUE_IN_ARRAY_REQUIRED',
|
20
|
+
}
|
21
|
+
|
22
|
+
export type Errors = {
|
23
|
+
[selector: string]: string;
|
24
|
+
};
|
25
|
+
|
26
|
+
export type SavedForms = {
|
27
|
+
[selector: string]: FormObject;
|
28
|
+
};
|
29
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
30
|
+
export type ReturnedDictType = any;
|
31
|
+
|
32
|
+
export type WidgetVariantType = {
|
33
|
+
name: string;
|
34
|
+
widget: string;
|
35
|
+
data: ReturnedDictType;
|
36
|
+
};
|
37
|
+
|
38
|
+
export type PassedFormProps<WidgetData = ReturnedDictType> = {
|
39
|
+
f: ParserField;
|
40
|
+
nodes: ParserField[];
|
41
|
+
formObject: FormObject;
|
42
|
+
onChange: (formObject: FormObject) => void;
|
43
|
+
required?: boolean;
|
44
|
+
widgetComponents: WidgetType[];
|
45
|
+
widgetVariants?: WidgetVariantType[];
|
46
|
+
currentPath: string;
|
47
|
+
widgets?: SavedWidgets;
|
48
|
+
widgetData?: WidgetData;
|
49
|
+
errors?: Errors;
|
50
|
+
components: {
|
51
|
+
ArrayField: FieldComponent;
|
52
|
+
ObjectField: FieldComponent;
|
53
|
+
BooleanField: FieldComponent;
|
54
|
+
UniversalField: FieldComponent;
|
55
|
+
NumberField: FieldComponent;
|
56
|
+
EnumField: FieldComponent;
|
57
|
+
NullField: FieldComponent;
|
58
|
+
FormLabel: FormLabelProps;
|
59
|
+
FormField: FieldComponent;
|
60
|
+
};
|
61
|
+
};
|
62
|
+
export type FormFile = {
|
63
|
+
widgets?: SavedWidgets;
|
64
|
+
forms?: SavedForms;
|
65
|
+
};
|
66
|
+
|
67
|
+
export type InputFormProps<InputZeusType> = Omit<
|
68
|
+
PassedFormProps,
|
69
|
+
'formObject' | 'onChange' | 'f' | 'currentPath' | 'changeWidget' | 'widgets' | 'nodes' | 'formFile' | 'runQuery'
|
70
|
+
> & {
|
71
|
+
schema: string;
|
72
|
+
inputName: string;
|
73
|
+
values: Partial<InputZeusType>;
|
74
|
+
onChange: (o: Partial<InputZeusType>) => void;
|
75
|
+
};
|
76
|
+
export type InputFormLibraryProps<T> = Omit<InputFormProps<T>, 'required' | 'components'>;
|
77
|
+
|
78
|
+
export type WidgetProps<Props> = {
|
79
|
+
Component: React.FC<PassedFormProps<Props>>;
|
80
|
+
name: string;
|
81
|
+
};
|
82
|
+
|
83
|
+
export type WidgetType = WidgetProps<ReturnedDictType>;
|
84
|
+
|
85
|
+
export type FormValueBase =
|
86
|
+
| { __form__value: FormValue }
|
87
|
+
| {
|
88
|
+
[x: string]: FormValue;
|
89
|
+
}
|
90
|
+
| string
|
91
|
+
| boolean
|
92
|
+
| number
|
93
|
+
| null
|
94
|
+
| undefined
|
95
|
+
| Array<FormValue>;
|
96
|
+
export type FormValue = FormValueBase | FormObject;
|
97
|
+
|
98
|
+
export type FormObject = {
|
99
|
+
__form__value?: FormValue;
|
100
|
+
__form__node: ParserField;
|
101
|
+
};
|
@@ -0,0 +1,102 @@
|
|
1
|
+
import { Errs, FormObject, FormValue, PassedFormProps } from '@/models';
|
2
|
+
import { getTypeName, Options, ScalarTypes, ValueDefinition } from 'graphql-js-tree';
|
3
|
+
|
4
|
+
export const getWidgetFromProps = (props: PassedFormProps) => {
|
5
|
+
const w = props.widgets?.[props.currentPath];
|
6
|
+
const FoundBasicWidget = props.widgetComponents.find((wc) => wc.name === w?.widget);
|
7
|
+
if (!FoundBasicWidget) {
|
8
|
+
const widgetVariant = props.widgetVariants?.find((wv) => wv.name === w?.widget);
|
9
|
+
if (!widgetVariant) {
|
10
|
+
return;
|
11
|
+
}
|
12
|
+
const FoundVariantWidget = props.widgetComponents.find((wc) => wc.name === widgetVariant.widget);
|
13
|
+
if (!FoundVariantWidget) {
|
14
|
+
return;
|
15
|
+
}
|
16
|
+
return {
|
17
|
+
data: {
|
18
|
+
widget: widgetVariant.widget,
|
19
|
+
...widgetVariant.data,
|
20
|
+
},
|
21
|
+
widget: FoundVariantWidget,
|
22
|
+
};
|
23
|
+
}
|
24
|
+
return {
|
25
|
+
data: w,
|
26
|
+
widget: FoundBasicWidget,
|
27
|
+
};
|
28
|
+
};
|
29
|
+
export const getErrorFromProps = (props: PassedFormProps) => {
|
30
|
+
return props.errors?.[props.currentPath];
|
31
|
+
};
|
32
|
+
|
33
|
+
export const graphqlFormUtils = () => {
|
34
|
+
const validateValue = (f: FormValue, path: string, pushErrors: (path: string, value: Errs) => void) => {
|
35
|
+
if (
|
36
|
+
f === null ||
|
37
|
+
typeof f === 'string' ||
|
38
|
+
typeof f === 'boolean' ||
|
39
|
+
typeof f === 'number' ||
|
40
|
+
typeof f === 'undefined'
|
41
|
+
) {
|
42
|
+
return;
|
43
|
+
}
|
44
|
+
if (
|
45
|
+
'__form__node' in f &&
|
46
|
+
typeof f.__form__node === 'object' &&
|
47
|
+
f.__form__node !== null &&
|
48
|
+
'args' in f.__form__node &&
|
49
|
+
'data' in f.__form__node &&
|
50
|
+
typeof f.__form__node.data === 'object' &&
|
51
|
+
!!f.__form__node.data &&
|
52
|
+
'type' in f.__form__node.data &&
|
53
|
+
'directives' in f.__form__node
|
54
|
+
) {
|
55
|
+
const { __form__node, __form__value } = f as FormObject;
|
56
|
+
if (__form__node.data.type === ValueDefinition.InputValueDefinition) {
|
57
|
+
if (
|
58
|
+
__form__node.type.fieldType.type === Options.required &&
|
59
|
+
getTypeName(__form__node.type.fieldType) !== ScalarTypes.Boolean
|
60
|
+
) {
|
61
|
+
if (typeof __form__value === 'undefined' || __form__value === '') {
|
62
|
+
pushErrors(path, Errs.REQUIRED);
|
63
|
+
}
|
64
|
+
if (Array.isArray(__form__value)) {
|
65
|
+
for (const v of __form__value) {
|
66
|
+
validateValue(v, path, pushErrors);
|
67
|
+
}
|
68
|
+
}
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
72
|
+
if ('__form__value' in f && !!f.__form__value) {
|
73
|
+
const { __form__value } = f;
|
74
|
+
if (Array.isArray(__form__value)) {
|
75
|
+
__form__value.map((vv) => validateValue(vv, path, pushErrors));
|
76
|
+
return;
|
77
|
+
}
|
78
|
+
if (typeof __form__value === 'object' && !!__form__value) {
|
79
|
+
Object.entries(__form__value).forEach(([k, v]) =>
|
80
|
+
validateValue(v as FormObject, `${path}.${k}`, pushErrors),
|
81
|
+
);
|
82
|
+
return;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
return;
|
86
|
+
};
|
87
|
+
|
88
|
+
const validateForm = (v: FormObject, errors: Record<Errs, string>) => {
|
89
|
+
const errorDict: Record<string, string> = {};
|
90
|
+
Object.entries(v.__form__value as Record<string, FormObject>).forEach(([k, val]) => {
|
91
|
+
validateValue(val, k, (p, err) => {
|
92
|
+
errorDict[p] = errors[err];
|
93
|
+
});
|
94
|
+
});
|
95
|
+
return errorDict;
|
96
|
+
};
|
97
|
+
|
98
|
+
return {
|
99
|
+
validateForm,
|
100
|
+
validateValue,
|
101
|
+
};
|
102
|
+
};
|
@@ -0,0 +1,61 @@
|
|
1
|
+
import { PassedFormProps } from '@/models';
|
2
|
+
import { getWidgetFromProps } from '@/outsideUse';
|
3
|
+
import { getTypeName, Options, ScalarTypes, TypeDefinition } from 'graphql-js-tree';
|
4
|
+
import React from 'react';
|
5
|
+
|
6
|
+
export const Fields: React.FC<PassedFormProps> = (props) => {
|
7
|
+
const {
|
8
|
+
nodes,
|
9
|
+
f,
|
10
|
+
components: { ArrayField, ObjectField },
|
11
|
+
} = props;
|
12
|
+
const seekNode = nodes.find((n) => n.name === getTypeName(f.type.fieldType));
|
13
|
+
const isInput = f.data.type === TypeDefinition.InputObjectTypeDefinition;
|
14
|
+
if (isInput) {
|
15
|
+
return <ObjectField {...props} />;
|
16
|
+
}
|
17
|
+
const isFieldInput = seekNode?.data.type === TypeDefinition.InputObjectTypeDefinition;
|
18
|
+
if (f.type.fieldType.type === Options.array) {
|
19
|
+
return <ArrayField {...props} />;
|
20
|
+
}
|
21
|
+
if (isFieldInput) {
|
22
|
+
return <ObjectField {...props} f={seekNode} />;
|
23
|
+
}
|
24
|
+
const w = getWidgetFromProps(props);
|
25
|
+
if (w) {
|
26
|
+
const {
|
27
|
+
data,
|
28
|
+
widget: { Component },
|
29
|
+
} = w;
|
30
|
+
return <Component {...props} widgetData={data} />;
|
31
|
+
}
|
32
|
+
return <ScalarField {...props} />;
|
33
|
+
};
|
34
|
+
const ScalarField: React.FC<PassedFormProps> = (props) => {
|
35
|
+
const {
|
36
|
+
f,
|
37
|
+
nodes,
|
38
|
+
children,
|
39
|
+
components: { BooleanField, NumberField, EnumField, UniversalField },
|
40
|
+
} = props;
|
41
|
+
const typeName = getTypeName(f.type.fieldType);
|
42
|
+
const seekNode = nodes.find((n) => n.name === getTypeName(f.type.fieldType));
|
43
|
+
if (
|
44
|
+
typeName === ScalarTypes.String ||
|
45
|
+
typeName === ScalarTypes.ID ||
|
46
|
+
seekNode?.data.type === TypeDefinition.ScalarTypeDefinition
|
47
|
+
) {
|
48
|
+
return <UniversalField {...props} />;
|
49
|
+
}
|
50
|
+
|
51
|
+
if (typeName === ScalarTypes.Float || typeName === ScalarTypes.Int) {
|
52
|
+
return <NumberField {...props} />;
|
53
|
+
}
|
54
|
+
if (typeName === ScalarTypes.Boolean) {
|
55
|
+
return <BooleanField {...props} />;
|
56
|
+
}
|
57
|
+
if (seekNode?.data.type === TypeDefinition.EnumTypeDefinition) {
|
58
|
+
return <EnumField {...props} />;
|
59
|
+
}
|
60
|
+
return <>{children}</>;
|
61
|
+
};
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import { PassedFormProps } from '@/models';
|
2
|
+
import { Fields } from '@/renderer/fields';
|
3
|
+
import { Options, getTypeName, TypeDefinition } from 'graphql-js-tree';
|
4
|
+
import React, { useState } from 'react';
|
5
|
+
|
6
|
+
export const Renderer: React.FC<PassedFormProps> = (props) => {
|
7
|
+
const {
|
8
|
+
formObject,
|
9
|
+
f,
|
10
|
+
nodes,
|
11
|
+
components: { NullField, FormLabel, FormField },
|
12
|
+
} = props;
|
13
|
+
const { children, ...allProps } = props;
|
14
|
+
const seekNode = nodes.find((n) => n.name === getTypeName(f.type.fieldType));
|
15
|
+
const isInput = seekNode?.data.type === TypeDefinition.InputObjectTypeDefinition;
|
16
|
+
const [open, setOpen] = useState(props.required);
|
17
|
+
if (f.type.fieldType.type === Options.required) {
|
18
|
+
return (
|
19
|
+
<Renderer
|
20
|
+
{...props}
|
21
|
+
f={{
|
22
|
+
...f,
|
23
|
+
type: { ...f.type, fieldType: { ...f.type.fieldType.nest } },
|
24
|
+
}}
|
25
|
+
required={true}
|
26
|
+
/>
|
27
|
+
);
|
28
|
+
}
|
29
|
+
return (
|
30
|
+
<FormField {...allProps}>
|
31
|
+
<FormLabel {...allProps} open={open} setOpen={setOpen} children={children} />
|
32
|
+
{formObject.__form__value === null ? (
|
33
|
+
<NullField {...allProps} />
|
34
|
+
) : (
|
35
|
+
<>{(!isInput || open) && <Fields {...allProps} />}</>
|
36
|
+
)}
|
37
|
+
</FormField>
|
38
|
+
);
|
39
|
+
};
|
package/src/resolve.ts
ADDED
@@ -0,0 +1,53 @@
|
|
1
|
+
import { FormValue, FormValueBase } from '@/models';
|
2
|
+
import { Options, ParserField } from 'graphql-js-tree';
|
3
|
+
|
4
|
+
export const resolveQlValue = ({ v, nodes }: { v: FormValue | undefined; nodes: ParserField[] }): FormValueBase => {
|
5
|
+
if (typeof v === 'undefined') {
|
6
|
+
return;
|
7
|
+
}
|
8
|
+
if (v === null) {
|
9
|
+
return v;
|
10
|
+
}
|
11
|
+
if (Array.isArray(v)) {
|
12
|
+
if (v.length === 0) return;
|
13
|
+
return v.map((vv) => resolveQlValue({ v: vv, nodes }));
|
14
|
+
}
|
15
|
+
if (typeof v === 'object') {
|
16
|
+
if ('__form__value' in v) {
|
17
|
+
if ('__form__node' in v) {
|
18
|
+
const n = v.__form__node as ParserField;
|
19
|
+
if (n.type.fieldType.type === Options.required) {
|
20
|
+
return resolveQlValue({
|
21
|
+
v: {
|
22
|
+
__form__node: {
|
23
|
+
...n,
|
24
|
+
type: {
|
25
|
+
...n.type,
|
26
|
+
fieldType: {
|
27
|
+
...n.type.fieldType.nest,
|
28
|
+
},
|
29
|
+
},
|
30
|
+
},
|
31
|
+
__form__value: v.__form__value,
|
32
|
+
},
|
33
|
+
nodes,
|
34
|
+
});
|
35
|
+
}
|
36
|
+
}
|
37
|
+
return resolveQlValue({ v: v.__form__value, nodes });
|
38
|
+
}
|
39
|
+
const e = Object.entries(v).reduce((a, [key, val]) => {
|
40
|
+
const value = resolveQlValue({ v: val as FormValue, nodes });
|
41
|
+
if (typeof value === 'undefined' || value === null) {
|
42
|
+
return a;
|
43
|
+
}
|
44
|
+
if (typeof value === 'object' && Object.keys(value).length === 0) {
|
45
|
+
return a;
|
46
|
+
}
|
47
|
+
a[key] = value;
|
48
|
+
return a;
|
49
|
+
}, {} as any);
|
50
|
+
return e;
|
51
|
+
}
|
52
|
+
return v as FormValueBase;
|
53
|
+
};
|
@@ -0,0 +1,36 @@
|
|
1
|
+
{
|
2
|
+
"compilerOptions": {
|
3
|
+
"target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
|
4
|
+
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
|
5
|
+
"jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
|
6
|
+
"declaration": true /* Generates corresponding '.d.ts' file. */,
|
7
|
+
|
8
|
+
"sourceMap": true /* Generates corresponding '.map' file. */,
|
9
|
+
|
10
|
+
"outDir": "./lib" /* Redirect output structure to the directory. */,
|
11
|
+
"rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
|
12
|
+
|
13
|
+
"isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
|
14
|
+
|
15
|
+
"strict": true /* Enable all strict type-checking options. */,
|
16
|
+
|
17
|
+
"baseUrl": "./src" /* Base directory to resolve non-absolute module names. */,
|
18
|
+
"paths": {
|
19
|
+
"@/*": ["./*"]
|
20
|
+
} /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
|
21
|
+
|
22
|
+
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
|
23
|
+
"skipLibCheck": true /* Skip type checking of declaration files. */,
|
24
|
+
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
|
25
|
+
"plugins": [
|
26
|
+
{
|
27
|
+
"transform": "typescript-transform-paths"
|
28
|
+
},
|
29
|
+
{
|
30
|
+
"transform": "typescript-transform-paths",
|
31
|
+
"afterDeclarations": true
|
32
|
+
}
|
33
|
+
]
|
34
|
+
},
|
35
|
+
"exclude": ["**/__tests__/*", "**/__sandbox__/*", "./lib", "jest.config.ts"]
|
36
|
+
}
|
package/tsconfig.json
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
{
|
2
|
+
"compilerOptions": {
|
3
|
+
"target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
|
4
|
+
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
|
5
|
+
"jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
|
6
|
+
"sourceMap": true /* Generates corresponding '.map' file. */,
|
7
|
+
"rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
|
8
|
+
"isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
|
9
|
+
"strict": true /* Enable all strict type-checking options. */,
|
10
|
+
"baseUrl": "./src" /* Base directory to resolve non-absolute module names. */,
|
11
|
+
"outDir": "./lib",
|
12
|
+
"paths": {
|
13
|
+
"@/*": ["./*"]
|
14
|
+
} /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
|
15
|
+
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
|
16
|
+
"skipLibCheck": true /* Skip type checking of declaration files. */,
|
17
|
+
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
|
18
|
+
"composite": true
|
19
|
+
}
|
20
|
+
}
|