blazorinterop

ignatandrei · Nov 20, 2024 · f6165ff · f6165ff
1 parent 4dae5f1
commit f6165ff
Show file tree

Hide file tree

Showing 87 changed files with 61,027 additions and 228 deletions.
diff --git a/README.md b/README.md
diff --git a/v2/Generator/all.csv b/v2/Generator/all.csv
@@ -170,3 +170,4 @@ Nr,Key,Source,Category
 169,GenPack, https://github.com/dimohy/GenPack,Serializer
 170,QueryStringGenerator, https://github.com/tparviainen/query-string-generator,EnhancementClass
 171,Hsu.Sg.FluentMember, https://github.com/hsu-net/source-generators,Builder
+172,GoLive.Generator.BlazorInterop, https://github.com/surgicalcoder/BlazorInteropGenerator,Blazor
diff --git a/v2/RSCGExamplesData/GeneratorDataRec.json b/v2/RSCGExamplesData/GeneratorDataRec.json
@@ -1028,5 +1028,12 @@
     "Category": 4,
     "dtStart": "2024-11-08T00:00:00",
     "show": true
+  },
+  {
+    "ID":"GoLive.Generator.BlazorInterop",
+    "Category": 21,
+    "dtStart": "2024-11-09T00:00:00",
+    "show": true
+
   }
 ]
diff --git a/v2/RSCGExamplesData/NoExample.json b/v2/RSCGExamplesData/NoExample.json
@@ -149,11 +149,6 @@
     "name": "BigMachines https://github.com/archi-Doc/BigMachines",
     "why": "state machine - full of features. To be analyzed , need help"
   },
