vite-plugin-vanjs 0.0.3 → 0.0.5

package/README.md

@@ -1,17 +1,31 @@
 ## vite-plugin-vanjs
 
+[![Coverage Status](https://coveralls.io/repos/github/thednp/vite-plugin-vanjs/badge.svg)](https://coveralls.io/github/thednp/vite-plugin-vanjs)
+[![ci](https://github.com/thednp/vite-plugin-vanjs/actions/workflows/ci.yml/badge.svg)](https://github.com/thednp/vite-plugin-vanjs/actions/workflows/ci.yml)
 [![NPM Version](https://img.shields.io/npm/v/vite-plugin-vanjs.svg)](https://www.npmjs.com/package/vite-plugin-vanjs)
 [![NPM Downloads](https://img.shields.io/npm/dm/vite-plugin-vanjs.svg)](http://npm-stat.com/charts.html?package=vite-plugin-vanjs)
 [![typescript version](https://img.shields.io/badge/typescript-5.6.2-brightgreen)](https://www.typescriptlang.org/)
-[![vanjs-core version](https://img.shields.io/badge/vanjs--core-1.5.2-brightgreen)](https://github.com/vanjs-org/van)
-[![mini-van-plate version](https://img.shields.io/badge/mini--van--plate-0.6.1-brightgreen)](https://github.com/vanjs-org/mini-van-plate)
-[![vite version](https://img.shields.io/badge/vite-6.0.6-brightgreen)](https://github.com/vitejs)
+[![vanjs-core version](https://img.shields.io/badge/vanjs--core-1.5.3-brightgreen)](https://github.com/vanjs-org/van)
+[![mini-van-plate version](https://img.shields.io/badge/mini--van--plate-0.6.3-brightgreen)](https://github.com/vanjs-org/mini-van-plate)
+[![vitest version](https://img.shields.io/badge/vitest-3.0.4-brightgreen)](https://www.vitest.dev/)
+[![vite version](https://img.shields.io/badge/vite-6.0.11-brightgreen)](https://vite.dev)
 
-A Vite plugin for VanJS to enable JSX transformation and simplify application development and enables you to create SSR applications or SSG (static) pages. It will automatically load the appropriate Van or VanX objects depending on the client/server environment with zero configuration needed. It uses the `mini-van-plate/shared` module to register the required objects in an isomorphic enviroment.
+A mini meta-framework for [VanJS](https://vanjs.org/) developed around the awesome [Vite](https://vite.dev). The plugin comes with a set of modules to simplify your workflow:
+* ***@vanjs/router*** - one of the most important part of an application, this one allows you to split code and lazy load components with ease, handles both Client Side Rendering (SSR) and Server Side Rendering (CSR) and makes it really easy to work with;
+* ***@vanjs/meta*** - allows you to create metadata for your pages as well as load additional assets with ease;
+* ***@vanjs/jsx*** - enables JSX transformation;
+* ***@vanjs/setup*** - enables loading VanJS modules isomorphically;
+* ***@vanjs/server*** - provides various tools for Server Side Rendering;
+* ***@vanjs/client*** - provides various tools for Client Side Rendering.
 
-The plugin uses `van-ext` along with `mini-van-plate` so you can have everything ready from start. It also enables JSX transformation with minimal setup so you can write your code faster.
+The plugin will automatically load the appropriate Van or VanX objects depending on the client/server environment with zero configuration needed. It uses the `mini-van-plate/shared` module to register the required objects in an isomorphic enviroment.
 
-The recommended starter templates for you are the [vite-starter-vanjs-ssr](https://github.com/thednp/vite-starter-vanjs-ssr) and [vite-starter-vanjs-ssr-jsx](https://github.com/thednp/vite-starter-vanjs-ssr-jsx) which already include this plugin.
+### Notes 
+* The plugin uses `van-ext` along with `mini-van-plate` so you can have everything ready from start. 
+
+* The recommended starter templates for you are the [vite-starter-vanjs-ssr](https://github.com/thednp/vite-starter-vanjs-ssr) and [vite-starter-vanjs-ssr-jsx](https://github.com/thednp/vite-starter-vanjs-ssr-jsx) which already include this plugin.
+
+* In the near future we're going to have a `npm create-vanjs` CLI so stick around!
 
 
 ### Install
@@ -19,7 +33,7 @@ The recommended starter templates for you are the [vite-starter-vanjs-ssr](https
 1) Install the plugin:
 
 ```bash
-pnpm add vite-plugin-vanjs
+pnpm install vite-plugin-vanjs
 ```
 
 ```bash
@@ -27,10 +41,18 @@ npm install vite-plugin-vanjs
 ```
 
 ```bash
-deno add npm:vite-plugin-vanjs
+deno install npm:vite-plugin-vanjs
+```
+
+```bash
+bun add vite-plugin-vanjs
 ```
 
-2) To add typescript support, edit your `src/vite-env.d.ts` as follows:
+```bash
+yarn add vite-plugin-vanjs
+```
+
+2) To add typescript support, edit your `src/vite-env.d.ts` (or any global types you have set in your app) as follows:
 
 ```ts
 /// <reference types="vite/client" />
@@ -54,7 +76,7 @@ export default defineConfig({
 
 **Example**:
 
-While the plugin will resolve the appropriate modules depending on the environment, for your convenience, you can also import the `@vanjs/van` and `@vanjs/vanX` virtual modules, so the plugin makes sure to load the right modules where needed.
+While the plugin will resolve the appropriate modules automatically depending on the environment, for your convenience, you can also import the `@vanjs/van` and `@vanjs/vanX` virtual modules, so the plugin makes sure to load the right modules where needed.
 
 ```ts
 // my-component.ts
@@ -65,7 +87,7 @@ const MyComponent = () => {
   return van.div("Hello from VanJS!");
 };
 ```
-The plugin also exports `vanX`.
+Using `vanX` in your code:
 
 ```ts
 // my-list.ts
@@ -92,6 +114,112 @@ const MyList = () => {
 ```
 
 
+### Router
+The **vite-plugin-vanjs** provides a router with load and preload capability, code splitting and lazy loading, all via the exported `@vanjs/router` module. This functionality is still in early stages, but it manages to work with both Server Side Rendering (SSR) when using an appropriate starter template, as well as Client Side Rendering (CSR/SPA - your classic VanJS app), as we'll see in the example below.
+
+Here's a basic example, let's start with the `app.ts`:
+
+```ts
+// src/app.ts
+import van from "vanjs-core";
+import { Router, Route, A } from "@vanjs/router";
+
+// define routes
+Route({ path: '/', component: () => van.tags.div('Hello VanJS') });
+Route({ path: '/about', component: lazy(() => import('./pages/about'))});
+Route({ path: '*', component: () => van.tags.div('404 - Page Not Found') });
+
+function App() {
+  // the Router is only an outlet
+  export default Route();
+}
+
+// render or hydrate the app
+van.add(document.body, App());
+```
+
+Here's how a page should look like, pay attention to the comments:
+```ts
+// src/pages/about.ts
+import van from "vanjs-core";
+import { A } from "@vanjs/router";
+
+// define routes
+export const route = {
+  preload: async () => {
+    // in most cases you may want to enforce user access control
+    console.log('About preload triggered');
+  },
+  load: async () => {
+    // Load data if needed
+    // you might want to cache this data
+    console.log('About load triggered');
+  }
+}
+
+// you must export your page component as either
+// a named export "Page" or a default export
+export function Page() {
+  const { div, h1, p, br } = van.tags;
+  return div(
+    h1('About'),
+    p('This is the about page'),
+    A({ href: "/" }, "Back to Home")
+  )
+}
+```
+**Notes**
+- when hovering the `A` component, if it links to a lazy component it will trigger that page component preload, but not preload any data;
+- if you use the regular `a` from `van.tags` instead of the `A` component, your application will work as a classic Multi-Page App (MPA).
+
+
+### Metadata
+The **vite-plugin-vanjs** also provides metadata management via the exported `@vanjs/meta` module. This module works with both SSR and CSR, and makes it easy to work with.
+
+Depending on the type of application, it's generally very easy to setup the system to work properly, we only need to make sure that we execute functions in a specific order:
+
+* first we call the `initializeHeadTags` which allows the module to store the current tags that come from either a vite starter template `index.html` or the server (SSR); if we don't call this function, the existing tags will be removed and some of them are important (especially `charset` and `viewport`);
+* then we define a set of default tags to be used by both client and server (if using an SSR template) on all pages that don't come with any metadata tags;
+* lastly, on other pages, we define tags that override both the existing and the default tags
+
+Ok let's start again with the `app.ts`:
+```ts
+import van from 'vanjs-core'
+import { Style, Title, Meta, initializeHeadTags } from '@vanjs/meta'
+
+function App() {
+  const { div, h1, p } van.tags;
+
+  // when app is first time executed
+  // we need to register tags coming
+  // from the index.html template
+  initializeHeadTags();
+
+  // a good practice is to define some default tags
+  // they are used on pages where no tags are set
+  Title("VanJS + Vite App");
+  Meta({ name: "description", content: "Sample app description" });
+  Meta({ property: "og:description", content: "Some open graph description for your app" });
+  Link({ href: 'path-to/your-style.css', rel: "stylesheet" });
+  Script({ src: 'path-to/your-script.js' });
+  Style({ id: "app-style" },
+    `p { margin-bottom: 1rem }`
+  );
+
+  return div(
+    h1('Hello VanJS!'),
+    p('Sample paragraph.')
+  );
+}
+
+// render or hydrate the app
+van.add(document.body, App());
+```
+**Note**
+- the `Style` component doesn't have any unique attribute so we must use a unique ID to prevent duplicates;
+- all provided metadata components don't return any markup, their function is to register new tags or update existing tags.
+
+
 ### JSX Transformation
 
 To enable JSX transformation, you have to edit your `tsconfig.json` as follows:
@@ -119,24 +247,24 @@ const App = () => {
   );
 }
 
-van.add(document.getElementById("app")!, <App /> as ChildDom);
+const root = document.getElementById("app") as HTMLElement;
 
+van.add(root, <App />);
 ```
 
 **Notes**:
-* in some cases like this one, enforcing a certain typescript type via `as` might be in good order depending on who renders your component;
+* in cases like this one, enforcing a certain typescript type via `as` might be in good order depending on who renders your component;
 * you can use `ref` as a `van.state`, `class` instead of `className`, `for` instead of `htmlFor`;
 * you can use style as both an object and a string;
 * for a JSX starter template, check out the [vite-starter-vanjs-ssr-jsx](https://github.com/thednp/vite-starter-vanjs-ssr-jsx).
 * for a pure vanilla starter template, check out the [vite-starter-vanjs-ssr](https://github.com/thednp/vite-starter-vanjs-ssr).
 
 
-
 ### Credits
 * [van-jsx](https://github.com/herudi/van-jsx) a simple Vanilla JSX implementation;
 * [vanjs-jsx](https://github.com/vanjs-org/van/tree/main/addons/van_jsx) the official VanJS addon;
 * [surplus](https://github.com/adamhaile/surplus/blob/master/index.d.ts) for Typescript definitions also used by SolidJS;
-* [inferno](https://github.com/infernojs/inferno/blob/master/packages/inferno/src/core/types.ts) also typescript definitions.
+* [inferno](https://github.com/infernojs/inferno/blob/master/packages/inferno/src/core/types.ts) also for typescript definitions.
 
 
 ### License

package/client/global.d.ts

@@ -0,0 +1,41 @@
+declare module "@vanjs/client" {
+  import * as CSS from "csstype";
+  import type {
+    Element as VanElement,
+    TagFunc,
+  } from "mini-van-plate/van-plate";
+
+  /**
+   * Sets the attribute value of the given name of the given element.
+   *
+   * @param element the target element
+   * @param key the attribute name
+   * @param value the attribute value
+   */
+  export const setAttribute: (
+    element: Element,
+    name: string,
+    value: boolean | string | number | null | undefined,
+  ) => void;
+
+  /**
+   * Normalize the style value and convert it to a string
+   *
+   * @param source the style value
+   * @returns the normalized style string
+   */
+  export const styleToString: (source: string | CSS.Properties) => string;
+
+  type ChildElement = TagFunc | VanElement | HTMLElement | SVGElement;
+
+  /**
+   * Hydrate the target element with the given content(s).
+   *
+   * @param target the target element
+   * @param content the element(s) to hydrate
+   */
+  export const hydrate: (
+    target: HTMLElement,
+    content: ChildElement | ChildElement[],
+  ) => HTMLElement;
+}

package/client/index.mjs

@@ -0,0 +1,48 @@
+import { unwrap } from "@vanjs/router";
+
+/**
+ * @param {Element} element
+ * @param {string} key
+ * @param {boolean | string | number | null | undefined} value
+ */
+export const setAttribute = (element, key, value) => {
+  if (value == null || value === false || value === "" || value === undefined) {
+    element.removeAttribute(key);
+  } else {
+    const attr = value === true ? "" : String(value);
+    element.setAttribute(key, attr);
+  }
+};
+
+/**
+ * @param {import("csstype").Properties | string} style
+ * @returns {string}
+ */
+export const styleToString = (style) => {
+  return typeof style === "string"
+    ? style
+    : typeof style === "object"
+    ? Object.entries(style).reduce((acc, [key, value]) =>
+      acc +
+      key
+        .split(/(?=[A-Z])/)
+        .join("-")
+        .toLowerCase() +
+      ":" +
+      // allow state values in style object
+      (typeof value === "object" && "val" in value ? value.val : value) +
+      ";", "")
+    : /* istanbul ignore next */ "";
+};
+
+/**
+ * @param {Element} target the root element
+ * @param {Element | Element[]} content the element(s) to hydrate
+ */
+export const hydrate = (target, content) => {
+  const wrapper = unwrap(content);
+  target.replaceChildren(
+    ...(Array.from(wrapper.children)),
+  );
+  return target;
+};

package/client/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "client",
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "types": "./types.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./types.d.ts",
+      "import": "./index.mjs"
+    }
+  },
+  "peerDependencies": {
+    "vite-plugin-vanjs": "*",
+    "csstype": "*"
+  },
+  "sideEffects": false
+}

package/client/types.d.ts

@@ -0,0 +1,34 @@
+/// <reference path="global.d.ts" />
+import * as CSS from "csstype";
+
+/**
+ * Sets the attribute value of the given name of the given element.
+ *
+ * @param element the target element
+ * @param key the attribute name
+ * @param value the attribute value
+ */
+export const setAttribute: (
+  element: Element,
+  name: string,
+  value: boolean | string | number | null | undefined,
+) => void;
+
+/**
+ * Normalize the style value and convert it to a string
+ *
+ * @param source the style value
+ * @returns the normalized style string
+ */
+export const styleToString: (source: string | CSS.Properties) => string;
+
+/**
+ * Hydrate a target element with the given content(s).
+ *
+ * @param target the root element
+ * @param content the element(s) to hydrate
+ */
+export const hydrate: (
+  target: HTMLElement,
+  content: HTMLElement | HTMLElement[],
+) => HTMLElement;

package/jsx/global.d.ts

@@ -1,8 +1,9 @@
 declare module "@vanjs/jsx" {
   import type { ChildDom, Primitive } from "vanjs-core";
+  import type { Element as VanElement } from "mini-van-plate/van-plate";
   export const Fragment = ({ children }: { children?: JSX.Element }) =>
     JSX.Element;
-  export type VanElement = Element;
+  // export type VanElement = Element;
   export type VanNode =
     | Primitive
     | ChildDom
@@ -12,12 +13,12 @@ declare module "@vanjs/jsx" {
     | null;
 
   export function jsx(
-    tag: string | ((props: any) => VanNode),
+    tag: string | ((props: unknown) => VanNode),
     props: {
       children?: VanNode;
       style?: string | CSSProperties | (() => CSSProperties);
       ref?: State<Element>;
-      [key: string]: any;
+      [key: string]: unknown;
     },
   ): VanNode;
 

package/jsx/jsx.d.ts

@@ -1,5 +1,7 @@
+// deno-lint-ignore-file no-empty-interface ban-types
+
 import * as csstype from "csstype";
-import type { ChildDom, Primitive, State } from "vanjs-core";
+import type { ChildDom, State } from "vanjs-core";
 
 /**
  * Based on JSX types for Surplus and Inferno and adapted for `dom-expressions`.
@@ -16,7 +18,7 @@ export = JSX;
 
 declare namespace JSX {
   // type FunctionMaybe<T = unknown> = { (): T } | T;
-  type FunctionMaybe<T = unknown> = State<T> | T;
+  type FunctionMaybe<T = unknown> = (() => T) | State<T> | T;
   type Element =
     | ChildDom
     | Node
@@ -52,13 +54,13 @@ declare namespace JSX {
 
   interface BoundEventHandler<T, E extends Event> {
     0: (
-      data: any,
+      data: unknown,
       e: E & {
         currentTarget: T;
         target: DOMElement;
       },
     ) => void;
-    1: any;
+    1: unknown;
   }
   type EventHandlerUnion<T, E extends Event> =
     | EventHandler<T, E>
@@ -85,10 +87,12 @@ declare namespace JSX {
   }
 
   interface IntrinsicAttributes {
-    ref?: unknown | ((e: unknown) => void);
+    // ref?: unknown | ((e: unknown) => void);
+    ref?: State<T>;
   }
   interface CustomAttributes<T> {
-    ref?: State<T> | T | ((el: T) => void);
+    // ref?: State<T> | T | ((el: T) => void);
+    ref?: State<T>;
   }
   interface ExplicitProperties {}
   interface ExplicitAttributes {}
@@ -295,7 +299,11 @@ declare namespace JSX {
 
   interface CSSProperties extends csstype.PropertiesHyphen {
     // Override
-    [key: `-${string}`]: string | number | undefined;
+    [key: `-${string}`]:
+      | State<string | number | undefined>
+      | string
+      | number
+      | undefined;
   }
 
   type HTMLAutocapitalize =
@@ -719,7 +727,7 @@ declare namespace JSX {
     translate?: FunctionMaybe<"yes" | "no">;
     about?: FunctionMaybe<string>;
     datatype?: FunctionMaybe<string>;
-    inlist?: FunctionMaybe<any>;
+    inlist?: FunctionMaybe<unknown>;
     popover?: FunctionMaybe<boolean | "manual" | "auto">;
     prefix?: FunctionMaybe<string>;
     property?: FunctionMaybe<string>;
@@ -768,7 +776,7 @@ declare namespace JSX {
     >;
   }
   interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
-    download?: FunctionMaybe<any>;
+    download?: FunctionMaybe<unknown>;
     href?: FunctionMaybe<string>;
     hreflang?: FunctionMaybe<string>;
     media?: FunctionMaybe<string>;
@@ -783,7 +791,7 @@ declare namespace JSX {
   interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {
     alt?: FunctionMaybe<string>;
     coords?: FunctionMaybe<string>;
-    download?: FunctionMaybe<any>;
+    download?: FunctionMaybe<unknown>;
     href?: FunctionMaybe<string>;
     hreflang?: FunctionMaybe<string>;
     ping?: FunctionMaybe<string>;

package/jsx/jsx.mjs

@@ -1,6 +1,6 @@
 import van from "@vanjs/van";
 import setup from "@vanjs/setup";
-import { setAttribute, styleToString } from "./utils.mjs";
+import { setAttribute, styleToString } from "@vanjs/client";
 
 export const jsx = (jsxTag, { children, ref, style, ...props }) => {
   if (typeof jsxTag === "string") {
@@ -28,6 +28,7 @@ export const jsx = (jsxTag, { children, ref, style, ...props }) => {
 
       setAttribute(newElement, k, value);
     }
+    /* istanbul ignore else */
     if (style) {
       if (typeof style === "function") {
         van.derive(() => newElement.style.cssText = styleToString(style()));
@@ -42,5 +43,5 @@ export const jsx = (jsxTag, { children, ref, style, ...props }) => {
 
   return typeof jsxTag === "function"
     ? jsxTag({ children, ref, style, ...props })
-    : null;
+    : /* istanbul ignore next */ null;
 };

package/jsx/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types.d.ts",
       "import": "./index.mjs"
     },
     "./jsx-runtime": {

package/jsx/types.d.ts

@@ -0,0 +1,16 @@
+/// <reference path="global.d.ts" />
+import type { Fragment } from "./fragment";
+
+declare function jsx(
+  type: unknown,
+  props: unknown,
+): () =>
+  | (Node & {
+    [key: string]: unknown;
+  })
+  | (Node & {
+    [key: string]: unknown;
+  })[];
+
+export type { JSX } from "./jsx";
+export { Fragment, jsx, jsx as jsxDEV, jsx as jsxs };

package/meta/Head.mjs

@@ -0,0 +1,81 @@
+import setup from "@vanjs/setup";
+import { getTagKey } from "./helpers.mjs";
+
+/** @typedef {typeof import("./types.d.ts").getHeadTags} GetTags */
+/** @typedef {typeof import("./types.d.ts").createHeadTags} CreateTags */
+/** @typedef {typeof import("./types.d.ts").resetHeadTags} ResetTags */
+/** @typedef {typeof import("./types.d.ts").initializeHeadTags} InitializeTags */
+/** @typedef {import("./types.d.ts").AddMeta} AddMeta */
+/** @typedef {typeof import("./types.d.ts").Head} HeadComp */
+
+/**
+ * Create a new Map for each request on server
+ * @type {CreateTags}
+ */
+const createHeadTags = () => new Map();
+
+/**
+ * Get the current head tags. Use a factory pattern to get the right store
+ * on the server and the client.
+ * @type {GetTags}
+ */
+const getHeadTags = (() => {
+  if (setup.isServer) {
+    // On server, create one Map per request scope
+    let serverHeadTags;
+    return () => {
+      if (!serverHeadTags) {
+        serverHeadTags = createHeadTags();
+      }
+      return serverHeadTags;
+    };
+  }
+  // On client, use a singleton
+  const clientHeadTags = createHeadTags();
+  return () => clientHeadTags;
+})();
+
+/**
+ * Clear all head tags
+ * @type {ResetTags}
+ */
+export const resetHeadTags = () => {
+  const tags = getHeadTags();
+  tags.clear();
+};
+
+/**
+ * Initialize the head tags
+ * @type {InitializeTags}
+ */
+export const initializeHeadTags = () => {
+  const tags = getHeadTags();
+  /* istanbul ignore else */
+  if (!tags.size && !setup.isServer) {
+    [...document.head.children].forEach((tag) => {
+      tags.set(getTagKey(tag), tag);
+    });
+  }
+};
+
+/**
+ * Add a new meta tag
+ * @type {AddMeta}
+ */
+export const addMeta = (tag) => {
+  if (!tag) return;
+  const tags = getHeadTags();
+  const key = getTagKey(tag);
+  tags.set(key, tag);
+};
+
+/**
+ * Get the head tags
+ * @type {HeadComp}
+ */
+export const Head = () => {
+  return () => {
+    const tags = getHeadTags();
+    return Array.from(tags.values());
+  };
+};

package/meta/global.d.ts

@@ -0,0 +1,60 @@
+declare module "@vanjs/meta" {
+  import { type PropsWithKnownKeys } from "vanjs-core";
+  import type {
+    Element as VanElement,
+    TagFunc,
+  } from "mini-van-plate/van-plate";
+
+  export const createHeadTags: () => Map<
+    string,
+    SupportedTags | TagFunc
+  >;
+  export const getHeadTags: () => Map<
+    string,
+    SupportedTags | TagFunc
+  >;
+  export type ResetTags = () => void;
+  export type InitializeTags = () => void;
+
+  export type SupportedTags =
+    | HTMLTitleElement
+    | HTMLMetaElement
+    | HTMLScriptElement
+    | HTMLLinkElement
+    | HTMLStyleElement;
+
+  export type TagProps = PropsWithKnownKeys<SupportedTags>;
+
+  export type HeadTags = SupportedTags[] | TagFunc[];
+
+  export type AddMeta = (tag?: TagProps) => void;
+
+  // export declare const Head: () => () => TagFunc[];
+  export declare const Head: () => () => SupportedTags[];
+  export const Title: (
+    props: PropsWithKnownKeys<HTMLTitleElement>,
+    content?: string,
+  ) => null;
+  export const Meta: (props: PropsWithKnownKeys<HTMLMetaElement>) => null;
+  export const Style: (
+    props: PropsWithKnownKeys<HTMLStyleElement>,
+    content?: string,
+  ) => null;
+  export const Link: (props: PropsWithKnownKeys<HTMLLinkElement>) => null;
+  export const Script: (
+    props: PropsWithKnownKeys<HTMLScriptElement>,
+    content?: string,
+  ) => null;
+
+  export type ParseAttributes = (
+    attributeString: string,
+  ) => Record<string, string>;
+
+  export type GetTagAttribute = (tag: TagProps) => string;
+
+  export type GetTagKey = (tag: TagProps) => string;
+
+  export const initializeHeadTags: InitializeTags;
+  export const resetHeadTags: ResetTags;
+  export const addMeta: AddMeta;
+}