External content packages #247
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| @using TestContentPackage | ||
|
|
||
| <h1>Functionality and content from an external package</h1> | ||
|
|
||
| <p> | ||
| NuGet packages can embed .NET code, which can in turn call Blazor's | ||
| JS interop features if desired. This can be used to distribute new | ||
| browser APIs as NuGet packages. | ||
| </p> | ||
|
|
||
| <p>Click the following button to invoke a JavaScript function.</p> | ||
|
|
||
| <button @onclick(ShowJavaScriptPrompt)>Show JavaScript prompt</button> | ||
|
|
||
| @if (!string.IsNullOrEmpty(result)) | ||
| { | ||
| <p>Result: <strong>@result</strong></p> | ||
| } | ||
|
|
||
| <hr /> | ||
|
|
||
| <p> | ||
| Additionally, NuGet packages can contain static resources such as CSS | ||
| files and images. | ||
| </p> | ||
|
|
||
| <div class="special-style"> | ||
| The elegant styling on this <div> comes from the external content package. | ||
| </div> | ||
|
|
||
| @functions | ||
| { | ||
| string result; | ||
|
|
||
| void ShowJavaScriptPrompt() | ||
| { | ||
| result = MyPrompt.Show("Hello!"); | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| using Microsoft.AspNetCore.Blazor.Browser.Interop; | ||
|
|
||
| namespace TestContentPackage | ||
| { | ||
| public static class MyPrompt | ||
| { | ||
| // Keep in sync with the identifier in the .js file | ||
| const string ShowPromptIdentifier = "TestContentPackage.showPrompt"; | ||
|
|
||
| public static string Show(string message) | ||
| { | ||
| return RegisteredFunction.Invoke<string>( | ||
| ShowPromptIdentifier, | ||
| message); | ||
| } | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <Project Sdk="Microsoft.NET.Sdk"> | ||
|
|
||
| <PropertyGroup> | ||
| <TargetFramework>netstandard2.0</TargetFramework> | ||
| </PropertyGroup> | ||
|
|
||
| <ItemGroup> | ||
| <Content Include="build\**" PackagePath="build" /> | ||
| <Content Include="content\**" PackagePath="content" /> | ||
| </ItemGroup> | ||
|
|
||
| <ItemGroup> | ||
| <!-- In real content packages, use a <PackageReference> to Microsoft.AspNetCore.Blazor.Browser instead. --> | ||
| <ProjectReference Include="..\..\..\src\Microsoft.AspNetCore.Blazor.Browser\Microsoft.AspNetCore.Blazor.Browser.csproj" /> | ||
| </ItemGroup> | ||
|
|
||
| </Project> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <Project> | ||
| <PropertyGroup> | ||
| <!-- Update this to match your package ID exactly --> | ||
| <_PackageId>TestContentPackage</_PackageId> | ||
| <_ContentDir>$(MSBuildThisFileDirectory)..\content\</_ContentDir> | ||
| </PropertyGroup> | ||
| <ItemGroup> | ||
| <!-- All files under "content" will be included with the Blazor app build output --> | ||
| <BlazorPackageContentFile Include="$(_ContentDir)**" SourcePackage="$(_PackageId)" /> | ||
|
There was a problem hiding this comment. For this I would use content and an Additional metadata attribute inside the content. That way you can piggyback on all the features of content. That said, this is just a suggestion, you can give content a try or just leave it like this for now. Another completely different option can be to just define stuff in the package as content and make it go into That way as a package author you just have to care about putting stuff in the right folder and everything else happens automatically. There was a problem hiding this comment.
@javiercn I tried to do this at some length, by putting This would a be better way to do it, except for one severe problem, which is that all If you know of a way of using There was a problem hiding this comment. I do believe that you can use the false node in MSBuild to make them not show up in VS https://msdn.microsoft.com/en-us/library/bb629388.aspx So my idea is that if you put the content on the right folder path then you can have msbuild in our targets that based on the path updates the metadata for the itemgroup. (And this can be just at the top level so it applies globally) There was a problem hiding this comment. Are you talking about There was a problem hiding this comment. @SteveSandersonMS Yes. @rynowak This is also what you mentioned to me before, isn't it? To just use Content and use |
||
|
|
||
| <!-- We'll generate a <script> tag importing each of the following JavaScript files --> | ||
| <!-- Change the "Include" pattern if you don't want to include all .js files. --> | ||
| <BlazorPackageJsRef Include="$(_ContentDir)**\*.js" SourcePackage="$(_PackageId)" /> | ||
|
|
||
| <!-- We'll generate a <link> tag importing each of the following CSS files --> | ||
| <!-- Change the "Include" pattern if you don't want to include all .css files. --> | ||
| <BlazorPackageCssRef Include="$(_ContentDir)**\*.css" SourcePackage="$(_PackageId)" /> | ||
| </ItemGroup> | ||
| </Project> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| Blazor.registerFunction('TestContentPackage.showPrompt', function (message) { | ||
| return prompt(message, "Type anything here"); | ||
| }); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| .special-style { | ||
| background-image: url('./face.png'); | ||
| padding: 50px; | ||
| background-repeat: repeat-x; | ||
| border: 5px dashed red; | ||
| font-family: "Comic Sans MS"; | ||
| font-size: 20px; | ||
| font-weight: bold; | ||
| animation: hideous-rainbow 1s infinite; | ||
| } | ||
|
|
||
| @keyframes hideous-rainbow { | ||
| 0% { color: red; } | ||
| 20% { color: orange; } | ||
| 40% { color: yellow; } | ||
| 60% { color: green; } | ||
| 80% { color: blue; } | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure this does anything on custom items. I think this is a feature of Content. This is good for now, but in the future I think we should move users to use Content for this (as it has all the features). I would need to know more about what we are trying to do here to better judge it, but I'm going to make 2 assumptions.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
BlazorPackageContentFileitems are those specifically nominated by the package for inclusion in thedistdir.Yes
Pretty much, but:
dist, not just$(OutDir)(and don't want package authors to hardcode the notion ofdistin their packages)SourcePackagemetadata so that we can drop content intodist/_content/(SourcePackage)/...to ensure there are no clashes across packages. The implementation here means you have to give a nonemptySourcePackageotherwise we won't include your item indist.