@cocreate/calculate 1.14.1

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@cocreate/calculate",
+  "version": "1.14.1",
+  "description": "A handy vanilla JavaScript calculator, concatenate multiple elements containing integers & execute calculates. Can be used for creating  invoices,making payments & any kind of complex calculate. Easily configured using HTML5 attributes and/or JavaScript API.",
+  "keywords": [
+    "calculate",
+    "calculate-values",
+    "calculate-total",
+    "cocreate",
+    "no-code-framework",
+    "cocreatejs",
+    "cocreatejs-component",
+    "cocreate-framework",
+    "no-code",
+    "low-code",
+    "collaborative-framework",
+    "realtime",
+    "realtime-framework",
+    "collaboration",
+    "shared-editing",
+    "html5-framework",
+    "javascript-framework"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "npx webpack --config webpack.config.js",
+    "build": "npx webpack --mode=production --config webpack.config.js",
+    "dev": "npx webpack --config webpack.config.js --watch",
+    "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); } }\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CoCreate-app/CoCreate-calculate.git"
+  },
+  "author": "CoCreate LLC",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/CoCreate-app/CoCreate-calculate/issues"
+  },
+  "homepage": "https://cocreate.app/docs/calculate",
+  "funding": {
+    "type": "GitHub Sponsors ❤",
+    "url": "https://github.com/sponsors/CoCreate-app"
+  },
+  "main": "./src/index.js",
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "file-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^1.5.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.1.1",
+    "webpack": "^5.24.4",
+    "webpack-cli": "^4.5.0",
+    "webpack-log": "^3.0.1"
+  },
+  "dependencies": {
+    "@cocreate/element-prototype": "^1.15.0",
+    "@cocreate/observer": "^1.14.0",
+    "@cocreate/utils": "^1.29.0"
+  }
+}

package/release.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  dryRun: false,
+  branches: ["master"],
+  plugins: [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/changelog",
+      {
+        changelogFile: "CHANGELOG.md",
+      },
+    ],
+    "@semantic-release/npm",
+    "@semantic-release/github",
+    [
+      "@semantic-release/git",
+      {
+        assets: ["CHANGELOG.md", "package.json"],
+      },
+    ],
+  ],
+};

package/src/index.js

@@ -0,0 +1,169 @@
+import observer from '@cocreate/observer';
+import { getAttributes } from '@cocreate/utils';
+// import { renderValue } from '@cocreate/render';
+import '@cocreate/element-prototype';
+
+
+function init() {
+    let calculateElements = document.querySelectorAll('[calculate]');
+    initElements(calculateElements);
+}
+
+function initElements(elements) {
+    for (let el of elements)
+        initElement(el);
+}
+
+function initElement(element) {
+    let calculate = element.getAttribute('calculate');
+    if (calculate.includes('{{') || calculate.includes('{['))
+        return;
+
+    let selectors = getSelectors(calculate);
+
+    for (let i = 0; i < selectors.length; i++) {
+        // if (selectors[i].includes('{{')) return;
+
+        // initEvents(element, selectors[i]);
+        let inputs = document.querySelectorAll(selectors[i]);
+        for (let input of inputs) {
+            initEvent(element, input);
+        }
+
+        observer.init({
+            name: 'calculateSelectorInit',
+            observe: ['addedNodes'],
+            target: selectors[i],
+            callback(mutation) {
+                initEvent(element, mutation.target);
+                setCalcationResult(element);
+            }
+        });
+    }
+    setCalcationResult(element);
+}
+
+function getSelectors(string) {
+    let regex = /\{\((?:(?!\{\().)*?\)\}/;
+    let selectors = [];
+
+    let match;
+    while ((match = regex.exec(string)) !== null) {
+        // Extract the content inside the braces (excluding the leading '{(' and trailing ')}')
+        let selector = match[0].slice(2, -2);
+
+        if (selectors.indexOf(selector) === -1) {
+            selectors.push(selector);
+        }
+
+        // Replace the found match with an empty string to avoid reprocessing in the next iteration
+        string = string.replace(match[0], '');
+    }
+
+    return selectors;
+}
+
+async function getValues(calculate) {
+    let selectors = getSelectors(calculate);
+
+    for (let i = 0; i < selectors.length; i++) {
+        let selector = selectors[i];
+
+        let value = null;
+        let inputs = document.querySelectorAll(selector);
+
+        for (let input of inputs) {
+            let val = null;
+            if (input.getValue)
+                val = Number(await input.getValue());
+
+            if (!Number.isNaN(value)) {
+                value += val;
+            }
+        }
+
+        if (value != null && !Number.isNaN(value)) {
+            calculate = calculate.replaceAll('{' + selector + '}', value);
+        }
+    }
+
+    return calculate;
+}
+
+function initEvent(element, input) {
+    input.addEventListener('input', function () {
+        setCalcationResult(element);
+    });
+
+    // if (input.hasAttribute('calculate')) {
+    //     input.addEventListener('changedCalcValue', function(e) {
+    //         setCalcationResult(element);
+    //     });
+    // }
+    // setCalcationResult(element);
+}
+
+async function setCalcationResult(element) {
+    const { object, isRealtime } = getAttributes(element);
+    let calculate = element.getAttribute('calculate');
+
+    let calString = await getValues(calculate);
+
+    if (calString) {
+        let result = calculate(calString);
+
+        // TODO: input event below triggers save for all input elements but will not save for regular elements
+        if (element.setValue) {
+            element.setValue(result)
+            if (object && isRealtime != "false") {
+                element.save(element);
+            }
+        }
+        else {
+            // if (element.value){
+
+            // }
+            // else {
+            element.innerHTML = result;
+            // }
+        }
+
+        let inputEvent = new CustomEvent('input', { bubbles: true });
+        Object.defineProperty(inputEvent, 'target', { writable: false, value: element });
+        element.dispatchEvent(inputEvent);
+
+        //. set custom event
+        // var event = new CustomEvent('changedCalcValue', {
+        //     bubbles: true,
+        // });
+        // element.dispatchEvent(event);
+    }
+
+}
+
+function calculate(string) {
+    if (/^[0-9+\-*/()%||?\s:=.]*$/.test(string))
+        return eval(string);
+}
+
+observer.init({
+    name: 'CoCreateCalculateChangeValue',
+    observe: ['attributes'],
+    attributeName: ['calculate'],
+    callback(mutation) {
+        setCalcationResult(mutation.target);
+    }
+});
+
+observer.init({
+    name: 'CoCreateCalculateInit',
+    observe: ['addedNodes'],
+    target: '[calculate]',
+    callback(mutation) {
+        initElement(mutation.target);
+    }
+});
+
+init();
+
+export default { initElements, initElement, calculate };

package/webpack.config.js

@@ -0,0 +1,90 @@
+const path = require("path")
+const TerserPlugin = require("terser-webpack-plugin")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const { CleanWebpackPlugin } = require("clean-webpack-plugin")
+
+module.exports = (env, argv) => {
+    let isProduction = false
+    if (argv.mode === 'production')
+        isProduction = true
+
+    const config = {
+        entry: {
+            "CoCreate-calculate": "./src/index.js",
+        },
+        output: {
+            path: path.resolve(__dirname, "dist"),
+            filename: isProduction ? "[name].min.js" : "[name].js",
+            libraryTarget: "umd",
+            libraryExport: "default",
+            library: ["CoCreate", "calculate"],
+            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" }),
+
+        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,
+                },
+            },
+        },
+    }
+    return config
+}