Save progress.

Author: cibernox

package-lock.json

@@ -11,6 +11,7 @@
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
+    "@babel/core": "^7.16.7",
     "@sveltejs/adapter-netlify": "next",
     "@sveltejs/kit": "next",
     "@testing-library/svelte": "^3.0.3",
@@ -27,7 +28,8 @@
     "tailwindcss": "^3.0.11",
     "tslib": "^2.3.1",
     "typescript": "^4.5.4",
-    "vitest": "^0.0.138"
+    "vitest": "^0.0.138",
+    "babel-plugin-svelte-inline-compile": "^0.0.1"
   },
   "type": "module",
   "dependencies": {

package.json

@@ -0,0 +1,37 @@
+const fileRegex = /\.test\.js$/
+import { transformSync } from '@babel/core';
+import svelteInlineCompileBabelPlugin from 'babel-plugin-svelte-inline-compile';
+const virtualModuleId = 'svelte-testing'
+const resolvedVirtualModuleId = '\0' + virtualModuleId
+
+
+export default function myPlugin() {
+  return {
+    name: 'svelte-inline-compile',
+    resolveId(id) {
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId
+      }
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        return '';
+        // return `export const msg = "from virtual module"`
+      }
+    },
+    transform(src, id) {
+      if (fileRegex.test(id)) {
+        let result = transformSync(src, {
+          plugins: [
+            svelteInlineCompileBabelPlugin
+          ],
+          ast: true,
+          sourceMaps: true,
+          sourceFileName: id
+        });
+        console.log(result.code);
+        return result;
+      }
+    },
+  }
+}

svelte-inline-compile.js

@@ -2,6 +2,7 @@ import { cleanup, render } from '@testing-library/svelte'
 import DefinitionEntry from '$lib/DefinitionEntry.svelte';
 import chai from 'chai';
 import chaiDom from 'chai-dom';
+// import svelte from 'svelte-testing';
 
 chai.use(chaiDom);
 
@@ -10,7 +11,11 @@ describe('DefinitionEntry.svelte', () => {
   afterEach(() => cleanup())
 
   it('renders a link with the given href', () => {
-    const { getByTestId } = render(DefinitionEntry, { background: 'gray' })
+    // const { getByTestId } = render(DefinitionEntry, { background: 'gray' })
+    // debugger;
+    const { getByTestId } = render(svelte`
+      <DefinitionEntry background="gray"></DefinitionEntry>
+    `)
     expect(getByTestId('definition-entry')).to.have.class('bg-gray-50');
   });
 });

tests/DefinitionEntrt.test.js

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