feat(v2): Add @theme-init components to user theme

[edno]

Motivation

Swizzled components currently do not have access to @theme-init components as it has been introduced in PR#2464 for Docusaurus components.

Having access to initial theme components allows overriding default components without having to rewrite the entire component.

This PR extend the initial PR for providing access to @theme-init components for custom components.

The point has been raised on the Discord channel #docusaurus-2-dogfooding.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Tested with a local instance and a custom code block:

import React from 'react';
import CodeBlock from '@theme-init/CodeBlock'; // access to initial theme Codeblock

const TryQueryLink = ({ gql, text }) => {
  const graphiQLPath = "/graphiql?query=";
  const encodedQuery = encodeURIComponent(gql || "");
  return <a href={`${graphiQLPath}${encodedQuery}`}>{text}</a>;
}

const graphiQLCodeBlock = (Component) => {
  const WrappedComponent = (props) => {
    let tryMe;
    const language = props.className && props.className.replace(/language-/, '') || "";
    if (props.withgraphiql && language == "graphql") {
      const match = props.metastring && props.metastring.match(/withgraphiql/, RegExp.$1);
      tryMe = <TryQueryLink
 gql={props.children} text="Try Query"/>;
    }

    return <>{tryMe}<Component {...props}/></>
  };

  return WrappedComponent;
};

export default graphiQLCodeBlock(CodeBlock);

Related PRs

• refactor(v2): add @theme-init alias to give access to initial components #2464: refactor(v2): add @theme-init alias to give access to initial components

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built without sensitive environment variables with commit 4a21e1f

https://deploy-preview-3485--docusaurus-2.netlify.app

[lex111]

Let's create a separate function for this purpose to avoid code duplicating?

[edno]

Let's create a separate function for this purpose to avoid code duplicating?

@lex111 - I've put the full iterator logic into a separate function.

[slorber]

thanks, LGTM

[slorber]

Hi @edno

I've tried to write some doc for these aliases here #3502, I'd appreciate a review to see if the doc make sense for you.

https://deploy-preview-3502--docusaurus-2.netlify.app/classic/docs/using-themes#wrapping-theme-components

[edno]

Hi @slorber

The documentation looks good to me. I even learn something new with @theme-original. 😁

[slorber]

thanks :)