Code component features: new prop types, state, and style sections

Announcements
1

<!channel> Just launched a bunch of new stuff to super charge your code components! https://plasmic.substack.com/p/stateful-code-components-and-new

Now you’ll be able to:
• Expose state from your code components, so they act and feel like Plasmic-built components with state!
• Registering “class” prop type, which allows users to style inner parts of your code component, not just the root!
• Registering “array” and “object” prop types with a schema, so users can configure them via a form instead of writing a JSON blob :sweat_smile:
• Registering “rich text” and “color” prop types
• Controlling what style sections show up on the right pane for your code component
Check them out and let us know what you think! :sunglasses:

You’ll want to upgrade to the latest @plasmicapp/loader-* or @plasmicapp/react-web to be able to register these props types.

(Note that in general, to avoid duplicate dependencies, you should only have either @plasmicapp/react-web or one of @plasmicapp/loader-* in your package.json. If you’re a codegen user, you should remove @plasmicapp/host from your package.json and import from @plasmicapp/react-web/lib/host instead).

2

Also featuring an awesome video by @verbal_sparrow :smile:

3

I feel like I need a whole month learning to adapt to these new features :sweat_smile:

4

wow wee

5

can we expose color props to plasmic components? or just code?

6

ah good question… right now there’s no great way to make use of a color prop from a plasmic component, as styling doesn’t support dynamic expressions yet (short of using the style attribute trick)

7

what’s the style attribute trick?

8

adding an HTMLAttribute for style, and using dynamic expression that evaluates to a React.CSSProperties object

9

Chung Wu is the true hacker :trophy:

10

Great!

(Note that in general, to avoid duplicate dependencies, you should only have either @plasmicapp/react-web or one of @plasmicapp/loader-* in your package.json. If you’re a codegen user, you should remove @plasmicapp/host from your package.json and import from @plasmicapp/react-web/lib/host instead).
Our codebase uses both codegen and code components… What should we import?

11

you should use @plasmicapp/react-web. Everything you used to import from @plasmicapp/host can be imported from @plasmicapp/react-web/lib/host

12

@chungwu where do we now find updated import paths?
I.e. import { PlasmicCanvasHost } from '@plasmicapp/loader-react'; no longer works, and replacing it with the react-web or react-web/list/host does not work…

13

hmm it should be import { PlasmicCanvasHost } from '@plasmicapp/react-web/lib/host'; what version of react-web do you have?

14

“@plasmicapp/data-sources-context”: “^0.1.7”,
“@plasmicapp/react-web”: “^0.2.180”,
“@plasmicpkgs/plasmic-basic-components”: “^0.0.128”,

15

├── @plasmicapp/cli@0.1.215
├── @plasmicapp/data-sources-context@0.1.7
├── @plasmicapp/react-web@0.2.180
├── @plasmicpkgs/plasmic-basic-components@0.0.128

16

export ‘initPlasmicLoader’ (imported as ‘initPlasmicLoader’) was not found in ‘@plasmicapp/react-web/lib/host’ (possible exports: DataContext, DataCtxReader, DataProvider, GlobalActionsContext, GlobalActionsProvider, PageParamsProvider, PlasmicCanvasContext, PlasmicCanvasHost, applySelector, mkMetaName, mkMetaValue, registerComponent, registerGlobalContext, registerToken, registerTrait, repeatedElement, unstable_registerFetcher, useDataEnv, useGlobalActions, usePlasmicCanvasContext, useSelector, useSelectors)

17

hmm you’re using codegen right? you shouldn’t need initPlasmicLoader

18

I am using both :slightly_smiling_face:

19

I export using codegen and then use them as part of code-components that I host back into plasmic :slightly_smiling_face:

20

@rear_vole that is de way :smirk: