Feat - Community add-on

.changeset/config.json

@@ -7,5 +7,5 @@
 	"access": "public",
 	"baseBranch": "main",
 	"updateInternalDependencies": "patch",
-	"ignore": [ "@sveltejs/*", "community-addon-template" ]
+	"ignore": [ "@sveltejs/*" ]
 }

.gitignore

@@ -6,3 +6,4 @@ package-lock.json
 yarn.lock
 vite.config.js.timestamp-*
 .test-output
+new-add-on/

documentation/docs/20-commands/10-sv-create.md

@@ -19,6 +19,7 @@ Which project template to use:
 - `minimal` — barebones scaffolding for your new app
 - `demo` — showcase app with a word guessing game that works without JavaScript
 - `library` — template for a Svelte library, set up with `svelte-package`
+- `addon` — template for a community add-on, ready to be tested & published
 
 ### `--types <option>`
 

eslint.config.js

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

packages/cli/commands/add/index.ts

@@ -84,7 +84,8 @@ export const add = new Command('add')
 	.option('--no-git-check', 'even if some files are dirty, no prompt will be shown')
 	.option('--no-install', 'skip installing dependencies')
 	.addOption(installOption)
-	//.option('--community [add-on...]', 'community addons to install')
+	// TODO JYC: remove the flag
+	.option('--community [add-on...]', 'community addons to install')
 	.configureHelp({
 		...common.helpConfig,
 		formatHelp(cmd, helper) {
@@ -550,7 +551,7 @@ export async function runAddCommand(
 		workspace,
 		addonSetupResults,
 		addons: addonMap,
-		options: official
+		options: { ...official, ...community }
 	});
 
 	p.log.success('Successfully setup add-ons');

packages/cli/commands/create.ts

@@ -141,8 +141,9 @@ async function createProject(cwd: ProjectPath, options: Options) {
 					options: templates.map((t) => ({ label: t.title, value: t.name, hint: t.description }))
 				});
 			},
