Merge pull request #18 from ssssota/bumpup-svelte

chore: bumpup

.changeset/poor-onions-leave.md

@@ -0,0 +1,5 @@
+---
+"svelte-twc": minor
+---
+
+Support component

README.md

@@ -22,31 +22,17 @@ npm install svelte-twc
 If you are using VSCode, you can use auto-completion.
 Please check [TWC](https://react-twc.vercel.app/docs/getting-started#setup-autocompletion-in-your-editor) documentation.
 
-## Setup
-
-Setup tailwind.css in your project yourself.
-
-You need to add the plugin to your Vite config like this:
-
-```js
-import { sveltekit } from '@sveltejs/kit/vite';
-import { sveltetwc } from 'svelte-twc/vite';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-	plugins: [sveltekit(), sveltetwc()]
-});
-```
-
 ## Usage
 
 ```svelte
 <script lang="ts">
 	import { twc } from 'svelte-twc';
-	const Button = twc.button`bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600`;
+	const Button = twc.button`bg-blue-500 text-white px-4 py-2 rounded-md`;
+	const HoverableButton = twc(Button)`hover:bg-blue-600`;
 </script>
 
-<Button>Click me</Button>
+<Button onclick={() => alert('hi')}>Click me</Button>
+<HoverableButton>Hover me</HoverableButton>
 ```
 
 ## License

package.json

@@ -36,21 +36,21 @@
 		"url": "https://github.com/ssssota/svelte-twc/issues"
 	},
 	"homepage": "https://github.com/ssssota/svelte-twc#readme",
-	"packageManager": "[email protected].2",
+	"packageManager": "[email protected].4",
 	"devDependencies": {
 		"@changesets/changelog-github": "^0.5.0",
 		"@changesets/cli": "^2.27.1",
 		"@types/node": "^20.12.7",
 		"esbuild": "^0.20.2",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.2.3",
-		"svelte": "5.0.0-next.141",
+		"svelte": "5.0.0-next.151",
 		"tsx": "^4.7.2",
 		"typescript": "^5.4.5",
 		"vite": "^5.2.10"
 	},
 	"peerDependencies": {
-		"svelte": ">=5.0.0-next.141",
+		"svelte": ">=5.0.0-next.151",
 		"vite": ">=2.0.0"
 	},
 	"files": [

site/package.json

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

site/src/routes/+page.svelte

@@ -2,8 +2,9 @@
 	import Markdown, { type Plugin } from 'svelte-exmarkdown';
 	import { twc } from 'svelte-twc';
 	import { highlightPlugin } from '../lib/highlight';
+	import PaddingDiv from './PaddingDiv.svelte';
 	const Header = twc.header`bg-gray-200 text-gray-800`;
-	const HeaderContainer = twc.div`max-w-4xl mx-auto p-4 flex items-center justify-between`;
+	const HeaderContainer = twc(PaddingDiv)`max-w-4xl mx-auto flex items-center justify-between`;
 	const H1 = twc.h1`text-2xl font-bold`;
 	const Nav = twc.nav`flex items-center gap-4`;
 	const NavLink = twc.a`hover:underline`;
@@ -66,15 +67,16 @@ export default defineConfig({
 \`\`\`svelte
 <script lang="ts">
 	import { twc } from 'svelte-twc';
-	const Button = twc.button\`bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600\`;
+	const Button = twc.button\`bg-blue-500 text-white px-4 py-2 rounded-md\`;
+	const HoverableButton = twc(Button)\`hover:bg-blue-600\`;
 <\x2fscript>
 
-<Button>Click me</Button>
+<HoverableButton>Hover me</HoverableButton>
 \`\`\`
 
 Result:
 
-> Click me
+> Hover me
 
 \`\`\`svelte
 <script lang="ts">
@@ -99,7 +101,7 @@ Result:
 	<title>svelte-twc</title>
 </svelte:head>
 <Header>
-	<HeaderContainer>
+	<HeaderContainer class="test">
 		<H1>svelte-twc</H1>
 		<Nav>
 			<NavLink target="_blank" href="https://github.com/ssssota/svelte-twc">GitHub</NavLink>

site/src/routes/PaddingDiv.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		class: className,
+		children,
+		...props
+	}: Omit<HTMLAttributes<HTMLDivElement>, `on:${string}` | 'contenteditable'> = $props();
+</script>
+
+<div class="p-4 {className}" {...props}>{@render children?.()}</div>

src/utils.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, SvelteComponent } from 'svelte';
+import type { Component, ComponentProps } from 'svelte';
 import type {
 	HTMLAnchorAttributes,
 	HTMLAreaAttributes,
@@ -113,21 +113,37 @@ export type Attributes<El extends keyof HTMLElementTagNameMap> = El extends keyo
 	? HTMLPropsMap[El]
 	: HTMLAttributes<HTMLElementTagNameMap[El]>;
 export type HTMLElementTagNames = keyof HTMLElementTagNameMap;
-export type TwcFunction<El extends HTMLElementTagNames> = (
+export type TwcFunction<El> = (
 	strings: TemplateStringsArray,
 	...values: any[]
-) => ComponentType<SvelteComponent<Attributes<El>>>;
+) => Component<
+	El extends Component
+		? ComponentProps<El>
+		: El extends HTMLElementTagNames
+			? Attributes<El>
+			: never
+>;
 
-export type Twc = {
+export type TwcForComponent = <C extends Component<any>>(component: C) => TwcFunction<C>;
+export type TwcForElement = {
 	[El in HTMLElementTagNames]: TwcFunction<El>;
 };
+export type Twc = TwcForComponent & TwcForElement;
 export function createCore(
 	createTwcComponent: (el: HTMLElementTagNames, options: TwcOptions) => any
 ) {
 	return (options: TwcOptions) => {
 		const cache = new Map<HTMLElementTagNames, TwcFunction<HTMLElementTagNames>>();
 		return new Proxy(
-			{},
+			(component: Component) =>
+				(strings: TemplateStringsArray, ...values: any[]) => {
+					const cls = String.raw(
+						{ raw: typeof strings === 'string' ? [strings] : strings },
+						...values
+					);
+					return (internal: any, props: any) =>
+						component(internal, { ...props, class: options.compose(cls, props.class) });
+				},
 			{
 				get(_, el: HTMLElementTagNames): TwcFunction<HTMLElementTagNames> {
 					const cached = cache.get(el);