Register resources from nuget packages in custom module #764

PizzaConsole · 2020-09-29T18:58:49Z

PizzaConsole
Sep 29, 2020

I was looking through this discussion: #690 but I didn't see where you were able to pull the resources directly from the nuget package into a custom Module. It appears that they downloaded the resources directly into their custom module/theme. Is that right @mikecasas ? I am specifically trying to use ChartJs.Blazor

Edit 1:
I think one of the big problems I see here is this:

In your _Host.cshtml (server-side) or in your index.html (client-side) add the following lines to the body tag after the _framework reference

As far as I understand, Oqtane loads the resources into the <head></head>

Edit 2:
I believe that one of the problems I am experiencing is the same as here: #727 I need to be copying the nuget .dll from the Custom Module folder to the Oqtane folder when it is packaged.

mikecasas · 2020-09-30T00:21:25Z

mikecasas
Sep 30, 2020

@PoisnFang Yes I download the nuget package and manually extract the assets into my module.

6 replies

sbwalker Sep 30, 2020
Maintainer

@PoisnFang did you look at the DNF.Projects repo? It uses a Nuget package for RestSharp - and it uses Chart.js

PizzaConsole Sep 30, 2020
Author

I did see that it uses ChartJs I did not catch the Nuget package for RestSharp, I will take a look! I must say that the least intuitive part of the platform, for me, is integrating 3rd party resources. @sbwalker

mikecasas Sep 30, 2020

@PoisnFang You are not alone, I think most of the questions from the community deal with that. I was hoping the docs would be up so we could write a good tutorial, but I don't know what the hold up is. In @sbwalker 's example, the JavaScript asset for chart.js comes from a CDN (see below), so there is nothing to "package" into the module, other than copying the RestSharp dll to the framework's bin (like you would with all the other project's (assets).

public override List<Resource> Resources => new List<Resource>()
    {
        new Resource { ResourceType = ResourceType.Stylesheet, Url = ModulePath() + "Module.css" },
        new Resource { ResourceType = ResourceType.Script, Bundle = "ChartJS", Url = "https://cdn.jsdelivr.net/npm/[email protected]" },
        new Resource { ResourceType = ResourceType.Script, Bundle = "ChartJS", Url = ModulePath() + "Module.js" }
    };

PizzaConsole Sep 30, 2020
Author

Would there be a way to automatically extract the staticwebassets from the nuget package into the build folder?

sbwalker Sep 30, 2020
Maintainer

@mikecasas its possible to use a local JavaScript file rather than a CDN... just put the JS file in the same folder as where the CSS file is located and reference it the same way ie. Url = ModulePath() + "chart.js"

mikecasas · 2020-09-30T12:18:35Z

mikecasas
Sep 30, 2020

@PoisnFang Here is what I do to "embed" the assets into my external module. I will use your nuget package as an example.

I download the ChartJs.Blazor package from the nuget website
I rename chartjs.blazor.1.1.0.nupkg to chartjs.blazor.1.1.0.zip. Nuget packages are basically zip files.
I extract the zip folder contents to another folder
I navigate into the staticwebassets folder and copy all the js and css files needed into my external module's Server project in the wwwroot/Modules folder. If my module was 'Pets', then it would be Pets/Server/wwwroot/Modules

In my Pets/Server project I create the following class:

public class ModuleStartup : IHostResources
    {
        private const string ModulePath = "/Path/To/MyModule/";

        List<Resource> IHostResources.Resources => ModuleFiles();

        private List<Resource> ModuleFiles()
        {
            List<Resource> res = new List<Resource>();
            res.Add(new Resource { ResourceType = ResourceType.Stylesheet, Url = ModulePath + "css/ChartJSBlazor.css" });
            res.Add(new Resource { ResourceType = ResourceType.Script, Url = ModulePath + "Chart.min.js" });

            return res;
        }

    }

You can organize the files any way you like in the Modules folder. I put my css files in a css folder...you get the idea.

