feat: Added minify again to make the size smaller

.changeset/loud-bushes-try.md

@@ -0,0 +1,5 @@
+---
+"tsdot": patch
+---
+
+feat: added minify so the bundle size is smaller.

.changeset/yummy-turtles-search.md

@@ -0,0 +1,5 @@
+---
+"tsdot": patch
+---
+
+docs: better docs and examples.

README.md

@@ -94,10 +94,10 @@ const result = compiledTemplate({ name: "World" });
 
 > I think each of these need examples.
 
-```sh
+```
 {{  }} - evaluation
 {{=  }} - interpolation
-{{! }} - interpolation with encoding
+{{! }} - interpolation with encoding # Does not work it seems.
 {{# }} - compile-time evaluation/includes and partials
 {{## #}} - compile-time defines
 {{? }} - conditionals

dev/assets/icons/index.ts

@@ -0,0 +1,4 @@
+export { default as IconCopy } from "./lets-icons_copy-light.svg";
+export { default as IconMoon } from "./line-md_moon-rising-twotone-alt-loop.svg";
+export { default as IconSun } from "./line-md_sun-rising-twotone-loop.svg";
+export { default as IconCheck } from "./material-symbols_check.svg";

dev/components/theme-switcher.tsx

@@ -0,0 +1,18 @@
+import { IconMoon, IconSun } from "@/assets/icons";
+import { useThemeContext } from "@/contexts/theme.context";
+import { Show } from "solid-js";
+import { Button } from "./ui/button";
+
+export function ThemeSwitcher() {
+  const { theme, toggleTheme } = useThemeContext();
+
+  return (
+    <div class="flex items-center gap-x-2">
+      <Button variant="ghost" class="h-7 w-7 border border-neutral-300 p-0" onClick={toggleTheme}>
+        <Show when={theme() === "light"} fallback={<IconMoon class="h-4 w-4" />}>
+          <IconSun class="h-4 w-4" />
+        </Show>
+      </Button>
+    </div>
+  );
+}

dev/components/ui/button.tsx

@@ -0,0 +1,53 @@
+import type { JSX, ValidComponent } from "solid-js";
+import { splitProps } from "solid-js";
+
+import * as ButtonPrimitive from "@kobalte/core/button";
+import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/utils/cn";
+
+const buttonVariants = cva(
+  "active:scale-95 transition inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input hover:bg-muted text-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3 text-xs",
+        lg: "h-11 px-8",
+        icon: "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+type ButtonProps<T extends ValidComponent = "button"> = ButtonPrimitive.ButtonRootProps<T> &
+  VariantProps<typeof buttonVariants> & { class?: string | undefined; children?: JSX.Element };
+
+const Button = <T extends ValidComponent = "button">(
+  props: PolymorphicProps<T, ButtonProps<T>>
+) => {
+  const [local, others] = splitProps(props as ButtonProps, ["variant", "size", "class"]);
+  return (
+    <ButtonPrimitive.Root
+      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...others}
+    />
+  );
+};
+
+export { Button, buttonVariants };
+export type { ButtonProps };

dev/components/ui/card.tsx

@@ -0,0 +1,43 @@
+import type { Component, ComponentProps } from "solid-js";
+import { splitProps } from "solid-js";
+
+import { cn } from "@/utils/cn";
+
+const Card: Component<ComponentProps<"div">> = (props) => {
+  const [local, others] = splitProps(props, ["class"]);
+  return (
+    <div
+      class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", local.class)}
+      {...others}
+    />
+  );
+};
+
+const CardHeader: Component<ComponentProps<"div">> = (props) => {
+  const [local, others] = splitProps(props, ["class"]);
+  return <div class={cn("flex flex-col space-y-1.5 p-6", local.class)} {...others} />;
+};
+
+const CardTitle: Component<ComponentProps<"h3">> = (props) => {
+  const [local, others] = splitProps(props, ["class"]);
+  return (
+    <h3 class={cn("text-lg font-semibold leading-none tracking-tight", local.class)} {...others} />
+  );
+};
+
+const CardDescription: Component<ComponentProps<"p">> = (props) => {
+  const [local, others] = splitProps(props, ["class"]);
+  return <p class={cn("text-muted-foreground text-sm", local.class)} {...others} />;
+};
+
+const CardContent: Component<ComponentProps<"div">> = (props) => {
+  const [local, others] = splitProps(props, ["class"]);
+  return <div class={cn("p-6 pt-0", local.class)} {...others} />;
+};
+
+const CardFooter: Component<ComponentProps<"div">> = (props) => {
+  const [local, others] = splitProps(props, ["class"]);
+  return <div class={cn("flex items-center p-6 pt-0", local.class)} {...others} />;
+};
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

dev/components/ui/select.tsx

@@ -0,0 +1,226 @@
+import type { ComponentProps, JSX, ValidComponent } from "solid-js";
+import { Show, splitProps } from "solid-js";
+
+import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+import * as SelectPrimitive from "@kobalte/core/select";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/utils/cn";
+
+const Select = SelectPrimitive.Root;
+const SelectValue = SelectPrimitive.Value;
+const SelectHiddenSelect = SelectPrimitive.HiddenSelect;
+
+type SelectTriggerProps<T extends ValidComponent = "button"> =
+  SelectPrimitive.SelectTriggerProps<T> & {
+    class?: string | undefined;
+    children?: JSX.Element;
+  };
+const SelectTrigger = <T extends ValidComponent = "button">(
+  props: PolymorphicProps<T, SelectTriggerProps<T>>
+) => {
+  const [local, others] = splitProps(props as SelectTriggerProps, ["class", "children"]);
+  return (
+    <SelectPrimitive.Trigger
+      class={cn(
+        "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        local.class
+      )}
+      {...others}
+    >
+      <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{local.children}</span>
+      <SelectPrimitive.Icon
+        as="svg"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="size-4 shrink-0 opacity-50"
+      >
+        <path d="M8 9l4 -4l4 4" />
+        <path d="M16 15l-4 4l-4 -4" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+};
+
+type SelectContentProps<T extends ValidComponent = "div"> =
+  SelectPrimitive.SelectContentProps<T> & { class?: string | undefined };
+
+const SelectContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, SelectContentProps<T>>
+) => {
+  const [local, others] = splitProps(props as SelectContentProps, ["class"]);
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        class={cn(
+          "bg-popover text-popover-foreground animate-in fade-in-80 relative z-50 min-w-32 overflow-hidden rounded-md border shadow-md",
+          local.class
+        )}
+        {...others}
+      >
+        <SelectPrimitive.Listbox class="m-0 p-1" />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+};
+
+type SelectItemProps<T extends ValidComponent = "li"> = SelectPrimitive.SelectItemProps<T> & {
+  class?: string | undefined;
+  children?: JSX.Element;
+};
+
+const SelectItem = <T extends ValidComponent = "li">(
+  props: PolymorphicProps<T, SelectItemProps<T>>
+) => {
+  const [local, others] = splitProps(props as SelectItemProps, ["class", "children"]);
+  return (
+    <SelectPrimitive.Item
+      class={cn(
+        "focus:bg-accent focus:text-accent-foreground relative mt-0 flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.class
+      )}
+      {...others}
+    >
+      <SelectPrimitive.ItemIndicator class="absolute right-2 flex size-3.5 items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="size-4"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M5 12l5 5l10 -10" />
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemLabel>{local.children}</SelectPrimitive.ItemLabel>
+    </SelectPrimitive.Item>
+  );
+};
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      variant: {
+        label: "data-[invalid]:text-destructive",
+        description: "font-normal text-muted-foreground",
+        error: "text-xs text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "label",
+    },
+  }
+);
+
+type SelectLabelProps<T extends ValidComponent = "label"> = SelectPrimitive.SelectLabelProps<T> & {
+  class?: string | undefined;
+};
+
+const SelectLabel = <T extends ValidComponent = "label">(
+  props: PolymorphicProps<T, SelectLabelProps<T>>
+) => {
+  const [local, others] = splitProps(props as SelectLabelProps, ["class"]);
+  return <SelectPrimitive.Label class={cn(labelVariants(), local.class)} {...others} />;
+};
+
+type SelectDescriptionProps<T extends ValidComponent = "div"> =
+  SelectPrimitive.SelectDescriptionProps<T> & {
+    class?: string | undefined;
+  };
+
+const SelectDescription = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, SelectDescriptionProps<T>>
+) => {
+  const [local, others] = splitProps(props as SelectDescriptionProps, ["class"]);
+  return (
+    <SelectPrimitive.Description
+      class={cn(labelVariants({ variant: "description" }), local.class)}
+      {...others}
+    />
+  );
+};
+
+type SelectErrorMessageProps<T extends ValidComponent = "div"> =
+  SelectPrimitive.SelectErrorMessageProps<T> & {
+    class?: string | undefined;
+  };
+
+const SelectErrorMessage = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, SelectErrorMessageProps<T>>
+) => {
+  const [local, others] = splitProps(props as SelectErrorMessageProps, ["class"]);
+  return (
+    <SelectPrimitive.ErrorMessage
+      class={cn(labelVariants({ variant: "error" }), local.class)}
+      {...others}
+    />
+  );
+};
+
+export {
+  Select,
+  SelectContent,
+  SelectDescription,
+  SelectErrorMessage,
+  SelectHiddenSelect,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+};
+
+// ---
+
+export function SelectComp<T>(
+  rawProps: ComponentProps<typeof Select<T>> & {
+    renderItem?: (item: T) => JSX.Element;
+    description?: JSX.Element;
+  }
+) {
+  const [local, rest] = splitProps(rawProps, ["children", "renderItem"]);
+
+  return (
+    <Select
+      {...rest}
+      // value={value()}
+      // onChange={setValue}
+      // options={["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"]}
+      // placeholder="Select a fruit…"
+      autoComplete="on"
+      itemComponent={(props) => (
+        <SelectItem item={props.item}>
+          <Show
+            when={rawProps.renderItem}
+            // fallback={<>{(props.item.rawValue as any)?.value?.label as any}</>}
+            fallback={
+              <>
+                {((props.item.rawValue as any)?.label as any) ??
+                  (props.item.rawValue as any)?.value}
+              </>
+            }
+            children={<>{rawProps.renderItem?.(props.item.rawValue)}</>}
+          />
+        </SelectItem>
+      )}
+    >
+      <SelectHiddenSelect />
+      <SelectTrigger class="text-foreground truncate text-start">
+        <SelectValue<T>>{(state) => (state?.selectedOption() as any)?.label}</SelectValue>
+      </SelectTrigger>
+      <SelectContent />
+      <SelectDescription class="mt-1 text-xs text-gray-400">
+        {rawProps.description}
+      </SelectDescription>
+    </Select>
+  );
+}