@cocreate/server-side-render 1.3.36 → 1.3.38

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.
package/docs/index.html CHANGED
@@ -1,101 +1,237 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
3
  <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <meta name="viewport" content="width=device-width, initial-scale=1">
7
- <title>CoCreate-server-side-render Documentation | CoCreateJS </title>
8
- <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
9
- <meta name="description" content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
10
- <meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <title>CoCreate-server-side-render Documentation | CoCreateJS</title>
8
+ <link
9
+ rel="icon"
10
+ type="image/png"
11
+ sizes="32x32"
12
+ href="https://cocreate.app/images/favicon.ico" />
13
+ <meta
14
+ name="description"
15
+ content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
16
+ <meta
17
+ name="keywords"
18
+ content="helper classes, utility classes, css framework, css library, inline style classes" />
11
19
  <meta name="robots" content="index,follow" />
12
-
20
+
13
21
  <!-- CoCreate CSS CDN -->
14
- <link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
15
-
22
+ <link
23
+ rel="stylesheet"
24
+ href="https://cdn.cocreate.app/latest/CoCreate.min.css"
25
+ type="text/css" />
16
26
  </head>
17
27
 
18
28
  <body>
19
- <div collection="" document_id="" name="" id="cocreate-server-side-render">
20
- <div class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
29
+ <div
30
+ collection=""
31
+ document_id=""
32
+ name=""
33
+ id="cocreate-server-side-render">
34
+ <div
35
+ class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
21
36
  <div class="display:flex align-items:center">
22
37
  <h2>CoCreate-server-side-render</h2>
23
38
  </div>
24
- <div class="display:flex align-items:center font-size:20px" share-height="600" share-width="500" share-media="https://via.placeholder.com/300/09f/fff.png">
25
- <a href="https://github.com/CoCreate-app/CoCreate-server-side-render" target="_blank" class="margin-right:15px"><i class="fab fa-github"></i></a>
26
- <a class="margin-right:15px share" share-network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
27
- <a class="margin-right:15px share" share-network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
28
- <a class="margin-right:15px share" share-network='instagram' title="Share on instagram"><i class="fab fa-instagram"></i></a>
29
- <a class="margin-right:15px share" share-network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
39
+ <div
40
+ class="display:flex align-items:center font-size:20px"
41
+ share-height="600"
42
+ share-width="500"
43
+ share-media="https://via.placeholder.com/300/09f/fff.png">
44
+ <a
45
+ href="https://github.com/CoCreate-app/CoCreate-server-side-render"
46
+ target="_blank"
47
+ class="margin-right:15px"
48
+ ><i class="fab fa-github"></i
49
+ ></a>
50
+ <a
51
+ class="margin-right:15px share"
52
+ share-network="twitter"
53
+ title="Share on twitter"
54
+ ><i class="fab fa-twitter"></i
55
+ ></a>
56
+ <a
57
+ class="margin-right:15px share"
58
+ share-network="facebook"
59
+ title="Share on Facebook"
60
+ ><i class="fab fa-facebook"></i
61
+ ></a>
62
+ <a
63
+ class="margin-right:15px share"
64
+ share-network="instagram"
65
+ title="Share on instagram"
66
+ ><i class="fab fa-instagram"></i
67
+ ></a>
68
+ <a
69
+ class="margin-right:15px share"
70
+ share-network="share"
71
+ title="Share on share"
72
+ ><i class="fas fa-share-alt"></i
73
+ ></a>
30
74
  </div>
31
75
  </div>
32
- <p class="max-width:500px margin:20px_10px">A simple HTML5, CSS and pure javascript component. Easy configuration using data-attributes and highly styleable.</h1>
33
- <div id="server-side-render-section" class="display:flex flex-wrap:wrap">
76
+ <h1 class="max-width:500px margin:20px_10px">
77
+ A simple HTML5, CSS and pure javascript component. Easy
78
+ configuration using data-attributes and highly styleable.
79
+ </h1>
80
+ <div
81
+ id="server-side-render-section"
82
+ class="display:flex flex-wrap:wrap">
34
83
  <div class="flex-grow:1 width:300px padding:20px_10px">
35
- <h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Install</h2>
36
- <pre class="margin-top:15px"><code class="language-javascript">npm install cocreate-server-side-render</code></pre>
84
+ <h2
85
+ class="border-bottom:1px_solid_lightgrey padding:5px_0px">
86
+ Install
87
+ </h2>
88
+ <pre
89
+ class="margin-top:15px"><code class="language-javascript">npm install cocreate-server-side-render</code></pre>
37
90
  <p class="padding:10px_0px">Or you can use cdn link:</p>
