Skip to content

Commit

Permalink
feat(misc): add option examples to inferred targets
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaysoo
jaysoo committed Jun 25, 2024
1 parent 0289dbc commit 95a2cf1
Show file tree
Hide file tree
Showing 19 changed files with 869 additions and 121 deletions.
118 changes: 61 additions & 57 deletions graph/ui-project-details/src/lib/show-all-options/show-all-options.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Fragment, useState } from 'react';
import { Fragment, useMemo, useState } from 'react';
import { PlayIcon, XMarkIcon } from '@heroicons/react/24/outline';
import { Transition } from '@headlessui/react';
import { getExternalApiService, useEnvironmentConfig } from '@nx/graph/shared';
/* eslint-disable @nx/enforce-module-boundaries */
// nx-ignore-next-line
import type { TargetConfiguration } from '@nx/devkit';
import { TerminalOutput } from '@nx/nx-dev/ui-fence';
Expand All @@ -14,33 +15,30 @@ interface ShowAllOptionsProps {
targetConfiguration: TargetConfiguration;
}

const projectJsonViteHelpText = `{
"targets": {
"serve": {
"options": {
"open": "true",
"port": 5000
}
},
"test": {
"options": {
"args": ["run"]
}
}
}
}`;
const fallbackHelpExample = {
options: {
silent: true,
},
args: ['foo'],
};

