diff --git a/.changeset/olive-hats-act.md b/.changeset/olive-hats-act.md
new file mode 100644
index 0000000..5d75dc2
--- /dev/null
+++ b/.changeset/olive-hats-act.md
@@ -0,0 +1,5 @@
+---
+"svelte-jsx-snippet": minor
+---
+
+[BREAKING CHANGE] Preprocess JSX with Vite plugin
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 230508d..a0ad95c 100644
--- a/.vscode/settings.json
+++ b/.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"
}
diff --git a/package.json b/package.json
index 1bb7324..61031fc 100644
--- a/package.json
+++ b/package.json
@@ -20,5 +20,5 @@
"prettier-plugin-svelte"
]
},
- "packageManager": "pnpm@9.3.0+sha512.ee7b93e0c2bd11409c6424f92b866f31d3ea1bef5fbe47d3c7500cdc3c9668833d2e55681ad66df5b640c61fa9dc25d546efa54d76d7f8bf54b13614ac293631"
+ "packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903"
}
diff --git a/packages/svelte-jsx-snippet/README.md b/packages/svelte-jsx-snippet/README.md
index 50d0bef..ace9303 100644
--- a/packages/svelte-jsx-snippet/README.md
+++ b/packages/svelte-jsx-snippet/README.md
@@ -14,7 +14,7 @@ tsconfig.json
{
"compilerOptions": {
// set jsx config
- "jsx": "react-jsx",
+ "jsx": "preserve",
"jsxImportSource": "svelte-jsx-snippet",
},
// include jsx/tsx files
@@ -22,6 +22,19 @@ tsconfig.json
}
```
+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: Hello, World!
,
+ children: Hello, World!
,
},
};
```
@@ -56,66 +69,19 @@ import MyComponent from "./MyComponent.svelte";
test("render snippet ", () => {
const { getByText } = render(MyComponent, {
props: {
- children: Hello, World!
,
+ children: Hello, World!
,
},
});
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 = (
-
- Hello, World!
-
-);
-```
-
-### Make a JSX component
-
-```tsx
-import type { FC, JSXChildren } from "svelte-jsx-snippet";
-const SnippetComponent = (props: { children?: JSXChildren }) => {
- return ;
-};
-const snippet = (
-
- Hello, World!
-
-);
-```
-
-### Use JSX component in Svelte
-
-```tsx
-const SnippetComponent = (props: { children?: JSX.Element }) => {
- return ;
-};
-```
-
-```svelte
-
-
-
- Hello, World!
-
-```
-
## 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
diff --git a/packages/svelte-jsx-snippet/package.json b/packages/svelte-jsx-snippet/package.json
index 8632176..29554cf 100644
--- a/packages/svelte-jsx-snippet/package.json
+++ b/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"
}
}
diff --git a/packages/svelte-jsx-snippet/src/constants.ts b/packages/svelte-jsx-snippet/src/constants.ts
deleted file mode 100644
index d8a38ac..0000000
--- a/packages/svelte-jsx-snippet/src/constants.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const injectMarker = "";
-export const TEMPLATE_FRAGMENT = 1;
-export const FRAGMENT = "fragment";
-export const hydrationMarkerS = "";
-export const hydrationMarkerE = "";
diff --git a/packages/svelte-jsx-snippet/src/index-server.ts b/packages/svelte-jsx-snippet/src/index-server.ts
deleted file mode 100644
index 8ec16b7..0000000
--- a/packages/svelte-jsx-snippet/src/index-server.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as $ from "svelte/internal/server";
-import type { FunctionComponent } from "./jsx-runtime/types";
-import type { Component } from "svelte";
-import { jsx as _jsx } from "./jsx-runtime/index-server";
-import { hydrationMarkerE, hydrationMarkerS } from "./constants";
-import { add_snippet_symbol } from "./utils";
-
-export const jsx$ = , S extends keyof P>(
- Component: Component
,
- snippetProps: readonly S[],
-): FunctionComponent> => {
- 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;
- }
- return [
- key,
- add_snippet_symbol(($$payload: { out: string }) => {
- $$payload.out += String(value);
- }),
- ] as const;
- }
- return [key, value] as const;
- });
- return add_snippet_symbol(($$payload: { out: string }) => {
- $$payload.out += hydrationMarkerS;
- Component($$payload, Object.fromEntries(propertyEntries) as P);
- $$payload.out += hydrationMarkerE;
- });
- };
-};
-
-export const svelte$ = (fc: FunctionComponent): Component => {
- return ($$payload: { out: string }, $$props: T) => {
- $.push(true);
- const snippet = fc($$props) as any;
-
- $$payload.out += hydrationMarkerS;
- snippet($$payload);
- $$payload.out += hydrationMarkerE;
- $.pop();
- return {};
- };
-};
-
-export { Fragment } from "./jsx-runtime/index-server";
diff --git a/packages/svelte-jsx-snippet/src/index.ts b/packages/svelte-jsx-snippet/src/index.ts
index e1b5bf8..7fa54b0 100644
--- a/packages/svelte-jsx-snippet/src/index.ts
+++ b/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 = () => test;
- * ```
- */
-export const jsx$ = , S extends keyof P>(
- Component: Component
,
- snippetProps: readonly S[],
-): FunctionComponent> => {
- 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: Args) => Snippet<[]>,
+): Snippet {
+ throw new Error(ERROR_MESSAGE);
+}
- Component(root, Object.fromEntries(propertyEntries) as P);
+export function Render(_: { $: ReturnType }): 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) => {props.children};
- * ```
- *
- * ```svelte
- *
- * test
- * ```
- */
-export const svelte$ = >(
- Component: FunctionComponent
,
-): Component
=> {
- 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 };
diff --git a/packages/svelte-jsx-snippet/src/jsx-runtime/index-server.ts b/packages/svelte-jsx-snippet/src/jsx-runtime/index-server.ts
deleted file mode 100644
index c2e1d14..0000000
--- a/packages/svelte-jsx-snippet/src/jsx-runtime/index-server.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { Snippet } from "svelte";
-import {
- add_snippet_symbol,
- buildChildList,
- isVoidElement,
- renderProps,
-} from "../utils";
-import type { FunctionComponent, JsxDevOpts } from "./types";
-import { FRAGMENT, hydrationMarkerE, hydrationMarkerS } from "../constants";
-
-const jsxDEV = >(
- type: T = FRAGMENT as T,
- props: T extends FunctionComponent
- ? PROPS
- : Record,
- _key?: string | number | null | undefined,
- _isStatic?: boolean,
- _opts?: JsxDevOpts,
- _ctx?: unknown,
-): Snippet<[]> => {
- return add_snippet_symbol(($$payload: { out: string }) => {
- const { children, ...rest } = props;
- const childList = buildChildList(children);
- if (type === FRAGMENT || type === Fragment) {
- for (const child of childList) {
- if (child.type === "dynamic") {
- $$payload.out += hydrationMarkerS;
- child.fn($$payload);
- $$payload.out += hydrationMarkerE;
- } else {
- $$payload.out += child.text;
- }
- }
- return;
- }
- if (typeof type === "string") {
- $$payload.out += `<${type}${renderProps(rest)}>`;
- if (isVoidElement(type)) return;
- for (const child of childList) {
- if (child.type === "dynamic") {
- $$payload.out += hydrationMarkerS;
- child.fn($$payload);
- $$payload.out += hydrationMarkerE;
- } else {
- $$payload.out += child.text;
- }
- }
- $$payload.out += ``;
- return;
- }
- const snippet = (type as any)(props);
- snippet($$payload);
- });
-};
-
-export function Fragment(props: Record) {
- return jsxDEV(FRAGMENT, props);
-}
-
-export { jsxDEV as jsx, jsxDEV as jsxDEV, jsxDEV as jsxs, jsxDEV as jsxsDEV };
diff --git a/packages/svelte-jsx-snippet/src/jsx-runtime/index.ts b/packages/svelte-jsx-snippet/src/jsx-runtime/index.ts
index 34770ac..160a47b 100644
--- a/packages/svelte-jsx-snippet/src/jsx-runtime/index.ts
+++ b/packages/svelte-jsx-snippet/src/jsx-runtime/index.ts
@@ -1,69 +1,22 @@
-import type { Snippet } from "svelte";
+import type { Component, Snippet, SvelteComponent } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
-import * as $ from "svelte/internal/client";
-import {
- add_snippet_symbol,
- buildChildList,
- isVoidElement,
- renderProps,
-} from "../utils";
-import type { FunctionComponent, JSXChildren, JsxDevOpts } from "./types";
-import { FRAGMENT, TEMPLATE_FRAGMENT, injectMarker } from "../constants";
+import { ERROR_MESSAGE } from "../utils";
+import type { JSXChildren, JsxDevOpts } from "./types";
-const jsxDEV = >(
- type: T = FRAGMENT as T,
- props: T extends FunctionComponent
- ? PROPS
- : Record,
+const FRAGMENT = "fragment";
+
+const jsxDEV = >(
+ _type: T | undefined = FRAGMENT as T,
+ _props: T extends Component ? PROPS : Record,
_key?: string | number | null | undefined,
_isStatic?: boolean,
_opts?: JsxDevOpts,
_ctx?: unknown,
): Snippet<[]> => {
- const fragment = type === FRAGMENT || type === Fragment;
- const rootIsHtml = !fragment && typeof type === "string";
- const { children, ...rest } = props;
- const childList = buildChildList(children);
- const childrenContent = childList
- .map((child) => (child.type === "dynamic" ? injectMarker : child.text))
- .join("");
- const dynamicTokenIncludedAfter = (i: number) => {
- return childList.slice(i).some((child) => child.type === "dynamic");
- };
- const content = fragment
- ? childrenContent
- : rootIsHtml
- ? isVoidElement(type)
- ? `<${type}${renderProps(rest)}>`
- : `<${type}${renderProps(rest)}>${childrenContent}`
- : injectMarker;
- const template = $.template(content, fragment ? TEMPLATE_FRAGMENT : 0);
- return add_snippet_symbol(($$anchor: unknown) => {
- const root = template();
-
- if (fragment || rootIsHtml) {
- let i = 0;
- let target: unknown;
- while (dynamicTokenIncludedAfter(i)) {
- const child = childList[i++];
- if (child === undefined) break;
- target =
- target == null
- ? fragment
- ? $.first_child(root)
- : $.child(root)
- : $.sibling(target, child.type === "text");
- if (child.type === "dynamic") child.fn(target);
- }
- } else {
- const snippet = (type as any)(props);
- snippet($$anchor);
- }
- $.append($$anchor, root);
- });
+ throw new Error(ERROR_MESSAGE);
};
-export function Fragment(props: Record) {
+export function Fragment(props: Record): Snippet<[]> {
return jsxDEV(FRAGMENT, props);
}
@@ -78,10 +31,18 @@ export type JsxIntrinsicElements = {
> & { children?: JSXChildren };
};
+type ComponentOrSvelteComponent = SvelteComponent & {
+ $$prop_def: { children: JSXChildren };
+};
+
declare global {
namespace JSX {
interface IntrinsicElements extends JsxIntrinsicElements {}
type Element = Snippet<[]>;
+ interface ElementClass extends ComponentOrSvelteComponent {}
+ interface ElementAttributesProperty {
+ $$prop_def: unknown;
+ }
interface ElementChildrenAttribute {
children: JSXChildren;
}
diff --git a/packages/svelte-jsx-snippet/src/jsx-runtime/types.ts b/packages/svelte-jsx-snippet/src/jsx-runtime/types.ts
index fa33aac..ba6733c 100644
--- a/packages/svelte-jsx-snippet/src/jsx-runtime/types.ts
+++ b/packages/svelte-jsx-snippet/src/jsx-runtime/types.ts
@@ -18,4 +18,4 @@ export interface JsxDevOpts {
export type FunctionComponent = (props: P) => Snippet<[]>;
export type ComponentProps =
T extends FunctionComponent ? P : never;
-export type PropsWithChildren = P & { children?: JSXChildren };
+export type PropsWithChildren
= P & { children?: JSXChildren };
diff --git a/packages/svelte-jsx-snippet/src/transformer/find-function-declaration-from-name.spec.ts b/packages/svelte-jsx-snippet/src/transformer/find-function-declaration-from-name.spec.ts
new file mode 100644
index 0000000..1ababdd
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/find-function-declaration-from-name.spec.ts
@@ -0,0 +1,11 @@
+import { parse } from "@babel/parser";
+import { expect, it } from "vitest";
+import { findFunctionDeclarationFromName } from "./find-function-declaration-from-name";
+
+it("should find named function declarator", () => {
+ const ast = parse("function a() {}", {
+ sourceType: "module",
+ });
+ expect(findFunctionDeclarationFromName("a", ast.program)).toBeDefined();
+ expect(findFunctionDeclarationFromName("b", ast.program)).toBeUndefined();
+});
diff --git a/packages/svelte-jsx-snippet/src/transformer/find-function-declaration-from-name.ts b/packages/svelte-jsx-snippet/src/transformer/find-function-declaration-from-name.ts
new file mode 100644
index 0000000..ebc1864
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/find-function-declaration-from-name.ts
@@ -0,0 +1,21 @@
+import type { FunctionDeclaration, Node } from "@babel/types";
+
+export function findFunctionDeclarationFromName(
+ name: string,
+ node: Node | Node[],
+): FunctionDeclaration | undefined {
+ if (typeof node !== "object" || node === null) return;
+ if (Array.isArray(node)) {
+ for (const child of node) {
+ const res = findFunctionDeclarationFromName(name, child);
+ if (res) return res;
+ }
+ return;
+ }
+ if (node.type === "FunctionDeclaration" && node.id?.name === name) {
+ return node;
+ }
+ return Object.values(node)
+ .map((v) => findFunctionDeclarationFromName(name, v))
+ .find((v) => v !== undefined);
+}
diff --git a/packages/svelte-jsx-snippet/src/transformer/find-jsx-node.spec.ts b/packages/svelte-jsx-snippet/src/transformer/find-jsx-node.spec.ts
new file mode 100644
index 0000000..500fa5a
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/find-jsx-node.spec.ts
@@ -0,0 +1,13 @@
+import { parse } from "@babel/parser";
+import { expect, it } from "vitest";
+import { findJsxNode } from "./find-jsx-node";
+
+it("find jsx node", async () => {
+ const code = `const a =
`;
+ const ast = parse(code, { plugins: ["jsx"] });
+ const actual = findJsxNode(ast.program);
+ expect(actual).toHaveLength(1);
+ expect(code.slice(actual[0].start!, actual[0].end!)).toBe(
+ "
",
+ );
+});
diff --git a/packages/svelte-jsx-snippet/src/transformer/find-jsx-node.ts b/packages/svelte-jsx-snippet/src/transformer/find-jsx-node.ts
new file mode 100644
index 0000000..f2ce5ea
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/find-jsx-node.ts
@@ -0,0 +1,12 @@
+import type { JSXElement, JSXFragment, Node } from "@babel/types";
+
+export function findJsxNode(node: Node): (JSXElement | JSXFragment)[] {
+ if (typeof node !== "object" || node === null) return [];
+ if (node.type === "JSXElement" || node.type === "JSXFragment") {
+ return [node];
+ }
+ if (Array.isArray(node)) {
+ return node.flatMap(findJsxNode);
+ }
+ return Object.values(node).flatMap(findJsxNode);
+}
diff --git a/packages/svelte-jsx-snippet/src/transformer/find-template-declarations.spec.ts b/packages/svelte-jsx-snippet/src/transformer/find-template-declarations.spec.ts
new file mode 100644
index 0000000..d7c13f1
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/find-template-declarations.spec.ts
@@ -0,0 +1,16 @@
+import { parse } from "@babel/parser";
+import { expect, it } from "vitest";
+import { findTemplateDeclarations } from "./find-template-declarations";
+
+it("find template declarations", () => {
+ const code = `
+import * as $ from 'svelte/internal/client';
+var root_1 = $.template('');
+`;
+ const ast = parse(code, { sourceType: "module" });
+ const [template] = findTemplateDeclarations(ast.program);
+ expect(template).toBeDefined();
+ expect(code.slice(template.start!, template.end!)).toBe(
+ "var root_1 = $.template('');",
+ );
+});
diff --git a/packages/svelte-jsx-snippet/src/transformer/find-template-declarations.ts b/packages/svelte-jsx-snippet/src/transformer/find-template-declarations.ts
new file mode 100644
index 0000000..4e6ffef
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/find-template-declarations.ts
@@ -0,0 +1,18 @@
+import type { Node, VariableDeclaration } from "@babel/types";
+import { traverse } from "@babel/types";
+
+export function findTemplateDeclarations(node: Node): VariableDeclaration[] {
+ const ret: VariableDeclaration[] = [];
+ traverse(node, (node, ancestors) => {
+ if (node.type !== "MemberExpression") return;
+ if (node.object.type !== "Identifier") return;
+ if (node.object.name !== "$") return;
+ if (node.property.type !== "Identifier") return;
+ if (node.property.name !== "template") return;
+ const variableDeclaration = ancestors
+ .map((a) => a.node)
+ .find((node) => node.type === "VariableDeclaration");
+ if (variableDeclaration) ret.push(variableDeclaration);
+ });
+ return ret;
+}
diff --git a/packages/svelte-jsx-snippet/src/transformer/find-variable-declarator-from-name.spec.ts b/packages/svelte-jsx-snippet/src/transformer/find-variable-declarator-from-name.spec.ts
new file mode 100644
index 0000000..48dc239
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/find-variable-declarator-from-name.spec.ts
@@ -0,0 +1,11 @@
+import { parse } from "@babel/parser";
+import { expect, it } from "vitest";
+import { findVariableDeclaratorFromName } from "./find-variable-declarator-from-name";
+
+it("should find named variable declarator", () => {
+ const ast = parse("const a = 1;", {
+ sourceType: "module",
+ });
+ expect(findVariableDeclaratorFromName("a", ast.program)).toBeDefined();
+ expect(findVariableDeclaratorFromName("b", ast.program)).toBeUndefined();
+});
diff --git a/packages/svelte-jsx-snippet/src/transformer/find-variable-declarator-from-name.ts b/packages/svelte-jsx-snippet/src/transformer/find-variable-declarator-from-name.ts
new file mode 100644
index 0000000..efd5980
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/find-variable-declarator-from-name.ts
@@ -0,0 +1,25 @@
+import type { Node, VariableDeclarator } from "@babel/types";
+
+export function findVariableDeclaratorFromName(
+ name: string,
+ node: Node | Node[],
+): VariableDeclarator | undefined {
+ if (typeof node !== "object" || node === null) return;
+ if (Array.isArray(node)) {
+ for (const child of node) {
+ const res = findVariableDeclaratorFromName(name, child);
+ if (res) return res;
+ }
+ return;
+ }
+ if (
+ node.type === "VariableDeclarator" &&
+ node.id.type === "Identifier" &&
+ node.id.name === name
+ ) {
+ return node;
+ }
+ return Object.values(node)
+ .map((v) => findVariableDeclaratorFromName(name, v))
+ .find((v) => v !== undefined);
+}
diff --git a/packages/svelte-jsx-snippet/src/transformer/generate-random-name.spec.ts b/packages/svelte-jsx-snippet/src/transformer/generate-random-name.spec.ts
new file mode 100644
index 0000000..4e38c7a
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/generate-random-name.spec.ts
@@ -0,0 +1,8 @@
+import { expect, it } from "vitest";
+import { generateRandomName } from "./generate-random-name";
+
+it("generate random name excluding existing names", () => {
+ const actual = generateRandomName("fooo");
+ expect(actual).not.toBe("fooo");
+ expect(actual).toHaveLength(4); // default length
+});
diff --git a/packages/svelte-jsx-snippet/src/transformer/generate-random-name.ts b/packages/svelte-jsx-snippet/src/transformer/generate-random-name.ts
new file mode 100644
index 0000000..996e1d8
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/generate-random-name.ts
@@ -0,0 +1,14 @@
+export function generateRandomName(
+ code: string,
+ length = 4,
+ charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_",
+): string {
+ const ret = Array.from(
+ { length },
+ () => charset[Math.floor(Math.random() * charset.length)],
+ ).join("");
+ if (code.includes(ret)) {
+ return generateRandomName(code, length + 1, charset);
+ }
+ return ret;
+}
diff --git a/packages/svelte-jsx-snippet/src/transformer/generator.ts b/packages/svelte-jsx-snippet/src/transformer/generator.ts
new file mode 100644
index 0000000..6c431bc
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/generator.ts
@@ -0,0 +1,3 @@
+import g from "@babel/generator";
+export const generate: typeof g =
+ typeof g === "function" ? g : (g as any).default;
diff --git a/packages/svelte-jsx-snippet/src/transformer/index.ts b/packages/svelte-jsx-snippet/src/transformer/index.ts
new file mode 100644
index 0000000..b757c14
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/index.ts
@@ -0,0 +1,110 @@
+import { parse } from "@babel/parser";
+import MagicString, { SourceMap } from "magic-string";
+import { compile } from "svelte/compiler";
+import { findFunctionDeclarationFromName } from "./find-function-declaration-from-name";
+import { findJsxNode } from "./find-jsx-node";
+import { findTemplateDeclarations } from "./find-template-declarations";
+import { findVariableDeclaratorFromName } from "./find-variable-declarator-from-name";
+import { generateRandomName } from "./generate-random-name";
+import { generate as generateFromAst } from "./generator";
+import { jsxToSvelteHtml } from "./jsx-to-svelte-html";
+import { renameIdentifierInPlace } from "./rename-identifier-in-place";
+
+export type TransformOptions = {
+ generate: "server" | "client";
+ dev: boolean;
+ typescript: boolean;
+};
+export function transform(
+ code: string,
+ options?: TransformOptions,
+): {
+ code: string;
+ map: SourceMap;
+} | null {
+ const {
+ generate = "client",
+ dev = false,
+ typescript = false,
+ } = options || {};
+ const componentName = generateRandomName(code);
+
+ // Find JSX nodes
+ const jsxNodes = findJsxNode(
+ parse(code, {
+ plugins: typescript ? ["jsx", "typescript"] : ["jsx"],
+ sourceType: "module",
+ }).program,
+ );
+ // Do nothing if no JSX nodes
+ if (jsxNodes.length === 0) return null;
+
+ const snippetNameMap = jsxNodes.map((jsx, i) => {
+ return [`${componentName}_snippet_${i}`, jsx] as const;
+ });
+
+ // Transform code
+ const s = new MagicString(code); // use MagicString to generate source map
+
+ const { js } = compile(
+ snippetNameMap
+ .map(([snippetName, jsx]) => {
+ return `{#snippet ${snippetName}()}${jsxToSvelteHtml(jsx)}{/snippet}`;
+ })
+ .join("\n"),
+ { generate, dev, name: componentName },
+ );
+ const ast = parse(js.code, { sourceType: "module" });
+
+ if (generate === "server") {
+ for (const [snippetName, jsx] of snippetNameMap) {
+ const fn = findFunctionDeclarationFromName(snippetName, ast.program);
+ if (!fn) {
+ throw new Error("Snippet function not found");
+ }
+ s.update(
+ jsx.start!,
+ jsx.end!,
+ `${dev ? "$.add_snippet_symbol" : ""}(${generateFromAst(fn).code})`,
+ );
+ }
+ } else {
+ renameIdentifierInPlace(ast.program, (name) => {
+ if (name.match(/^root_\d+$/)) return `${componentName}_${name}`;
+ });
+
+ const templates = findTemplateDeclarations(ast.program);
+ if (templates.length === 0) {
+ throw new Error("Template declaration not found");
+ }
+ s.prependLeft(
+ 0,
+ templates.map((template) => generateFromAst(template).code).join("\n"),
+ );
+
+ for (const [snippetName, jsx] of snippetNameMap) {
+ const snippetFn = findVariableDeclaratorFromName(
+ snippetName,
+ ast.program,
+ );
+ if (!snippetFn?.init) {
+ throw new Error("Snippet function not found");
+ }
+ s.update(jsx.start!, jsx.end!, generateFromAst(snippetFn.init).code);
+ }
+
+ if (dev) {
+ s.prependLeft(
+ 0,
+ `function ${componentName}(){}\n${componentName}.filename = "${componentName}";\n`,
+ );
+ }
+ }
+
+ s.prependLeft(0, `import * as $ from 'svelte/internal/${generate}';\n`);
+
+ return {
+ code: s.toString(),
+ map: s.generateMap(),
+ };
+}
diff --git a/packages/svelte-jsx-snippet/src/transformer/jsx-to-svelte-html.spec.ts b/packages/svelte-jsx-snippet/src/transformer/jsx-to-svelte-html.spec.ts
new file mode 100644
index 0000000..12ee1f7
--- /dev/null
+++ b/packages/svelte-jsx-snippet/src/transformer/jsx-to-svelte-html.spec.ts
@@ -0,0 +1,14 @@
+import { parse } from "@babel/parser";
+import { expect, it } from "vitest";
+import { findJsxNode } from "./find-jsx-node";
+import { jsxToSvelteHtml } from "./jsx-to-svelte-html";
+
+it("basic html element", () => {
+ const code = `
Hello world
Hello world
{@render children()}
-
+