fix: apply class by className

ssssota · Apr 9, 2022 · b9f023d · b9f023d
1 parent 4de5073
commit b9f023d
Show file tree

Hide file tree

Showing 21 changed files with 47 additions and 21 deletions.
diff --git a/scripts/createHtmlSvelte.js b/scripts/createHtmlSvelte.js
@@ -39,24 +39,26 @@ 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}>
 `
 	)
 );
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
+});