[Framework-Team] mockup issue with the theming editor

[Eric Bréhault]

Hello,

As I've mentionned at the last Framework team meeting, my changes to fix
the theming editor in Plone 5 are ok:
- the backend is implemented in plone.resourceeditor (I have just merged my
changes in master).
- I have fixed the 2 involved patterns (filemanager and thememapper) during
(and after) the Bristol sprint (merged in master too since few months)

Now, I want to make those 2 patterns available in plone.app.theming pages
properly. So I need to bundle them.

I have first tried to create a local mockup folder in plone.app.theming
using the Yeoman generator, but I had many issues (like @{bowerPath} not
resolved in less files, and different path issues...).
So I decided to just copy the actual mockup folder sources (from
https://github.com/plone/mockup) into plone.app.theming/mockup, and work
from there.
It worked better.
That's what is currently committed in my branch here:
https://github.com/plone/plone.app.theming/tree/integrate-theme-editor

Here is my problem:

- I have changed (for test purpose) the plone bundle to add my 2 patterns:
https://github.com/plone/plone.app.theming/blob/integrate-theme-editor/mockup/js/bundles/plone.js#L19
If I generate the Plone bundle and put the results in Products.CMFPlone,
the theming editor works just fine.
But of course, we do not want those 2 extra patterns to be part of our
regular plone bundle.

- I have defined a specific bundle:
https://github.com/plone/plone.app.theming/blob/integrate-theme-editor/mockup/js/bundles/thememapperbundle.js,
I have put the resulting files in
src/plone.app.theming/src/plone/app/theming/browser/resources and I load
them from my template:
https://github.com/plone/plone.app.theming/blob/integrate-theme-editor/src/plone/app/theming/browser/mapper.pt#L32

But in that case the editor is broken, I get an error in
++resource++plone.js in the part corresponding to the tree pattern.
I guess that's because the tree pattern is part of the plone bundle but as
it is also a dependency of filemanager, it is also in thememapper bundle
and it makes a conflict.

Does anybody know what is the right solution?

Thanks,

Eric

[Nathan Van Gheem]

The most simple way here is to just create a grunt task in mockup to build
your pattern. This is what is done for things like resource registry:
https://github.com/plone/mockup/blob/master/mockup/Gruntfile.js -- you're
basically just registering a "bundle" which is just a definition of
requirejs requirements and a registry scan on dom load:
https://github.com/plone/mockup/blob/master/mockup/js/bundles/resourceregistry.js

Also, build your css file from less with requirements from the pattern:
https://github.com/plone/mockup/blob/master/mockup/less/resourceregistry.less

Then, just copy the files over and include them in the control panel
template.


-Nathan

Post by Eric Bréhault
Hello,
As I've mentionned at the last Framework team meeting, my changes to fix
- the backend is implemented in plone.resourceeditor (I have just merged
my changes in master).
- I have fixed the 2 involved patterns (filemanager and thememapper)
during (and after) the Bristol sprint (merged in master too since few
months)
Now, I want to make those 2 patterns available in plone.app.theming pages
properly. So I need to bundle them.
I have first tried to create a local mockup folder in plone.app.theming
resolved in less files, and different path issues...).
So I decided to just copy the actual mockup folder sources (from
https://github.com/plone/mockup) into plone.app.theming/mockup, and work
from there.
It worked better.
https://github.com/plone/plone.app.theming/tree/integrate-theme-editor
https://github.com/plone/plone.app.theming/blob/integrate-theme-editor/mockup/js/bundles/plone.js#L19
If I generate the Plone bundle and put the results in Products.CMFPlone,
the theming editor works just fine.
But of course, we do not want those 2 extra patterns to be part of our
regular plone bundle.
https://github.com/plone/plone.app.theming/blob/integrate-theme-editor/mockup/js/bundles/thememapperbundle.js,
I have put the resulting files in
src/plone.app.theming/src/plone/app/theming/browser/resources and I load
https://github.com/plone/plone.app.theming/blob/integrate-theme-editor/src/plone/app/theming/browser/mapper.pt#L32
But in that case the editor is broken, I get an error in
++resource++plone.js in the part corresponding to the tree pattern.
I guess that's because the tree pattern is part of the plone bundle but as
it is also a dependency of filemanager, it is also in thememapper bundle
and it makes a conflict.
Does anybody know what is the right solution?
Thanks,
Eric
_______________________________________________
Framework-Team mailing list
https://lists.plone.org/mailman/listinfo/plone-framework-team

[Eric Bréhault]

Yes that's what I did:
https://github.com/plone/plone.app.theming/blob/integrate-theme-editor/mockup/js/bundles/thememapperbundle.js

I am realizing just now that it is actually working when my resources
registry is not in development mode :)

I do not know why my bundle produces a conflict when we are in development
mode, I will investigate, but it is probably acceptable for a beta version.

Eric

Post by Nathan Van Gheem
The most simple way here is to just create a grunt task in mockup to build
https://github.com/plone/mockup/blob/master/mockup/Gruntfile.js -- you're
basically just registering a "bundle" which is just a definition of
https://github.com/plone/mockup/blob/master/mockup/js/bundles/resourceregistry.js
https://github.com/plone/mockup/blob/master/mockup/less/resourceregistry.less
Then, just copy the files over and include them in the control panel
template.
-Nathan

Post by Eric Bréhault
Hello,
As I've mentionned at the last Framework team meeting, my changes to fix
- the backend is implemented in plone.resourceeditor (I have just merged
my changes in master).
- I have fixed the 2 involved patterns (filemanager and thememapper)
during (and after) the Bristol sprint (merged in master too since few
months)
Now, I want to make those 2 patterns available in plone.app.theming pages
properly. So I need to bundle them.
I have first tried to create a local mockup folder in plone.app.theming
resolved in less files, and different path issues...).
So I decided to just copy the actual mockup folder sources (from
https://github.com/plone/mockup) into plone.app.theming/mockup, and work
from there.
It worked better.
https://github.com/plone/plone.app.theming/tree/integrate-theme-editor
https://github.com/plone/plone.app.theming/blob/integrate-theme-editor/mockup/js/bundles/plone.js#L19
If I generate the Plone bundle and put the results in Products.CMFPlone,
the theming editor works just fine.
But of course, we do not want those 2 extra patterns to be part of our
regular plone bundle.
https://github.com/plone/plone.app.theming/blob/integrate-theme-editor/mockup/js/bundles/thememapperbundle.js,
I have put the resulting files in
src/plone.app.theming/src/plone/app/theming/browser/resources and I load
https://github.com/plone/plone.app.theming/blob/integrate-theme-editor/src/plone/app/theming/browser/mapper.pt#L32
But in that case the editor is broken, I get an error in
++resource++plone.js in the part corresponding to the tree pattern.
I guess that's because the tree pattern is part of the plone bundle but
as it is also a dependency of filemanager, it is also in thememapper bundle
and it makes a conflict.
Does anybody know what is the right solution?
Thanks,
Eric
_______________________________________________
Framework-Team mailing list
https://lists.plone.org/mailman/listinfo/plone-framework-team

--
Nathan Van Gheem
Solutions Architect
Wildcard Corp