@typed-grid-areas/solid 0.1.0 → 0.1.1

package/README.md

@@ -10,6 +10,9 @@ Framework-free at the core (`typed-grid-areas`); each UI framework's adapter
 is a package of its own. The React adapter, `@typed-grid-areas/react`,
 renders a definition as typed slot components (`<Card>`, `<Card.icon>`).
 
+[Docs](https://michaelbuss.github.io/typed-grid-areas/) ·
+[Try it in your browser](https://michaelbuss.github.io/typed-grid-areas/try-it/)
+
 ## Install
 
 ```sh
@@ -22,6 +25,20 @@ npm i typed-grid-areas @typed-grid-areas/react
 Moving from `typed-grid-areas/react` (0.1)? Install `@typed-grid-areas/react`
 and import `createGridComponent` from it instead; nothing else changes.
 
+### Agent skill
+
+The `typed-grid-areas` package ships an agent skill (in its
+`skills/typed-grid-areas/`) that walks a coding agent through writing,
+converting and debugging layouts, versioned with each release. Enable it in your project with
+[TanStack Intent](https://tanstack.com/intent):
+
+```sh
+npx @tanstack/intent@latest install
+```
+
+The first run asks which packages' skills to enable, so it needs an
+interactive terminal, and Intent needs Node.js 20.12 or newer.
+
 ## At a glance
 
 ```tsx
@@ -210,7 +227,7 @@ All generated CSS sits in the `typed-grid-areas` cascade layer, so your own
 unlayered classes on the grid or a slot (say `justify-self`) always win. The
 one exception is hiding: it is `!important`, so a `display` class on a slot
 can't bring back an area the current layout leaves out
-([ADR 0003](docs/adr/0003-hidden-areas-are-important.md)).
+([ADR 0003](https://github.com/MichaelBuss/typed-grid-areas/blob/main/docs/adr/0003-hidden-areas-are-important.md)).
 
 ## Breakpoints
 
@@ -246,7 +263,7 @@ wherever it's placed. A container query can't measure the element it
 styles, so a grid with breakpoints renders inside its own size container: a
 wrapper `div` with `container-type: inline-size` and a container name unique
 to the definition, which its `@container` queries target by name (see
-[ADR 0002](docs/adr/0002-grid-owns-its-size-container.md)). Grids without
+[ADR 0002](https://github.com/MichaelBuss/typed-grid-areas/blob/main/docs/adr/0002-grid-owns-its-size-container.md)). Grids without
 breakpoints get no wrapper and are not size containers.
 
 Inline-size containment has a cost: **a grid with breakpoints can't size to
@@ -403,6 +420,9 @@ Slots must be **direct children** of their grid (fragments and conditionals
 are fine). Render an area's slot even while the current layout hides it;
 leave it out only to make an optional area absent.
 
+Grid components work with React Compiler and in Strict Mode, and the
+adapter's tests run under both.
+
 ### Nesting: `nest`
 
 A grid can fill another grid's area. `nest` makes the area's slot the root
@@ -1297,7 +1317,6 @@ import {
   gridMarkup,
   gridStyleTags,
   insertGridStyle,
-  isDevelopment,
 } from "typed-grid-areas/adapter";
 
 const cardGrid = defineLayout({
@@ -1323,12 +1342,19 @@ insertGridStyle(document, cardGrid);
 const head = gridStyleTags([cardGrid]);
 
 // In development, after each render: what to warn about the grid's slots.
-const checkSlots = createSlotCheck(cardGrid, {
-  strayChildRemedy: "make it a slot with asChild",
-});
-const gridElement = document.querySelector(`[data-grid-id="${markup.id}"]`);
-if (isDevelopment() && gridElement !== null) {
-  checkSlots(gridElement).forEach(warning => console.warn(warning));
+try {
+  if (process.env.NODE_ENV === "development") {
+    const checkSlots = createSlotCheck(cardGrid, {
+      strayChildRemedy: "make it a slot with asChild",
+    });
+    const gridElement = document.querySelector(`[data-grid-id="${markup.id}"]`);
+    if (gridElement !== null) {
+      checkSlots(gridElement).forEach(warning => console.warn(warning));
+    }
+  }
+} catch (error) {
+  // Without a bundler, `process` may not exist: then this isn't development.
+  if (!(error instanceof ReferenceError)) throw error;
 }
 ```
 
@@ -1345,7 +1371,9 @@ id>">` in `<head>` (ahead of the page's other styles, reusing a tag the
   `markup.cssKey` instead.
 - **Slot check.** One check per grid instance; it reports a set of problems
   once. `strayChildRemedy` says how your framework makes an element a slot.
-  Gate it on your framework's development flag, or on `isDevelopment()`.
+  Gate it on your framework's development flag, or read
+  `process.env.NODE_ENV` as above: bundlers replace it, so production builds
+  drop the check. Behind a call, such as `isDevelopment()`, they keep it.
 
 The main entry's `createSlots`, `generateCss` and `gridId` remain for
 rendering by hand.
@@ -1367,8 +1395,8 @@ just build         # compile each package's src/ into its dist/, as npm pack doe
 Each runs every package's own script of that name (or via npm directly:
 `npm test`, `npm run typecheck`, `npm run build`). Each package owns its
 toolchain, down to its TypeScript version; see
-[docs/agents/workspaces.md](docs/agents/workspaces.md) for adding an adapter
+[docs/agents/workspaces.md](https://github.com/MichaelBuss/typed-grid-areas/blob/main/docs/agents/workspaces.md) for adding an adapter
 and pinning its own TypeScript.
 
 A change to a package carries a changeset (`npm run changeset`); see
-[docs/agents/release.md](docs/agents/release.md) for how releases ship.
+[docs/agents/release.md](https://github.com/MichaelBuss/typed-grid-areas/blob/main/docs/agents/release.md) for how releases ship.

package/dist/gridComponent.jsx

@@ -1,6 +1,6 @@
 import { children, createEffect, mergeProps, sharedConfig, splitProps, } from "solid-js";
 import { Dynamic, isServer, ssr, useAssets } from "solid-js/web";
-import { createSlotCheck, gridMarkup, gridStyleTags, insertGridStyle, isDevelopment, } from "typed-grid-areas/adapter";
+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
@@ -44,20 +44,31 @@ function createRoot(definition) {
             grid = element;
             local.ref?.(element);
         };
-        // In development, check the slots after mount and whenever they change.
-        if (!isServer && isDevelopment()) {
-            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);
-                    }
+        // 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()}

package/dist/index.js

@@ -1,6 +1,6 @@
 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, isDevelopment } from "typed-grid-areas/adapter";
+import { createSlotCheck, gridMarkup, gridStyleTags, insertGridStyle } from "typed-grid-areas/adapter";
 // src/gridComponent.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<div>`);
 /**
@@ -46,12 +46,18 @@ function createRoot(definition) {
 			grid = element;
 			local.ref?.(element);
 		};
-		if (!isServer && isDevelopment()) {
-			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);
-			});
+		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";

package/package.json

@@ -1,7 +1,14 @@
 {
   "name": "@typed-grid-areas/solid",
-  "version": "0.1.0",
+  "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": {
@@ -9,7 +16,7 @@
     "url": "git+https://github.com/MichaelBuss/typed-grid-areas.git",
     "directory": "packages/solid"
   },
-  "homepage": "https://github.com/MichaelBuss/typed-grid-areas#readme",
+  "homepage": "https://michaelbuss.github.io/typed-grid-areas/",
   "bugs": {
     "url": "https://github.com/MichaelBuss/typed-grid-areas/issues"
   },
@@ -35,7 +42,7 @@
     "solid-js": "^1.9.0"
   },
   "dependencies": {
-    "typed-grid-areas": "^0.2.0"
+    "typed-grid-areas": "^0.3.0"
   },
   "devDependencies": {
     "@typed-grid-areas/acceptance": "*",