Updates for Mockup integration. #2112

thet · 2021-01-11T11:36:40Z

This is a WIP.

Changes:

See commits.

~~Change root imports to @plone/volto.~~
Replace all ~ root imports with the @plone/volto alias and remove related dev dependencies.
This change allows Volto to be defined as a importable module dependency in another library where the root is different.

thet · 2021-01-11T11:42:09Z

@sneridagh Not sure if the change from root imports ~ to @plone/volto alias import is acceptable or has any side effects. But I think it also improves consistency as the alias for @plone/volto is also used throughout the code and there should not be two different ways to import relative from the root...

tiberiuichim · 2021-01-11T12:24:29Z

@thet: the ~ root import alias is needed for Volto projects. When Volto imports from ~/config it actually allows projects to inject their own configuration in that config. This could be reworked, but it's how things work right now. It would require changing all existing Volto projects and a rework of the configuration infrastructure.

tiberiuichim · 2021-01-11T12:28:39Z

I think it might be possible to allow projects to re-alias the plone/volto/config and use the alternative alias @plone/volto-original' to import the "original". Could you give it a test for that?

sneridagh · 2021-01-11T15:18:46Z

Hey @thet !
Unfortunately, the ~ "hack" via the babel-root-import plugin is required for Volto and the Volto projects to work, and it's "corner stone" of the extensibility and configuration story. We cannot just get rid of it. The tests are passing because they just use the core ones, without taking the project settings into account, maybe we can write a test in the project that checks the extensibility story.

Anyways, I think that you don't need to get rid of this in the Volto source, but adapt your build to play with this constraint. You can create a "config" module like the Volto projects do:

https://github.com/plone/volto/blob/master/packages/generator-volto/generators/app/templates/src/config.js

and comply with the Volto constraint easily from your code. As a bonus, you'll be able to modify the config if you need it from Mockup (if required).

As said, I'm interested as well in see this work, so I'm open to do a call and discuss your approach and what might be required to overcome all the blockers. What do you think?

pnicolli · 2021-01-11T18:04:58Z

This change allows Volto to be defined as a importable module dependency in another library where the root is different.

Probably a better solution to this would be to have volto components as a separate library. Because that's what I understood we could need to use in a project that's not a Volto project, am I right?

sneridagh · 2021-01-11T19:18:21Z

The Contents component might be the only "app" by itself inside Volto. I agree that we could be able to reuse that app outside Volto. I always imagined to pack it in an Electron app, use it as a desktop app, never had time to implement it. Can you imagine? It would be like the old webdav explorer... drag and drop files in and out....

We could extract the Contents component out, although it will still depend on the actions and reducers, and the API middleware. True, we can do it anyways (see the Storybook branch) and instantiate non-Redux-wired components (you have to export them first, as named exports) then re-wire it in Volto, or if you provide by yourself the required props use it on your own. However, I don't think it's what Johannes is looking for.

Also, I don't know if slicing Volto we will gain something... see current Plone. We wanted to reduce the number of packages in the last years, just because we sliced it too much... Testing, deployability, version management... all gets more complex when you have the components distributed. My gut feeling is that we should avoid it unless we have a huge win on the other side.

However, right now we cannot escape the tight entanglement that all components inside Volto have. Although the Contents component itself does not depend on the configuration, the Redux API middleware, actions, reducers it uses do, being the main culprit the "apiPath" setting.

thet · 2021-01-11T20:31:19Z

@sneridagh @tiberiuichim @pnicolli thanks for the helpful comments!

I feared that the root import trick is doing more than I was able to see. I'll try to work around that. Maybe just adding an alias in Mockup's webpack config for "~" which points to the Volto source will do it...

Having the components in seperate libraries would help for reusability. I do totally understand the arguments against it too.
There are also other components which would be interesting to reuse, like the recurrence widget or the reference browser - but currently that soon come to it's limits when it's tightly integrated with the Volto UI.

I'd love to fave a call to discuss this more. I think I'll first need to get my fingers dirty a bit more. Let's find a slot, maybe sometime fridays?

tiberiuichim · 2021-01-11T20:33:51Z

The home-grown form library in Volto could benefit from being exposed as a separate package, though there are similar form libraries "out there". For the form library to be really useful, it would have to also provide integration with the widgets, and I can imagine that you won't get very far with widgets before they need tight Volto integration.

It's easy to integrate focused third-party libraries into other systems (Volto or Plone). I've asked myself the same questions recently, how to develop systems that run on both "plain React" and Volto. I've decided to develop that component standalone and then provide Volto integration. It may not be ideal, but it will be sane for the current situation.

thet · 2021-01-11T20:34:27Z

Updated the PR description with a link to the Mockup branch integrating Volto.

sneridagh · 2021-02-18T09:21:06Z

@thet maybe you are not aware of it, but we are moving to a more sane, non-import-based configuration. It's already merged in master, we are in alpha phase now (which should be short).

