Svelte v5 Support: #7

CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+## [5.0.0-next.1] - 2024-06-11
+
+### Added
+
+- Support for svelte v5
+
+### Changes
+
+- `svelteComponentToJsx`:
+  - components `props` should be provided by `options`. `props` is optional, If you have props then provide like:
+
+    ```js
+      svelteComponentToJsx( component, { props: {} } )
+    ```
+  - `svelte v5` doesn't provide `css` in `RenderOutput`, so if you have a `style` tag in component (optional) then you have to provide `style` inside `options`.
+
+    ```js
+      svelteComponentToJsx( component, { style: `<style> .cool { color: blue; } </style>` } )
+    ```
+
+### Removed
+
+- Previously, we used `vitePluginSvelteH2J` to support `css tree`. But, you can't use `css-tree` from `svelte v5`.
+  - Remove `vitePluginSvelteH2J` import from `vite.config.{js/ts}`.

README.md

@@ -40,46 +40,31 @@
 - Compatible with new version of svelte
     - As new versions are coming for better performance in svelte we maintain that.
 - Easy to use with all available syntax in html css.
-    - Support for class based internal style.
+    - Support for class based internal style (not valid for components).
     - inline css
 
 ## How To Use
 
 - Install @ethercorps/svelte-h2j using your favourite node package manager.
 ```bash
 # NPM
-$ npm install @ethercorps/svelte-h2j css-tree
+$ npm install @ethercorps/svelte-h2j@next
 ```
 
 ```bash
 # PNPM
-$ pnpm install @ethercorps/svelte-h2j css-tree
+$ pnpm install @ethercorps/svelte-h2j@next
 ```
 
 ```bash
 # Yarn
-$ yarn add @ethercorps/svelte-h2j css-tree
+$ yarn add @ethercorps/svelte-h2j@next
 ```
 ```bash
 # bun
-$ bun install @ethercorps/svelte-h2j css-tree
+$ bun install @ethercorps/svelte-h2j@next
 ```
 
-- Add `vite` plugin to `vite.config.[js,ts]`
-```js
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vitest/config';
-import {vitePluginSvelteH2J} from "@ethercorps/svelte-h2j/vite"
-
-export default defineConfig({
-	plugins: [sveltekit(), vitePluginSvelteH2J()],
-	test: {
-		include: ['src/**/*.{test,spec}.{js,ts}']
-	}
-});
-```
-> This is required as we build for production and add css-tree while build.
-
 - To convert html, css to JSX (Also supports Tailwind, inline css)
 ```javascript
 import {toReactElement} from "@ethercorps/svelte-h2j"
@@ -102,7 +87,7 @@ const htmlString =`
   </div>
 `;
 
-const jsx = toReactElement(htmlTemplate)  // Takes a string only
+const jsx = toReactElement(htmlTemplate) // Takes a string only
 const svg = await satori(jsx, {
   width: options.width,
   height: options.height,
@@ -122,9 +107,12 @@ const svg = await satori(jsx, {
 ```javascript
 import {svelteComponentToJsx} from "@ethercorps/svelte-h2j";
 import SvelteComponent from "SvelteComponent.svelte"
-const jsx = svelteComponentToJsx(SvelteComponent, props = {
-	a: 2 // if you have `export let a;` in component
-}) // Takes two parameters 1. Component 2. Component Props
+const jsx = svelteComponentToJsx(SvelteComponent, {
+	props: {
+      a: 2 // if you have `export let a;` in component
+    },
+  style: `<style> .cool { color: blue; } </style>` // Should include if you have style tag in your component, pass you style tag here as it is.
+}) // Takes two parameters 1. Component 2. Options: { props?: {}, style?: `` }
 
 const svg = await satori(jsx, {
   width: options.width,
@@ -147,6 +135,7 @@ const svg = await satori(jsx, {
 This software uses the following open source packages:
 
 - [Svelte](https://github.com/sveltejs/svelte)
+- [estree-walker](https://github.com/Rich-Harris/estree-walker)
 
 ## Related
 

example/vercel/package.json

@@ -12,8 +12,9 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-vercel": "^3.0.3",
-		"@sveltejs/kit": "^1.25.1",
+		"@sveltejs/adapter-vercel": "^4.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@typescript-eslint/eslint-plugin": "^6.7.4",
 		"@typescript-eslint/parser": "^6.7.4",
 		"css-tree": "^2.3.1",
@@ -26,13 +27,13 @@
 		"svelte-check": "^3.5.2",
 		"tslib": "^2.6.2",
 		"typescript": "^5.2.2",
-		"vite": "^4.4.11"
+		"vite": "^5.0.0"
 	},
 	"type": "module",
 	"dependencies": {
-		"@ethercorps/svelte-h2j": "^4.0.0",
+		"@ethercorps/svelte-h2j": "link:../../",
 		"@vercel/og": "^0.5.17",
 		"vite-plugin-wasm": "^3.3.0",
 		"workers-og": "^0.0.14"
 	}
-}
+}