Different Browser Resources in Designer vs Perspective Client

Module Development
1

I am trying to do some stuff to make the tailwind CSS libraries more accessible in Ignition, however to do so I need to be able to load the full CSS library into the designer scope, but a lighter-weight compiled version into the Perspective client scope.

I have already got my two different versions compiled and are accessible via /data/perspective-tailwindcss/tailwind-full.css and /data/perspective-tailwindcss/tailwind-compiled.css

I know if I have a Browser resource on a component that gets registered, even if there is no palette entry the resources show up, however does that only apply to Gateway scoped resources and not Designer scoped ones?

I am registering the following two descriptors:

package dev.kgamble.perspective.tailwindcss.common.components;

import com.inductiveautomation.perspective.common.api.ComponentDescriptor;
import com.inductiveautomation.perspective.common.api.ComponentDescriptorImpl;
import dev.kgamble.perspective.tailwindcss.common.Constants;
import java.util.Set;
import com.inductiveautomation.perspective.common.api.BrowserResource;

public class DesignerTailwindImporter {
    private static final Set<BrowserResource> BROWSER_RESOURCES = Set.of(
                new BrowserResource(
                                "tailwind-css",
                                "/data/" + Constants.MODULE_ID + "/tailwind-full.css",
                                BrowserResource.ResourceType.CSS));

    public static final ComponentDescriptor DESCRIPTOR = ComponentDescriptorImpl.ComponentBuilder.newBuilder()
                .setId(Constants.COMPONENT_ID)
                .setModuleId(Constants.MODULE_ID)
                .setName("Tailwind CSS Designer Importer")
                .setResources(BROWSER_RESOURCES)
                .build();

}

and

package dev.kgamble.perspective.tailwindcss.common.components;

import com.inductiveautomation.perspective.common.api.ComponentDescriptor;
import com.inductiveautomation.perspective.common.api.ComponentDescriptorImpl;
import dev.kgamble.perspective.tailwindcss.common.Constants;
import java.util.Set;
import com.inductiveautomation.perspective.common.api.BrowserResource;

public class GatewayTailwindImporter {
    private static final Set<BrowserResource> BROWSER_RESOURCES = Set.of(
                new BrowserResource(
                                "tailwind-css",
                                "/data/" + Constants.MODULE_ID + "/tailwind-compiled.css",
                                        BrowserResource.ResourceType.CSS));

    public static final ComponentDescriptor DESCRIPTOR = ComponentDescriptorImpl.ComponentBuilder.newBuilder()
                .setId(Constants.COMPONENT_ID)
                .setModuleId(Constants.MODULE_ID)
                .setName("Tailwind CSS Gateway Importer")
                .setResources(BROWSER_RESOURCES)
                .build();
}

With the goal that the full file is present in the designer, but for some reason in the designer it only gets the tailwind-compiled.css resource. If I add palette details to the Designer Descriptor then I see that in the palette, so the Descriptor itself is getting uniquely registered in each scope. However the resources dont seem to follow.

Do browser resources being registered in a Gateway based PerspectiveContext get treated differently than in the PerspectiveDesignerInterface? If that is the case, is there any way to get unique Browser resources for a designer version of a resource vs a client one, and all without ever adding a component onto an actual page (Which works for the gateway scoped component)

1 Like