From b9f023d3fc3c7fda19232b418b98d2811faa18c8 Mon Sep 17 00:00:00 2001
From: ssssota <tommysouta@gmail.com>
Date: Sat, 9 Apr 2022 18:33:34 +0900
Subject: [PATCH] fix: apply class by className

---
 scripts/createHtmlSvelte.js             | 6 ++++--
 src/lib/renderer/html/A.svelte          | 3 ++-
 src/lib/renderer/html/Blockquote.svelte | 3 ++-
 src/lib/renderer/html/Br.svelte         | 3 ++-
 src/lib/renderer/html/Code.svelte       | 3 ++-
 src/lib/renderer/html/Em.svelte         | 3 ++-
 src/lib/renderer/html/H1.svelte         | 3 ++-
 src/lib/renderer/html/H2.svelte         | 3 ++-
 src/lib/renderer/html/H3.svelte         | 3 ++-
 src/lib/renderer/html/H4.svelte         | 3 ++-
 src/lib/renderer/html/H5.svelte         | 3 ++-
 src/lib/renderer/html/H6.svelte         | 3 ++-
 src/lib/renderer/html/Hr.svelte         | 3 ++-
 src/lib/renderer/html/Input.svelte      | 3 ++-
 src/lib/renderer/html/Li.svelte         | 3 ++-
 src/lib/renderer/html/Ol.svelte         | 3 ++-
 src/lib/renderer/html/P.svelte          | 3 ++-
 src/lib/renderer/html/Pre.svelte        | 3 ++-
 src/lib/renderer/html/Strong.svelte     | 3 ++-
 src/lib/renderer/html/Ul.svelte         | 3 ++-
 src/lib/utils.ts                        | 5 +++++
 21 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/scripts/createHtmlSvelte.js b/scripts/createHtmlSvelte.js
index db66807c..8eb06204 100644
--- a/scripts/createHtmlSvelte.js
+++ b/scripts/createHtmlSvelte.js
@@ -39,13 +39,14 @@ tagNamesHaveChildren.map((tagName) =>
 	writeFileSync(
 		join(dir, `${upperFirst(tagName)}.svelte`),
 		`<script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<${tagName} {...properties}><Children {children} /></${tagName}>
+<${tagName} {...classNameTransform(properties)}><Children {children} /></${tagName}>
 `
 	)
 );
@@ -53,10 +54,11 @@ tagNamesHaveNoChild.map((tagName) =>
 	writeFileSync(
 		join(dir, `${upperFirst(tagName)}.svelte`),
 		`<script lang="ts">
+	import { classNameTransform } from '../../utils';
 	export let properties: Record<string, unknown>;
 </script>
 
-<${tagName} {...properties} />
+<${tagName} {...classNameTransform(properties)} />
 `
 	)
 );
diff --git a/src/lib/renderer/html/A.svelte b/src/lib/renderer/html/A.svelte
index b79e44ea..b43bf624 100644
--- a/src/lib/renderer/html/A.svelte
+++ b/src/lib/renderer/html/A.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<a {...properties}><Children {children} /></a>
+<a {...classNameTransform(properties)}><Children {children} /></a>
diff --git a/src/lib/renderer/html/Blockquote.svelte b/src/lib/renderer/html/Blockquote.svelte
index 7fe89e1b..a3a51843 100644
--- a/src/lib/renderer/html/Blockquote.svelte
+++ b/src/lib/renderer/html/Blockquote.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<blockquote {...properties}><Children {children} /></blockquote>
+<blockquote {...classNameTransform(properties)}><Children {children} /></blockquote>
diff --git a/src/lib/renderer/html/Br.svelte b/src/lib/renderer/html/Br.svelte
index 7981dced..97acaa0b 100644
--- a/src/lib/renderer/html/Br.svelte
+++ b/src/lib/renderer/html/Br.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	export let properties: Record<string, unknown>;
 </script>
 
