@total_onion/onion-library 2.0.123 → 2.0.124

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 (2) hide show
  1. package/onion-loader.js +194 -190
  2. package/package.json +1 -1
package/onion-loader.js CHANGED
@@ -1,4 +1,4 @@
1
- import jsAssetList from "./jsAssets.mjs";
1
+ import jsAssetList from './public/jsAssets.mjs';
2
2
  const coreAssets = jsAssetList.dynamicAssets;
3
3
 
4
4
  /* eslint-disable no-use-before-define */
@@ -26,86 +26,90 @@ const coreAssets = jsAssetList.dynamicAssets;
26
26
  */
27
27
 
28
28
  const options = {
29
- rootMargin: "100% 0px 300px 0px",
30
- threshold: 0,
31
- debugLogMessages: false,
32
- lazyBlocksToSearchFor: [],
33
- lazyBlocksFound: [],
34
- coreAssets: [...coreAssets], //latest assetArray can be found in /@total_onion/onion-library/public/jsAssets.mjs
35
- projectAssets: [],
36
- assetMap: {},
37
- css: true,
38
- lazy: true,
39
- cssLoadingStyle: "component", // 'component' or 'bundle'
40
- filePrefix: "nodemodules", //'nodemodules', 'assets' or 'dev'
41
- fileSuffixJs: ".js",
42
- fileSuffixCss: ".scss",
43
- filePath: "js/blocks",
44
- filePathCss: "scss/blocks",
29
+ rootMargin: '100% 0px 300px 0px',
30
+ threshold: 0,
31
+ debugLogMessages: false,
32
+ lazyBlocksToSearchFor: [],
33
+ lazyBlocksFound: [],
34
+ coreAssets: [...coreAssets],
35
+ projectAssets: [],
36
+ assetMap: {},
37
+ css: true,
38
+ lazy: true,
39
+ cssLoadingStyle: 'component', // 'component' or 'bundle'
40
+ filePrefix: 'nodemodules', //'nodemodules', 'assets' or 'dev'
41
+ fileSuffixJs: '.js',
42
+ fileSuffixCss: '.scss',
43
+ filePath: 'js/blocks',
44
+ filePathCss: 'scss/blocks'
45
45
  };
46
46
 
47
47
  /**
48
48
  * Initializes the lazyloader.
49
49
  */
50
50
  function lazyloaderInit() {
51
- const assetArray = options.coreAssets.concat(options.projectAssets);
52
- options.debugLogMessages && console.log("Lazy Loader initialized!");
53
- options.lazyBlocksToSearchFor = [];
54
- assetArray.forEach((asset) => {
55
- if (
56
- options.filePrefix === "nodemodules" &&
57
- asset.assetKey.includes("-v3")
58
- ) {
59
- options.assetMap[asset.assetKey] = {
60
- js: () =>
61
- import(
62
- `NodeModules/@total_onion/onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
63
- ),
64
- css: options.ignoreCss === true,
65
- };
66
- } else {
67
- }
68
- if (
69
- options.filePrefix === "nodemodules" &&
70
- !asset.assetKey.includes("-v3")
71
- ) {
72
- options.assetMap[asset.assetKey] = {
73
- js: () =>
74
- import(`Assets/js/blocks/${asset.assetKey}${options.fileSuffixJs}`),
75
- css: options.ignoreCss === false,
76
- };
77
- }
51
+ const assetArray = options.coreAssets.concat(options.projectAssets);
52
+ options.debugLogMessages && console.log('Lazy Loader initialized!');
53
+ options.lazyBlocksToSearchFor = [];
54
+ assetArray.forEach((asset) => {
55
+ if (
56
+ options.filePrefix === 'nodemodules' &&
57
+ asset.assetKey.includes('-v3')
58
+ ) {
59
+ options.assetMap[asset.assetKey] = {
60
+ js: () =>
61
+ import(
62
+ `NodeModules/@total_onion/onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
63
+ ),
64
+ css: options.ignoreCss === true
65
+ };
66
+ } else {
67
+ }
68
+ if (
69
+ options.filePrefix === 'nodemodules' &&
70
+ !asset.assetKey.includes('-v3')
71
+ ) {
72
+ options.assetMap[asset.assetKey] = {
73
+ js: () =>
74
+ import(
75
+ `Assets/js/blocks/${asset.assetKey}${options.fileSuffixJs}`
76
+ ),
77
+ css: options.ignoreCss === false
78
+ };
79
+ }
78
80
 
79
- // Add to lazy blocks to search for
80
- options.lazyBlocksToSearchFor.push(`[data-assetkey="${asset.assetKey}"]`);
81
- options.lazyBlocksFound = Array.from(
82
- document.querySelectorAll(options.lazyBlocksToSearchFor)
83
- );
84
- });
81
+ // Add to lazy blocks to search for
82
+ options.lazyBlocksToSearchFor.push(
83
+ `[data-assetkey="${asset.assetKey}"]`
84
+ );
85
+ options.lazyBlocksFound = Array.from(
86
+ document.querySelectorAll(options.lazyBlocksToSearchFor)
87
+ );
88
+ });
85
89
 
