sintfacilis 1.0.0

package/demos/webmap-checker-sapper/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "sapper-webmap-checker",
+  "description": "this thing is cray cray",
+  "private": true,
+  "version": "3.3.0",
+  "scripts": {
+    "dev": "sapper dev",
+    "build:legacy": "sapper build --legacy",
+    "export": "sapper export --legacy",
+    "start": "node __sapper__/build",
+    "cy:run": "cypress run",
+    "cy:open": "cypress open",
+    "test": "run-p --race dev cy:run"
+  },
+  "dependencies": {
+    "@esri/arcgis-rest-auth": "^3.3.0",
+    "@esri/arcgis-rest-portal": "^3.3.0",
+    "@esri/arcgis-rest-request": "^3.3.0",
+    "compression": "^1.7.1",
+    "cookies": "^0.7.3",
+    "cross-fetch": "^3.0.0",
+    "dotenv": "^6.2.0",
+    "esri-loader": "^2.6.0",
+    "express": "^4.16.4",
+    "express-session": "^1.15.6",
+    "fs-extra": "^7.0.1",
+    "isomorphic-form-data": "^1.0.0",
+    "polka": "^0.4.0",
+    "session-file-store": "^1.2.0",
+    "sirv": "^0.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
+    "chokidar": "^2.1.0",
+    "npm-run-all": "^4.1.5",
+    "rollup": "^1.0.0",
+    "rollup-plugin-babel": "^4.0.2",
+    "rollup-plugin-commonjs": "^9.1.6",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-svelte": "^5.0.1",
+    "rollup-plugin-terser": "^1.0.1",
+    "sapper": "^0.24.2",
+    "svelte": "^2.0.0"
+  }
+}

package/demos/webmap-checker-sapper/rollup.config.js

@@ -0,0 +1,87 @@
+import resolve from 'rollup-plugin-node-resolve';
+import replace from 'rollup-plugin-replace';
+import commonjs from 'rollup-plugin-commonjs';
+import svelte from 'rollup-plugin-svelte';
+import babel from 'rollup-plugin-babel';
+import { terser } from 'rollup-plugin-terser';
+import config from 'sapper/config/rollup.js';
+import pkg from './package.json';
+
+const mode = process.env.NODE_ENV;
+const dev = mode === 'development';
+const legacy = !!process.env.SAPPER_LEGACY_BUILD;
+
+export default {
+	client: {
+		input: config.client.input(),
+		output: config.client.output(),
+		plugins: [
+			replace({
+				'process.browser': true,
+				'process.env.NODE_ENV': JSON.stringify(mode)
+			}),
+			svelte({
+				dev,
+				hydratable: true,
+				emitCss: true
+			}),
+			resolve(),
+			commonjs(),
+
+			legacy && babel({
+				extensions: ['.js', '.html'],
+				runtimeHelpers: true,
+				exclude: ['node_modules/@babel/**'],
+				presets: [
+					['@babel/preset-env', {
+						targets: '> 0.25%, not dead'
+					}]
+				],
+				plugins: [
+					'@babel/plugin-syntax-dynamic-import',
+					['@babel/plugin-transform-runtime', {
+						useESModules: true
+					}]
+				]
+			}),
+
+			!dev && terser({
+				module: true
+			})
+		],
+	},
+
+	server: {
+		input: config.server.input(),
+		output: config.server.output(),
+		plugins: [
+			replace({
+				'process.browser': false,
+				'process.env.NODE_ENV': JSON.stringify(mode)
+			}),
+			svelte({
+				generate: 'ssr',
+				dev
+			}),
+			resolve(),
+			commonjs()
+		],
+		external: Object.keys(pkg.dependencies).concat(
+			require('module').builtinModules || Object.keys(process.binding('natives'))
+		),
+	},
+
+	serviceworker: {
+		input: config.serviceworker.input(),
+		output: config.serviceworker.output(),
+		plugins: [
+			resolve(),
+			replace({
+				'process.browser': true,
+				'process.env.NODE_ENV': JSON.stringify(mode)
+			}),
+			commonjs(),
+			!dev && terser()
+		]
+	}
+};

