@blocksuite/lit - npm Package Compare versions

Comparing version 0.0.0-20230620053632-def836c5-nightly to 0.0.0-20230620110032-d8041266-nightly

dist/element/block-element.d.ts

@@ -11,2 +11,3 @@ import type { BaseBlockModel } from '@blocksuite/store';
     content: TemplateResult;
+    widgets: TemplateResult;
     page: Page;
@@ -13,0 +14,0 @@ }

dist/element/block-element.js

@@ -23,3 +23,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     property({ attribute: false })
+], BlockElement.prototype, "widgets", void 0);
+__decorate([
+    property({ attribute: false })
 ], BlockElement.prototype, "page", void 0);
 //# sourceMappingURL=block-element.js.map

dist/element/lit-root.d.ts

@@ -1,8 +0,10 @@
-import { UIEventDispatcher } from '@blocksuite/block-std';
-import type { BaseBlockModel, BlockSchemaType, Page } from '@blocksuite/store';
-import type { TemplateResult } from 'lit';
+import type { BlockSpec } from '@blocksuite/block-std';
+import { BlockStore, UIEventDispatcher } from '@blocksuite/block-std';
+import type { BaseBlockModel, Page } from '@blocksuite/store';
+import type { PropertyValues, TemplateResult } from 'lit';
 import type { StaticValue } from 'lit/static-html.js';
 import { ShadowlessElement } from './shadowless-element.js';
+export type LitBlockSpec = BlockSpec<StaticValue>;
 export declare class BlockSuiteRoot extends ShadowlessElement {
-    componentMap: Map<BlockSchemaType, StaticValue>;
+    blocks: LitBlockSpec[];
     page: Page;
@@ -12,2 +14,4 @@ blockIdAttr: string;
     uiEventDispatcher: UIEventDispatcher;
+    blockStore: BlockStore<StaticValue>;
+    willUpdate(changedProperties: PropertyValues): void;
     connectedCallback(): void;
@@ -14,0 +18,0 @@ disconnectedCallback(): void;

dist/element/lit-root.js

@@ -8,3 +8,3 @@ /* eslint-disable lit/binding-positions, lit/no-invalid-html */
 };
-import { UIEventDispatcher } from '@blocksuite/block-std';
+import { BlockStore, UIEventDispatcher } from '@blocksuite/block-std';
 import { nothing } from 'lit';
@@ -28,7 +28,13 @@ import { customElement, property } from 'lit/decorators.js';
             }
-            const tag = this.componentMap.get(schema);
-            if (!tag) {
-                console.warn(`Cannot find tag for ${flavour}.`);
+            const view = this.blockStore.getView(flavour);
+            if (!view) {
+                console.warn(`Cannot find view for ${flavour}.`);
                 return html `${nothing}`;
             }
+            const tag = view.component;
+            const widgets = view.widgets
+                ? html `${repeat(view.widgets, widget => {
+                    return html `<${widget} .root=${this} .model=${model}></${widget}>`;
+                })}`
+                : html `${nothing}`;
             this._onLoadModel(model);
@@ -40,2 +46,3 @@ return html `<${tag}
       .model=${model}
+      .widgets=${widgets}
       .content=${html `${repeat(children, child => child.id, child => this.renderModel(child))}`}
@@ -57,8 +64,19 @@ ></${tag}>`;
     }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('blocks')) {
+            this.blockStore.applySpecs(this.blocks);
+        }
+        super.willUpdate(changedProperties);
+    }
     connectedCallback() {
         super.connectedCallback();
+        this.blockStore = new BlockStore({
+            uiEventDispatcher: this.uiEventDispatcher,
+        });
         this.uiEventDispatcher.mount();
+        this.blockStore.applySpecs(this.blocks);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.blockStore.dispose();
         this.uiEventDispatcher.unmount();
@@ -76,3 +94,3 @@ }
     property({ attribute: false })
