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 <sv...@jacilla.no> 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:ml+s1045711n5733722...@n5.nabble.com]
> Sent: fredag 24. november 2017 17.02
> To: Svein-Erik Løken <sv...@jacilla.no>
> 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 users@tapestry.apache.org<mailto:
> users@tapestry.apache.org> 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
