Preprocess jsx

.changeset/olive-hats-act.md

@@ -0,0 +1,5 @@
+---
+"svelte-jsx-snippet": minor
+---
+
+[BREAKING CHANGE] Preprocess JSX with Vite plugin

.vscode/settings.json

@@ -1,6 +1,9 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit"
+  },
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
   }

package.json

@@ -20,5 +20,5 @@
       "prettier-plugin-svelte"
     ]
   },
-  "packageManager": "pnpm@9.3.0+sha512.ee7b93e0c2bd11409c6424f92b866f31d3ea1bef5fbe47d3c7500cdc3c9668833d2e55681ad66df5b640c61fa9dc25d546efa54d76d7f8bf54b13614ac293631"
+  "packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"
 }

packages/svelte-jsx-snippet/README.md

@@ -14,14 +14,27 @@ tsconfig.json
 {
   "compilerOptions": {
     // set jsx config
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "jsxImportSource": "svelte-jsx-snippet",
   },
   // include jsx/tsx files
   "include": ["**/*.svelte", "**/*.ts", "**/*.tsx"],
 }
 ```
 
+vite.config.ts
+
+```ts
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+// Put svelteJsxSnippet plugin
+import { svelteJsxSnippet } from "svelte-jsx-snippet/vite";
+
+export default defineConfig({
+  plugins: [sveltekit(), svelteJsxSnippet()],
+});
+```
+
 ## Usage
 
 For example: `MyComponent.svelte`
@@ -42,7 +55,7 @@ export default {
 };
 export const Default = {
   props: {
-    children: <h1>Hello, World!</h1>,
+    children: <h1 class="text-xl font-bold">Hello, World!</h1>,
   },
 };
 ```
@@ -56,66 +69,19 @@ import MyComponent from "./MyComponent.svelte";
 test("render snippet ", () => {
   const { getByText } = render(MyComponent, {
     props: {
-      children: <h1>Hello, World!</h1>,
+      children: <h1 class="text-xl font-bold">Hello, World!</h1>,
     },
   });
   expect(getByText("Hello, World!")).toBeInTheDocument();
 });
 ```
 
-### Use svelte component in JSX
-
-```jsx
-import MyComponent from "./MyComponent.svelte";
-import { jsx$ } from "svelte-jsx-snippet";
-const MyComponent$ = jsx$(MyComponent, ["children"]);
-const snippet = (
-  <MyComponent$>
-    <h1>Hello, World!</h1>
-  </MyComponent$>
-);
-```
-
-### Make a JSX component
-
-```tsx
-import type { FC, JSXChildren } from "svelte-jsx-snippet";
-const SnippetComponent = (props: { children?: JSXChildren }) => {
-  return <section>{children}</section>;
-};
-const snippet = (
-  <SnippetComponent>
-    <h1>Hello, World!</h1>
-  </SnippetComponent>
-);
-```
-
-### Use JSX component in Svelte
-
-```tsx
-const SnippetComponent = (props: { children?: JSX.Element }) => {
-  return <section>{children}</section>;
-};
-```
-
-```svelte
-<script>
-  import SnippetComponent from "./SnippetComponent.tsx";
-  import { svelte$ } from "svelte-jsx-snippet";
-  const SnippetComponent$ = svelte$(SnippetComponent, ["children"]);
-</script>
-
-<SnippetComponent$>
-  <h1>Hello, World!</h1>
-</SnippetComponent$>
-```
-
 ## Constraints
 
 - Support only Svelte5
   - because Snippet is a feature of Svelte5.
-- Snippet must be static
-  - because it does not follow the Svelte reactivity system.
+- You can't use Svelte's special syntax.
+  - For example, `#if`, `#each`, `#await`, etc.
 
 ## License
 

packages/svelte-jsx-snippet/package.json

@@ -8,32 +8,26 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "browser": "./dist/index.js",
-      "default": "./dist/index-server.js"
-    },
-    "./browser": {
-      "types": "./dist/index-server.d.ts",
       "default": "./dist/index.js"
     },