38
91
  <pre><code class="language-javascript">https://cdn.cocreate.app/js/CoCreate-server-side-render.min.js</code></pre>
39
-
40
- <h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Usage</h2>
41
- <p class="padding:10px_0px">server-side-render usage content</p>
92
+
93
+ <h2
94
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
95
+ Usage
96
+ </h2>
97
+ <p class="padding:10px_0px">
98
+ server-side-render usage content
99
+ </p>
42
100
  <pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
43
-
44
- <h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Reference</h2>
45
- <p class="padding:10px_0px">This is server-side-render reference content</p>
101
+
102
+ <h2
103
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
104
+ Reference
105
+ </h2>
106
+ <p class="padding:10px_0px">
107
+ This is server-side-render reference content
108
+ </p>
46
109
  <pre><code class="language-javascript">&lt;div&gt;&lt;/div&gt;</code></pre>
47
- <p class="padding:10px_0px">This is server-side-render reference content</p>
110
+ <p class="padding:10px_0px">
111
+ This is server-side-render reference content
112
+ </p>
48
113
 
49
- <h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Attributes</h2>
50
- <ul class="list-style-type:none ">
51
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
52
- <h4><span>server-side-render</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
114
+ <h2
115
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
116
+ Attributes
117
+ </h2>
118
+ <ul class="list-style-type:none">
119
+ <li
120
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
121
+ <h4>
122
+ <span>server-side-render</span>
123
+ <span class="cocreate-badge success"
124
+ >string</span
125
+ >
126
+ <span class="cocreate-badge warning"
127
+ >optional</span
128
+ >
129
+ </h4>
53
130
  <p>server-side-render-attribute</p>
54
131
  </li>
55
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
56
- <h4><span>server-side-render</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
132
+ <li
133
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
134
+ <h4>
135
+ <span>server-side-render</span>
136
+ <span class="cocreate-badge success"
137
+ >string</span
138
+ >
139
+ <span class="cocreate-badge warning"
140
+ >optional</span
141
+ >
142
+ </h4>
57
143
  <p>server-side-render-attribute</p>
58
144
  </li>
59
145
  </ul>
60
146
  </div>
61
-
62
- <div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
63
- <!-- SandBox -->
64
- <div class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground">
65
-
66
- <div id="demo-code" resizable class="position:relative height:50%">
67
- <textarea type="code" lang="html" collection="demos" document_id="" name="demo" save="false" id="demo" class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
68
- <div resize="bottom" class="background:lightgrey"></div>
69
- </div>
70
-
71
- <div id="demo-preview" class="position:relative overflow:auto background-color:white">
72
- <div get-value="#demo" class="padding:20px"></div>
73
- </div>
74
-
75
- <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
76
- <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-target="#demo-code"><i class="far fa-eye"></i></a>
77
- <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-target="#demo-code"><i class="fas fa-eye-slash"></i></a>
78
- <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="fa fa-code"></i></a>
79
- <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="fas fa-code"></i></a>
80
- <a class="margin-right:5px" fullscreen target="#playground"><i class="fas fa-expand"></i></a>
81
- </div>
82
-
147
+
148
+ <div
149
+ class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
150
+ <!-- SandBox -->
151
+ <div
152
+ class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
153
+ id="playground">
154
+ <div
155
+ id="demo-code"
156
+ resizable
157
+ class="position:relative height:50%">
158
+ <textarea
159
+ type="code"
160
+ lang="html"
161
+ collection="demos"
162
+ document_id=""
163
+ name="demo"
164
+ save="false"
165
+ id="demo"
166
+ class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
167
+ <div
168
+ resize="bottom"
169
+ class="background:lightgrey"></div>
170
+ </div>
171
+
172
+ <div
173
+ id="demo-preview"
174
+ class="position:relative overflow:auto background-color:white">
175
+ <div get-value="#demo" class="padding:20px"></div>
83
176
  </div>
84
- <!-- End SandBox -->
85
- </div>
177
+
178
+ <div
179
+ class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
180
+ <a
181
+ class="margin-right:10px"
182
+ id="eye"
183
+ show="#eye-slash"
184
+ hide="#eye, #demo-preview"
185
+ toggle="code-height"
186
+ toggle-target="#demo-code"
187
+ ><i class="far fa-eye"></i
188
+ ></a>
189
+ <a
190
+ class="margin-right:10px"
191
+ hidden
192
+ id="eye-slash"
193
+ show="#eye, #demo-preview"
194
+ hide="#eye-slash"
195
+ toggle="code-height"
196
+ toggle-target="#demo-code"
197
+ ><i class="fas fa-eye-slash"></i
198
+ ></a>
199
+ <a
200
+ class="margin-right:10px"
201
+ id="code"
202
+ show="#code-slash"
203
+ hide="#code, #demo-code"
204
+ ><i class="fa fa-code"></i
205
+ ></a>
206
+ <a
207
+ class="margin-right:10px"
208
+ hidden
209
+ id="code-slash"
210
+ show="#code, #demo-code"
211
+ hide="#code-slash"
212
+ ><i class="fas fa-code"></i
213
+ ></a>
214
+ <a
215
+ class="margin-right:5px"
216
+ fullscreen
217
+ target="#playground"
218
+ ><i class="fas fa-expand"></i
219
+ ></a>
220
+ </div>
221
+ </div>
222
+ <!-- End SandBox -->
86
223
  </div>
