Add renderContent

Author: mantou132

docs/006-framework-integration.md

@@ -0,0 +1,109 @@
+# Framework integration
+
+`<gem-panel>` [shadowDOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), so it is most appropriate to use custom elements for the panel content. e.g:
+
+```ts
+const panel = new Panel('id', {
+  title: 'title',
+  content: new MyElement(),
+});
+```
+
+There is a disadvantage of directly specifying the content as a custom element instance, they are resident in memory, but can use lit-html template to solve this problem:
+
+```ts
+const panel = new Panel('id', {
+  title: 'title',
+  content: html`<my-element></my-element>`,
+});
+```
+
+If you want to use `<gem-panel>` in other frameworks, you need to use the `renderContent` factory function:
+
+```ts
+const panel = new Panel('id', {
+  title: 'title',
+  async getContent(panelName) {
+    return renderContent(panelName, (ele) => {
+      // ...
+    });
+  },
+});
+```
+
+## React example
+
+```tsx 7
+import { renderContent } from 'gem-panel';
+// ...
+
+const panel1 = new Panel('p1', {
+  title: 'p1 title',
+  async getContent(panelName) {
+    return renderContent(panelName, (ele) => ReactDOM.render(<Panel1 />, ele));
+  },
+});
+
+// ...
+
+function GemPanel({ panels, layout }) {
+  const ref = useRef();
+
+  useEffect(() => {
+    const { current } = ref;
+    current.panels = panels;
+    current.layout = layout;
+  });
+
+  return <gem-panel ref={ref}></gem-panel>;
+}
+```
+
+## Vue example
+
+Binding property:
+
+```html
+<gem-panel :panels.prop="panels" :layout.prop="layout"></gem-panel>
+```
+
+```js 7
+import { renderContent } from 'gem-panel';
+// ...
+
+const panel1 = new Panel('p1', {
+  title: 'p1 title',
+  async getContent(panelName) {
+    return renderContent(panelName, (el) => new Vue({ el, components: { 'component-a': ComponentA } }));
+  },
+});
+
+// ...
+
+export default {
+  data: {
+    panels: panels,
+    layout: layout,
+  },
+};
+```
+
+Template compilation config:
+
+```js
+{
+  // in webpack config
+  rules: [
+    {
+      test: /\.vue$/,
+      use: 'vue-loader',
+      options: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag === 'gem-panel',
+        },
+      },
+    },
+    // ...
+  ];
+}
+```

docs/006-use-in-react-vue.md

@@ -27,10 +27,10 @@ import { Layout, Panel, Window } from 'gem-panel';
 
 const panel1 = new Panel('p1', { title: 'p1 title', content: `p1 content` });
 const panel2 = new Panel('p2', { title: 'p2 title' });
-const panel3 = new Panel('p3', { title: 'p3 title', content: `<p3-panel></p3-panel>` });
-const panel4 = new Panel('p4', { title: 'p4 title', content: `<p4-panel></p4-panel>` });
-const panel5 = new Panel('p5', { title: 'p5 title', content: `<p5-panel></p5-panel>` });
-const panel6 = new Panel('p6', { title: 'p6 title', content: `<p6-panel></p6-panel>` });
+const panel3 = new Panel('p3', { title: 'p3 title', content: `p3-content` });
+const panel4 = new Panel('p4', { title: 'p4 title', content: `p4-content` });
+const panel5 = new Panel('p5', { title: 'p5 title', content: `p5-content` });
+const panel6 = new Panel('p6', { title: 'p6 title', content: `p6-content` });
 
 const panels = [panel1, panel2, panel3, panel4, panel5, panel6];
 ```

docs/README.md

@@ -86,6 +86,11 @@ export class GemPanelElement extends GemElement {
     resizeObserver.observe(this);
   };
 
+  #renderPanelSlot = (window: Window) => {
+    const panel = store.panels[window.panels[window.current]];
+    return html`<slot slot=${panel.name} name=${panel.name}></slot>`;
+  };
+
   mounted = () => {
     this.#onResize();
 
@@ -160,7 +165,9 @@ export class GemPanelElement extends GemElement {
                 panel-loader
               "
               .window=${window}
-            ></gem-panel-window>
+            >
+              ${this.#renderPanelSlot(window)}
+            </gem-panel-window>
           `,
       )}
       <gem-panel-menu

