Pj/tester (#688)

* adding the build  command

* adding the webpack config for the destinations

* adding tester app

* yarn.lock

Author: pooyaj

package.json

@@ -15,7 +15,8 @@
     "test": "lerna run --concurrency 5 --since master test --stream -- --single-run --reporters summary --log-level error",
     "test:ci": "lerna run --concurrency 1 --stream --since master test:ci -- --log-level error",
     "compile": "webpack --config webpack.config.integrations.js && webpack --config webpack.config.middleware.js",
-    "build": "rm -rf build && yarn compile"
+    "build": "rm -rf build && yarn compile",
+    "dev": "concurrently \"yarn --cwd tester serve\" \"webpack --config webpack.config.tester.js --watch\""
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

tester/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "legacy-ajs-tester",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/segmentio/analytics.js-integrations.git",
+  "author": "Segment",
+  "license": "See LICENSE",
+  "private": true,
+  "scripts": {
+    "build": "webpack",
+    "serve": "webpack serve --open"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "7.18.6",
+    "@segment/analytics-next": "^1.38.0",
+    "babel-loader": "^8.2.5",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2"
+  }
+}

tester/src/App.js

@@ -0,0 +1,104 @@
+import { getSettings, loadAJS } from './utils';
+
+const App = function(props) {
+  const [loading, setLoading] = React.useState(false);
+  const [wk, setWk] = React.useState('');
+  const [ajsLoaded, setAjsLoaded] = React.useState(false);
+  const [dirty, setDirty] = React.useState(false);
+  const [editorVisible, setEditorVisible] = React.useState(false);
+  const editor = React.useRef(null);
+
+  React.useEffect(() => {
+    const wk = localStorage.getItem('segWk');
+    const settings = localStorage.getItem('segSettings');
+
+    wk && setWk(wk);
+    const settingsObject = JSON.parse(settings);
+
+    if (wk && Object.keys(settingsObject).length) {
+      // load AJS
+      loadAJS(wk, settingsObject);
+      setAjsLoaded(true);
+      setEditorVisible(true);
+    }
+
+    const container = document.getElementById('jsoneditor');
+    const options = {
+      onChange: () => {
+        setDirty(true);
+      }
+    };
+    editor.current = new JSONEditor(container, options);
+    editor.current.set(settingsObject);
+    editor.current.expand({
+      path: ['integrations'],
+      isExpand: true,
+      recursive: false
+    });
+  }, []);
+
+  const loadSettings = async () => {
+    setLoading(true);
+    const settingsJSON = await getSettings(wk);
+    const settings = JSON.stringify(settingsJSON, null, 2);
+    localStorage.setItem('segWk', wk);
+    localStorage.setItem('segSettings', settings);
+    editor.current.set(settingsJSON);
+    setLoading(false);
+    setEditorVisible(true);
+
+    if (ajsLoaded) {
+      setDirty(true);
+    } else {
+      loadAJS(wk, settingsJSON);
+      setAjsLoaded(true);
+    }
+  };
+
+  const handleReload = () => {
+    const settingsObject = editor.current.get();
+    const settings = JSON.stringify(settingsObject);
+
+    localStorage.setItem('segWk', wk);
+    localStorage.setItem('segSettings', settings);
+    location.reload();
+  };
+
+  return (
+    <div>
+      <form>
+        <fieldset>
+          <label htmlFor="writeKey">Writekey: </label>
+          <input
+            type="text"
+            placeholder="Segment writekey"
+            id="writeKey"
+            onChange={e => {
+              setWk(e.target.value);
+            }}
+            value={wk}
+          />
+          <input
+            className="pure-button pure-button-primary"
+            type="button"
+            value="Fetch Writekey"
+            onClick={loadSettings}
+          />
+          <input
+            className="pure-button pure-button-primary"
+            type="button"
+            value="Reload and init AJS"
+            onClick={handleReload}
+            disabled={!dirty}
+          />
+        </fieldset>
+      </form>
+      <div
+        id="jsoneditor"
+        style={{ height: '90vh', display: editorVisible ? 'block' : 'none' }}
+      ></div>
+    </div>
+  );
+};
+
+export default App;

tester/src/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
+    />
+    <link
+      href="https://unpkg.com/jsoneditor@9.9.0/dist/jsoneditor.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <style>
+      body {
+        font-family: sans-serif;
+        font-size: 14px;
+      }
+      fieldset {
+        border: none;
+        padding: 10px;
+      }
+
+      input {
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+        margin-left: 10px;
+        cursor: pointer;
+      }
+
+      input[type='text'] {
+        width: 200px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      Loading ...
+    </div>
+
+    <script
+      src="https://unpkg.com/react@16/umd/react.development.js"
+      crossorigin
+    ></script>
+    <script
+      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
+      crossorigin
+    ></script>
+    <script
+      src="https://unpkg.com/jsoneditor@9.9.0/dist/jsoneditor.min.js"
+      crossorigin
+    ></script>
+  </body>
+</html>

tester/src/index.js

@@ -0,0 +1,4 @@
+import App from './App';
+
+
+ReactDOM.render(<App />, document.getElementById('app'));

tester/src/utils.js

@@ -0,0 +1,39 @@
+import { AnalyticsBrowser } from '@segment/analytics-next';
+
+export async function getSettings(wk) {
+  let data = await fetch(`https://cdn.segment.com/v1/projects/${wk}/settings`);
+  data = await data.json();
+  return cleanSettings(data);
+}
+
+function cleanSettings(data) {
+  Object.keys(data.integrations).forEach(i => {
+    // setting the version of everything to latest
+    data.integrations[i].versionSettings.version = 'latest';
+    data.integrations[i].versionSettings.override = 'latest';
+  });
+
+  return data;
+}
+
+export async function loadAJS(writeKey, cdnSettings) {
+  Object.keys(cdnSettings.integrations).forEach(i => {
+    const name = i
+      .toLowerCase()
+      .replace('.', '')
+      .replace(/\s+/g, '-');
+
+    // we are not using common chunks for tester, so we can ignore the dependency resolution magic
+    window[`${name}Deps`] = [];
+    window[`${name}Loader`] = () => undefined;
+  });
+
+  const analytics = AnalyticsBrowser.load({
+    writeKey,
+    cdnURL: 'http://localhost:8080',
+    cdnSettings: { ...cdnSettings }
+  });
+
+  analytics.identify('hello world');
+  window.analytics = analytics;
+}

tester/webpack.config.js

@@ -0,0 +1,46 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  mode: 'none',
+  entry: './src/index.js',
+  output: {
+    path: __dirname + '/dist',
+    filename: 'bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  targets: {
+                    esmodules: true
+                  }
+                }
+              ],
+              '@babel/preset-react'
+            ]
+          }
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.ts', '.js']
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'src/index.html'
+    })
+  ],
+  devServer: {
+    static: path.resolve(__dirname, 'dist')
+  }
+};