-], BlockSuiteRoot.prototype, "componentMap", void 0);
+], BlockSuiteRoot.prototype, "blocks", void 0);
 __decorate([
@@ -79,0 +97,0 @@ property({ attribute: false })

package.json

 {
   "name": "@blocksuite/lit",
-  "version": "0.0.0-20230620053632-def836c5-nightly",
+  "version": "0.0.0-20230620110032-d8041266-nightly",
   "description": "Lit renderer for blocksuite store",
@@ -12,3 +12,3 @@ "main": "dist/index.js",
   "peerDependencies": {
-    "@blocksuite/store": "0.0.0-20230620053632-def836c5-nightly",
+    "@blocksuite/store": "0.0.0-20230620110032-d8041266-nightly",
     "@blocksuite/block-std": "0.6.0"
@@ -18,6 +18,6 @@ },
     "lit": "^2.7.3",
-    "@blocksuite/global": "0.0.0-20230620053632-def836c5-nightly"
+    "@blocksuite/global": "0.0.0-20230620110032-d8041266-nightly"
   },
   "devDependencies": {
-    "@blocksuite/store": "0.0.0-20230620053632-def836c5-nightly",
+    "@blocksuite/store": "0.0.0-20230620110032-d8041266-nightly",
     "@blocksuite/block-std": "0.6.0"
@@ -24,0 +24,0 @@ },

src/element/block-element.ts

@@ -23,3 +23,6 @@ import type { BaseBlockModel } from '@blocksuite/store';
   @property({ attribute: false })
+  widgets!: TemplateResult;
+
+  @property({ attribute: false })
   page!: Page;
 }

src/element/lit-root.ts

 /* eslint-disable lit/binding-positions, lit/no-invalid-html */
 
-import { UIEventDispatcher } from '@blocksuite/block-std';
-import type { BaseBlockModel, BlockSchemaType, Page } from '@blocksuite/store';
-import type { TemplateResult } from 'lit';
+import type { BlockSpec } from '@blocksuite/block-std';
+import { BlockStore, UIEventDispatcher } from '@blocksuite/block-std';
+import type { BaseBlockModel, Page } from '@blocksuite/store';
+import type { PropertyValues, TemplateResult } from 'lit';
 import { nothing } from 'lit';
@@ -14,6 +15,8 @@ import { customElement, property } from 'lit/decorators.js';
 
+export type LitBlockSpec = BlockSpec<StaticValue>;
+
 @customElement('block-suite-root')
 export class BlockSuiteRoot extends ShadowlessElement {
   @property({ attribute: false })
-  componentMap!: Map<BlockSchemaType, StaticValue>;
+  blocks!: LitBlockSpec[];
 
@@ -30,5 +33,18 @@ @property({ attribute: false })
 
+  blockStore!: BlockStore<StaticValue>;
+
+  override willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has('blocks')) {
+      this.blockStore.applySpecs(this.blocks);
+    }
+    super.willUpdate(changedProperties);
+  }
+
   override connectedCallback() {
     super.connectedCallback();
+    this.blockStore = new BlockStore<StaticValue>({
+      uiEventDispatcher: this.uiEventDispatcher,
+    });
     this.uiEventDispatcher.mount();
+    this.blockStore.applySpecs(this.blocks);
   }
@@ -38,2 +54,3 @@
     super.disconnectedCallback();
+    this.blockStore.dispose();
     this.uiEventDispatcher.unmount();
@@ -59,8 +76,15 @@ }
 
-    const tag = this.componentMap.get(schema);
-    if (!tag) {
-      console.warn(`Cannot find tag for ${flavour}.`);
+    const view = this.blockStore.getView(flavour);
+    if (!view) {
+      console.warn(`Cannot find view for ${flavour}.`);
       return html`${nothing}`;
     }
 
+    const tag = view.component;
+    const widgets = view.widgets
+      ? html`${repeat(view.widgets, widget => {
+          return html`<${widget} .root=${this} .model=${model}></${widget}>`;
+        })}`
+      : html`${nothing}`;
+
     this._onLoadModel(model);
@@ -73,2 +97,3 @@
       .model=${model}
+      .widgets=${widgets}
       .content=${html`${repeat(
@@ -75,0 +100,0 @@ children,

No alert changes

Improved metrics

Total package byte prevSize

208547

increased by1.64%

Lines of code

482

increased by11.32%

Dependency changes

• + Added@blocksuite/global@0.0.0-20230620110032-d8041266-nightly(transitive)

• + Added@blocksuite/store@0.0.0-20230620110032-d8041266-nightly(transitive)

• + Added@blocksuite/virgo@0.0.0-20230620110032-d8041266-nightly(transitive)

• - Removed@blocksuite/global@0.0.0-20230620053632-def836c5-nightly(transitive)

• - Removed@blocksuite/store@0.0.0-20230620053632-def836c5-nightly(transitive)

• - Removed@blocksuite/virgo@0.0.0-20230620053632-def836c5-nightly(transitive)

• Updated@blocksuite/global@0.0.0-20230620110032-d8041266-nightly