How to import pages across projects?

Hey all!

I’m trying to import a page from one project to another.

I see mention in the docs that you can convert it to a component and import it (that worked), but I see no way to convert it back to a page within the imported project (or even edit the component from the imported project).

Any ideas?

Ok so I managed to import the top level components from the other project. It does seem that they become editable once the dependency is disconnected.

However, when importing the components, there’s a conflict between breakpoints. Both projects have a single breakpoint with the same width value.

When I import, I’m given the ability to override the main project’s breakpoints; if I choose yes, the parent project’s mobile variants go all funny. If I choose no, the imported components get broken in the same way.

Hi! Yes when you remove the imported project, we make a local copy of the imported components.

For breakpoints, it is a bit trickier right now. The imported project needs to use the same set of breakpoints as the main project. For that to happen, you may need yet another project that houses the set of breakpoints, and for both the main and the imported project to import from the breakpoints project and use the breakpoint project’s breakpoints. We should really make this easier when the breakpoint values match :thinking_face:

Thanks @chungwu.

So for an existing project, how can I transition this so that nothing breaks? Right now both projects already have identical breakpoints.

hmm it looks like right now when you detach the dependency from the main project, we should be trying to reuse the breakpoints in the main project, as long as the breakpoints match up exactly

@chungwu so I get this when trying to import:

But these are the breakpoints for the two projects

looks like it should work… when that modal pops up, click “Cancel” (we should word this better). And then you can make a copy of the component you want, and then detach the imported package.

That much works - but the mobile layout isn’t preserved when importing the component. Is this because of the plasmic host being localhost?

It won’t work until after you’ve detached the dependency actually

That is when we would merge the breakpoints from the two projects

ah. Ok trying that


@chungwu Hey Chung did you see anything on your end? Right now I’m kinda stuck and need to launch this page soon…and hopefully not rework it in the live project

Hi! We just pushed a fix; could you try the above again?

Sure thing! :+1:

Better messaging so far!

Ok so (mostly) good news!

  1. It imported without throwing an error
  2. The mobile view of the page looked wacky…UNTIL I disconnected the imported project
  3. Disconnecting made the mobile view fix itself.
    Other than some minor styling quirks this looks workable. :tada:I suspect the quirks are from converting the original page to a component so that I could import it in the parent project.

Is #2 because it’s trying to use the old breakpoints first (and they don’t exist in the parent project), then it starts using the parent’s breakpoints after disconnect?