Global context API questions

Developer Support
1

I have question regarding the GlobalContext API.

  1. Does the registered context component wraps the ? OR
  2. Does it wrap each individual page?
    The question is in the context of Headless API.
2

I asked this question because same code for registeredGlobalContext works in CodeGen but not in Loader API project.

3

the wrapping happens at PlasmicRootProvider for the loader api

4

For some reason the Context isn’t working in Loader api. Do I need to configure something for that?

Scenario
Based on the documentation of Chakra UI. The App component should be wrapped in ChakraProvider component so the styles are applied properly.

I registered that component as a Global Context.

import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
import registerGlobalContext, {
  GlobalContextMeta,
} from '@plasmicapp/host/registerGlobalContext';

import { Registerable } from './registerable';

export { ChakraProvider };

export const chakraProviderMeta: GlobalContextMeta<ChakraProviderProps> = {
  name: 'ChakraProvider',
  displayName: 'Chakra Provider',
  props: {
    resetCSS: {
      type: 'boolean',
      defaultValue: true,
    },
    portalZIndex: {
      type: 'number',
      defaultValue: undefined,
    },
  },
  importPath: 'plasmic-chakra-ui-cc',
  importName: 'ChakraProvider',
};

export function registerChakraProvider(
  loader?: Registerable,
  customchakraProviderMeta?: GlobalContextMeta<ChakraProviderProps>
) {
  const doRegisterComponent: typeof registerGlobalContext = (...args) =>
    loader
      ? loader.registerGlobalContext(...args)
      : registerGlobalContext(...args);
  doRegisterComponent(
    ChakraProvider,
    customchakraProviderMeta ?? chakraProviderMeta
  );
}

It works perfectly fine in CodeGen but for some reason the styling breaks for Loader API which means the Global Context isn’t applied properly.

5

Hmm does it work in the artboard? Or is it broken there too?

6

It works in Artboard.

image.png
image.png1169×844 46.9 KB

7

In Preview Mode, only the heading styles are broken.

image.png
image.png1374×812 37.2 KB

8

Locally on Loader API. Chakra Styles are missing

image.png
image.png1918×1020 58 KB

9

The following error now occurs in CodeGen. It might helps.

This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:

TypeError: Cannot read property 'componentImportPath' of undefined

    at /mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:253:22
    at Array.forEach (<anonymous>)
    at replaceImports (/mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:160:23)
    at /mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:486:32
    at Generator.next (<anonymous>)
    at /mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:27:71
    at new Promise (<anonymous>)
    at __awaiter (/mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:23:12)
    at fixGlobalContextImportStatements (/mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:473:12)
    at Object.<anonymous> (/mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:356:9)
10

It does sync down the changes alongside the above error.

Also, the CodeGen styling is consistent with the preview mode. i.e heading styles are broken. Most probably, it’s related to third party library.

image.png
image.png1697×875 39.1 KB

11

For some reason, the plasmic cli is looking for a different UUID when syncing registered global context component :thinking_face:

// Searching for the following UUID
{ uuid: '5vYVImIQb7' }

// log of fixImportContext.codeComponentMetas
{
  metas: {
    bIaOvNJfMB: {
      id: 'bIaOvNJfMB',
      name: 'ChakraButton',
      componentImportPath: 'plasmic-chakra-ui-cc'
    },
    'NT-RGDSuwm': {
      id: 'NT-RGDSuwm',
      name: 'ChakraProviderWrapper',
      componentImportPath: 'plasmic-chakra-ui-cc'
    }
  }
}