als-layout 4.1.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.
Files changed (10) hide show
  1. package/docs/0-change-log.md +10 -1
  2. package/docs/1-basic-usage.md +2 -3
  3. package/docs/3-advanced-usage.md +2 -4
  4. package/index.js +5 -9
  5. package/package.json +1 -1
  6. package/readme.md +14 -8
  7. package/tests/image.test.js +0 -17
  8. package/tests/integrative.test.js +0 -14
  9. package/tests/link.test.js +0 -40
  10. package/tests/script.test.js +0 -14
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', '2.0') // adding link[rel=stylesheet] if such href not exists
27
- .script({src:'/app.js'}, '', true, '3.0') // set script with src to head if such src not exists
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
- const styleVersion = '1.1';
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
@@ -16,7 +16,6 @@ class Layout extends Document {
16
16
  get rawHtml() { return this.innerHTML }
17
17
  get clone() { return new Layout(new Document(this), this.URL, this.minified) }
18
18
  lang(lang) { this.html.setAttribute('lang', lang); return this }
19
- version(v) { this.v = v; return this; }
20
19
 
21
20
  constructor(html, host, minified = false) {
22
21
  super(html, host);
@@ -84,8 +83,7 @@ class Layout extends Document {
84
83
  return this
85
84
  }
86
85
 
87
- image(image, version = this.v) {
88
- if (image && version) image += (image.includes('?') ? '&' : '?') + `v=${version}`
86
+ image(image) {
89
87
  this.meta({ property: 'og:image', content: image })
90
88
  this.meta({ name: 'twitter:image', content: image })
91
89
  this.meta({ name: 'twitter:card', content: 'summary_large_image' })
@@ -118,12 +116,11 @@ class Layout extends Document {
118
116
  return this
119
117
  }
120
118
 
121
- script(attrs = {}, innerHTML = '', head = true, version = this.v,minified = this.minified) {
119
+ script(attrs = {}, innerHTML = '', head = true, minified = this.minified) {
122
120
  if (typeof attrs !== 'object' || attrs === null || Array.isArray(attrs)) attrs = {}
123
121
  if (attrs.src) {
124
122
  const selector = `script[src="${attrs.src}"]`
125
123
  if (attrs.src && this.root.$(selector)) return this
126
- if (attrs.src && version) attrs.src += (attrs.src.includes('?') ? '&' : '?') + `v=${version}`
127
124
  }
128
125
  if (Object.keys(attrs).length || innerHTML) {
129
126
  const script = new Node('script', attrs)
@@ -132,18 +129,17 @@ class Layout extends Document {
132
129
  script.innerHTML = innerHTML
133
130
  }
134
131
  if (head) this.head.insert(2, script)
135
- else this.body.insert(3, script)
132
+ else this.html.insert(2, script)
136
133
  }
137
134
  return this
138
135
  }
139
136
 
140
- link(href, version = this.v) {
137
+ link(href, attributes = { rel: "stylesheet", type: "text/css" }) {
141
138
  if (!href || typeof href !== 'string') return this
142
- if (href && version) href += (href.includes('?') ? '&' : '?') + `v=${version}`
143
139
  const selector = `link[rel=stylesheet][href^="${href}"]`
144
140
  let linkElement = this.root.$(selector)
145
141
  if (linkElement) return
146
- linkElement = new SingleNode('link', { rel: 'stylesheet', href })
142
+ linkElement = new SingleNode('link', { href, ...attributes })
147
143
  this.head.insert(2, linkElement)
148
144
  return this
149
145
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "als-layout",
3
- "version": "4.1.0",
3
+ "version": "4.2.0",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "test": "node --test --experimental-test-coverage",
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', '2.0') // adding link[rel=stylesheet] if such href not exists
64
- .script({src:'/app.js'}, '', true, '3.0') // set script with src to head if such src not exists
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
- const styleVersion = '1.1';
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,3 @@ 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.
148
-
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
  });
package/tests/integrative.test.js CHANGED
@@ -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
  })