@apollo-elements/create
Advanced tools
Comparing version 1.3.0 to 1.4.0-alpha.0
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
const RESET = '\x1b[0m'; | ||
const BRIGHT = '\x1b[1m'; | ||
exports.default = `${BRIGHT} | ||
const chalk_1 = require("chalk"); | ||
exports.default = chalk_1.bold(` | ||
@@ -40,4 +39,3 @@ @@@@@@@@@ | ||
Apollo Elements | ||
${RESET} | ||
`; | ||
`); | ||
//# sourceMappingURL=banner.js.map |
@@ -1,6 +0,4 @@ | ||
const RESET = '\x1b[0m'; | ||
const BRIGHT = '\x1b[1m'; | ||
import { bold } from 'chalk'; | ||
export default bold(` | ||
export default `${BRIGHT} | ||
@@@@@@@@@ | ||
@@ -39,3 +37,2 @@ @@@@@@@@@@@@@@@@@ | ||
Apollo Elements | ||
${RESET} | ||
`; | ||
`); |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.codegen = void 0; | ||
const tslib_1 = require("tslib"); | ||
const execa_1 = tslib_1.__importDefault(require("execa")); | ||
const cli_1 = require("@graphql-codegen/cli"); | ||
const graphql_config_1 = require("graphql-config"); | ||
const path_1 = require("path"); | ||
const component_1 = require("./component"); | ||
const chalk_1 = require("chalk"); | ||
const cwd = process.cwd(); | ||
function getFailedFilename(options) { | ||
try { | ||
return `src/components/${component_1.getUnprefixedTagName(options)}/${component_1.getOperationFileName(options)}`; | ||
} | ||
catch { | ||
return 'the generated operation file'; | ||
} | ||
} | ||
function isComponentOptions(options) { | ||
// @ts-expect-error: yes it does | ||
const [argv1] = options._; | ||
return argv1 === 'component'; | ||
} | ||
/** | ||
@@ -13,6 +29,29 @@ * Run GraphQL codegen to develop an initial TypeScript schema | ||
return; | ||
console.log('\nGenerating TypeScript Schema...\n'); | ||
return await execa_1.default(options.pkgManager, [...(options.pkgManager === 'npm' ? ['run'] : []), 'build:codegen'], { cwd, stdio: 'inherit' }); | ||
console.log(`\n${chalk_1.cyan('Generating types from schema')}...\n`); | ||
try { | ||
const filepath = path_1.join(cwd, './.graphqlrc.yml'); | ||
const config = await graphql_config_1.loadConfig({ filepath }); | ||
if (!config) | ||
throw new Error('Could not find GraphQL config'); | ||
const { config: generateConfig, codegen } = config.projects.default.extensions; | ||
return await cli_1.generate({ | ||
...generateConfig, | ||
generates: codegen.generates, | ||
cwd, | ||
silent: true, | ||
}); | ||
} | ||
catch (error) { | ||
if (error.name === 'ListrError') { | ||
console.log(`${chalk_1.red('ERROR:')} Codegen did not succeed.\n`); | ||
error.errors.forEach((e) => console.log(e.message)); | ||
} | ||
else { | ||
const filename = isComponentOptions(options) ? chalk_1.blue(getFailedFilename(options)) : 'the operation definition'; | ||
console.log(`${chalk_1.yellow('WARNING:')} Codegen did not succeed. Do the generated GraphQL operations match your schema?`); | ||
console.log(` Check ${filename}`); | ||
} | ||
} | ||
} | ||
exports.codegen = codegen; | ||
//# sourceMappingURL=codegen.js.map |
import execa, { ExecaReturnValue } from 'execa'; | ||
import { BaseOptions } from './options'; | ||
import { generate } from '@graphql-codegen/cli'; | ||
import { loadConfig } from 'graphql-config'; | ||
import { BaseOptions, ComponentOptions } from './options'; | ||
import { join } from 'path'; | ||
import { getOperationFileName, getUnprefixedTagName } from './component'; | ||
import { blue, cyan, yellow, red } from 'chalk'; | ||
const cwd = process.cwd(); | ||
function getFailedFilename(options: ComponentOptions): string { | ||
try { | ||
return `src/components/${getUnprefixedTagName(options)}/${getOperationFileName(options)}`; | ||
} catch { | ||
return 'the generated operation file'; | ||
} | ||
} | ||
function isComponentOptions(options: BaseOptions): options is ComponentOptions { | ||
// @ts-expect-error: yes it does | ||
const [argv1] = options._; | ||
return argv1 === 'component'; | ||
} | ||
/** | ||
@@ -11,8 +29,26 @@ * Run GraphQL codegen to develop an initial TypeScript schema | ||
if (options.skipCodegen) return; | ||
console.log('\nGenerating TypeScript Schema...\n'); | ||
return await execa( | ||
options.pkgManager, | ||
[...(options.pkgManager === 'npm' ? ['run'] : []), 'build:codegen'], | ||
{ cwd, stdio: 'inherit' } | ||
); | ||
console.log(`\n${cyan('Generating types from schema')}...\n`); | ||
try { | ||
const filepath = join(cwd, './.graphqlrc.yml'); | ||
const config = await loadConfig({ filepath }); | ||
if (!config) | ||
throw new Error('Could not find GraphQL config'); | ||
const { config: generateConfig, codegen } = config.projects.default.extensions; | ||
return await generate({ | ||
...generateConfig, | ||
generates: codegen.generates, | ||
cwd, | ||
silent: true, | ||
}); | ||
} catch (error) { | ||
if (error.name === 'ListrError') { | ||
console.log(`${red('ERROR:')} Codegen did not succeed.\n`); | ||
error.errors.forEach((e: Error) => console.log(e.message)); | ||
} else { | ||
const filename = | ||
isComponentOptions(options) ? blue(getFailedFilename(options)) : 'the operation definition'; | ||
console.log(`${yellow('WARNING:')} Codegen did not succeed. Do the generated GraphQL operations match your schema?`); | ||
console.log(` Check ${filename}`); | ||
} | ||
} | ||
} |
import type { ComponentOptions } from './options'; | ||
export declare const getUnprefixedTagName: (options: ComponentOptions) => string; | ||
export declare const getOperationFileName: (options: ComponentOptions) => string; | ||
/** | ||
@@ -3,0 +5,0 @@ * Generate an Apollo Element |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.component = void 0; | ||
exports.component = exports.getOperationFileName = exports.getUnprefixedTagName = void 0; | ||
const tslib_1 = require("tslib"); | ||
@@ -12,2 +12,3 @@ const case_1 = require("case"); | ||
const files_1 = require("./files"); | ||
const chalk_1 = require("chalk"); | ||
const prompts_1 = tslib_1.__importDefault(require("prompts")); | ||
@@ -60,3 +61,3 @@ var FileKey; | ||
const getCssArray = memoize((options) => `[${getCSSImport(options) ? 'shared, ' : ''}style]`); | ||
const getUnprefixedTagName = memoize((options) => options | ||
exports.getUnprefixedTagName = memoize((options) => options | ||
.name | ||
@@ -66,3 +67,3 @@ .split('-') | ||
.join('-')); | ||
const getOperation = memoize((options) => case_1.pascal(getUnprefixedTagName(options))); | ||
const getOperation = memoize((options) => { var _a; return (_a = options.operationName) !== null && _a !== void 0 ? _a : case_1.pascal(exports.getUnprefixedTagName(options)); }); | ||
const getOperationName = memoize((options) => getDefaultOperationNames(getOperation(options))[options.type]); | ||
@@ -84,3 +85,3 @@ const getOperationVariables = memoize(function getOperationVariables(options) { | ||
}); | ||
const getComponentPathFromCWD = memoize((options) => { var _a; return path_1.join('src', 'components', (_a = options.subdir) !== null && _a !== void 0 ? _a : '', getUnprefixedTagName(options)); }); | ||
const getComponentPathFromCWD = memoize((options) => { var _a; return path_1.join('src', 'components', (_a = options.subdir) !== null && _a !== void 0 ? _a : '', exports.getUnprefixedTagName(options)); }); | ||
const getComponentAbsPath = memoize((options) => path_1.join(cwd, getComponentPathFromCWD(options))); | ||
@@ -98,3 +99,3 @@ const getSchemaPath = memoize((options) => { var _a; return (_a = options.schemaPath) !== null && _a !== void 0 ? _a : path_1.relative(getComponentAbsPath(options), path_1.join(cwd, 'src', 'schema')); }); | ||
const getDefaultOperationNames = memoize((operationName) => ({ | ||
mutation: `Update${operationName}`, | ||
mutation: `${operationName}`, | ||
query: operationName, | ||
@@ -104,3 +105,3 @@ subscription: operationName, | ||
const getDefaultVariables = memoize((operationName) => ({ | ||
mutation: `($input: Update${operationName}Input!)`, | ||
mutation: `($input: ${operationName}Input!)`, | ||
})); | ||
@@ -119,6 +120,6 @@ const getFieldArgs = memoize(function getFieldArgs(options) { | ||
query: DEFAULT_QUERY_FIELDS, | ||
mutation: `update${getOperation(options)}${getFieldArgs(options)} {\n\t\tid\n\t}`, | ||
mutation: `${case_1.camel(getOperation(options))}${getFieldArgs(options)} {\n\t\tid\n\t}`, | ||
})[options.type]); | ||
const getOperationFields = memoize((options) => { var _a; return (_a = options.fields) !== null && _a !== void 0 ? _a : getFields(options); }); | ||
const getOperationFileName = memoize((options) => `${getOperation(options)}.${options.type}.graphql`); | ||
exports.getOperationFileName = memoize((options) => `${getOperation(options)}.${options.type}.graphql`); | ||
const getOperationDataType = memoize((options) => `${getOperationName(options)}${case_1.capital(options.type)}`); | ||
@@ -132,3 +133,3 @@ const getInterpolations = memoize((options) => ({ | ||
OPERATION_FIELDS: getOperationFields(options), | ||
OPERATION_FILE_NAME: getOperationFileName(options), | ||
OPERATION_FILE_NAME: exports.getOperationFileName(options), | ||
OPERATION_NAME: getOperationName(options), | ||
@@ -139,7 +140,7 @@ OPERATION_TYPE: options.type, | ||
TAG_NAME: options.name, | ||
UNPREFIXED: getUnprefixedTagName(options), | ||
UNPREFIXED: exports.getUnprefixedTagName(options), | ||
})); | ||
const getFileBasenames = memoize((options) => ({ | ||
component: `${getUnprefixedTagName(options)}.ts`, | ||
style: `${getUnprefixedTagName(options)}.css`, | ||
component: `${exports.getUnprefixedTagName(options)}.ts`, | ||
style: `${exports.getUnprefixedTagName(options)}.css`, | ||
operation: getInterpolations(options).OPERATION_FILE_NAME, | ||
@@ -173,4 +174,4 @@ index: 'index.ts', | ||
const OUTPUT = files_1.processTemplate(await getTemplate(key), getInterpolations(options)); | ||
console.log(`Writing ${path_1.relative(cwd, PATH)}`); | ||
await files_1.writeFile(PATH, OUTPUT, 'utf-8'); | ||
console.log(`\tWrote ${chalk_1.green(path_1.relative(cwd, PATH))}`); | ||
} | ||
@@ -180,7 +181,7 @@ async function writeComponent(options) { | ||
return; | ||
console.log(`\nCreating ${options.name} in ${getComponentPathFromCWD(options)}\n`); | ||
console.log(`\nCreating ${chalk_1.green(options.name)} in ${getComponentPathFromCWD(options)}\n`); | ||
await mkdirp_1.default(getComponentAbsPath(options)); | ||
for (const key of Object.keys(FileKey)) | ||
await writeComponentFile(key, options); | ||
console.log('\nDone!'); | ||
console.log(`\n${chalk_1.greenBright('Done!')}`); | ||
} | ||
@@ -187,0 +188,0 @@ /** |
import type { ComponentOptions, Operation } from './options'; | ||
import { capital, pascal } from 'case'; | ||
import { capital, pascal, camel } from 'case'; | ||
@@ -12,2 +12,4 @@ import { promisify } from 'util'; | ||
import { processTemplate, readFile, writeFile } from './files'; | ||
import { green, greenBright } from 'chalk'; | ||
import prompts from 'prompts'; | ||
@@ -102,3 +104,3 @@ | ||
const getUnprefixedTagName = | ||
export const getUnprefixedTagName = | ||
memoize((options: ComponentOptions): string => | ||
@@ -113,2 +115,3 @@ options | ||
memoize((options: ComponentOptions): string => | ||
options.operationName ?? | ||
pascal(getUnprefixedTagName(options))); | ||
@@ -171,3 +174,3 @@ | ||
({ | ||
mutation: `Update${operationName}`, | ||
mutation: `${operationName}`, | ||
query: operationName, | ||
@@ -180,3 +183,3 @@ subscription: operationName, | ||
({ | ||
mutation: `($input: Update${operationName}Input!)`, | ||
mutation: `($input: ${operationName}Input!)`, | ||
})); | ||
@@ -200,3 +203,3 @@ | ||
query: DEFAULT_QUERY_FIELDS, | ||
mutation: `update${getOperation(options)}${getFieldArgs(options)} {\n\t\tid\n\t}`, | ||
mutation: `${camel(getOperation(options))}${getFieldArgs(options)} {\n\t\tid\n\t}`, | ||
})[options.type]); | ||
@@ -208,3 +211,3 @@ | ||
const getOperationFileName = | ||
export const getOperationFileName = | ||
memoize((options: ComponentOptions): string => | ||
@@ -279,5 +282,4 @@ `${getOperation(options)}.${options.type}.graphql`); | ||
console.log(`Writing ${relative(cwd, PATH)}`); | ||
await writeFile(PATH, OUTPUT, 'utf-8'); | ||
console.log(`\tWrote ${green(relative(cwd, PATH))}`); | ||
} | ||
@@ -289,3 +291,3 @@ | ||
console.log(`\nCreating ${options.name} in ${getComponentPathFromCWD(options)}\n`); | ||
console.log(`\nCreating ${green(options.name)} in ${getComponentPathFromCWD(options)}\n`); | ||
@@ -297,3 +299,3 @@ await mkdirp(getComponentAbsPath(options)); | ||
console.log('\nDone!'); | ||
console.log(`\n${greenBright('Done!')}`); | ||
} | ||
@@ -300,0 +302,0 @@ |
@@ -15,2 +15,3 @@ export interface BaseOptions { | ||
name: string; | ||
operationName: string; | ||
subdir?: string; | ||
@@ -17,0 +18,0 @@ type: Operation; |
@@ -18,2 +18,3 @@ export interface BaseOptions { | ||
name: string; | ||
operationName: string; | ||
subdir?: string; | ||
@@ -20,0 +21,0 @@ type: Operation; |
{ | ||
"name": "@apollo-elements/create", | ||
"version": "1.3.0", | ||
"version": "1.4.0-alpha.0", | ||
"description": "Scaffold apps and components with GraphQL and LitElement", | ||
@@ -11,3 +11,3 @@ "author": "Benny Powers <web@bennypowers.com>", | ||
"bin": { | ||
"create-app": "./index.js" | ||
"create-app": "index.js" | ||
}, | ||
@@ -47,2 +47,3 @@ "keywords": [ | ||
"case": "^1.6.3", | ||
"chalk": "^4.1.0", | ||
"execa": "^5.0.0", | ||
@@ -54,4 +55,3 @@ "mkdirp": "^1.0.4", | ||
"yargs": "^16.2.0" | ||
}, | ||
"gitHead": "b0ab58007f9e6ea3bb34ba003f127f0396089617" | ||
} | ||
} |
@@ -120,2 +120,7 @@ "use strict"; | ||
}) | ||
.option('operationName', { | ||
alias: 'o', | ||
type: 'string', | ||
description: 'GraphQL Operation name', | ||
}) | ||
.option('subdir', { | ||
@@ -165,29 +170,37 @@ alias: 'd', | ||
}); | ||
if (argv._.includes('app')) | ||
return await promptApp(argv).then(app_1.app); | ||
else if (argv._.includes('component')) | ||
return await promptComponent(argv).then(component_1.component); | ||
else { | ||
console.log(banner_1.default); | ||
const { generate } = await prompts_1.default({ | ||
name: 'generate', | ||
message: 'What would you like to generate?', | ||
type: 'select', | ||
choices: [{ | ||
title: 'App', | ||
value: 'app', | ||
description: 'Scaffold an app project', | ||
}, { | ||
title: 'Component', | ||
value: 'component', | ||
description: 'Scaffold a component for an existing app', | ||
}], | ||
}); | ||
switch (generate) { | ||
case 'app': return await promptApp(argv).then(app_1.app); | ||
case 'component': return await promptComponent(argv).then(component_1.component); | ||
try { | ||
if (argv._.includes('app')) | ||
return await promptApp(argv).then(app_1.app); | ||
else if (argv._.includes('component')) | ||
return await promptComponent(argv).then(component_1.component); | ||
else { | ||
console.log(banner_1.default); | ||
const { generate } = await prompts_1.default({ | ||
name: 'generate', | ||
message: 'What would you like to generate?', | ||
type: 'select', | ||
choices: [{ | ||
title: 'App', | ||
value: 'app', | ||
description: 'Scaffold an app project', | ||
}, { | ||
title: 'Component', | ||
value: 'component', | ||
description: 'Scaffold a component for an existing app', | ||
}], | ||
}); | ||
switch (generate) { | ||
case 'app': return await promptApp(argv).then(app_1.app); | ||
case 'component': return await promptComponent(argv).then(component_1.component); | ||
} | ||
} | ||
} | ||
catch (error) { | ||
if (error.command.includes('build:codegen')) | ||
return; | ||
else | ||
console.error(error); | ||
} | ||
} | ||
exports.prompt = prompt; | ||
//# sourceMappingURL=prompt.js.map |
@@ -129,2 +129,7 @@ import type { BaseOptions, AppOptions, ComponentOptions } from './options'; | ||
}) | ||
.option('operationName', { | ||
alias: 'o', | ||
type: 'string', | ||
description: 'GraphQL Operation name', | ||
}) | ||
.option('subdir', { | ||
@@ -175,29 +180,36 @@ alias: 'd', | ||
if (argv._.includes('app')) | ||
return await promptApp(argv).then(app); | ||
else if (argv._.includes('component')) | ||
return await promptComponent(argv).then(component); | ||
else { | ||
console.log(BANNER); | ||
try { | ||
if (argv._.includes('app')) | ||
return await promptApp(argv).then(app); | ||
else if (argv._.includes('component')) | ||
return await promptComponent(argv).then(component); | ||
else { | ||
console.log(BANNER); | ||
const { generate } = await prompts({ | ||
name: 'generate', | ||
message: 'What would you like to generate?', | ||
type: 'select', | ||
choices: [{ | ||
title: 'App', | ||
value: 'app', | ||
description: 'Scaffold an app project', | ||
}, { | ||
title: 'Component', | ||
value: 'component', | ||
description: 'Scaffold a component for an existing app', | ||
}], | ||
}); | ||
const { generate } = await prompts({ | ||
name: 'generate', | ||
message: 'What would you like to generate?', | ||
type: 'select', | ||
choices: [{ | ||
title: 'App', | ||
value: 'app', | ||
description: 'Scaffold an app project', | ||
}, { | ||
title: 'Component', | ||
value: 'component', | ||
description: 'Scaffold a component for an existing app', | ||
}], | ||
}); | ||
switch (generate) { | ||
case 'app': return await promptApp(argv).then(app); | ||
case 'component': return await promptComponent(argv).then(component); | ||
switch (generate) { | ||
case 'app': return await promptApp(argv).then(app); | ||
case 'component': return await promptComponent(argv).then(component); | ||
} | ||
} | ||
} catch (error) { | ||
if (error.command.includes('build:codegen')) | ||
return; | ||
else | ||
console.error(error); | ||
} | ||
} |
@@ -118,3 +118,3 @@ ## @apollo-elements/create | ||
--shared-css-path '#components/shared.css' \ | ||
--operation-params '$input: UpdateProfileInput!' \ | ||
--variables '$input: UpdateProfileInput!' \ | ||
--fields 'updateProfile(input: $input) { id }' \ | ||
@@ -121,0 +121,0 @@ --skip-codegen |
@@ -20,5 +20,6 @@ { | ||
"dependencies": { | ||
"@apollo-elements/lit-apollo": "^3.x || ^3.0.0-alpha.0", | ||
"@apollo-elements/mixins": "^3.x || ^3.0.0-alpha.0", | ||
"@apollo/client": "^3.x || ^3.0.0-alpha.0", | ||
"@apollo-elements/components": "^1.x", | ||
"@apollo-elements/lit-apollo": "^3.x", | ||
"@apollo-elements/mixins": "^3.x", | ||
"@apollo/client": "^3.x", | ||
"pwa-helpers": "^0.9" | ||
@@ -25,0 +26,0 @@ }, |
@@ -0,1 +1,2 @@ | ||
import type { NormalizedCacheObject } from '@apollo/client/core'; | ||
@@ -14,1 +15,7 @@ import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core'; | ||
new ApolloClient({ cache, link }); | ||
declare global { | ||
interface Window { | ||
__APOLLO_CLIENT__?: ApolloClient<NormalizedCacheObject>; | ||
} | ||
} |
@@ -1,2 +0,3 @@ | ||
import type { ApolloClient, NormalizedCacheObject } from '@apollo/client/core'; | ||
import '@apollo-elements/components/apollo-client'; | ||
import { ApolloClientElement } from '@apollo-elements/components/apollo-client'; | ||
@@ -7,12 +8,7 @@ import { client } from './client'; | ||
window.__APOLLO_CLIENT__ = | ||
client; | ||
const clientWrapper = document.getElementById('client') as ApolloClientElement; | ||
clientWrapper.client = client; | ||
customElements.whenDefined('apollo-app') | ||
.then(() => document.body.removeAttribute('unresolved')); | ||
declare global { | ||
interface Window { | ||
__APOLLO_CLIENT__?: ApolloClient<NormalizedCacheObject>; | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
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
728855
1515
8
2
+ Addedchalk@^4.1.0
+ Addedchalk@4.1.2(transitive)
+ Addedhas-flag@4.0.0(transitive)
+ Addedsupports-color@7.2.0(transitive)