Javascript module isn't generating css asset url

[George Christman <ge...@zigster.com>]

Hi, I upgraded to Tapestry 5.8.1 and I moved all my js, css and modules to
the webapp directory. I have a ckeditor module that is trying to load some
ckeditor css and image files. In older versions of tapestry I resolved this
with ClasspathAssetAliasManager, but that seems to be deprecated and no
longer functional. "configuration.add("ck", "META-INF/modules/vendor");".
My package structure is webapp/modules/editor.js
webapp/modules/vendor/ckeditor

My editor.js file looks like this.

requirejs.config({
    shim: {
        'ckeditor-jquery': ['jquery', 'ckeditor-core']
    },
    paths: {
        'ckeditor-core': 'vendor/ckeditor/ckeditor',
        'ckeditor-jquery': 'vendor/ckeditor/adapters/jquery'
    }
});
define(["jquery", "ckeditor-jquery"], function($) {

    init = function(spec) {
        $('#' + spec.id).ckeditor();
    };

    return init;
});

How is this achieved in 5.8?
-- 

George Christman



This e-mail may contain confidential, proprietary information on Zigster.
It is intended solely for the name recipient(s) listed above and should be
maintained in strictest confidence. If you are not the intended recipient,
you are hereby notified that any disclosure, copying, distribution, or use
of the information contained herein (including any reliance thereon) is
STRICTLY PROHIBITED. If you have received this e-mail in error, please
immediately notify the sender and delete this information from your
computer and destroy any related paper copies. Unless otherwise expressly
stated in the text of the e-mail, the addition of a typed name or initials
to this e-mail does not (i) evidence an intent to sign the e-mail, or (ii)
constitute either (a) signature or (b) consent to use electronic records or
signatures in place of a writing or a handwritten signature.

Re: Javascript module isn't generating css asset url

[Ben Weidig <be...@netzgut.net>]

Hi George,

I can't help with a "good" solution, only what we did to get the Monaco
Editor running which loads css/js by itself.

IIRC the underlying problem is that JS using require() builds the "wrong"
URL for the requested asset/tapestry on the client-side.
Tapestry expects modules to be in META-INF/modules and anything else in
META-INF/assets.
That's why they need to be split up accordingly, and we intercept any
requests to the "wrong" folder and fix them.

I know it's quite hacky, but when I wrote it in the past I didn't know any
better, and it worked for our problem.
But maybe there should be an easier way to support loading related files
for JS modules.

Gist for readability:
https://gist.github.com/benweidig/aba58e79be2850f55ab3fb14424ff311

public class MonacoEditorModule {

    private static final Pattern CSS_PATTERN =
Pattern.compile("^/modules(\\.gz)?/monaco/(.+\\.css)$");
    private static final Pattern JS_PATTERN =
Pattern.compile("^/modules(\\.gz)?/monaco/vs/(.+\\.js)$");

    public static void
contributeRequestHandler(OrderedConfiguration<RequestFilter> conf,
ResourceStreamer streamer) {

        conf.add("monaco-assets-redirect-request-filter", (request,
response, handler) -> {
            var matcher = cssPattern.matcher(request.getPath());
            if (matcher.matches() == false) {
                return handler.service(request, response);
            }

            var resource = new
ClasspathResource("META-INF/assets/backend/monaco/" + matcher.group(2));
            streamer.streamResource(resource, //
                                    "",

EnumSet.of(ResourceStreamer.Options.OMIT_EXPIRATION));
            return true;
        });

        conf.add("monaco-module-redirect-request-filter", (request,
response, handler) -> {
            var matcher = jsPattern.matcher(request.getPath());

            if (matcher.matches() == false) {
                return handler.service(request, response);
            }

            var resource = new
ClasspathResource("META-INF/modules/monaco/0.26.1/" + matcher.group(2));

request.setAttribute(TapestryConstants.DISABLE_JAVASCRIPT_MINIMIZATION,
Boolean.TRUE);

            streamer.streamResource(resource, //
                                    "z",

EnumSet.of(ResourceStreamer.Options.OMIT_EXPIRATION));
            return true;
        });
    }
}

Cheers
Ben

On Thu, Apr 14, 2022 at 11:04 PM George Christman <ge...@zigster.com>
wrote:

> Hi, I upgraded to Tapestry 5.8.1 and I moved all my js, css and modules to
> the webapp directory. I have a ckeditor module that is trying to load some
> ckeditor css and image files. In older versions of tapestry I resolved this
> with ClasspathAssetAliasManager, but that seems to be deprecated and no
> longer functional. "configuration.add("ck", "META-INF/modules/vendor");".
> My package structure is webapp/modules/editor.js
> webapp/modules/vendor/ckeditor
>
> My editor.js file looks like this.
>
> requirejs.config({
>     shim: {
>         'ckeditor-jquery': ['jquery', 'ckeditor-core']
>     },
>     paths: {
>         'ckeditor-core': 'vendor/ckeditor/ckeditor',
>         'ckeditor-jquery': 'vendor/ckeditor/adapters/jquery'
>     }
> });
> define(["jquery", "ckeditor-jquery"], function($) {
>
>     init = function(spec) {
>         $('#' + spec.id).ckeditor();
>     };
>
>     return init;
> });
>
> How is this achieved in 5.8?
> --
>
> George Christman
>
>
>
> This e-mail may contain confidential, proprietary information on Zigster.
> It is intended solely for the name recipient(s) listed above and should be
> maintained in strictest confidence. If you are not the intended recipient,
> you are hereby notified that any disclosure, copying, distribution, or use
> of the information contained herein (including any reliance thereon) is
> STRICTLY PROHIBITED. If you have received this e-mail in error, please
> immediately notify the sender and delete this information from your
> computer and destroy any related paper copies. Unless otherwise expressly
> stated in the text of the e-mail, the addition of a typed name or initials
> to this e-mail does not (i) evidence an intent to sign the e-mail, or (ii)
> constitute either (a) signature or (b) consent to use electronic records or
> signatures in place of a writing or a handwritten signature.
>