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)

2 Likes
2

This seems interesting, but I don't fully understand you question. Are you basically asking how you can get tailwind visible in the designer? If so, that would be very cool!

3

No I actually already did all of it a different way

The question was targeting how leveraging a dedicated DesignerComponent could have it return different browser resources than the perspective session version of the component.

In the example of tailwind, it would have been to. Perform JIT compilation in the designer vs precompiled tailwind in the perspective client.

Regarding the module, I already wrote it and it’s being used in our design layer for now. Had some performance issues in a pre-production environment I need to solve before making it public

3 Likes