Merge pull request #25 from ssssota/bumpup-svelte

chore(script): refactor build script

Author: ssssota

package.json

@@ -43,17 +43,17 @@
 		"esbuild": "^0.20.2",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.2.3",
-		"svelte": "5.0.0-next.214",
+		"svelte": "5.0.0-next.238",
 		"tsx": "^4.7.2",
 		"typescript": "^5.4.5",
 		"vite": "^5.2.10"
 	},
 	"peerDependencies": {
-		"svelte": ">=5.0.0-next.214",
+		"svelte": ">=5.0.0-next.238",
 		"vite": ">=2.0.0"
 	},
 	"files": [
 		"dist"
 	],
-	"packageManager": "pnpm@9.7.0+sha256.b35018fbfa8f583668b2649e407922a721355cd81f61beeb4ac1d4258e585559"
+	"packageManager": "pnpm@9.8.0+sha512.8e4c3550fb500e808dbc30bb0ce4dd1eb614e30b1c55245f211591ec2cdf9c611cabd34e1364b42f564bd54b3945ed0f49d61d1bbf2ec9bd74b866fcdc723276"
 }

pnpm-lock.yaml

@@ -1,48 +1,15 @@
 import * as fs from 'node:fs/promises';
 import * as path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { compile } from 'svelte/compiler';
+import { generate } from './generator';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const root = path.resolve(__dirname, '..');
-const componentName = 'TwcComponent';
-const functionName = 'createTwcComponent';
-const replaceElement = 'div';
-const classVariable = 'cls';
 
 await main();
 async function main() {
-	await Promise.all([generate('client'), generate('server')]);
-}
-
-function generate(mode: 'client' | 'server') {
-	const { js } = compile(
-		`
-		<script>
-			let { children, class: className, ...props } = $props();
-		</script>
-		<${replaceElement} {...props} class={COMPOSE(className, CLASS)}>{@render children?.()}</${replaceElement}>
-	`,
-		{ generate: mode, filename: `${componentName}.svelte` }
-	);
-
-	return fs.writeFile(
-		path.resolve(root, `src/internal/${mode}.ts`),
-		js.code
-			.replace(/CLASS/g, classVariable)
-			.replace(/COMPOSE/g, 'options.compose')
-			.replace(`<${replaceElement}`, '<${el}')
-			.replace(`${replaceElement}>`, '${el}>')
-			.replace(
-				`import * as $ from "svelte/internal/${mode}";`,
-				[
-					'$&',
-					`export function ${functionName}(el: keyof HTMLElementTagNameMap, options: { compose: (...args: any[]) => string }) {`,
-					'return (strings: string | TemplateStringsArray, ...values: any[]) => {',
-					`const ${classVariable} = String.raw({ raw: typeof strings === 'string' ? [strings] : strings }, ...values);`
-				].join('\n')
-			)
-			.replace('export default', 'return')
-			.replace(/$/, '};\n}\n')
-	);
+	for (const mode of ['client', 'server'] as const) {
+		const code = generate(mode, true);
+		await fs.writeFile(path.resolve(root, `src/internal/${mode}.ts`), code);
+	}
 }

scripts/build.ts

@@ -0,0 +1,37 @@
+import { compile } from 'svelte/compiler';
+
+const componentName = 'TwcComponent';
+const functionName = 'createTwcComponent';
+const replaceElement = 'div';
+const classVariable = 'cls';
+
+export function generate(mode: 'client' | 'server', typescript = false) {
+	const { js } = compile(
+		`
+		<script>
+			let { children, class: className, ...props } = $props();
+		</script>
+		<${replaceElement} {...props} class={COMPOSE(className, CLASS)}>{@render children?.()}</${replaceElement}>
+	`,
+		{ generate: mode, filename: `${componentName}.svelte` }
+	);
+	// return code if typescript is true, otherwise return empty string
+	const ifTs = typescript ? (code: string) => code : (_code: string) => '';
+
+	return js.code
+		.replace(/CLASS/g, classVariable)
+		.replace(/COMPOSE/g, 'options.compose')
+		.replace(`<${replaceElement}`, '<${el}')
+		.replace(`${replaceElement}>`, '${el}>')
+		.replace(
+			`import * as $ from "svelte/internal/${mode}";`,
+			[
+				'$&',
+				`export function ${functionName}(el${ifTs(': keyof HTMLElementTagNameMap')}, options${ifTs(': { compose: (...args: any[]) => string }')}) {`,
+				`return (strings${ifTs(': string | TemplateStringsArray')}, ...values${ifTs(': any[]')}) => {`,
+				`const ${classVariable} = String.raw({ raw: typeof strings === 'string' ? [strings] : strings }, ...values);`
+			].join('\n')
+		)
+		.replace('export default', 'return')
+		.replace(/$/, '};\n}\n');
+}

scripts/generator.ts

@@ -19,7 +19,7 @@
 		"highlight.js": "^11.9.0",
 		"postcss": "^8.4.38",
 		"rehype-highlight": "^7.0.0",
-		"svelte": "5.0.0-next.214",
+		"svelte": "5.0.0-next.238",
 		"svelte-check": "^3.6.9",
 		"svelte-twc": "workspace:*",
 		"tailwindcss": "^3.4.3",