expose h(), html``, to help non-lune plugins and console testing, rem…

…ove redundant websmack dep

packages/shelter-docs/docs/reference.md

@@ -276,6 +276,51 @@ As above, `solid-js/web`
 
 As above, `solid-js/store`
 
+## `shelter.solidH`
+
+### `shelter.solidH.h`
+
+```ts
+function h(type: string | Component<any>, ...children: (JSXElement | (() => JSXElement))[]): () => JSXElement;
+function h(type: string | Component<any>, props: Record<string, any>, ...children: (JSXElement | (() => JSXElement))[]): () => JSXElement;
+```
+
+The [hyperscript interface](https://github.com/solidjs/solid/tree/main/packages/solid/h) to SolidJS.
+
+Intended to help in-console debugging and writing plugins without Lune.
+
+### `shelter.solidH.html`
+
+This is a [htm](https://github.com/developit/htm) tagged template, that lets you use JSX-like syntax to create solid
+elements at runtime.
+
+To template using reactive values, you should pass them as no-element functions e.g.:
+```js
+const [count, setCount] = createSignal();
+
+setInterval(() => setCount(count() + 1), 500);
+
+// html``
+return html`
+  <div>${() => count() * 2}</div>
+`;
+
+// JSX equivalent:
+return <div>{count() * 2}</div>;
+```
+
+Note that you must also make sure you have the argument specified for event handlers, else they will be interpreted
+by solid's templater as a reactive value:
+```ts
+//                        YES  ⬇️
+return html` <button onClick=${(e) => console.log("clicked")}>Click me!</button> `;
+
+//                         NO  ⬇️
+return html` <button onClick=${() => console.log("clicked")}>Click me!</button> `;
+```
+
+Remember that this returns a function, which you call within a component to retreive the value, for reactivity reasons.
+
 ## `shelter.React`
 
 Discord's instance of [React](https://react.dev/) (`react`).

packages/shelter/package.json

@@ -6,9 +6,9 @@
     "build": "node esbuild.mjs"
   },
   "dependencies": {
-    "@cumjar/websmack": "^1.2.0",
     "@uwu/shelter-ui": "workspace:*",
     "fuse.js": "^7.0.0",
+    "htm": "^3.1.1",
     "idb": "^7.1.0",
     "shelter-assets": "workspace:*",
     "solid-js": "1.6.16",

packages/shelter/src/windowApi.ts

@@ -3,6 +3,8 @@ import * as patcher from "spitroast";
 import * as solid from "solid-js";
 import * as solidStore from "solid-js/store";
 import * as solidWeb from "solid-js/web";
+import solidH from "solid-js/h";
+import htm from "htm/mini";
 import * as ui from "@uwu/shelter-ui";
 import * as reacts from "./react";
 import * as bridges from "./bridges";
@@ -13,6 +15,18 @@ import * as storage from "./storage";
 import { observe } from "./observer";
 import http from "./http";
 
+// why did I decide to try to type h``? -- sink
+declare function _H(
+  type: string | solid.Component<any>,
+  ...children: (solid.JSXElement | (() => solid.JSXElement))[]
+): () => solid.JSXElement;
+declare function _H(
+  type: string | solid.Component<any>,
+  props: Record<string, any>,
+  ...children: (solid.JSXElement | (() => solid.JSXElement))[]
+): () => solid.JSXElement;
+type H = typeof _H;
+
 function without<T extends Record<string, any>, TK extends string>(object: T, ...keys: TK[]) {
   //return Object.fromEntries(Object.entries(object).filter(([k]) => !keys.includes(k as any))) as Omit<T, TK>;
   const cloned = { ...object };
@@ -40,6 +54,10 @@ const windowApi = async (unloads) => {
     solid,
     solidStore,
     solidWeb,
+    solidH: {
+      h: solidH as H,
+      html: htm.bind(solidH as H),
+    },
     util: {
       ...util,
       createScopedApi: util.createScopedApi.bind(undefined, dispatcher),