✨ Makes Window Plugin

package.json

@@ -25,25 +25,25 @@
   "devDependencies": {
     "@milahu/patch-package": "6.4.14",
     "@trivago/prettier-plugin-sort-imports": "4.2.0",
-    "@types/alpinejs": "3.13.0",
-    "@types/node": "20.6.2",
-    "@typescript-eslint/eslint-plugin": "6.7.0",
-    "@typescript-eslint/parser": "6.7.0",
-    "@vitest/ui": "0.34.4",
-    "alpinejs": "^3.13.0",
-    "esbuild": "0.19.3",
-    "eslint": "8.49.0",
-    "happy-dom": "9.1.9",
+    "@types/alpinejs": "3.13.2",
+    "@types/node": "20.8.4",
+    "@typescript-eslint/eslint-plugin": "6.7.5",
+    "@typescript-eslint/parser": "6.7.5",
+    "@vitest/ui": "0.34.6",
+    "alpinejs": "3.13.1",
+    "esbuild": "0.19.4",
+    "eslint": "8.51.0",
+    "happy-dom": "12.9.1",
     "husky": "8.0.3",
     "lint-staged": "14.0.1",
     "npm-run-all": "4.1.5",
     "prettier": "3.0.3",
     "pretty-bytes": "6.1.1",
     "typescript": "5.2.2",
-    "vite": "4.4.9",
-    "vite-plugin-dts": "3.5.3",
+    "vite": "4.4.11",
+    "vite-plugin-dts": "3.6.0",
     "vite-tsconfig-paths": "4.2.1",
-    "vitest": "0.34.4",
+    "vitest": "0.34.6",
     "vitest-dom": "0.1.1"
   },
   "lint-staged": {
@@ -68,7 +68,7 @@
   "pnpm": {
     "overrides": {
       "happy-dom@>9.1.9": "9.1.9",
-      "typescript@<5.1.6": "5.1.6",
+      "typescript@<5.2.2": "5.2.2",
       "semver@<7.5.2": ">=7.5.2"
     }
   }

packages/window/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Eric Kwoka
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/window/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@ekwoka/window",
+  "version": "0.0.1",
+  "description": "Simple magic for creating windows into your data to reduce unneeded checks",
+  "author": {
+    "name": "Eric Kwoka",
+    "email": "eric@thekwoka.net",
+    "url": "https://thekwoka.net/"
+  },
+  "license": "MIT",
+  "keywords": [
+    "AlpineJS"
+  ],
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "main": "dist/",
+  "types": "dist/",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./dist": "./dist/",
+    "./src": "./src/"
+  },
+  "scripts": {
+    "build": "vite build",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint --fix ./src; prettier --write ./src --loglevel error",
+    "lint:check": "eslint --max-warnings 10 ./src && prettier --check ./src",
+    "lint:types": "tsc --noEmit",
+    "prebuild": "rm -rf dist",
+    "test": "vitest"
+  },
+  "peerDependencies": {
+    "alpinejs": "3.x"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "bracketSameLine": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ekwoka/alpine-plugins"
+  },
+  "homepage": "https://github.com/ekwoka/alpine-plugins/blob/main/packages/xrias/README.md"
+}

packages/window/src/index.ts

