How to use the "code" "javascript" prop type in code components?

Developer Support
1

Hi Guys,
I am wondering what’s the usecase of the type: “code” and lang: “javascript” property in Code Component API. I tried using it but the value is stringified. What’s the recommended way to deserialize it?

2

Hey Asim, I am using it this way:

PLASMIC.registerComponent(ScriptContainer, {
  name: "ScriptContainer",
  displayName: "Script",
  props: {
    code: {
      type: "code",
      lang: "javascript",
      defaultValue: "",
    },
    src: "string",
  },
});

import Script from "next/script";

export function ScriptContainer({ code, src }) {
  return (
    <>
      {src !== "" && src !== undefined ? (
        <Script 
          id={`script-${Math.floor(Math.random() * 100000)}`}
          src={src}
          strategy="afterInteractive"
         />
      ) : (
        <Script
          id={`script-${Math.floor(Math.random() * 100000)}`}
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: code,
          }}
        />
      )}
    </>
  );
}
3

Thanks @injured_landfowl
I was thinking more in a way to use it inside react component as arbitrary chunk of code.

For example, I would expose onClick function to studio and user can define an onClick over there and they will have access to Component state

4

Yeah! You can definitely do that as well, I think it would just involve eval-ing the code - but the complexity is likely in app-specific concerns, such as what variables you want to introduce into scope, etc…

5

Yeah, I tried considering it but I was thinking of all the subtleties that comes along with eval regarding security.
and also if we will have to eval it then what would be the main differences between a normal string/object prop and the new code property.

Is there any other usages in the studio, as I have seen there is a Custom Code Expression option under Set Visibility I wonder how can we use that and what execution context apply over there.

6

There’s no difference in that they’re both a string, the main difference is in the input UI for the user—so the code input actually gives you a proper monaco editor with syntax highlighting set to the specified language, etc.

7

Oh! That custom code expression for visibility is a hidden feature :sweat_smile:

8

But basically we’ll be adding the ability to set expressions for any prop, for visibility, and for repetition