ts-webpack done

Author: iandeth

xhr-and-dom-append/ts-webpack/.eslintrc.js

@@ -17,5 +17,6 @@ module.exports = {
   ],
   rules: {
     "@typescript-eslint/no-explicit-any": "off", // any は許可でまずやってみよ
+    "no-debugger": "warn",
   },
 };

xhr-and-dom-append/ts-webpack/kaizen-web-api

@@ -0,0 +1 @@
+../plain-js/kaizen-web-api

xhr-and-dom-append/ts-webpack/package-lock.json

@@ -25,6 +25,7 @@
     "@types/mocha": "^7.0.2",
     "@typescript-eslint/eslint-plugin": "^3.10.1",
     "@typescript-eslint/parser": "^3.10.1",
+    "axios": "^0.20.0",
     "babel-loader": "^8.1.0",
     "chai": "^4.2.0",
     "core-js": "^3.6.5",
@@ -43,5 +44,6 @@
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^5.1.4"
-  }
+  },
+  "dependencies": {}
 }

xhr-and-dom-append/ts-webpack/package.json

@@ -1 +1,20 @@
-console.log("hellox");
+import { loadPlaces } from "./placesProvider";
+import { render } from "./view";
+import { sendViewLog } from "./logger";
+
+// main scope logic
+const run = async (): Promise<void> => {
+  try {
+    console.log("kaizen.js run");
+
+    const ps = await loadPlaces();
+    render(ps);
+    sendViewLog(ps.length);
+
+    console.log("kaizen.js done");
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+run();

xhr-and-dom-append/ts-webpack/src/kaizen.ts

@@ -0,0 +1,5 @@
+export const sendViewLog = (placesCount: number): void => {
+  console.log(`sendLog: ${placesCount} items displayed`);
+  // 実際の計測ログ送信 code は省略。code image は以下:
+  // kzs("trackCustomEvent", { action:"places-ui-displayed", items: placesCount });
+};

xhr-and-dom-append/ts-webpack/src/logger.ts

@@ -0,0 +1,37 @@
+import axios from "axios";
+
+export interface ApiRes {
+  success: boolean;
+  error?: string;
+  places?: Places;
+}
+
+export type Places = Place[];
+
+interface Place {
+  id: string;
+  name: string;
+  country: string;
+  image: string;
+  googleMap: string;
+}
+
+const urls = {
+  hit:
+    "https://storage.googleapis.com/kaizen-cse-public/cse-examples/xhr-and-dom-append/plain-js/kaizen-web-api/places.json?20200910",
+  // API response 0 件パターン
+  zeroHit:
+    "https://storage.googleapis.com/kaizen-cse-public/cse-examples/xhr-and-dom-append/plain-js/kaizen-web-api/places-zero.json?20200910",
+  // API error response パターン
+  error:
+    "https://storage.googleapis.com/kaizen-cse-public/cse-examples/xhr-and-dom-append/plain-js/kaizen-web-api/places-fail.json?20200910",
+};
+
+// Kaizen Web API からコンテンツを取得
+export const loadPlaces = async (): Promise<Places> => {
+  const r: ApiRes = (await axios.get(urls.hit)).data; // or urls.zeroHit or urls.error
+  console.log("xhr done", r);
+
+  if (!r.success) throw new Error(r.error);
+  return r.places || [];
+};

xhr-and-dom-append/ts-webpack/src/placesProvider.ts

@@ -0,0 +1,43 @@
+.s01 form .inner-form.kz {
+  margin-top: 20px;
+}
+
+.kz-item {
+  width: 100%;
+  clear: both;
+  color: white;
+}
+
+.kz-name a {
+  font-size: 1.2em;
+  font-weight: bold;
+  color: white;
+}
+
+.kz-image {
+  float: left;
+}
+
+.kz-image img {
+  width: 100px;
+}
+
+.kz-desc {
+  float: left;
+  margin-left: 10px;
+  font-size: 0.9em;
+}
+
+@media screen and (max-width: 767px) {
+  .s01 form .inner-form.kz {
+    padding-bottom: 10px;
+  }
+
+  .kz-item {
+    margin-bottom: 10px;
+  }
+
+  .kz-image img {
+    width: 60px;
+  }
+}

xhr-and-dom-append/ts-webpack/src/view.css

@@ -0,0 +1,26 @@
+import { Places } from "./placesProvider";
+import "./view.css";
+
+export const render = (places: Places): boolean => {
+  if (places.length === 0) return false;
+
+  const $w = $(`<div class="inner-form kz"></div>`).insertAfter(".inner-form");
+
+  $.each(places, function (i, p) {
+    $(`
+        <div class="kz-item">
+          <div class="kz-image">
+            <img src=${p.image} />
+          </div>
+          <div class="kz-desc">
+            <div class="kz-name">
+              <a href="${p.googleMap}" target="_blank">${p.name}</a>
+            </div>
+            <div class="kz-country">${p.country}</div>
+          </div>
+        </div>
+      `).appendTo($w);
+  });
+
+  return true;
+};

xhr-and-dom-append/ts-webpack/src/view.ts

@@ -4,6 +4,7 @@
   "compilerOptions": {
     // project options
     "module": "es6",
+    "moduleResolution": "node",
     "removeComments": false,
     "sourceMap": true,
     "target": "es6",