init ga4

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.2",
+  "version": "2.0.6",
   "name": "i13n",
   "repository": {
     "type": "git",
@@ -23,26 +23,31 @@
   },
   "devDependencies": {
     "react-atomic-atom": "*",
+    "reshow-map": "*",
     "reshow-unit-dom": "*"
   },
   "exports": {
+    "types": "./types/index.d.ts",
     "require": "./build/cjs/src/index.js",
     "import": "./build/es/src/index.mjs"
   },
   "main": "./build/cjs/src/index.js",
   "module": "./build/es/src/index.mjs",
   "scripts": {
     "format": "prettier-eslint --write 'src/**/*.js' 'ui/**/*.jsx'",
-    "clean": "find ./build -name '*.*' | xargs rm -rf",
+    "clean": "find ./build ./types -name '*.*' | xargs rm -rf",
     "build:cjs": "BABEL_ENV=cjs babel src -d build/cjs/src --ignore /**/__tests__",
     "build:es": "BABEL_ENV=es babel src -d build/es/src --out-file-extension .mjs",
-    "build": "npm run clean && npm run build:cjs && npm run build:es",
+    "build:type": "npx -p typescript tsc src/*.js --declaration --allowJs --emitDeclarationOnly --skipLibCheck --declarationDir types",
+    "build": "npm run clean && npm run build:cjs && npm run build:es && npm run build:type",
     "mochaFor": "mocha -r global-jsdom/register",
     "mocha": "npm run mochaFor -- 'build/es/**/__tests__/*.mjs'",
     "test": "npm run build && npm run mocha",
     "prepublishOnly": "npm run test"
   },
