Add editor integrations to language integrations (#3864)

.changeset/nasty-students-run.md

@@ -0,0 +1,6 @@
+---
+'@astrojs/svelte': patch
+'@astrojs/vue': patch
+---
+
+Add entrypoints for editor support for Vue and Svelte (destined to be used by our language server)

package.json

@@ -47,6 +47,15 @@
   },
   "packageManager": "pnpm@7.5.0",
   "pnpm": {
+    "packageExtensions": {
+      "svelte2tsx": {
+        "peerDependenciesMeta": {
+          "typescript": {
+            "optional": true
+          }
+        }
+      }
+    },
     "peerDependencyRules": {
       "ignoreMissing": [
         "rollup",

packages/integrations/svelte/package.json

@@ -21,20 +21,22 @@
   "homepage": "https://astro.build",
   "exports": {
     ".": "./dist/index.js",
+    "./editor": "./dist/editor.cjs",
     "./*": "./*",
     "./client.js": "./client.js",
     "./server.js": "./server.js",
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "astro-scripts build \"src/**/*.ts\" && tsc",
-    "build:ci": "astro-scripts build \"src/**/*.ts\"",
+    "build": "astro-scripts build \"src/index.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist && tsc",
+    "build:ci": "astro-scripts build \"src/**/*.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist",
     "dev": "astro-scripts dev \"src/**/*.ts\""
   },
   "dependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.48",
     "postcss-load-config": "^3.1.4",
     "svelte-preprocess": "^4.10.7",
+    "svelte2tsx": "^0.5.11",
     "vite": "^2.9.10"
   },
   "devDependencies": {

packages/integrations/svelte/src/editor.cts

@@ -0,0 +1,23 @@
+import { svelte2tsx } from 'svelte2tsx';
+
+export function toTSX(code: string, className: string): string {
+	let result = `
+		let ${className}__AstroComponent_: Error
+		export default ${className}__AstroComponent_
+	`;
+
+	try {
+		let tsx = svelte2tsx(code).code;
+		tsx = 'let Props = render().props;\n' + tsx;
+
+		// Replace Svelte's class export with a function export
+		result = tsx.replace(
+			/^export default[\S\s]*/gm,
+			`export default function ${className}__AstroComponent_(_props: typeof Props): any {}`
+		);
+	} catch (e: any) {
+		return result;
+	}
+
+	return result;
+}

packages/integrations/vue/package.json

@@ -21,14 +21,15 @@
   "homepage": "https://astro.build",
   "exports": {
     ".": "./dist/index.js",
+    "./editor": "./dist/editor.cjs",
     "./*": "./*",
     "./client.js": "./client.js",
     "./server.js": "./server.js",
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "astro-scripts build \"src/**/*.ts\" && tsc",
-    "build:ci": "astro-scripts build \"src/**/*.ts\"",
+    "build": "astro-scripts build \"src/index.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist && tsc",
+    "build:ci": "astro-scripts build \"src/**/*.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist",
     "dev": "astro-scripts dev \"src/**/*.ts\""
   },
   "dependencies": {

packages/integrations/vue/src/editor.cts

@@ -0,0 +1,55 @@
+import { parse } from '@vue/compiler-sfc';
+
+export function toTSX(code: string, className: string): string {
+	let result = `export default function ${className}__AstroComponent_(_props: Record<string, any>): any {}`;
+
+	// NOTE: As you can expect, using regexes for this is not exactly the most reliable way of doing things
+	// However, I couldn't figure out a way to do it using Vue's compiler, I tried looking at how Volar does it, but I
+	// didn't really understand everything happening there and it seemed to be pretty Volar-specific. I do believe
+	// someone more knowledgable on Vue's internals could figure it out, but since this solution is good enough for most
+	// Vue components (and it's an improvement over, well, nothing), it's alright, I think
+	try {
+		const parsedResult = parse(code);
+
+		if (parsedResult.errors.length > 0) {
+			return `
+				let ${className}__AstroComponent_: Error
+				export default ${className}__AstroComponent_
+			`;
+		}
+
+		if (parsedResult.descriptor.scriptSetup) {
+			const definePropsType =
+				parsedResult.descriptor.scriptSetup.content.match(/defineProps<([\s\S]+)>/m);
+
+			if (definePropsType) {
+				result = `
+						${parsedResult.descriptor.scriptSetup.content}
+
+						export default function ${className}__AstroComponent_(_props: ${definePropsType[1]}): any {
+							<div></div>
+						}
+				`;
+			} else {
+				const defineProps =
+					parsedResult.descriptor.scriptSetup.content.match(/defineProps\([\s\S]+\)/m);
+
+				if (defineProps) {
+					result = `
+					import { defineProps } from '@vue/runtime-core';
+
+					const Props = ${defineProps[0]}
+
+					export default function ${className}__AstroComponent_(_props: typeof Props): any {
+						<div></div>
+					}
+				`;
+				}
+			}
+		}
+	} catch (e: any) {
+		return result;
+	}
+
+	return result;
+}

scripts/cmd/build.js

@@ -47,23 +47,31 @@ export default async function build(...args) {
 		))
 	);
 
+	const noClean = args.includes('--no-clean-dist');
+	const forceCJS = args.includes('--force-cjs');
+
 	const {
 		type = 'module',
 		version,
 		dependencies = {},
 	} = await fs.readFile('./package.json').then((res) => JSON.parse(res.toString()));
 	// expose PACKAGE_VERSION on process.env for CLI utils
 	config.define = { 'process.env.PACKAGE_VERSION': JSON.stringify(version) };
-	const format = type === 'module' ? 'esm' : 'cjs';
+	const format = type === 'module' && !forceCJS ? 'esm' : 'cjs';
+
 	const outdir = 'dist';
-	await clean(outdir);
+
+	if (!noClean) {
+		await clean(outdir);
+	}
 
 	if (!isDev) {
 		await esbuild.build({
 			...config,
 			bundle: false,
 			entryPoints,
 			outdir,
+			outExtension: forceCJS ? { '.js': '.cjs' } : {},
 			format,
 		});
 		return;