Merge branch 'release/1.0.0-alpha.7'

Author: titouanmathis

CHANGELOG.md

@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [v1.0.0-alpha.7](https://github.com/studiometa/ui/compare/1.0.0-alpha.6..1.0.0-alpha.7) (2024-09-10)
+
+### Fixed
+
+- **DataBind:** fix inconsistencies with removed DOM elements ([#293](https://github.com/studiometa/ui/issues/293), [#294](https://github.com/studiometa/ui/pull/294), [de945b1](https://github.com/studiometa/ui/commit/de945b1))
+
+### Changed
+
+- Update @studiometa/js-toolkit 3.0.0-alpha.9 → 3.0.0-alpha.10 ([3adbebc](https://github.com/studiometa/ui/commit/3adbebc))
+
 ## [v1.0.0-alpha.6](https://github.com/studiometa/ui/compare/1.0.0-alpha.5..1.0.0-alpha.6) (2024-08-27)
 
 ### Added

composer.json

@@ -1,6 +1,6 @@
 {
   "name": "studiometa/ui",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "description": "A set of opiniated, unstyled and accessible components.",
   "license": "MIT",
   "require": {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-workspace",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "private": true,
   "workspaces": [
     "packages/*"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-docs",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "private": true,
   "type": "module",
   "scripts": {
@@ -11,7 +11,7 @@
     "build": "vitepress build ."
   },
   "dependencies": {
-    "@studiometa/js-toolkit": "^3.0.0-alpha.9"
+    "@studiometa/js-toolkit": "^3.0.0-alpha.10"
   },
   "devDependencies": {
     "@iconify-json/octicon": "1.1.56",

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-playground",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "private": true,
   "type": "module",
   "scripts": {

packages/playground/package.json

@@ -32,3 +32,18 @@ export function h<T extends keyof HTMLElementTagNameMap = 'div'>(
 
   return el;
 }
+
+/**
+ * Connect the given element to a document instance in order
+ * to set its `isConnected` property to `true`.
+ */
+export function connectElement<T extends Node>(element:T):T {
+  const doc = new Document();
+  doc.append(element);
+  return element;
+}
+
+/**
+ * Create an HTMLElement and connect it to a document.
+ */
+export const hConnected: typeof h = (...args) => connectElement(h(...args));

packages/tests/__utils__/h.ts

@@ -1,6 +1,6 @@
 import { it, describe, expect, vi } from 'vitest';
 import { DataBind, DataComputed, DataEffect } from '@studiometa/ui';
-import { destroy, h, mount } from '#test-utils';
+import { destroy, hConnected as h, mount } from '#test-utils';
 
 describe('The DataBind component', () => {
   it('should set the textContent of the root element', () => {
@@ -151,8 +151,12 @@ describe('The DataBind component', () => {
   it('should dispatch value to other instances', async () => {
     const instance1 = new DataBind(h('div', { dataOptionName: 'a' }, ['foo']));
     const instance2 = new DataBind(h('div', { dataOptionName: 'a' }, ['foo']));
-    const instance3 = new DataComputed(h('div', { dataOptionName: 'a', dataOptionCompute: 'value + value' }, ['foofoo']));
-    const instance4 = new DataEffect(h('div', { dataOptionName: 'a', dataOptionEffect: 'target.id = value', id: 'foo' }));
+    const instance3 = new DataComputed(
+      h('div', { dataOptionName: 'a', dataOptionCompute: 'value + value' }, ['foofoo']),
+    );
+    const instance4 = new DataEffect(
+      h('div', { dataOptionName: 'a', dataOptionEffect: 'target.id = value', id: 'foo' }),
+    );
 
     await mount(instance1, instance2, instance3, instance4);
 
@@ -166,4 +170,38 @@ describe('The DataBind component', () => {
     expect(instance3.value).toBe('barbar');
     expect(instance4.$el.id).toBe('bar');
   });
+
+  it('should forget related instances not in the DOM anymore', async () => {
+    const fragment = new Document();
+    const inputA = h('input', {
+      type: 'checkbox',
+      value: 'foo',
+      checked: '',
+      dataOptionName: 'checkbox[]',
+    });
+    const inputB = h('input', {
+      type: 'checkbox',
+      value: 'bar',
+      checked: '',
+      dataOptionName: 'checkbox[]',
+    });
+    fragment.append(inputA, inputB);
+
+    const instanceA = new DataBind(inputA);
+    const instanceB = new DataBind(inputB);
+
+    await mount(instanceA, instanceB);
+
+    expect(inputA.isConnected).toBe(true);
+    expect(inputB.isConnected).toBe(true);
+    expect(instanceA.value).toEqual(['foo', 'bar']);
+
+    inputB.replaceWith(
+      h('input', { type: 'checkbox', value: 'bar', dataOptionName: 'checkbox[]' }),
+    );
+
+    expect(inputA.isConnected).toBe(true);
+    expect(inputB.isConnected).toBe(false);
+    expect(instanceA.value).toEqual(['foo']);
+  });
 });

packages/tests/atoms/DataBind.spec.ts

@@ -1,7 +1,7 @@
 import { it, describe, expect, vi } from 'vitest';
 import { Base } from '@studiometa/js-toolkit';
 import { DataComputed } from '@studiometa/ui';
-import { h } from '#test-utils';
+import { hConnected as h, } from '#test-utils';
 
 describe('The DataModel component', () => {
   it('should set the value as the returned value from the compute option', () => {

packages/tests/atoms/DataComputed.spec.ts

@@ -1,7 +1,7 @@
 import { it, describe, expect, vi } from 'vitest';
 import { Base } from '@studiometa/js-toolkit';
 import { DataEffect } from '@studiometa/ui';
-import { h } from '#test-utils';
+import { hConnected as h } from '#test-utils';
 
 describe('The DataModel component', () => {
   it('should execute the compute option without setting a value', () => {

packages/tests/atoms/DataEffect.spec.ts

@@ -1,6 +1,6 @@
 import { it, describe, expect } from 'vitest';
 import { DataModel } from '@studiometa/ui';
-import { h, mount } from '#test-utils';
+import { hConnected as h, mount } from '#test-utils';
 
 function check(input: HTMLInputElement, checked = true) {
   input.checked = checked;

packages/tests/atoms/DataModel.spec.ts

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-tests",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "private": true,
   "type": "module",
   "scripts": {

packages/tests/package.json

@@ -3,7 +3,7 @@ import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
 import { isArray } from '@studiometa/js-toolkit/utils';
 import { isInput, isCheckbox, isSelect } from './utils.js';
 
-const instances = new Map<string, Set<DataBind>>();
+const groups = new Map<string, Set<DataBind>>();
 
 export interface DataBindProps extends BaseProps {
   $options: {
@@ -24,11 +24,15 @@ export class DataBind<T extends BaseProps = BaseProps> extends Base<DataBindProp
   get relatedInstances() {
     const { name } = this.$options;
 
-    if (!instances.has(name)) {
-      instances.set(name, new Set());
+    const instances = groups.get(name) ?? groups.set(name, new Set()).get(name);
+
+    for (const instance of instances) {
+      if (!instance.$el.isConnected) {
+        instances.delete(instance);
+      }
     }
 
-    return instances.get(name);
+    return instances;
   }
 
   get multiple() {

packages/ui/atoms/Data/DataBind.ts

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/studiometa/ui#readme",
   "dependencies": {
-    "@studiometa/js-toolkit": "^3.0.0-alpha.9",
+    "@studiometa/js-toolkit": "^3.0.0-alpha.10",
     "deepmerge": "^4.3.1"
   }
 }