diff --git a/.changeset/poor-onions-leave.md b/.changeset/poor-onions-leave.md new file mode 100644 index 0000000..873b9d7 --- /dev/null +++ b/.changeset/poor-onions-leave.md @@ -0,0 +1,5 @@ +--- +"svelte-twc": minor +--- + +Support component diff --git a/README.md b/README.md index a3004a8..059f675 100644 --- a/README.md +++ b/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 - + +Hover me ``` ## License diff --git a/package.json b/package.json index 51321dc..02b891f 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "url": "https://github.com/ssssota/svelte-twc/issues" }, "homepage": "https://github.com/ssssota/svelte-twc#readme", - "packageManager": "pnpm@9.1.2", + "packageManager": "pnpm@9.1.4", "devDependencies": { "@changesets/changelog-github": "^0.5.0", "@changesets/cli": "^2.27.1", @@ -44,13 +44,13 @@ "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": [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 206d1b3..b9f36b6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -25,10 +25,10 @@ importers: version: 3.2.5 prettier-plugin-svelte: specifier: ^3.2.3 - version: 3.2.3(prettier@3.2.5)(svelte@5.0.0-next.141) + version: 3.2.3(prettier@3.2.5)(svelte@5.0.0-next.151) svelte: - specifier: 5.0.0-next.141 - version: 5.0.0-next.141 + specifier: 5.0.0-next.151 + version: 5.0.0-next.151 tsx: specifier: ^4.7.2 version: 4.7.2 @@ -43,20 +43,20 @@ importers: dependencies: svelte-exmarkdown: specifier: ^3.0.3 - version: 3.0.3(svelte@5.0.0-next.141) + version: 3.0.3(svelte@5.0.0-next.151) devDependencies: '@playwright/test': specifier: ^1.43.1 version: 1.43.1 '@sveltejs/adapter-static': specifier: ^3.0.1 - version: 3.0.1(@sveltejs/kit@2.5.7(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7))) + version: 3.0.1(@sveltejs/kit@2.5.7(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7))) '@sveltejs/kit': specifier: ^2.5.7 - version: 2.5.7(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)) + version: 2.5.7(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)) '@sveltejs/vite-plugin-svelte': specifier: ^3.1.0 - version: 3.1.0(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)) + version: 3.1.0(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)) autoprefixer: specifier: ^10.4.19 version: 10.4.19(postcss@8.4.38) @@ -70,11 +70,11 @@ importers: specifier: ^7.0.0 version: 7.0.0 svelte: - specifier: 5.0.0-next.141 - version: 5.0.0-next.141 + specifier: 5.0.0-next.151 + version: 5.0.0-next.151 svelte-check: specifier: ^3.6.9 - version: 3.6.9(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.141) + version: 3.6.9(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.151) svelte-twc: specifier: workspace:* version: link:.. @@ -2140,8 +2140,8 @@ packages: typescript: optional: true - svelte@5.0.0-next.141: - resolution: {integrity: sha512-zT74TUo0vOOrbxRfdlWXu+ac4O9lqPFG0YoZB3uOfrOewT1GKxKm0qwG/jo9bGvgZ++TSHjR7AtV091LY2FhBA==} + svelte@5.0.0-next.151: + resolution: {integrity: sha512-1XmoL74CYNpWQZI8o6IqXJQbIL+eVA+MIyfis0ErlEmO7p8+DxdsGREIyg2Qpr1CgT+Eva9R1zfMA9KG/Nd8wg==} engines: {node: '>=18'} tailwindcss@3.4.3: @@ -2852,13 +2852,13 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.16.4': optional: true - '@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.5.7(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)))': + '@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.5.7(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)))': dependencies: - '@sveltejs/kit': 2.5.7(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)) + '@sveltejs/kit': 2.5.7(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)) - '@sveltejs/kit@2.5.7(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7))': + '@sveltejs/kit@2.5.7(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7))': dependencies: - '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)) + '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)) '@types/cookie': 0.6.0 cookie: 0.6.0 devalue: 5.0.0 @@ -2870,28 +2870,28 @@ snapshots: sade: 1.8.1 set-cookie-parser: 2.6.0 sirv: 2.0.4 - svelte: 5.0.0-next.141 + svelte: 5.0.0-next.151 tiny-glob: 0.2.9 vite: 5.2.10(@types/node@20.12.7) - '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7))': + '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7))': dependencies: - '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)) + '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)) debug: 4.3.4 - svelte: 5.0.0-next.141 + svelte: 5.0.0-next.151 vite: 5.2.10(@types/node@20.12.7) transitivePeerDependencies: - supports-color - '@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7))': + '@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7))': dependencies: - '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.141)(vite@5.2.10(@types/node@20.12.7)) + '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)))(svelte@5.0.0-next.151)(vite@5.2.10(@types/node@20.12.7)) debug: 4.3.4 deepmerge: 4.3.1 kleur: 4.1.5 magic-string: 0.30.10 - svelte: 5.0.0-next.141 - svelte-hmr: 0.16.0(svelte@5.0.0-next.141) + svelte: 5.0.0-next.151 + svelte-hmr: 0.16.0(svelte@5.0.0-next.151) vite: 5.2.10(@types/node@20.12.7) vitefu: 0.2.5(vite@5.2.10(@types/node@20.12.7)) transitivePeerDependencies: @@ -4316,10 +4316,10 @@ snapshots: path-exists: 4.0.0 which-pm: 2.0.0 - prettier-plugin-svelte@3.2.3(prettier@3.2.5)(svelte@5.0.0-next.141): + prettier-plugin-svelte@3.2.3(prettier@3.2.5)(svelte@5.0.0-next.151): dependencies: prettier: 3.2.5 - svelte: 5.0.0-next.141 + svelte: 5.0.0-next.151 prettier@2.8.8: {} @@ -4654,7 +4654,7 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - svelte-check@3.6.9(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.141): + svelte-check@3.6.9(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.151): dependencies: '@jridgewell/trace-mapping': 0.3.25 chokidar: 3.6.0 @@ -4662,8 +4662,8 @@ snapshots: import-fresh: 3.3.0 picocolors: 1.0.0 sade: 1.8.1 - svelte: 5.0.0-next.141 - svelte-preprocess: 5.1.4(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.141)(typescript@5.4.5) + svelte: 5.0.0-next.151 + svelte-preprocess: 5.1.4(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.151)(typescript@5.4.5) typescript: 5.4.5 transitivePeerDependencies: - '@babel/core' @@ -4676,34 +4676,34 @@ snapshots: - stylus - sugarss - svelte-exmarkdown@3.0.3(svelte@5.0.0-next.141): + svelte-exmarkdown@3.0.3(svelte@5.0.0-next.151): dependencies: remark-gfm: 4.0.0 remark-parse: 11.0.0 remark-rehype: 11.1.0 - svelte: 5.0.0-next.141 + svelte: 5.0.0-next.151 unified: 11.0.4 transitivePeerDependencies: - supports-color - svelte-hmr@0.16.0(svelte@5.0.0-next.141): + svelte-hmr@0.16.0(svelte@5.0.0-next.151): dependencies: - svelte: 5.0.0-next.141 + svelte: 5.0.0-next.151 - svelte-preprocess@5.1.4(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.141)(typescript@5.4.5): + svelte-preprocess@5.1.4(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@5.0.0-next.151)(typescript@5.4.5): dependencies: '@types/pug': 2.0.10 detect-indent: 6.1.0 magic-string: 0.30.10 sorcery: 0.11.0 strip-indent: 3.0.0 - svelte: 5.0.0-next.141 + svelte: 5.0.0-next.151 optionalDependencies: postcss: 8.4.38 postcss-load-config: 4.0.2(postcss@8.4.38) typescript: 5.4.5 - svelte@5.0.0-next.141: + svelte@5.0.0-next.151: dependencies: '@ampproject/remapping': 2.3.0 '@jridgewell/sourcemap-codec': 1.4.15 diff --git a/site/package.json b/site/package.json index a2f658d..0a12d98 100644 --- a/site/package.json +++ b/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", diff --git a/site/src/routes/+page.svelte b/site/src/routes/+page.svelte index b6bf06b..fdda77e 100644 --- a/site/src/routes/+page.svelte +++ b/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 + +
{@render children?.()}
diff --git a/site/tests/index.test.ts-snapshots/render-images-with-each-plugins-1-linux.png b/site/tests/index.test.ts-snapshots/render-images-with-each-plugins-1-linux.png index b532d96..6d0b157 100644 Binary files a/site/tests/index.test.ts-snapshots/render-images-with-each-plugins-1-linux.png and b/site/tests/index.test.ts-snapshots/render-images-with-each-plugins-1-linux.png differ diff --git a/src/utils.ts b/src/utils.ts index 67d1b3e..3332b33 100644 --- a/src/utils.ts +++ b/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 keyo ? HTMLPropsMap[El] : HTMLAttributes; export type HTMLElementTagNames = keyof HTMLElementTagNameMap; -export type TwcFunction = ( +export type TwcFunction = ( strings: TemplateStringsArray, ...values: any[] -) => ComponentType>>; +) => Component< + El extends Component + ? ComponentProps + : El extends HTMLElementTagNames + ? Attributes + : never +>; -export type Twc = { +export type TwcForComponent = >(component: C) => TwcFunction; +export type TwcForElement = { [El in HTMLElementTagNames]: TwcFunction; }; +export type Twc = TwcForComponent & TwcForElement; export function createCore( createTwcComponent: (el: HTMLElementTagNames, options: TwcOptions) => any ) { return (options: TwcOptions) => { const cache = new Map>(); 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 { const cached = cache.get(el);