How to warp nested react component in pynecone?

[forhonourlx]

Describe Hi Pynecone Team, I am trying to warp a code editor, and found a CodeMirror6 component '@uiw/react-codemirror' could be integrated. https://github.com/uiwjs/react-codemirror The react usage example:

import React from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';   //Need a nested component...

function App() {
  const onChange = React.useCallback((value, viewUpdate) => {
    console.log('value:', value);
  }, []);
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      extensions={[javascript({ jsx: true })]}  //Need a nested component...
      onChange={onChange}
    />
  );
}
export default App;

To Reproduce The following code could successfully show a code editor without format. Q: How to implement a nested component of import { javascript } from '@codemirror/lang-javascript'; and extensions={[javascript({ jsx: true })]}? Thanks in advance. TestCodeEditor.py:

from pcconfig import config
import pynecone as pc
docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"

class CodeMirror6(pc.Component):
    library = "@uiw/react-codemirror"
    tag = "CodeMirror6"
    value: pc.Var[str]
    theme: pc.Var[str] = "dark"
    height: pc.Var[str] = "200px"
    extensions = []

    def _get_imports(self):
        return {}
    def _get_custom_code(self) -> str:
        return '''
import CodeMirror6 from '@uiw/react-codemirror';
'''
code_mirror6 = CodeMirror6.create

py_eg = """def fib(n):
    if n <= 1:
        return n
    else:
        return(fib(n-1) + fib(n-2))
"""

class State(pc.State):
    """The app state."""
    pass

def index() -> pc.Component:
    return pc.center(
        pc.vstack(
            pc.code_block(
                py_eg,
                theme="dark",
                language="python",
                show_line_numbers=True,
            ),
            ##################
            pc.container(
                pc.center(pc.text("container here"),),
                code_mirror6(
                    value=py_eg,
                    theme="dark",
                    height="200px"
                    # extensions=[code_mirror6_ext0(language="python")]
                ),
                ###
                width='100%',
            ),

            ##################
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )

# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()

pcconfig.py:

import pynecone as pc

config = pc.Config(
    app_name="TestCodeBlock",
    db_url="sqlite:///pynecone.db",
    env=pc.Env.DEV,
    frontend_packages=["react-syntax-highlighter", "@uiw/react-codemirror",],
)

Specifics (please complete the following information):

• Python Version: 3.10
• Pynecone Version: 0.1.19
• OS: Windows
• Browser (Optional): EDGE

[forhonourlx]

Like issue #741 @masenf mentioned, the following code solved some extent of the nested component. @picklelo @Alek99

    def _get_custom_code(self) -> str:
        return '''
import CodeMirror6 from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { python } from '@codemirror/lang-python';
'''

                code_mirror6(
                    # value=py_eg,
                    value=pc.Var.create('`'+py_eg+'`', is_local=False),
                    theme="dark",
                    height="200px",
                    extensions=pc.Var.create('[python(), javascript({ jsx:true })]', is_local=False),
                ),

from pcconfig import config
import pynecone as pc

docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"

class CodeMirror6(pc.Component):
    library = "@uiw/react-codemirror"
    tag = "CodeMirror6"
    theme: pc.Var[str] = "dark"
    height: pc.Var[str] = "200px"
    value: pc.Var[str]
    extensions: pc.Var[str]

    def _get_imports(self):
        return {}
    def _get_custom_code(self) -> str:
        return '''
import CodeMirror6 from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { python } from '@codemirror/lang-python';
'''
code_mirror6 = CodeMirror6.create

py_eg = """def fib(n):
    if n <= 1:
        return n
    else:
        return(fib(n-1) + fib(n-2))
"""

class State(pc.State):
    """The app state."""
    pass

def index() -> pc.Component:
    return pc.center(
        pc.vstack(
            pc.code_block(
                py_eg,
                theme="dark",
                language="python",
                show_line_numbers=True,
            ),
            ##################
            pc.container(
                pc.center(pc.text("container here"),),
                code_mirror6(
                    # value=py_eg,
                    value=pc.Var.create('`'+py_eg+'`', is_local=False),
                    theme="dark",
                    height="200px",
                    extensions=pc.Var.create('[python(), javascript({ jsx:true })]', is_local=False),
                ),
                ###
                width='100%',
            ),

            ##################
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )

# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()

[masenf]

This looks to be working okay at this point. Please reopen if there is further request for the team.