Take a look at the migration guide, how it works now (it's using a centralised singleton instead) which might be easier to integrate in Mockup (if you provide a few defaults to it).

https://docs.voltocms.com/upgrade-guide/#upgrading-to-volto-12xx

Hope this helps!

sneridagh · 2021-05-13T08:13:28Z

@thet wondering if you had the chance to try it using Volto 12. As said, now with the new configuration registry I think all the problems you had will go away.

I don't know if you know that we are also working in the Storybook of Volto too (although not completed, we try to add any new component there), I also thought that in fact, what we are doing in the Storybook is what you want to accomplish. So Storybook is an external app with its own build process (that you can extend to match your own Babel requirements) that gets your components in isolation and puts them nicely in the app.

You can take a look at it here: https://docs.voltocms.com/storybook/

Hope this helps!

thet · 2021-05-17T09:08:04Z

@sneridagh that sounds very good, thanks for the update.
unfortunately i hadn't a chance to continue on that. I think for the first step we need to provide all old mockup patterns, upgraded to es6 for compatibility.
however, integrating volto in mockup would be awesome and i'll try out as soon as i find time!

thet · 2021-05-23T13:51:04Z

Update: I'm trying to integrate the Contents component to replace Mockup's structure pattern.

I started over without the need of changing the root imports (except for one occurrence). This is not necessary, as the "babel-plugin-root-import" can be configured for root-imports depending on specific paths.

This is the Volto integration part in mockup: plone/mockup#1037

I'm almost there - currently the integration fails with state.router being undefined.

thet · 2021-05-23T14:12:26Z

src/store.js

@@ -5,7 +5,7 @@ import { connectRouter, routerMiddleware } from 'connected-react-router';
 import { save, load } from 'redux-localstorage-simple';

 import config from '@plone/volto/registry';
-import reducers from '~/reducers';
+import reducers from '@plone/volto/reducers';


instead of doing this i can also add an ~/reducers alias in Mockup's webpack.

@thet: I think you should add the alias in mockup. The problem is that Volto projects (which are the ~ root when Volto runs as a bootstrapped project) still have the reducers folder inside them. See https://github.com/plone/volto/tree/master/packages/generator-volto/generators/app/templates/src/reducers . IMHO it would be better if we'd somehow get rid of that root import, too.

…en and loadable

davisagli · 2023-09-08T05:35:51Z

@thet @sneridagh Is any of this still relevant?

sneridagh · 2023-09-08T07:12:08Z

I'd say let's close it. The integration with Mockup should come in the times to come through @plone/client instead of using this approach.

sneridagh · 2023-09-08T07:12:31Z

@thet just in case you don't realised yet: https://github.com/plone/plone.restapi-client

thet · 2023-09-08T11:38:01Z

@davisagli yes, this is PR is experimental and not the right approach. Looking forward for a @plone/client integration into Mockup!
@sneridagh Very nice, thanks for the head up.

thet force-pushed the thet-mockup branch from 45142c5 to 6774414 Compare January 11, 2021 11:38

thet added 3 commits May 23, 2021 13:56

Remove unused dependency @babel/plugin-proposal-json-strings

d400634

Upgrade react-share which doesn't depend on outdated babel-runtime.

5b1a381

Fix import which isn't handled by babel-plugin-root-import.

848f204

thet force-pushed the thet-mockup branch from 6774414 to 848f204 Compare May 23, 2021 13:43

thet commented May 23, 2021

View reviewed changes

TEMP: fixes to get volto in mockup running without authentication tok…

48329dc

…en and loadable

sneridagh closed this Sep 8, 2023

thet mentioned this pull request Dec 7, 2022

[WIP] Proof of concept: Use Volto content browser plone/mockup#1037

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updates for Mockup integration. #2112

Updates for Mockup integration. #2112

thet commented Jan 11, 2021 •

edited

Loading

thet commented Jan 11, 2021 •

edited

Loading

tiberiuichim commented Jan 11, 2021

tiberiuichim commented Jan 11, 2021 •

edited

Loading

sneridagh commented Jan 11, 2021

pnicolli commented Jan 11, 2021

sneridagh commented Jan 11, 2021

thet commented Jan 11, 2021

tiberiuichim commented Jan 11, 2021

thet commented Jan 11, 2021

sneridagh commented Feb 18, 2021 •

edited

Loading

sneridagh commented May 13, 2021

thet commented May 17, 2021

thet commented May 23, 2021 •

edited

Loading

thet May 23, 2021

tiberiuichim May 23, 2021 •

edited

Loading

davisagli commented Sep 8, 2023

sneridagh commented Sep 8, 2023

sneridagh commented Sep 8, 2023

thet commented Sep 8, 2023

Updates for Mockup integration. #2112

Updates for Mockup integration. #2112

Conversation

thet commented Jan 11, 2021 • edited Loading

thet commented Jan 11, 2021 • edited Loading

tiberiuichim commented Jan 11, 2021

tiberiuichim commented Jan 11, 2021 • edited Loading

sneridagh commented Jan 11, 2021

pnicolli commented Jan 11, 2021

sneridagh commented Jan 11, 2021

thet commented Jan 11, 2021

tiberiuichim commented Jan 11, 2021

thet commented Jan 11, 2021

sneridagh commented Feb 18, 2021 • edited Loading

sneridagh commented May 13, 2021

thet commented May 17, 2021

thet commented May 23, 2021 • edited Loading

thet May 23, 2021

Choose a reason for hiding this comment

tiberiuichim May 23, 2021 • edited Loading

Choose a reason for hiding this comment

davisagli commented Sep 8, 2023

sneridagh commented Sep 8, 2023

sneridagh commented Sep 8, 2023

thet commented Sep 8, 2023

thet commented Jan 11, 2021 •

edited

Loading

thet commented Jan 11, 2021 •

edited

Loading

tiberiuichim commented Jan 11, 2021 •

edited

Loading

sneridagh commented Feb 18, 2021 •

edited

Loading

thet commented May 23, 2021 •

edited

Loading

tiberiuichim May 23, 2021 •

edited

Loading