@cocreate/lazy-loader 1.3.29 → 1.4.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/CHANGELOG.md +15 -0
- package/CoCreate.config.js +2 -2
- package/docs/index.html +9 -9
- package/package.json +3 -3
- package/src/index.js +8 -8
- package/webpack.config.js +79 -73
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
# [1.4.0](https://github.com/CoCreate-app/CoCreate-lazy-loader/compare/v1.3.29...v1.4.0) (2023-08-16)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* crud attributes renamed ([2e8ad11](https://github.com/CoCreate-app/CoCreate-lazy-loader/commit/2e8ad111e9b972d9e4bb9e8339b413f96cb3a86d))
|
|
7
|
+
* replace -target -selector ([0c13543](https://github.com/CoCreate-app/CoCreate-lazy-loader/commit/0c135434255f484e7b9fed23a49456872c167b79))
|
|
8
|
+
* updated actions callback data object ([6d958b3](https://github.com/CoCreate-app/CoCreate-lazy-loader/commit/6d958b3bbaf2c62b88126e402ada5d50772e746d))
|
|
9
|
+
* webpack.config and package.json make use of mode=production instead of process.env ([7dd3233](https://github.com/CoCreate-app/CoCreate-lazy-loader/commit/7dd3233b04f4050d15f1a6c1a251301bd48e4eb8))
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
* name attribute and variable renamed to key ([46a524f](https://github.com/CoCreate-app/CoCreate-lazy-loader/commit/46a524f1942ad417619481d20f5eaff65cd0a498))
|
|
15
|
+
|
|
1
16
|
## [1.3.29](https://github.com/CoCreate-app/CoCreate-lazy-loader/compare/v1.3.28...v1.3.29) (2023-06-14)
|
|
2
17
|
|
|
3
18
|
|
package/CoCreate.config.js
CHANGED
package/docs/index.html
CHANGED
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
sizes="32x32"
|
|
12
12
|
href="https://cocreate.app/images/favicon.ico" />
|
|
13
13
|
<meta
|
|
14
|
-
|
|
14
|
+
key="description"
|
|
15
15
|
content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
|
|
16
16
|
<meta
|
|
17
|
-
|
|
17
|
+
key="keywords"
|
|
18
18
|
content="helper classes, utility classes, css framework, css library, inline style classes" />
|
|
19
19
|
<meta name="robots" content="index,follow" />
|
|
20
20
|
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
</head>
|
|
29
29
|
|
|
30
30
|
<body>
|
|
31
|
-
<div
|
|
31
|
+
<div array="" object="" key="" id="cocreate-lazy-loader">
|
|
32
32
|
<div
|
|
33
33
|
class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
|
|
34
34
|
<div class="display:flex align-items:center">
|
|
@@ -169,9 +169,9 @@
|
|
|
169
169
|
<textarea
|
|
170
170
|
type="code"
|
|
171
171
|
lang="html"
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
172
|
+
array="demos"
|
|
173
|
+
object=""
|
|
174
|
+
key="demo"
|
|
175
175
|
save="false"
|
|
176
176
|
id="demo"
|
|
177
177
|
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
|
|
@@ -194,7 +194,7 @@
|
|
|
194
194
|
show="#eye-slash"
|
|
195
195
|
hide="#eye, #demo-preview"
|
|
196
196
|
toggle="code-height"
|
|
197
|
-
toggle-
|
|
197
|
+
toggle-selector="#demo-code"
|
|
198
198
|
><i
|
|
199
199
|
class="height:18px fill:#505050"
|
|
200
200
|
src="/assets/svg/eye.svg"></i
|
|
@@ -206,7 +206,7 @@
|
|
|
206
206
|
show="#eye, #demo-preview"
|
|
207
207
|
hide="#eye-slash"
|
|
208
208
|
toggle="code-height"
|
|
209
|
-
toggle-
|
|
209
|
+
toggle-selector="#demo-code"
|
|
210
210
|
><i
|
|
211
211
|
class="height:20px fill:#505050"
|
|
212
212
|
src="/assets/svg/eye-slash.svg"></i
|
|
@@ -233,7 +233,7 @@
|
|
|
233
233
|
<a
|
|
234
234
|
class="margin-right:5px"
|
|
235
235
|
fullscreen
|
|
236
|
-
fullscreen-
|
|
236
|
+
fullscreen-selector="#playground"></a>
|
|
237
237
|
</div>
|
|
238
238
|
</div>
|
|
239
239
|
<!-- End SandBox -->
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/lazy-loader",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "A simple lazy-loader component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lazy-loader",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
},
|
|
26
26
|
"scripts": {
|
|
27
27
|
"start": "npx webpack --config webpack.config.js",
|
|
28
|
-
"build": "
|
|
28
|
+
"build": "npx webpack --mode=production --config webpack.config.js",
|
|
29
29
|
"dev": "npx webpack --config webpack.config.js --watch",
|
|
30
30
|
"postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\""
|
|
31
31
|
},
|
|
@@ -58,6 +58,6 @@
|
|
|
58
58
|
"webpack-log": "^3.0.1"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@cocreate/observer": "^1.8.
|
|
61
|
+
"@cocreate/observer": "^1.8.19"
|
|
62
62
|
}
|
|
63
63
|
}
|
package/src/index.js
CHANGED
|
@@ -5,9 +5,9 @@ function listen(callback, selector) {
|
|
|
5
5
|
function observerCallback({ target }) {
|
|
6
6
|
// let isInit = target.querySelector(selector)
|
|
7
7
|
// if (isInit) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
callback()
|
|
9
|
+
// console.log('lazyloaded', selector)
|
|
10
|
+
observer.uninit(observerCallback)
|
|
11
11
|
// }
|
|
12
12
|
}
|
|
13
13
|
|
|
@@ -18,9 +18,9 @@ function listen(callback, selector) {
|
|
|
18
18
|
callback: observerCallback
|
|
19
19
|
})
|
|
20
20
|
|
|
21
|
-
let selectorAttributes
|
|
21
|
+
let selectorAttributes = [];
|
|
22
22
|
let attributes = selector.split(",")
|
|
23
|
-
for (let attribute of attributes){
|
|
23
|
+
for (let attribute of attributes) {
|
|
24
24
|
let attr = attribute.trim()
|
|
25
25
|
if (attr.startsWith("[")) {
|
|
26
26
|
let pos = attr.indexOf("*")
|
|
@@ -36,14 +36,14 @@ function listen(callback, selector) {
|
|
|
36
36
|
|
|
37
37
|
}
|
|
38
38
|
if (selectorAttributes.length > 0)
|
|
39
|
-
observer.init({
|
|
40
|
-
name: 'lazyloadAttributeObserver',
|
|
39
|
+
observer.init({
|
|
40
|
+
name: 'lazyloadAttributeObserver',
|
|
41
41
|
observe: ['attributes'],
|
|
42
42
|
attributeName: selectorAttributes,
|
|
43
43
|
target: selector,
|
|
44
44
|
callback: observerCallback
|
|
45
45
|
});
|
|
46
|
-
|
|
46
|
+
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
export async function lazyLoad(name, selector, callback) {
|
package/webpack.config.js
CHANGED
|
@@ -1,84 +1,90 @@
|
|
|
1
1
|
const path = require("path")
|
|
2
2
|
const TerserPlugin = require("terser-webpack-plugin")
|
|
3
3
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
|
|
4
|
-
let isProduction = process.env.NODE_ENV === "production"
|
|
5
4
|
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
|
|
6
5
|
|
|
7
|
-
module.exports = {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
output: {
|
|
12
|
-
path: path.resolve(__dirname, "dist"),
|
|
13
|
-
filename: isProduction ? "[name].min.js" : "[name].js",
|
|
14
|
-
libraryTarget: "umd",
|
|
15
|
-
libraryExport: "default",
|
|
16
|
-
library: ["CoCreate", "lazy-loader"],
|
|
17
|
-
globalObject: "this",
|
|
18
|
-
},
|
|
6
|
+
module.exports = (env, argv) => {
|
|
7
|
+
let isProduction = false
|
|
8
|
+
if (argv.mode === 'production')
|
|
9
|
+
isProduction = true
|
|
19
10
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
filename: "[name].css",
|
|
24
|
-
}),
|
|
25
|
-
],
|
|
26
|
-
// Default mode for Webpack is production.
|
|
27
|
-
// Depending on mode Webpack will apply different things
|
|
28
|
-
// on final bundle. For now we don't need production's JavaScript
|
|
29
|
-
// minifying and other thing so let's set mode to development
|
|
30
|
-
mode: isProduction ? "production" : "development",
|
|
31
|
-
module: {
|
|
32
|
-
rules: [
|
|
33
|
-
{
|
|
34
|
-
test: /.js$/,
|
|
35
|
-
exclude: /(node_modules)/,
|
|
36
|
-
use: {
|
|
37
|
-
loader: "babel-loader",
|
|
38
|
-
options: {
|
|
39
|
-
plugins: ["@babel/plugin-transform-modules-commonjs"],
|
|
40
|
-
},
|
|
11
|
+
const config = {
|
|
12
|
+
entry: {
|
|
13
|
+
"CoCreate-lazy-loader": "./src/index.js",
|
|
41
14
|
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
15
|
+
output: {
|
|
16
|
+
path: path.resolve(__dirname, "dist"),
|
|
17
|
+
filename: isProduction ? "[name].min.js" : "[name].js",
|
|
18
|
+
libraryTarget: "umd",
|
|
19
|
+
libraryExport: "default",
|
|
20
|
+
library: ["CoCreate", "lazy-loader"],
|
|
21
|
+
globalObject: "this",
|
|
22
|
+
},
|
|
23
|
+
|
|
24
|
+
plugins: [
|
|
25
|
+
new CleanWebpackPlugin(),
|
|
26
|
+
new MiniCssExtractPlugin({
|
|
27
|
+
filename: "[name].css",
|
|
28
|
+
}),
|
|
48
29
|
],
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
30
|
+
// Default mode for Webpack is production.
|
|
31
|
+
// Depending on mode Webpack will apply different things
|
|
32
|
+
// on final bundle. For now we don't need production's JavaScript
|
|
33
|
+
// minifying and other thing so let's set mode to development
|
|
34
|
+
mode: isProduction ? "production" : "development",
|
|
35
|
+
module: {
|
|
36
|
+
rules: [
|
|
37
|
+
{
|
|
38
|
+
test: /.js$/,
|
|
39
|
+
exclude: /(node_modules)/,
|
|
40
|
+
use: {
|
|
41
|
+
loader: "babel-loader",
|
|
42
|
+
options: {
|
|
43
|
+
plugins: ["@babel/plugin-transform-modules-commonjs"],
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
test: /.css$/i,
|
|
49
|
+
use: [
|
|
50
|
+
{ loader: "style-loader", options: { injectType: "linkTag" } },
|
|
51
|
+
"file-loader",
|
|
52
|
+
],
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
},
|
|
52
56
|
|
|
53
|
-
|
|
54
|
-
|
|
57
|
+
// add source map
|
|
58
|
+
...(isProduction ? {} : { devtool: "eval-source-map" }),
|
|
55
59
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
60
|
+
optimization: {
|
|
61
|
+
minimize: true,
|
|
62
|
+
minimizer: [
|
|
63
|
+
new TerserPlugin({
|
|
64
|
+
extractComments: true,
|
|
65
|
+
// cache: true,
|
|
66
|
+
parallel: true,
|
|
67
|
+
// sourceMap: true, // Must be set to true if using source-maps in production
|
|
68
|
+
terserOptions: {
|
|
69
|
+
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
|
|
70
|
+
// extractComments: 'all',
|
|
71
|
+
compress: {
|
|
72
|
+
drop_console: true,
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
}),
|
|
76
|
+
],
|
|
77
|
+
splitChunks: {
|
|
78
|
+
chunks: "all",
|
|
79
|
+
minSize: 200,
|
|
80
|
+
// maxSize: 99999,
|
|
81
|
+
//minChunks: 1,
|
|
78
82
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}
|
|
83
|
+
cacheGroups: {
|
|
84
|
+
defaultVendors: false,
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
}
|
|
89
|
+
return config
|
|
90
|
+
}
|