Emperiment with svelte-inline-components

Author: cibernox

package-lock.json

@@ -28,7 +28,7 @@
     "tslib": "^2.3.1",
     "typescript": "^4.5.4",
     "vitest": "^0.0.138",
-    "vite-plugin-svelte-inline-compile": "^0.0.1"
+    "vite-plugin-svelte-inline-components": "file://Users/miguelcamba/code/own/vite-plugin-svelte-inline-components"
   },
   "type": "module",
   "dependencies": {

package.json

@@ -4,10 +4,10 @@
 <div 
   data-testid="definition-entry"
   class="{background === 'gray' ? 'bg-gray-50' : 'bg-white'} px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-  <dt class="text-sm font-medium text-gray-500">
+  <dt class="text-sm font-medium text-gray-500" data-testid="dt">
     <slot name="dt"/>
   </dt>
-  <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+  <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2" data-testid="dd">
     <slot name="dd"></slot>
   </dd>
 </div>

src/lib/DefinitionEntry.svelte

@@ -0,0 +1,20 @@
+import { cleanup, render } from '@testing-library/svelte'
+import { svelte } from 'vite-plugin-svelte-inline-components';
+
+describe('DefinitionEntry.svelte', () => {
+  // TODO: @testing-library/svelte claims to add this automatically but it doesn't work without explicit afterEach
+  afterEach(() => cleanup())
+
+  it('renders a link with the given href', async () => {
+    const { getByTestId } = render(await svelte`
+      <script>import DefinitionEntry from '$lib/DefinitionEntry.svelte';</script>
+      <DefinitionEntry background="gray">
+        <svelte:fragment slot="dt">I'm the description term</svelte:fragment>
+        <svelte:fragment slot="dd">I'm the description definition</svelte:fragment>    
+      </DefinitionEntry>
+    `);
+    expect(getByTestId('definition-entry')).to.have.class('bg-gray-50');
+    expect(getByTestId('dt')).to.have.text("I'm the description term");
+    expect(getByTestId('dd')).to.have.text("I'm the description definition");
+  });
+});

tests/DefinitionEntrt.test.js

@@ -0,0 +1,17 @@
+import { cleanup, render } from '@testing-library/svelte'
+import { svelte } from 'vite-plugin-svelte-inline-components';
+
+describe('NavLink.svelte', () => {
+  // TODO: @testing-library/svelte claims to add this automatically but it doesn't work without explicit afterEach
+  afterEach(() => cleanup())
+
+  it('renders a link with the given href', async () => {
+    const { getByTestId } = render(await svelte`
+      <script>import NavLink from '$lib/NavLink.svelte';</script>
+      <NavLink href="/foo/bar">Link text</NavLink>
+    `);
+    expect(getByTestId('definition-entry')).to.have.class('bg-gray-50');
+    expect(getByTestId('dt')).to.have.text("I'm the description term");
+    expect(getByTestId('dd')).to.have.text("I'm the description definition");
+  });
+});

tests/DefinitionEntry.test.js

@@ -2,16 +2,15 @@ import { defineConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import { sveltekitViteConfig } from './svelte.config.js'
 import path from 'path';
-import svelteInlineCompile from 'vite-plugin-svelte-inline-compile';
+import svelteInlineComponents from 'vite-plugin-svelte-inline-components';
 
 export default defineConfig({
   ...sveltekitViteConfig,
   plugins: [
     svelte({ 
       hot: !process.env.VITEST,
-      compilerOptions: { format: "cjs" }
     }),
-    svelteInlineCompile(),
+    svelteInlineComponents(),
   ],
   test: {
     global: true,