@@ -0,0 +1,68 @@
+import { PluginCallback, ReactiveEffect } from 'alpinejs';
+
+export const window: PluginCallback = (Alpine) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const windowMap = new WeakMap<any[], AlpineWindow<any>>();
+
+  class AlpineWindow<T> {
+    list: T[];
+    value: { value: string | null } = Alpine.reactive({ value: null });
+    valueGetter: () => string = (() => {}) as () => string;
+    transformer: (value: T) => string = () => '';
+    constructor(list: T[]) {
+      this.list = list;
+    }
+    withValue = (valueGetter: () => string) => {
+      this.valueGetter = valueGetter;
+      return this;
+    };
+    withTransformer = (transformer: (value: T) => string) => {
+      this.transformer = transformer;
+      return this;
+    };
+    initialized = false;
+    cleanup = () => {};
+    reactiveKeys: { [key: string]: boolean } = Alpine.reactive({});
+    keyEffect: ReactiveEffect | null = null;
+    get(key: string) {
+      return this.reactiveKeys[key] ?? false;
+    }
+    setup = () => {
+      if (this.initialized) return this;
+      this.initialized = true;
+      const effects: ReactiveEffect[] = [];
+      if (this.valueGetter)
+        effects.push(
+          Alpine.effect(() => {
+            this.value.value = this.valueGetter();
+          }),
+        );
+      if (this.transformer)
+        effects.push(
+          Alpine.effect(() => {
+            this.list.forEach((item) => {
+              this.reactiveKeys[this.transformer(item)] = false;
+            });
+          }),
+        );
+      let prevValue: string | null = null;
+      effects.push(
+        Alpine.effect(() => {
+          this.reactiveKeys[prevValue ?? 'null'] = false;
+          this.reactiveKeys[(prevValue = this.value.value ?? 'null')] = true;
+        }),
+      );
+      return this;
+    };
+  }
+
+  const $window = <T>(list: T[]) => {
+    if (windowMap.has(list)) return windowMap.get(list) as AlpineWindow<T>;
+    const window = new AlpineWindow(list);
+    windowMap.set(list, window);
+    return window;
+  };
+  Alpine.magic('window', () => $window);
+};
+
+export default window;

packages/window/testSite/index.html

@@ -0,0 +1,43 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>X RIAS TEST SITE</title>
+    <script type="module" lang="ts">
+      import Alpine from 'alpinejs';
+      import Window from '../src/';
+      const data = Array.from({ length: 100_000 }, (_, i) => i.toString(16));
+      const RIASConfig = {
+        shopify: true,
+        maxSize: 600,
+        autoSizes: true,
+      };
+      Alpine.plugin(Window);
+      Alpine.data('list', () => ({
+        items: data,
+        select: 0,
+      }));
+      Alpine.start();
+    </script>
+  </head>
+  <body
+    x-data="list"
+    style="
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      align-items: center;
+    ">
+    <template x-for="item in items" :key="item">
+      <div
+        @click="select = item"
+        :style="{
+        padding: '1rem 2rem',
+        align: 'center',
+        backgroundColor: $window(items).withValue(() => select.toString(16)).withTransformer((item) => item.toString(16)).setup().get(item.toString(16)) ? 'red' : 'white',
+      }"
+        x-text="item"></div>
+    </template>
+  </body>
+</html>

packages/window/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"],
+  "compilerOptions": {
+    "types": ["vitest/importMeta", "vitest/globals"],
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "module": "es2022",
+    "moduleResolution": "node",
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esNext"
+  }
+}

packages/window/vite.config.ts

@@ -0,0 +1,49 @@
+/// <reference types="vitest" />
+import { resolve } from 'node:path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  root: resolve(__dirname),
+  plugins: [
+    dts({
+      entryRoot: resolve(__dirname, 'src'),
+      tsconfigPath: resolve(__dirname, 'tsconfig.json'),
+    }),
+    tsconfigPaths(),
+  ],
+  define: {
+    'import.meta.vitest': 'undefined',
+    'import.meta.DEBUG': 'false',
+  },
+  build: {
+    target: 'esnext',
+    outDir: resolve(__dirname, 'dist'),
+    lib: {
+      entry: resolve(__dirname, 'src', 'index.ts'),
+      formats: ['es'],
+    },
+    minify: false,
+    rollupOptions: {
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        entryFileNames: ({ name: fileName }) => {
+          return `${fileName}.js`;
+        },
+        sourcemap: true,
+      },
+    },
+  },
+  test: {
+    globals: true,
+    include: ['./**/*{.spec,.test}.{ts,tsx}'],
+    includeSource: ['./**/*.{ts,tsx}'],
+    reporters: ['dot'],
+    environment: 'happy-dom',
+    deps: {},
+    useAtomics: true,
+    passWithNoTests: true,
+  },
+});