Skip to content

Commit a426e0e

Browse files
ssssotassssota
authored
Merge pull request #19 from ssssota/preprocess-jsx
Preprocess jsx
2 parents a83ce63 + bf122ac commit a426e0e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1530
-1301
lines changed

‎.changeset/olive-hats-act.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"svelte-jsx-snippet": minor
3+
---
4+
5+
[BREAKING CHANGE] Preprocess JSX with Vite plugin

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
{
22
"editor.defaultFormatter": "esbenp.prettier-vscode",
33
"editor.formatOnSave": true,
4+
"editor.codeActionsOnSave": {
5+
"source.organizeImports": "explicit"
6+
},
47
"[svelte]": {
58
"editor.defaultFormatter": "svelte.svelte-vscode"
69
}

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,5 @@
2020
"prettier-plugin-svelte"
2121
]
2222
},
23-
"packageManager": "pnpm@9.3.0+sha512.ee7b93e0c2bd11409c6424f92b866f31d3ea1bef5fbe47d3c7500cdc3c9668833d2e55681ad66df5b640c61fa9dc25d546efa54d76d7f8bf54b13614ac293631"
23+
"packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"
2424
}

‎packages/svelte-jsx-snippet/README.md

Lines changed: 18 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,27 @@ tsconfig.json
1414
{
1515
"compilerOptions": {
1616
// set jsx config
17-
"jsx": "react-jsx",
17+
"jsx": "preserve",
1818
"jsxImportSource": "svelte-jsx-snippet",
1919
},
2020
// include jsx/tsx files
2121
"include": ["**/*.svelte", "**/*.ts", "**/*.tsx"],
2222
}
2323
```
2424

25+
vite.config.ts
26+
27+
```ts
28+
import { sveltekit } from "@sveltejs/kit/vite";
29+
import { defineConfig } from "vite";
30+
// Put svelteJsxSnippet plugin
31+
import { svelteJsxSnippet } from "svelte-jsx-snippet/vite";
32+
33+
export default defineConfig({
34+
plugins: [sveltekit(), svelteJsxSnippet()],
35+
});
36+
```
37+
2538
## Usage
2639

2740
For example: `MyComponent.svelte`
@@ -42,7 +55,7 @@ export default {
4255
};
4356
export const Default = {
4457
props: {
45-
children: <h1>Hello, World!</h1>,
58+
children: <h1 class="text-xl font-bold">Hello, World!</h1>,
4659
},
4760
};
4861
```
@@ -56,66 +69,19 @@ import MyComponent from "./MyComponent.svelte";
5669
test("render snippet ", () => {
5770
const { getByText } = render(MyComponent, {
5871
props: {
59-
children: <h1>Hello, World!</h1>,
72+
children: <h1 class="text-xl font-bold">Hello, World!</h1>,
6073
},
6174
});
6275
expect(getByText("Hello, World!")).toBeInTheDocument();
6376
});
6477
```
6578

66-
### Use svelte component in JSX
67-
68-
```jsx
69-
import MyComponent from "./MyComponent.svelte";
70-
import { jsx$ } from "svelte-jsx-snippet";
71-
const MyComponent$ = jsx$(MyComponent, ["children"]);
72-
const snippet = (
73-
<MyComponent$>
74-
<h1>Hello, World!</h1>
75-
</MyComponent$>
76-
);
77-
```
78-
79-
### Make a JSX component
80-
81-
```tsx
82-
import type { FC, JSXChildren } from "svelte-jsx-snippet";
83-
const SnippetComponent = (props: { children?: JSXChildren }) => {
84-
return <section>{children}</section>;
85-
};
86-
const snippet = (
87-
<SnippetComponent>
88-
<h1>Hello, World!</h1>
89-
</SnippetComponent>
90-
);
91-
```
92-
93-
### Use JSX component in Svelte
94-
95-
```tsx
96-
const SnippetComponent = (props: { children?: JSX.Element }) => {
97-
return <section>{children}</section>;
98-
};
99-
```
100-
101-
```svelte
102-
<script>
103-
import SnippetComponent from "./SnippetComponent.tsx";
104-
import { svelte$ } from "svelte-jsx-snippet";
105-
const SnippetComponent$ = svelte$(SnippetComponent, ["children"]);
106-
</script>
107-
108-
<SnippetComponent$>
109-
<h1>Hello, World!</h1>
110-
</SnippetComponent$>
111-
```
112-
11379
## Constraints
11480

11581
- Support only Svelte5
11682
- because Snippet is a feature of Svelte5.
117-
- Snippet must be static
118-
- because it does not follow the Svelte reactivity system.
83+
- You can't use Svelte's special syntax.
84+
- For example, `#if`, `#each`, `#await`, etc.
11985

