@solid-macros/volar

Volar/TS Macro plugin for improving Solid developer experience.

Setup

// ts-macro.config.ts
import solidMacros from "@solid-macros/volar";

export default {
	plugins: [
		solidMacros({
			// plugin configuration goes here
		}),
	],
};

Features

narrowed-show

Make <Show> narrow the types with the condition.

Pass narrowedShow: true to the plugin config to enable.

const nullableArray: number[] | null = Math.random() > 0.5 ? [0] : null;

<Show
	when={nullableArray}
	fallback={nullableArray}
	// before: number[] | null
	// after: null
>
	{
		nullableArray.length
		// before: type error due to nullableArray being number[] | null
		// after: nullableArray narrowed to number[], no error
	}
</Show>;

narrowed-switch

Make <Switch> narrow the types with the condition.

Pass narrowedSwitch: true to the plugin config to enable.

const route = "home" as "home" | "about" | "settings" | undefined;

<Switch
	fallback={route}
	// before: "home" | "about" | "settings" | undefined
	// after: undefined
>
	<Match when={route === "home"}>
		{
			route
			// before: "home" | "about" | "settings" | undefined
			// after: "home"
		}
	</Match>
	<Match when={route === "about"}>
		{
			route
			// before: "home" | "about" | "settings" | undefined
			// after: "about"
		}
	</Match>
	<Match when={route === "settings"}>
		{
			route
			// before: "home" | "about" | "settings" | undefined
			// after: "settings"
		}
	</Match>
</Switch>;

typed-dom-jsx

Typecast JSX tags with DOM elements into corresponding HTML elements.

Pass typedDomJsx: true to the plugin config to enable.

const el = <div />;
// before: JSX.Element
// after: HTMLDivElement
console.log(el.clientTop);
// before: type error
// after: correctly typechecked

unwrapped-accessors

Automatically unwrap accessors as variables for hinting idempotency.

Pass unwrappedAccessor: true to the plugin config to enable.

// the macro works based on the naming convention
// you can configure custom patterns using the `accessorPattern` option
const [wrapperRef$, setWrapperRef] = createSignal<HTMLElement | undefined>();
createEffect(() => {
	if (!wrapperRef$()) return;
	console.log(wrapperRef$().clientTop);
	// before: type error due wrapperRef() being HTMLElement | null
	// after: wrapperRef() narrowed to HTMLElement, no error
});