ES6

[thet]

[ES6 refactoring, using webpack and babel. Built upon the MrTango/11tydocs branch. Depends on latest ES6yfied patternslib. Following the refactoring in https://github.com/patternslib/Patterns

yarn install
yarn build
yarn build:stats
npx webpack-bundle-analyzer stats.json
npx jest src/pat/autotoc

Current status:
Migrated patterns are uncommented in src/patterns.js. Currently there are autodoc, backdrop, contentloader and cookietrigger. A bundle can be built but no tests are migrated and no demos are tried in the browser.

Patterns

Put your name behind the pattern name to indicate that you are owrking on this pattern!

Status:
functional | tested | responsible

• [x] autotoc /thet
• [x] backdrop /thet
• [x] contentloader /thet
• [x] cookietrigger /thet
• [x] datatables /MrTango
• [x] eventedit /thet -> Removed. Was unused. A script in plone.app.event does the job currently.
• [ ] filemanager >> not used anymore in core, will not be migrated by us /MrTango
• [ ] formautofocus /fredvd /jan
• [x] formunloadalert /jmevissen
• [ ] inlinevalidation /thet
• [ ] livesearch /veritazx
• [x] markspeciallinks /yuri
• [x] modal /Gomez /petschki ES6 pat-modal fix #1068
• [x] moment /thet -> Replaced by pat-display-time from Patternslib
• [x] navigationmarker
• [x] passwordstrength /veritazx, yuri
• [x] pickadate >> pat-datetime-picker (patterslib)
• [x] preventdoublesubmit
• [x] querystring /petschki
• [ ] recurrence /thet
• [ ] relateditems /MrTango
• [x] select2 /thet
• [ ] sortable /talarias
• [ ] structure
• [ ] textareamimetypeselector
• [ ] texteditor /thet >> we will integrate: pat-code-editor (patternslib)
• [ ] thememapper >> needs update, editor only, but we will give up the Diazo rules builder
• [ ] tinymce / MrTango [ES6] TinyMCE / Image / Link - Plugins #1065
• [x] toggle /Gomez (Migrate toggle to es6 #1034)
• [x] toolbar /Gomez /agitator
• [x] tooltip /thet -> Replaced by pat-tooltip from Patternslib
• [ ] tree /MTango
• [ ] upload

Control Panels / other pattern usages

Using requirejs, should be converted into patterns inside mockup, see plone.app.portlets as an example.

• plone.app.portlets /MrTango
• plone.app.registry /MrTango
• plone.app.dexterity /thet
• plone.app.contentrules /MrTango /agitator
• plone.app.discussion /MrTango
• plone.schemaeditor
• Products.CMFPlone > browser > search.js
• plone.app.event JS

Addons to be migrated

Not a precondition to merge this branch but still necessary to fix

• plone.app.imagecropping
• collective.easyform
• plone.app.mosaic

Toolbar & Icons

Prepared markup updates using icon resolver for the toolbar pattern
https://github.com/plone/plone.app.contentmenu/tree/barceloneta-lts-svg-icons
https://github.com/plone/plone.app.layout/tree/barceloneta-lts-svg-icons
Toolbar icons are roughly defined in https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/profiles/default/registry/icons_toolbar.xml

More info

Sprint document from the "Plone 6 Classic UI: ES6 Sprint" from 2021-09-22: https://docs.google.com/document/d/1rX2tAeDC9eZzKycVDnJUf8guTQeA0G1aHSteQgVz_TU
Contains a "How to Develop" section.
Quick note: Use http://localhost:8000/dist/bundle.js in http://localhost:8080/Plone/@@resourceregistry-controlpanel for JavaScript to live-develop.

NOTE: Tests should be moved into the patterns itself, as done in https://github.com/patternslib/Patterns.
NOTE: Use a feature branch (es6-<feature/or-username>) based on the es6 branch, while working on a pattern and rebase it from time to time.
NOTE: 1 commit per pattern please. that way it's easier to track what was done.
NOTE: there will be a lot of force-pushes along the way, so for any contributions we need coordination. I'll do pulls before force-pushes.

/cc @MrTango

[thet]

Status: first test migrated and passing:

npx jest src/pat/autotoc

[fulv]

Regarding plone/Products.CMFPlone#3211, have you considered giving up the dependency on jQuery? Is jQuery still providing anything useful at the end of 2020?

[thet]

@fulv yes, I did. I try to get rid of it for every pattern I have to touch. But it would take quite an effort to get this done - it's still a core dependency for Patternslib.

[agitator]

update notes with infos for toolbar with icon resolver

[yurj]

Hi! What about addons which uses Patternslib, such as plone.formwidget.geolocation? Using es6, Patternslib should be available without installing plone.patternslib, thus It should work out of the box just removing the dependency to plone.patternslib?

[thet]

@yurj yes, plone.patternslib would not be necessary anymore - it's just available via ES6 imports - importing a pattern already makes it available.
Also in Plone < 6 Patternslib was a core dependency of Mockup - only the resources were not registered via the old resource registry.

For pat-leaflet - that one needs an update to ES6+ support, webpack and to provide a bundle based on the module federation technology. I have some ideas of improving pat-leaflet - which I wrote some years ago. Maybe that task can someone pick at the Buschenschanksprint.

Btw, @fredvd mentioned some problems with the current pat-leaflet - there will probably be some updates on pat-leaflet for Plone < 6 also be necessary.

[fredvd]

@thet @yurj I have collected my notes and created a separate issue for the issue I told about in Discord yesterday. I'd like to know if/how the pat-leaflet code from pat-leaflet flows into plone.patternslib 1.x for Plone 5.2 or that it's components are updated in plone.patternslib in another way.

Patternslib/pat-leaflet#17