@excom/super-img 0.1.0

package/.rush/temp/chunked-rush-logs/super-img.apply-exports.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/chunked-rush-logs/super-img.build_docs.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/chunked-rush-logs/super-img.build_package-metas.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/apply-exports/all.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/.rush/temp/operation/apply-exports/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/operation/apply-exports/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 35.112945999999965
+}

package/.rush/temp/operation/build_docs/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/.rush/temp/operation/build_docs/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/operation/build_docs/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 41.91697700000009
+}

package/.rush/temp/operation/build_package-metas/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/.rush/temp/operation/build_package-metas/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/build_package-metas/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 64.64043999999967
+}

package/.rush/temp/shrinkwrap-deps.json

@@ -0,0 +1,3 @@
+{
+  "../../packages/super-img": "../../packages/super-img:YAC8G8l1nkKknuTXH370JI0/DynCPkP81MNQcvbO6fA=:"
+}

package/config/rig.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+  "rigPackageName": "@excom/heft-rig",
+  "rigProfile": "default"
+}

package/index.css

@@ -0,0 +1,5 @@
+@import "./src/super-img.css";
+
+@layer {
+  @mixin module-super-img;
+}

package/index.ts

@@ -0,0 +1,17 @@
+import { SuperImg } from "./super-img";
+
+SuperImg.define();
+
+export { SuperImg };
+
+type T_HTMLSuperImgElement = typeof SuperImg.CustomElement;
+declare global {
+  interface HTMLSuperImgElement extends T_HTMLSuperImgElement {}
+  interface Window {
+    HTMLSuperImgElement: HTMLSuperImgElement;
+  }
+  interface HTMLElementTagNameMap {
+    "super-img": HTMLSuperImgElement;
+  }
+}
+export type { HTMLSuperImgElement };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@excom/super-img",
+  "version": "0.1.0",
+  "description": "<super-img> custom element",
+  "license": "MIT",
+  "engines": {
+    "node": ">=24.13.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@excom/neutron": "^0.1.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@excom/heft-rig": "^0.1.0"
+  },
+  "repository": {
+    "url": "excom-dev/nucleus",
+    "directory": "packages/super-img"
+  },
+  "homepage": "https://github.com/excom-dev/nucleus/tree/main/packages/super-img/support/docs/README.md",
+  "bugs": "https://github.com/excom-dev/nucleus/issues",
+  "keywords": [
+    "super-img",
+    "neutron",
+    "custom-elements"
+  ],
+  "excom": {
+    "coverageThreshold": false,
+    "documented": false,
+    "packageType": "kit-element"
+  },
+  "scripts": {
+    "build": "node node_modules/@excom/heft-rig/scripts/vite-build.mjs",
+    "build:watch": "node node_modules/@excom/heft-rig/scripts/vite-build-watch.mjs",
+    "format": "node node_modules/@excom/heft-rig/scripts/format.mjs",
+    "test": "node node_modules/@excom/heft-rig/scripts/vitest.mjs",
+    "coverage": "node node_modules/@excom/heft-rig/scripts/coverage.mjs",
+    "dev": "node node_modules/@excom/heft-rig/scripts/vite-dev.mjs",
+    "preview": "node node_modules/@excom/heft-rig/scripts/vite-preview.mjs",
+    "build:package-metas": "node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs",
+    "build:docs": "node node_modules/@excom/heft-rig/scripts/build-docs.mjs"
+  }
+}

package/rush-logs/super-img.apply-exports.cache.log

@@ -0,0 +1 @@
+Caching has been disabled for this project's "apply-exports" command.

package/rush-logs/super-img.apply-exports.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/rush-logs/super-img.build_docs.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:docs" command, so caching has been disabled.

package/rush-logs/super-img.build_docs.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/rush-logs/super-img.build_package-metas.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:package-metas" command, so caching has been disabled.

package/rush-logs/super-img.build_package-metas.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/src/super-img.css

@@ -0,0 +1,8 @@
+/* Aliases */
+@custom-selector :--super-img super-img, .tag-super-img;
+
+@define-mixin module-super-img {
+  :--super-img {
+    display: block;
+  }
+}

package/super-img.ts