-    "./server": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index-server.js"
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "default": "./dist/vite.js"
     },
     "./jsx-runtime": {
       "types": "./dist/jsx-runtime/index.d.ts",
-      "browser": "./dist/jsx-runtime/index.js",
-      "default": "./dist/jsx-runtime/index-server.js"
+      "default": "./dist/jsx-runtime/index.js"
     },
     "./jsx-dev-runtime": {
       "types": "./dist/jsx-runtime/index.d.ts",
-      "browser": "./dist/jsx-runtime/index.js",
-      "default": "./dist/jsx-runtime/index-server.js"
+      "default": "./dist/jsx-runtime/index.js"
     }
   },
   "scripts": {
-    "dev": "tsc -w",
-    "build": "tsc",
-    "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\""
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "test": "vitest",
+    "check": "tsc --noEmit"
   },
   "repository": {
     "type": "git",
@@ -54,14 +48,20 @@
   },
   "homepage": "https://github.com/ssssota/svelte-jsx-snippet#readme",
   "devDependencies": {
-    "svelte": "5.0.0-next.155",
+    "@babel/generator": "^7.24.10",
+    "@babel/parser": "^7.24.8",
+    "@babel/types": "^7.24.9",
+    "@types/babel__generator": "^7.6.8",
+    "magic-string": "^0.30.10",
+    "svelte": "5.0.0-next.183",
     "svelte-jsx-snippet": "workspace:*",
-    "typescript": "^5.4.5",
-    "vite": "^5.0.3",
-    "vite-plugin-doctest": "^1.0.0",
-    "vitest": "^1.2.0"
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4",
+    "vitest": "^2.0.3"
   },
   "peerDependencies": {
-    "svelte": ">=5.0.0-next.155"
+    "svelte": ">=5.0.0-next.183",
+    "vite": ">=5.0.0"
   }
 }

packages/svelte-jsx-snippet/src/index.ts

@@ -1,95 +1,22 @@
-import * as $ from "svelte/internal/client";
-import type { FunctionComponent } from "./jsx-runtime/types";
-import type { Component } from "svelte";
-import { jsx as _jsx, Fragment } from "./jsx-runtime";
-import { add_snippet_symbol } from "./utils";
+import type { Snippet } from "svelte";
+import { Fragment } from "./jsx-runtime";
+import { ERROR_MESSAGE } from "./utils";
 
-/**
- * Convert a Svelte component to a JSX function component
- *
- * **\* The function component made by this function will be static.**
- *
- * @param Component Svelte component
- * @param snippetProps Property names that should be treated as snippets
- * @returns Function component that can be used in JSX
- * @example
- * ```jsx
- * import SomeComponent from "./SomeComponent.svelte";
- * const SomeComponent$ = jsx(SomeComponent, ["children"]);
- * const App = () => <SomeComponent$>test</SomeComponent$>;
- * ```
- */
-export const jsx$ = <P extends Record<string, unknown>, S extends keyof P>(
-  Component: Component<P>,
-  snippetProps: readonly S[],
-): FunctionComponent<Omit<P, "children" & S>> => {
-  return (props: P) => {
-    const propertyEntries = Object.entries(props).map(([key, value]) => {
-      if (snippetProps.includes(key as S)) {
-        if (typeof value === "function") {
-          return [key, value] as const;
-        }
-        const template = $.template(value, 1);
-        return [
-          key,
-          add_snippet_symbol(($$anchor: unknown) => {
-            $.append($$anchor, template());
-          }),
-        ] as const;
-      }
-      return [key, value] as const;
-    });
-    return add_snippet_symbol(($$anchor: unknown) => {
-      const fragment = $.comment();
-      const root = $.first_child(fragment);
+export function $snippet<Args extends any[] = []>(
+  _: (...args: Args) => Snippet<[]>,
+): Snippet<Args> {
+  throw new Error(ERROR_MESSAGE);
+}
 
-      Component(root, Object.fromEntries(propertyEntries) as P);
+export function Render(_: { $: ReturnType<Snippet> }): Snippet<[]> {
+  throw new Error(ERROR_MESSAGE);
+}
 
-      $.append($$anchor, fragment);
-    });
-  };
-};
-
-/**
- * Convert a JSX function component to a Svelte component
- *
- * **\* The svelte component made by this function will be static.**
- *
- * @param Component Function component
- * @returns Svelte component that can be used .svelte files
- * @example
- * ```jsx
- * const SomeComponent = (props) => <span>{props.children}</span>;
- * ```
- *
- * ```svelte
- * <script>
- *   import { svelte } from "svelte-jsx-snippet";
- *   import SomeComponent from "./SomeComponent";
- *   const SomeComponent$ = svelte(SomeComponent);
- * </script>
- * <SomeComponent$>test</SomeComponent$>
- * ```
- */
-export const svelte$ = <P extends Record<string, unknown>>(
-  Component: FunctionComponent<P>,
-): Component<P> => {
-  return ($$anchor: unknown, $$props: P) => {
-    const props = $.rest_props($$props, []);
-    const fragment = $.comment();
-    const node = $.first_child(fragment);
-    const snippet = Component(props) as any;
-    snippet(node);
-    $.append($$anchor, fragment);
-    return {};
-  };
-};
-
-export { Fragment };
-export {
-  JSXChildren,
-  FunctionComponent,
-  FunctionComponent as FC,
+export type {
   ComponentProps,
+  FunctionComponent as FC,
+  FunctionComponent,
+  JSXChildren,
   PropsWithChildren,
 } from "./jsx-runtime/types";
+export { Fragment };