How to extend Venia theme rather than overriding it

Question

In the latest version of PWA Studio most Venia components is separated to UI library.

See the git commit: https://github.com/magento/pwa-studio/commit/fa0a4c9b45757c272f6b745c546e8b61b1da40db

What is the good approach to extend the venia theme ?

I have had a look at fallback studio but it seems out of date with the latest version https://github.com/Jordaneisenburger/fallback-studio

Answer 1

With the most current work on the develop branch you now have a folder called venia-concept, this is where all your custom work will go. Similar to a theme, but not exactly the same.

The pwa app is pointing to the index.js file in venia-concept as it's entry point. The way you use this is to replace the call to app from venia-ui to venia-concept. You can just copy the whole App folder into venia-concept and update the index.js file like such:

import App, { AppContextProvider } from './components/App';

This now points to an app file that you have copied over.

pwa-studio/packages/venia-concept/src/components/App/app.js

You will need to update the import statements along the way as you add in more components to override. So in your app file you will have something like this:

import React, { Fragment, useCallback, useEffect, useMemo } from 'react';
import { array, bool, func, shape, string } from 'prop-types';

import { HeadProvider, Title } from '@magento/venia-ui/lib/components/Head';
import Main from '../Main';
import Mask from '@magento/venia-ui/lib/components/Mask';
import MiniCart from '../MiniCart';
import Navigation from '../Navigation';
import renderRoutes from './renderRoutes';
import errorRecord from '@magento/peregrine/lib/util/createErrorRecord';
import ToastContainer from '@magento/venia-ui/lib/components/ToastContainer';
import Icon from '@magento/venia-ui/lib/components/Icon';

You can see that i'm now pointing to the local copy of Minicart in this file, it's no longer pointing to venia-ui. In case where you want to point to the core file, not your override, you use import Mask from '@magento/venia-ui/lib/components/Mask';

From here you can add in more and more components as you customize your shop.