chore: rename adders to addons (#303)

Co-authored-by: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>

.changeset/late-fireants-bow.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+chore: rename `adder` to `add-on`

README.md

@@ -13,7 +13,7 @@ Read the [SvelteKit documentation](https://svelte.dev/docs/kit) for more details
 
 ## Contributing
 
-Please file an issue for discussion before sending a PR for a new adder. Most new adders will likely be recommended to be implemented as community adders. This repository will only hold a very limited number of adders at the maintainers discretion that address widely held needs, are considered best-in-class, and are widely used in the Svelte community.
+Please file an issue for discussion before sending a PR for a new add-on. Most new add-ons will likely be recommended to be implemented as community add-ons. This repository will only hold a very limited number of add-ons at the maintainers discretion that address widely held needs, are considered best-in-class, and are widely used in the Svelte community.
 
 ## Supporting Svelte
 

community-addon-template/README.md

@@ -0,0 +1,58 @@
+# community-addon-template
+
+> [!IMPORTANT]
+> Community add-ons are currently not supported. Please see [#184](https://github.com/sveltejs/cli/issues/184) for details.
+
+> [!IMPORTANT]
+> This template's dependencies may not be up-to-date; be sure to update them to the latest!
+> If you get stuck, check out the [implementations of official add-ons](https://github.com/sveltejs/cli/tree/main/packages/add-ons).
+
+The add-on template for community add-ons for [`sv`](https://github.com/sveltejs/cli).
+
+## Cloning the template
+
+Use [`degit`](https://github.com/Rich-Harris/degit) to clone the template:
+
+```shell
+npx degit sveltejs/cli/community-addon-template addon-name
+```
+
+## Using the add-on
+
+To run the add-on, we'll first need a project to apply it to.
+
+Create the project with the following script:
+
+```shell
+npm run create-temp
+```
+
+This will create a SvelteKit project in the `temp` directory.
+
+To execute the add-on, run:
+
+```shell
+npm start
+```
+
+## Sharing your add-on
+
+When you're ready to publish your add-on to NPM, run:
+
+```shell
+npm publish
+```
+
+Your published add-on can now be used by anyone!
+
+To execute the newly published package with `sv`, run:
+
+```shell
+npx sv add --community npm:addon-package-name
+```
+
+After that, feel free to open a pull request to [`sv`](https://github.com/sveltejs/cli) and add your add-on to the [community list](/community-addons/).
+
+## Things to be aware of
+
+Community add-ons are **not permitted** to have any external dependencies outside of `@sveltejs/cli-core`. If the use of a dependency is absolutely necessary, then they can be bundled using a bundler of your choosing (e.g. Rollup, Rolldown, tsup, etc.).

community-adder-template/package.json → community-addon-template/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "community-adder-template",
+	"name": "community-addon-template",
 	"private": true,
 	"version": "0.0.0",
 	"type": "module",

community-adder-template/src/index.js → community-addon-template/src/index.js

@@ -1,33 +1,33 @@
-import { defineAdder, defineAdderOptions } from '@sveltejs/cli-core';
+import { defineAddon, defineAddonOptions } from '@sveltejs/cli-core';
 import { imports } from '@sveltejs/cli-core/js';
 import { parseSvelte } from '@sveltejs/cli-core/parsers';
 
-export const options = defineAdderOptions({
+export const options = defineAddonOptions({
 	demo: {
 		question: 'Do you want to use a demo?',
 		type: 'boolean',
 		default: false
 	}
 });
 
-export default defineAdder({
+export default defineAddon({
 	id: 'community-addon',
 	options,
 	setup: ({ kit, unsupported }) => {
 		if (!kit) unsupported('Requires SvelteKit');
 	},
 	run: ({ sv, options, typescript }) => {
-		sv.file('adder-template-demo.txt', (content) => {
+		sv.file('addon-template-demo.txt', (content) => {
 			if (options.demo) {
-				return 'This is a text file made by the Community Adder Template demo!';
+				return 'This is a text file made by the Community Addon Template demo!';
 			}
 			return content;
 		});
 
 		sv.file('src/DemoComponent.svelte', (content) => {
 			if (!options.demo) return content;
 			const { script, generateCode } = parseSvelte(content, { typescript });
-			imports.addDefault(script.ast, '../adder-template-demo.txt?raw', 'demo');
+			imports.addDefault(script.ast, '../addon-template-demo.txt?raw', 'demo');
 			return generateCode({ script: script.generateCode(), template: '{demo}' });
 		});
 	}

community-adder-template/tests/custom-addon.test.ts → community-addon-template/tests/custom-addon.test.ts

@@ -24,5 +24,5 @@ test.concurrent.for(variants)('demo - %s', async (variant, { page, ...ctx }) =>
 
 	// expectations
 	const textContent = await page.getByTestId('demo').textContent();
-	expect(textContent).toContain('This is a text file made by the Community Adder Template demo!');
+	expect(textContent).toContain('This is a text file made by the Community Addon Template demo!');
 });

community-adder-template/tests/fixtures/+page.svelte → community-addon-template/tests/fixtures/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import demo from '../../adder-template-demo.txt?raw';
+	import demo from '../../addon-template-demo.txt?raw';
 </script>
 
 <span data-testid="demo">{demo}</span>

community-adder-template/tests/fixtures/App.svelte → community-addon-template/tests/fixtures/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import demo from '../adder-template-demo.txt?raw';
+	import demo from '../addon-template-demo.txt?raw';
 </script>
 
 <span data-testid="demo">{demo}</span>

community-adder-template/vitest.config.js → community-addon-template/vitest.config.js

@@ -8,7 +8,6 @@ export default defineConfig({
 		exclude: ['tests/setup/*'],
 		testTimeout: ONE_MINUTE * 3,
 		hookTimeout: ONE_MINUTE * 3,
-		maxConcurrency: 10,
 		globalSetup: ['tests/setup/global.ts']
 	}
 });

community-addons/unocss.ts

@@ -0,0 +1,5 @@
+import type { CommunityAddon } from '../packages/addons/_config/community.ts';
+
+export default {
+	id: 'unocss-svelte-add-on'
+} satisfies CommunityAddon;

community-addons/unplugin-icons.ts

@@ -0,0 +1,5 @@
+import type { CommunityAddon } from '../packages/addons/_config/community.ts';
+
+export default {
+	id: 'unplugin-icons-svelte-add-on'
+} satisfies CommunityAddon;

eslint.config.js

@@ -32,7 +32,7 @@ export default [
 			'**/dist/*',
 			'packages/**/tests/**/{output,input}.ts',
 			'rollup.config.js',
-			'community-adder-template/tests/*'
+			'community-addon-template/tests/*'
 		]
 	}
 ];

packages/addons/_config/community.ts

@@ -0,0 +1,11 @@
+export type CommunityAddon = {
+	id: string; // the npm package name
+};
+
+/** EVALUATED AT BUILD TIME */
+export const communityAddonIds: string[] = [];
+
+export async function getCommunityAddon(name: string): Promise<CommunityAddon> {
+	const { default: details } = await import(`../../../community-addons/${name}.ts`);
+	return details;
+}

packages/addons/_config/index.ts

@@ -0,0 +1,2 @@
+export { officialAddons, getAddonDetails } from './official.ts';
+export { getCommunityAddon, communityAddonIds } from './community.ts';

packages/adders/_config/official.ts → packages/addons/_config/official.ts

@@ -1,4 +1,4 @@
-import type { AdderWithoutExplicitArgs } from '@sveltejs/cli-core';
+import type { AddonWithoutExplicitArgs } from '@sveltejs/cli-core';
 
 import drizzle from '../drizzle/index.ts';
 import eslint from '../eslint/index.ts';
@@ -11,9 +11,9 @@ import storybook from '../storybook/index.ts';
 import tailwindcss from '../tailwindcss/index.ts';
 import vitest from '../vitest-addon/index.ts';
 
-// The order of adders here determines the order they are displayed inside the CLI
+// The order of addons here determines the order they are displayed inside the CLI
 // We generally try to order them by perceived popularity
-export const officialAdders = [
+export const officialAddons = [
 	prettier,
 	eslint,
 	vitest,
@@ -24,13 +24,13 @@ export const officialAdders = [
 	mdsvex,
 	paraglide,
 	storybook
-] as AdderWithoutExplicitArgs[];
+] as AddonWithoutExplicitArgs[];
 
-export function getAdderDetails(id: string): AdderWithoutExplicitArgs {
-	const details = officialAdders.find((a) => a.id === id);
+export function getAddonDetails(id: string): AddonWithoutExplicitArgs {
+	const details = officialAddons.find((a) => a.id === id);
 	if (!details) {
-		throw new Error(`Invalid adder: ${id}`);
+		throw new Error(`Invalid add-on: ${id}`);
 	}
 
-	return details as AdderWithoutExplicitArgs;
+	return details as AddonWithoutExplicitArgs;
 }

packages/adders/_tests/_setup/global.ts → packages/addons/_tests/_setup/global.ts

@@ -2,7 +2,7 @@ import { fileURLToPath } from 'node:url';
 import { setup, type ProjectVariant } from 'sv/testing';
 import type { GlobalSetupContext } from 'vitest/node';
 
-const TEST_DIR = fileURLToPath(new URL('../../../../.test-output/adders/', import.meta.url));
+const TEST_DIR = fileURLToPath(new URL('../../../../.test-output/addons/', import.meta.url));
 const variants: ProjectVariant[] = ['kit-js', 'kit-ts', 'vite-js', 'vite-ts'];
 
 export default async function ({ provide }: GlobalSetupContext) {

packages/adders/_tests/_setup/suite.ts → packages/addons/_tests/_setup/suite.ts

@@ -53,7 +53,7 @@ export function setupTest<Addons extends AddonMap>(addons: Addons) {
 			const metaPath = path.resolve(cwd, 'meta.json');
 			fs.writeFileSync(metaPath, JSON.stringify({ variant, options }, null, '\t'), 'utf8');
 
-			// run adder
+			// run addon
 			await installAddon({ cwd, addons, options, packageManager: 'pnpm' });
 
 			return cwd;

packages/adders/_tests/all-addons/test.ts → packages/addons/_tests/all-addons/test.ts

@@ -1,17 +1,17 @@
 import process from 'node:process';
 import { expect } from '@playwright/test';
 import { setupTest } from '../_setup/suite.ts';
-import { officialAdders } from '../../index.ts';
+import { officialAddons } from '../../index.ts';
 import type { AddonMap, OptionMap } from 'sv';
 
 const windowsCI = process.env.CI && process.platform === 'win32';
-const addons = officialAdders.reduce<AddonMap>((addonMap, addon) => {
+const addons = officialAddons.reduce<AddonMap>((addonMap, addon) => {
 	if (addon.id === 'storybook' && windowsCI) return addonMap;
 	addonMap[addon.id] = addon;
 	return addonMap;
 }, {});
 
-const defaultOptions = officialAdders.reduce<OptionMap<typeof addons>>((options, addon) => {
+const defaultOptions = officialAddons.reduce<OptionMap<typeof addons>>((options, addon) => {
 	options[addon.id] = {};
 	return options;
 }, {});

packages/adders/drizzle/index.ts → packages/addons/drizzle/index.ts

@@ -1,5 +1,5 @@
 import { common, exports, functions, imports, object, variables } from '@sveltejs/cli-core/js';
-import { defineAdder, defineAdderOptions, dedent, type OptionValues } from '@sveltejs/cli-core';
+import { defineAddon, defineAddonOptions, dedent, type OptionValues } from '@sveltejs/cli-core';
 import { parseJson, parseScript } from '@sveltejs/cli-core/parsers';
 
 const PORTS = {
@@ -8,7 +8,7 @@ const PORTS = {
 	sqlite: ''
 } as const;
 
-const options = defineAdderOptions({
+const options = defineAddonOptions({
 	database: {
 		question: 'Which database would you like to use?',
 		type: 'select',
@@ -63,7 +63,7 @@ const options = defineAdderOptions({
 	}
 });
 
-export default defineAdder({
+export default defineAddon({
 	id: 'drizzle',
 	homepage: 'https://orm.drizzle.team',
 	options,

packages/adders/eslint/index.ts → packages/addons/eslint/index.ts

@@ -1,5 +1,5 @@
 import { addEslintConfigPrettier } from '../common.ts';
-import { defineAdder, log } from '@sveltejs/cli-core';
+import { defineAddon, log } from '@sveltejs/cli-core';
 import {
 	array,
 	common,
@@ -12,7 +12,7 @@ import {
 } from '@sveltejs/cli-core/js';
 import { parseJson, parseScript } from '@sveltejs/cli-core/parsers';
 
-export default defineAdder({
+export default defineAddon({
 	id: 'eslint',
 	homepage: 'https://eslint.org',
 	options: {},