feat(preview): consume client

[danilowoz]

  Open in CodeSandbox Web Editor | VS Code

Imperatively retrieve the Sandpack client from a SandpackPreview:

const SandpackClient: React.FC = () => {
  const { sandpack } = useSandpack();
  const previewRef = React.useRef<SandpackPreviewRef>();

  React.useEffect(() => {
    const client = previewRef.current?.getClient();
    const clientId = previewRef.current?.clientId;

    if (client && clientId) {
      console.log(client);
      console.log(sandpack.clients[clientId]);
    }
  }, [sandpack]);

  return <SandpackPreview ref={previewRef} />;
};

I agree that currently there is no way to get the current client id and the client instance from a preview component, and it might be too restrictive for a few cases. Although we already have available the list of all clients, currently I can't see a way to link a client from the list to a component, so hope that this new API makes it possible now.

Worth mentioning, that the SandpackClient will not be instantly available. Sandpack has its own rules to decide what is the "right" moment to initialize a SandpackClient from a preview component (autoron, initMode, client stack), which means that it's expected that getClient might return undefined and it's a valid state.

TODO

• Tests
• Documentation
• Storybook

Solves #423 @malerba118 does it make sense for you?

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7b4c3f8:

Sandbox	Source
Sandpack Blog Example 1	Configuration

[github-actions]

Size changes

sandpack-react

Total base (gzip)	Total current (gzip)	+/-
160 kb	161 kb	⚠️ +200 bytes (+0.12%)

Details

Dependency name / file	Base	Current	+/-
0	522 kb	522 kb	✅ 0 byte
main	455 kb	456 kb	⚠️ +516 bytes (+0.11%)
index.css	27 kb	27 kb	✅ 0 byte
@codesandbox/sandpack-react	70 kb	70 kb	⚠️ +238 bytes (+0.33%)
@code-hike/classer	1 kb	1 kb	✅ 0 byte
@codesandbox/sandpack-client	13 kb	13 kb	✅ 0 byte
@codemirror/state	35 kb	35 kb	✅ 0 byte
@codemirror/view	167 kb	167 kb	✅ 0 byte
@codemirror/closebrackets	6 kb	6 kb	✅ 0 byte
@codemirror/matchbrackets	4 kb	4 kb	✅ 0 byte
@codemirror/commands	24 kb	24 kb	✅ 0 byte
@codemirror/comment	5 kb	5 kb	✅ 0 byte
@codemirror/gutter	10 kb	10 kb	✅ 0 byte
@codemirror/highlight	12 kb	12 kb	⚠️ +154 bytes (+1.24%)
@codemirror/history	9 kb	9 kb	✅ 0 byte
@react-hook/intersection-observer	2 kb	2 kb	✅ 0 byte
@codemirror/lang-css	11 kb	11 kb	✅ 0 byte
@codemirror/lang-javascript	6 kb	6 kb	✅ 0 byte
@codemirror/lang-html	15 kb	15 kb	✅ 0 byte
@codemirror/text	13 kb	13 kb	✅ 0 byte
style-mod	3 kb	3 kb	✅ 0 byte
@codemirror/rangeset	16 kb	16 kb	✅ 0 byte
w3c-keyname	2 kb	2 kb	✅ 0 byte
@lezer/common	34 kb	34 kb	✅ 0 byte
@codemirror/language	19 kb	19 kb	⚠️ +507 bytes (+2.64%)
@react-hook/passive-layout-effect	191 bytes	191 bytes	✅ 0 byte
@lezer/css	9 kb	9 kb	✅ 0 byte
@lezer/html	12 kb	12 kb	✅ 0 byte
@lezer/javascript	54 kb	54 kb	✅ 0 byte
@codemirror/autocomplete	34 kb	34 kb	✅ 0 byte
@lezer/lr	31 kb	31 kb	✅ 0 byte
@codemirror/tooltip	14 kb	14 kb	✅ 0 byte
lodash.isequal	18 kb	18 kb	✅ 0 byte
codesandbox-import-utils	367 bytes	367 bytes	✅ 0 byte
react-devtools-inline	823 kb	823 kb	✅ 0 byte
webpack	487 bytes	487 bytes	✅ 0 byte
intersection-observer	13 kb	13 kb	✅ 0 byte
lz-string	9 kb	9 kb	✅ 0 byte
react-is	2 kb	2 kb	✅ 0 byte

sandpack-client

Total base (gzip)	Total current (gzip)	+/-
7 kb	7 kb	✅ 0 byte

Details

Dependency name / file	Base	Current	+/-
main	20 kb	20 kb	✅ 0 byte
@codesandbox/sandpack-client	11 kb	11 kb	✅ 0 byte
codesandbox-import-utils	3 kb	3 kb	✅ 0 byte
lodash.isequal	18 kb	18 kb	✅ 0 byte
webpack	487 bytes	487 bytes	✅ 0 byte

[malerba118]

@danilowoz

Sweet yeah, this looks like it'll work for what i intend to do.

Thanks for the quick turnaround!

[codebryo]

Hope the changes make sense. Good job Danilo