Also in this class you don't have access to ModulePath, so you need to set the path somehow. Hardcoding it is not a big deal because I don't think you are going to be updating you project name and structure.

See Shaun's guidance below.

#690 (reply in thread)

Let me know if you have any questions and the above makes sense.

24 replies

jimspillane Oct 4, 2020

@sbwalker I was thinking about that the other day. Are we going to migrate to .NET 5? Doesn't the Blazor JavaScript isolation and object references feature resolve many of the issues that we experiencing?

Hers is a demo Blazor .NET 5 - JavaScript Isolation - JavaScript Files per Component (Finally!)

sbwalker Oct 4, 2020
Maintainer

@jimspillane yes the plan is to migrate to .NET 5 ( we actually want to have a release ready to coincide with the official release on Nov 10 ). That being said, the initial goal is purely compatibility - ensuring the current feature set works on .NET 5. The next step would be to determine if/how any of the new Blazor features can be integrated.

I looked at the minimal information about JavaScript isolation and it appears to be a dynamic solution but it raises a lot of questions for me:

it appears that in order to use it, you need to specify your Javascript as modules - which means that most JavaScript that people are using today in Blazor will need to be modified/rewritten in order to use this new feature
there is a new magic string for "import" which I assume is the loader - however nowhere does it mention if the import must be in the same component where the Javascript is used. I assume so based on the async nature of components and what we discovered already in our experiments - but it would be nice if there was more technical guidance available to developers.
I have explored the .NET Core source on Github to try and figure out how "import" works under the covers but I have not been able to find the source files. Specifically I am interested in how they are dealing with JavaScript dependencies - as I do not see any support for "bundling" - which was a critical issue we experienced/solved in Oqtane by using LoadJS
it appears that JS Interop wrapper classes also need to be rewritten to use the new JSObjectReference feature
I also do not how it supports JavaScript resources which are remote ( ie. on a CDN ) and have Integrity keys

And from a higher level it appears that in .NET 5 there will be multiple methods for doing JSInterop - as Microsoft will still need to support the current methods - and each method has its own unique implementation patterns. And it will take some time before the .NET ecosystem adapts to the new methods... especially if you consider that if someone has built a component today and they want to support both .NET Core 3.1 (LTS) and .NET 5 (GA) then they will either need to create/support 2 versions of their component - or what is more likely, choose to manage a single code base by writing to the lowest common denominator, which means using the current methods rather than the .NET 5 methods. Essentially what this means from an Oqtane perspective is that we will need to support both methods for module developers.

jimspillane Oct 6, 2020

it appears that in order to use it, you need to specify your Javascript as modules - which means that most JavaScript that people are using today in Blazor will need to be modified/rewritten in order to use this new feature

Correct. In many cases I think adding export to the functions will be the only modification needed.

there is a new magic string for "import" which I assume is the loader - however nowhere does it mention if the import must be in the same component where the Javascript is used. I assume so based on the async nature of components and what we discovered already in our experiments - but it would be nice if there was more technical guidance available to developers.

I did not see much guidance available as well. From what I can tell, controlling the scope to the module level is the benefit.

I have explored the .NET Core source on Github to try and figure out how "import" works under the covers but I have not been able to find the source files. Specifically I am interested in how they are dealing with JavaScript dependencies - as I do not see any support for "bundling" - which was a critical issue we experienced/solved in Oqtane by using LoadJS

I found the import referenced here Microsoft.JSInterop.ts but I am not sure how it works.

it appears that JS Interop wrapper classes also need to be rewritten to use the new JSObjectReference feature

I also do not how it supports JavaScript resources which are remote ( ie. on a CDN ) and have Integrity keys

I created a small test using Chart.js. I created a local script file that imports from the CDN.
https://github.com/jimspillane/BlazorAppChartJS/blob/master/BlazorAppChartJS/wwwroot/js/charttest.js

Calling it is rather simple.
https://github.com/jimspillane/BlazorAppChartJS/blob/master/BlazorAppChartJS/Pages/Index.razor

