generic solid wrapper

packages/web/package.json

@@ -16,6 +16,7 @@
     "@ant-design/colors": "^5.0.0",
     "@energiency/chartjs-plugin-piechart-outlabels": "^1.3.4",
     "@mdi/font": "^7.1.96",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
@@ -60,7 +61,9 @@
     "uuid": "^3.4.0"
   },
   "dependencies": {
+    "@babel/preset-typescript": "^7.27.1",
     "@messageformat/core": "^3.4.0",
+    "babel-preset-solid": "^1.9.8",
     "chartjs-plugin-zoom": "^1.2.0",
     "date-fns": "^4.1.0",
     "debug": "^4.3.4",
@@ -70,6 +73,7 @@
     "interval-operations": "^1.0.7",
     "leaflet": "^1.8.0",
     "openai": "^5.10.1",
+    "solid-js": "^1.9.8",
     "wellknown": "^0.5.0",
     "xml-formatter": "^3.6.4"
   }

packages/web/rollup.config.js

@@ -9,6 +9,7 @@ import typescript from '@rollup/plugin-typescript';
 import replace from '@rollup/plugin-replace';
 import css from 'rollup-plugin-css-only';
 import json from '@rollup/plugin-json';
+import babel from '@rollup/plugin-babel';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -33,6 +34,8 @@ function serve() {
   };
 }
 
+const BABEL_EXTENSIONS = ['.js', '.ts', '.tsx'];
+
 export default [
   {
     input: 'src/query/QueryParserWorker.js',
@@ -122,6 +125,16 @@ export default [
         sourceMap: !production,
         inlineSources: !production,
       }),
+      babel({
+        // +++
+        extensions: BABEL_EXTENSIONS,
+        babelHelpers: 'bundled',
+        presets: [
+          ['solid', { generate: 'dom', hydratable: false }], // Solid JSX transform
+          '@babel/preset-typescript',
+        ],
+        exclude: /node_modules/,
+      }),
       json(),
 
       // In dev mode, call `npm run start` once

packages/web/src/utility/MySolidComponent.tsx

@@ -0,0 +1,12 @@
+import { createSignal } from "solid-js";
+
+export default function MySolidComponent(props) {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <div style="border: 1px solid gray; padding: 10px;">
+      <p>Hello from Solid ({props.message})! Count: {count()}</p>
+      <button onClick={() => setCount(count() + 1)}>Increment</button>
+    </div>
+  );
+}

packages/web/src/utility/SolidWrapper.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import { render } from 'solid-js/web';
+
+  let container;
+
+  let solidDispose;
+
+  export let component;
+  export let passProps = {};
+
+  onMount(() => {
+    solidDispose = render(() => component(passProps), container);
+  });
+
+  onDestroy(() => {
+    if (solidDispose) solidDispose();
+  });
+</script>
+
+<div bind:this={container}></div>

packages/web/src/widgets/FocusedConnectionInfoWidget.svelte

@@ -7,6 +7,8 @@
   import { openConnection } from '../appobj/ConnectionAppObject.svelte';
   import { useServerStatus } from '../utility/metadataLoaders';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
+  import SolidWrapper from '../utility/SolidWrapper.svelte';
+  import MySolidComponent from '../utility/MySolidComponent';
 
   export let conid;
   export let database;
@@ -82,6 +84,8 @@
       />
     {/if}
   {/if}
+
+  <SolidWrapper component={MySolidComponent} passProps={{ message: 'I AM SVELTE' }} />
 </div>
 
 <style>

packages/web/tsconfig.json

@@ -13,6 +13,8 @@
     "noImplicitAny": false,
     "strictNullChecks": false,
     "strict": false,
+    "jsxImportSource": "solid-js",
+    "jsx": "preserve",
     "target": "es6"
     // "allowJs": true,
     // "checkJs": true,