+  "types": "./types/index.d.ts",
   "files": [
+    "types",
     "build",
     "package.json",
     "README.md"

packages/i13n-client/compile.sh

@@ -7,9 +7,10 @@ webpack='npm run webpack --'
 production(){
     echo "Production Mode";
     npm run build
+    find ./assets ./dist -name '*.*' | xargs rm -rf
     CONFIG=$conf NODE_ENV=production $webpack 
     mkdir -p dist
-    cp assets/simple.bundle.js dist/simple.js 
+    cp assets/browser.bundle.js dist/browser.js 
 }
 
 analyzer(){
@@ -42,6 +43,7 @@ watch(){
     stop 
     npm run build:cjs -- --watch &
     npm run build:es -- --watch &
+    CONFIG=$conf $webpack --watch
 }
 
 

packages/i13n-client/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.15.2",
+  "version": "0.16.10",
   "name": "i13n-client",
   "repository": {
     "type": "git",
@@ -26,6 +26,8 @@
     "object-nested": "*",
     "parse-ini-string": "*",
     "reshow-constant": "*",
+    "reshow-map": "*",
+    "reshow-runtime": "*",
     "seturl": "*",
     "to-percent-js": "*",
     "url-route": "*",
@@ -34,10 +36,13 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.x",
+    "@types/mocha": "*",
     "reshow-app": "*",
-    "reshow-unit-dom": "*"
+    "reshow-unit-dom": "*",
+    "user-agent-data-types": "0.4.2"
   },
   "exports": {
+    "types": "./types/index.d.ts",
     "require": "./build/cjs/src/index.js",
     "import": "./build/es/src/index.mjs"
   },
@@ -46,18 +51,21 @@
   "scripts": {
     "webpack": "webpack",
     "start": "ws",
-    "clean": "find ./build ./assets -name '*.*' | xargs rm -rf",
+    "clean": "find ./build ./types -name '*.*' | xargs rm -rf",
     "build:cjs": "BABEL_ENV=cjs babel src -d build/cjs/src --ignore /**/__tests__ --root-mode upward",
     "build:es": "BABEL_ENV=es babel src -d build/es/src --out-file-extension .mjs --root-mode upward",
-    "build": "npm run clean && npm run build:cjs && npm run build:es",
+    "build:type": "npx -p typescript tsc src/*.js src/**/*/*.js --declaration --allowJs --emitDeclarationOnly --target esnext --module nodenext --moduleResolution nodenext --types user-agent-data-types,mocha --skipLibCheck --declarationDir types",
+    "build": "npm run clean && npm run build:cjs && npm run build:es && npm run build:type",
     "mochaFor": "mocha -r global-jsdom/register",
     "mocha": "npm run mochaFor -- 'build/es/**/__tests__/*.mjs'",
     "nyc": "nyc npm run mocha",
     "test": "npm run build && npm run mocha",
     "prepublishOnly": "npm run test && npm run build && ./compile.sh p"
   },
+  "types": "./types/index.d.ts",
   "files": [
     "dist",
+    "types",
     "build",
     "package.json",
     "README.md"

packages/i13n-client/src/actions/DataLayerToEcMp.js

@@ -0,0 +1,225 @@
+//@ts-check
+
+import callfunc from "call-func";
+import { removeEmpty } from "array.merge";
+import { KEYS } from "reshow-constant";
+import { UNDEFINED } from "reshow-constant";
+import { getNum } from "to-percent-js";
+const DIMENSION = "dimension";
+const METRIC = "metric";
+const isArray = (/**@type any*/ a) => a && Array.isArray(a) && a.length;
+
+
+/**
+ * @param {number=} v
+ */
+const notUndefinedNum = (v) => (UNDEFINED !== typeof v ? getNum(v) : v);
+
+export const getEcImpressionsData = (impressions, config) => {
+  if (isArray(impressions)) {
+    let listLen = 1;
+    const aList = {};
+    const data = {};
+    impressions.forEach(({ list, ...prod }) => {
+      if (!aList[list]) {
+        aList[list] = {
+          key: "il" + listLen,
+          n: 1,
+        };
+        listLen++;
+        data[aList[list].key + "nm"] = list;
+      }
+      const key = aList[list].key + "pi" + aList[list].n;
+      aList[list].n++;
+      setOneProduct(key, data, prod, config);
+    });
+    return data;
+  }
+};
+
+export const getEcStepData = (checkout, checkout_option, config) => {
+  if (checkout || checkout_option) {
+    const { actionField, products } = checkout || checkout_option;
+    const { step, option } = actionField || {};
+    const data = {
+      cos: step,
+      col: option,
+      pa: checkout_option ? "checkout_option" : "checkout",
+      ...getProductsData(products, config),
+    };
+    return data;
+  }
+};
+
+export const getItemsData = (items, itemKey, itemCb, config) => {
+  if (isArray(items)) {
+    let sn = 1;
+    const data = {};
+    items.forEach((item) => {
+      if (!item) {
+        return;
+      }
+      const key = itemKey + sn;
+      sn++;
+      callfunc(itemCb, [key, data, item, config]);
+    });
+    return data;
+  }
+};
+
+const getPromotionsData = (promotions) =>
+  getItemsData(promotions, "promo", setOnePromotion);
+
+export const getEcPromotionData = (promoView, promoClick) => {
+  if (promoView || promoClick) {
+    let action;
+    const { promotions } = promoView || promoClick;
+    if (promoView) {
+      action = "view";
+    } else {
+      action = "click";
+    }
+    const data = {
+      promoa: action,
+      ...getPromotionsData(promotions),
+    };
+    return data;
+  }
+};
+
+export const setOnePromotion = (key, data, item) => {
+  const { id, name, creative, position } = item;
+  data[key + "id"] = id;
+  data[key + "nm"] = name;
+  data[key + "cr"] = creative;
+  data[key + "ps"] = notUndefinedNum(position);
+};
+
+const getProductsData = (products, config) =>
+  getItemsData(products, "pr", setOneProduct, config);
+
+export const setOneProduct = (key, data, item, config) => {
+  const {
+    id,
+    name,
+    category,
+    brand,
+    variant,
+    position,
+    price,
+    quantity,
+    coupon,
+    image,
+    sku,
+    ...others
+  } = item;
+  if (id == null && name == null) {
+    return;
+  }
+  data[key + "id"] = id;
+  data[key + "nm"] = name;
+  data[key + "br"] = brand;
+  data[key + "ca"] = category;
+  data[key + "va"] = variant;
+  data[key + "pr"] = notUndefinedNum(price);
+  data[key + "qt"] = quantity;
+  data[key + "cc"] = coupon;
+  data[key + "ps"] = notUndefinedNum(position);
+  data[key + "img"] = image;
+  data[key + "sku"] = sku;
+  KEYS(others).forEach((k) => {
+    let endKey;
+    if (0 === k.indexOf(DIMENSION)) {
+      endKey = "cd";
+    }
+    if (0 === k.indexOf(METRIC)) {
+      endKey = "cm";
+    }
+    if (endKey) {
+      const sn = getNum(k);
+      data[key + endKey + sn] = others[k];
+    }
+  });
+  const { imageIndex } = config || {};
+  if (imageIndex) {
+    data[key + "cd" + config.imageIndex] = image;
+  }
+};
+
+export const getEcPurchaseData = (purchase, refund, config) => {
+  if (purchase || refund) {
+    const { actionField, products } = purchase || refund;
+    const { id, affiliation, revenue, tax, shipping, coupon } =
+      actionField || {};
+    let data;
+    if (purchase) {
+      data = {
+        pa: "purchase",
+        ti: id,
+        ta: affiliation,
+        tr: notUndefinedNum(revenue),
+        tt: notUndefinedNum(tax),
+        ts: notUndefinedNum(shipping),
+        tcc: coupon,
+      };
+    } else {
+      data = {
+        pa: "refund",
+        ti: id,
+      };
+    }
+    if (products) {
+      data = {
+        ...data,
+        ...getProductsData(products, config),
+      };
+    }
+    return data;
+  }
+};
+
+export const getEcActionData = (options, action, config) => {
+  if (options) {
+    const { actionField, products } = options;
+    const { list } = actionField || {};
+    const data = {
+      ...getProductsData(products, config),
+      pa: action,
+      pal: list,
+    };
+    // use removeEmtpy to clean non-use pa
+    return removeEmpty(data, true);
+  }
+};
+
+export const getEcData = (config) => {
+  const { ecommerce } = config || {};
+  if (ecommerce) {
+    const {
+      impressions,
+      detail,
+      click,
+      add,
+      remove,
+      checkout,
+      checkout_option,
+      purchase,
+      refund,
+      promoView,
+      promoClick,
+      currencyCode,
+    } = ecommerce;
+    const data = {
+      ...getEcImpressionsData(impressions, config),
+      ...getEcActionData(detail, "detail", config),
+      ...getEcActionData(click, "click", config),
+      ...getEcActionData(add, "add", config),
+      ...getEcActionData(remove, "remove", config),
+      ...getEcStepData(checkout, checkout_option, config),
+      ...getEcPurchaseData(purchase, refund, config),
+      ...getEcPromotionData(promoView, promoClick),
+      cu: currencyCode,
+    };
+    return data;
+  }
+};