From what I can tell, the scope is limited to the life of the _module variable and no global namespace was used.

And from a higher level it appears that in .NET 5 there will be multiple methods for doing JSInterop - as Microsoft will still need to support the current methods - and each method has its own unique implementation patterns. And it will take some time before the .NET ecosystem adapts to the new methods... especially if you consider that if someone has built a component today and they want to support both .NET Core 3.1 (LTS) and .NET 5 (GA) then they will either need to create/support 2 versions of their component - or what is more likely, choose to manage a single code base by writing to the lowest common denominator, which means using the current methods rather than the .NET 5 methods. Essentially what this means from an Oqtane perspective is that we will need to support both methods for module developers.

Agreed. If the new isolation feature requires ES6 modules, supporting both methods will be wise. I had to use the Chart.js 3.0 beta because the 2.0 version is not an ES module. I imagine we might run into other popular libraries that don't support modules yet.

sbwalker Oct 6, 2020
Maintainer

@jimspillane thank you for finding the code on Github. I don’t understand it either... but I am guessing that if you compared it to the internals of LoadJS you may see some similarities. One thing that does jump out at me though is it relies on “./“ notation to identify resources in wwwroot - which is a concept which Oqtane probably needs to support as well referencing static resources.

jimspillane Oct 7, 2020

Dynamic Imports come with some benefits that are similar to LoadJS. Unlike the LoadJS solution, the ES modules are deleted when disposed of rather than loitering in the global namespace.

sbwalker · 2020-09-30T12:37:30Z

sbwalker
Sep 30, 2020
Maintainer

In the majority of cases you should not need the IHostResources interface. It is only available if you need to include resources that will be used across your entire site ( ie. such as a UI component library which you are using in every module ). Typically you should access your resources using the method in the DNF.Projects example repo. I actually published a video series a while ago where I used DNF.Projects as an example - and I included instructions on adding Nuget packages and static asset references https://www.youtube.com/watch?v=JPfUZPlRRCE&list=PLYhXmd7yV0elLNLfQwZBUlM7ZSMYPTZ_f

The main thing you need to keep in mind when building external modules is that you need to deploy them as well as all of their dependencies into the Oqtane framework using the specific folder conventions it requires. So you can pull Nuget packages into your module just like any other .NET application... but you need to ensure all of the contents of the Nuget package are deployed to Oqtane. An easy way to do this is to do a mock Publish from Visual Studio to a folder and locate all of the DLLs and static assets - these will need to be deployed to your Oqtane instance.

4 replies

PizzaConsole Sep 30, 2020
Author

The main thing you need to keep in mind when building external modules is that you need to deploy them as well as all of their dependencies into the Oqtane framework using the specific folder conventions it requires.

Right and that's where the platform loses intuitiveness. You have to Manually make this happen, whereas in just a plain Blazor project you add in the Nuget package and it just "magically" works. It adds in a few extra steps and some developers might not be used to doing.

sbwalker Sep 30, 2020
Maintainer

You are correct. In a plain Blazor project where everything is tightly coupled and statically linked, the tooling can do some magic for you so that you are not aware of what is happening under the covers. In a loosely coupled dynamic application, the tooling cannot do that magic and you need to manage it yourself.

PizzaConsole Sep 30, 2020
Author

Unfortunately it leaves a lot of room for human error that can be very time costly.

sbwalker Oct 1, 2020
Maintainer

There is a saying "with greater power comes greater responsibility" - this is definitely true for more advanced software frameworks

PizzaConsole · 2020-09-30T18:19:58Z

PizzaConsole
Sep 30, 2020
Author

@sbwalker Just a thought but, shouldn't <CopyLocalLockFileAssemblies>true</CopyLocalLockFileAssemblies>
be included by default in the Module Creation Template? It is necessary in order to copy the 3rd party resources over.

2 replies

sbwalker Sep 30, 2020
Maintainer

Yes, it could definitely be added to the external template to make it simpler

PizzaConsole Oct 1, 2020
Author

I will make a PR

sbwalker · 2020-10-19T12:48:14Z