export function ShowAllOptions({
projectName,
targetName,
targetConfiguration,
}: ShowAllOptionsProps) {
const environment = useEnvironmentConfig()?.environment;
const [result, setResult] = useState<string | null>(null);
const [result, setResult] = useState<{
text: string;
success: boolean;
} | null>(null);
const [isPending, setPending] = useState(false);
const externalApiService = getExternalApiService();

const helpCommand = targetConfiguration.metadata?.help?.command;
const helpData = targetConfiguration.metadata?.help;
const helpCommand = helpData?.command;
const helpExampleOptions = helpData?.example?.options;
const helpExampleArgs = helpData?.example?.args;

const runHelpCommand =
environment === 'nx-console'
Expand All @@ -56,7 +54,7 @@ export function ShowAllOptions({
}
: async () => {
setPending(true);
const { result } = await fetch(
const result = await fetch(
`/help?project=${encodeURIComponent(
projectName
)}&target=${encodeURIComponent(targetName)}`
Expand All @@ -65,18 +63,24 @@ export function ShowAllOptions({
setPending(false);
};

const openProjectConfig =
environment === 'nx-console'
? () => {
externalApiService.postEvent({
type: 'open-project-config',
payload: {
projectName,
targetName,
},
});
}
: null;
const helpExampleTest = useMemo(() => {
const targetExampleJson =
helpExampleOptions || helpExampleArgs
? {
options: helpExampleOptions,
args: helpExampleArgs,
}
: fallbackHelpExample;
return JSON.stringify(
{
targets: {
[targetName]: targetExampleJson,
},
},
null,
2
);
}, [helpExampleOptions, helpExampleArgs]);

return (
helpCommand && (
Expand All @@ -98,24 +102,30 @@ export function ShowAllOptions({
(
<div className="w-fit max-w-md">
<p className="mb-2">
For example, when using <code>@nx/vite/plugin</code>, the
following are options and args passed to <code>serve</code>{' '}
and <code>test</code> targets, which are then passed to the{' '}
<code className="font-semibold">vite</code> and{' '}
<code className="font-semibold">vitest</code> CLI
respectively.
For example, you can use the following configuration for the{' '}
<code>{targetName}</code> target in the{' '}
<code>project.json</code> file for{' '}
<span className="font-semibold">{projectName}</span>.
</p>
<pre className="mb-2 border border-slate-200 bg-slate-100/50 p-2 p-2 text-slate-400 dark:border-slate-700 dark:bg-slate-700/50 dark:text-slate-500">
{projectJsonViteHelpText}
{helpExampleTest}
</pre>
<p>
This configuration means <code>serve</code> runs{' '}
<code className="font-semibold">
vite --port=5000 --open
</code>
, and <code>test</code> runs{' '}
<code className="font-semibold">vitest run</code>.
</p>
{helpExampleOptions && (
<p className="mb-2">
The <code>options</code> are CLI options prefixed by{' '}
<code>--</code>, such as <code>ls --color=never</code>,
where you would use <code>{'"color": "never"'}</code> to
set it in the target configuration.
</p>
)}
{helpExampleArgs && (
<p className="mb-2">
The <code>args</code> are CLI positional arguments, such
as <code>ls somedir</code>, where you would use{' '}
<code>{'"args": ["somedir"]'}</code> to set it in the
target configuration.
</p>
)}
</div>
) as any
}
Expand Down Expand Up @@ -161,21 +171,15 @@ export function ShowAllOptions({
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<pre className="">{result}</pre>
<pre
className={result && !result.success ? 'text-red-500' : ''}
>
{result?.text}
</pre>
</Transition>
</div>
}
/>
{openProjectConfig && (
<p className="mt-4">
<button
className="text-blue-500 hover:underline"
onClick={openProjectConfig}
>
Edit in project.json
</button>
</p>
)}
</>
)
);
Expand Down
2 changes: 1 addition & 1 deletion nx-dev/ui-fence/src/lib/fences/terminal-output.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function TerminalOutput({
</p>
<p className="typing mt-0.5 flex-1 pl-2">{line}</p>
{actionElement ? (
<div className="pl-2 sticky top-0">{actionElement}</div>
<div className="sticky top-0 pl-2">{actionElement}</div>
) : null}
</div>
);
Expand Down
72 changes: 72 additions & 0 deletions packages/cypress/src/plugins/plugin.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,15 @@ describe('@nx/cypress/plugin', () => {
],
"metadata": {
"description": "Runs Cypress Tests",
"example": {
"command": "npx cypress run --help",
"example": {
"args": [
"--dev",
"--headed",
],
},
},
"technologies": [
"cypress",
],
Expand All @@ -117,6 +126,15 @@ describe('@nx/cypress/plugin', () => {
"command": "cypress open",
"metadata": {
"description": "Opens Cypress",
"example": {
"command": "npx cypress open --help",
"example": {
"args": [
"--dev",
"--e2e",
],
},
},
"technologies": [
"cypress",
],
Expand Down Expand Up @@ -179,6 +197,15 @@ describe('@nx/cypress/plugin', () => {
],
"metadata": {
"description": "Runs Cypress Component Tests",
"example": {
"command": "npx cypress run --help",
"example": {
"args": [
"--dev",
"--headed",
],
},
},
"technologies": [
"cypress",
],
Expand All @@ -195,6 +222,15 @@ describe('@nx/cypress/plugin', () => {
"command": "cypress open",
"metadata": {
"description": "Opens Cypress",
"example": {
"command": "npx cypress open --help",
"example": {
"args": [
"--dev",
"--e2e",
],
},
},
"technologies": [
"cypress",
],
Expand Down Expand Up @@ -273,6 +309,15 @@ describe('@nx/cypress/plugin', () => {
],
"metadata": {
"description": "Runs Cypress Tests",
"example": {
"command": "npx cypress run --help",
"example": {
"args": [
"--dev",
"--headed",
],
},
},
"technologies": [
"cypress",
],
Expand Down Expand Up @@ -306,6 +351,15 @@ describe('@nx/cypress/plugin', () => {
],
"metadata": {
"description": "Runs Cypress Tests in CI",
"example": {
"command": "npx cypress run --help",
"example": {
"args": [
"--dev",
"--headed",
],
},
},
"technologies": [
"cypress",
],
Expand All @@ -329,6 +383,15 @@ describe('@nx/cypress/plugin', () => {
],
"metadata": {
"description": "Runs Cypress Tests in src/test.cy.ts in CI",
"example": {
"command": "npx cypress run --help",
"example": {
"args": [
"--dev",
"--headed",
],
},
},
"technologies": [
"cypress",
],
Expand All @@ -345,6 +408,15 @@ describe('@nx/cypress/plugin', () => {
"command": "cypress open",
"metadata": {
"description": "Opens Cypress",
"example": {
"command": "npx cypress open --help",
"example": {
"args": [
"--dev",
"--e2e",
],
},
},
"technologies": [
"cypress",
],
Expand Down
32 changes: 32 additions & 0 deletions packages/cypress/src/plugins/plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
createNodesFromFiles,
CreateNodesV2,
detectPackageManager,
getPackageManagerCommand,
joinPathFragments,
logger,
normalizePath,
Expand Down Expand Up @@ -183,6 +184,7 @@ async function buildCypressTargets(
options: CypressPluginOptions,
context: CreateNodesContext
): Promise<CypressTargets> {
const pmc = getPackageManagerCommand();
const cypressConfig = await loadConfigFile(
join(context.workspaceRoot, configFilePath)
);
Expand Down Expand Up @@ -211,6 +213,12 @@ async function buildCypressTargets(
metadata: {
technologies: ['cypress'],
description: 'Runs Cypress Tests',
example: {
command: `${pmc.exec} cypress run --help`,
example: {
args: ['--dev', '--headed'],
},
},
},
};

Expand Down Expand Up @@ -270,6 +278,12 @@ async function buildCypressTargets(
metadata: {
technologies: ['cypress'],
description: `Runs Cypress Tests in ${relativeSpecFilePath} in CI`,
example: {
command: `${pmc.exec} cypress run --help`,
example: {
args: ['--dev', '--headed'],
},
},
},
};
dependsOn.push({
Expand All @@ -288,6 +302,12 @@ async function buildCypressTargets(
metadata: {
technologies: ['cypress'],
description: 'Runs Cypress Tests in CI',
example: {
command: `${pmc.exec} cypress run --help`,
example: {
args: ['--dev', '--headed'],
},
},
},
};
ciTargetGroup.push(options.ciTargetName);
Expand All @@ -305,6 +325,12 @@ async function buildCypressTargets(
metadata: {
technologies: ['cypress'],
description: 'Runs Cypress Component Tests',
example: {
command: `${pmc.exec} cypress run --help`,
example: {
args: ['--dev', '--headed'],
},
},
},
};
}
Expand All @@ -315,6 +341,12 @@ async function buildCypressTargets(
metadata: {
technologies: ['cypress'],
description: 'Opens Cypress',
example: {
command: `${pmc.exec} cypress open --help`,
example: {
args: ['--dev', '--e2e'],
},
},
},
};

Expand Down
Loading

0 comments on commit 95a2cf1

Please sign in to comment.