readme

Author: StephenGunn

.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.prettierrc

@@ -0,0 +1,17 @@
+{
+  "useTabs": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "plugins": [
+    "prettier-plugin-svelte"
+  ],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ]
+}

README.md

@@ -5,6 +5,8 @@ A package for easily rendering .png images from svelte components in SvelteKit.
 
 Good for rendering dynamic Open Graph images quickly and effeciently without having to use canvas.
 
+This package is NOT for rendering normal svelte components as images, you will need to write your components with image rendering in mind. The guidelines are set by ([Satori's CSS Guidelines](https://github.com/vercel/satori#css))
+
 [Demo](https://svelte-component-to-image.vercel.app/)
 
 ## Features
@@ -46,31 +48,30 @@ that require preproccesors like TypeScript or SASS.
 
 ```svelte
 <script lang="ts">
-    export let text: string = "hello"
+	export let text: string = 'hello';
 </script>
 
 <div id="container">
-    <h1>
-        {text} world!
-    </h1>
+	<h1>
+		{text} world!
+	</h1>
 </div>
 
-
 <style>
-    #container {
-        width: 1200px;
-        height: 600px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        background: rgb(63,94,251);
-        background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
-    }
-    h1 {
-        color: red;
-        font-size: 75px;
-    }
+	#container {
+		width: 1200px;
+		height: 600px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		background: rgb(63, 94, 251);
+		background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
+	}
+	h1 {
+		color: red;
+		font-size: 75px;
+	}
 </style>
 ```
 

eslint.config.js

@@ -0,0 +1,33 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-component-to-image",
-  "version": "1.0.0",
+  "version": "0.2.0",
   "license": "MIT",
   "author": "Stephen Gunn",
   "homepage": "https://github.com/StephenGunn/svelte-component-to-image",
@@ -12,28 +12,36 @@
     "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package",
     "prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
-    "test": "playwright test",
+    "test": "playwright test && npm run test:unit -- --run",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "vitest",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "format": "prettier --write ."
   },
   "devDependencies": {
     "@playwright/test": "^1.29.1",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/kit": "^2.5.27",
     "@sveltejs/package": "^1.0.2",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@types/eslint": "^9.6.0",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
-    "eslint": "^8.31.0",
+    "eslint": "^9.7.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.36.0",
     "eslint-plugin-svelte3": "^4.0.0",
+    "globals": "^15.0.0",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.6",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "tslib": "^2.4.1",
     "typescript": "^5.5.0",
+    "typescript-eslint": "^8.0.0",
     "vite": "^5.4.4",
-    "vitest": "^1.0.0"
+    "vitest": "^2.0.4"
   },
   "dependencies": {
     "@resvg/resvg-js": "^2.2.0",