als-layout 4.1.0 → 4.3.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 +10 -1
- package/docs/1-basic-usage.md +2 -3
- package/docs/3-advanced-usage.md +2 -4
- package/docs/4-view.md +19 -0
- package/index.js +43 -13
- package/package.json +5 -1
- package/readme.md +33 -7
- 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/tests/view.test.js +72 -0
- package/tests/views/App.js +5 -0
- package/tests/views/app/Index.js +5 -0
package/docs/0-change-log.md
CHANGED
|
@@ -1,7 +1,16 @@
|
|
|
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
|
|
2
10
|
|
|
3
11
|
* V4.1.0
|
|
4
12
|
* Render removed
|
|
13
|
+
|
|
5
14
|
* V4.0.0
|
|
6
15
|
* All code rebuilded and refactored
|
|
7
16
|
* No als-simple-css for style
|
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/docs/4-view.md
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
## View method
|
|
2
|
+
|
|
3
|
+
**The view method is a pilot. Don't use in production.**
|
|
4
|
+
|
|
5
|
+
```js
|
|
6
|
+
Layout.viewsPath = '../../views'; // relative to layout path
|
|
7
|
+
Layout.publicPath = '../../public'; // public folder path for urls starts with "/" should be relative to root
|
|
8
|
+
Layout.dev = false; // true by default
|
|
9
|
+
|
|
10
|
+
const data = {};
|
|
11
|
+
const includeBundle = false; // true by default
|
|
12
|
+
layout.view('some/Test',data,includeBundle) // viewsPath/some/Test.js
|
|
13
|
+
layout.view('some/test',data,includeBundle) // viewsPath/some/test/Index.js
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
* `includeBundle`
|
|
18
|
+
* in dev mode, will include bundle for rendering inside script tag in html
|
|
19
|
+
* in prod mode, will save context and bundle as files in publicPath/js folder and will add script[src] to html for those files.
|
package/index.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
const { Document, SingleNode, Node } = require('als-document');
|
|
2
2
|
const UglifyJS = require("uglify-js");
|
|
3
3
|
const uglifycss = require('uglifycss');
|
|
4
|
+
const { join, dirname } = require('path')
|
|
5
|
+
const { writeFileSync, mkdirSync } = require('fs')
|
|
6
|
+
const Render = require('als-render')
|
|
4
7
|
|
|
5
8
|
const onloadScript = /*js*/`document.addEventListener('DOMContentLoaded', function() {
|
|
6
9
|
const elements = document.querySelectorAll('[onload]');
|
|
@@ -13,17 +16,20 @@ const onloadScript = /*js*/`document.addEventListener('DOMContentLoaded', functi
|
|
|
13
16
|
});`;
|
|
14
17
|
|
|
15
18
|
class Layout extends Document {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
static bundles = {};
|
|
20
|
+
static viewsPath = '../../views';
|
|
21
|
+
static publicPath = '../../public';
|
|
22
|
+
static dev = true;
|
|
21
23
|
constructor(html, host, minified = false) {
|
|
22
24
|
super(html, host);
|
|
23
25
|
this.minified = minified
|
|
24
26
|
this.root = this.html
|
|
25
27
|
}
|
|
26
28
|
|
|
29
|
+
get rawHtml() { return this.innerHTML }
|
|
30
|
+
get clone() { return new Layout(new Document(this), this.URL, this.minified) }
|
|
31
|
+
lang(lang) { this.html.setAttribute('lang', lang); return this }
|
|
32
|
+
|
|
27
33
|
onload() {
|
|
28
34
|
if (this.onloadAdded) return
|
|
29
35
|
this.script({}, onloadScript);
|
|
@@ -84,8 +90,7 @@ class Layout extends Document {
|
|
|
84
90
|
return this
|
|
85
91
|
}
|
|
86
92
|
|
|
87
|
-
image(image
|
|
88
|
-
if (image && version) image += (image.includes('?') ? '&' : '?') + `v=${version}`
|
|
93
|
+
image(image) {
|
|
89
94
|
this.meta({ property: 'og:image', content: image })
|
|
90
95
|
this.meta({ name: 'twitter:image', content: image })
|
|
91
96
|
this.meta({ name: 'twitter:card', content: 'summary_large_image' })
|
|
@@ -118,12 +123,11 @@ class Layout extends Document {
|
|
|
118
123
|
return this
|
|
119
124
|
}
|
|
120
125
|
|
|
121
|
-
script(attrs = {}, innerHTML = '', head = true,
|
|
126
|
+
script(attrs = {}, innerHTML = '', head = true, minified = this.minified) {
|
|
122
127
|
if (typeof attrs !== 'object' || attrs === null || Array.isArray(attrs)) attrs = {}
|
|
123
128
|
if (attrs.src) {
|
|
124
129
|
const selector = `script[src="${attrs.src}"]`
|
|
125
130
|
if (attrs.src && this.root.$(selector)) return this
|
|
126
|
-
if (attrs.src && version) attrs.src += (attrs.src.includes('?') ? '&' : '?') + `v=${version}`
|
|
127
131
|
}
|
|
128
132
|
if (Object.keys(attrs).length || innerHTML) {
|
|
129
133
|
const script = new Node('script', attrs)
|
|
@@ -132,21 +136,47 @@ class Layout extends Document {
|
|
|
132
136
|
script.innerHTML = innerHTML
|
|
133
137
|
}
|
|
134
138
|
if (head) this.head.insert(2, script)
|
|
135
|
-
else this.
|
|
139
|
+
else this.html.insert(2, script)
|
|
136
140
|
}
|
|
137
141
|
return this
|
|
138
142
|
}
|
|
139
143
|
|
|
140
|
-
link(href,
|
|
144
|
+
link(href, attributes = { rel: "stylesheet", type: "text/css" }) {
|
|
141
145
|
if (!href || typeof href !== 'string') return this
|
|
142
|
-
if (href && version) href += (href.includes('?') ? '&' : '?') + `v=${version}`
|
|
143
146
|
const selector = `link[rel=stylesheet][href^="${href}"]`
|
|
144
147
|
let linkElement = this.root.$(selector)
|
|
145
148
|
if (linkElement) return
|
|
146
|
-
linkElement = new SingleNode('link', {
|
|
149
|
+
linkElement = new SingleNode('link', { href, ...attributes })
|
|
147
150
|
this.head.insert(2, linkElement)
|
|
148
151
|
return this
|
|
149
152
|
}
|
|
153
|
+
|
|
154
|
+
view(path, data = {}, includeBundle=true) {
|
|
155
|
+
const parts = path.split('/')
|
|
156
|
+
if(parts[parts.length-1][0].toUpperCase() !== parts[parts.length-1][0]) parts.push('Index.js')
|
|
157
|
+
const relativePath = join(Layout.viewsPath, ...parts)
|
|
158
|
+
const { bundle, bundleFn, callBundle, rawHtml, context } = Render.render(relativePath, data, !Layout.dev)
|
|
159
|
+
if (includeBundle) {
|
|
160
|
+
if (Layout.dev) this.script({}, bundle, false)
|
|
161
|
+
else {
|
|
162
|
+
this.write('context', context, true)
|
|
163
|
+
this.write(path, bundleFn, false)
|
|
164
|
+
this.script({}, callBundle, false)
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
const element = /*html*/`<content></content>`
|
|
168
|
+
this.body.insertAdjacentHTML('afterbegin', element)
|
|
169
|
+
return this.rawHtml.replace(element, rawHtml)
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
write(path, content, head) {
|
|
173
|
+
if (Layout.bundles[path]) return
|
|
174
|
+
const filePath = join(Layout.publicPath, 'js', path + '.js')
|
|
175
|
+
mkdirSync(dirname(filePath), { recursive: true })
|
|
176
|
+
writeFileSync(filePath, content)
|
|
177
|
+
Layout.bundles[path] = path
|
|
178
|
+
this.script({ src: `/js/${path}.js` }, '', head)
|
|
179
|
+
}
|
|
150
180
|
}
|
|
151
181
|
|
|
152
182
|
module.exports = Layout
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "als-layout",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "node --test --experimental-test-coverage",
|
|
@@ -12,7 +12,11 @@
|
|
|
12
12
|
"description": "Html layout constructor",
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"als-document": "^1.4.0",
|
|
15
|
+
"als-render": "^0.9.3",
|
|
15
16
|
"uglify-js": "^3.19.2",
|
|
16
17
|
"uglifycss": "^0.0.29"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"fs-extra": "^11.2.0"
|
|
17
21
|
}
|
|
18
22
|
}
|
package/readme.md
CHANGED
|
@@ -18,10 +18,19 @@ 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
|
|
22
30
|
|
|
23
31
|
* V4.1.0
|
|
24
32
|
* Render removed
|
|
33
|
+
|
|
25
34
|
* V4.0.0
|
|
26
35
|
* All code rebuilded and refactored
|
|
27
36
|
* No als-simple-css for style
|
|
@@ -56,12 +65,11 @@ const layout = new Layout()
|
|
|
56
65
|
.keywords(['some', 'keyword']) // adding/updating meta[name=keywords]. not adding existing keywords
|
|
57
66
|
.image('/main-image.png', '1.5') // adding/updating meta - og:image, twitter:image, twitter:card
|
|
58
67
|
.description('Cool site') // adding/updating meta og:description, twitter:description, and description tag
|
|
59
|
-
.version('1.0.0') // adds version parameter to link, script.src, and image
|
|
60
68
|
.url('/some', 'http://site.com') // adding/updating meta[og:url] and link[rel="canonical"]
|
|
61
69
|
.style([{body:{m:0, bgc:'whitesmoke'}}]) // adding as simple-css styles to existing/new style tag
|
|
62
70
|
.style('body {margin:0; background-color:whitesmoke;}', true) // adding css styles to existing/new style tag. Second parameter is minified (default=false).
|
|
63
|
-
.link('/styles.css'
|
|
64
|
-
.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
|
|
65
73
|
.script({}, 'console.log("hello world")', false) // set script with script code to footer
|
|
66
74
|
|
|
67
75
|
// Accessors for document parts
|
|
@@ -113,7 +121,7 @@ const Layout = require('als-layout')
|
|
|
113
121
|
// Starting with a basic HTML template and specifying the host for URL methods
|
|
114
122
|
const raw = /*html*/`<html></html>`
|
|
115
123
|
const host = 'http://example.com';
|
|
116
|
-
const layout = new Layout(raw, host).lang('fr')
|
|
124
|
+
const layout = new Layout(raw, host, minified=false).lang('fr')
|
|
117
125
|
console.log(layout.rawHtml)
|
|
118
126
|
// <!DOCTYPE html><html lang="fr"><head></p></head><body></body></html>
|
|
119
127
|
|
|
@@ -131,8 +139,7 @@ console.log(homeAutoReload.rawHtml)
|
|
|
131
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>
|
|
132
140
|
|
|
133
141
|
// Demonstrating dynamic stylesheet linkage with versioning
|
|
134
|
-
|
|
135
|
-
homePage.link('/css/main.css', styleVersion)
|
|
142
|
+
homePage.link('/css/main.css')
|
|
136
143
|
console.log(homePage.rawHtml)
|
|
137
144
|
// Includes link to the stylesheet with version parameter to ensure fresh cache
|
|
138
145
|
```
|
|
@@ -145,4 +152,23 @@ In this example:
|
|
|
145
152
|
- We dynamically add a versioned link to a stylesheet in the `homePage`, demonstrating control over caching and resource management.
|
|
146
153
|
|
|
147
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.
|
|
155
|
+
|
|
156
|
+
## View method
|
|
157
|
+
|
|
158
|
+
**The view method is a pilot. Don't use in production.**
|
|
159
|
+
|
|
160
|
+
```js
|
|
161
|
+
Layout.viewsPath = '../../views'; // relative to layout path
|
|
162
|
+
Layout.publicPath = '../../public'; // public folder path for urls starts with "/" should be relative to root
|
|
163
|
+
Layout.dev = false; // true by default
|
|
164
|
+
|
|
165
|
+
const data = {};
|
|
166
|
+
const includeBundle = false; // true by default
|
|
167
|
+
layout.view('some/Test',data,includeBundle) // viewsPath/some/Test.js
|
|
168
|
+
layout.view('some/test',data,includeBundle) // viewsPath/some/test/Index.js
|
|
169
|
+
|
|
170
|
+
```
|
|
148
171
|
|
|
172
|
+
* `includeBundle`
|
|
173
|
+
* in dev mode, will include bundle for rendering inside script tag in html
|
|
174
|
+
* in prod mode, will save context and bundle as files in publicPath/js folder and will add script[src] to html for those files.
|
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
|
})
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
const assert = require('assert');
|
|
2
|
+
const { describe, it, beforeEach, before, afterEach } = require('node:test')
|
|
3
|
+
const Layout = require('../index');
|
|
4
|
+
const { readdirSync, removeSync, existsSync, rmdirSync } = require('fs-extra')
|
|
5
|
+
const { join } = require('path')
|
|
6
|
+
Layout.viewsPath = 'views';
|
|
7
|
+
Layout.publicPath = join(__dirname,'public')
|
|
8
|
+
|
|
9
|
+
describe('Dev mode', () => {
|
|
10
|
+
let layout
|
|
11
|
+
before(() => {
|
|
12
|
+
Layout.dev = true;
|
|
13
|
+
})
|
|
14
|
+
beforeEach(() => {
|
|
15
|
+
layout = new Layout()
|
|
16
|
+
})
|
|
17
|
+
|
|
18
|
+
it('view path without bundle', () => {
|
|
19
|
+
const html = layout.view('App', { test: 'test' })
|
|
20
|
+
assert(html.includes(/*html*/`<div component="App">Hello test</div>`))
|
|
21
|
+
assert(!html.includes(/*html*/`<content></content>`))
|
|
22
|
+
})
|
|
23
|
+
|
|
24
|
+
it('view Index path without bundle', () => {
|
|
25
|
+
const html = layout.view('app', { test: 'test' })
|
|
26
|
+
assert(html.includes(/*html*/`<div component="Index">Hello test</div>`))
|
|
27
|
+
assert(!html.includes(/*html*/`<content></content>`))
|
|
28
|
+
})
|
|
29
|
+
|
|
30
|
+
it('view path with bundle', () => {
|
|
31
|
+
const html = layout.view('App', { test: 'test' }, true)
|
|
32
|
+
assert(html.includes('const Context'))
|
|
33
|
+
assert(html.includes('renderedBundle'))
|
|
34
|
+
})
|
|
35
|
+
|
|
36
|
+
})
|
|
37
|
+
|
|
38
|
+
describe('Prod mode', () => {
|
|
39
|
+
let layout
|
|
40
|
+
const publicPath = join(Layout.publicPath,'js')
|
|
41
|
+
before(() => {
|
|
42
|
+
Layout.dev = false;
|
|
43
|
+
})
|
|
44
|
+
beforeEach(() => {
|
|
45
|
+
layout = new Layout()
|
|
46
|
+
})
|
|
47
|
+
|
|
48
|
+
afterEach(() => {
|
|
49
|
+
if(!existsSync(publicPath)) return
|
|
50
|
+
const files = readdirSync(publicPath)
|
|
51
|
+
files.forEach(file => removeSync(join(publicPath,file)))
|
|
52
|
+
if(existsSync(publicPath)) rmdirSync(publicPath)
|
|
53
|
+
})
|
|
54
|
+
|
|
55
|
+
it('view path without bundle', () => {
|
|
56
|
+
const html = layout.view('App', { test: 'test' })
|
|
57
|
+
assert(html.includes(/*html*/`<div component="App">Hello test</div>`))
|
|
58
|
+
assert(!html.includes(/*html*/`<content></content>`))
|
|
59
|
+
assert(existsSync(publicPath) === false)
|
|
60
|
+
})
|
|
61
|
+
|
|
62
|
+
it('view path with bundle', () => {
|
|
63
|
+
const html = layout.view('App', { test: 'test' }, true)
|
|
64
|
+
const files = readdirSync(publicPath)
|
|
65
|
+
assert.deepStrictEqual(files,[ 'App.js', 'context.js' ])
|
|
66
|
+
assert(html.includes('/js/App.js'))
|
|
67
|
+
assert(html.includes('renderedBundle'))
|
|
68
|
+
// <script src="/js/App.js"></script><script>renderedBundle({"test":"test"})</script>
|
|
69
|
+
})
|
|
70
|
+
|
|
71
|
+
})
|
|
72
|
+
|