autnam 1.0.0

package/demos/webmap-checker-sapper/README.md

@@ -0,0 +1,124 @@
+# Web map checker
+
+This app demonstrates the use of ArcGIS REST JS with [sapper](https://sapper.svelte.technology/) a cutting edge web framework. [sapper is built on the [svelte](https://svelte.technology) component library and is a universal app framework that supports both client and server side rendering.
+
+You may want to use a universal framework in your app for a few reasons:
+
+1. Better SEO, because the app is rendered on the server search engines like Google can read the content and index your pages without using JavaScript.
+2. Very fast performance. Because the app is rendered on the server browsers will render the initial HTML on the page providing a very fast experience, then JavaScript loads making the app interactive.
+3. Server based sign in experiences can have longer sessions with less logins.
+4. You might want access to a users token on the server side to perform background tasks like monitoring or data processing.
+5. Increased security. In this example a users token is never stored on the client. Instead a a secure cookie is used on the client that pairs with an encrypted session store on the server. The client only gets short lived access tokens and is expected to frequently refresh them.
+
+Since ArcGIS REST JS works on both the client and the server it is ideal for use in universal app frameworks.
+
+Sapper is still in alpha and should not be used for production. However there are other universal app frameworks like [Nuxt](https://nuxtjs.org/) (Vue JS) and Next](https://nextjs.org/) (React)
+
+## App Overview
+
+Sapper works by starting up an [Express JS](https://expressjs.com/) web server and creating a route for each of the files in `src/routes`. Files ending in `.js` are API endpoints and files ending in `.html` are rendered as Svelte components.
+
+The app has 4 API endpoints
+
+- `src/routes/auth/authorize.js` - starts the oAuth 2.0 process to sign in a user.
+- `src/routes/auth/post-sign-in.js` - completes the oAuth 2.0 process.
+- `src/routes/auth/exchange-token.js` - provides a fresh token based on the secure session cookie when the current token expires.
+- `src/routes/auth/sign-out.js` - signs the user out, destroying the saved session on the server and the session cookie on the client.
+
+and 3 Svelte routes:
+
+- `src/routes/index.html` - renders the main page for signed out users which shows a sign in buttons.
+- `src/routes/webmaps/index.html` - renders a list of the users webmaps
+- `src/routes/webmaps/[webmapId].html` - renders a detailed view for a webmap. The brackets indicate that will be replaced by an actual URL like `/webmaps/c7f2cdb8638147b0b5b792bcee800b48`
+
+The `server.js` file defines the server and sets up [`express-session`](https://www.npmjs.com/package/express-session) with [`session-file-store`](https://www.npmjs.com/package/session-file-store) as well as defining the server side Svelte `Store` used to power the server side rendering.
+
+`client.js` consumes the server side Svelte `Store` and uses it to hydrate the client side `Store`.
+
+Once the app boots subsequent navigation by the user is handled client side by Svelte for better performance.
+
+This app is based on https://github.com/sveltejs/sapper-template.
+
+## Running this demo
+
+1. Like all the other demo apps, run `npm run build` in the root directory.
+1. `cd demos/webmap-checker-sapper`
+1. Create a `.env` file at the root of the `webmap-checker-sapper` folder that contains the following:
+   ```text
+   CLIENT_ID=YfFEWoHwtOY4KP1t
+   REDIRECT_URI=http://localhost:3000/auth/post-sign-in
+   ENCRYPTION_KEY=vf00tpMiGRSCO36yrbNm9jWyAStIJWJ5
+   SESSION_SECRET=Sb66uSlcA3RqyIXLOtwK5P1a37FvYqHD
+   PORT=3000
+   ```
+   **Use these values only for development and testing out the demo.**
+1. `npm run dev`
+
+## Configuration
+
+There are five config values stored in `.env`:
+
+- `CLIENT_ID` - The client id from an app registered in ArcGIS Online. Directions for setting this up are part of the [named user login documentation](https://developers.arcgis.com/documentation/core-concepts/security-and-authentication/signing-in-arcgis-online-users/).
+- `REDIRECT_URL` - A valid redirect URL from the app that owns the `CLIENT_ID`. Directions for setting this up are part of the [named user login documentation](https://developers.arcgis.com/documentation/core-concepts/security-and-authentication/signing-in-arcgis-online-users/).
+- `ENCRYPTION_KEY` - Any string, but preferably a secure key from somewhere like https://randomkeygen.com/.
+- `SESSION_SECRET` - Any string, but preferably a secure key from somewhere like https://randomkeygen.com/.
+- `PORT` - The port to run the development server on.
+
+## Authentication Workflow
+
+This sample differs from other workflows in how authentication works but shows the flexibility of the ArcGIS REST JS library to perform server based authentication, store sessions on the server and seamlessly share sessions with the client and ArcGIS API for JavaScript
+
+1. First a user sign in with OAuth 2.0. This starts by sending the user to `/auth/authorize`:
+
+   ```html
+   <a href="/auth/authorize">Sign in to get stared</a>
+   ```
+
+2. Inside the `/auth/authorize` endpoint we call [`UserSession.authorize()`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/#authorize) to start the Oauth 2.0 login process. This redirects the user to the ArcGIS Online authorization page where they will sign in with their ArcGIS Online account.
+3. After the user signs in with their ArcGIS Online account they are redirected back the app at the configured redirect URL which is `/auth/post-sign-in`. We then call [`UserSession.exchangeAuthorizationCode()`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/#exchangeAuthorizationCode) which finishes the authroization workflow and returns a [`UserSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/) that we can use to authenticate subsequent requests. In order to persist the session we assign it to `request.session.userSession` which triggers the [Express session middleware](https://github.com/expressjs/session). `/auth/post-sign-in` finishes by redirecting the user to `/webmaps` which is the main landing page of the app.
+4. When `/auth/post-sign-in` finishes the session middleware saves the values assigned to `request.session` which includes our [`UserSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/). The session middleware uses a defined store (in this case [`session-file-store`](https://www.npmjs.com/package/session-file-store)) to serialize and encrypt the session to a file on disk. Then the session middleware sets a cookie on the client. On subsequent requests the session middleware will use the cookie to lookup the encrypted session and rehydrate our [`UserSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/).
+5. Since we also need access ot our [`UserSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/) on the client we can use [`UserSession.toJSON()`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/#toJSON) method to convert it to a JSON object that can be serialized and sent to the client. Since our server-side session includes a refresh token we also need to delete the refresh token from the session before sending it to the client. The serialized session is sent to the client via sappers `Store` class.
+6. On the client the serialized session is recreated and can now be used for requests on the client.
+7. Since sessions on the client are short lived (they expire after a few hours) we need a mechanism to refresh the client side session with a new token if the old token expires. This needs to work seamlessly even in the middle of a series of requests. ArcGIS REST JS provides an easy mechanism to do this. Consider the following request:
+
+   ```js
+   getItem(webmapId, {
+     authentication: userSession // userSession is expired
+   }).catch((error) => {
+     // handle the error
+   });
+   ```
+
+   `error` will be an instance of either [`ArcGISRequestError`](https://esri.github.io/arcgis-rest-js/api/request/ArcGISRequestError/) or [`ArcGISAuthError`](https://esri.github.io/arcgis-rest-js/api/request/ArcGISAuthError/). `ArcGISAuthError` includes a special `retry()` method that can accept a new session and retry the request. You can them implement your logic to refresh a session and retry the request as in this example:
+
+   ```js
+   getItem(webmapId, {
+     authentication: userSession // userSession is expired
+   })
+     .catch((error) => {
+       if (error.name === "ArcGISAuthError") {
+         return methodThatRefreshesSession(error).then((newSession) => {
+           return error.retry(newSession);
+         });
+       }
+
+       throw error; // otherwise rethrow the error so we can handle it in a later catch
+     })
+     .then((response) => {
+       // handle a successful response.
+     })
+     .catch((error) => {
+       // handle an actual request failure or error.
+     });
+   ```
+
+8. The retry workflow is handled entirely by a simple utility function called `retryWithNewSession()`. In order to get a new token a request is made to `/auth/exchange-token`. This request includes the session cookie so the server can find the instance of [`UserSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/) and call [`UserSession.refreshSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/#refreshSession) to refresh the session, strip out the refresh token and return the new session to the client which then retries the request with the new authentication.
+9. In order to load the webmaps we also need to pass our [`UserSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/) to the ArcGIS API for JavaScript [`IdentityManager`](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html) to allow it load resources that require authentication. You can use [`UserSession.toCredential()`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/#toCredential-summary) to convert the session into a [`Credential`](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-Credential.html) to pass to [`IdentityManager`](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html) as shown below:
+
+   ```js
+   require(["esri/identity/IdentityManager"], function (esriId) {
+     esriId.registerToken(session.toCredential());
+   });
+   ```
+
+   New credentials should also be registered with [`IdentityManager`](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html) when they are retrieved from the server as older sessions expire.

package/demos/webmap-checker-sapper/appveyor.yml

@@ -0,0 +1,18 @@
+version: "{build}"
+
+shallow_clone: true
+
+init:
+  - git config --global core.autocrlf false
+
+build: off
+
+environment:
+  matrix:
+    # node.js
+    - nodejs_version: stable
+
+install:
+  - ps: Install-Product node $env:nodejs_version
+  - npm install cypress
+  - npm install

package/demos/webmap-checker-sapper/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/demos/webmap-checker-sapper/cypress/integration/spec.js

@@ -0,0 +1,19 @@
+describe('Sapper template app', () => {
+	beforeEach(() => {
+		cy.visit('/')
+	});
+
+	it('has the correct <h1>', () => {
+		cy.contains('h1', 'Great success!')
+	});
+
+	it('navigates to /about', () => {
+		cy.get('nav a').contains('about').click();
+		cy.url().should('include', '/about');
+	});
+
+	it('navigates to /blog', () => {
+		cy.get('nav a').contains('blog').click();
+		cy.url().should('include', '/blog');
+	});
+});

package/demos/webmap-checker-sapper/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

package/demos/webmap-checker-sapper/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

package/demos/webmap-checker-sapper/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

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

@@ -0,0 +1,4 @@
+{
+	"baseUrl": "http://localhost:3000",
+	"video": false
+}

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

@@ -0,0 +1,47 @@
+{
+  "private": true,
+  "name": "sapper-webmap-checker",
+  "version": "3.3.0",
+  "description": "this thing is cray cray",
+  "scripts": {
+    "build:legacy": "sapper build --legacy",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
+    "dev": "sapper dev",
+    "export": "sapper export --legacy",
+    "start": "node __sapper__/build",
+    "test": "run-p --race dev cy:run"
+  },
+  "dependencies": {
+    "@esri/arcgis-rest-portal": "^3.3.0",
+    "@esri/arcgis-rest-request": "^3.3.0",
+    "compression": "^1.7.1",
+    "cookies": "^0.7.3",
+    "dotenv": "^6.2.0",
+    "esri-loader": "^2.6.0",
+    "express": "^4.16.4",
+    "express-session": "^1.15.6",
+    "fs-extra": "^7.0.1",
+    "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-request";
+
+// 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>