Basic setup.

jpzwarte · jpzwarte · commit cfe5660b30cc · 2023-03-10T10:08:43.000+01:00
diff --git a/index.html b/index.html
@@ -3,10 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://use.typekit.net/kes1hoh.css">
   <title>Demo</title>
 </head>
 <body>
   <demo-app></demo-app>
-  <script type="module" src="./app/app.ts"></script>
+  <script type="module" src="./src/app/app.ts"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "license": "Apache-2.0",
   "private": true,
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sanomalearning/example-design-system-lit-app.git"
@@ -12,8 +13,6 @@
     "url": "https://github.com/sanomalearning/example-design-system-lit-app/issues"
   },
   "homepage": "https://github.com/sanomalearning/example-design-system-lit-app#readme",
-  "main": "index.js",
-  "type": "module",
   "scripts": {
     "start": "wireit"
   },
diff --git a/src/app/app.ts b/src/app/app.ts
@@ -1,8 +1,26 @@
-import { html, LitElement, TemplateResult } from 'lit';
+import type { ScopedElementsMap } from '@open-wc/scoped-elements';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { Button } from '@sanomalearning/slds-core/button';
+import { css, html, LitElement } from 'lit';
+
+export class App extends ScopedElementsMixin(LitElement) {
+  static get scopedElements(): ScopedElementsMap {
+    return {
+      'sl-button': Button
+    };
+  }
+
+  static styles: CSSResultGroup = css`
+    :host { display: block; }
+  `;
 
-export class App extends LitElement {
   render(): TemplateResult {
-    return html`HELLO WORLD!`;
+    return html`
+      <h1>Sanoma Learning Design System Demo App</h1>
+      <h2>Using <a href="https://lit.dev">Lit</a></h2>
+      <sl-button>Button</sl-button>
+    `;
   }
 }
 
diff --git a/web-dev-server.config.js b/web-dev-server.config.js
@@ -1,10 +1,9 @@
 import { esbuildPlugin } from '@web/dev-server-esbuild';
 
 export default {
+  appIndex: './index.html',
   nodeResolve: {
     exportConditions: ['development']    
   },
-  appIndex: './src/index.html',
-  rootDir: 'src',
   plugins: [esbuildPlugin({ ts: true, target: 'auto' })]
 };
