vaderjs 1.3.0 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/vader-min.js +1 -0
  3. package/vader.js +402 -312
  4. package/worker-min.js +1 -0
  5. package/worker.js +207 -154
package/worker-min.js ADDED
@@ -0,0 +1 @@
1
+ onmessage=e=>{let a=Date.now(),l=e.data.strings,s=e.data.args,t="",r=e.data.location.split("/").slice(0,-1).join("/"),c="";for(let e=0;e<l.length;e++)c+=l[e],e<s.length&&(c+=s[e]);let o=c.match(/--([^>]*)--/gs);if(o)for(;o.length;){let e=o.pop();console.log(e),c=c.replace(e,"")}if(c=c.replace(/(#+)(.*)/g,((e,a,l)=>{if(console.log(e),e.includes("<")&&e.includes(">"))return e;{let e=a.length;return`<h ${e} class="markdown_heading">${l}</h${e}>`}})),c=c.replace(/\*\*(.*?)\*\*/g,((e,a)=>`<b class="markdown_bold">${a}</b>`)),c=c.replace(/\*(.*?)\*/g,((e,a)=>`<i class="markdown_italic">${a}</i>`)),c=c.replace(/`(.*?)`/g,((e,a)=>`<code>${a}</code>`)),c=c.replace(/\[([^\]]+)\]\(([^)]+)\)/g,((e,a,l)=>`<a class="markdown_link" href="${l}">${a}</a>`)),c=c.replace(/!\[([^\]]+)\]\(([^)]+)\)/g,((e,a,l)=>`<img class="markdown_image" src="${l}" alt="${a}" />`)),c.split("\n").forEach(((e,a,l)=>{e.match(/^\s*-\s+(.*?)$/gm)&&(c=0!==a&&l[a-1].match(/^\s*-\s+(.*?)$/gm)?a!==l.length-1&&l[a+1].match(/^\s*-\s+(.*?)$/gm)?c.replace(e,`<li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`):c.replace(e,`<li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li></ul>`):c.replace(e,`<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside"><li>${e.replace(/^\s*-\s+(.*?)$/gm,"$1")}</li>`))})),c.split("\n").forEach(((e,a,l)=>{e.match(/^\s*\d+\.\s+(.*?)$/gm)&&(c=0!==a&&l[a-1].match(/^\s*\d+\.\s+(.*?)$/gm)?a!==l.length-1&&l[a+1].match(/^\s*\d+\.\s+(.*?)$/gm)?c.replace(e,`<li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`):c.replace(e,`<li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li></ol>`):c.replace(e,`<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${e.replace(/^\s*\d+\.\s+(.*?)$/gm,"$1")}</li>`))})),c=c.replace(/^\s*-\s+(.*?)$/gm,((e,a)=>`<li class="markdown_list_item">${a}</li>`)),c=c.replace(/^\s*---\s*$/gm,'<hr class="markdown_horizontal" />'),c=c.replace(/^\s*> (.*)$/gm,((e,a)=>`<blockquote class="markdown_blockquote">${a}</blockquote>`)),c=c.replace(/((?: *\|.*?)+)\n((?: *\|.*?)+)/gm,((e,a,l)=>{const s=a.split("|").slice(1,-1),t=l.split("|").slice(1,-1);let r='<table class="markdown_table">';return r+='<thead class="markdown_table_head"><tr class="markdown_table_row">',s.forEach((e=>{r+=`<th class="markdown_table_header_cell">${e}</th>`})),r+='</tr></thead><tbody class="markdown_table_body"><tr class="markdown_table_row">',t.forEach((e=>{r+=`<td class="markdown_table_body_cell">${e}</td>`})),r+="</tr></tbody></table>",r})),!c.includes("<body>"))throw new Error(`Vader Error: You must enclose your html in a body tag for all components. \n\n${c}`);c=c.replace(/classname/g,"class");let i=c.match(/<img([^>]*)>/g);if(i)for(let a=0;a<i.length;a++){let l=i[a],s=l.match(/src="([^"]*)"/),t=l.match(/alt="([^"]*)"/);if(s)if(s[1].includes("http")||c.includes("\x3c!-- #vader-disable_relative-paths --\x3e")){if(!s[1].includes("http")&&s[1].startsWith(".")&&!c.includes("\x3c!-- #vader-disable_relative-paths --\x3e"))throw new Error(`Vader Error: You cannot use absolute paths since relative paths are not disabled in ${e.data.file}. Use relative paths instead. \n\n${s[1]}`)}else c=c.replace(s[1],`${r}/${s[1]}`);if(!t&&!c.includes("\x3c!-- #vader-disable_accessibility --\x3e"))throw new Error(`Vader Error: You must include an alt attribute in the image tag \n\n${l} of class ${e.data.name}. `);caches.match(`${r}/${s[1]}`)?console.log("already cached",caches.match(`${r}/${s[1]}`)):caches.open("vader").then((e=>{e.add(`${r}/${s[1]}`),console.log("cached",`${r}/${s[1]}`)})).catch((e=>{console.log(e)}))}let n=c.match(/href="([^"]*)"/g);if(n)for(;n.length;){let a=n.pop();if(a=a.replace('href="',"").replace('"',""),a.includes("http")||c.includes("\x3c!-- #vader-disable_relative-paths --\x3e")){if(!a.includes("http")&&a.startsWith(".")&&!c.includes("\x3c!-- #vader-disable_relative-paths --\x3e"))throw new Error(`Vader Error: You cannot use absolute paths since relative paths are not disabled in ${e.data.file}. Use relative paths instead. \n\n${a}`)}else c=c.replace(`href="${a}"`,`href="#${a}"`)}let d=Date.now()-a,h=!1;(r.includes("localhost")||r.includes("127.0.0.1")&&!h)&&(h=!0,c+=`\${console.log('%c${e.data.name} component rendered in ${d}ms','color:#fff;background:#000;padding:5px;border-radius:5px;font-size:12px;font-weight:bold'),""}`);const p=c.split("<script>");p&&p.forEach(((e,a)=>{if(0===a)c=e;else{if(e.includes("// <![CDATA[ <-- For SVG support"))return;let a=e.split("<\/script>")[0];t+=a}}));let $=c.match(/(\$\(.*?\))/gs);if($)for(;$.length;){let e=$.pop();c=c.replace(e,`\${${e.replace("$(","").replace(")","")}}`)}postMessage({template:`<div data-component=${e.data.name}>${c}</div>`,js:t||""})};
package/worker.js CHANGED
@@ -1,173 +1,226 @@
1
1
 
2
2
  onmessage = (e)=>{
3
- let time_started = Date.now()
4
- let strings = e.data.strings
5
- let args = e.data.args
6
- let l = e.data.location.split('/').slice(0,-1).join('/')
7
- let result = "";
8
- for (let i = 0; i < strings.length; i++) {
9
- result += strings[i];
10
- if (i < args.length) {
11
- result += args[i];
12
- }
3
+ let time_started = Date.now()
4
+ let strings = e.data.strings
5
+ let args = e.data.args
6
+ let js = ''
7
+ let l = e.data.location.split('/').slice(0,-1).join('/')
8
+ let result = "";
9
+ for (let i = 0; i < strings.length; i++) {
10
+ result += strings[i];
11
+ if (i < args.length) {
12
+ result += args[i];
13
13
  }
14
+ }
14
15
 
15
- let comments = result.match(/--([^>]*)--/gs)
16
- if(comments){
17
- while(comments.length){
18
- let comment = comments.pop()
19
- console.log(comment)
20
- // @ts-ignore
21
- result = result.replace(comment,'')
22
- }
23
- }
16
+ let comments = result.match(/--([^>]*)--/gs)
17
+ if(comments){
18
+ while(comments.length){
19
+ let comment = comments.pop()
20
+ console.log(comment)
21
+ // @ts-ignore
22
+ result = result.replace(comment,'')
23
+ }
24
+ }
25
+
26
+
27
+ // Convert headings (e.g., #1-6 Heading => <h1-6>Heading</h1-6>)
28
+ // @ts-ignore
29
+ result = result.replace(/(#+)(.*)/g, (match, hashes, text) => {
30
+ console.log(match)
31
+ if(!match.includes('<') || !match.includes('>')){
32
+ let level = hashes.length;
33
+ return `<h ${level} class="markdown_heading">${text}</h${level}>`;
34
+ }else{
35
+ return match
36
+ }
37
+ });
38
+
39
+
24
40
 
25
41
 
26
- // Convert headings (e.g., #1-6 Heading => <h1-6>Heading</h1-6>)
27
- // @ts-ignore
28
- result = result.replace(/(#+)(.*)/g, (match, hashes, text) => {
29
- if(!match.includes('<')){
30
- let level = hashes.length;
31
- return `<h ${level} class="markdown_heading">${text}</h${level}>`;
32
- }
33
- });
42
+ // Convert bold (e.g., **Bold** => <b>Bold</b>)
43
+ result = result.replace(/\*\*(.*?)\*\*/g, (match, text) => {
44
+ return `<b class="markdown_bold">${text}</b>`;
45
+ });
34
46
 
35
-
36
- // Convert bold (e.g., **Bold** => <b>Bold</b>)
37
- result = result.replace(/\*\*(.*?)\*\*/g, (match, text) => {
38
- return `<b class="markdown_bold">${text}</b>`;
39
- });
40
-
41
- // Convert italic (e.g., *Italic* => <i>Italic</i>)
42
- result = result.replace(/\*(.*?)\*/g, (match, text) => {
43
- return `<i class="markdown_italic">${text}</i>`;
44
- });
45
-
46
- // Convert code (e.g., `code` => <code>code</code>)
47
- result = result.replace(/`(.*?)`/g, (match, text) => {
48
- return `<code>${text}</code>`;
49
- });
50
-
51
- // Convert links (e.g., [Text](URL) => <a href="URL">Text</a>)
52
- result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => {
53
- return `<a class="markdown_link" href="${url}">${text}</a>`;
54
- });
55
-
56
- // Convert images (e.g., ![Alt](URL) => <img src="URL" alt="Alt" />)
57
- result = result.replace(/!\[([^\]]+)\]\(([^)]+)\)/g, (match, alt, src) => {
58
- return `<img class="markdown_image" src="${src}" alt="${alt}" />`;
59
- });
60
-
61
- // Convert unordered lists (e.g., * Item => <ul><li>Item</li></ul>)
62
- result.split('\n').forEach((line, index, arr) => {
63
- if (line.match(/^\s*-\s+(.*?)$/gm)) {
64
- if (index === 0 || !arr[index - 1].match(/^\s*-\s+(.*?)$/gm)) {
65
- result = result.replace(line, `<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside;"><li>${line.replace(/^\s*-\s+(.*?)$/gm, '$1')}</li>`);
66
- } else if (index === arr.length - 1 || !arr[index + 1].match(/^\s*-\s+(.*?)$/gm)) {
67
- result = result.replace(line, `<li>${line.replace(/^\s*-\s+(.*?)$/gm, '$1')}</li></ul>`);
68
- } else {
69
- result = result.replace(line, `<li>${line.replace(/^\s*-\s+(.*?)$/gm, '$1')}</li>`);
70
- }
47
+ // Convert italic (e.g., *Italic* => <i>Italic</i>)
48
+ result = result.replace(/\*(.*?)\*/g, (match, text) => {
49
+ return `<i class="markdown_italic">${text}</i>`;
50
+ });
51
+
52
+ // Convert code (e.g., `code` => <code>code</code>)
53
+ result = result.replace(/`(.*?)`/g, (match, text) => {
54
+ return `<code>${text}</code>`;
55
+ });
56
+
57
+ // Convert links (e.g., [Text](URL) => <a href="URL">Text</a>)
58
+ result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => {
59
+ return `<a class="markdown_link" href="${url}">${text}</a>`;
60
+ });
61
+
62
+ // Convert images (e.g., ![Alt](URL) => <img src="URL" alt="Alt" />)
63
+ result = result.replace(/!\[([^\]]+)\]\(([^)]+)\)/g, (match, alt, src) => {
64
+ return `<img class="markdown_image" src="${src}" alt="${alt}" />`;
65
+ });
66
+
67
+ // Convert unordered lists (e.g., * Item => <ul><li>Item</li></ul>)
68
+ result.split('\n').forEach((line, index, arr) => {
69
+ if (line.match(/^\s*-\s+(.*?)$/gm)) {
70
+ if (index === 0 || !arr[index - 1].match(/^\s*-\s+(.*?)$/gm)) {
71
+ result = result.replace(line, `<ul class="markdown_unordered" style="list-style-type:disc;list-style:inside"><li>${line.replace(/^\s*-\s+(.*?)$/gm, '$1')}</li>`);
72
+ } else if (index === arr.length - 1 || !arr[index + 1].match(/^\s*-\s+(.*?)$/gm)) {
73
+ result = result.replace(line, `<li>${line.replace(/^\s*-\s+(.*?)$/gm, '$1')}</li></ul>`);
74
+ } else {
75
+ result = result.replace(line, `<li>${line.replace(/^\s*-\s+(.*?)$/gm, '$1')}</li>`);
71
76
  }
72
- });
73
-
74
-
75
- // Convert ordered lists (e.g., 1. Item => <ol><li>Item</li></ol>) in order
76
-
77
- result.split('\n').forEach((line, index, arr) => {
78
- if (line.match(/^\s*\d+\.\s+(.*?)$/gm)) {
79
- if (index === 0 || !arr[index - 1].match(/^\s*\d+\.\s+(.*?)$/gm)) {
80
- result = result.replace(line, `<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, '$1')}</li>`);
81
- } else if (index === arr.length - 1 || !arr[index + 1].match(/^\s*\d+\.\s+(.*?)$/gm)) {
82
- result = result.replace(line, `<li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, '$1')}</li></ol>`);
83
- } else {
84
- result = result.replace(line, `<li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, '$1')}</li>`);
85
- }
77
+ }
78
+ });
79
+
80
+ // Convert ordered lists (e.g., 1. Item => <ol><li>Item</li></ol>) in order
81
+
82
+ result.split('\n').forEach((line, index, arr) => {
83
+ if (line.match(/^\s*\d+\.\s+(.*?)$/gm)) {
84
+ if (index === 0 || !arr[index - 1].match(/^\s*\d+\.\s+(.*?)$/gm)) {
85
+ result = result.replace(line, `<ol class="markdown_ordered" style="list-style-type:decimal;"><li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, '$1')}</li>`);
86
+ } else if (index === arr.length - 1 || !arr[index + 1].match(/^\s*\d+\.\s+(.*?)$/gm)) {
87
+ result = result.replace(line, `<li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, '$1')}</li></ol>`);
88
+ } else {
89
+ result = result.replace(line, `<li>${line.replace(/^\s*\d+\.\s+(.*?)$/gm, '$1')}</li>`);
86
90
  }
87
- });
91
+ }
92
+ });
88
93
 
89
-
90
- result = result.replace(/^\s*-\s+(.*?)$/gm, (match, text) => {
91
- return `<li class="markdown_list_item">${text}</li>`;
94
+
95
+ result = result.replace(/^\s*-\s+(.*?)$/gm, (match, text) => {
96
+ return `<li class="markdown_list_item">${text}</li>`;
97
+ });
98
+ result = result.replace(/^\s*---\s*$/gm, '<hr class="markdown_horizontal" />');
99
+
100
+ // Convert blockquotes (e.g., > Quote => <blockquote>Quote</blockquote>)
101
+ result = result.replace(/^\s*> (.*)$/gm, (match, text) => {
102
+ return `<blockquote class="markdown_blockquote">${text}</blockquote>`;
103
+ });
104
+
105
+ // Convert tables (e.g., | Header | Cell | => <table><thead><tr><th>Header</th><th>Cell</th></tr></thead></table>)
106
+ result = result.replace(/((?: *\|.*?)+)\n((?: *\|.*?)+)/gm, (match, header, cell) => {
107
+ const headerCells = header.split('|').slice(1, -1);
108
+ const cells = cell.split('|').slice(1, -1);
109
+ let table = '<table class="markdown_table">';
110
+ table += '<thead class="markdown_table_head"><tr class="markdown_table_row">';
111
+ headerCells.forEach((headerCell) => {
112
+ table += `<th class="markdown_table_header_cell">${headerCell}</th>`;
113
+ });
114
+ table += '</tr></thead><tbody class="markdown_table_body"><tr class="markdown_table_row">';
115
+ cells.forEach((cell) => {
116
+ table += `<td class="markdown_table_body_cell">${cell}</td>`;
92
117
  });
93
- result = result.replace(/^\s*---\s*$/gm, '<hr class="markdown_horizontal" />');
118
+ table += '</tr></tbody></table>';
119
+ return table;
120
+ });
121
+
94
122
 
95
-
96
-
97
-
98
-
99
- if(!result.includes('<body>')){
100
- throw new Error(`Vader Error: You must enclose your html in a body tag for all components. \n\n${result}`)
123
+
124
+
125
+ if(!result.includes('<body>')){
126
+ throw new Error(`Vader Error: You must enclose your html in a body tag for all components. \n\n${result}`)
127
+ }
128
+ /**
129
+ * @type {string[]}
130
+ * @description - grabbing all className attributes and replace them with class
131
+ */
132
+ // @ts-ignore
133
+ result = result.replace(/classname/g,'class')
134
+ /**
135
+ * @type {string[]}
136
+ * @description - grabbing all image tags and replace the src attribute with the absolute path
137
+ */
138
+ // @ts-ignore
139
+ let images = result.match(/<img([^>]*)>/g)
140
+ if(images){
141
+ for(let i = 0; i < images.length; i++){
142
+ let image = images[i]
143
+ let src = image.match(/src="([^"]*)"/)
144
+ let alt = image.match(/alt="([^"]*)"/)
145
+ if(src){
146
+ if(!src[1].includes('http') && !result.includes('<!-- #vader-disable_relative-paths -->')){
147
+ // @ts-ignore
148
+ result = result.replace(src[1],`${l}/${src[1]}`)
149
+ } else if(!src[1].includes('http') && src[1].startsWith('.') && !result.includes('<!-- #vader-disable_relative-paths -->')){
150
+ throw new Error(`Vader Error: You cannot use absolute paths since relative paths are not disabled in ${e.data.file}. Use relative paths instead. \n\n${src[1]}`)
101
151
  }
102
- /**
103
- * @type {string[]}
104
- * @description - grabbing all className attributes and replace them with class
105
- */
106
- // @ts-ignore
107
- result = result.replace(/classname/g,'class')
108
- /**
109
- * @type {string[]}
110
- * @description - grabbing all image tags and replace the src attribute with the absolute path
111
- */
152
+ }
153
+ if(!alt && !result.includes('<!-- #vader-disable_accessibility -->')){
154
+ throw new Error(`Vader Error: You must include an alt attribute in the image tag \n\n${image} of class ${e.data.name}. `)
155
+ }
156
+
112
157
  // @ts-ignore
113
- let images = result.match(/<img([^>]*)>/g)
114
- if(images){
115
- for(let i = 0; i < images.length; i++){
116
- let image = images[i]
117
- let src = image.match(/src="([^"]*)"/)
118
- let alt = image.match(/alt="([^"]*)"/)
119
- if(src){
120
- if(!src[1].includes('http') || !result.includes('<!-- #vader-disable_relative-paths -->')){
121
- // @ts-ignore
122
- result = result.replace(src[1],`${l}/${src[1]}`)
123
- }else{
124
- throw new Error(`Vader Error: You cannot use relative paths in the src attribute of ${src[0]}. Use absolute paths instead. \n\n${src[0]}`)
125
- }
126
- }
127
- if(!alt && !result.includes('<!-- #vader-disable_accessibility -->')){
128
- throw new Error(`Vader Error: You must include an alt attribute in the image tag \n\n${image} of class ${e.data.name}. `)
129
- }
130
-
158
+ if(!caches.match(`${l}/${src[1]}`)){
159
+ caches.open('vader').then((cache)=>{
160
+ // @ts-ignore
161
+ cache.add(`${l}/${src[1]}`)
162
+ // @ts-ignore
163
+ console.log('cached', `${l}/${src[1]}`)
164
+ }).catch((err)=>{
165
+ console.log(err)
166
+ })
167
+ }else{
131
168
  // @ts-ignore
132
- if(!caches.match(`${l}/${src[1]}`)){
133
- caches.open('vader').then((cache)=>{
134
- // @ts-ignore
135
- cache.add(`${l}/${src[1]}`)
136
- // @ts-ignore
137
- console.log('cached', `${l}/${src[1]}`)
138
- }).catch((err)=>{
139
- console.log(err)
140
- })
141
- }else{
142
- // @ts-ignore
143
- console.log('already cached', caches.match(`${l}/${src[1]}`))
144
- }
145
- }
169
+ console.log('already cached', caches.match(`${l}/${src[1]}`))
146
170
  }
171
+ }
172
+ }
173
+
174
+ let href = result.match(/href="([^"]*)"/g)
175
+ if(href){
176
+ while(href.length){
177
+ let h = href.pop()
178
+ // @ts-ignore
179
+ h = h.replace('href="','').replace('"','')
180
+ if(!h.includes('http') && !result.includes('<!-- #vader-disable_relative-paths -->')){
181
+ result = result.replace(`href="${h}"`,`href="#${h}"`)
182
+ }else if(!h.includes('http') && h.startsWith('.') && !result.includes('<!-- #vader-disable_relative-paths -->')){
183
+ throw new Error(`Vader Error: You cannot use absolute paths since relative paths are not disabled in ${e.data.file}. Use relative paths instead. \n\n${h}`)
184
+ }
185
+ }
186
+ }
187
+
188
+ let time_ended = Date.now()
189
+ let time_taken = time_ended - time_started
190
+ let hasran = false
191
+ if(l.includes('localhost') || l.includes('127.0.0.1') && !hasran){
192
+ hasran = true
193
+ result+= `\$\{console.log('%c${e.data.name} component rendered in ${time_taken}ms','color:#fff;background:#000;padding:5px;border-radius:5px;font-size:12px;font-weight:bold'),""\}`
194
+ }
195
+
196
+
197
+ const d = result.split('<script>')
147
198
 
148
- let href = result.match(/href="([^"]*)"/g)
149
- if(href){
150
- while(href.length){
151
- let h = href.pop()
152
- // @ts-ignore
153
- h = h.replace('href="','').replace('"','')
154
- if(!h.includes('http') || !result.includes('<!-- #vader-disable_relative-paths -->')){
155
- result = result.replace(`href="${h}"`,`href="#${h}"`)
156
- }else{
157
- throw new Error(`Vader Error: You cannot use relative paths in ${e.data.file}. Use absolute paths instead. \n\n${h}`)
158
- }
199
+ if (d) {
200
+ d.forEach((scriptTag, index) => {
201
+ if (index === 0) {
202
+ result = scriptTag;
203
+ } else {
204
+ if(scriptTag.includes('// <![CDATA[ <-- For SVG support')){
205
+ return
159
206
  }
160
- }
161
-
162
- let time_ended = Date.now()
163
- let time_taken = time_ended - time_started
164
- let hasran = false
165
- if(l.includes('localhost') || l.includes('127.0.0.1') && !hasran){
166
- hasran = true
167
- result+= `\$\{console.log('%c${e.data.name} component rendered in ${time_taken}ms','color:#fff;background:#000;padding:5px;border-radius:5px;font-size:12px;font-weight:bold'),""\}`
168
- }
169
-
170
-
171
- postMessage(`<div data-component=${e.data.name}>${result}</div>`)
207
+ let script = scriptTag.split('</script>')[0];
208
+ js += script;
209
+ }
210
+ });
211
+ }
172
212
 
173
- }
213
+ let jstemplates = result.match(/(\$\(.*?\))/gs)
214
+ if(jstemplates){
215
+ while(jstemplates.length){
216
+ let jstemplate = jstemplates.pop()
217
+ // @ts-ignore
218
+ result = result.replace(jstemplate,`$\{${jstemplate.replace('$(','').replace(')','')}\}`)
219
+ }
220
+ }
221
+ postMessage({
222
+ template: `<div data-component=${e.data.name}>${result}</div>`,
223
+ js: js ? js : ''
224
+ })
225
+
226
+ }