12086
## License
12187

‎packages/svelte-jsx-snippet/package.json

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,26 @@
88
"exports": {
99
".": {
1010
"types": "./dist/index.d.ts",
11-
"browser": "./dist/index.js",
12-
"default": "./dist/index-server.js"
13-
},
14-
"./browser": {
15-
"types": "./dist/index-server.d.ts",
1611
"default": "./dist/index.js"
1712
},
18-
"./server": {
19-
"types": "./dist/index.d.ts",
20-
"default": "./dist/index-server.js"
13+
"./vite": {
14+
"types": "./dist/vite.d.ts",
15+
"default": "./dist/vite.js"
2116
},
2217
"./jsx-runtime": {
2318
"types": "./dist/jsx-runtime/index.d.ts",
24-
"browser": "./dist/jsx-runtime/index.js",
25-
"default": "./dist/jsx-runtime/index-server.js"
19+
"default": "./dist/jsx-runtime/index.js"
2620
},
2721
"./jsx-dev-runtime": {
2822
"types": "./dist/jsx-runtime/index.d.ts",
29-
"browser": "./dist/jsx-runtime/index.js",
30-
"default": "./dist/jsx-runtime/index-server.js"
23+
"default": "./dist/jsx-runtime/index.js"
3124
}
3225
},
3326
"scripts": {
34-
"dev": "tsc -w",
35-
"build": "tsc",
36-
"clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\""
27+
"dev": "tsup --watch",
28+
"build": "tsup",
29+
"test": "vitest",
30+
"check": "tsc --noEmit"
3731
},
3832
"repository": {
3933
"type": "git",
@@ -54,14 +48,20 @@
5448
},
5549
"homepage": "https://github.com/ssssota/svelte-jsx-snippet#readme",
5650
"devDependencies": {
57-
"svelte": "5.0.0-next.155",
51+
"@babel/generator": "^7.24.10",
52+
"@babel/parser": "^7.24.8",
53+
"@babel/types": "^7.24.9",
54+
"@types/babel__generator": "^7.6.8",
55+
"magic-string": "^0.30.10",
56+
"svelte": "5.0.0-next.183",
5857
"svelte-jsx-snippet": "workspace:*",
59-
"typescript": "^5.4.5",
60-
"vite": "^5.0.3",
61-
"vite-plugin-doctest": "^1.0.0",
62-
"vitest": "^1.2.0"
58+
"tsup": "^8.1.0",
59+
"typescript": "^5.5.3",
60+
"vite": "^5.3.4",
61+
"vitest": "^2.0.3"
6362
},
6463
"peerDependencies": {
65-
"svelte": ">=5.0.0-next.155"
64+
"svelte": ">=5.0.0-next.183",
65+
"vite": ">=5.0.0"
6666
}
6767
}

‎packages/svelte-jsx-snippet/src/constants.ts

Lines changed: 0 additions & 5 deletions
This file was deleted.

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

Lines changed: 0 additions & 48 deletions
This file was deleted.

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