86
- // If data eager loading attribute is true - load js straight away
87
- options.lazyBlocksFound.forEach((block) => {
88
- if (block.dataset.eager == "true") {
89
- callBlockJs(block);
90
- }
91
- });
90
+ // If data eager loading attribute is true - load js straight away
91
+ options.lazyBlocksFound.forEach((block) => {
92
+ if (block.dataset.eager == 'true') {
93
+ callBlockJs(block);
94
+ }
95
+ });
92
96
 
93
- options.debugLogMessages && console.log("Lazyloader Options", options);
97
+ options.debugLogMessages && console.log('Lazyloader Options', options);
94
98
 
95
- // Check if the browser has intersection observer which is needed for the Lazyloader or if all assets should load immediately anyway.
96
- if (options.lazy === false || !("IntersectionObserver" in window)) {
97
- options.debugLogMessages && console.log("running eager loading");
98
- try {
99
- options.lazyBlocksFound.forEach((block) => {
100
- callBlockJs(block);
101
- });
102
- } catch (error) {
103
- console.log(error);
104
- }
105
- } else {
106
- options.debugLogMessages && console.log("running normal process");
107
- observerInit(options.lazyBlocksFound);
108
- }
99
+ // Check if the browser has intersection observer which is needed for the Lazyloader or if all assets should load immediately anyway.
100
+ if (options.lazy === false || !('IntersectionObserver' in window)) {
101
+ options.debugLogMessages && console.log('running eager loading');
102
+ try {
103
+ options.lazyBlocksFound.forEach((block) => {
104
+ callBlockJs(block);
105
+ });
106
+ } catch (error) {
107
+ console.log(error);
108
+ }
109
+ } else {
110
+ options.debugLogMessages && console.log('running normal process');
111
+ observerInit(options.lazyBlocksFound);
112
+ }
109
113
  }
110
114
 
111
115
  /**
@@ -113,12 +117,12 @@ function lazyloaderInit() {
113
117
  * @param {array} elementsToObserve The array of block elements to observe.
114
118
  */
115
119
  function observerInit(elementsToObserve = []) {
116
- const observer = new IntersectionObserver(intersectionCallback, options);
117
- elementsToObserve.forEach((element) => {
118
- if (element) {
119
- observer.observe(element);
120
- }
121
- });
120
+ const observer = new IntersectionObserver(intersectionCallback, options);
121
+ elementsToObserve.forEach((element) => {
122
+ if (element) {
123
+ observer.observe(element);
124
+ }
125
+ });
122
126
  }
123
127
 
124
128
  /**
@@ -127,28 +131,28 @@ function observerInit(elementsToObserve = []) {
127
131
  * @param {object} observer The IntersectionObserver object.
128
132
  */