-<br {...properties} />
+<br {...classNameTransform(properties)} />
diff --git a/src/lib/renderer/html/Code.svelte b/src/lib/renderer/html/Code.svelte
index 8c7eed59..ab108b47 100644
--- a/src/lib/renderer/html/Code.svelte
+++ b/src/lib/renderer/html/Code.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<code {...properties}><Children {children} /></code>
+<code {...classNameTransform(properties)}><Children {children} /></code>
diff --git a/src/lib/renderer/html/Em.svelte b/src/lib/renderer/html/Em.svelte
index 1c8a1dab..6bfa74ea 100644
--- a/src/lib/renderer/html/Em.svelte
+++ b/src/lib/renderer/html/Em.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<em {...properties}><Children {children} /></em>
+<em {...classNameTransform(properties)}><Children {children} /></em>
diff --git a/src/lib/renderer/html/H1.svelte b/src/lib/renderer/html/H1.svelte
index 3f27834c..b25fab7c 100644
--- a/src/lib/renderer/html/H1.svelte
+++ b/src/lib/renderer/html/H1.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<h1 {...properties}><Children {children} /></h1>
+<h1 {...classNameTransform(properties)}><Children {children} /></h1>
diff --git a/src/lib/renderer/html/H2.svelte b/src/lib/renderer/html/H2.svelte
index ed4a4603..a91241ac 100644
--- a/src/lib/renderer/html/H2.svelte
+++ b/src/lib/renderer/html/H2.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<h2 {...properties}><Children {children} /></h2>
+<h2 {...classNameTransform(properties)}><Children {children} /></h2>
diff --git a/src/lib/renderer/html/H3.svelte b/src/lib/renderer/html/H3.svelte
index 3c6ff8a2..8ae2054a 100644
--- a/src/lib/renderer/html/H3.svelte
+++ b/src/lib/renderer/html/H3.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<h3 {...properties}><Children {children} /></h3>
+<h3 {...classNameTransform(properties)}><Children {children} /></h3>
diff --git a/src/lib/renderer/html/H4.svelte b/src/lib/renderer/html/H4.svelte
index 18989e13..1ecae6c1 100644
--- a/src/lib/renderer/html/H4.svelte
+++ b/src/lib/renderer/html/H4.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<h4 {...properties}><Children {children} /></h4>
+<h4 {...classNameTransform(properties)}><Children {children} /></h4>
diff --git a/src/lib/renderer/html/H5.svelte b/src/lib/renderer/html/H5.svelte
index 9bbd0afc..1c7554eb 100644
--- a/src/lib/renderer/html/H5.svelte
+++ b/src/lib/renderer/html/H5.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<h5 {...properties}><Children {children} /></h5>
+<h5 {...classNameTransform(properties)}><Children {children} /></h5>
diff --git a/src/lib/renderer/html/H6.svelte b/src/lib/renderer/html/H6.svelte
index c7ec7eef..d61af8f3 100644
--- a/src/lib/renderer/html/H6.svelte
+++ b/src/lib/renderer/html/H6.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<h6 {...properties}><Children {children} /></h6>
+<h6 {...classNameTransform(properties)}><Children {children} /></h6>
diff --git a/src/lib/renderer/html/Hr.svelte b/src/lib/renderer/html/Hr.svelte
index 2110061e..8bcba859 100644
--- a/src/lib/renderer/html/Hr.svelte
+++ b/src/lib/renderer/html/Hr.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	export let properties: Record<string, unknown>;
 </script>
 
-<hr {...properties} />
+<hr {...classNameTransform(properties)} />
diff --git a/src/lib/renderer/html/Input.svelte b/src/lib/renderer/html/Input.svelte
index bc4daaaa..c03580be 100644
--- a/src/lib/renderer/html/Input.svelte
+++ b/src/lib/renderer/html/Input.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	export let properties: Record<string, unknown>;
 </script>
 
-<input {...properties} />
+<input {...classNameTransform(properties)} />
diff --git a/src/lib/renderer/html/Li.svelte b/src/lib/renderer/html/Li.svelte
index 00d9fae1..dc9ac4fe 100644
--- a/src/lib/renderer/html/Li.svelte
+++ b/src/lib/renderer/html/Li.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<li {...properties}><Children {children} /></li>
+<li {...classNameTransform(properties)}><Children {children} /></li>
diff --git a/src/lib/renderer/html/Ol.svelte b/src/lib/renderer/html/Ol.svelte
index 546e6969..5bfe8422 100644
--- a/src/lib/renderer/html/Ol.svelte
+++ b/src/lib/renderer/html/Ol.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<ol {...properties}><Children {children} /></ol>
+<ol {...classNameTransform(properties)}><Children {children} /></ol>
diff --git a/src/lib/renderer/html/P.svelte b/src/lib/renderer/html/P.svelte
index cf685e91..271fa48a 100644
--- a/src/lib/renderer/html/P.svelte
+++ b/src/lib/renderer/html/P.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<p {...properties}><Children {children} /></p>
+<p {...classNameTransform(properties)}><Children {children} /></p>
diff --git a/src/lib/renderer/html/Pre.svelte b/src/lib/renderer/html/Pre.svelte
index b3802a7d..991ff00b 100644
--- a/src/lib/renderer/html/Pre.svelte
+++ b/src/lib/renderer/html/Pre.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<pre {...properties}><Children {children} /></pre>
+<pre {...classNameTransform(properties)}><Children {children} /></pre>
diff --git a/src/lib/renderer/html/Strong.svelte b/src/lib/renderer/html/Strong.svelte
index 0bd7e0a9..ba24ae79 100644
--- a/src/lib/renderer/html/Strong.svelte
+++ b/src/lib/renderer/html/Strong.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<strong {...properties}><Children {children} /></strong>
+<strong {...classNameTransform(properties)}><Children {children} /></strong>
diff --git a/src/lib/renderer/html/Ul.svelte b/src/lib/renderer/html/Ul.svelte
index c348c677..f17eef0e 100644
--- a/src/lib/renderer/html/Ul.svelte
+++ b/src/lib/renderer/html/Ul.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { classNameTransform } from '../../utils';
 	import type { Node } from '$lib/types';
 	import Children from '../Children.svelte';
 	export let children: Node[];
 	export let properties: Record<string, unknown>;
 </script>
 
-<ul {...properties}><Children {children} /></ul>
+<ul {...classNameTransform(properties)}><Children {children} /></ul>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 76261ced..45218a77 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -13,3 +13,8 @@ export const createParser = (plugins: Plugin[]): Parser => {
 		.use(plugins.map((plugin) => plugin.rehypePlugin).filter(nonNullable));
 	return (md: string) => processor.runSync(processor.parse(md), md);
 };
+
+export const classNameTransform = <T extends Record<string, unknown>>(obj: T): T => ({
+	class: obj['className'],
+	...obj
+});