@cocreate/element-prototype - npm Package Compare versions

Comparing version 1.8.30 to 1.9.0

CHANGELOG.md

@@ -0,1 +1,19 @@
+# [1.9.0](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.8.30...v1.9.0) (2023-08-16)
+
+
+### Bug Fixes
+
+* crud attributes renamed ([a8e28ab](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/a8e28ab5dbb63c1093635c3366a04dc5004412d5))
+* getValue function to correctly retrieve the value from the element and handle different value types. ([ab8ba18](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/ab8ba182d4f3b58c891f07d4e544587855e13cab))
+* replace -target -selector ([b9ba7ad](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/b9ba7ad53b1e94bb67cbefe2d8105934c7088846))
+* webpack.config and package.json make use of mode=production instead of process.env ([1a54257](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/1a54257ed076ee863d8e41bc9e20abf5e2b6d103))
+
+
+### Features
+
+* Add storage map ([22d303a](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/22d303a6f75d4f13edcce7bbbe2e4b2dd541af2f))
+* name attribute and variable renamed to key ([912fd6b](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/912fd6b4199b02c55351d0a3c6787f584150d8bf))
+* Refactor set value function and add temporary data storage for components and plugins ([a99984c](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/a99984c55574f1f921157f613e84faf3c1745c5b))
+* Update setValue.js to handle object values type and improved overall performance. ([dd04a49](https://github.com/CoCreate-app/CoCreate-element-prototype/commit/dd04a49fd73c1419d4164e26ae8f8e8a3b652a8c))
+
 ## [1.8.30](https://github.com/CoCreate-app/CoCreate-element-prototype/compare/v1.8.29...v1.8.30) (2023-06-14)
@@ -2,0 +20,0 @@

CoCreate.config.js

@@ -7,4 +7,4 @@ module.exports = {
         {
-            "collection": "files",
-            "document": {
+            "array": "files",
+            "object": {
                 "_id": "637ca26450234ef1671ce305",
@@ -11,0 +11,0 @@ "name": "index.html",

package.json

 {
   "name": "@cocreate/element-prototype",
-  "version": "1.8.30",
+  "version": "1.9.0",
   "description": "A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
@@ -28,3 +28,3 @@ "keywords": [
     "start": "npx webpack --config webpack.config.js",
-    "build": "NODE_ENV=production npx webpack --config webpack.config.js",
+    "build": "npx webpack --mode=production --config webpack.config.js",
     "dev": "npx webpack --config webpack.config.js --watch",
@@ -38,3 +38,3 @@ "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); } }\""
   "author": "CoCreate LLC",
-  "license": "MIT",
+  "license": "AGPL-3.0",
   "bugs": {
@@ -63,4 +63,4 @@ "url": "https://github.com/CoCreate-app/CoCreate-element-prototype/issues"
   "dependencies": {
-    "@cocreate/utils": "^1.21.15"
+    "@cocreate/utils": "^1.21.16"
   }
 }

src/getValue.js

@@ -1,101 +0,105 @@
-HTMLElement.prototype.getValue = function() {
-	let value = getValue(this)
-	return value;
+const storage = new Map()
+
+HTMLElement.prototype.getValue = function () {
+    let value = getValue(this)
+    return value;
 };
 
-HTMLInputElement.prototype.getValue = function() {
-	let value = getValue(this)
-	return value;
+HTMLInputElement.prototype.getValue = function () {
+    let value = getValue(this)
+    return value;
 };
 
-HTMLHeadingElement.prototype.getValue = function() {
-	let value = getValue(this)
-	return value;
+HTMLHeadingElement.prototype.getValue = function () {
+    let value = getValue(this)
+    return value;
 };
 
-
-// TODO: replace esle if with switch case
+// TODO: check if using a a switch case will provide better performance
 const getValue = (element) => {
-	let value = element.value;
-	let prefix = element.getAttribute('value-prefix') || "";
-	let suffix = element.getAttribute('value-suffix') || "";
+    let value;
+    if (element.hasAttribute('component') || element.hasAttribute('plugin')) {
+        value = storage.get(element)
+        storage.delete(element)
+        return value
+    }
 
-	if (element.type === "checkbox") {
-		let inputs = [element]
-		let name = element.getAttribute('name');
-		if (name)
-			inputs = document.querySelectorAll(`input[type="${element.type}"][name="${name}"]`);
-			
+    let prefix = element.getAttribute('value-prefix') || "";
+    let suffix = element.getAttribute('value-suffix') || "";
 
-		if (inputs.length > 1) {
-			value = [];
-			inputs.forEach(el => {
-				if (el.checked) {
-					let checkedValue = el.value
-					if (prefix || suffix)
-						checkedValue = prefix + checkedValue + suffix;	
+    if (element.type === "checkbox") {
+        let inputs = [element]
+        let key = element.getAttribute('key');
+        if (key)
+            inputs = document.querySelectorAll(`input[type="${element.type}"][key="${key}"]`);
 
-					value.push(checkedValue);
-				}
-			});
-		} else {
-			if (element.checked) 
-				value = element.value || 'true'
-			else if (!element.value)
-				value = 'false'
 
-		}
-	} else if (element.type === 'radio') {
-		let name = element.getAttribute('name');
-		value = document.querySelector(`input[name="${name}"]:checked`).value
-	}
-	else if (element.type === "number") {
-		value = Number(value);
-	}
-	else if (element.type === 'range') {
-		value = [Number(element.min), Number(element.value)];
-	}
-	else if (element.type === "password") {
-		value = btoa(value);
-	}
-	else if (element.tagName == "SELECT" && element.hasAttribute('multiple')) {
-		let options = element.selectedOptions;
-		value = [];
-		for (let i = 0; i < options.length; i++) {
-			let optionValue = options[i].value
-			if (prefix || suffix)
-				optionValue = prefix + optionValue + suffix;	
-			value.push(optionValue);
-		}
-	}
-	else if (element.tagName == 'INPUT' || element.tagName == 'SELECT') {
-		value = element.value;
-	}
-	else if (element.tagName == 'TEXTAREA') {
-		if (element.hasAttribute('value'))
-			value = element.getAttribute('value');
-		else
-			value = element.value;
-	}
-	else if (element.t1agName === 'IFRAME') {
-		value = element.srcdoc;
-	}
-	else if (element.hasAttribute('value')){
-		value = element.getAttribute('value');
-	}
-	else {
-		value = element.innerHTML;
-	}
-	if (!Array.isArray(value)) {
-		if (prefix || suffix)
-			value = prefix + value + suffix;
+        if (inputs.length > 1) {
+            value = [];
+            inputs.forEach(el => {
+                if (el.checked) {
+                    let checkedValue = el.value
+                    if (prefix || suffix)
+                        checkedValue = prefix + checkedValue + suffix;
 
-		if (element.getAttribute('value-type') == 'array')
-			value = [value];
-	}
+                    value.push(checkedValue);
+                }
+            });
+        } else {
+            if (element.checked)
+                value = element.value || 'true'
+            else if (!element.value)
+                value = 'false'
 
+        }
+    } else if (element.type === 'radio') {
+        let key = element.getAttribute('key');
+        value = document.querySelector(`input[key="${key}"]:checked`).value
+    } else if (element.type === "number") {
+        value = Number(value);
+    } else if (element.type === 'range') {
+        value = [Number(element.min), Number(element.value)];
+    } else if (element.type === "password") {
+        value = btoa(value);
+    } else if (element.tagName == "SELECT" && element.hasAttribute('multiple')) {
+        let options = element.selectedOptions;
+        value = [];
+        for (let i = 0; i < options.length; i++) {
+            let optionValue = options[i].value
+            if (prefix || suffix)
+                optionValue = prefix + optionValue + suffix;
+            value.push(optionValue);
+        }
+    } else if (element.tagName == 'INPUT' || element.tagName == 'SELECT') {
+        value = element.value;
+    } else if (element.tagName == 'TEXTAREA') {
+        if (element.hasAttribute('value'))
+            value = element.getAttribute('value');
+        else
+            value = element.value;
+    } else if (element.tagName === 'IFRAME') {
+        value = element.srcdoc;
+    } else if (element.hasAttribute('value')) {
+        value = element.getAttribute('value');
+    } else {
+        value = element.innerHTML;
+    }
 
-	return value;
+    let valueType = element.getAttribute('value-type');
+    if (!Array.isArray(value)) {
+        if (prefix || suffix)
+            value = prefix + value + suffix;
+
+        if (valueType == 'array')
+            value = [value];
+    }
+
+    if (valueType == 'object' || valueType == 'json') {
+        value = JSON.parse(value)
+    }
+
+
+    return value;
 };
 
-export { getValue };
+export { getValue, storage };

src/index.js

 /********************************************************************************
- * Copyright (C) 2020 CoCreate LLC and others.
+ * Copyright (C) 2023 CoCreate and Contributors.
  *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
  *
- * SPDX-License-Identifier: MIT
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
  ********************************************************************************/
 
- import { setValue } from './setValue';
- import { getValue } from './getValue';
- 
+// Commercial Licensing Information:
+// For commercial use of this software without the copyleft provisions of the AGPLv3,
+// you must obtain a commercial license from CoCreate LLC.
+// For details, visit <https://cocreate.app/licenses/> or contact us at [e-mail].
 
- export default {getValue, setValue}
+import { setValue } from './setValue';
+import { getValue } from './getValue';
+
+
+export default { getValue, setValue }

src/setValue.js

 import { getAttributes } from '@cocreate/utils';
+import { storage } from './getValue';
 
-
 HTMLElement.prototype.setValue = function (value) {
@@ -12,3 +12,2 @@ setValue(this, value)
 
-
 HTMLHeadingElement.prototype.setValue = function (value) {
@@ -18,10 +17,17 @@ setValue(this, value)
 
+// TODO: check if using a a switch case will provide better performance
+const setValue = (el, value) => {
 
-const setValue = (el, value) => {
     if (value === null || value === undefined) return;
+    if (el.hasAttribute('component') || el.hasAttribute('plugin'))
+        return storage.set(el, value)
+    else if (typeof value === 'object')
+        value = JSON.stringify(value, null, 2)
+
     let valueType = el.getAttribute('value-type');
     let prefix = el.getAttribute('value-prefix') || "";
-    let suffix = el.getAttribute('value-suffix') || "";
     if (prefix)
         value = value.replace(prefix, "");
+
+    let suffix = el.getAttribute('value-suffix') || "";
     if (suffix)
@@ -38,5 +44,5 @@ value = value.replace(suffix, "");
             let inputs = [el]
-            let name = el.getAttribute('name');
-            if (name)
-                inputs = document.querySelectorAll(`input[type="${el.type}"][name="${name}"]`);
+            let key = el.getAttribute('key');
+            if (key)
+                inputs = document.querySelectorAll(`input[type="${el.type}"][key="${key}"]`);
 
@@ -57,10 +63,7 @@ for (let i = 0; i < inputs.length; i++) {
             }
-        }
-        else if (el.type === 'radio') {
+        } else if (el.type === 'radio') {
             el.value == value ? el.checked = true : el.checked = false;
-        }
-        else if (el.type === 'password') {
+        } else if (el.type === 'password') {
             el.value = __decryptPassword(value);
-        }
-        else if (el.tagName == "SELECT" && el.hasAttribute('multiple') && Array.isArray(value)) {
+        } else if (el.tagName == "SELECT" && el.hasAttribute('multiple') && Array.isArray(value)) {
             let options = el.options;
@@ -74,22 +77,14 @@ for (let i = 0; i < options.length; i++) {
             }
-        }
-        else
+        } else
             el.value = value;
+
         dispatchEvents(el)
-    }
-    else if (el.tagName === 'IMG' || el.tagName === 'SOURCE')
+    } else if (el.tagName === 'IMG' || el.tagName === 'SOURCE') {
         el.src = value;
-
-    else if (el.tagName === 'IFRAME')
+    } else if (el.tagName === 'IFRAME') {
         el.srcdoc = value;
-
-    else if (el.tagName === 'SCRIPT')
+    } else if (el.tagName === 'SCRIPT') {
         setScript(el, value);
-
-    else {
+    } else {
         if (el.hasAttribute('contenteditable') && el == document.activeElement) return;
-        // if (el.tagName === 'DIV') {
-        // 	if (!el.classList.contains('domEditor')
-        // 		return
-        // }
 
@@ -111,7 +106,7 @@ if (valueType == 'string' || valueType == 'text')
 
-            let css = newElement.querySelector('link[collection], link[document]')
+            let css = newElement.querySelector('link[array], link[object]')
             if (css)
                 css.remove()
 
-            if (el.getAttribute('domEditor') == "replace") {
+            if (valueType == 'outerHTML') {
                 let parentNode = el.parentNode;
@@ -126,5 +121,4 @@ if (parentNode) {
                 }
-            } else {
+            } else
                 el.innerHTML = newElement.innerHTML;
-            }
         }
@@ -141,4 +135,4 @@
     if (el.tagName == 'HEAD' || el.tagName == 'BODY') {
-        el.removeAttribute('collection');
-        el.removeAttribute('document_id');
+        el.removeAttribute('array');
+        el.removeAttribute('object');
         el.removeAttribute('pass_id');
@@ -187,2 +181,3 @@
     });
+
     Object.defineProperty(inputEvent, 'target', {
@@ -200,2 +195,3 @@ writable: false,
     });
+
     Object.defineProperty(changeEvent, 'target', {
@@ -202,0 +198,0 @@ writable: false,

webpack.config.js

 const path = require("path")
 const TerserPlugin = require("terser-webpack-plugin")
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
-let isProduction = process.env.NODE_ENV === "production"
 const { CleanWebpackPlugin } = require("clean-webpack-plugin")
 
-module.exports = {
-  entry: {
-    "CoCreate-element-prototype": "./src/index.js",
-  },
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: isProduction ? "[name].min.js" : "[name].js",
-    libraryTarget: "umd",
-    libraryExport: "default",
-    library: ["CoCreate", "element-prototype"],
-    globalObject: "this",
-  },
+module.exports = (env, argv) => {
+    let isProduction = false
+    if (argv.mode === 'production')
+        isProduction = true
 
-  plugins: [
-    new CleanWebpackPlugin(),
-    new MiniCssExtractPlugin({
-      filename: "[name].css",
-    }),
-  ],
-  // Default mode for Webpack is production.
-  // Depending on mode Webpack will apply different things
-  // on final bundle. For now we don't need production's JavaScript
-  // minifying and other thing so let's set mode to development
-  mode: isProduction ? "production" : "development",
-  module: {
-    rules: [
-      {
-        test: /.js$/,
-        exclude: /(node_modules)/,
-        use: {
-          loader: "babel-loader",
-          options: {
-            plugins: ["@babel/plugin-transform-modules-commonjs"],
-          },
+    const config = {
+        entry: {
+            "CoCreate-element-prototype": "./src/index.js",
         },
-      },
-      {
-        test: /.css$/i,
-        use: [
-          { loader: "style-loader", options: { injectType: "linkTag" } },
-          "file-loader",
+        output: {
+            path: path.resolve(__dirname, "dist"),
+            filename: isProduction ? "[name].min.js" : "[name].js",
+            libraryTarget: "umd",
+            libraryExport: "default",
+            library: ["CoCreate", "element-prototype"],
+            globalObject: "this",
+        },
+
+        plugins: [
+            new CleanWebpackPlugin(),
+            new MiniCssExtractPlugin({
+                filename: "[name].css",
+            }),
         ],
-      },
-    ],
-  },
+        // Default mode for Webpack is production.
+        // Depending on mode Webpack will apply different things
+        // on final bundle. For now we don't need production's JavaScript
+        // minifying and other thing so let's set mode to development
+        mode: isProduction ? "production" : "development",
+        module: {
+            rules: [
+                {
+                    test: /.js$/,
+                    exclude: /(node_modules)/,
+                    use: {
+                        loader: "babel-loader",
+                        options: {
+                            plugins: ["@babel/plugin-transform-modules-commonjs"],
+                        },
+                    },
+                },
+                {
+                    test: /.css$/i,
+                    use: [
+                        { loader: "style-loader", options: { injectType: "linkTag" } },
+                        "file-loader",
+                    ],
+                },
+            ],
+        },
 
-  // add source map
-  ...(isProduction ? {} : { devtool: "eval-source-map" }),
+        // add source map
+        ...(isProduction ? {} : { devtool: "eval-source-map" }),
 
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        extractComments: true,
-        // cache: true,
-        parallel: true,
-        // sourceMap: true, // Must be set to true if using source-maps in production
-        terserOptions: {
-          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
-          // extractComments: 'all',
-          compress: {
-            drop_console: true,
-          },
+        optimization: {
+            minimize: true,
+            minimizer: [
+                new TerserPlugin({
+                    extractComments: true,
+                    // cache: true,
+                    parallel: true,
+                    // sourceMap: true, // Must be set to true if using source-maps in production
+                    terserOptions: {
+                        // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+                        // extractComments: 'all',
+                        compress: {
+                            drop_console: true,
+                        },
+                    },
+                }),
+            ],
+            splitChunks: {
+                chunks: "all",
+                minSize: 200,
+                // maxSize: 99999,
+                //minChunks: 1,
+
+                cacheGroups: {
+                    defaultVendors: false,
+                },
+            },
         },
-      }),
-    ],
-    splitChunks: {
-      chunks: "all",
-      minSize: 200,
-      // maxSize: 99999,
-      //minChunks: 1,
-
-      cacheGroups: {
-        defaultVendors: false,
-      },
-    },
-  },
-}
+    }
+    return config
+}

New alerts

Copyleft License

License

(Experimental) Copyleft license information was found.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

116151

increased by50.67%

Lines of code

404

increased by3.86%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low license alerts

2

increased byInfinity%

License quality

70

decreased by-30%

Dependency changes

• Updated@cocreate/utils@^1.21.16