Lines changed: 16 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,22 @@
1-
import * as $ from "svelte/internal/client";
2-
import type { FunctionComponent } from "./jsx-runtime/types";
3-
import type { Component } from "svelte";
4-
import { jsx as _jsx, Fragment } from "./jsx-runtime";
5-
import { add_snippet_symbol } from "./utils";
1+
import type { Snippet } from "svelte";
2+
import { Fragment } from "./jsx-runtime";
3+
import { ERROR_MESSAGE } from "./utils";
64

7-
/**
8-
* Convert a Svelte component to a JSX function component
9-
*
10-
* **\* The function component made by this function will be static.**
11-
*
12-
* @param Component Svelte component
13-
* @param snippetProps Property names that should be treated as snippets
14-
* @returns Function component that can be used in JSX
15-
* @example
16-
* ```jsx
17-
* import SomeComponent from "./SomeComponent.svelte";
18-
* const SomeComponent$ = jsx(SomeComponent, ["children"]);
19-
* const App = () => <SomeComponent$>test</SomeComponent$>;
20-
* ```
21-
*/
22-
export const jsx$ = <P extends Record<string, unknown>, S extends keyof P>(
23-
Component: Component<P>,
24-
snippetProps: readonly S[],
25-
): FunctionComponent<Omit<P, "children" & S>> => {
26-
return (props: P) => {
27-
const propertyEntries = Object.entries(props).map(([key, value]) => {
28-
if (snippetProps.includes(key as S)) {
29-
if (typeof value === "function") {
30-
return [key, value] as const;
31-
}
32-
const template = $.template(value, 1);
33-
return [
34-
key,
35-
add_snippet_symbol(($$anchor: unknown) => {
36-
$.append($$anchor, template());
37-
}),
38-
] as const;
39-
}
40-
return [key, value] as const;
41-
});
42-
return add_snippet_symbol(($$anchor: unknown) => {
43-
const fragment = $.comment();
44-
const root = $.first_child(fragment);
5+
export function $snippet<Args extends any[] = []>(
6+
_: (...args: Args) => Snippet<[]>,
7+
): Snippet<Args> {
8+
throw new Error(ERROR_MESSAGE);
9+
}
4510

46-
Component(root, Object.fromEntries(propertyEntries) as P);
11+
export function Render(_: { $: ReturnType<Snippet> }): Snippet<[]> {
12+
throw new Error(ERROR_MESSAGE);
13+
}
4714

48-
$.append($$anchor, fragment);
49-
});
50-
};
51-
};
52-
53-
/**
54-
* Convert a JSX function component to a Svelte component
55-
*
56-
* **\* The svelte component made by this function will be static.**
57-
*
58-
* @param Component Function component
59-
* @returns Svelte component that can be used .svelte files
60-
* @example
61-
* ```jsx
62-
* const SomeComponent = (props) => <span>{props.children}</span>;
63-
* ```
64-
*
65-
* ```svelte
66-
* <script>
67-
* import { svelte } from "svelte-jsx-snippet";
68-
* import SomeComponent from "./SomeComponent";
69-
* const SomeComponent$ = svelte(SomeComponent);
70-
* </script>
71-
* <SomeComponent$>test</SomeComponent$>
72-
* ```
73-
*/
74-
export const svelte$ = <P extends Record<string, unknown>>(
75-
Component: FunctionComponent<P>,
76-
): Component<P> => {
77-
return ($$anchor: unknown, $$props: P) => {
78-
const props = $.rest_props($$props, []);
79-
const fragment = $.comment();
80-
const node = $.first_child(fragment);
81-
const snippet = Component(props) as any;
82-
snippet(node);
83-
$.append($$anchor, fragment);
84-
return {};
85-
};
86-
};
87-
88-
export { Fragment };
89-
export {
90-
JSXChildren,
91-
FunctionComponent,
92-
FunctionComponent as FC,
15+
export type {
9316
ComponentProps,
17+
FunctionComponent as FC,
18+
FunctionComponent,
19+
JSXChildren,
9420
PropsWithChildren,
9521
} from "./jsx-runtime/types";
22+
export { Fragment };

0 commit comments

Comments
 (0)