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-2
CONTENTS DELETED
The author has deleted this message.
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-2
CONTENTS DELETED
The author has deleted this message.
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-2
CONTENTS DELETED
The author has deleted this message.
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-2
CONTENTS DELETED
The author has deleted this message.
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-2
CONTENTS DELETED
The author has deleted this message.