React SWC Wrappers

I’m trying to implement the React SWC wrappers and I’m not quite getting the expected result.
I’ve adapted the React SWC Starter to fit my build process/UXP setup and I’m able to render SWC components but they’re not always loading all the styling (so far this only applies to buttons).
The starter works fine and renders components as expected, although it logs a load of unexpected end of JSON input warnings.
My version doesn’t log any warnings, but I get this error:

My version renders all the HTML and some of the styles - note that Divider and Switch render correctly, but buttons are missing borders/background colour, although they are rendering :hover styles:
spectrum

 <Theme theme="spectrum" scale="medium" color="light">
      <div className="flex flex-col">
        <div className="flex flex-row flex-wrap justify-content-evenly">
          <ActionButton toggles>
            <div slot="icon">💊</div>
            Action Button
          </ActionButton>

          <Divider
            size="m"
            vertical
            style={{ alignSelf: "stretch", height: "auto" }}
            className="mx-16"
          />

          <Button variant="accent" size="m">
            Button
          </Button>

          <Divider
            size="m"
            vertical
            style={{ alignSelf: "stretch", height: "auto" }}
            className="mx-16"
          />

          <Switch emphasized label="switch">
            Test switch
          </Switch>
        </div>
      </div>
    </Theme>

I’ve installed both the @swc-uxp-wrappers/link and @swc-react/link@version packages for each component, installed @swc-react/theme and @swc-react/utils, added the resolutions to package.json, imported and added alias:aliases to resolve in my Webpack config, and wrapped the components in <Theme>.

I’m at a bit of a loss as to why I’m only getting some of the styling and not all. My best guess is that it might be something to do with my Webpack CSS tooling? I build for SASS and include a utility class library:

[
  "style-loader",
  {
    loader: "css-loader",
    options: {
      sourceMap: true,
    },
  },
  {
    loader: "sass-loader",
    options: {
       sourceMap: true,
       sassOptions: {
         includePaths: [resolve("./node_modules/uniformcss")],
      },
    },
  },
 ]

The only other significant difference between my version and the React SWC Starter is how React is mounted - my version uses the method used in the React Starter, but I don’t really see how that would make a difference.

I’ve tested this in UXP 7.2 and 7.3.

Anyone got any ideas? I’m not looking forward to the prospect of rebuilding my plugin on top of the SWC one!

1 Like

Hi Timothy_Bennett
Can you please check if you have imported the stylings?

import "@spectrum-web-components/theme/theme-light.js";
import "@spectrum-web-components/theme/express/theme-light.js";
import "@spectrum-web-components/theme/scale-medium.js";
import "@spectrum-web-components/theme/express/scale-medium.js";

Also, the utils package should be installed from swc-uxp-wrappers
@swc-uxp-wrappers/utils

It would help us if you could share the App.js section where you are importing the respective components

I am already importing the styles as your example and I am importing utils from @swc-uxp-wrappers/utils (I wrote @swc-react/utils in error in my last post).
My component imports look like this:
import { ActionButton } from "@swc-react/action-button

Surely if I had the imports wrong then the HTML would not render?

In the webpack config do you have imported and defined aliases?

import { aliases } from "@swc-uxp-wrappers/utils";

resolve: {
     alias: aliases
}

Here we go, I’ve edited for brevity.

// package.json

{
  ...
  "dependencies": {
    "@swc-react/action-button": "^0.10.8-react.2993",
    "@swc-react/button": "^0.19.8-react.3029",
    "@swc-react/divider": "^0.6.6-react.3163",
    "@swc-react/switch": "^0.11.5-react.2993",
    "@swc-react/theme": "^0.14.8-react.2993",
    "@swc-uxp-wrappers/action-button": "^1.0.0",
    "@swc-uxp-wrappers/button": "^1.0.0",
    "@swc-uxp-wrappers/divider": "^1.0.0",
    "@swc-uxp-wrappers/switch": "^1.0.0",
    "@swc-uxp-wrappers/utils": "^1.0.0",
  },
  "resolutions": {
    "@swc-react/action-button": "0.10.8-react.2993",
    "@swc-react/button": "0.19.8-react.3029+c59ca07be",
    "@swc-react/divider": "0.6.6-react.3163",
    "@swc-react/switch": "0.11.5-react.2993",  
    "@spectrum-web-components/action-button": "0.8.7",
    "@spectrum-web-components/button": "0.19.8",
    "@spectrum-web-components/divider": "0.5.0",
    "@spectrum-web-components/theme": "0.14.8",
    "@spectrum-web-components/switch": "0.10.0",
  }
}
// webpack.config.js

import { aliases } from "@swc-uxp-wrappers/utils";

const config = {
  ...
  resolve: {
    ...
    alias: aliases,
  },
}
// index.js - main entrypoint where React is mounted.

import "@spectrum-web-components/theme/theme-light.js";
import "@spectrum-web-components/theme/theme-dark.js";
import "@spectrum-web-components/theme/express/theme-light.js";
import "@spectrum-web-components/theme/scale-medium.js";
import "@spectrum-web-components/theme/express/scale-medium.js";
import { Theme } from "@swc-react/theme";

const mainPanelController = new PanelController(
  () => (
    <StoreProvider store={store}>
      <Theme theme="spectrum" scale="medium" color="dark">
        <Main />
      </Theme>
    </StoreProvider>
  ), { ... }
);

For reference, PanelController above comes from the Adobe React Starter.

// GenericComponent.jsx

import React, { useState } from "react";

// Spectrum Web Components
import "@spectrum-web-components/theme/theme-light.js";
import "@spectrum-web-components/theme/theme-dark.js";
import "@spectrum-web-components/theme/express/theme-light.js";
import "@spectrum-web-components/theme/scale-medium.js";
import "@spectrum-web-components/theme/express/scale-medium.js";
import { Theme } from "@swc-react/theme";

import { Switch } from "@swc-react/switch";
import { Button } from "@swc-react/button";
import { ActionButton } from "@swc-react/action-button";
import { Divider } from "@swc-react/divider";

export const GenericComponent= () => {

  return (
    <Theme theme="spectrum" scale="medium" color="light">
      <div className="flex flex-col">
        <div className="flex flex-row flex-wrap justify-content-evenly">
          <ActionButton toggles>
            <div slot="icon">💊</div>
            Action Button
          </ActionButton>
          <Divider
            size="m"
            vertical
            style={{ alignSelf: "stretch", height: "auto" }}
            className="mx-16"
          />
          <Button variant="accent" size="m">
            Button
          </Button>
          <Divider
            size="m"
            vertical
            style={{ alignSelf: "stretch", height: "auto" }}
            className="mx-16"
          />
          <Switch emphasized label="switch">
            Test switch
          </Switch>
        </div>
      </div>
    </Theme>
  );
};

Console output on plugin load (the last two lines come from the entrypoints.setup create() method):

Rendered HTML:

Styles for ActionButton:

I’ve nailed it down to being the CSS utility class library that I’m using that is causing the issue.
If I don’t import it everything works as expected so I’m going try some tree shaking to see if I can eliminate the problem classes.
I’m hoping it’s just colour related classes causing the problem - I can live without them!
Otherwise it’s back to the drawing board and I guess continuing work on my own SASS utility class generator :triumph:

2 hours, 4 cups of tea, a couple of spliffs, and a new CSS utility library later not only have I got it all working, I’ve got even closer parity with Tailwind than I had before at a cost of a mere 8.5 KB :partying_face::tada:
I should try this coding during daylight hours more often!

2 Likes