feat: Add sideloaded kit example (#494)

Author: rmi22186

core-sdk-samples/higgs-shop-sample-app/package-lock.json

@@ -6,7 +6,7 @@
         "@emotion/react": "^11.10.6",
         "@emotion/styled": "^11.10.6",
         "@fontsource/lato": "^4.5.10",
-        "@mparticle/web-sdk": "^2.19.1",
+        "@mparticle/web-sdk": "^2.20.0",
         "@mui/icons-material": "^5.11.9",
         "@mui/material": "^5.11.10",
         "@testing-library/dom": "^9.0.0",
@@ -18,6 +18,7 @@
         "@types/react": "^17.0.43",
         "@types/react-dom": "^17.0.0",
         "gh-pages": "^5.0.0",
+        "sideloaded-kit-example": "file:../../kit-samples/sideloaded-kit-example",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^6.8.1",
@@ -50,7 +51,7 @@
         ]
     },
     "devDependencies": {
-        "@types/mparticle__web-sdk": "^2.18.0",
+        "@types/mparticle__web-sdk": "^2.20.0",
         "@typescript-eslint/eslint-plugin": "^5.53.0",
         "@typescript-eslint/parser": "^5.53.0",
         "eslint": "^8.34.0",

core-sdk-samples/higgs-shop-sample-app/package.json

@@ -15,6 +15,7 @@ describe('mParticle Web Sample App', () => {
                 isDevelopmentMode: true,
                 logLevel: 'verbose',
                 identityCallback: expect.any(Function),
+                sideloadedKits: expect.any(Array),
             });
         });
     });

core-sdk-samples/higgs-shop-sample-app/src/layouts/App/index.test.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { useEffect } from 'react';
 import mParticle from '@mparticle/web-sdk';
+import sideloadedKit from 'sideloaded-kit-example';
 import { HashRouter, Routes, Route } from 'react-router-dom';
 import { ThemeProvider } from '@mui/material/styles';
 import { NavigationMenu } from '../../components/NavigationMenu';
@@ -27,7 +28,6 @@ const App = () => {
         // and are included in all event uploads
         appName: 'Higgs Shop',
         appVersion: version,
-
         // `package` is an optional analytics attribute that mParticle
         //  uses to measure usage and diagnostics of the Sample Apps.
         //  In a production application, you can safely remove this, or set
@@ -72,6 +72,18 @@ const App = () => {
                 // the IDSync call failed
             }
         },
+
+        // Sideloaded kits can be used to receive callbacks when various things
+        // happen such as events being logged.  You can use them to debug the
+        // events going to your forwarders, or if you want to create a kit for a
+        // third party SDK that we don't yet support.
+        // This example is a simple implementation that only logs the callbacks
+        // and event received to the console, but the data in the callbacks can
+        // be used for anything.
+        // Please read our docs about sideloaded kits at
+        // https://docs.mparticle.com/developers/sdk/web/kits/#sideloaded-kits-custom-kits
+        // NOTE: Sideloaded kits are always active.
+        sideloadedKits: [sideloadedKit],
     };
 
     // In a true production implementation, you should load your mParticle API Key via

core-sdk-samples/higgs-shop-sample-app/src/layouts/App/index.tsx

@@ -0,0 +1,2 @@
+// Our kit builder does not currently have types, so we declare this here to avoid TS compilation errors
+declare module 'sideloaded-kit-example';

core-sdk-samples/higgs-shop-sample-app/src/types/index.d.ts

@@ -0,0 +1,22 @@
+{
+    "env": {
+        "browser": true,
+        "node": true,
+        "es2021": true
+    },
+    "globals": {
+        "mParticle": true
+    },
+    "extends": ["plugin:prettier/recommended", "eslint:recommended"],
+    "plugins": ["prettier"],
+    "rules": {
+        "indent": ["error", 4, { "SwitchCase": 1 }],
+        "prettier/prettier": "error",
+        "no-prototype-builtins": "off",
+        "no-empty": "off",
+        "no-useless-escape": "off",
+        "no-unexpected-multiline": "off",
+        "no-unused-vars": "off",
+        "comma-dangle": ["error", "always-multiline"]
+    }
+}

core-sdk-samples/higgs-shop-sample-app/yarn.lock

@@ -0,0 +1,4 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules

kit-samples/sideloaded-kit-example/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+    "semi": true,
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "all",
+    "endOfLine": "auto"
+}

kit-samples/sideloaded-kit-example/.gitignore

@@ -0,0 +1,15 @@
+# mParticle Sideloaded Kit Example
+
+This repository has an example of a sideloaded kit.  It was built using the [mParticle Web Integration Builder](https://github.com/mparticle-integrations/mparticle-javascript-integration-example). In this example, every mapped function simply logs that it was called.
+
+## Create Your Own Sideloaded Kit
+
+Detailed instructions on how to implement your own sideloaded kit can be found at our [doc site](URL TO BE ADDED). 
+
+## Support
+
+Questions? Give us a shout at <support@mparticle.com>
+
+## License
+
+This mParticle Web Kit is available under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0). See the LICENSE file for more info.