129
133
  const intersectionCallback = (entries, observer) => {
130
- options.debugLogMessages && console.log("Observer entries", entries);
131
- entries.forEach((entry) => {
132
- if (entry.isIntersecting) {
133
- const lazyTarget = entry.target;
134
- try {
135
- callBlockJs(lazyTarget);
136
- } catch (error) {
137
- console.log(
138
- error,
139
- "block data assetkey:",
140
- lazyTarget.dataset.assetkey,
141
- " - ",
142
- "asset import function:",
143
- options.assetMap[lazyTarget.dataset.assetkey],
144
- "are you missing an asset key or import function?"
145
- );
146
- }
147
- observer.unobserve(lazyTarget);
148
- options.debugLogMessages &&
149
- console.log("Unobserving lazyElement", lazyTarget);
150
- }
151
- });
134
+ options.debugLogMessages && console.log('Observer entries', entries);
135
+ entries.forEach((entry) => {
136
+ if (entry.isIntersecting) {
137
+ const lazyTarget = entry.target;
138
+ try {
139
+ callBlockJs(lazyTarget);
140
+ } catch (error) {
141
+ console.log(
142
+ error,
143
+ 'block data assetkey:',
144
+ lazyTarget.dataset.assetkey,
145
+ ' - ',
146
+ 'asset import function:',
147
+ options.assetMap[lazyTarget.dataset.assetkey],
148
+ 'are you missing an asset key or import function?'
149
+ );
150
+ }
151
+ observer.unobserve(lazyTarget);
152
+ options.debugLogMessages &&
153
+ console.log('Unobserving lazyElement', lazyTarget);
154
+ }
155
+ });
152
156
  };
153
157
 
154
158
  /**
@@ -156,29 +160,29 @@ const intersectionCallback = (entries, observer) => {
156
160
  * @param {object} block The block element.
157
161
  */
158
162
  function callBlockJs(block) {
159
- if (!block.classList.contains("loaded")) {
160
- Promise.all([
161
- options.assetMap[block.dataset.assetkey].js(),
162
- block.dataset.cssload !== "false" && loadCss(block.dataset.assetkey),
163
- ]).then((module) => {
164
- try {
165
- if (block.dataset.jsload !== "false") {
166
- module[0].default({
167
- block,
168
- css: false,
169
- });
170
- } else {
171
- options.debugLogMessages &&
172
- console.log(
173
- `Skipping JS load for block: ${block.dataset.assetkey}`
174
- );
175
- }
176
- block.classList.add("loaded");
177
- } catch (error) {
178
- console.log("could not load block js", error);
179
- }
180
- });
181
- }
163
+ if (!block.classList.contains('loaded')) {
164
+ Promise.all([
165
+ options.assetMap[block.dataset.assetkey].js(),
166
+ block.dataset.cssload !== 'false' && loadCss(block.dataset.assetkey)
167
+ ]).then((module) => {
168
+ try {
169
+ if (block.dataset.jsload !== 'false') {
170
+ module[0].default({
171
+ block,
172
+ css: false
173
+ });
174
+ } else {
175
+ options.debugLogMessages &&
176
+ console.log(
177
+ `Skipping JS load for block: ${block.dataset.assetkey}`
178
+ );
179
+ }
180
+ block.classList.add('loaded');
181
+ } catch (error) {
182
+ console.log('could not load block js', error);
183
+ }
184
+ });
185
+ }
182
186
  }
183
187
 
184
188
  /**
@@ -188,16 +192,16 @@ function callBlockJs(block) {
188
192
  * @returns {boolean}
189
193
  */
190
194
  export function inCriticalCssConfig(assetKey) {
191
- if (!globalThis.criticalConfig) {
192
- return false;
193
- }
194
- if (
195
- globalThis.criticalConfig &&
196
- globalThis.criticalConfig.indexOf(assetKey) === -1
197
- ) {
198
- return false;
199
- }
200
- return true;
195
+ if (!globalThis.criticalConfig) {
196
+ return false;
197
+ }
198
+ if (
199
+ globalThis.criticalConfig &&
200
+ globalThis.criticalConfig.indexOf(assetKey) === -1
201
+ ) {
202
+ return false;
203
+ }
204
+ return true;
201
205
  }
202
206
 
203
207
  /**
@@ -207,67 +211,67 @@ export function inCriticalCssConfig(assetKey) {
207
211
  * @returns {promise}
208
212
  */
