@pcg/dynamic-components 1.0.0-alpha.0

package/tests/y-components/tools.test.ts

@@ -0,0 +1,198 @@
+import { dynamicComponentToYMap, yComponentToDynamicComponent } from '@/y-components/index.js';
+import * as Y from 'yjs';
+
+import { DRichText } from '@/dynamic-components/index.js';
+import { JSONContent, getSchema } from '@tiptap/core';
+import { default as StarterKit } from '@tiptap/starter-kit';
+import {
+  describe, expect, it,
+} from 'vitest';
+import { prosemirrorJSONToYXmlFragment } from 'y-prosemirror';
+
+describe('dynamicComponentToYMap', () => {
+  it('should convert dynamic component to Y.Map', () => {
+    const yDoc = new Y.Doc();
+
+    const component = {
+      id: 'column',
+      component: 'column',
+      position: 'a0',
+      props: {
+        components: [
+          {
+            id: 'text-input',
+            position: 'a0',
+            component: 'text-input',
+            props: {
+              label: 'Text',
+            },
+          },
+        ],
+      },
+    };
+    const yComponent = dynamicComponentToYMap(component, yDoc.getMap());
+
+    expect(yComponent.toJSON()).toEqual({
+      id: 'column',
+      component: 'column',
+      position: 'a0',
+      props: {
+        components: [
+          {
+            id: 'text-input',
+            component: 'text-input',
+            position: 'a0',
+            props: {
+              label: 'Text',
+            },
+          },
+        ],
+      },
+    });
+  });
+
+  it('should convert dynamic component to Y.Map with empty props', () => {
+    const yDoc = new Y.Doc();
+
+    const component = {
+      id: 'image',
+      component: 'image',
+      position: 'a0',
+      props: {
+      },
+    };
+
+    const yComponent = dynamicComponentToYMap(component, yDoc.getMap());
+
+    expect(yComponent.toJSON()).toEqual({
+      id: 'image',
+      component: 'image',
+      position: 'a0',
+      props: {
+      },
+    });
+  });
+
+  it('should convert Y.Map with empty props to dynamic component', () => {
+    const yDoc = new Y.Doc();
+
+    const component = {
+      id: 'image',
+      component: 'image',
+      position: 'a0',
+      props: {
+      },
+    };
+
+    const yComponent = dynamicComponentToYMap(component, yDoc.getMap());
+
+    expect(yComponentToDynamicComponent(yComponent)).toEqual({
+      id: 'image',
+      component: 'image',
+      position: 'a0',
+      props: {
+      },
+    });
+  });
+
+  it('should convert dynamic component to Y.Map without props', () => {
+    const yDoc = new Y.Doc();
+
+    const component = {
+      id: 'image',
+      component: 'image',
+      position: 'a0',
+    };
+
+    // @ts-expect-error props is required
+    const yComponent = dynamicComponentToYMap(component, yDoc.getMap());
+
+    expect(yComponent.toJSON()).toEqual({
+      id: 'image',
+      component: 'image',
+      position: 'a0',
+      props: {
+      },
+    });
+  });
+
+  it('should convert Y.Map with empty props to dynamic component', () => {
+    const yDoc = new Y.Doc();
+
+    const component = {
+      id: 'image',
+      component: 'image',
+      position: 'a0',
+      props: {
+      },
+    };
+
+    const yComponent = dynamicComponentToYMap(component, yDoc.getMap());
+    yComponent.delete('props');
+
+    expect(yComponentToDynamicComponent(yComponent)).toEqual({
+      id: 'image',
+      component: 'image',
+      position: 'a0',
+      props: {
+      },
+    });
+  });
+
+  it('should convert Y.Map with content to dynamic component', () => {
+    const jsonContent: JSONContent = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Hello World!',
+            },
+          ],
+        },
+      ],
+    };
+
+    const schema = getSchema([
+      StarterKit,
+    ]);
+
+    const id = 'xxx';
+
+    const yDoc = new Y.Doc();
+    prosemirrorJSONToYXmlFragment(schema, jsonContent, yDoc.getXmlFragment(`RichText:${id}`));
+
+    const component: DRichText = {
+      id: 'rich-text',
+      component: 'rich-text',
+      position: 'a0',
+      props: {
+        content: {
+          id,
+          tiptap: {
+            type: 'doc',
+            content: [],
+          },
+          type: 'RichText',
+        },
+      },
+    };
+
+    const yComponent = dynamicComponentToYMap(component, yDoc.getMap());
+
+    expect(yComponentToDynamicComponent(yComponent, true)).toEqual({
+      id: 'rich-text',
+      component: 'rich-text',
+      position: 'a0',
+      props: {
+        content: {
+          id,
+          tiptap: jsonContent,
+          type: 'RichText',
+        },
+      },
+    });
+  });
+});

package/tests/y-tools/array-base-ops.test.ts