87
-
88
- </div>
224
+ </div>
89
225
  </div>
90
-
226
+
91
227
  <script>
92
228
  var CoCreateConfig = {
93
- key: '2061acef-0451-4545-f754-60cf8160',
94
- organization_id: '5ff747727005da1c272740ab'
95
- }
229
+ key: "2061acef-0451-4545-f754-60cf8160",
230
+ organization_id: "5ff747727005da1c272740ab",
231
+ };
96
232
  </script>
97
-
233
+
98
234
  <!--CoCreateJS-->
99
235
  <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
100
236
  </body>
101
- </html>
237
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/server-side-render",
3
- "version": "1.3.36",
3
+ "version": "1.3.38",
4
4
  "description": "A simple server-side-render component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
5
5
  "keywords": [
6
6
  "server-side-render",
@@ -59,9 +59,9 @@
59
59
  "webpack-log": "^3.0.1"
60
60
  },
61
61
  "dependencies": {
62
- "@cocreate/docs": "^1.7.11",
63
- "@cocreate/hosting": "^1.10.3",
64
- "@cocreate/utils": "^1.20.9",
62
+ "@cocreate/docs": "^1.7.13",
63
+ "@cocreate/hosting": "^1.10.5",
64
+ "@cocreate/utils": "^1.20.10",
65
65
  "node-html-parser": "^6.1.4"
66
66
  }
67
67
  }
