ncu lit-html

silexlabs · Aug 2, 2024 · 8e4bb75 · 8e4bb75
1 parent 5315ca4
commit 8e4bb75
Show file tree

Hide file tree

Showing 21 changed files with 125 additions and 159 deletions.
diff --git a/dist/es5/SymbolsCommands.js b/dist/es5/SymbolsCommands.js
@@ -5,26 +5,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSymbolInstance = exports.unlinkSymbolInstance = exports.removeSymbol = exports.addSymbol = exports.displayError = exports.cmdCreate = exports.cmdUnlink = exports.cmdRemove = exports.cmdAdd = void 0;
+var lit_html_1 = require("lit-html");
+var unsafe_html_js_1 = require("lit-html/directives/unsafe-html.js");
 var Symbol_1 = require("./model/Symbol");
 var utils_1 = require("./utils");
 var events_1 = require("./events");
-var lit_html_1 = require("lit-html");
-var unsafe_html_js_1 = require("lit-html/directives/unsafe-html.js");
 exports.cmdAdd = 'symbols:add';
 exports.cmdRemove = 'symbols:remove';
 exports.cmdUnlink = 'symbols:unlink';
 exports.cmdCreate = 'symbols:create';
-//let html: any
-//let render: any
-//let unsafeHTML: any
-//async function loadLitHtml() {
-//  const litHtml = await import('lit-html')
-//  html = litHtml.html
-//  render = litHtml.render
-//  const unsafeLitHTML = await import('lit-html/directives/unsafe-html.js')
-//  unsafeHTML = unsafeLitHTML.unsafeHTML
-//}
-//loadLitHtml()
 // Same signature as a grapesjs plugin
 function default_1(editor, options) {
     if (options === void 0) { options = {}; }

diff --git a/dist/es5/model/Symbol.d.ts b/dist/es5/model/Symbol.d.ts
@@ -1,6 +1,6 @@
+import Backbone from 'backbone';
 import { Component, ComponentProperties } from 'grapesjs';
 import { SymbolEditor } from './Symbols';
-import Backbone from 'backbone';
 export declare const SYMBOL_ID_ATTRIBUTE = "symbolId";
 export declare const SYMBOL_CHILD_ID_ATTRIBUTE = "symbolChildId";
 export declare const SYMBOL_SYNC_ATTRIBUTE = "symbolSync";

diff --git a/dist/es5/model/Symbol.js b/dist/es5/model/Symbol.js
@@ -30,9 +30,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSymbol = exports.initSymbolChild = exports.initModel = exports.cleanup = exports.getSymbolId = exports.SYMBOL_SYNC_ATTRIBUTE = exports.SYMBOL_CHILD_ID_ATTRIBUTE = exports.SYMBOL_ID_ATTRIBUTE = void 0;
-var utils_1 = require("../utils");
 var backbone_1 = __importDefault(require("backbone"));
-var underscore_1 = __importDefault(require("underscore"));
+var utils_1 = require("../utils");
+var underscore_1 = require("underscore");
 exports.SYMBOL_ID_ATTRIBUTE = 'symbolId';
 exports.SYMBOL_CHILD_ID_ATTRIBUTE = 'symbolChildId';
 exports.SYMBOL_SYNC_ATTRIBUTE = 'symbolSync';
@@ -439,7 +439,7 @@ exports.initSymbolChild = initSymbolChild;
  */
 function createSymbol(editor, c, attributes) {
     var _a;
-    var symbolId = (_a = attributes.symbolId) !== null && _a !== void 0 ? _a : "s_".concat(underscore_1.default.uniqueId(), "_").concat(new Date().getTime());
+    var symbolId = (_a = attributes.symbolId) !== null && _a !== void 0 ? _a : "s_".concat((0, underscore_1.uniqueId)(), "_").concat(new Date().getTime());
     // If the component is in a symbol, we need to update all instances
     var inst = (0, utils_1.closestInstance)(c);
     // Init component with symbolId and children

diff --git a/dist/es5/model/Symbols.js b/dist/es5/model/Symbols.js
@@ -194,6 +194,7 @@ var Symbols = /** @class */ (function (_super) {
      * @private
      */
     Symbols.prototype.onAdd = function (c) {
+        var _this = this;
         var symbolId = (0, Symbol_1.getSymbolId)(c);
         if (symbolId) {
             var symbol = this.get(symbolId);
@@ -209,7 +210,22 @@ var Symbols = /** @class */ (function (_super) {
                 }
             }
             else {
-                console.warn('Could not add instance', c, "Could not find the symbol with id ".concat(symbolId, " (maybe later?)"));
+                // The symbol is not yet loaded
+                setTimeout(function () {
+                    // Check again
+                    if (_this.get(symbolId)) {
+                        // Allright in the end, it was just during loading
+                    }
+                    else {
+                        console.error("Could not make component with id `".concat(c.getId(), "` an instance of symbol with id `").concat(symbolId, "`: symbol not found"));
+                        _this.editor.runCommand('notifications:add', {
+                            type: 'error',
+                            group: 'Symbols errors',
+                            message: "There is a problem with this component: it is supposed to be an instance of a symbol, but the symbol is not found. Symbol id: ".concat(symbolId),
+                            componentId: c.getId(),
+                        });
+                    }
+                });
             }
         }
     };

diff --git a/dist/es5/test-utils.d.ts b/dist/es5/test-utils.d.ts
@@ -1,4 +1,4 @@
-import { SymbolEditor } from './model/Symbols.js';
+import { SymbolEditor } from './model/Symbols';
 export declare function getTestSymbols(): {
     child11: any;
     child12: any;
@@ -8,8 +8,8 @@ export declare function getTestSymbols(): {
     child211: any;
     comp1: any;
     comp2: any;
-    s1: import("./model/Symbol.js").default;
-    s2: import("./model/Symbol.js").default;
+    s1: import("./model/Symbol").default;
+    s2: import("./model/Symbol").default;
     s1Data: {
         icon: string;
         label: string;

diff --git a/dist/es5/test-utils.js b/dist/es5/test-utils.js
@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTestSymbols = void 0;
 var grapesjs_1 = __importDefault(require("grapesjs"));
-var Symbol_js_1 = require("./model/Symbol.js");
+var Symbol_1 = require("./model/Symbol");
 //  let's use the editor in headless mode
 //  to create components
 var editor = grapesjs_1.default.init({
@@ -47,10 +47,10 @@ function getTestSymbols() {
     };
     // This is equivalent to
     // const s1 = createSymbol(comp1, s1Data)
-    var s1 = (0, Symbol_js_1.createSymbol)(editor, comp1, s1Data);
+    var s1 = (0, Symbol_1.createSymbol)(editor, comp1, s1Data);
     s1.addInstance(comp2);
     s1.get('model').set('test', 'S1 model');
-    var s2 = (0, Symbol_js_1.createSymbol)(editor, comp3, {
+    var s2 = (0, Symbol_1.createSymbol)(editor, comp3, {
         icon: 'fa-cog',
         label: 'S2',
     });

diff --git a/dist/es5/view/SymbolsView.d.ts b/dist/es5/view/SymbolsView.d.ts
@@ -1,4 +1,4 @@
-import Backbone from 'backbone';
+import Backbone, { ViewOptions } from 'backbone';
 import { SymbolEditor } from '../model/Symbols';
 import { Position } from 'grapesjs';
 export declare function confirmDialog({ editor, content: main, title, primaryLabel, secondaryLabel, cbk, lsKey, }: {
@@ -10,7 +10,7 @@ export declare function confirmDialog({ editor, content: main, title, primaryLab
     cbk: () => void;
     lsKey: string;
 }): void;
-export interface SymbolsViewOptions extends Backbone.ViewOptions {
+export interface SymbolsViewOptions extends ViewOptions {
     editor: SymbolEditor;
     appendTo: string;
     highlightColor: string;

diff --git a/dist/es5/view/SymbolsView.js b/dist/es5/view/SymbolsView.js
@@ -23,20 +23,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.confirmDialog = void 0;
-var backbone_1 = __importDefault(require("backbone"));
 var lit_html_1 = require("lit-html");
 var unsafe_html_js_1 = require("lit-html/directives/unsafe-html.js");
-//let render: any
-//let html: any
-//let unsafeHTML: any
-//async function loadLitHtml() {
-//  const litHtml = await import('lit-html')
-//  render = litHtml.render
-//  html = litHtml.html
-//  const unsafeLitHTML = await import('lit-html/directives/unsafe-html.js')
-//  unsafeHTML = unsafeLitHTML.unsafeHTML
-//}
-//loadLitHtml()
+var backbone_1 = __importDefault(require("backbone"));
 function closestHtml(child, attr) {
     var ptr = child;
     while (ptr && !ptr.getAttribute(attr)) {

diff --git a/dist/es5/view/traits.js b/dist/es5/view/traits.js
@@ -3,29 +3,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+var lit_html_1 = require("lit-html");
 var events_1 = require("../events");
 var Symbol_1 = require("../model/Symbol");
 var SymbolsCommands_1 = require("../SymbolsCommands");
 var SymbolsView_1 = require("./SymbolsView");
-var lit_html_1 = require("lit-html");
-//let html: any
-//let render: any
-//async function loadLitHtml() {
-//  const litHtml = await import('lit-html')
-//  html = litHtml.html
-//  render = litHtml.render
-//}
-//loadLitHtml()
 // Same signature as a grapesjs plugin
 function default_1(editor, options) {
     function setSync(el, component, sync) {
@@ -80,29 +63,35 @@ function default_1(editor, options) {
             updateUi(elInput, component);
         },
     });
-    // Add the new trait to all component types
-    editor.DomComponents.getTypes().map(function (type) {
-        editor.DomComponents.addType(type.id, {
-            //isComponent: el => isComponent(el),
-            model: {
-                defaults: {
-                    traits: __spreadArray(__spreadArray([], editor.DomComponents.getType(type.id).model.prototype.defaults.traits, true), [
-                        // Add the new trait
-                        //{
-                        //  type: 'checkbox',
-                        //  name: 'In sync',
-                        //  //valueTrue: 'YES', // Value to assign when is checked, default: `true`
-                        //  //valueFalse: 'NO', // Value to assign when is unchecked, default: `false`
-                        //}
-                        {
-                            type: 'symbol-trait',
-                            name: 'Symbol',
-                        }
-                    ], false)
-                }
-            }
-        });
+    // Add trait to symbols when the user selects one
+    editor.on('component:selected', function (component) {
+        var symbolId = component && (0, Symbol_1.getSymbolId)(component);
+        if (symbolId) {
+            component.addTrait({
+                type: 'symbol-trait',
+                name: 'Symbol',
+            });
+        }
     });
+    //// Add the new trait to all component types
+    //editor.DomComponents.getTypes().forEach(type => {
+    //  editor.DomComponents.addType(type.id, {
+    //    //isComponent: el => isComponent(el),
+    //    model: {
+    //      defaults: {
+    //        traits: [
+    //          // Keep the type original traits
+    //          ...editor.DomComponents.getType(type.id).model.prototype.defaults.traits,
+    //          // Add the new trait
+    //          {
+    //            type: 'symbol-trait',
+    //            name: 'Symbol',
+    //          }
+    //        ]
+    //      }
+    //    }
+    //  })
+    //})
 }
 exports.default = default_1;
 var templateObject_1;
diff --git a/dist/es6/SymbolsCommands.js b/dist/es6/SymbolsCommands.js
@@ -2,26 +2,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+import { html, render } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { createSymbol, getSymbolId } from './model/Symbol';
 import { allowDrop, setDirty } from './utils';
 import { SymbolEvents } from './events';
-import { html, render } from 'lit-html';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 export var cmdAdd = 'symbols:add';
 export var cmdRemove = 'symbols:remove';
 export var cmdUnlink = 'symbols:unlink';
 export var cmdCreate = 'symbols:create';
-//let html: any
-//let render: any
-//let unsafeHTML: any
-//async function loadLitHtml() {
-//  const litHtml = await import('lit-html')
-//  html = litHtml.html
-//  render = litHtml.render
-//  const unsafeLitHTML = await import('lit-html/directives/unsafe-html.js')
-//  unsafeHTML = unsafeLitHTML.unsafeHTML
-//}
-//loadLitHtml()
 // Same signature as a grapesjs plugin
 export default function (editor, options) {
     if (options === void 0) { options = {}; }

diff --git a/dist/es6/model/Symbol.d.ts b/dist/es6/model/Symbol.d.ts
@@ -1,6 +1,6 @@
+import Backbone from 'backbone';
 import { Component, ComponentProperties } from 'grapesjs';
 import { SymbolEditor } from './Symbols';
-import Backbone from 'backbone';
 export declare const SYMBOL_ID_ATTRIBUTE = "symbolId";
 export declare const SYMBOL_CHILD_ID_ATTRIBUTE = "symbolChildId";
 export declare const SYMBOL_SYNC_ATTRIBUTE = "symbolSync";

diff --git a/dist/es6/model/Symbol.js b/dist/es6/model/Symbol.js
@@ -24,9 +24,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { find, all, children, getCaret, setCaret, closestInstance } from '../utils';
 import Backbone from 'backbone';
-import _ from 'underscore';
+import { find, all, children, getCaret, setCaret, closestInstance } from '../utils';
+import { uniqueId } from 'underscore';
 export var SYMBOL_ID_ATTRIBUTE = 'symbolId';
 export var SYMBOL_CHILD_ID_ATTRIBUTE = 'symbolChildId';
 export var SYMBOL_SYNC_ATTRIBUTE = 'symbolSync';
@@ -429,7 +429,7 @@ export function initSymbolChild(c, force) {
  */
 export function createSymbol(editor, c, attributes) {
     var _a;
-    var symbolId = (_a = attributes.symbolId) !== null && _a !== void 0 ? _a : "s_".concat(_.uniqueId(), "_").concat(new Date().getTime());
+    var symbolId = (_a = attributes.symbolId) !== null && _a !== void 0 ? _a : "s_".concat(uniqueId(), "_").concat(new Date().getTime());
     // If the component is in a symbol, we need to update all instances
     var inst = closestInstance(c);
     // Init component with symbolId and children

diff --git a/dist/es6/model/Symbols.js b/dist/es6/model/Symbols.js
@@ -165,6 +165,7 @@ var Symbols = /** @class */ (function (_super) {
      * @private
      */
     Symbols.prototype.onAdd = function (c) {
+        var _this = this;
         var symbolId = getSymbolId(c);
         if (symbolId) {
             var symbol = this.get(symbolId);
@@ -180,7 +181,22 @@ var Symbols = /** @class */ (function (_super) {
                 }
             }
             else {
-                console.warn('Could not add instance', c, "Could not find the symbol with id ".concat(symbolId, " (maybe later?)"));
+                // The symbol is not yet loaded
+                setTimeout(function () {
+                    // Check again
+                    if (_this.get(symbolId)) {
+                        // Allright in the end, it was just during loading
+                    }
+                    else {
+                        console.error("Could not make component with id `".concat(c.getId(), "` an instance of symbol with id `").concat(symbolId, "`: symbol not found"));
+                        _this.editor.runCommand('notifications:add', {
+                            type: 'error',
+                            group: 'Symbols errors',
+                            message: "There is a problem with this component: it is supposed to be an instance of a symbol, but the symbol is not found. Symbol id: ".concat(symbolId),
+                            componentId: c.getId(),
+                        });
+                    }
+                });
             }
         }
     };

diff --git a/dist/es6/test-utils.d.ts b/dist/es6/test-utils.d.ts
@@ -1,4 +1,4 @@
-import { SymbolEditor } from './model/Symbols.js';
+import { SymbolEditor } from './model/Symbols';
 export declare function getTestSymbols(): {
     child11: any;
     child12: any;
@@ -8,8 +8,8 @@ export declare function getTestSymbols(): {
     child211: any;
     comp1: any;
     comp2: any;
-    s1: import("./model/Symbol.js").default;
-    s2: import("./model/Symbol.js").default;
+    s1: import("./model/Symbol").default;
+    s2: import("./model/Symbol").default;
     s1Data: {
         icon: string;
         label: string;

diff --git a/dist/es6/test-utils.js b/dist/es6/test-utils.js
@@ -1,5 +1,5 @@
 import grapesjs from 'grapesjs';
-import { createSymbol } from './model/Symbol.js';
+import { createSymbol } from './model/Symbol';
 //  let's use the editor in headless mode
 //  to create components
 var editor = grapesjs.init({

diff --git a/dist/es6/view/SymbolsView.d.ts b/dist/es6/view/SymbolsView.d.ts
@@ -1,4 +1,4 @@
-import Backbone from 'backbone';
+import Backbone, { ViewOptions } from 'backbone';
 import { SymbolEditor } from '../model/Symbols';
 import { Position } from 'grapesjs';
 export declare function confirmDialog({ editor, content: main, title, primaryLabel, secondaryLabel, cbk, lsKey, }: {
@@ -10,7 +10,7 @@ export declare function confirmDialog({ editor, content: main, title, primaryLab
     cbk: () => void;
     lsKey: string;
 }): void;
-export interface SymbolsViewOptions extends Backbone.ViewOptions {
+export interface SymbolsViewOptions extends ViewOptions {
     editor: SymbolEditor;
     appendTo: string;
     highlightColor: string;