@typed-grid-areas/solid 0.0.0 → 0.1.1

package/dist/gridComponent.d.ts

@@ -0,0 +1,80 @@
+import { ComponentProps, JSX, ValidComponent } from "solid-js";
+import type { GridConfig } from "typed-grid-areas";
+/**
+ * Props of a slot component (`<Card.icon>`) and of a grid's root component
+ * (`<Card>`): anything the element `as` renders takes (a `div`'s by
+ * default), plus `as`.
+ */
+export type SlotComponentProps<T extends ValidComponent = "div"> = Omit<ComponentProps<T>, "as"> & {
+    /**
+     * The element to render as the slot (or grid) instead of a `div`: a tag
+     * name (`"label"`), a component, or a render function
+     * (`props => <label {...props} />`). A component or render function gets
+     * the slot's props, including its `data-area`, and must spread them onto
+     * its root element.
+     */
+    as?: T | SlotRenderFunction;
+};
+/**
+ * A render function passed to `as`: it gets the slot's props, including its
+ * `data-area`, to spread onto the element it renders. Annotate its `props`
+ * (`(props: JSX.LabelHTMLAttributes<HTMLLabelElement>) => …`) for the slot
+ * to take that element's attributes rather than a `div`'s.
+ */
+export type SlotRenderFunction = (props: JSX.HTMLAttributes<any>) => JSX.Element;
+/** The props of a grid's root component (`<Card>`). */
+export type GridComponentProps<T extends ValidComponent = "div"> = SlotComponentProps<T>;
+/** A slot component (`<Card.icon>`): renders the element that fills one area. */
+export type SlotComponent = <T extends ValidComponent = "div">(props: SlotComponentProps<T>) => JSX.Element;
+/**
+ * The component a definition renders as: the grid itself, with a slot
+ * component per area as a member, named exactly like the area. An area
+ * nested through `nest` is the root component of the nested grid instead,
+ * with that grid's slots as its members (`<Card.content.icon>`).
+ */
+export type GridComponent<TAreaName extends string, TNest = {}> = (<T extends ValidComponent = "div">(props: GridComponentProps<T>) => JSX.Element) & {
+    readonly [K in TAreaName]: K extends keyof TNest ? TNest[K] : SlotComponent;
+};
+/** Any grid component, whatever its areas. */
+type AnyGridComponent = GridComponent<any, any>;
+/** Options of `createGridComponent`. */
+export type GridComponentOptions<TAreaName extends string> = {
+    /**
+     * Grids nested into areas of this one: `nest: { content: ContentGrid }`
+     * makes `<Card.content>` both the `content` slot and the root of
+     * `ContentGrid`.
+     */
+    nest?: {
+        readonly [K in TAreaName]?: AnyGridComponent;
+    };
+};
+/**
+ * Turns a definition into the component it renders as.
+ *
+ * `<Card>` renders the grid (inside its own size container when the
+ * definition has breakpoints) and puts the definition's CSS on the page;
+ * `<Card.icon>` renders the slot that fills the `icon` area. Slots accept
+ * `class`, `style`, `children`, regular element props, and `as` to render
+ * your own element as the slot.
+ *
+ * Create grid components at module level, once per definition.
+ *
+ * @example
+ * ```tsx
+ * const Card = createGridComponent(
+ *   defineLayout({ areas: ["input?", "content"], layouts: [{ template: "input content" }] }),
+ *   { nest: { content: ContentGrid } },
+ * );
+ *
+ * <Card>
+ *   <Card.input as="label" for="notify">…</Card.input>
+ *   <Card.content>
+ *     <Card.content.icon>…</Card.content.icon>
+ *   </Card.content>
+ * </Card>
+ * ```
+ */
+export declare function createGridComponent<TAreaName extends string, const TNest extends GridComponentOptions<TAreaName>["nest"] = {}>(definition: GridConfig<TAreaName>, options?: {
+    nest?: TNest;
+}): GridComponent<TAreaName, TNest>;
+export {};

package/dist/gridComponent.jsx

