Skip to content

Commit 1b42bf8

Browse files
jesperhoyjesperhoy
committed
Added JSBuilder utility class
1 parent a2b279a commit 1b42bf8

File tree

6 files changed

+135
-11
lines changed

6 files changed

+135
-11
lines changed

‎README.md‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Vue.js ASP.NET Web Forms Helpers
22

3-
This library (.NET Framework 4.5) contains 3 ASP.NET Web Forms controls to simplify integrating Vue.js with ASP.NET Web Forms.
3+
This library (.NET Framework 4.5) contains 3 ASP.NET Web Forms controls and a utility class to simplify integrating Vue.js with ASP.NET Web Forms.
44

5-
The **Component** and **App** controls can either render for Vue.js or for the [Vue Light .NET Compiler](https://github.com/jesperhoy/VueLight) (no reactivity) by setting the "VueLight" attribute (false/true).
5+
These "helpers" can either render for Vue.js or for the [Vue Light .NET Compiler](https://github.com/jesperhoy/VueLight) (no reactivity).
66

77
## How to use
88

@@ -25,8 +25,19 @@ And then use the controls like this:
2525
</vue:App>
2626

2727

28+
You can use the utility class (JSBuilder) like this (C#):
2829

29-
## ASP.NET Web Forms controls
30+
var b = new VueJSWebForms.JSBuilder();
31+
b.AddVueFileComponent("/car.vue");
32+
b.AddVueFileComponent("/plane.vue");
33+
b.AddVueFileApp("/app.vue","MyData");
34+
var Script = b.ToString();
35+
// Optionally cache the Script here...
36+
Response.Write(Script);
37+
38+
39+
40+
## Web Forms controls
3041

3142
- **Component**
3243

@@ -61,27 +72,31 @@ And then use the controls like this:
6172
- `ID` - will be rendered as the ID for the script tag.
6273

6374

75+
## JSBuilder utility class
76+
77+
This class can be used to build a JavaScript string from multiple .vue files and/or string templates, and then render this to the browser - and possibly caching / saving the result for optimization.
78+
79+
To use the class, instantiate a new instance, use the Add... methods to include Vue.js components / apps, and finally retrieve the JavaScript using the ToString() method.
80+
6481
## Examples
6582

6683
- [Using Component and App controls with Vue.js](sample-web-site/sample-vuejs.aspx)
6784
- [Using Component and App controls with Vue Light .NET Compiler](sample-web-site/sample-vuelight.aspx)
85+
- [Using Component control with .vue file](sample-web-site/sample-vue-file.aspx)
6886
- [Using Template control](sample-web-site/sample-template.aspx)
69-
- [Using .vue file](sample-web-site/sample-vue-file.aspx)
70-
87+
- [Using JSBuilder utility class](sample-web-site/sample-jsbuilder.aspx)
7188

7289
## Note about .vue files
7390

74-
You can specify a .vue file in the `File` parameter of the **Component** and **App** controls
91+
You can specify a .vue file in the `File` parameter of the **Component** and **App** controls, and as a parameter with the JSBuilder utility class Add... methods.
7592

7693
Only the most basic .vue file layout is supported:
7794
- The .vue file must have exactly one `<template>` section, one `<script>` section, and NO `<style>` section.
7895
- The `<script>` section must start with `export default {`
7996

8097
See [car.vue](sample-web-site/car.vue) as an example.
8198

82-
For now, the .vue file `<script>` section will only be included in the rendered JavaScript when the control's
83-
`VueLight` attribute set to false (or is not present).
84-
99+
The .vue file `<script>` section will only be included in the rendered JavaScript when rendering for Vue.js (not Vue Light).
85100

86101

87102
## License

‎sample-web-site/Bin/VueJSWebForms.dll‎

1.5 KB
Binary file not shown.

‎sample-web-site/sample-jsbuilder.aspx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<%@ Page Language="C#" %>
2+
<html>
3+
<head>
4+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
5+
</head>
6+
<body>
7+
8+
<div id="app"></div>
9+
10+
<script>
11+
var MyData = {
12+
title: "Age of cars",
13+
cars: [{ Make: "Buick", Year: 2001 },
14+
{ Make: "Pontiac", Year: 1998 },
15+
{ Make: "BMW", Year: 2003 },
16+
{ Make: "Nissan", Year: 2015 }]
17+
};
18+
19+
<% var b = new VueJSWebForms.JSBuilder();
20+
b.AddVueFileComponent("/car.vue");
21+
b.AddApp("MyData",
22+
"<div><h1>{{title}}</h1><ul><car v-for=\"car in cars\" :make=\"car.Make\" :year=\"car.Year\" /></ul></div>");
23+
var Script = b.ToString();
24+
Response.Write(Script); %>
25+
</script>
26+
27+
</body>
28+
</html>

‎src/JSBuilder.vb‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
Public Class JSBuilder
2+
3+
Private VueLight As Boolean = False
4+
Private sb As New System.Text.StringBuilder
5+
Private CompLst As New HashSet(Of String)
6+
7+
Public Sub New()
8+
REM nothing
9+
End Sub
10+
11+
Public Sub New(vueLight As Boolean)
12+
Me.VueLight = vueLight
13+
End Sub
14+
15+
Public Sub AddVueFileComponent(file As String, Optional name As String = Nothing)
16+
Dim f = ParseVueFile(file)
17+
18+
REM if Name is blank - use file name
19+
If String.IsNullOrEmpty(name) Then
20+
name = file.Substring(file.LastIndexOf("/") + 1)
21+
name = name.Substring(0, name.IndexOf(".")).ToLower
22+
End If
23+
24+
RenderComponent(name, f.Template, f.Script)
25+
End Sub
26+
27+
Public Sub AddComponent(name As String, template As String, Optional script As String = "{}")
28+
RenderComponent(name, template, script)
29+
End Sub
30+
31+
Private Sub RenderComponent(name As String, tmpl As String, scrpt As String)
32+
If VueLight Then
33+
Dim co = New CompilerOptions
34+
For Each cmp In CompLst
35+
co.Components.Add(cmp, "VLC_" & cmp)
36+
Next
37+
CompLst.Add(name)
38+
sb.AppendLine("var VLC_" & name & "=" & Compiler.Compile(tmpl, co) & ";")
39+
Else 'VueJS
40+
sb.AppendLine("Vue.component('" & name & "', {" & vbCrLf &
41+
" template: " & JSStringEncode(tmpl) & "," & vbCrLf &
42+
scrpt.Substring(1).Trim & ");")
43+
End If
44+
End Sub
45+
46+
Public Sub AddVueFileApp(file As String, dataJS As String, Optional name As String = "app")
47+
Dim f = ParseVueFile(file)
48+
RenderApp(name, dataJS, f.Template, f.Script)
49+
End Sub
50+
51+
Public Sub AddApp(dataJS As String, template As String, Optional script As String = "{}", Optional name As String = "app")
52+
RenderApp(name, dataJS, template, script)
53+
End Sub
54+
55+
Private Sub RenderApp(name As String, dataJS As String, tmpl As String, scrpt As String)
56+
If VueLight Then
57+
Dim co = New CompilerOptions
58+
For Each cmp In CompLst
59+
co.Components.Add(cmp, "VLC_" & cmp)
60+
Next
61+
sb.AppendLine("(function() {")
62+
sb.AppendLine(" var data=" & dataJS & ";")
63+
sb.AppendLine(" var render=" & Compiler.Compile(tmpl, co) & ";")
64+
sb.AppendLine(" document.write(render(data));")
65+
sb.AppendLine("})();")
66+
Else 'VueJS
67+
' writer.WriteLine("<div id=""" & Name & """></div>")
68+
sb.AppendLine("var " & name & "=new Vue({" & vbCrLf &
69+
" el: '#" & name & "'," & vbCrLf &
70+
" template: " & JSStringEncode(tmpl) & "," & vbCrLf &
71+
" data: " & dataJS & "," & vbCrLf &
72+
scrpt.Substring(1).Trim & ");")
73+
End If
74+
End Sub
75+
76+
Public Overrides Function ToString() As String
77+
Return sb.ToString
78+
End Function
79+
80+
End Class

‎src/My Project/AssemblyInfo.vb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,5 @@ Imports System.Runtime.InteropServices
3131
' by using the '*' as shown below:
3232
' <Assembly: AssemblyVersion("1.0.*")>
3333

34-
<Assembly: AssemblyVersion("1.4.0.0")>
35-
<Assembly: AssemblyFileVersion("1.4.0.0")>
34+
<Assembly: AssemblyVersion("1.5.0.0")>
35+
<Assembly: AssemblyFileVersion("1.5.0.0")>

‎src/VueJSWebForms.vbproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
<Import Include="System.Linq" />
6060
</ItemGroup>
6161
<ItemGroup>
62+
<Compile Include="JSBuilder.vb" />
6263
<Compile Include="modHelpers.vb" />
6364
<Compile Include="VueTemplate.vb" />
6465
<Compile Include="Compiler.vb" />

0 commit comments

Comments
 (0)