-			language: () => {
+			language: (o) => {
 				if (options.types) return Promise.resolve(options.types);
+				if (o.results.template === 'addon') return Promise.resolve('none'); // TODO JYC
 				return p.select<LanguageType>({
 					message: 'Add type checking with TypeScript?',
 					initialValue: 'typescript',
@@ -166,7 +167,7 @@ async function createProject(cwd: ProjectPath, options: Options) {
 	createKit(projectPath, {
 		name: path.basename(projectPath),
 		template,
-		types: language
+		types: language as LanguageType // TODO JYC not sure why?!
 	});
 
 	p.log.success('Project created');
@@ -180,7 +181,8 @@ async function createProject(cwd: ProjectPath, options: Options) {
 		if (packageManager) await installDependencies(packageManager, projectPath);
 	};
 
-	if (options.addOns) {
+	// TODO JYC: no add-ons for addon template
+	if (options.addOns && options.template !== 'addon') {
 		// `runAddCommand` includes installing dependencies
 		const { nextSteps, packageManager: pm } = await runAddCommand(
 			{

packages/create/index.ts

@@ -5,7 +5,7 @@ import { mkdirp, copy, dist } from './utils.ts';
 export type TemplateType = (typeof templateTypes)[number];
 export type LanguageType = (typeof languageTypes)[number];
 
-const templateTypes = ['minimal', 'demo', 'library'] as const;
+const templateTypes = ['minimal', 'demo', 'library', 'addon'] as const;
 const languageTypes = ['typescript', 'checkjs', 'none'] as const;
 
 export type Options = {
@@ -61,7 +61,7 @@ function write_template_files(template: string, types: LanguageType, name: strin
 		const dest = path.join(cwd, file.name);
 		mkdirp(path.dirname(dest));
 
-		fs.writeFileSync(dest, file.contents.replace(/~TODO~/g, name));
+		fs.writeFileSync(dest, file.contents.replace(/~SV-NAME-TODO~/g, name));
 	});
 }
 
@@ -84,7 +84,7 @@ function write_common_files(cwd: string, options: Options, name: string) {
 		} else {
 			const dest = path.join(cwd, file.name);
 			mkdirp(path.dirname(dest));
-			fs.writeFileSync(dest, file.contents);
+			fs.writeFileSync(dest, file.contents.replace(/~SV-NAME-TODO~/g, name));
 		}
 	});
 

packages/create/scripts/build-templates.js

@@ -95,6 +95,15 @@ async function generate_templates(dist, shared) {
 				let contents = fs.readFileSync(path.join(cwd, name), 'utf8');
 				// TODO package-specific versions
 				contents = contents.replace(/workspace:\*/g, 'next');
+
+				// TODO JYC (maybe could be a dev mode and prod mode ?)
+				const pkg = JSON.parse(contents);
+				if (pkg.dependencies && pkg.dependencies['@sveltejs/cli-core'])
+					pkg.dependencies['@sveltejs/cli-core'] = 'file:../packages/core';
+				if (pkg.devDependencies && pkg.devDependencies['sv'])
+					pkg.devDependencies['sv'] = 'file:../packages/cli';
+				contents = JSON.stringify(pkg, null, '\t');
+
 				fs.writeFileSync(path.join(dir, 'package.json'), contents);
 				continue;
 			}

community-addon-template/README.md → packages/create/shared/+addon/README.md

@@ -1,21 +1,14 @@
-# community-addon-template
+# sv community addon: ~SV-NAME-TODO~
 
 > [!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).
+> If you get stuck, check out the [implementations of official add-ons](https://github.com/sveltejs/cli/tree/main/packages/addons).
 
-## 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
-```
+created with [`sv`](https://svelte.dev/docs/cli/sv-create#Options-template-name).
 
 ## Using the add-on
 
@@ -24,15 +17,15 @@ 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
+npm run create
 ```
 
-This will create a SvelteKit project in the `temp` directory.
+This will create a SvelteKit project in the `demo` directory.
 
 To execute the add-on, run:
 
 ```shell
-npm start
+npm run add
 ```
 
 ## Sharing your add-on
@@ -48,11 +41,9 @@ 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
+npx sv add npm:~SV-NAME-TODO~
 ```
 
-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.).

packages/create/templates/addon/.gitignore

@@ -0,0 +1,26 @@
+node_modules
+testing/
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+/dist
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+

packages/create/templates/addon/.ignore

@@ -0,0 +1,3 @@
+package.json
+.meta.json
+.turbo

packages/create/templates/addon/.meta.json

@@ -0,0 +1,4 @@
+{
+	"title": "sv community add-on",
+	"description": "scaffolding an empty community add-on, ready to be tested and published"
+}

community-addon-template/package.json → packages/create/templates/addon/package.template.json

@@ -1,18 +1,14 @@
 {
-	"name": "community-addon-template",
-	"private": true,
+	"name": "~SV-NAME-TODO~",
 	"version": "0.0.0",
 	"type": "module",
 	"license": "MIT",
 	"scripts": {
-		"create-temp": "sv create temp --types ts --template minimal --no-add-ons --no-install",
-		"start": "sv add -C temp --community file:../",
+		"create": "sv create demo --types ts --template minimal --no-add-ons",
+		"add": "sv add -C demo --community file:../ --no-git-check",
 		"test": "vitest run"
 	},
-	"files": [
-		"src",
-		"!src/**/*.test.*"
-	],
+	"files": ["src", "!src/**/*.test.*"],
 	"exports": "./src/index.js",
 	"dependencies": {
 		"@sveltejs/cli-core": "workspace:*"
@@ -22,8 +18,5 @@
 		"sv": "workspace:*",
 		"vitest": "4.0.0-beta.6"
 	},
-	"keywords": [
-		"svelte-add-on",
-		"sv"
-	]
+	"keywords": ["svelte-add-on", "sv", "sv-add-on"]
 }

packages/create/templates/addon/src/index.js

@@ -0,0 +1,45 @@
+import { defineAddon, defineAddonOptions } from '@sveltejs/cli-core';
+import { imports } from '@sveltejs/cli-core/js';
+import { parseSvelte } from '@sveltejs/cli-core/parsers';
+
+export const options = defineAddonOptions({
+	demo: {
+		question: 'Do you want to use a demo?',
+		type: 'boolean',
+		default: true
+	}
+});
+
+export default defineAddon({
+	id: 'community-addon',
+	options,
+	setup: ({ kit, unsupported }) => {
+		if (!kit) unsupported('Requires SvelteKit');
+	},
+	run: ({ sv, options, typescript }) => {
+		sv.file('src/lib/add-on/addon-template-demo.txt', (content) => {
+			if (!options.demo) return content;
+			return 'This is a text file made by the Community Addon Template demo! with your add-on: ~SV-NAME-TODO~!';
+		});
+
+		sv.file('src/lib/add-on/DemoComponent.svelte', (content) => {
+			if (!options.demo) return content;
+			const { script, generateCode } = parseSvelte(content, { typescript });
+			imports.addDefault(script.ast, { from: './addon-template-demo.txt?raw', as: 'demo' });
+			return generateCode({ script: script.generateCode(), template: '{demo}' });
+		});
+
+		sv.file('src/routes/+page.svelte', (content) => {
+			if (!options.demo) return content;
+			const { script, generateCode, template } = parseSvelte(content, { typescript });
+			imports.addDefault(script.ast, {
+				from: '$lib/add-on/DemoComponent.svelte',
+				as: 'DemoComponent'
+			});
+			return generateCode({
+				script: script.generateCode(),
+				template: template.generateCode() + '\n\n<DemoComponent />'
+			});
+		});
+	}
+});

packages/create/templates/demo/package.template.json

@@ -1,5 +1,5 @@
 {
-	"name": "~TODO~",
+	"name": "~SV-NAME-TODO~",
 	"private": true,
 	"version": "0.0.1",
 	"type": "module",

packages/create/templates/library/package.template.json

@@ -1,5 +1,5 @@
 {
-	"name": "~TODO~",
+	"name": "~SV-NAME-TODO~",
 	"version": "0.0.1",
 	"scripts": {
 		"dev": "vite dev",

packages/create/templates/minimal/package.template.json

@@ -1,5 +1,5 @@
 {
-	"name": "~TODO~",
+	"name": "~SV-NAME-TODO~",
 	"private": true,
 	"version": "0.0.1",
 	"type": "module",

pnpm-workspace.yaml

@@ -1,4 +1,4 @@
 packages:
   - 'packages/*'
-  - 'community-addon-template'
   - '!.test-tmp/**'
+  - '!new-add-on/**'

vitest.config.ts

@@ -2,6 +2,6 @@ import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
 	test: {
-		projects: ['packages/*', 'community-addon-template']
+		projects: ['packages/*']
 	}
 });