RE: Contribute requirejs.config.paths to ModuleManager

Svein-Erik Løken <[email protected]>
Newsgroups gmane.comp.java.tapestry.user
Message-ID <DB3PR08MB0283B476A9CFACA8308254E8D2240@DB3PR08MB0283.eurprd08.prod.outlook.com> 
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:[email protected]]
Sent: fredag 24. november 2017 22:03
To: Svein-Erik Løken <[email protected]>
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 [email protected]<mailto:[email protected]> 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>
lmpx.com only provides a reader for public news (NNTP) servers. It is not affiliated with the servers or forums shown here and is not responsible for the content of articles, which is written by their respective authors.