@@ -0,0 +1,55 @@
+import {
+  describe, expect, test,
+} from 'vitest';
+import * as Y from 'yjs';
+import { setInYPath, unsetYPath } from '../../src/index.js';
+
+const createYMap = () => {
+  const yDoc = new Y.Doc();
+
+  const yMap = yDoc.getMap();
+  const talentCrew = new Y.Array();
+
+  const item = new Y.Map(Object.entries({
+    id: '89bc6',
+    name: 'Foo',
+    position: 'a0',
+  }));
+
+  talentCrew.push([item]);
+
+  yMap.set('talentCrew', talentCrew);
+
+  return yMap;
+};
+
+describe('setInYPath', () => {
+  test('must set in array item', () => {
+    const yMap = createYMap();
+
+    setInYPath(yMap, ['talentCrew', 'id:89bc6', 'name'], 'Bar');
+
+    expect(yMap.toJSON()).toEqual({
+      talentCrew: [{
+        id: '89bc6',
+        name: 'Bar',
+        position: 'a0',
+      }],
+    });
+  });
+});
+
+describe('unsetYPath', () => {
+  test('must unset array item property', () => {
+    const yMap = createYMap();
+
+    unsetYPath(yMap, ['talentCrew', 'id:89bc6', 'name']);
+
+    expect(yMap.toJSON()).toEqual({
+      talentCrew: [{
+        id: '89bc6',
+        position: 'a0',
+      }],
+    });
+  });
+});

package/tests/y-tools/array-path-ops.test.ts

@@ -0,0 +1,95 @@
+import { isYMap } from '@/assertions/index.js';
+import {
+  describe, expect, test,
+} from 'vitest';
+import * as Y from 'yjs';
+import { pullFromYPath } from '../../src/index.js';
+
+const createProps = () => {
+  const yDoc = new Y.Doc();
+  const yMap = yDoc.getMap('props');
+  const yArray = new Y.Array();
+
+  yArray.push([
+    new Y.Map([
+      ['id', 'x'],
+      ['position', 'a0'],
+    ]),
+    new Y.Map([
+      ['id', 'y'],
+      ['position', 'a1'],
+    ]),
+    new Y.Map([
+      ['id', 'z'],
+      ['position', 'a2'],
+    ]),
+  ]);
+
+  yMap.set('items', yArray);
+
+  return {
+    yMap,
+    yArray,
+  };
+};
+
+describe('pullFromYPath', () => {
+  test('must pull from yArray by index', () => {
+    const { yMap, yArray } = createProps();
+    pullFromYPath(yMap, ['items'], 1);
+
+    expect(yArray.length).toBe(2);
+
+    const firstYMap = yArray.get(0);
+
+    expect(isYMap(firstYMap)).toBeTruthy();
+
+    expect((firstYMap as Y.Map<unknown>).get('id')).toBe('x');
+
+    const secondYMap = yArray.get(1);
+
+    expect(isYMap(secondYMap)).toBeTruthy();
+
+    expect((secondYMap as Y.Map<unknown>).get('id')).toBe('z');
+  });
+
+  test('must pull from yArray by position', () => {
+    const { yMap, yArray } = createProps();
+
+    pullFromYPath(yMap, ['items'], 'pos:a2');
+
+    expect(yArray.length).toBe(2);
+
+    const firstYMap = yArray.get(0);
+
+    expect(isYMap(firstYMap)).toBeTruthy();
+
+    expect((firstYMap as Y.Map<unknown>).get('id')).toBe('x');
+
+    const secondYMap = yArray.get(1);
+
+    expect(isYMap(secondYMap)).toBeTruthy();
+
+    expect((secondYMap as Y.Map<unknown>).get('id')).toBe('y');
+  });
+
+  test('must pull from yArray by id', () => {
+    const { yMap, yArray } = createProps();
+
+    pullFromYPath(yMap, ['items'], 'id:z');
+
+    expect(yArray.length).toBe(2);
+
+    const firstYMap = yArray.get(0);
+
+    expect(isYMap(firstYMap)).toBeTruthy();
+
+    expect((firstYMap as Y.Map<unknown>).get('id')).toBe('x');
+
+    const secondYMap = yArray.get(1);
+
+    expect(isYMap(secondYMap)).toBeTruthy();
+
+    expect((secondYMap as Y.Map<unknown>).get('id')).toBe('y');
+  });
+});

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "moduleResolution": "bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "tests/**/*.ts"],
+  "exclude": ["node_modules", "dist"],
+}

package/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "moduleResolution": "bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"],
+}

package/tsdown.config.ts

@@ -0,0 +1,18 @@
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+import { defineConfig } from 'tsdown';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  tsconfig: './tsconfig.lib.json',
+  outDir: 'dist',
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  format: 'esm',
+  alias: {
+    '@': resolve(__dirname, 'src'),
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,19 @@
+// / <reference types="vitest" />
+// eslint-disable-next-line node/no-unpublished-import
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+    globals: true,
+    typecheck: {
+      tsconfig: './tsconfig.json',
+    },
+  },
+  resolve: {
+    alias: {
+      '@': new URL('./src', import.meta.url).pathname,
+    },
+  },
+});