Contribute requirejs.config.paths to ModuleManager

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Contribute requirejs.config.paths to ModuleManager

Svein
Trying to use TypeScript and React with Tapestry:

In TypeScript I need to use:  import * as React from "react";

I would like to load react: react.min, so I have to set paths: {...}

The configuration should be set at startup, but I cannot figure how to do it. I can set requirejs.config.shim, but not paths.

I tried to load it with @Contribute(ModuleManager.class), but could not figure out how.

PSEUDO CODE
@Contribute(ModuleManager.class)
public static void setupMyBaseModules(MappedConfiguration<String, Object> configuration) {
    JSONObject pathsConfig = new JSONObject(
            "react", "react.min",
            "react-dom", "react-dom.min"
    );
    AMDResourceConfiguration paths = new AMDResourceConfiguration("paths", pathsConfig);
    configuration.add(null, new JavaScriptModuleConfiguration(paths));
}


Tried to load it this way:


@Startup
public void registerToClearPlasticProxyFactoryOnInvalidation(JavaScriptSupport javaScriptSupport) {
    ModuleConfigurationCallback callback = new
            ModuleConfigurationCallback() {
                @Override
                public JSONObject configure(JSONObject configuration) {
                    configuration.put("paths",
                            new JSONObject(
                                    "react", "react.min",
                                    "react-dom", "react-dom.min"
                            ));
                    return configuration;
                }
            };
    javaScriptSupport.addModuleConfigurationCallback(callback);
}

[ERROR] ioc.Registry org.apache.tapestry5.ioc.util.UnknownValueException: No object of type org.apache.tapestry5.services.javascript.JavaScriptSupport is available from the Environment.






Now I am loading the configuration in @SetupRender, but it should be loaded globally.


@Inject
JavaScriptSupport javaScriptSupport;

private static final ModuleConfigurationCallback CALLBACK = new
        ModuleConfigurationCallback() {
            @Override
            public JSONObject configure(JSONObject configuration) {
                configuration.put("paths",
                        new JSONObject(
                                "react", "react.min",
                                "react-dom", "react-dom.min"
                                ));
                return configuration;
            }
        };

@SetupRender
public void configureRequireJS() {
    javaScriptSupport.addModuleConfigurationCallback(CALLBACK);
}

Can this be configuration be contribute to the ModuleManager.class? I think this should be supported in Tapestry.

S-E



Reply | Threaded
Open this post in threaded view
|

Re: Contribute requirejs.config.paths to ModuleManager

Thiago H de Paula Figueiredo
On Fri, Nov 24, 2017 at 11:13 AM, Svein-Erik Løken <[hidden email]> wrote:

Hello!

Trying to use TypeScript and React with Tapestry:
>
> In TypeScript I need to use:  import * as React from "react";
>
> I would like to load react: react.min, so I have to set paths: {...}
>
> The configuration should be set at startup, but I cannot figure how to do
> it. I can set requirejs.config.shim, but not paths.
>

Are you using React in all pages or just some of them?


>
> I tried to load it with @Contribute(ModuleManager.class), but could not
> figure out how.
>
> PSEUDO CODE
> @Contribute(ModuleManager.class)
> public static void setupMyBaseModules(MappedConfiguration<String, Object>
> configuration) {
>     JSONObject pathsConfig = new JSONObject(
>             "react", "react.min",
>             "react-dom", "react-dom.min"
>     );
>     AMDResourceConfiguration paths = new AMDResourceConfiguration("paths",
> pathsConfig);
>     configuration.add(null, new JavaScriptModuleConfiguration(paths));
> }
>

MappedConfiguration, as far as I can remember, doesn't accept null as the
contribution id. Even if it does, it's a bad idea.


> Tried to load it this way:
> @Startup
> public void registerToClearPlasticProxyFactoryOnInvalidation(JavaScriptSupport
> javaScriptSupport) {
>     ModuleConfigurationCallback callback = new
>             ModuleConfigurationCallback() {
>                 @Override
>                 public JSONObject configure(JSONObject configuration) {
>                     configuration.put("paths",
>                             new JSONObject(
>                                     "react", "react.min",
>                                     "react-dom", "react-dom.min"
>                             ));
>                     return configuration;
>                 }
>             };
>     javaScriptSupport.addModuleConfigurationCallback(callback);
> }



> [ERROR] ioc.Registry org.apache.tapestry5.ioc.util.UnknownValueException:
> No object of type org.apache.tapestry5.services.javascript.JavaScriptSupport
> is available from the Environment.


I'm afraid this isn't the correct way of using
JavaScriptSupport.addModuleConfigurationCallback(). It should be used while
rendering a page or handling an event. The way you did it above, you're
trying to add JavaScript at application startup. You need to do this in
page or component classes.


> Now I am loading the configuration in @SetupRender, but it should be
> loaded globally.
>