@@ -0,0 +1,143 @@
+import { children, createEffect, mergeProps, sharedConfig, splitProps, } from "solid-js";
+import { Dynamic, isServer, ssr, useAssets } from "solid-js/web";
+import { createSlotCheck, gridMarkup, gridStyleTags, insertGridStyle, } from "typed-grid-areas/adapter";
+/**
+ * What a server render has registered with `useAssets`, by render. The
+ * render's list of assets is internal to Solid; it's only used here as a
+ * key that's new for each render.
+ */
+const registeredStyles = new WeakMap();
+/**
+ * Puts a definition's CSS on the page: on the server, its style tag among
+ * the render's assets (once per render), which Solid injects before
+ * `</head>`; in the browser, its style tag in `<head>`, reusing one the
+ * server rendered.
+ */
+function emitCss(definition) {
+    if (!isServer) {
+        insertGridStyle(document, definition);
+        return;
+    }
+    const assets = sharedConfig.context?.assets;
+    if (assets === undefined) {
+        return;
+    }
+    const registered = registeredStyles.get(assets) ?? new Set();
+    registeredStyles.set(assets, registered);
+    const { id } = gridMarkup(definition);
+    if (registered.has(id)) {
+        return;
+    }
+    registered.add(id);
+    // `ssr` marks the tag's HTML as already rendered, so it isn't escaped.
+    useAssets(() => ssr(gridStyleTags([definition])));
+}
+function createRoot(definition) {
+    const markup = gridMarkup(definition);
+    return function Root(props) {
+        emitCss(definition);
+        const [local, others] = splitProps(props, ["as", "ref", "children", "data-area"]);
+        const { sizeContainer, grid: gridElement } = markup.elements(local["data-area"]);
+        const resolved = children(() => local.children);
+        let grid;
+        const ref = (element) => {
+            grid = element;
+            local.ref?.(element);
+        };
+        // In development, check the slots after mount and whenever they change. Written out,
+        // not `isDevelopment()`, so production builds drop the check.
+        try {
+            if (process.env.NODE_ENV === "development") {
+                if (!isServer) {
+                    const checkSlots = createSlotCheck(definition, {
+                        strayChildRemedy: "make it a slot with `as`",
+                    });
+                    createEffect(() => {
+                        resolved();
+                        if (grid !== undefined) {
+                            for (const warning of checkSlots(grid)) {
+                                // eslint-disable-next-line no-console
+                                console.warn(warning);
+                            }
+                        }
+                    });
+                }
+            }
+        }
+        catch (error) {
+            // Without a bundler, `process` may not exist: then this isn't development.
+            if (!(error instanceof ReferenceError)) {
+                throw error;
+            }
+        }
+        const element = (<Dynamic component={local.as ?? "div"} {...others} {...gridElement.attributes} ref={ref}>
+        {resolved()}
+      </Dynamic>);
+        if (sizeContainer === undefined) {
+            return element;
+        }
+        return (<div {...sizeContainer.attributes} style={sizeContainer.styleText}>
+        {element}
+      </div>);
+    };
+}
+function createSlotComponent(area) {
+    return function SlotComponent(props) {
+        const [local, others] = splitProps(props, ["as"]);
+        return <Dynamic component={local.as ?? "div"} {...others} data-area={area}/>;
+    };
+}
+/**
+ * Defines `members` on a component. `defineProperty`, because an area may be
+ * named like a function's own read-only properties (`name`, `length`).
+ */
+function withMembers(component, members) {
+    for (const [key, value] of Object.entries(members)) {
+        Object.defineProperty(component, key, { value, enumerable: true, configurable: true });
+    }
+    return component;
+}
+/** The members of a grid component, one per area. */
+function membersOf(component) {
+    return Object.fromEntries(Object.entries(component));
+}
+/**
+ * Turns a definition into the component it renders as.
+ *
+ * `<Card>` renders the grid (inside its own size container when the
+ * definition has breakpoints) and puts the definition's CSS on the page;
+ * `<Card.icon>` renders the slot that fills the `icon` area. Slots accept
+ * `class`, `style`, `children`, regular element props, and `as` to render
+ * your own element as the slot.
+ *
+ * Create grid components at module level, once per definition.
+ *
+ * @example
+ * ```tsx
+ * const Card = createGridComponent(
+ *   defineLayout({ areas: ["input?", "content"], layouts: [{ template: "input content" }] }),
+ *   { nest: { content: ContentGrid } },
+ * );
+ *
+ * <Card>
+ *   <Card.input as="label" for="notify">…</Card.input>
+ *   <Card.content>
+ *     <Card.content.icon>…</Card.content.icon>
+ *   </Card.content>
+ * </Card>
+ * ```
+ */
+export function createGridComponent(definition, options = {}) {
+    const members = {};
+    for (const area of definition.areas) {
+        const nested = options.nest?.[area];
+        if (nested === undefined) {
+            members[area] = createSlotComponent(area);
+            continue;
+        }
+        const Nested = nested;
+        const NestedRoot = (props) => (<Nested {...mergeProps(props, { "data-area": area })}/>);
+        members[area] = withMembers(NestedRoot, membersOf(nested));
+    }
+    return withMembers(createRoot(definition), members);
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { createGridComponent, type GridComponent, type GridComponentOptions, type GridComponentProps, type SlotComponent, type SlotComponentProps, type SlotRenderFunction, } from "./gridComponent.tsx";

package/dist/index.js

@@ -0,0 +1,145 @@
+import { Dynamic, createComponent, insert, isServer, mergeProps, spread, ssr, template, useAssets } from "solid-js/web";
+import { children, createEffect, mergeProps as mergeProps$1, sharedConfig, splitProps } from "solid-js";
+import { createSlotCheck, gridMarkup, gridStyleTags, insertGridStyle } from "typed-grid-areas/adapter";
+// src/gridComponent.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+/**
+* What a server render has registered with `useAssets`, by render. The
+* render's list of assets is internal to Solid; it's only used here as a
+* key that's new for each render.
+*/
+var registeredStyles = /* @__PURE__ */ new WeakMap();
+/**
+* Puts a definition's CSS on the page: on the server, its style tag among
+* the render's assets (once per render), which Solid injects before
+* `</head>`; in the browser, its style tag in `<head>`, reusing one the
+* server rendered.
+*/
+function emitCss(definition) {
+	if (!isServer) {
+		insertGridStyle(document, definition);
+		return;
+	}
+	const assets = sharedConfig.context?.assets;
+	if (assets === void 0) return;
+	const registered = registeredStyles.get(assets) ?? /* @__PURE__ */ new Set();
+	registeredStyles.set(assets, registered);
+	const { id } = gridMarkup(definition);
+	if (registered.has(id)) return;
+	registered.add(id);
+	useAssets(() => ssr(gridStyleTags([definition])));
+}
+function createRoot(definition) {
+	const markup = gridMarkup(definition);
+	return function Root(props) {
+		emitCss(definition);
+		const [local, others] = splitProps(props, [
+			"as",
+			"ref",
+			"children",
+			"data-area"
+		]);
+		const { sizeContainer, grid: gridElement } = markup.elements(local["data-area"]);
+		const resolved = children(() => local.children);
+		let grid;
+		const ref = (element) => {
+			grid = element;
+			local.ref?.(element);
+		};
+		try {
+			if (process.env.NODE_ENV === "development") {
+				if (!isServer) {
+					const checkSlots = createSlotCheck(definition, { strayChildRemedy: "make it a slot with `as`" });
+					createEffect(() => {
+						resolved();
+						if (grid !== void 0) for (const warning of checkSlots(grid)) console.warn(warning);
+					});
+				}
+			}
+		} catch (error) {
+			if (!(error instanceof ReferenceError)) throw error;
+		}
+		const element = createComponent(Dynamic, mergeProps({ get component() {
+			return local.as ?? "div";
+		} }, others, () => gridElement.attributes, {
+			ref,
+			get children() {
+				return resolved();
+			}
+		}));
+		if (sizeContainer === void 0) return element;
+		return (() => {
+			var _el$ = _tmpl$();
+			spread(_el$, mergeProps(() => sizeContainer.attributes, { get style() {
+				return sizeContainer.styleText;
+			} }), false, true);
+			insert(_el$, element);
+			return _el$;
+		})();
+	};
+}
+function createSlotComponent(area) {
+	return function SlotComponent(props) {
+		const [local, others] = splitProps(props, ["as"]);
+		return createComponent(Dynamic, mergeProps({ get component() {
+			return local.as ?? "div";
+		} }, others, { "data-area": area }));
+	};
+}
+/**
+* Defines `members` on a component. `defineProperty`, because an area may be
+* named like a function's own read-only properties (`name`, `length`).
+*/
+function withMembers(component, members) {
+	for (const [key, value] of Object.entries(members)) Object.defineProperty(component, key, {
+		value,
+		enumerable: true,
+		configurable: true
+	});
+	return component;
+}
+/** The members of a grid component, one per area. */
+function membersOf(component) {
+	return Object.fromEntries(Object.entries(component));
+}
+/**
+* Turns a definition into the component it renders as.
+*
+* `<Card>` renders the grid (inside its own size container when the
+* definition has breakpoints) and puts the definition's CSS on the page;
+* `<Card.icon>` renders the slot that fills the `icon` area. Slots accept
+* `class`, `style`, `children`, regular element props, and `as` to render
+* your own element as the slot.
+*
+* Create grid components at module level, once per definition.
+*
+* @example
+* ```tsx
+* const Card = createGridComponent(
+*   defineLayout({ areas: ["input?", "content"], layouts: [{ template: "input content" }] }),
+*   { nest: { content: ContentGrid } },
+* );
+*
+* <Card>
+*   <Card.input as="label" for="notify">…</Card.input>
+*   <Card.content>
+*     <Card.content.icon>…</Card.content.icon>
+*   </Card.content>
+* </Card>
+* ```
+*/
+function createGridComponent(definition, options = {}) {
+	const members = {};
+	for (const area of definition.areas) {
+		const nested = options.nest?.[area];
+		if (nested === void 0) {
+			members[area] = createSlotComponent(area);
+			continue;
+		}
+		const Nested = nested;
+		const NestedRoot = (props) => createComponent(Nested, mergeProps(() => mergeProps$1(props, { "data-area": area })));
+		members[area] = withMembers(NestedRoot, membersOf(nested));
+	}
+	return withMembers(createRoot(definition), members);
+}
+export { createGridComponent };

package/dist/index.jsx

@@ -0,0 +1 @@
+export { createGridComponent, } from "./gridComponent.jsx";

package/package.json

@@ -1 +1,58 @@
-{"name":"@typed-grid-areas/solid","version":"0.0.0"}
+{
+  "name": "@typed-grid-areas/solid",
+  "version": "0.1.1",
+  "description": "Solid adapter for typed-grid-areas: render a grid definition as typed slot components.",
+  "keywords": [
+    "css-grid",
+    "grid-template-areas",
+    "layout",
+    "typescript",
+    "solid"
+  ],
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MichaelBuss/typed-grid-areas.git",
+    "directory": "packages/solid"
+  },
+  "homepage": "https://michaelbuss.github.io/typed-grid-areas/",
+  "bugs": {
+    "url": "https://github.com/MichaelBuss/typed-grid-areas/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "solid": "./dist/index.jsx",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "prepack": "npm run build && cp ../../README.md ../../LICENSE .",
+    "postpack": "rm README.md LICENSE",
+    "test": "vitest run --project unit --project node",
+    "test:browser": "vitest run --project browser --project browser-development",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  },
+  "dependencies": {
+    "typed-grid-areas": "^0.3.0"
+  },
+  "devDependencies": {
+    "@typed-grid-areas/acceptance": "*",
+    "@types/node": "^22.20.5",
+    "@vitest/browser-playwright": "^5.0.1",
+    "playwright": "^1.64.1",
+    "solid-js": "^1.9.17",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.5",
+    "vite-plugin-solid": "^2.11.14",
+    "vitest": "^5.0.1"
+  }
+}