package/demos/webmap-checker-sapper/src/client.js

@@ -0,0 +1,20 @@
+import * as sapper from "../__sapper__/client.js";
+import { Store } from "svelte/store.js";
+import { UserSession } from "@esri/arcgis-rest-auth";
+
+// sapper will have already rendered the HTML page in a specific state
+// based on the Store we defined in server.js but we need to rehydrate that
+// state on the client and start sapper.
+sapper.start({
+  target: document.querySelector("#app"),
+  store: data => {
+    // `data` is whatever was in the Store on the server side.
+    // if we have a session we can create a new UserSession that we can
+    // use with ArcGIS REST JS on the client.
+    return new Store({
+      session: data && data.session ? new UserSession(data.session) : null,
+      user: data.user,
+      org: data.org
+    });
+  }
+});

package/demos/webmap-checker-sapper/src/components/LayerStatus.html

@@ -0,0 +1,108 @@
+<h3>{title}</h3>
+
+<!-- Render a link to ArcGIS Online -->
+{#if itemId}
+<p>
+  <a href="https://{$org.urlKey}.maps.arcgis.com/home/item.html?id={itemId}"
+    >View in ArcGIS Online</a
+  >
+</p>
+{/if}
+
+<!-- Render a link to the service URL -->
+{#if url || (item && item.url)}
+<p>
+  <a href="{url || item.url}?token={$session.token}">
+    View Service URL
+  </a>
+</p>
+{/if}
+
+<!-- Render this items sharing status-->
+{#if itemId && item}
+<p>Sharing Status: {item.access}</p>
+{/if}
+
+<!-- Render this items service status-->
+{#if serviceHealth}
+<p>Service Health: {serviceHealth}</p>
+{/if}
+
+<script>
+  import { getItem } from "@esri/arcgis-rest-portal";
+  import { request } from "@esri/arcgis-rest-request";
+  import { retryWithNewSession } from "../utils.js";
+
+  export default {
+    data: function() {
+      return {
+        serviceHealth: "unknown",
+        item: null
+      };
+    },
+    // runs every time the components state changes and only on the client
+    onstate({ changed, current, previous }) {
+      // this fires before oncreate, and on every state change.
+      // the first time it runs, `previous` is undefined
+      if (changed.url && current.url && !current.serviceHealthTimer) {
+        // check  the service URL to see it is up
+        this.checkServiceStatus();
+      }
+
+      // load the item details async
+      if (changed.itemId && current.itemId) {
+        this.loadItemId();
+      }
+    },
+    // removes the setTimeout function when this component is destroyed
+    ondestroy() {
+      const { serviceHealthTimer } = this.get();
+      if (serviceHealthTimer) {
+        clearTimeout(serviceHealthTimer);
+      }
+    },
+    methods: {
+      // load more info about an item with ArcGIS REST JS
+      loadItemId() {
+        const { itemId, url } = this.get();
+        const { session } = this.store.get();
+
+        if (itemId) {
+          getItem(itemId, {
+            authentication: session
+          })
+            .catch(error => {
+              return retryWithNewSession(error, fetch);
+            })
+            .then(item => {
+              this.set({ item, url: url || item.url });
+            });
+        }
+      },
+
+      // Hit the service endpoint for a URL to see if the service is live
+      // Using the generic request method is useful for arbitrary methods
+      // or methods that aren't supported directly by ArcGIS Rest JS.
+      checkServiceStatus() {
+        const { url } = this.get();
+        const { session } = this.store.get();
+        if (url) {
+          request(url, { method: "get", authentication: session })
+            .then(response => {
+              this.set({ serviceHealth: "good" });
+            })
+            .catch(() => {
+              this.set({ serviceHealth: "bad" });
+            })
+            .finally(() => {
+              // setup a setTimeout so that this runs continuously
+              const serviceHealthTimer = setTimeout(() => {
+                this.checkServiceStatus();
+              }, 3000);
+              this.set({ serviceHealthTimer });
+            });
+        }
+      }
+    }
+  };
+</script>

package/demos/webmap-checker-sapper/src/components/Nav.html

@@ -0,0 +1,21 @@
+<nav class="flex items-center justify-between flex-wrap bg-teal p-6">
+  <div class="flex items-center flex-no-shrink text-white mr-6">
+    <span class="font-semibold text-4xl">Web Map Dependency Checker</span>
+  </div>
+  {#if $session}
+  <p class="text-white">
+    Signed in as {$session.username}
+    <a
+      href="/auth/sign-out"
+      class="inline-block px-6 py-3 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-1"
+      >Sign out</a
+    >
+  </p>
+  {:else}
+  <a
+    href="/auth/authorize"
+    class="inline-block px-6 py-3 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-1"
+    >Sign in</a
+  >
+  {/if}
+</nav>

package/demos/webmap-checker-sapper/src/components/WebMap.html

@@ -0,0 +1,62 @@
+<!-- We need to use a ref here so we can access this div inside out component -->
+<div ref:mapContainer class="webmap-container"></div>
+
+<style>
+  .webmap-container {
+    width: 100%;
+    height: 400px;
+  }
+</style>
+<script>
+  import { loadModules, loadCss } from "esri-loader";
+
+  export default {
+    // oncreate run only the client
+    oncreate() {
+      this.intializeWebMap();
+    },
+    methods: {
+      intializeWebMap() {
+        // get the id of the webmap from the component
+        const { itemId } = this.get();
+
+        // set the session from the global store
+        const { session } = this.store.get();
+
+        // load the CSS dynamically with Esri Loader
+        loadCss("https://js.arcgis.com/4.10/esri/css/main.css");
+
+        // load JS API modules with Esri Loader
+        loadModules([
+          "esri/views/MapView",
+          "esri/WebMap",
+          "esri/identity/IdentityManager"
+        ])
+          .then(([MapView, WebMap, esriId]) => {
+            // since our webmap might be private we can pass teh credentials
+            // from the ArcGIS REST JS session to the JS API Identity Manager
+            // the JS API will then use these credentials for future requests
+            esriId.registerToken(session.toCredential());
+
+            // then we load a web map from an id
+            var webmap = new WebMap({
+              portalItem: {
+                // autocasts as new PortalItem()
+                id: itemId
+              }
+            });
+
+            // and we show that map in a container
+            var view = new MapView({
+              map: webmap,
+              container: this.refs.mapContainer
+            });
+          })
+          .catch(err => {
+            // handle any errors
+            console.error(err);
+          });
+      }
+    }
+  };
+</script>

package/demos/webmap-checker-sapper/src/routes/_error.html

@@ -0,0 +1,41 @@
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+	<pre>{error.stack}</pre>
+{/if}
+
+<style>
+	h1, p {
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<script>
+	export default {
+		helpers: {
+			dev: process.env.NODE_ENV === 'development'
+		}
+	};
+</script>

package/demos/webmap-checker-sapper/src/routes/_layout.html

@@ -0,0 +1,21 @@
+<svelte:head>
+  <link
+    href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css"
+    rel="stylesheet"
+  />
+</svelte:head>
+
+<Nav/>
+
+<main class="p-6">
+  <svelte:component this="{child.component}" {...child.props} />
+</main>
+
+<script>
+	import Nav from '../components/Nav.html';
+	export default {
+		components: {
+			Nav
+		}
+	};
+</script>

package/demos/webmap-checker-sapper/src/routes/auth/authorize.js

@@ -0,0 +1,18 @@
+import { UserSession } from "@esri/arcgis-rest-auth";
+
+// setup config variables
+require("dotenv").config();
+const { CLIENT_ID, REDIRECT_URI } = process.env;
+
+// when a user access /auth/authorize we will allow
+// UserSession.authorize to handle the response and
+// redirect a user to the oAuth sign in page.
+export function get(request, response, next) {
+  UserSession.authorize(
+    {
+      clientId: CLIENT_ID,
+      redirectUri: REDIRECT_URI
+    },
+    response
+  );
+}

package/demos/webmap-checker-sapper/src/routes/auth/exchange-token.js

@@ -0,0 +1,20 @@
+// if a token expires on the client side we don't have to ask then to log in
+// again. Instead we can maek a request to /auth/exchange-token. Since this
+// request will be same-domain this request will get the session cookie and
+// can hydrate request.session.userSession which we can then refresh getting a
+// new token which can be used on the client.
+export function get(request, response, next) {
+  request.session.userSession
+    .refreshSession()
+    .then(newSession => {
+      request.session.userSession = newSession;
+      const serializedSession = newSession.toJSON();
+      delete serializedSession.refreshToken;
+      delete serializedSession.refreshTokenExpires;
+      response.json(serializedSession);
+    })
+    .catch(error => {
+      console.error(error);
+      response.json(error);
+    });
+}

package/demos/webmap-checker-sapper/src/routes/auth/post-sign-in.js

@@ -0,0 +1,24 @@
+import { UserSession } from "@esri/arcgis-rest-auth";
+
+// setup config variables
+require("dotenv").config();
+const { CLIENT_ID, REDIRECT_URI } = process.env;
+debugger;
+// a user will be redirected to /auth/post-sign-in after completing the sign in
+// form in ArcGIS Online. We will allow UserSession.exchangeAuthorizationCode to
+// trade the oAuth authorization code for a token and create a user session.
+// We can then add that user session to the request.
+export async function get(request, response, next) {
+  // exchange the auth token for a full `UserSession`
+  request.session.userSession = await UserSession.exchangeAuthorizationCode(
+    {
+      clientId: CLIENT_ID,
+      redirectUri: REDIRECT_URI
+    },
+    request.query.code
+  );
+
+  // once we have the session set redirect the user to the /webmaps
+  // route so they can use the app.
+  response.redirect("/webmaps");
+}

package/demos/webmap-checker-sapper/src/routes/auth/sign-out.js

@@ -0,0 +1,10 @@
+// to sign a user out we have to destroy their session which will
+// remove the encrypted file from disk and clear the session cookie
+export function get(request, response, next) {
+  request.session.destroy(function(err) {
+    response.cookie("webmap-checker-session", { maxAge: 2592000000 });
+
+    // redirect user user to the homepag when we are done.
+    response.redirect("/");
+  });
+}

package/demos/webmap-checker-sapper/src/routes/index.html

@@ -0,0 +1,20 @@
+<svelte:head>
+  <title>Web Map Dependency Checker</title>
+</svelte:head>
+<!-- The $ prefix tells sapper to load this from the global store-->
+{#if $session}
+<p>
+  Signed in as {$session.username}
+  <a
+    href="webmaps"
+    class="inline-block px-6 py-3 leading-none border rounded text-teal border-teal hover:border-dark-teal hover:text-dark-teal hover:bg-white mt-1"
+    >View web maps</a
+  >
+</p>
+{:else}
+<a
+  href="/auth/authorize"
+  class="inline-block px-6 py-3 leading-none border rounded text-teal border-teal hover:border-dark-teal hover:text-dark-teal hover:bg-white mt-1"
+  >Sign in to get started</a
+>
+{/if}

package/demos/webmap-checker-sapper/src/routes/webmaps/[webmapId].html

@@ -0,0 +1,83 @@
+<a href="./webmaps" class="text-blue">Back to list</a>
+
+<h2>{item.title}</h2>
+<p class="mb-4">Sharing Status: {item.access}</p>
+
+<!-- show a preview of the webmap -->
+{#if item}
+  <WebMap itemId="{item.id}" />
+{/if}
+
+<ul class="list-reset">
+  {#each layers as layer}
+  <li class="py-2">
+    <!-- show a list of layers and their statuses -->
+    <LayerStatus title="{layer.title}" itemId="{layer.itemId}" url="{layer.url}" serviceStatus="unknown" />
+  </li>
+  {/each}
+</ul>
+
+<pre class="max-w p-6 border border-grey-light rounded overflow-scroll shadow-lg">{webmapText}</pre>
+
+<script>
+  import { UserSession } from "@esri/arcgis-rest-auth";
+  import { getItem, getItemData } from "@esri/arcgis-rest-portal";
+  import { retryWithNewSession } from "../../utils.js";
+  import LayerStatus from "../../components/LayerStatus.html";
+  import WebMap from "../../components/WebMap.html";
+
+  export default {
+    components: {
+      LayerStatus,
+      WebMap
+    },
+    // preload runs on the server to generate the inital state of the page and
+    // when a user navigates on the client to create the new view of the page.
+    // We can use arcgis-rest-js here to preload data.
+    preload({ params }) {
+      const { session } = this.store.get();
+
+      // redirect to the homepage unless the user is signed in
+      if (!session) {
+        this.redirect(302, "/");
+        return;
+      }
+
+      const { webmapId } = params;
+
+      // if we are on the server we won't have an actuall UserSession just a
+      // JSON representation of one. So we need to hydrate a UserSession.
+      const userSession = process.browser ? session : new UserSession(session);
+
+      // next we can request both the webmap item and the webmap data (the JSON)
+      // and process the data to get a list of layers.
+      return Promise.all([
+        getItem(webmapId, {
+          authentication: userSession
+        }).catch(error => {
+          return retryWithNewSession(error, this.fetch);
+        }),
+        getItemData(webmapId, {
+          authentication: userSession
+        }).catch(error => {
+          return retryWithNewSession(error, this.fetch);
+        })
+      ]).then(([item, webmap]) => {
+        const layers = webmap.operationalLayers
+          .concat(webmap.baseMap.baseMapLayers)
+          .map(layer => {
+            return {
+              title: layer.title || layer.id,
+              url: layer.url,
+              itemId: layer.itemId
+            };
+          });
+        return {
+          item,
+          webmapText: JSON.stringify(webmap, null, 2),
+          layers: layers
+        };
+      });
+    }
+  };
+</script>

package/demos/webmap-checker-sapper/src/routes/webmaps/index.html

@@ -0,0 +1,59 @@
+<h1>Webmaps</h1>
+
+<ul class="list-reset">
+  {#each webmaps as webmap}
+  <li class="py-2">
+    <a href="webmaps/{webmap.id}" class="text-blue">{webmap.title}</a>
+  </li>
+  {/each}
+</ul>
+
+<script>
+  import { UserSession } from "@esri/arcgis-rest-auth";
+  import { searchItems } from "@esri/arcgis-rest-portal";
+  import { retryWithNewSession } from "../../utils.js";
+
+  export default {
+    // preload runs on the server to generate the inital state of the page and
+    // when a user navigates on the client to create the new view of the page.
+    // We can use arcgis-rest-js here to preload data.
+    preload() {
+      const { session } = this.store.get();
+
+      // redirect to the homepage unless the user is signed in
+      if (!session) {
+        this.redirect(302, "/");
+        return;
+      }
+
+      // if we are on the server we won't have an actuall UserSession just a
+      // JSON representation of one. So we need to hydrate a UserSession.
+      const userSession = process.browser ? session : new UserSession(session);
+
+      // now we can search for webmaps. Sapper will wait until this promise
+      // resolves before rendering the page.
+      return (
+        searchItems({
+          q: `owner:${session.username} type:"Web Map"`,
+          num: 100,
+          authentication: userSession
+        })
+          // if there is an error we can retry the request with a fresh session
+          // from /auth/exchange-token
+          .catch(error => {
+            return retryWithNewSession(error, this.fetch);
+          })
+          // then we can process out response.
+          .then(response => {
+            return {
+              webmaps: response.results
+            };
+          })
+
+          .catch(error => {
+            console.error(error);
+          })
+      );
+    }
+  };
+</script>