-  {
-    "ID": 31,
-    "name": "BlazorInteropGenerator https://github.com/surgicalcoder/BlazorInteropGenerator",
-    "why": "later"
-  },
   {
     "ID": 32,
     "name": "BlazorOcticons https://github.com/BlazorOcticons/BlazorOcticons",

diff --git a/v2/book/examples/GoLive.Generator.BlazorInterop.html b/v2/book/examples/GoLive.Generator.BlazorInterop.html
@@ -0,0 +1,71 @@
+
+<h1>RSCG nr 172 :  GoLive.Generator.BlazorInterop</h1>
+
+<h2>Info</h2>
+Nuget : <a href="https://www.nuget.org/packages/GoLive.Generator.BlazorInterop/" target="_blank">https://www.nuget.org/packages/GoLive.Generator.BlazorInterop/</a>
+
+<p>You can find more details at : <a href="https://github.com/surgicalcoder/BlazorInteropGenerator" target="_blank"> https://github.com/surgicalcoder/BlazorInteropGenerator</a></p>
+
+<p>Author :surgicalcoder</p>
+
+<p>Source : <a href="https://github.com/surgicalcoder/BlazorInteropGenerator" target="_blank">https://github.com/surgicalcoder/BlazorInteropGenerator</a> </p>
+
+<h2>About</h2>
+
+Generating interop from C# to javascript for Blazor
+
+<h2>
+    How to use
+</h2>
+<h3>
+    Add reference to the  <a href="https://www.nuget.org/packages/GoLive.Generator.BlazorInterop/" target="_blank">GoLive.Generator.BlazorInterop</a> in the csproj
+</h3>
+<img src="images/GoLive.Generator.BlazorInterop/MyTestBlazoe.csproj.png" width="580" height="580" />
+
+<h3>This was for me the <b>starting</b> code</h3>
+
+        <br />
+        I have <b>coded</b> the file BlazorInterop.json
+        <br />
+    <img src="images/GoLive.Generator.BlazorInterop/csFiles/BlazorInterop.json.png" width="580" height="580" />
+    <hr />
+
+        <br />
+        I have <b>coded</b> the file blazorinterop.js
+        <br />
+    <img src="images/GoLive.Generator.BlazorInterop/csFiles/blazorinterop.js.png" width="580" height="580" />
+    <hr />
+
+        <br />
+        I have <b>coded</b> the file Home.razor
+        <br />
+    <img src="images/GoLive.Generator.BlazorInterop/csFiles/Home.razor.png" width="580" height="580" />
+    <hr />
+
+        <br />
+        I have <b>coded</b> the file index.html
+        <br />
+    <img src="images/GoLive.Generator.BlazorInterop/csFiles/index.html.png" width="580" height="580" />
+    <hr />
+    <h3>And here are the <i>generated</i> files</h3>
+
+        <br />
+        The file <i>generated</i> is Generated.JSInterop.cs
+        <br />
+    <img src="images/GoLive.Generator.BlazorInterop/generated/Generated.JSInterop.cs.png" width="580" height="580" />
+
+<p>
+    You can download the code and this page as pdf from
+    <a target="_blank" href='https://ignatandrei.github.io/RSCG_Examples/v2/docs/GoLive.Generator.BlazorInterop'>
+        https://ignatandrei.github.io/RSCG_Examples/v2/docs/GoLive.Generator.BlazorInterop
+    </a>
+</p>
+
+
+<p>
+    You can see the whole list at 
+    <a target="_blank" href='https://ignatandrei.github.io/RSCG_Examples/v2/docs/List-of-RSCG'>
+        https://ignatandrei.github.io/RSCG_Examples/v2/docs/List-of-RSCG
+    </a>
+</p>
+
diff --git a/v2/book/list.html b/v2/book/list.html
@@ -17,7 +17,7 @@
 </head>
 <body>
     <h1>
-This is the list of 171 RSCG with examples =>
+This is the list of 172 RSCG with examples =>
     </h1>
 
 <table >
@@ -710,6 +710,10 @@ <h1>
             <td>171</td>
             <td><a href="examples/Hsu.Sg.FluentMember.html">Hsu.Sg.FluentMember</a></td>
         </tr>
+            <tr>
+            <td>172</td>
+            <td><a href="examples/GoLive.Generator.BlazorInterop.html">GoLive.Generator.BlazorInterop</a></td>
+        </tr>
 </table>
 
 

diff --git a/v2/book/pandocHTML.yaml b/v2/book/pandocHTML.yaml
@@ -185,6 +185,7 @@ input-files:
 - examples/GenPack.html
 - examples/QueryStringGenerator.html
 - examples/Hsu.Sg.FluentMember.html
+- examples/GoLive.Generator.BlazorInterop.html
 
 # or you may use input-file: with a single value
 # defaults:

diff --git a/v2/rscg_examples/GoLive.Generator.BlazorInterop/description.json b/v2/rscg_examples/GoLive.Generator.BlazorInterop/description.json
@@ -0,0 +1,22 @@
+{
+   "generator":{
+      "name":"GoLive.Generator.BlazorInterop",
+      "nuget":[
+         "https://www.nuget.org/packages/GoLive.Generator.BlazorInterop/"
+      ],
+      "link":"https://github.com/surgicalcoder/BlazorInteropGenerator",
+      "author":"surgicalcoder",
+      "source":"https://github.com/surgicalcoder/BlazorInteropGenerator"
+   },
+   "data":{
+      "goodFor":["Generating interop from C# to javascript for Blazor"],
+      "csprojDemo":"MyTestBlazoe.csproj",
+      "csFiles":["BlazorInterop.json","blazorinterop.js","Home.razor","index.html"],
+      "excludeDirectoryGenerated":["Microsoft.CodeAnalysis.Razor.Compiler"],
+      "includeAdditionalFiles":[""]
+   },
+   "links":{
+      "blog":"",
+      "video":""
+   }
+}
diff --git a/v2/rscg_examples/GoLive.Generator.BlazorInterop/nuget.txt b/v2/rscg_examples/GoLive.Generator.BlazorInterop/nuget.txt
@@ -0,0 +1 @@
+Generates strongly typed methods that interop into Javascript.
diff --git a/v2/rscg_examples/GoLive.Generator.BlazorInterop/readme.txt b/v2/rscg_examples/GoLive.Generator.BlazorInterop/readme.txt
@@ -0,0 +1,42 @@
+# BlazorInteropGenerator
+Generates Blazor -> Javascript strongly typed interop methods, by parsing the Javascript it self and generating extension methods for IJSRuntime.
+
+## Usage
+
+Firstly, add the project from Nuget - [GoLive.Generator.BlazorInterop](https://www.nuget.org/packages/GoLive.Generator.BlazorInterop/), then add an AdditionalFile in your .csproj named "BlazorInterop.json", like so:
+
+```
+<ItemGroup>
+     <AdditionalFiles Include="BlazorInterop.json" />
+</ItemGroup>
+```
+
+Once that's done, add the settings file and change as required:
+
+
+```
+{
+  "Files": [
+    {
+      "Output": "JSInterop.cs",
+      "Source": "wwwroot\\blazorinterop.js",
+      "Namespace": "GoLive.Generator.BlazorInterop.Playground.Client",
+      "ObjectToInterop": "window.blazorInterop",
+      "Init": ["window={}"]
+    }
+  ],
+  "InvokeVoidString": "await JSRuntime.InvokeVoidAsync(\"{0}\", {1});",
+  "InvokeString": "return await JSRuntime.InvokeAsync of T (\"{0}\",{1});"
+}
+
+```
+
+### Description of Each Option
+- Files: An array of file objects specifying details of the files involved in the interop process.
+  - Output: The name of the output C# file to be generated.
+  - Source: The path to the source JavaScript file used for the interop.
+  - Namespace: The namespace used in the generated C# file.
+  - ObjectToInterop: The JavaScript object used for the interop. 
+  - Init: An array of initialization scripts executed before the interop. In this example above, we are interop'ing to window.blazorInterop, and window doesn't exist, so we have to create it.
+- InvokeVoidString: A template string for invoking a JavaScript function that does not return a value using JSRuntime.InvokeVoidAsync. Placeholders {0} and {1} are replaced with the function name and arguments, respectively.
+- InvokeString: A template string for invoking a JavaScript function that returns a value using JSRuntime.InvokeAsync of T . Placeholders {0} and {1} are replaced with the function name and arguments, respectively.
diff --git a/...cg_examples/GoLive.Generator.BlazorInterop/src/.tours/GoLive.Generator.BlazorInterop.tour b/...cg_examples/GoLive.Generator.BlazorInterop/src/.tours/GoLive.Generator.BlazorInterop.tour
@@ -0,0 +1,48 @@
+
+{
+  "$schema": "https://aka.ms/codetour-schema",
+  "title": "GoLive.Generator.BlazorInterop",
+  "steps": 
+  [
+    {
+      "file": "MyTestBlazoe/MyTestBlazoe.csproj",
+      "description": "First, we add Nuget  [GoLive.Generator.BlazorInterop](https://www.nuget.org/packages/GoLive.Generator.BlazorInterop/) in csproj  ",
+      "pattern": "GoLive.Generator.BlazorInterop"
+    }
+
+        ,{
+        "file": "MyTestBlazoe/wwwroot/index.html",
+        "description": "File index.html  ",
+        "pattern": "this is the code"
+        }
+
+        ,{
+        "file": "MyTestBlazoe/Pages/Home.razor",
+        "description": "File Home.razor  ",
+        "pattern": "this is the code"
+        }
+
+        ,{
+        "file": "MyTestBlazoe/wwwroot/blazorinterop.js",
+        "description": "File blazorinterop.js  ",
+        "pattern": "this is the code"
+        }
+
+        ,{
+        "file": "MyTestBlazoe/BlazorInterop.json",
+        "description": "File BlazorInterop.json  ",
+        "pattern": "this is the code"
+        }
+
+
+        ,{
+        "file": "MyTestBlazoe/obj/GX/GoLive.Generator.BlazorInterop/GoLive.Generator.BlazorInterop.JSInteropGenerator/Generated.JSInterop.cs",
+        "description": "Generated File 1  from 1 : Generated.JSInterop.cs ",
+        "line": 1
+        }
+
+  ],
+
+  "ref": "main"
+
+}
diff --git a/v2/rscg_examples/GoLive.Generator.BlazorInterop/src/MyTestBlazoe.sln b/v2/rscg_examples/GoLive.Generator.BlazorInterop/src/MyTestBlazoe.sln
@@ -0,0 +1,22 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.13.35507.96
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MyTestBlazoe", "MyTestBlazoe\MyTestBlazoe.csproj", "{CB1E78AD-C395-48A8-9E8B-8AEB48CB8198}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{CB1E78AD-C395-48A8-9E8B-8AEB48CB8198}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{CB1E78AD-C395-48A8-9E8B-8AEB48CB8198}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{CB1E78AD-C395-48A8-9E8B-8AEB48CB8198}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{CB1E78AD-C395-48A8-9E8B-8AEB48CB8198}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+EndGlobal
diff --git a/v2/rscg_examples/GoLive.Generator.BlazorInterop/src/MyTestBlazoe/App.razor b/v2/rscg_examples/GoLive.Generator.BlazorInterop/src/MyTestBlazoe/App.razor
@@ -0,0 +1,12 @@
+<Router AppAssembly="@typeof(App).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+    </Found>
+    <NotFound>
+        <PageTitle>Not found</PageTitle>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p role="alert">Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>
diff --git a/v2/rscg_examples/GoLive.Generator.BlazorInterop/src/MyTestBlazoe/BlazorInterop.json b/v2/rscg_examples/GoLive.Generator.BlazorInterop/src/MyTestBlazoe/BlazorInterop.json
@@ -0,0 +1,14 @@
+{
+  "Files": [
+    {
+      "Output_DeleteThis_ToHave_InYourProject": "JSInterop.cs",
+      "ClassName": "JSInterop",
+      "Source": "wwwroot\\blazorinterop.js",
+      "Namespace": "GoLive.Generator.BlazorInterop.Playground.Client",
+      "ObjectToInterop": "window.blazorInterop",
+      "Init": ["window={}"]
+    }
+  ],
+  "InvokeVoidString": "await JSRuntime.InvokeVoidAsync(\"{0}\", {1});",
+  "InvokeString": "return await JSRuntime.InvokeAsync<T>(\"{0}\",{1});"
+}
diff --git a/v2/rscg_examples/GoLive.Generator.BlazorInterop/src/MyTestBlazoe/Layout/MainLayout.razor b/v2/rscg_examples/GoLive.Generator.BlazorInterop/src/MyTestBlazoe/Layout/MainLayout.razor
@@ -0,0 +1,16 @@
+@inherits LayoutComponentBase
+<div class="page">
+    <div class="sidebar">
+        <NavMenu />
+    </div>
+
+    <main>
+        <div class="top-row px-4">
+            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+        </div>
+
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+</div>
diff --git a/v2/rscg_examples/GoLive.Generator.BlazorInterop/src/MyTestBlazoe/Layout/MainLayout.razor.css b/v2/rscg_examples/GoLive.Generator.BlazorInterop/src/MyTestBlazoe/Layout/MainLayout.razor.css
@@ -0,0 +1,77 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+        text-decoration: none;
+    }
+
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
+
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Generates strongly typed methods that interop into Javascript.