Define "globally", please. All pages, including error ones? Most pages? The
better way of doing this is moving this code to a mixin and apply it to the
pages where you need React. If you want it in all pages, you can contribute
a ComponentClassTransformWorker2 to the service with the same name which
applies the mixin to all pages. See
MutableComponentModel.addMixinClassName().

--
Thiago
Reply | Threaded
Open this post in threaded view
|

RE: Contribute requirejs.config.paths to ModuleManager

Svein
React can in theory be used in all pages (globally). It will be like a core library for me, like jquery, underscore, bootstrap, etc. In TypeScript I am using
"compilerOptions": {
    "module": "amd".

I have written a service:
@Override
public void appendToModulePath(JSONObject cfg) {
    javaScriptSupport.addModuleConfigurationCallback(configuration -> {
        if (!configuration.has("paths")) {
            configuration.put("paths", cfg);
        } else {
            configuration.getJSONObject("paths").putAll(cfg.toMap());
        }
        return configuration;
    });
}

I am now calling this in my global <html t:type="layout", and adding paths like “leaflet”:”leaflet-src” on pages with a map.

Setting requirejs.config.paths globally should not load anything until loaded by require.
E.g: JS from a transpiled TypeScript with React: define(["require", "exports", "react", "react-dom"], function (require, exports, React, ReactDOM) {

I can try the Mixin technique, but still think Tapestry should have a way of contribute requirejs.config.paths.  You have a nice way contribute requirejs.config.shim which maybe could be modified to also accept paths. To support modern JS frameworks I think setting requirejs.config.paths in a nice way globally should be implemented.

S-E

From: Thiago H de Paula Figueiredo [via Apache Tapestry Mailing List Archives] [mailto:[hidden email]]
Sent: fredag 24. november 2017 17.02
To: Svein-Erik Løken <[hidden email]>
Subject: Re: Contribute requirejs.config.paths to ModuleManager

On Fri, Nov 24, 2017 at 11:13 AM, Svein-Erik Løken <[hidden email]</user/SendEmail.jtp?type=node&node=5733722&i=0>> wrote:

Hello!

Trying to use TypeScript and React with Tapestry:
>
> In TypeScript I need to use:  import * as React from "react";
>
> I would like to load react: react.min, so I have to set paths: {...}
>
> The configuration should be set at startup, but I cannot figure how to do
> it. I can set requirejs.config.shim, but not paths.
>

Are you using React in all pages or just some of them?

>
> I tried to load it with @Contribute(ModuleManager.class), but could not
> figure out how.
>
> PSEUDO CODE
> @Contribute(ModuleManager.class)
> public static void setupMyBaseModules(MappedConfiguration<String, Object>
> configuration) {
>     JSONObject pathsConfig = new JSONObject(
>             "react", "react.min",
>             "react-dom", "react-dom.min"
>     );
>     AMDResourceConfiguration paths = new AMDResourceConfiguration("paths",
> pathsConfig);
>     configuration.add(null, new JavaScriptModuleConfiguration(paths));
> }
>

MappedConfiguration, as far as I can remember, doesn't accept null as the
contribution id. Even if it does, it's a bad idea.

> Tried to load it this way:
> @Startup
> public void registerToClearPlasticProxyFactoryOnInvalidation(JavaScriptSupport
> javaScriptSupport) {
>     ModuleConfigurationCallback callback = new
>             ModuleConfigurationCallback() {
>                 @Override
>                 public JSONObject configure(JSONObject configuration) {
>                     configuration.put("paths",
>                             new JSONObject(
>                                     "react", "react.min",
>                                     "react-dom", "react-dom.min"
>                             ));
>                     return configuration;
>                 }
>             };
>     javaScriptSupport.addModuleConfigurationCallback(callback);
> }



> [ERROR] ioc.Registry org.apache.tapestry5.ioc.util.UnknownValueException:
> No object of type org.apache.tapestry5.services.javascript.JavaScriptSupport
> is available from the Environment.


I'm afraid this isn't the correct way of using
JavaScriptSupport.addModuleConfigurationCallback(). It should be used while
rendering a page or handling an event. The way you did it above, you're
trying to add JavaScript at application startup. You need to do this in
page or component classes.


> Now I am loading the configuration in @SetupRender, but it should be
> loaded globally.
>

Define "globally", please. All pages, including error ones? Most pages? The
better way of doing this is moving this code to a mixin and apply it to the
pages where you need React. If you want it in all pages, you can contribute
a ComponentClassTransformWorker2 to the service with the same name which
applies the mixin to all pages. See
MutableComponentModel.addMixinClassName().

--
Thiago

________________________________
If you reply to this email, your message will be added to the discussion below:
http://apache-tapestry-mailing-list-archives.1045711.n5.nabble.com/Contribute-requirejs-config-paths-to-ModuleManager-tp5733721p5733722.html
To unsubscribe from [hidden email]<mailto:[hidden email]> Mailing List Archives, click here<
NAML<
http://apache-tapestry-mailing-list-archives.1045711.n5.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
Reply | Threaded
Open this post in threaded view
|

Re: Contribute requirejs.config.paths to ModuleManager

Thiago H de Paula Figueiredo
I'm wondering here whether the best approach is the one you've chosen here,
usually used when you're dealing with non-AMD-module-compliant JavaScript
libraries, while React is compliant. I believe you should create a
JavaScriptStack with the React .js files, contribute it to the
JavaScriptStackSource service, then add your module to the core one (i.e.
the one included in all pages). See
https://tapestry.apache.org/javascript-modules.html, section Aggregating
Modules:

Because Tapestry is open, it is possible to contribute modules even into
the *core* JavaScript stack.  This is done using your application's module:
@Contribute(JavaScriptStack.class)
@Core
public static void addAppModules(OrderedConfiguration<StackExtension>
configuration) {
    configuration.add("tree-viewer", StackExtension.module("tree-viewer"));
    configuration.add("app-utils", StackExtension.module("app-utils"));
}
So yes, Tapestry already supports what you want. :)


On Fri, Nov 24, 2017 at 3:20 PM, Svein-Erik Løken <[hidden email]> wrote:

> React can in theory be used in all pages (globally). It will be like a
> core library for me, like jquery, underscore, bootstrap, etc. In TypeScript
> I am using
> "compilerOptions": {
>     "module": "amd".
>
> I have written a service:
> @Override
> public void appendToModulePath(JSONObject cfg) {
>     javaScriptSupport.addModuleConfigurationCallback(configuration -> {
>         if (!configuration.has("paths")) {
>             configuration.put("paths", cfg);
>         } else {
>             configuration.getJSONObject("paths").putAll(cfg.toMap());
>         }
>         return configuration;
>     });
> }
>
> I am now calling this in my global <html t:type="layout", and adding paths
> like “leaflet”:”leaflet-src” on pages with a map.
>
> Setting requirejs.config.paths globally should not load anything until
> loaded by require.
> E.g: JS from a transpiled TypeScript with React: define(["require",
> "exports", "react", "react-dom"], function (require, exports, React,
> ReactDOM) {
>
> I can try the Mixin technique, but still think Tapestry should have a way
> of contribute requirejs.config.paths.  You have a nice way contribute
> requirejs.config.shim which maybe could be modified to also accept paths.
> To support modern JS frameworks I think setting requirejs.config.paths in a
> nice way globally should be implemented.
>
> S-E
>
> From: Thiago H de Paula Figueiredo [via Apache Tapestry Mailing List
> Archives] [mailto:[hidden email]]
> Sent: fredag 24. november 2017 17.02
> To: Svein-Erik Løken <[hidden email]>
> Subject: Re: Contribute requirejs.config.paths to ModuleManager
>
> On Fri, Nov 24, 2017 at 11:13 AM, Svein-Erik Løken <[hidden
> email]</user/SendEmail.jtp?type=node&node=5733722&i=0>> wrote:
>
> Hello!
>
> Trying to use TypeScript and React with Tapestry:
> >
> > In TypeScript I need to use:  import * as React from "react";
> >
> > I would like to load react: react.min, so I have to set paths: {...}
> >
> > The configuration should be set at startup, but I cannot figure how to do
> > it. I can set requirejs.config.shim, but not paths.
> >
>
> Are you using React in all pages or just some of them?
>
> >
> > I tried to load it with @Contribute(ModuleManager.class), but could not
> > figure out how.
> >
> > PSEUDO CODE
> > @Contribute(ModuleManager.class)
> > public static void setupMyBaseModules(MappedConfiguration<String,
> Object>
> > configuration) {
> >     JSONObject pathsConfig = new JSONObject(
> >             "react", "react.min",
> >             "react-dom", "react-dom.min"
> >     );
> >     AMDResourceConfiguration paths = new AMDResourceConfiguration("
> paths",
> > pathsConfig);
> >     configuration.add(null, new JavaScriptModuleConfiguration(paths));
> > }
> >
>
> MappedConfiguration, as far as I can remember, doesn't accept null as the
> contribution id. Even if it does, it's a bad idea.
>
> > Tried to load it this way:
> > @Startup
> > public void registerToClearPlasticProxyFactoryOnInvalidation(
> JavaScriptSupport
> > javaScriptSupport) {
> >     ModuleConfigurationCallback callback = new
> >             ModuleConfigurationCallback() {
> >                 @Override
> >                 public JSONObject configure(JSONObject configuration) {
> >                     configuration.put("paths",
> >                             new JSONObject(
> >                                     "react", "react.min",
> >                                     "react-dom", "react-dom.min"
> >                             ));
> >                     return configuration;
> >                 }
> >             };
> >     javaScriptSupport.addModuleConfigurationCallback(callback);
> > }
>
>
>
> > [ERROR] ioc.Registry org.apache.tapestry5.ioc.util.
> UnknownValueException:
> > No object of type org.apache.tapestry5.services.
> javascript.JavaScriptSupport
> > is available from the Environment.
>
>
> I'm afraid this isn't the correct way of using
> JavaScriptSupport.addModuleConfigurationCallback(). It should be used
> while
> rendering a page or handling an event. The way you did it above, you're
> trying to add JavaScript at application startup. You need to do this in
> page or component classes.
>
>
> > Now I am loading the configuration in @SetupRender, but it should be
> > loaded globally.
> >
>
> Define "globally", please. All pages, including error ones? Most pages? The
> better way of doing this is moving this code to a mixin and apply it to the
> pages where you need React. If you want it in all pages, you can contribute
> a ComponentClassTransformWorker2 to the service with the same name which
> applies the mixin to all pages. See
> MutableComponentModel.addMixinClassName().
>
> --
> Thiago
>
> ________________________________
> If you reply to this email, your message will be added to the discussion
> below:
> http://apache-tapestry-mailing-list-archives.1045711.
> n5.nabble.com/Contribute-requirejs-config-paths-to-ModuleManager-
> tp5733721p5733722.html
> To unsubscribe from [hidden email]<mailto:
> [hidden email]> Mailing List Archives, click here<
> http://apache-tapestry-mailing-list-archives.1045711.
> n5.nabble.com/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=
> 2375125&code=c3ZlaW5AamFjaWxsYS5ub3wyMzc1MTI1fC0xNTM4NzY2ODg4>.
> NAML<http://apache-tapestry-mailing-list-archives.1045711.
> n5.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%
> 21nabble%3Aemail.naml&base=nabble.naml.namespaces.
> BasicNamespace-nabble.view.web.template.NabbleNamespace-
> nabble.view.web.template.NodeNamespace&breadcrumbs=
> notify_subscribers%21nabble%3Aemail.naml-instant_emails%
> 21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>



--
Thiago
Reply | Threaded
Open this post in threaded view
|

RE: Contribute requirejs.config.paths to ModuleManager

Svein
I think the JavaScriptStack is the correct way!



I cannot make it work! I thought my code would create a link from module "react" to /assets/meta/z94ea83c9/react.min.js.



JS: define(["react"], function (react) {

and/or

@AfterRender
void testReactModuleLoading() {
    javaScriptSupport.require("react");
}

Log:

Loading 1 libraries

Loading library /assets/meta/z94ea83c9/react.min.js

Executing 3 inits

Loaded module bootstrap/collapse

GET http://localhost:9876/modules.gz/react.js 404 (No module for path 'react.js'.)



Source code:

@Contribute(JavaScriptStackSource.class)
public static void addMyStack(MappedConfiguration<String, JavaScriptStack> configuration) {
    configuration.addInstance("react", ReactStack.class);
}

@Contribute(JavaScriptStack.class)
@Core
public static void addAppModules(OrderedConfiguration<StackExtension> configuration) {
    configuration.add("react", StackExtension.module("react"));
}



public class ReactStack implements JavaScriptStack {
    private final AssetSource assetSource;

    public ReactStack(final AssetSource assetSource) {
        this.assetSource = assetSource;
    }

    public List<Asset> getJavaScriptLibraries() {
        List<Asset> ret = new ArrayList<>();
        ret.add(assetSource.getClasspathAsset("/META-INF/assets/react.min.js"));
        return ret;
    }

    @Override
    public List<String> getModules() {
        List<String> ret = new ArrayList<>();
        ret.add("react");
        return ret;
    }







From: Thiago H de Paula Figueiredo [via Apache Tapestry Mailing List Archives] [mailto:[hidden email]]
Sent: fredag 24. november 2017 22:03
To: Svein-Erik Løken <[hidden email]>
Subject: Re: Contribute requirejs.config.paths to ModuleManager

I'm wondering here whether the best approach is the one you've chosen here,
usually used when you're dealing with non-AMD-module-compliant JavaScript
libraries, while React is compliant. I believe you should create a
JavaScriptStack with the React .js files, contribute it to the
JavaScriptStackSource service, then add your module to the core one (i.e.
the one included in all pages). See
https://tapestry.apache.org/javascript-modules.html, section Aggregating
Modules:

Because Tapestry is open, it is possible to contribute modules even into
the *core* JavaScript stack.  This is done using your application's module:
@Contribute(JavaScriptStack.class)
@Core
public static void addAppModules(OrderedConfiguration<StackExtension>
configuration) {
    configuration.add("tree-viewer", StackExtension.module("tree-viewer"));
    configuration.add("app-utils", StackExtension.module("app-utils"));
}
So yes, Tapestry already supports what you want. :)


On Fri, Nov 24, 2017 at 3:20 PM, Svein-Erik Løken <[hidden email]</user/SendEmail.jtp?type=node&node=5733724&i=0>> wrote:

> React can in theory be used in all pages (globally). It will be like a
> core library for me, like jquery, underscore, bootstrap, etc. In TypeScript
> I am using
> "compilerOptions": {
>     "module": "amd".
>
> I have written a service:
> @Override
> public void appendToModulePath(JSONObject cfg) {
>     javaScriptSupport.addModuleConfigurationCallback(configuration -> {
>         if (!configuration.has("paths")) {
>             configuration.put("paths", cfg);
>         } else {
>             configuration.getJSONObject("paths").putAll(cfg.toMap());
>         }
>         return configuration;
>     });
> }
>
> I am now calling this in my global <html t:type="layout", and adding paths
> like “leaflet”:”leaflet-src” on pages with a map.
>
> Setting requirejs.config.paths globally should not load anything until
> loaded by require.
> E.g: JS from a transpiled TypeScript with React: define(["require",
> "exports", "react", "react-dom"], function (require, exports, React,
> ReactDOM) {
>
> I can try the Mixin technique, but still think Tapestry should have a way
> of contribute requirejs.config.paths.  You have a nice way contribute
> requirejs.config.shim which maybe could be modified to also accept paths.
> To support modern JS frameworks I think setting requirejs.config.paths in a
> nice way globally should be implemented.
>
> S-E
>
> From: Thiago H de Paula Figueiredo [via Apache Tapestry Mailing List
> Archives] [mailto:[hidden email]</user/SendEmail.jtp?type=node&node=5733724&i=1>]
> Sent: fredag 24. november 2017 17.02
> To: Svein-Erik Løken <[hidden email]</user/SendEmail.jtp?type=node&node=5733724&i=2>>
> Subject: Re: Contribute requirejs.config.paths to ModuleManager
>
> On Fri, Nov 24, 2017 at 11:13 AM, Svein-Erik Løken <[hidden
> email]</user/SendEmail.jtp?type=node&node=5733722&i=0>> wrote:
>
> Hello!
>
> Trying to use TypeScript and React with Tapestry:
> >
> > In TypeScript I need to use:  import * as React from "react";
> >
> > I would like to load react: react.min, so I have to set paths: {...}
> >
> > The configuration should be set at startup, but I cannot figure how to do
> > it. I can set requirejs.config.shim, but not paths.
> >
>
> Are you using React in all pages or just some of them?
>
> >
> > I tried to load it with @Contribute(ModuleManager.class), but could not
> > figure out how.
> >
> > PSEUDO CODE
> > @Contribute(ModuleManager.class)
> > public static void setupMyBaseModules(MappedConfiguration<String,
> Object>
> > configuration) {
> >     JSONObject pathsConfig = new JSONObject(
> >             "react", "react.min",
> >             "react-dom", "react-dom.min"
> >     );
> >     AMDResourceConfiguration paths = new AMDResourceConfiguration("
> paths",
> > pathsConfig);
> >     configuration.add(null, new JavaScriptModuleConfiguration(paths));
> > }
> >
>
> MappedConfiguration, as far as I can remember, doesn't accept null as the
> contribution id. Even if it does, it's a bad idea.
>
> > Tried to load it this way:
> > @Startup
> > public void registerToClearPlasticProxyFactoryOnInvalidation(
> JavaScriptSupport
> > javaScriptSupport) {
> >     ModuleConfigurationCallback callback = new
> >             ModuleConfigurationCallback() {
> >                 @Override
> >                 public JSONObject configure(JSONObject configuration) {
> >                     configuration.put("paths",
> >                             new JSONObject(
> >                                     "react", "react.min",
> >                                     "react-dom", "react-dom.min"
> >                             ));
> >                     return configuration;
> >                 }
> >             };
> >     javaScriptSupport.addModuleConfigurationCallback(callback);
> > }
>
>
>
> > [ERROR] ioc.Registry org.apache.tapestry5.ioc.util.
> UnknownValueException:
> > No object of type org.apache.tapestry5.services.
> javascript.JavaScriptSupport
> > is available from the Environment.
>
>
> I'm afraid this isn't the correct way of using
> JavaScriptSupport.addModuleConfigurationCallback(). It should be used
> while
> rendering a page or handling an event. The way you did it above, you're
> trying to add JavaScript at application startup. You need to do this in
> page or component classes.
>
>
> > Now I am loading the configuration in @SetupRender, but it should be
> > loaded globally.
> >
>
> Define "globally", please. All pages, including error ones? Most pages? The
> better way of doing this is moving this code to a mixin and apply it to the
> pages where you need React. If you want it in all pages, you can contribute
> a ComponentClassTransformWorker2 to the service with the same name which
> applies the mixin to all pages. See
> MutableComponentModel.addMixinClassName().
>
> --
> Thiago
>
> ________________________________
> If you reply to this email, your message will be added to the discussion
> below:
> http://apache-tapestry-mailing-list-archives.1045711.
> n5.nabble.com/Contribute-requirejs-config-paths-to-ModuleManager-
> tp5733721p5733722.html
> To unsubscribe from [hidden email]</user/SendEmail.jtp?type=node&node=5733724&i=3><mailto:
> [hidden email]</user/SendEmail.jtp?type=node&node=5733724&i=4>> Mailing List Archives, click here<
> http://apache-tapestry-mailing-list-archives.1045711.
> n5.nabble.com/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=
> 2375125&code=c3ZlaW5AamFjaWxsYS5ub3wyMzc1MTI1fC0xNTM4NzY2ODg4>.
> NAML<http://apache-tapestry-mailing-list-archives.1045711.
> n5.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%
> 21nabble%3Aemail.naml&base=nabble.naml.namespaces.
> BasicNamespace-nabble.view.web.template.NabbleNamespace-
> nabble.view.web.template.NodeNamespace&breadcrumbs=
> notify_subscribers%21nabble%3Aemail.naml-instant_emails%
> 21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>



--
Thiago

________________________________
If you reply to this email, your message will be added to the discussion below:
http://apache-tapestry-mailing-list-archives.1045711.n5.nabble.com/Contribute-requirejs-config-paths-to-ModuleManager-tp5733721p5733724.html
To unsubscribe from [hidden email]<mailto:[hidden email]> Mailing List Archives, click here<
NAML<
http://apache-tapestry-mailing-list-archives.1045711.n5.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
Reply | Threaded
Open this post in threaded view
|

Re: Contribute requirejs.config.paths to ModuleManager

Thiago H de Paula Figueiredo
On Sun, Nov 26, 2017 at 10:40 AM, Svein-Erik Løken <[hidden email]> wrote:

> Source code:
>

> @Contribute(JavaScriptStackSource.class)
> public static void addMyStack(MappedConfiguration<String,
> JavaScriptStack> configuration) {
>     configuration.addInstance("react", ReactStack.class);
> }
>
> @Contribute(JavaScriptStack.class)
> @Core
> public static void addAppModules(OrderedConfiguration<StackExtension>
> configuration) {
>     configuration.add("react", StackExtension.module("react"));
> }
>

These look correct. ^^^


> public class ReactStack implements JavaScriptStack {
>     private final AssetSource assetSource;
>
>     public ReactStack(final AssetSource assetSource) {
>         this.assetSource = assetSource;
>     }
>
>     public List<Asset> getJavaScriptLibraries() {
>         List<Asset> ret = new ArrayList<>();
>         ret.add(assetSource.getClasspathAsset("/META-INF/
> assets/react.min.js"));
>         return ret;
>     }
>
>     @Override
>     public List<String> getModules() {
>         List<String> ret = new ArrayList<>();
>         ret.add("react");
>         return ret;
>     }
>

I believe your error was having the getModules() method above return a list
with 'react'. According to its JavaDoc, getModules() must return the
modules on which this stack depends. It doesn't actually depend on the
'react' module. Please try having that method return an empty List and tell
us what happens.

You may also need to move react.min.js to
/META-INF/modules/react/react.min.js.
Reply | Threaded
Open this post in threaded view
|

RE: Contribute requirejs.config.paths to ModuleManager

Svein
Got this error message (very informative):

org.apache.tapestry5.ioc.util.UnknownValueException
Unable to create a client URL for classpath resource META-INF/modules/react/react.min.js: The resource path was not within an aliased path.
availableValues
Aliased paths:
• META-INF/assets
• META-INF/assets/core
• META-INF/assets/democore
• com/demo/core
• com/demo/module1
• com/demo/module1
• org/apache/tapestry5
• org/apache/tapestry5



Tried other locations:

public class ReactStack implements JavaScriptStack {
    private final AssetSource assetSource;

    public ReactStack(final AssetSource assetSource) {
        this.assetSource = assetSource;
    }

    public List<Asset> getJavaScriptLibraries() {
        List<Asset> ret = new ArrayList<>();
//        ret.add(assetSource.getClasspathAsset("/META-INF/modules/react/react.min.js"));
//        ret.add(assetSource.getClasspathAsset("/META-INF/assets/react/react.min.js"));
//        ret.add(assetSource.getClasspathAsset("/META-INF/assets/react/react.js"));
//        ret.add(assetSource.getClasspathAsset("/META-INF/assets/react.min.js"));
        ret.add(assetSource.getClasspathAsset("/META-INF/assets/react.js"));
        return ret;
    }


Still getting:
Loading 1 libraries
Loading library /assets/meta/z94ea83c9/react.js
Executing 3 inits
Loaded module bootstrap/collapse
GET http://localhost:9876/modules.gz/react.js 404 (No module for path 'react.js'.)

Very strange that the virtual link does not work!

S-E
 

From: Thiago H de Paula Figueiredo [via Apache Tapestry Mailing List Archives] [mailto:[hidden email]]
Sent: mandag 27. november 2017 13:32
To: Svein-Erik Løken <[hidden email]>
Subject: Re: Contribute requirejs.config.paths to ModuleManager

On Sun, Nov 26, 2017 at 10:40 AM, Svein-Erik Løken </user/SendEmail.jtp?type=node&node=5733729&i=0> wrote:

> Source code:
>

> @Contribute(JavaScriptStackSource.class)
> public static void addMyStack(MappedConfiguration<String,
> JavaScriptStack> configuration) {
>     configuration.addInstance("react", ReactStack.class);
> }
>
> @Contribute(JavaScriptStack.class)
> @Core
> public static void addAppModules(OrderedConfiguration<StackExtension>
> configuration) {
>     configuration.add("react", StackExtension.module("react"));
> }
>

These look correct. ^^^

> public class ReactStack implements JavaScriptStack {
>     private final AssetSource assetSource;
>
>     public ReactStack(final AssetSource assetSource) {
>         this.assetSource = assetSource;
>     }
>
>     public List<Asset> getJavaScriptLibraries() {
>         List<Asset> ret = new ArrayList<>();
>         ret.add(assetSource.getClasspathAsset("/META-INF/
> assets/react.min.js"));
>         return ret;
>     }
>
>     @Override
>     public List<String> getModules() {
>         List<String> ret = new ArrayList<>();
>         ret.add("react");
>         return ret;
>     }
>

I believe your error was having the getModules() method above return a list
with 'react'. According to its JavaDoc, getModules() must return the
modules on which this stack depends. It doesn't actually depend on the
'react' module. Please try having that method return an empty List and tell
us what happens.

You may also need to move react.min.js to
/META-INF/modules/react/react.min.js.

________________________________________
If you reply to this email, your message will be added to the discussion below:
http://apache-tapestry-mailing-list-archives.1045711.n5.nabble.com/Contribute-requirejs-config-paths-to-ModuleManager-tp5733721p5733729.html 
To unsubscribe from mailto:[hidden email] Mailing List Archives,
http://apache-tapestry-mailing-list-archives.1045711.n5.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml 

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]
Reply | Threaded
Open this post in threaded view
|

Re: Contribute requirejs.config.paths to ModuleManager

Chris Poulsen
Hi,

It has been a while since I last fought the module system, but in some
cases I've used a request filter to map between module and asset paths
(triggering on known module paths and then returning permanent redirects to
the actual asset urls in the filter) - This was necessary in order to get
stuff like CK editor to load properly as a module and still allowing it to
dynamically require its plugins IIRC.

--
Chris


On Mon, Nov 27, 2017 at 2:14 PM, Svein-Erik Løken <[hidden email]> wrote:

> Got this error message (very informative):
>
> org.apache.tapestry5.ioc.util.UnknownValueException
> Unable to create a client URL for classpath resource
> META-INF/modules/react/react.min.js: The resource path was not within an
> aliased path.
> availableValues
> Aliased paths:
> • META-INF/assets
> • META-INF/assets/core
> • META-INF/assets/democore
> • com/demo/core
> • com/demo/module1
> • com/demo/module1
> • org/apache/tapestry5
> • org/apache/tapestry5
>
>
>
> Tried other locations:
>
> public class ReactStack implements JavaScriptStack {
>     private final AssetSource assetSource;
>
>     public ReactStack(final AssetSource assetSource) {
>         this.assetSource = assetSource;
>     }
>
>     public List<Asset> getJavaScriptLibraries() {
>         List<Asset> ret = new ArrayList<>();
> //        ret.add(assetSource.getClasspathAsset("/META-INF/
> modules/react/react.min.js"));
> //        ret.add(assetSource.getClasspathAsset("/META-INF/
> assets/react/react.min.js"));
> //        ret.add(assetSource.getClasspathAsset("/META-INF/
> assets/react/react.js"));
> //        ret.add(assetSource.getClasspathAsset("/META-INF/
> assets/react.min.js"));
>         ret.add(assetSource.getClasspathAsset("/META-INF/
> assets/react.js"));
>         return ret;
>     }
>
>
> Still getting:
> Loading 1 libraries
> Loading library /assets/meta/z94ea83c9/react.js
> Executing 3 inits
> Loaded module bootstrap/collapse
> GET http://localhost:9876/modules.gz/react.js 404 (No module for path
> 'react.js'.)
>
> Very strange that the virtual link does not work!
>
> S-E
>
>
> From: Thiago H de Paula Figueiredo [via Apache Tapestry Mailing List
> Archives] [mailto:[hidden email]]
> Sent: mandag 27. november 2017 13:32
> To: Svein-Erik Løken <[hidden email]>
> Subject: Re: Contribute requirejs.config.paths to ModuleManager
>
> On Sun, Nov 26, 2017 at 10:40 AM, Svein-Erik Løken
> </user/SendEmail.jtp?type=node&node=5733729&i=0> wrote:
>
> > Source code:
> >
>
> > @Contribute(JavaScriptStackSource.class)
> > public static void addMyStack(MappedConfiguration<String,
> > JavaScriptStack> configuration) {
> >     configuration.addInstance("react", ReactStack.class);
> > }
> >
> > @Contribute(JavaScriptStack.class)
> > @Core
> > public static void addAppModules(OrderedConfiguration<StackExtension>
> > configuration) {
> >     configuration.add("react", StackExtension.module("react"));
> > }
> >
>
> These look correct. ^^^
>
> > public class ReactStack implements JavaScriptStack {
> >     private final AssetSource assetSource;
> >
> >     public ReactStack(final AssetSource assetSource) {
> >         this.assetSource = assetSource;
> >     }
> >
> >     public List<Asset> getJavaScriptLibraries() {
> >         List<Asset> ret = new ArrayList<>();
> >         ret.add(assetSource.getClasspathAsset("/META-INF/
> > assets/react.min.js"));
> >         return ret;
> >     }
> >
> >     @Override
> >     public List<String> getModules() {
> >         List<String> ret = new ArrayList<>();
> >         ret.add("react");
> >         return ret;
> >     }
> >
>
> I believe your error was having the getModules() method above return a list
> with 'react'. According to its JavaDoc, getModules() must return the
> modules on which this stack depends. It doesn't actually depend on the
> 'react' module. Please try having that method return an empty List and tell
> us what happens.
>
> You may also need to move react.min.js to
> /META-INF/modules/react/react.min.js.
>
> ________________________________________
> If you reply to this email, your message will be added to the discussion
> below:
> http://apache-tapestry-mailing-list-archives.1045711.
> n5.nabble.com/Contribute-requirejs-config-paths-to-ModuleManager-
> tp5733721p5733729.html
> To unsubscribe from mailto:[hidden email] Mailing List
> Archives, http://apache-tapestry-mailing-list-archives.1045711.
> n5.nabble.com/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=
> 2375125&code=c3ZlaW5AamFjaWxsYS5ub3wyMzc1MTI1fC0xNTM4NzY2ODg4.
> http://apache-tapestry-mailing-list-archives.1045711.
> n5.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%
> 21nabble%3Aemail.naml&base=nabble.naml.namespaces.
> BasicNamespace-nabble.view.web.template.NabbleNamespace-
> nabble.view.web.template.NodeNamespace&breadcrumbs=
> notify_subscribers%21nabble%3Aemail.naml-instant_emails%
> 21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml
>
Reply | Threaded
Open this post in threaded view
|

RE: Contribute requirejs.config.paths to ModuleManager

Svein
I tried to fight it too, but had to capitulate.

After some debugging my @Contribute(JavaScriptStackSource.class) was not set:

public class ModuleManagerImpl implements ModuleManager
{
private Resource resolveModuleNameToResource(String moduleName)
    {
        Resource resource = shimModuleNameToResource.get(moduleName);

        if (resource != null)
        {
            return resource;
        }

        // Tack on a fake extension; otherwise modules whose name includes a '.' get mangled
        // by Resource.withExtension().
        String baseName = String.format("/META-INF/modules/%s.EXT", moduleName);

        Resource baseResource = classpathRoot.forFile(baseName);

        for (String extension : extensions)
        {
            resource = baseResource.withExtension(extension);

            if (resource.exists())
            {
                return resource;
            }
        }

        // Return placeholder for null:
        return classpathRoot;
    }

My module is not listed in shimModuleNameToResource, and does not exist in /META-INF/modules/%s.EXT. The result is an empty classpathRoot.


I think I don't fully understand JavaScriptStack. I think a method is missing: Map<String, JavaScriptModuleConfiguration> getJavaScriptModules(). I would like to have a example of how to include a AMD/UMD module. What about support for CommonJS?




In the debugging process I found that @Contribute(ModuleManager.class) was the perfect choice for me.

    @Contribute(ModuleManager.class)
    public static void setupMyBaseModules(MappedConfiguration<String, Object> configuration, @Symbol(SymbolConstants.PRODUCTION_MODE) boolean productionMode) {
        String[] reactModules = {"react", "react-dom"};
        String ext = productionMode ? ".min.js" : ".js";
        for (String m : reactModules) {
            configuration.add(m, new JavaScriptModuleConfiguration(new ClasspathResource(String.format("META-INF/assets/js/%s%s", m, ext))));
        }
    }

I think I was fooled by:

The documentation for ModuleManager.class say:
"...This is primarily used to wrap non-AMD compliant libraries for use with RequireJS"

The internal variable Map<String, Resource> shimModuleNameToResource in ModuleManagerImpl. The shim prefix...

S-E




From: Chris Poulsen [via Apache Tapestry Mailing List Archives] [mailto:[hidden email]]
Sent: tirsdag 28. november 2017 08:34
To: Svein-Erik Løken <[hidden email]>
Subject: Re: Contribute requirejs.config.paths to ModuleManager

Hi,

It has been a while since I last fought the module system, but in some
cases I've used a request filter to map between module and asset paths
(triggering on known module paths and then returning permanent redirects to
the actual asset urls in the filter) - This was necessary in order to get
stuff like CK editor to load properly as a module and still allowing it to
dynamically require its plugins IIRC.

--
Chris




---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]