als-layout 4.0.0 → 4.2.0
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/0-change-log.md +12 -1
- package/docs/1-basic-usage.md +2 -3
- package/docs/3-advanced-usage.md +2 -4
- package/index.js +5 -22
- package/package.json +1 -2
- package/readme.md +16 -58
- package/tests/image.test.js +0 -17
- package/tests/integrative.test.js +0 -14
- package/tests/link.test.js +0 -40
- package/tests/script.test.js +0 -14
- package/docs/4-render.md +0 -49
- package/tests/render/counter/App.js +0 -8
- package/tests/render/counter/Counter.js +0 -9
- package/tests/render/counter/build.js +0 -12
- package/tests/render/render/App.js +0 -10
- package/tests/render/render/Some.js +0 -8
- package/tests/render.test.js +0 -24
package/docs/0-change-log.md
CHANGED
|
@@ -1,4 +1,15 @@
|
|
|
1
|
-
## Change Log
|
|
1
|
+
## Change Log
|
|
2
|
+
|
|
3
|
+
* V4.2.0
|
|
4
|
+
* link method changed
|
|
5
|
+
* `link(href, attributes = { rel: "stylesheet", type: "text/css" })`
|
|
6
|
+
* no version method
|
|
7
|
+
* no version parameter in image, link,script
|
|
8
|
+
* script
|
|
9
|
+
* script in footer added one after other in right order
|
|
10
|
+
|
|
11
|
+
* V4.1.0
|
|
12
|
+
* Render removed
|
|
2
13
|
|
|
3
14
|
* V4.0.0
|
|
4
15
|
* All code rebuilded and refactored
|
package/docs/1-basic-usage.md
CHANGED
|
@@ -19,12 +19,11 @@ const layout = new Layout()
|
|
|
19
19
|
.keywords(['some', 'keyword']) // adding/updating meta[name=keywords]. not adding existing keywords
|
|
20
20
|
.image('/main-image.png', '1.5') // adding/updating meta - og:image, twitter:image, twitter:card
|
|
21
21
|
.description('Cool site') // adding/updating meta og:description, twitter:description, and description tag
|
|
22
|
-
.version('1.0.0') // adds version parameter to link, script.src, and image
|
|
23
22
|
.url('/some', 'http://site.com') // adding/updating meta[og:url] and link[rel="canonical"]
|
|
24
23
|
.style([{body:{m:0, bgc:'whitesmoke'}}]) // adding as simple-css styles to existing/new style tag
|
|
25
24
|
.style('body {margin:0; background-color:whitesmoke;}', true) // adding css styles to existing/new style tag. Second parameter is minified (default=false).
|
|
26
|
-
.link('/styles.css'
|
|
27
|
-
.script({src:'/app.js'}, '', true
|
|
25
|
+
.link('/styles.css') // adding link[rel=stylesheet] if such href not exists
|
|
26
|
+
.script({src:'/app.js'}, '', true) // set script with src to head if such src not exists
|
|
28
27
|
.script({}, 'console.log("hello world")', false) // set script with script code to footer
|
|
29
28
|
|
|
30
29
|
// Accessors for document parts
|
package/docs/3-advanced-usage.md
CHANGED
|
@@ -8,7 +8,7 @@ const Layout = require('als-layout')
|
|
|
8
8
|
// Starting with a basic HTML template and specifying the host for URL methods
|
|
9
9
|
const raw = /*html*/`<html></html>`
|
|
10
10
|
const host = 'http://example.com';
|
|
11
|
-
const layout = new Layout(raw, host).lang('fr')
|
|
11
|
+
const layout = new Layout(raw, host, minified=false).lang('fr')
|
|
12
12
|
console.log(layout.rawHtml)
|
|
13
13
|
// <!DOCTYPE html><html lang="fr"><head></p></head><body></body></html>
|
|
14
14
|
|
|
@@ -26,8 +26,7 @@ console.log(homeAutoReload.rawHtml)
|
|
|
26
26
|
// <!DOCTYPE html><html lang="fr"><head><title>Automatic Reload Page</title><meta property="og:title" content="Automatic Reload Page"></head><body><script>setTimeout(function() { window.location.reload(); }, 60000);</script></body></html>
|
|
27
27
|
|
|
28
28
|
// Demonstrating dynamic stylesheet linkage with versioning
|
|
29
|
-
|
|
30
|
-
homePage.link('/css/main.css', styleVersion)
|
|
29
|
+
homePage.link('/css/main.css')
|
|
31
30
|
console.log(homePage.rawHtml)
|
|
32
31
|
// Includes link to the stylesheet with version parameter to ensure fresh cache
|
|
33
32
|
```
|
|
@@ -40,4 +39,3 @@ In this example:
|
|
|
40
39
|
- We dynamically add a versioned link to a stylesheet in the `homePage`, demonstrating control over caching and resource management.
|
|
41
40
|
|
|
42
41
|
This advanced example illustrates how `als-layout` can be used to handle complex scenarios and requirements in web development, enhancing the flexibility and power at your disposal.
|
|
43
|
-
|
package/index.js
CHANGED
|
@@ -2,7 +2,6 @@ const { Document, SingleNode, Node } = require('als-document');
|
|
|
2
2
|
const UglifyJS = require("uglify-js");
|
|
3
3
|
const uglifycss = require('uglifycss');
|
|
4
4
|
|
|
5
|
-
const render = require('als-render');
|
|
6
5
|
const onloadScript = /*js*/`document.addEventListener('DOMContentLoaded', function() {
|
|
7
6
|
const elements = document.querySelectorAll('[onload]');
|
|
8
7
|
elements.forEach(element => {
|
|
@@ -17,7 +16,6 @@ class Layout extends Document {
|
|
|
17
16
|
get rawHtml() { return this.innerHTML }
|
|
18
17
|
get clone() { return new Layout(new Document(this), this.URL, this.minified) }
|
|
19
18
|
lang(lang) { this.html.setAttribute('lang', lang); return this }
|
|
20
|
-
version(v) { this.v = v; return this; }
|
|
21
19
|
|
|
22
20
|
constructor(html, host, minified = false) {
|
|
23
21
|
super(html, host);
|
|
@@ -85,8 +83,7 @@ class Layout extends Document {
|
|
|
85
83
|
return this
|
|
86
84
|
}
|
|
87
85
|
|
|
88
|
-
image(image
|
|
89
|
-
if (image && version) image += (image.includes('?') ? '&' : '?') + `v=${version}`
|
|
86
|
+
image(image) {
|
|
90
87
|
this.meta({ property: 'og:image', content: image })
|
|
91
88
|
this.meta({ name: 'twitter:image', content: image })
|
|
92
89
|
this.meta({ name: 'twitter:card', content: 'summary_large_image' })
|
|
@@ -119,12 +116,11 @@ class Layout extends Document {
|
|
|
119
116
|
return this
|
|
120
117
|
}
|
|
121
118
|
|
|
122
|
-
script(attrs = {}, innerHTML = '', head = true,
|
|
119
|
+
script(attrs = {}, innerHTML = '', head = true, minified = this.minified) {
|
|
123
120
|
if (typeof attrs !== 'object' || attrs === null || Array.isArray(attrs)) attrs = {}
|
|
124
121
|
if (attrs.src) {
|
|
125
122
|
const selector = `script[src="${attrs.src}"]`
|
|
126
123
|
if (attrs.src && this.root.$(selector)) return this
|
|
127
|
-
if (attrs.src && version) attrs.src += (attrs.src.includes('?') ? '&' : '?') + `v=${version}`
|
|
128
124
|
}
|
|
129
125
|
if (Object.keys(attrs).length || innerHTML) {
|
|
130
126
|
const script = new Node('script', attrs)
|
|
@@ -133,33 +129,20 @@ class Layout extends Document {
|
|
|
133
129
|
script.innerHTML = innerHTML
|
|
134
130
|
}
|
|
135
131
|
if (head) this.head.insert(2, script)
|
|
136
|
-
else this.
|
|
132
|
+
else this.html.insert(2, script)
|
|
137
133
|
}
|
|
138
134
|
return this
|
|
139
135
|
}
|
|
140
136
|
|
|
141
|
-
link(href,
|
|
137
|
+
link(href, attributes = { rel: "stylesheet", type: "text/css" }) {
|
|
142
138
|
if (!href || typeof href !== 'string') return this
|
|
143
|
-
if (href && version) href += (href.includes('?') ? '&' : '?') + `v=${version}`
|
|
144
139
|
const selector = `link[rel=stylesheet][href^="${href}"]`
|
|
145
140
|
let linkElement = this.root.$(selector)
|
|
146
141
|
if (linkElement) return
|
|
147
|
-
linkElement = new SingleNode('link', {
|
|
142
|
+
linkElement = new SingleNode('link', { href, ...attributes })
|
|
148
143
|
this.head.insert(2, linkElement)
|
|
149
144
|
return this
|
|
150
145
|
}
|
|
151
|
-
|
|
152
|
-
$(selector) {
|
|
153
|
-
const element = super.$(selector)
|
|
154
|
-
if (!element) return null
|
|
155
|
-
element.render = (path, data, includeBundle = true, contextName = 'context') => {
|
|
156
|
-
const { rawHtml, bundle } = render(path, data, contextName, false)
|
|
157
|
-
element.innerHTML = rawHtml
|
|
158
|
-
if (includeBundle) this.script({}, bundle, false)
|
|
159
|
-
return this
|
|
160
|
-
}
|
|
161
|
-
return element
|
|
162
|
-
}
|
|
163
146
|
}
|
|
164
147
|
|
|
165
148
|
module.exports = Layout
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "als-layout",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "node --test --experimental-test-coverage",
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
"description": "Html layout constructor",
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"als-document": "^1.4.0",
|
|
15
|
-
"als-render": "^0.4.0",
|
|
16
15
|
"uglify-js": "^3.19.2",
|
|
17
16
|
"uglifycss": "^0.0.29"
|
|
18
17
|
}
|
package/readme.md
CHANGED
|
@@ -18,7 +18,18 @@ npm i als-layout
|
|
|
18
18
|
const Layout = require('als-layout')
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
## Change Log
|
|
21
|
+
## Change Log
|
|
22
|
+
|
|
23
|
+
* V4.2.0
|
|
24
|
+
* link method changed
|
|
25
|
+
* `link(href, attributes = { rel: "stylesheet", type: "text/css" })`
|
|
26
|
+
* no version method
|
|
27
|
+
* no version parameter in image, link,script
|
|
28
|
+
* script
|
|
29
|
+
* script in footer added one after other in right order
|
|
30
|
+
|
|
31
|
+
* V4.1.0
|
|
32
|
+
* Render removed
|
|
22
33
|
|
|
23
34
|
* V4.0.0
|
|
24
35
|
* All code rebuilded and refactored
|
|
@@ -54,12 +65,11 @@ const layout = new Layout()
|
|
|
54
65
|
.keywords(['some', 'keyword']) // adding/updating meta[name=keywords]. not adding existing keywords
|
|
55
66
|
.image('/main-image.png', '1.5') // adding/updating meta - og:image, twitter:image, twitter:card
|
|
56
67
|
.description('Cool site') // adding/updating meta og:description, twitter:description, and description tag
|
|
57
|
-
.version('1.0.0') // adds version parameter to link, script.src, and image
|
|
58
68
|
.url('/some', 'http://site.com') // adding/updating meta[og:url] and link[rel="canonical"]
|
|
59
69
|
.style([{body:{m:0, bgc:'whitesmoke'}}]) // adding as simple-css styles to existing/new style tag
|
|
60
70
|
.style('body {margin:0; background-color:whitesmoke;}', true) // adding css styles to existing/new style tag. Second parameter is minified (default=false).
|
|
61
|
-
.link('/styles.css'
|
|
62
|
-
.script({src:'/app.js'}, '', true
|
|
71
|
+
.link('/styles.css') // adding link[rel=stylesheet] if such href not exists
|
|
72
|
+
.script({src:'/app.js'}, '', true) // set script with src to head if such src not exists
|
|
63
73
|
.script({}, 'console.log("hello world")', false) // set script with script code to footer
|
|
64
74
|
|
|
65
75
|
// Accessors for document parts
|
|
@@ -111,7 +121,7 @@ const Layout = require('als-layout')
|
|
|
111
121
|
// Starting with a basic HTML template and specifying the host for URL methods
|
|
112
122
|
const raw = /*html*/`<html></html>`
|
|
113
123
|
const host = 'http://example.com';
|
|
114
|
-
const layout = new Layout(raw, host).lang('fr')
|
|
124
|
+
const layout = new Layout(raw, host, minified=false).lang('fr')
|
|
115
125
|
console.log(layout.rawHtml)
|
|
116
126
|
// <!DOCTYPE html><html lang="fr"><head></p></head><body></body></html>
|
|
117
127
|
|
|
@@ -129,8 +139,7 @@ console.log(homeAutoReload.rawHtml)
|
|
|
129
139
|
// <!DOCTYPE html><html lang="fr"><head><title>Automatic Reload Page</title><meta property="og:title" content="Automatic Reload Page"></head><body><script>setTimeout(function() { window.location.reload(); }, 60000);</script></body></html>
|
|
130
140
|
|
|
131
141
|
// Demonstrating dynamic stylesheet linkage with versioning
|
|
132
|
-
|
|
133
|
-
homePage.link('/css/main.css', styleVersion)
|
|
142
|
+
homePage.link('/css/main.css')
|
|
134
143
|
console.log(homePage.rawHtml)
|
|
135
144
|
// Includes link to the stylesheet with version parameter to ensure fresh cache
|
|
136
145
|
```
|
|
@@ -143,54 +152,3 @@ In this example:
|
|
|
143
152
|
- We dynamically add a versioned link to a stylesheet in the `homePage`, demonstrating control over caching and resource management.
|
|
144
153
|
|
|
145
154
|
This advanced example illustrates how `als-layout` can be used to handle complex scenarios and requirements in web development, enhancing the flexibility and power at your disposal.
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
## Rendering
|
|
149
|
-
Since version 4.0 , `als-layout` using `als-render` for rendering.
|
|
150
|
-
Not for production use yet.
|
|
151
|
-
|
|
152
|
-
### Counter Example
|
|
153
|
-
To demonstrate dynamic interaction, consider a counter that can be increased or decreased through user input:
|
|
154
|
-
|
|
155
|
-
The App.js
|
|
156
|
-
```jsx
|
|
157
|
-
const Counter = require('./Counter')
|
|
158
|
-
function App() {
|
|
159
|
-
context.count = 0
|
|
160
|
-
return (<div>
|
|
161
|
-
<Counter count={0} />
|
|
162
|
-
</div>)
|
|
163
|
-
}
|
|
164
|
-
module.exports = App
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
Counter.js
|
|
168
|
-
```jsx
|
|
169
|
-
function Counter({count}) {
|
|
170
|
-
return (<div>
|
|
171
|
-
<button onclick={() => this.update({count:count+1})}>Increase</button>
|
|
172
|
-
<span>{count}</span>
|
|
173
|
-
<button onclick={() => this.update({count:count-1})}>Decrease</button>
|
|
174
|
-
</div>)
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
module.exports = Counter
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
build.js
|
|
181
|
-
```js
|
|
182
|
-
const fs = require('fs')
|
|
183
|
-
const Layout = require('als-layout')
|
|
184
|
-
|
|
185
|
-
// Create and configure the layout
|
|
186
|
-
const host = 'http://somehost.com'
|
|
187
|
-
const minified = false
|
|
188
|
-
const layout = new Layout('',host,minified).title('Counter')
|
|
189
|
-
|
|
190
|
-
const data = {}, includeBundle = true;
|
|
191
|
-
layout.$('body').render('./App',data,includeBundle)
|
|
192
|
-
|
|
193
|
-
// Write the output to a file
|
|
194
|
-
fs.writeFileSync('counter.html', layout.rawHtml, 'utf-8')
|
|
195
|
-
```
|
|
196
|
-
|
package/tests/image.test.js
CHANGED
|
@@ -22,21 +22,4 @@ describe('Image tests', () => {
|
|
|
22
22
|
assert.strictEqual(layout.root.$('meta[name="twitter:image"]').getAttribute('content'), imageUrl, 'Image not set correctly');
|
|
23
23
|
});
|
|
24
24
|
|
|
25
|
-
it('should handle cases where image URL already has query parameters', () => {
|
|
26
|
-
const imageUrl = 'test-image.jpg?existing=param';
|
|
27
|
-
const version = '456';
|
|
28
|
-
layout.image(imageUrl, version);
|
|
29
|
-
const expectedUrl = imageUrl + '&v=' + version;
|
|
30
|
-
const img = layout.root.$('meta[property="og:image"]').getAttribute('content')
|
|
31
|
-
assert(img === expectedUrl, 'Versioned image URL with existing parameters not set correctly');
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
it('should add version parameter to image URL if version is provided', () => {
|
|
35
|
-
const imageUrl = 'test-image.jpg';
|
|
36
|
-
const version = '123';
|
|
37
|
-
layout.image(imageUrl, version);
|
|
38
|
-
const expectedUrl = imageUrl + '?v=' + version;
|
|
39
|
-
assert.strictEqual(layout.root.$('meta[property="og:image"]').getAttribute('content'), expectedUrl, 'Versioned image URL not set correctly in og:image');
|
|
40
|
-
assert.strictEqual(layout.root.$('meta[name="twitter:image"]').getAttribute('content'), expectedUrl, 'Versioned image URL not set correctly in twitter:image');
|
|
41
|
-
});
|
|
42
25
|
});
|
|
@@ -87,17 +87,3 @@ describe('Clone Testing', () => {
|
|
|
87
87
|
});
|
|
88
88
|
});
|
|
89
89
|
|
|
90
|
-
describe('Version method tests', () => {
|
|
91
|
-
let layout;
|
|
92
|
-
|
|
93
|
-
beforeEach(() => {
|
|
94
|
-
layout = new Layout();
|
|
95
|
-
});
|
|
96
|
-
|
|
97
|
-
it('should set the version correctly', () => {
|
|
98
|
-
const version = '1.0.0';
|
|
99
|
-
layout.version(version);
|
|
100
|
-
assert.strictEqual(layout.v, version, 'Version should be set correctly');
|
|
101
|
-
});
|
|
102
|
-
});
|
|
103
|
-
|
package/tests/link.test.js
CHANGED
|
@@ -13,21 +13,6 @@ describe('Link', () => {
|
|
|
13
13
|
assert.strictEqual(layout.root.$('link[rel="stylesheet"]').getAttribute('href'), href, 'Link href should match the provided href');
|
|
14
14
|
});
|
|
15
15
|
|
|
16
|
-
it('should add a new link element with version', () => {
|
|
17
|
-
const href = 'style.css';
|
|
18
|
-
const version = '1.0';
|
|
19
|
-
layout.link(href, version);
|
|
20
|
-
assert.strictEqual(layout.root.$('link[rel="stylesheet"]').getAttribute('href'), `${href}?v=${version}`, 'Link href should include version query parameter');
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
it('should not add a link if one with the same href and version already exists', () => {
|
|
24
|
-
const href = 'style.css';
|
|
25
|
-
const version = '1.0';
|
|
26
|
-
layout.link(href, version);
|
|
27
|
-
layout.link(href, version);
|
|
28
|
-
assert.strictEqual(layout.root.$$(`link[rel="stylesheet"][href="${href}?v=${version}"]`).length, 1, 'Should not add duplicate link with the same version');
|
|
29
|
-
});
|
|
30
|
-
|
|
31
16
|
it('should handle invalid href or version correctly', () => {
|
|
32
17
|
layout.link('', '1.0');
|
|
33
18
|
layout.link(null, '1.0');
|
|
@@ -55,29 +40,4 @@ describe('Link', () => {
|
|
|
55
40
|
assert.strictEqual(layout.root.$('link[rel="stylesheet"]'), null, 'Should not add a link when href is undefined or null');
|
|
56
41
|
});
|
|
57
42
|
|
|
58
|
-
it('should handle different versions for the same href', () => {
|
|
59
|
-
const href = 'style.css';
|
|
60
|
-
const version1 = '1.0';
|
|
61
|
-
const version2 = '1.1';
|
|
62
|
-
layout.link(href, version1);
|
|
63
|
-
layout.link(href, version2);
|
|
64
|
-
assert.strictEqual(layout.root.$$(`link[rel="stylesheet"]`).length, 2, 'Should add different links for different versions');
|
|
65
|
-
assert.strictEqual(layout.root.$$(`link[rel="stylesheet"][href="${href}?v=${version1}"]`).length, 1, 'First version link should exist');
|
|
66
|
-
assert.strictEqual(layout.root.$$(`link[rel="stylesheet"][href="${href}?v=${version2}"]`).length, 1, 'Second version link should exist');
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
it('should correctly add version when href already has parameters', () => {
|
|
70
|
-
const href = 'style.css?param=value';
|
|
71
|
-
const version = '1.0';
|
|
72
|
-
layout.link(href, version);
|
|
73
|
-
assert.strictEqual(layout.root.$('link[rel="stylesheet"]').getAttribute('href'), `${href}&v=${version}`, 'Href should include version appended with &');
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
it('should not add a link when one with a similar href prefix exists', () => {
|
|
77
|
-
const href = 'style.css';
|
|
78
|
-
layout.link(href);
|
|
79
|
-
layout.link(href + '?param=value', '1.0');
|
|
80
|
-
assert.strictEqual(layout.root.$$(`link[rel="stylesheet"]`).length, 2, 'Should recognize different full hrefs as different links');
|
|
81
|
-
});
|
|
82
|
-
|
|
83
43
|
})
|
package/tests/script.test.js
CHANGED
|
@@ -29,13 +29,6 @@ describe('Scripts', () => {
|
|
|
29
29
|
assert.strictEqual(layout.root.$('script').innerHTML, scriptContent, 'Script content not set correctly');
|
|
30
30
|
});
|
|
31
31
|
|
|
32
|
-
it('should add version to script src', () => {
|
|
33
|
-
const src = 'script.js';
|
|
34
|
-
const version = '1.0';
|
|
35
|
-
layout.script({ src }, '', true, version);
|
|
36
|
-
assert.strictEqual(layout.root.$('script').getAttribute('src'), `${src}?v=${version}`, 'Script src should include version');
|
|
37
|
-
});
|
|
38
|
-
|
|
39
32
|
it('should not add script if no attributes and no innerHTML', () => {
|
|
40
33
|
layout.script({}, '');
|
|
41
34
|
assert.strictEqual(layout.root.$('script'), null, 'Script should not be added if there are no attributes and no innerHTML');
|
|
@@ -47,11 +40,4 @@ describe('Scripts', () => {
|
|
|
47
40
|
assert.strictEqual(layout.body.next.innerHTML, scriptContent, 'Script should be added to body');
|
|
48
41
|
});
|
|
49
42
|
|
|
50
|
-
it('should append version parameter correctly when src already has parameters', () => {
|
|
51
|
-
const srcWithParams = 'script.js?existing=param';
|
|
52
|
-
const version = '1.0';
|
|
53
|
-
layout.script({ src: srcWithParams }, '', true, version);
|
|
54
|
-
assert.strictEqual(layout.root.$('script').getAttribute('src'), `${srcWithParams}&v=${version}`, 'Version parameter should be appended with &');
|
|
55
|
-
});
|
|
56
|
-
|
|
57
43
|
})
|
package/docs/4-render.md
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
## Rendering
|
|
2
|
-
Since version 4.0 , `als-layout` using `als-render` for rendering.
|
|
3
|
-
Not for production use yet.
|
|
4
|
-
|
|
5
|
-
### Counter Example
|
|
6
|
-
To demonstrate dynamic interaction, consider a counter that can be increased or decreased through user input:
|
|
7
|
-
|
|
8
|
-
The App.js
|
|
9
|
-
```jsx
|
|
10
|
-
const Counter = require('./Counter')
|
|
11
|
-
function App() {
|
|
12
|
-
context.count = 0
|
|
13
|
-
return (<div>
|
|
14
|
-
<Counter count={0} />
|
|
15
|
-
</div>)
|
|
16
|
-
}
|
|
17
|
-
module.exports = App
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Counter.js
|
|
21
|
-
```jsx
|
|
22
|
-
function Counter({count}) {
|
|
23
|
-
return (<div>
|
|
24
|
-
<button onclick={() => this.update({count:count+1})}>Increase</button>
|
|
25
|
-
<span>{count}</span>
|
|
26
|
-
<button onclick={() => this.update({count:count-1})}>Decrease</button>
|
|
27
|
-
</div>)
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
module.exports = Counter
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
build.js
|
|
34
|
-
```js
|
|
35
|
-
const fs = require('fs')
|
|
36
|
-
const Layout = require('als-layout')
|
|
37
|
-
|
|
38
|
-
// Create and configure the layout
|
|
39
|
-
const host = 'http://somehost.com'
|
|
40
|
-
const minified = false
|
|
41
|
-
const layout = new Layout('',host,minified).title('Counter')
|
|
42
|
-
|
|
43
|
-
const data = {}, includeBundle = true;
|
|
44
|
-
layout.$('body').render('./App',data,includeBundle)
|
|
45
|
-
|
|
46
|
-
// Write the output to a file
|
|
47
|
-
fs.writeFileSync('counter.html', layout.rawHtml, 'utf-8')
|
|
48
|
-
```
|
|
49
|
-
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
const fs = require('fs')
|
|
2
|
-
const Layout = require('../../../index')
|
|
3
|
-
|
|
4
|
-
// Create and configure the layout
|
|
5
|
-
const layout = new Layout('','',false).title('Counter')
|
|
6
|
-
const time1 = performance.now()
|
|
7
|
-
layout.$('body').render('./App')
|
|
8
|
-
const time2 = performance.now()
|
|
9
|
-
console.log(`${time2 - time1}ms`) // e.g., 1.0649ms
|
|
10
|
-
|
|
11
|
-
// Write the output to a file
|
|
12
|
-
fs.writeFileSync('counter.html', layout.rawHtml, 'utf-8')
|
package/tests/render.test.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
const assert = require('assert');
|
|
2
|
-
const { describe, it,beforeEach } = require('node:test')
|
|
3
|
-
const Layout = require('../index')
|
|
4
|
-
|
|
5
|
-
describe('Basic tests', () => {
|
|
6
|
-
let layout
|
|
7
|
-
beforeEach(() => layout = new Layout())
|
|
8
|
-
it('Should render without bundle',() => {
|
|
9
|
-
layout.$('body').render('./render/render/App',{},false)
|
|
10
|
-
const expected =
|
|
11
|
-
'<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><div component="App"><div>Hello from App!</div>\n' +
|
|
12
|
-
' <div component="Some">Hello From Some!</div></div></body></html>'
|
|
13
|
-
assert(layout.rawHtml === expected)
|
|
14
|
-
})
|
|
15
|
-
|
|
16
|
-
it('Should render with bundle',() => {
|
|
17
|
-
layout.$('body').render('./render/render/App')
|
|
18
|
-
assert(layout.rawHtml.includes('<script>'))
|
|
19
|
-
})
|
|
20
|
-
|
|
21
|
-
it('Should do nothing if element not exists',() => {
|
|
22
|
-
assert.throws(() => layout.$('main').render('./render/render/App'))
|
|
23
|
-
})
|
|
24
|
-
})
|