Status, roadmap...

[BentoumiTech]

An amazing plugin that you are working on!

I was playing with Symbols on grapes and saw your project, I like the approach you took to implement it.

Do there is any code I can contribute to help you get the plugin ready?

[lexoyo]

Hello
I just saw your PR, thank you, that's a good surprise :)
Sure I would love some help, I will share my todo list here then
You need symbols for a project of yours?
I need this plugin for the next version of silex.me
Have a great day

[BentoumiTech]

Yes, I need symbols for a project I'm working on.

My end goal is to be able that whenever a symbol style/attributes/selection changes all the other instances of that symbol get updated.

Looking forward to seeing your todo list :)

[lexoyo]

Great :)

Here is my todo

• Backbone models for Symbols and Symbol
• Commands to create/delete symbol instances
• Mechanism to store the updated component's json in order to create new components out of the symbol
• Mechanism to track components inside Symbol instances and to apply a change to all occurrences of a component
• Sync attributes
• Sync css classes / selectors
• Sync children
• Sync nested children
• Sync styles
• Handle symbols in symbols
• Handle move a child from a symbol directly to another symbol
• Support pages
• Prevent dropping a symbol into itself (tip on how to prevent drop and here too)
• Prevent dropping from the stage a symbol child into the same symbol (or handle it as a move)
• Prevent dropping from the symbols pane a symbol child into the same symbol (or handle it as a move)
• Prevent make a symbol when it is a symbol already
• Support for making a component a symbol when the component is in a symbol (add symbol id to all instances)
• Symbols wording / UI #4 (opionion wanted)
• Tag name support
• Undo redo support
• Rename symbol
• Add a trait for all symbols instances: unlink/pause sync

Bugs

• when you delete something that is not in other instances it deltes everything
• Deleted symbols keep the symbol icon #6 (help wanted)
• drop a quote in a symbol, then drag it to an other instance of the same symbol => the whole instance disappears
• drop a "link block" component in a symbol changes its properties for: display: inline-block; min-height: 50px; padding: 5px;
• change text inside a symbol then undo will undo the change only in the instance you changed

It would be great to collaborate - eventually I'll transfer this repo to the Silex Labs org (the foundation which holds silex copyright)

Have a nice day !

[BentoumiTech]

Thank you for sharing your to-do list, it helps a lot.

I already started to look at those three, I'll try to open a PR this week

• Sync attributes
• Sync styles
• Sync CSS classes / selectors

[lexoyo]

👍

[lexoyo]

hey @BentoumiTech i'm back on the subject
it seems all broken, i hope you didn't struggle with my non working code

[lexoyo]

we should probably use

https://www.npmjs.com/package/morphdom

[mingodad]

I'm also interested on the idea of this project but I'm not able to get it to work to test it, any clue/help ?
I can get npm to install/start but I'm getting this message on console:

grapesjs@latest:2 Plugin grapesjs-sympbols not found Object
y @ grapesjs@latest:2
log.js:24 [HMR] Waiting for update signal from WDS...
lit-html.js:49 Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.
issueWarning @ lit-html.js:49
index.js:551 [webpack-dev-server] Hot Module Replacement enabled.
index.js:551 [webpack-dev-server] Live Reloading enabled.
DevTools failed to load source map: Could not load content for webpack://grapesjs-sympbols/node_modules/underscore/underscore-umd.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for webpack://grapesjs-sympbols/node_modules/lit-html/development/lit-html.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for https://unpkg.com/grapes.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

[lexoyo]

Hello Thanks for your interest I believe it is a little early for contributions, and not at all ready for production I should be back at in a month or so The idea I have now is to use dom and json diff libraries instead of this mechanism i prototyped here which looks for the parent symbol and all the children Please stay tuned and this will be testable in a couple of months Also the error messages you have are only for sourcemaps, I guess i missed a config somewhere

On Aug 18, 2022, 14:17, at 14:17, Domingo Alvarez Duarte ***@***.***> wrote: I'm also interested on the idea of this project but I'm not able to get it to work to test it, any clue/help ? I can get npm to install/start but I'm getting this message on console: ```

***@***.***:2 Plugin grapesjs-sympbols not found Object

…

y @ ***@***.***:2 log.js:24 [HMR] Waiting for update signal from WDS... lit-html.js:49 Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information. issueWarning @ lit-html.js:49 index.js:551 [webpack-dev-server] Hot Module Replacement enabled. index.js:551 [webpack-dev-server] Live Reloading enabled. DevTools failed to load source map: Could not load content for webpack://grapesjs-sympbols/node_modules/underscore/underscore-umd.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for webpack://grapesjs-sympbols/node_modules/lit-html/development/lit-html.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for https://unpkg.com/grapes.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE ``` -- Reply to this email directly or view it on GitHub: #1 (comment) You are receiving this because you commented. Message ID: ***@***.***>

[mingodad]

Thank you for reply !
The main error message is that this one Plugin grapesjs-sympbols not found it doesn't register the grapesjs-symbols plugin.

I did a hand made unification of this project an removed the need for lit-html but then I've got another problem where is the #symbols (appendTo: '#symbols') located ?

Do we need to create an empty div/element with that id ?

Any way thank you for your great work !

[lexoyo]

Yes, for now i bundled a UI which you need to tell where to go, with the appendTo option

[lexoyo]

The ui needs lithtml though
You can leave it it was just a warning
Please understand that it will not work yet, but you are welcome to try, please open a new issue then

[lexoyo]

FYI: I updated the "roadmap" with my progress, take a look at the demo to see how it is working so far
https://codepen.io/lexoyo/pen/gOjYweZ

[lexoyo]

Updated the "road map" here

The demo should be up to date