@@ -0,0 +1,149 @@
+import { Neutron } from "@excom/neutron";
+
+export const SuperImg = Neutron({
+  tag: "super-img",
+  props: {
+    // options
+    imgSrc: String,
+    fallbackSrc: String,
+    // state
+    isSuccess: Boolean,
+    isError: String,
+    isLoading: Boolean,
+    imgElement: HTMLImageElement,
+  },
+});
+SuperImg.onConnected((element) => [
+  { imgElement: element.querySelector("img") },
+  {
+    imgElement: {
+      addListeners: [
+        [
+          "error",
+          ({ currentTarget, message }) => {
+            return {
+              imgElement: {
+                src:
+                  element.fallbackSrc &&
+                  currentTarget?.src !== element.fallbackSrc
+                    ? element.fallbackSrc
+                    : currentTarget?.src,
+              },
+              isLoading: false,
+              isError: message,
+            };
+          },
+        ],
+        [
+          "load",
+          () => ({
+            isLoading: false,
+            isSuccess: true,
+          }),
+        ],
+      ],
+    },
+  },
+]).onPropChanged("imgSrc", ({ imgSrc }) => ({
+  isSuccess: false,
+  isError: null,
+  isLoading: true,
+  imgElement: { src: imgSrc || undefined },
+}));
+
+// TYPE TESTING
+
+/*
+ * // type Y = HTMLImageElement extends HTMLElement ? "test" : never;
+ * // type ESig = ["my-event", () => void];
+ * // type B = (string | (() => void))[]
+ * // const foo: B = ["my-event", () => {}];
+ * // const bar = foo satisfies ESig;
+ * type Y = Array<any> extends Record<symbol, any> ? "yes" : never;
+ * const res = (
+ *   element
+ * ) => [
+ *   {
+ *     appendChild: ["x"],
+ *     xuyz: "foo",
+ *   },
+ * ];
+ * type TEST = ReturnType<typeof res>;
+ * const bar = [
+ *   {
+ *     appendChild: ["x"],
+ *     xuyz: "foo",
+ *   },
+ * ]
+ */
+
+// type Obj = Record<symbol, any>;
+// type baz = typeof bar extends Array<Obj> ? "yes" : "no";
+
+/*
+ * const b = SuperImg.onConnected((element) => [
+ *   {
+ *     imgElement: element.querySelector("img"),
+ *     appendChild: ["x"],
+ *     xuyz: "foo",
+ *   },
+ * ]);
+ */
+
+/*
+ * SuperImg.onConnected((element) => ({
+ *   imgElement: {
+ *     src: element.imgSrc,
+ *     hidden: true,
+ *   },
+ *   appendChild: ["x"],
+ *   xuyz: "foo",
+ * }))
+ *   .onPropSet("imgSrc", ({ imgSrc }) => ({
+ *     isSuccess: false,
+ *     isError: null,
+ *     isLoading: true,
+ *     imgElement: { src: imgSrc },
+ *     x: 1,
+ *   }))
+ *   .onPropChanged("imgSrc", ({ imgSrc }) => ({
+ *     isSuccess: false,
+ *     isError: null,
+ *     isLoading: true,
+ *     imgElement: { src: imgSrc },
+ *   }))
+ *   .onPropSet(["imgSrc", "isLoading"], ({ imgSrc }) => ({
+ *     isSuccess: false,
+ *     isError: null,
+ *     isLoading: true,
+ *     imgElement: { src: imgSrc },
+ *     addEventListener: "foo",
+ *     removeEventListener: ["bar", () => {}],
+ *     appendChild: ["x"],
+ *   }))
+ *   .onPropSet(["imgSrc", "isLoading"], ({ imgSrc, fallbackSrc }) => ({
+ *     isSuccess: false,
+ *     isError: null,
+ *     isLoading: true,
+ *     imgElement: { src: fallbackSrc },
+ *     addEventListener: "foo",
+ *     removeEventListener: ["bar", () => {}],
+ *     appendChild: ["x"],
+ *   }))
+ *   .onPropUnset("imgSrc", ({ imgSrc, fallbackSrc }) => ({
+ *     isSuccess: false,
+ *     isError: null,
+ *     isLoading: true,
+ *     imgElement: {
+ *       src: "h",
+ *       inert: true,
+ *       hidden: "",
+ *       fakeProp: fallbackSrc,
+ *       removeEventListener: ["bar", () => {}],
+ *       toggleListeners: [["foo", () => {}, false]],
+ *     },
+ *     addEventListener: "foo",
+ *     removeEventListener: ["bar", () => {}],
+ *     appendChild: ["x"],
+ *   }));
+ */

package/support/custom-elements.json

@@ -0,0 +1,47 @@
+{
+  "schemaVersion": "1.0.0",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "super-img.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "SuperImg",
+          "customElement": true,
+          "tagName": "super-img",
+          "_neutron": {
+            "cssAliases": [
+              {
+                "name": ":--super-img",
+                "selectors": [
+                  "super-img",
+                  ".tag-super-img"
+                ],
+                "kind": "element"
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SuperImg",
+          "declaration": {
+            "name": "SuperImg",
+            "module": "super-img.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "super-img",
+          "declaration": {
+            "name": "SuperImg",
+            "module": "super-img.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/support/dist-docs/super-img.md

@@ -0,0 +1,33 @@
+# `<super-img>`
+
+**Tag:** `<super-img>`
+
+## Installation
+
+`@excom/super-img` v0.1.0
+
+```bash
+pnpm add @excom/super-img
+```
+
+```bash
+npm install @excom/super-img
+```
+
+```bash
+yarn add @excom/super-img
+```
+
+### Import
+
+```ts
+import "@excom/super-img";
+```
+
+## API
+
+### CSS Aliases
+
+| Alias | Kind | Matches | Description |
+| --- | --- | --- | --- |
+| `:--super-img` | element | `super-img`, `.tag-super-img` |  |

package/support/tests/super-img.test.ts

@@ -0,0 +1,26 @@
+import {
+  afterEach,
+  describe,
+  expect,
+  fixture,
+  it,
+  vi,
+  wait,
+} from "@excom/heft-rig/profiles/default/config/test-utils";
+import "../../index";
+
+describe("super-img", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("captures the inner image element on connect", async () => {
+    const el = fixture<HTMLSuperImgElement>(
+      `<super-img><img /></super-img>`,
+    );
+
+    await wait(0);
+    expect(el.imgElement).toBe(el.querySelector("img"));
+  });
+});

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@excom/heft-rig/profiles/default/config/tsconfig.json",
+  "include": ["./*.ts"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.spec.ts"]
+}