sbwalker
Oct 19, 2020
Maintainer

@PoisnFang in #829 I added enhancements based on the conversation in this thread. It is now possible to declare Resources in your module or theme and specify a property Declaration of "Global". By setting this property, the framework will inject the resource into the _host.cshtml as a global resource. This should make it simpler for you to use components like ChartJSBlazor.

@markdav-is the changes in #829 also support a new property for Location where you can specify Head or Body. Specifying a Declaration of Global and a Location of Body will instruct the framework to add the script reference to the end of the body in _host.cshtml

@mikecasas note that IHostedResources is still available and supports the enhancements mentioned above.

This should not be a breaking change. It will need some thorough testing.

5 replies

PizzaConsole Oct 19, 2020
Author

@sbwalker Very excellent!

sbwalker Oct 21, 2020
Maintainer

@PoisnFang @markdav-is do you think you will have time to test this new feature with your 2 use cases you described above?

PizzaConsole Oct 21, 2020
Author

@sbwalker My Module is currently running the v1.0.4 is this a change what will only be available in the v2 release?

sbwalker Oct 22, 2020
Maintainer

Currently yes that is the plan. All enhancements in master will be part of the 2.0 release on Nov 10

PizzaConsole Oct 22, 2020
Author

I will have to try and find sometime to rearrange my project to test it with the latest changes then, or I will just have to wait until v2 comes out to swap it

Register resources from nuget packages in custom module #764

PizzaConsole Sep 29, 2020

Replies: 5 comments · 41 replies

mikecasas Sep 30, 2020

sbwalker Sep 30, 2020 Maintainer

PizzaConsole Sep 30, 2020 Author

mikecasas Sep 30, 2020

PizzaConsole Sep 30, 2020 Author

sbwalker Sep 30, 2020 Maintainer

mikecasas Sep 30, 2020

jimspillane Oct 4, 2020

sbwalker Oct 4, 2020 Maintainer

jimspillane Oct 6, 2020

sbwalker Oct 6, 2020 Maintainer

jimspillane Oct 7, 2020

sbwalker Sep 30, 2020 Maintainer

PizzaConsole Sep 30, 2020 Author

sbwalker Sep 30, 2020 Maintainer

PizzaConsole Sep 30, 2020 Author

sbwalker Oct 1, 2020 Maintainer

PizzaConsole Sep 30, 2020 Author

sbwalker Sep 30, 2020 Maintainer

PizzaConsole Oct 1, 2020 Author

sbwalker Oct 19, 2020 Maintainer

PizzaConsole Oct 19, 2020 Author

sbwalker Oct 21, 2020 Maintainer

PizzaConsole Oct 21, 2020 Author

sbwalker Oct 22, 2020 Maintainer

PizzaConsole Oct 22, 2020 Author

PizzaConsole
Sep 29, 2020

Replies: 5 comments 41 replies

mikecasas
Sep 30, 2020

sbwalker Sep 30, 2020
Maintainer

PizzaConsole Sep 30, 2020
Author

PizzaConsole Sep 30, 2020
Author

sbwalker Sep 30, 2020
Maintainer

mikecasas
Sep 30, 2020

sbwalker Oct 4, 2020
Maintainer

sbwalker Oct 6, 2020
Maintainer

sbwalker
Sep 30, 2020
Maintainer

PizzaConsole Sep 30, 2020
Author

sbwalker Sep 30, 2020
Maintainer

PizzaConsole Sep 30, 2020
Author

sbwalker Oct 1, 2020
Maintainer

PizzaConsole
Sep 30, 2020
Author

sbwalker Sep 30, 2020
Maintainer

PizzaConsole Oct 1, 2020
Author

sbwalker
Oct 19, 2020
Maintainer

PizzaConsole Oct 19, 2020
Author

sbwalker Oct 21, 2020
Maintainer

PizzaConsole Oct 21, 2020
Author

sbwalker Oct 22, 2020
Maintainer

PizzaConsole Oct 22, 2020
Author