Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@replit/clui-gql
Advanced tools
@replit/clui-gql - npm Package Compare versions
Comparing version 0.0.5 to 0.0.6
| { | ||
| "name": "@replit/clui-gql", | ||
| "version": "0.0.5", | ||
| "version": "0.0.6", | ||
| "description": "A utility to transform GraphQL introspection type into a CLUI command", | ||
| "main": "dist/index.js", | ||
| "types": "dist/index.d.ts", | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "scripts": { | ||
| "build": "rm -rf dist && tsc", | ||
| "codegen": "graphql-codegen --config codegen.yml", | ||
| "prepublishOnly": "npm run test && npm run build", | ||
| "typedoc:build": "typedoc src", | ||
| "typedoc:serve": "npm run typedoc:build && npx serve docs", | ||
| "test": "npm-run-all --parallel test:*", | ||
| "test:format": "prettier --check \"src/**/*.{js,json,ts,tsx}\"", | ||
| "test:lint": "eslint src/ --ext .js,.ts,.tsx", | ||
| "test:tsc": "tsc", | ||
| "test:unit": "jest" | ||
| }, | ||
| "author": "moudy@repl.it", | ||
| "license": "MIT", | ||
| "devDependencies": { | ||
| "@graphql-codegen/cli": "^1.11.2", | ||
| "@graphql-codegen/introspection": "1.11.2", | ||
| "@graphql-codegen/typescript": "1.11.2", | ||
| "@graphql-codegen/typescript-operations": "^1.11.2", | ||
| "@types/jest": "^24.9.0", | ||
| "@types/node": "^13.1.8", | ||
| "@typescript-eslint/eslint-plugin": "^2.17.0", | ||
| "@typescript-eslint/parser": "^2.17.0", | ||
| "eslint": "^6.8.0", | ||
| "eslint-config-airbnb-base": "^14.0.0", | ||
| "eslint-config-prettier": "^6.9.0", | ||
| "eslint-import-resolver-typescript": "^2.0.0", | ||
| "eslint-plugin-import": "^2.20.0", | ||
| "eslint-plugin-jest": "^23.6.0", | ||
| "eslint-plugin-jsx-a11y": "^6.2.3", | ||
| "eslint-plugin-prettier": "^3.1.2", | ||
| "graphql": "^14.5.8", | ||
| "graphql-tag": "^2.10.1", | ||
| "husky": "^4.0.10", | ||
| "jest": "^24.9.0", | ||
| "lint-staged": "^10.0.1", | ||
| "npm-run-all": "^4.1.5", | ||
| "prettier": "^1.19.1", | ||
| "ts-jest": "^24.3.0", | ||
| "typedoc": "^0.16.7", | ||
| "typescript": "^3.7.5" | ||
| "peerDependencies": { | ||
| "@replit/clui-input": "^0.0.8", | ||
| "graphql": "^14.5.8" | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "lint-staged" | ||
| } | ||
| }, | ||
| "lint-staged": { | ||
| "*.{js,ts,tsx}": [ | ||
| "eslint --fix", | ||
| "prettier --write", | ||
| "git add" | ||
| ] | ||
| } | ||
| } | ||
| "main": "index.js", | ||
| "types": "index.d.ts" | ||
| } |
| # CLUI GraphQL | ||
| `@replit/clui-gql` is a small utility that transforms [GraphQL introspection](https://graphql.org/learn/introspection) data for a type into commands. | ||
| `@replit/clui-gql` is a utility libray for building [CLUI](https://github.com/replit/clui) commands from [GraphQL introspection](https://graphql.org/learn/introspection) data. | ||
| ## Install | ||
@@ -14,11 +13,23 @@ | ||
| ```js | ||
| import { toCommand } from '@replit/clui-gql'; | ||
| To create a tree of CLUI commands call `toCommand` and then `visit` eash command to defined a run function. | ||
| const command = toCommand({ | ||
| ```jsx | ||
| import { toCommand, visit } from '@replit/clui-gql'; | ||
| import { introspectionFromSchema } from 'graphql'; | ||
| import schema from './your-graphql-schema'; | ||
| // on server | ||
| const introspection = introspectionFromSchema(schema); | ||
| // on client | ||
| const introspection = makeNetworkRequestForData(); | ||
| // Create a command tree from graphql introspection data. This could be done on | ||
| // the server or the client. | ||
| const root = toCommand({ | ||
| // 'query' or 'mutation' | ||
| operation: 'query', | ||
| // GraphQL introspection data for type | ||
| type: TypeInfo, | ||
| // The name of the graphql type that has the fields that act as top level commands | ||
| rootTypeName: 'CluiCommands' | ||
@@ -28,7 +39,7 @@ // the path at wich the above type appears in the graph | ||
| // Return a `run` function for given command | ||
| runFn: (gqlOptions) => (runOptions) => doSomehtingWith({ gqlOptions, runOptions }), | ||
| // GraphQL introspection data | ||
| introspectionSchema: introspection.__schema, | ||
| // Configure fields and fragments for GraphQL operation | ||
| outputFn: () => ({ | ||
| // Configure fields and fragments for the output of the GraphQL operation string | ||
| output: () => ({ | ||
| fields: '...Output', | ||
@@ -46,2 +57,51 @@ fragments: ` | ||
| }); | ||
| // Define some application specific behavior for when a command is `run` | ||
| visit(root, (command) => { | ||
| if (command.outputType !== 'YourOutputTypes') { | ||
| // If command does not match an output type you may want do something differeny. | ||
| By omitting the run function the command acts as a namespace for sub-commands. | ||
| return; | ||
| } | ||
| command.run = (options) => { | ||
| return <OutputView command={command} options={options} /> | ||
| } | ||
| } | ||
| ``` | ||
| 'parseArgs' is a helper for working with args | ||
| ```jsx | ||
| import { parse } from 'graphql'; | ||
| import { parseArgs } from '@replit/clui-gql'; | ||
| const OutputView = (props) => { | ||
| // CLIU command generated from graphql | ||
| const { command } = props; | ||
| // CLUI args | ||
| const { args } = props.options; | ||
| const parsed = parseArgs({ command, args }); | ||
| // Handle state for submitting command based on parsed args | ||
| if (parsed.missing.required) { | ||
| return <HandleMissingArgs />; | ||
| } | ||
| if (parsed.missing.optional) { | ||
| return <PotentiallyShowOptinalInputs />; | ||
| } | ||
| if (command.query) { | ||
| graphQLClient.query(parse(command.query), { variables: parsed.variables }) | ||
| } else if (command.mutation) { | ||
| graphQLClient.mutate(parse(command.mutation), { variables: parsed.variables }) | ||
| } | ||
| // ...render UI to comunicate above state | ||
| } | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by51.97%
32668
- Dev dependency count
- decreased by-100%
0
- Number of package files
- increased by81.82%
20
- Lines of code
- increased by71.85%
519
- Number of lines in readme file
- increased by133.33%
105
Worsened metrics
- Dependency count
- increased byInfinity%
2
No dependency changes