8000 feat: add `vite-plugin-devtools-json` addon (#581) · sveltejs/cli@102a536 · GitHub
[go: up one dir, main page]
Skip to content

Commit 102a536

Browse files
jycouetmanuel3108
jycouet
and
manuel3108
authored
feat: add vite-plugin-devtools-json addon (#581)
* adding vite-plugin-devtools-json * fix a typo * adding a tests * back to kit * check if my tests are affecting the thing ? * Revert "check if my tests are affecting the thing ?" This reverts commit 0aec23c. * also supporting vite project * Update .changeset/twelve-shirts-tell.md Co-authored-by: Manuel <30698007+manuel3108@users.noreply.github.com> * Update documentation/docs/30-add-ons/60-vite-plugin-devtools-json .md Co-authored-by: Manuel <30698007+manuel3108@users.noreply.github.com> * Update packages/addons/vite-plugin-devtools-json/index.ts Co-authored-by: Manuel <30698007+manuel3108@users.noreply.github.com> * Update packages/addons/vite-plugin-devtools-json/index.ts Co-authored-by: Manuel <30698007+manuel3108@users.noreply.github.com> * update namings * chromium-devtools -> devtools-json (while waiting for better thing) * Update the description of the plugin to help doc search * using vite-plugin-devtools-json@0.2.0 to have it working for WSL users * adding defaultSelection fn in setup phase * minor tweaks * ordering --------- Co-authored-by: Manuel <30698007+manuel3108@users.noreply.github.com> Co-authored-by: Manuel Serret <mserret99@gmail.com>
1 parent 791be1b commit 102a536

File tree

11 files changed

+151
-10
lines changed

11 files changed

+151
-10
lines changed

‎.changeset/twelve-shirts-tell.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'sv': patch
3+
---
4+
5+
feat: add `devtools-json` addon (using `vite-plugin-devtools-json`)

‎CONTRIBUTING.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ Run package specific tests by specifying a project flag to the package and runni
7070
pnpm test --project core # addons / create / migrate / etc.
7171
```
7272

73-
To run a individual test. `cd` into the package. Run the local `test` script to that package, with a path arg to the individual peice you want tested. Eg 6D40 :
73+
To run a individual test. `cd` into the package. Run the local `test` script to that package, with a path arg to the individual piece you want tested. Eg:
7474
```bash
7575
pnpm test [path-to-test]
7676
```

‎documentation/docs/20-commands/20-sv-add.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,4 @@ You can select multiple space-separated add-ons from [the list below](#Official-
3838
- [`sveltekit-adapter`](sveltekit-adapter)
3939
- [`tailwindcss`](tailwind)
4040
- [`vitest`](vitest)
41+
- [`devtools-json`](devtools-json)

‎documentation/docs/30-add-ons/60-devtools-json.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: devtools-json
3+
---
4+
5+
`devtools-json` is essentially a vite plugin [vite-plugin-devtools-json](https://github.com/ChromeDevTools/vite-plugin-devtools-json/) for generating the Chrome DevTools project settings file on-the-fly in the devserver.
6+
7+
It will prevent this server log:
8+
9+
```sh
10+
Not found: /.well-known/appspecific/com.chrome.devtools.json
11+
```
12+
13+
## Usage
14+
15+
```bash
16+
npx sv add devtools-json
17+
```
18+
19+
## What you get
20+
21+
- the `vite` plugin added to your vite plugin options.

‎packages/addons/_config/official.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import type { AddonWithoutExplicitArgs } from '@sveltejs/cli-core';
22

3+
import devtoolsJson from '../devtools-json/index.ts';
34
import drizzle from '../drizzle/index.ts';
45
import eslint from '../eslint/index.ts';
5-
import sveltekitAdapter from '../sveltekit-adapter/index.ts';
66
import lucia from '../lucia/index.ts';
77
import mdsvex from '../mdsvex/index.ts';
88
import paraglide from '../paraglide/index.ts';
99
import playwright from '../playwright/index.ts';
1010
import prettier from '../prettier/index.ts';
1111
import storybook from '../storybook/index.ts';
12+
import sveltekitAdapter from '../sveltekit-adapter/index.ts';
1213
import tailwindcss from '../tailwindcss/index.ts';
1314
import vitest from '../vitest-addon/index.ts';
1415

@@ -21,6 +22,7 @@ export const officialAddons = [
2122
playwright,
2223
tailwindcss,
2324
sveltekitAdapter,
25+
devtoolsJson,
2426
drizzle,
2527
lucia,
2628
mdsvex,

‎packages/addons/_tests/devtools-json/test.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { expect } from '@playwright/test';
2+
import { setupTest } from '../_setup/suite.ts';
3+
import devtoolsJson from '../../devtools-json/index.ts';
4+
import fs from 'node:fs';
5+
import path from 'node:path';
6+
7+
const { test, variants, prepareServer } = setupTest({ devtoolsJson } as {
8+
devtoolsJson?: typeof devtoolsJson;
9+
});
10+
11+
test.concurrent.for(variants)('default - %s', async (variant, { page, ...ctx }) => {
12+
const cwd = await ctx.run(variant, { devtoolsJson: {} });
13+
14+
const { close } = await prepareServer({ cwd, page });
15+
// kill server process when we're done
16+
ctx.onTestFinished(async () => await close());
17+
18+
const ext = variant.includes('ts') ? 'ts' : 'js';
19+
const viteFile = path.resolve(cwd, `vite.config.${ext}`);
20+
const viteContent = fs.readFileSync(viteFile, 'utf8');
21+
22+
// Check if we have the import part
23+
expect(viteContent).toContain(`import devtoolsJson from`);
24+
expect(viteContent).toContain(`vite-plugin-devtools-json`);
25+
26+
// Check if it's called
27+
expect(viteContent).toContain(`devtoolsJson()`);
28+
});
29+
30+
test.concurrent.for(variants)(
31+
'without selecting the addon specifically - %s',
32+
async (variant, { page, ...ctx }) => {
33+
const cwd = await ctx.run(variant, {});
34+
35+
const { close } = await prepareServer({ cwd, page });
36+
// kill server process when we're done
37+
ctx.onTestFinished(async () => await close());
38+
39+
const ext = variant.includes('ts') ? 'ts' : 'js';
40+
const viteFile = path.resolve(cwd, `vite.config.${ext}`);
41+
const viteContent = fs.readFileSync(viteFile, 'utf8');
42+
43+
// Check if we have the import part
44+
expect(viteContent).toContain(`import devtoolsJson from`);
45+
expect(viteContent).toContain(`vite-plugin-devtools-json`);
46+
47+
// Check if it's called
48+
expect(viteContent).toContain(`devtoolsJson()`);
49+
}
50+
);

‎packages/addons/devtools-json/index.ts

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { defineAddon } from '@sveltejs/cli-core';
2+
import { array, functions, imports, object, exports } from '@sveltejs/cli-core/js';
3+
import { parseScript } from '@sveltejs/cli-core/parsers';
4+
5+
export default defineAddon({
6+
id: 'devtools-json',
7+
shortDescription: 'devtools json',
8+
homepage: 'https://github.com/ChromeDevTools/vite-plugin-devtools-json',
9+
options: {},
10+
11+
setup: ({ defaultSelection }) => {
12+
defaultSelection({
13+
create: true,
14+
add: false
15+
});
16+
},
17+
18+
run: ({ sv, typescript }) => {
19+
const ext = typescript ? 'ts' : 'js';
20+
21+
sv.devDependency('vite-plugin-devtools-json', '^0.2.0');
22+
23+
// add the vite plugin
24+
sv.file(`vite.config.${ext}`, (content) => {
25+
const { ast, generateCode } = parseScript(content);
26+
27+
const vitePluginName = 'devtoolsJson';
28+
imports.addDefault(ast, 'vite-plugin-devtools-json', vitePluginName);
29+
30+
const { value: rootObject } = exports.defaultExport(ast, functions.call('defineConfig', []));
31+
const param1 = functions.argumentByIndex(rootObject, 0, object.createEmpty());
32+
33+
const pluginsArray = object.property(param1, 'plugins', array.createEmpty());
34+
const pluginFunctionCall = functions.call(vitePluginName, []);
35+
array.push(pluginsArray, pluginFunctionCall);
36+
37+
return generateCode();
38+
});
39+
}
40+
});

‎packages/cli/commands/add/index.ts

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -201,15 +201,16 @@ export const add = new Command('add')
201201

202202
common.runCommand(async () => {
203203
const selectedAddonIds = selectedAddons.map(({ id }) => id);
204-
const { nextSteps } = await runAddCommand(options, selectedAddonIds);
205-
if (nextSteps) p.note(nextSteps, 'Next steps', { format: (line) => line });
204+
const { nextSteps } = await runAddCommand(options, selectedAddonIds, 'add');
205+
if (nextSteps) p.note(nextSteps, 'Next steps', { format: (line: string) => line });
206206
});
207207
});
208208

209209
type SelectedAddon = { type: 'official' | 'community'; addon: AddonWithoutExplicitArgs };
210210
export async function runAddCommand(
211211
options: Options,
212-
selectedAddonIds: string[]
212+
selectedAddonIds: string[],
213+
from: 'create' | 'add'
213214
): Promise<{ nextSteps?: string; packageManager?: AgentName | null }> {
214215
const selectedAddons: SelectedAddon[] = selectedAddonIds.map((id) => ({
215216
type: 'official',
@@ -390,6 +391,11 @@ export async function runAddCommand(
390391
const setups = selectedAddons.length ? selectedAddons.map(({ addon }) => addon) : officialAddons;
391392
const addonSetupResults = setupAddons(setups, workspace);
392393

394+
// get all addons that have been marked to be preselected
395+
const initialValues = Object.entries(addonSetupResults)
396+
.filter(([_, value]) => value.defaultSelection[from] === true)
397+
.map(([key]) => key);
398+
393399
// prompt which addons to apply
394400
if (selectedAddons.length === 0) {
395401
const addonOptions = officialAddons
@@ -404,7 +410,8 @@ export async function runAddCommand(
404410
const selected = await p.multiselect({
405411
message: `What would you like to add to your project? ${pc.dim('(use arrow keys / space bar)')}`,
406412
options: addonOptions,
407-
required: false
413+
required: false,
414+
initialValues
408415
});
409416
if (p.isCancel(selected)) {
410417
p.cancel('Operation cancelled.');

‎packages/cli/commands/create.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,8 @@ async function createProject(cwd: ProjectPath, options: Options) {
184184
community: [],
185185
addons: {}
186186
},
187-
[]
187+
[],
188+
'create'
188189
);
189190
packageManager = pm;
190191
addOnNextSteps = nextSteps;

‎packages/cli/lib/install.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,23 @@ export function setupAddons(
8787
const addonSetupResults: Record<string, AddonSetupResult> = {};
8888

8989
for (const addon of addons) {
90-
const setupResult: AddonSetupResult = { unsupported: [], dependsOn: [], runsAfter: [] };
90+
const setupResult: AddonSetupResult = {
91+
unsupported: [],
92+
dependsOn: [],
93+
runsAfter: [],
94+
defaultSelection: { create: false, add: false }
95+
};
9196
addon.setup?.({
9297
...workspace,
9398
dependsOn: (name) => {
9499
setupResult.dependsOn.push(name);
95100
setupResult.runsAfter.push(name);
96101
},
97102
unsupported: (reason) => setupResult.unsupported.push(reason),
98-
runsAfter: (name) => setupResult.runsAfter.push(name)
103+
runsAfter: (name) => setupResult.runsAfter.push(name),
104+
defaultSelection: (defaultSelection) => {
105+
setupResult.defaultSelection = defaultSelection;
106+
}
99107
});
100108
addonSetupResults[addon.id] = setupResult;
101109
}

0 commit comments

Comments
 (0)
0