{"id":13466714,"url":"https://github.com/excubo-ag/Blazor.ScriptInjection","last_synced_at":"2025-03-26T00:31:24.473Z","repository":{"id":46138342,"uuid":"251590022","full_name":"excubo-ag/Blazor.ScriptInjection","owner":"excubo-ag","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-14T16:17:11.000Z","size":332,"stargazers_count":26,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-23T12:16:56.987Z","etag":null,"topics":["blazor","javascript"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/excubo-ag.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-03-31T12:00:40.000Z","updated_at":"2024-08-03T10:09:10.000Z","dependencies_parsed_at":"2024-04-10T05:38:44.255Z","dependency_job_id":"e629c978-2c14-40e6-be01-7e4796ee66ac","html_url":"https://github.com/excubo-ag/Blazor.ScriptInjection","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excubo-ag%2FBlazor.ScriptInjection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excubo-ag%2FBlazor.ScriptInjection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excubo-ag%2FBlazor.ScriptInjection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/excubo-ag%2FBlazor.ScriptInjection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/excubo-ag","download_url":"https://codeload.github.com/excubo-ag/Blazor.ScriptInjection/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245566098,"owners_count":20636390,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","javascript"],"created_at":"2024-07-31T15:00:49.196Z","updated_at":"2025-03-26T00:31:23.971Z","avatar_url":"https://github.com/excubo-ag.png","language":"C#","funding_links":[],"categories":["Libraries \u0026 Extensions"],"sub_categories":["Tools \u0026 Utilities"],"readme":"# Excubo.Blazor.ScriptInjection\r\n\r\n[![Nuget](https://img.shields.io/nuget/v/Excubo.Blazor.ScriptInjection)](https://www.nuget.org/packages/Excubo.Blazor.ScriptInjection/)\r\n[![Nuget](https://img.shields.io/nuget/dt/Excubo.Blazor.ScriptInjection)](https://www.nuget.org/packages/Excubo.Blazor.ScriptInjection/)\r\n[![GitHub](https://img.shields.io/github/license/excubo-ag/Blazor.ScriptInjection)](https://github.com/excubo-ag/Blazor.ScriptInjection/)\r\n\r\nThis library brings the `script` tag to Blazor. Since components can occur any number of times, the usage of `script` tags in components is usually frowned upon.\r\nThe `AddScript` component in `Excubo.Blazor.ScriptInjection` is different, as it makes sure that the source file is only put into the page's body once.\r\n\r\nThis can be used to lazily load javascript sources for any component that requires javascript.\r\nAs a component library author, you can use this to relieve your users of the burden of adding script tags to their pages' `\u003chead\u003e`.\r\nSimply add `\u003cAddScript Src=\"_content/My.Library/code.js\" /\u003e` to any component in your library that requires that file.\r\n`Excubo.Blazor.ScriptInjection` makes sure the script gets loaded once and only once, regardless of how many components you have, and regardless of how many components your users use.\r\n\r\n## Changelog\r\n\r\n### Version 3.1.Y\r\n\r\nThe target framework compatibility is now limited to pre-net5.0 TFMs. This is effectively deprecating this library, for one simple reason: working with [JavaScript isolation](https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0#javascript-isolation-in-javascript-modules) is a better way to achieve this.\r\n\r\n### Version 3.X.Y\r\n\r\nSince `\u003cScript /\u003e` fails in Blazor under some circumstances ([aspnetcore#24159](https://github.com/dotnet/aspnetcore/issues/24159)), `Script` is now deprecated in favor of `AddScript`.\r\n`Script` will be removed starting with v4.0.0.\r\n\r\n### Version 2.X.Y\r\n\r\nSince version 2.0.0, you get a utility function that only returns when the script has been loaded. This makes sure that your javascript code is available before you try to execute it.\r\nThis behavior is optional (but enabled by default). If you do not need it at all, simply disable it when you add the `ScriptInjection` service.\r\nThis notification adds a payload of 409 bytes to your page (214 bytes, if your web server supports gzipped files and you activate the gzipped option on the service: `services.AddScriptInjection(gzipped_bootstrap: true)`).\r\n\r\n## Usage\r\n\r\n### 1. Install the nuget package Excubo.Blazor.ScriptInjection\r\n\r\nExcubo.Blazor.ScriptInjection is distributed [via nuget.org](https://www.nuget.org/packages/Excubo.Blazor.ScriptInjection/).\r\n[![Nuget](https://img.shields.io/nuget/v/Excubo.Blazor.ScriptInjection)](https://www.nuget.org/packages/Excubo.Blazor.ScriptInjection/)\r\n\r\n#### Package Manager:\r\n```ps\r\nInstall-Package Excubo.Blazor.ScriptInjection\r\n```\r\n\r\n#### .NET Cli:\r\n```cmd\r\ndotnet add package Excubo.Blazor.ScriptInjection\r\n```\r\n\r\n#### Package Reference\r\n```xml\r\n\u003cPackageReference Include=\"Excubo.Blazor.ScriptInjection\" /\u003e\r\n```\r\n\r\n### 2. Add ScriptInjection to your services\r\n\r\n```cs\r\n    //...\r\n    //using Excubo.Blazor.ScriptInjection;\r\n    services.AddScriptInjection();\r\n    // if your web server supports gzipped javascript files, it's recommended to use the following instead:\r\n    services.AddScriptInjection(gzipped_bootstrap: true);\r\n    // Alternative: if you do not require notification on load of the scripts, disable it completely:\r\n    services.AddScriptInjection(onload_notification: false); // default is true.\r\n    //...\r\n```\r\n\r\n### 3. Use the AddScript component\r\n\r\n```html\r\n\u003ch3\u003eMy component requiring some js\u003c/h3\u003e\r\n\u003cAddScript Src=\"path/to/code.js\" Async=\"true\" Defer=\"false\" /\u003e\r\n\u003c!--...--\u003e\r\n```\r\n\r\nNote: `Async` and `Defer` are `false` by default. It is recommended to use these options wherever possible to improve page performance.\r\n\r\n### 4. Wait for the script to be loaded (optional)\r\n\r\nMost likely, you need to be sure that the script you added is actually loaded before calling any method in it:\r\n\r\n```html\r\n@inject IJSRuntime js\r\n@inject IScriptInjectionTracker script_injection_tracker\r\n\u003cAddScript Src=\"path/to/code.js\" Async=\"true\" Defer=\"false\" /\u003e\r\n\r\n\u003cbutton @onclick=\"Run\"\u003eExecute code in path/to/code.js\u003c/button\u003e\r\n\r\n@code {\r\n    private async Task Run()\r\n    {\r\n        await script_injection_tracker.LoadedAsync(\"path/to/code.js\");\r\n        await js.InvokeVoidAsync(\"console.log\", \"we know that our file has been loaded successfully! now we execute something\");\r\n        await js.InvokeVoidAsync(\"code.sayhello\", \"world\");\r\n    }\r\n}\r\n```\r\n\r\nIf you never require to call `IScriptInjectionTracker.LoadedAsync`, then you can safely disable the onload notification with `services.AddScriptInjection(onload_notification: false);`.\r\n\r\n## Recommendations for component library authors\r\n\r\nTo make use of this library in your component library, there are two easy steps to follow (a third one being optional):\r\n\r\n### 1. Add ScriptInjection to your service extension method\r\n\r\n```cs\r\nusing Excubo.Blazor.ScriptInjection;\r\nusing Microsoft.Extensions.DependencyInjection;\r\n\r\nnamespace MyLibrary\r\n{\r\n    public static class ServiceExtension\r\n    {\r\n        public static IServiceCollection AddMyLibrary(this IServiceCollection services)\r\n        {\r\n            return services\r\n                //... add your own services here\r\n                .AddScriptInjection();\r\n        }\r\n    }\r\n}\r\n```\r\n\r\n### 2. Use the AddScript component\r\n\r\nMake sure you use the `_content/[Name of Library]` prefix in the `Src` parameter.\r\n\r\n```html\r\n\u003ch3\u003eMy reusable component in an awesome library (requiring some js)\u003c/h3\u003e\r\n\u003cAddScript Src=\"_content/MyLibrary/path/to/code.js\" Async=\"true\" Defer=\"false\" /\u003e\r\n\u003c!--...--\u003e\r\n```\r\n\r\n### 3. Optionally, tell your users that they can remove the awkward script tag from their `_Host.cshtml` / `index.html` file.\r\n\r\nNow that your making sure that the javascript code is loaded only when it's needed, you can tell your users that they can remove some clutter from their `_Host.cshtml` / `index.html` file.\r\nThis is only relevant for updated libraries, not when you use `Excubo.Blazor.ScriptInjection` from version 1 of your component library.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexcubo-ag%2FBlazor.ScriptInjection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexcubo-ag%2FBlazor.ScriptInjection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexcubo-ag%2FBlazor.ScriptInjection/lists"}