package/release.config.js CHANGED
@@ -1,22 +1,22 @@
1
- module.exports = {
2
- dryRun: false,
3
- branches: ["master"],
4
- plugins: [
5
- "@semantic-release/commit-analyzer",
6
- "@semantic-release/release-notes-generator",
7
- [
8
- "@semantic-release/changelog",
9
- {
10
- changelogFile: "CHANGELOG.md",
11
- },
12
- ],
13
- "@semantic-release/npm",
14
- "@semantic-release/github",
15
- [
16
- "@semantic-release/git",
17
- {
18
- assets: ["CHANGELOG.md", "package.json"],
19
- },
20
- ],
21
- ],
1
+ module.exports = {
2
+ dryRun: false,
3
+ branches: ["master"],
4
+ plugins: [
5
+ "@semantic-release/commit-analyzer",
6
+ "@semantic-release/release-notes-generator",
7
+ [
8
+ "@semantic-release/changelog",
9
+ {
10
+ changelogFile: "CHANGELOG.md",
11
+ },
12
+ ],
13
+ "@semantic-release/npm",
14
+ "@semantic-release/github",
15
+ [
16
+ "@semantic-release/git",
17
+ {
18
+ assets: ["CHANGELOG.md", "package.json"],
19
+ },
20
+ ],
21
+ ],
22
22
  };
package/src/index.js CHANGED
@@ -1,94 +1,94 @@
1
- const { parse } = require("node-html-parser");
2
- const { checkValue } = require("@cocreate/utils");
3
-
4
- class CoCreateServerSideRender {
5
- constructor(crud) {
6
- this.crud = crud;
7
- }
8
-
9
- async HTML(html, organization_id) {
10
- const self = this
11
- let ignoreElement = { INPUT: true, TEXTAREA: true, SELECT: true, LINK: true, IFRAME: true, "COCREATE-SELECT": true }
12
-
13
- let dep = [];
14
- let dbCache = new Map();
15
-
16
- async function render(html, lastKey) {
17
- const dom = parse(html);
18
- for (let el of dom.querySelectorAll(
19
- "[collection][name][document_id]"
20
- )) {
21
- let meta = el.attributes;
22
-
23
- if (ignoreElement[el.tagName])
24
- continue;
25
-
26
- if (el.tagName == "DIV" && !el.classList.contains('domEditor'))
27
- continue;
28
-
29
- if (el.classList.contains('domEditor') && el.closest('.template'))
30
- continue;
31
-
32
- if (el.hasAttribute('actions'))
33
- continue;
34
-
35
- let _id = meta["document_id"],
36
- collection = meta['collection'],
37
- name = meta['name'];
38
- let key = _id + collection + name;
39
- if (!_id || !name || !collection) continue;
40
- if (!checkValue(_id) || !checkValue(name) || !checkValue(collection)) continue;
41
- if (dep.includes(key))
42
- throw new Error(
43
- `infinite loop: ${lastKey} ${collection} ${name} ${_id} has been already rendered`
44
- );
45
- else
46
- dep.push(key)
47
-
48
- let cacheKey = _id + collection;
49
- let record;
50
- if (dbCache.has(cacheKey))
51
- record = dbCache.get(cacheKey)
52
- else {
53
- record = await self.crud.readDocument({
54
- collection,
55
- document: {
56
- _id
57
- },
58
- organization_id
59
- });
60
- if (record && record.document && record.document[0])
61
- record = record.document[0]
62
-
63
- dbCache.set(cacheKey, record)
64
- }
65
-
66
- if (!record || !record[name]) {
67
- dep.pop();
68
- continue;
69
- }
70
- let chunk = record[name];
71
- if (!chunk) {
72
- dep.pop();
73
- continue;
74
- }
75
- let dom = await render(chunk);
76
-
77
- el.setAttribute('rendered', '')
78
- el.innerHTML = "";
79
- el.appendChild(dom);
80
-
81
-
82
- dep.pop();
83
- }
84
-
85
- return dom;
86
- }
87
- let result = await render(html, 'root');
88
- dep = [];
89
- dbCache.clear();
90
- return result.toString();
91
- }
92
- }
93
-
94
- module.exports = CoCreateServerSideRender;
1
+ const { parse } = require("node-html-parser");
2
+ const { checkValue } = require("@cocreate/utils");
3
+
4
+ class CoCreateServerSideRender {
5
+ constructor(crud) {
6
+ this.crud = crud;
7
+ }
8
+
9
+ async HTML(html, organization_id) {
10
+ const self = this
11
+ let ignoreElement = { INPUT: true, TEXTAREA: true, SELECT: true, LINK: true, IFRAME: true, "COCREATE-SELECT": true }
12
+
13
+ let dep = [];
14
+ let dbCache = new Map();
15
+
16
+ async function render(html, lastKey) {
17
+ const dom = parse(html);
18
+ for (let el of dom.querySelectorAll(
19
+ "[collection][name][document_id]"
20
+ )) {
21
+ let meta = el.attributes;
22
+
23
+ if (ignoreElement[el.tagName])
24
+ continue;
25
+
26
+ if (el.tagName == "DIV" && !el.classList.contains('domEditor'))
27
+ continue;
28
+
29
+ if (el.classList.contains('domEditor') && el.closest('.template'))
30
+ continue;
31
+
32
+ if (el.hasAttribute('actions'))
33
+ continue;
34
+
35
+ let _id = meta["document_id"],
36
+ collection = meta['collection'],
37
+ name = meta['name'];
38
+ let key = _id + collection + name;
39
+ if (!_id || !name || !collection) continue;
40
+ if (!checkValue(_id) || !checkValue(name) || !checkValue(collection)) continue;
41
+ if (dep.includes(key))
42
+ throw new Error(
43
+ `infinite loop: ${lastKey} ${collection} ${name} ${_id} has been already rendered`
44
+ );
45
+ else
46
+ dep.push(key)
47
+
48
+ let cacheKey = _id + collection;
49
+ let record;
50
+ if (dbCache.has(cacheKey))
51
+ record = dbCache.get(cacheKey)
52
+ else {
53
+ record = await self.crud.readDocument({
54
+ collection,
55
+ document: {
56
+ _id
57
+ },
58
+ organization_id
59
+ });
60
+ if (record && record.document && record.document[0])
61
+ record = record.document[0]
62
+
63
+ dbCache.set(cacheKey, record)
64
+ }
65
+
66
+ if (!record || !record[name]) {
67
+ dep.pop();
68
+ continue;
69
+ }
70
+ let chunk = record[name];
71
+ if (!chunk) {
72
+ dep.pop();
73
+ continue;
74
+ }
75
+ let dom = await render(chunk);
76
+
77
+ el.setAttribute('rendered', '')
78
+ el.innerHTML = "";
79
+ el.appendChild(dom);
80
+
81
+
82
+ dep.pop();
83
+ }
84
+
85
+ return dom;
86
+ }
87
+ let result = await render(html, 'root');
88
+ dep = [];
89
+ dbCache.clear();
90
+ return result.toString();
91
+ }
92
+ }
93
+
94
+ module.exports = CoCreateServerSideRender;