src/elements/root.ts

@@ -3,7 +3,7 @@ import { PanEventDetail } from '@mantou/gem/elements/gesture';
 import '@mantou/gem/elements/gesture';
 
 import { Window } from '../lib/layout';
-import { GetPanelContent } from '../lib/panel';
+import { GetPanelContent, Panel } from '../lib/panel';
 import {
   cancelHandleWindow,
   dropHandleWindow,
@@ -16,6 +16,7 @@ import {
   updateWindowZIndex,
   independentPanel,
   loadContentInPanel,
+  unLoadContentInPanel,
 } from '../lib/store';
 import { GemPanelTitleElement } from './panel-title';
 import { distance } from '../lib/utils';
@@ -44,6 +45,23 @@ function execGetContent(fn: GetPanelContent | undefined, panelName: string) {
   }
 }
 
+const renderContentWeakMap = new WeakMap<HTMLSlotElement, HTMLDivElement>();
+export function renderContent(
+  panelName: string,
+  render: (contentMountElement: HTMLDivElement) => void,
+  gemPanelRootElement: ParentNode = document,
+) {
+  const contentMountElement = document.createElement('div');
+  contentMountElement.setAttribute('slot', panelName);
+  contentMountElement.setAttribute('style', 'display: contents');
+  render(contentMountElement);
+  gemPanelRootElement.querySelector<any>('gem-panel').append(contentMountElement);
+  const slot = document.createElement('slot');
+  slot.setAttribute('name', panelName);
+  renderContentWeakMap.set(slot, contentMountElement);
+  return slot;
+}
+
 export const windowTagName = 'gem-panel-window';
 
 type State = {
@@ -205,16 +223,37 @@ export class GemPanelWindowElement extends GemElement<State> {
     updateWindowZIndex(this.window);
   };
 
+  #removeSlotAssignContent = (panel: Panel | undefined) => {
+    if (panel) {
+      const { content, name, getContent } = panel;
+      if (!getContent) return;
+
+      const slotAssignContent = renderContentWeakMap.get(content as any);
+      if (slotAssignContent) {
+        unLoadContentInPanel(name);
+        // The next rendering is to use `getContent`
+        getContentWeakMap.delete(getContent);
+        slotAssignContent.remove();
+      }
+    }
+  };
+
   mounted = () => {
     this.addEventListener('focus', this.#onFocusWindow);
     this.addEventListener('pointermove', this.#onMove);
     this.addEventListener('pointerup', this.#onMoveEnd);
     this.addEventListener('pointercancel', this.#onMoveEnd);
     this.effect(
-      ([currentPanel]) => {
-        if (currentPanel && !currentPanel.content) {
-          execGetContent(currentPanel.getContent, currentPanel.name);
+      ([currentPanel], oldDepValues) => {
+        if (!currentPanel) return;
+        const { content, getContent, name } = currentPanel;
+        if (!content) {
+          execGetContent(getContent, name);
         }
+        this.#removeSlotAssignContent(oldDepValues?.[0]);
+        return () => {
+          this.#removeSlotAssignContent(currentPanel);
+        };
       },
       () => {
         const { panels, current } = this.window;

src/elements/window.ts

@@ -1,4 +1,6 @@
+export { html } from '@mantou/gem';
 export { GemPanelElement } from './elements/root';
+export { renderContent } from './elements/window';
 export { MenuItem } from './elements/menu';
 export { Window, Layout } from './lib/layout';
 export { Panel } from './lib/panel';

src/index.ts

@@ -65,6 +65,12 @@ export function loadContentInPanel(panelName: string, content: PanelContent) {
   updateStore(store);
 }
 
+export function unLoadContentInPanel(panelName: string) {
+  const panel = store.panels[panelName];
+  if (!panel) return;
+  delete panel.detail.content;
+}
+
 export function independentPanel(window: Window, panelName: string, rect: [number, number, number, number]) {
   const newWindow = store.layout.createIndependentWindow(window, panelName, rect);
   updateStore(store);