209
213
  export function loadCss(assetKey) {
210
- // if (options.css == true && options.cssLoadingStyle === "bundle") {
211
- // options.debugLogMessages && console.log("using css bundle");
212
- // const promise = new Promise((resolve) => {
213
- // import(
214
- // `NodeModules/@total_onion/onion-library/public/publicbundlecss.css`
215
- // ).then(() => {
216
- // console.log("resolved");
217
- // resolve(true);
218
- // });
219
- // });
220
- // return promise;
221
- // }
222
- if (
223
- options.css == true &&
224
- options.cssLoadingStyle === "component" &&
225
- options.filePrefix === "nodemodules"
226
- ) {
227
- options.debugLogMessages && console.log("using individual css");
228
- const promise = new Promise((resolve) => {
229
- if (
230
- options.css === true &&
231
- !inCriticalCssConfig(assetKey) &&
232
- assetKey.includes("-v3")
233
- ) {
234
- import(
235
- /* webpackChunkName: "[request]" */ `NodeModules/@total_onion/onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
236
- ).then(() => resolve(true));
237
- } else if (
238
- options.css === true &&
239
- !inCriticalCssConfig(assetKey) &&
240
- !assetKey.includes("-v3")
241
- ) {
242
- import(
243
- /* webpackChunkName: "[request]" */ `Assets/scss/blocks/${assetKey}${options.fileSuffixCss}`
244
- ).then(() => resolve(true));
245
- } else {
246
- return resolve(true);
247
- }
248
- });
249
- }
250
- // if (
251
- // options.css == true &&
252
- // options.cssLoadingStyle === "component" &&
253
- // options.filePrefix === "dev"
254
- // ) {
255
- // options.debugLogMessages && console.log("using dev css");
256
- // const promise = new Promise((resolve) => {
257
- // if (options.css === true && !inCriticalCssConfig(assetKey)) {
258
- // import(
259
- // `../../../../../../../../onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
260
- // ).then(() => resolve(true));
261
- // } else {
262
- // return resolve(true);
263
- // }
264
- // });
265
- // }
214
+ // if (options.css == true && options.cssLoadingStyle === "bundle") {
215
+ // options.debugLogMessages && console.log("using css bundle");
216
+ // const promise = new Promise((resolve) => {
217
+ // import(
218
+ // `NodeModules/@total_onion/onion-library/public/publicbundlecss.css`
219
+ // ).then(() => {
220
+ // console.log("resolved");
221
+ // resolve(true);
222
+ // });
223
+ // });
224
+ // return promise;
225
+ // }
226
+ if (
227
+ options.css == true &&
228
+ options.cssLoadingStyle === 'component' &&
229
+ options.filePrefix === 'nodemodules'
230
+ ) {
231
+ options.debugLogMessages && console.log('using individual css');
232
+ const promise = new Promise((resolve) => {
233
+ if (
234
+ options.css === true &&
235
+ !inCriticalCssConfig(assetKey) &&
236
+ assetKey.includes('-v3')
237
+ ) {
238
+ import(
239
+ /* webpackChunkName: "[request]" */ `NodeModules/@total_onion/onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
240
+ ).then(() => resolve(true));
241
+ } else if (
242
+ options.css === true &&
243
+ !inCriticalCssConfig(assetKey) &&
244
+ !assetKey.includes('-v3')
245
+ ) {
246
+ import(
247
+ /* webpackChunkName: "[request]" */ `Assets/scss/blocks/${assetKey}${options.fileSuffixCss}`
248
+ ).then(() => resolve(true));
249
+ } else {
250
+ return resolve(true);
251
+ }
252
+ });
253
+ }
254
+ // if (
255
+ // options.css == true &&
256
+ // options.cssLoadingStyle === "component" &&
257
+ // options.filePrefix === "dev"
258
+ // ) {
259
+ // options.debugLogMessages && console.log("using dev css");
260
+ // const promise = new Promise((resolve) => {
261
+ // if (options.css === true && !inCriticalCssConfig(assetKey)) {
262
+ // import(
263
+ // `../../../../../../../../onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
264
+ // ).then(() => resolve(true));
265
+ // } else {
266
+ // return resolve(true);
267
+ // }
268
+ // });
269
+ // }
266
270
  }
267
271
 
268
272
  const api = {
269
- lazyloaderInit,
270
- options,
273
+ lazyloaderInit,
274
+ options
271
275
  };
272
276
 
273
277
  export default api;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.123",
3
+ "version": "2.0.124",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {