sass implementation

Author: WernerWaage

README.md

@@ -1,8 +1,12 @@
 # Werners typescript template
 
+Stack:
+
 -   Bootstrapped with Create Snowpack App (CSA).
 -   Jest for testing
--   mobx
+-   Prettier for code formatting
+-   MobX (instead of Redux)
+-   Lit (instead of react)
 
 ## Available Scripts
 

dist/css/style.css

@@ -0,0 +1,9 @@
+html,
+body,
+ul,
+ol {
+  margin: 0;
+  padding: 0; }
+
+li {
+  list-style: upper-alpha; }

dist/script.js

@@ -8,12 +8,14 @@
     "test 🐞": "jest",
     "format code 🧾": "prettier --write \"src/**/*.{ts,js}\"",
     "=====": "node -v",
-    "lint ": "prettier --check \"src/**/*.{ts,js}\""
+    "lint ": "prettier --check \"src/**/*.{ts,js}\"",
+    "build:css": "node-sass -r src -o build/dist/css"
   },
   "dependencies": {
     "@adobe/lit-mobx": "^2.0.0",
     "lit": "^2.2.7",
     "mobx": "^6.6.1",
+    "node-sass": "^7.0.1",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

package-lock.json

@@ -1,14 +1,51 @@
-#img {
-  display: block;
-  margin: auto;
-  height: 128px;
-  width: 128px;
-  padding: 2rem;
+h1,h2,h3,h4 {
+  font-family: 'Courier New', Courier, monospace;
+}
+h1 {
+  font-size: 2.2em;
+}
+
+h2 {
+  font-size: 2.0em;
+}
+
+h3 {
+  font-size: 1.8em;
 }
 
-#canvas {
-  display: block;
-  margin: 2rem auto;
-  width: 540px;
-  height: 540px;
+h4 {
+  font-size: 1.6em;
 }
+
+h5 {
+  font-size: 1.4em;
+}
+p {
+  font-size: 1.2em;
+}
+
+body {
+  font-family: 'verdana', sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  color: #333;
+  background-color: #fff;
+}
+
+
+.container {
+  max-width: 960px;
+  margin: 0 auto;
+  background-color: aliceblue;
+}
+.clear {
+  clear: both;
+}
+
+.right {
+  float: right;
+}
+
+.left {
+  float: left;
+}

package.json

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" content="Web site created using create-snowpack-app" />
   <link rel="stylesheet" type="text/css" href="/index.css" />
+  <link rel="stylesheet" type="text/css" href="/dist/css/style.css" />
   <script type="module" src="/dist/index.js"></script>
 
   <title>Werners typescript template</title>
@@ -16,9 +17,9 @@
   <noscript>You need to enable JavaScript to run this app.</noscript>
 
   <div class="container">
-    <ul id="list">
+    <h4>Todo list</h4>
+    <ul id="list"></ul>
 
-    </ul>
     <form id="new-task-form">
       <input type="text" id="new-task-title" placeholder="Add a task...">
       <button type="submit">Add</button>

public/index.css

@@ -0,0 +1,9 @@
+export { }
+
+console.log("loaded: components/list/index.ts");
+
+
+async function connectedCallback() {
+    //super.connectedCallback();
+    console.log("connectedCallback");
+}

public/index.html

@@ -86,3 +86,37 @@ function getLoadTimes():number {
 
 
 
+// create a mobx observable
+class Counter {
+    // @observable
+    public count = 0;
+
+    // @action
+    public increment() {
+        this.count++;
+    }
+}
+
+// create instance that can be shared across components
+const counter = new Counter();
+
+
+// create a new custom element, and use the base MobxLitElement class
+// alternatively you can use the MobxReactionUpdate mixin, e.g. `class MyElement extends MobxReactionUpdate(LitElement)`
+// @customElement('my-element')
+export class MyElement extends MobxLitElement {
+    private counter = counter;
+
+    // any observables accessed in the render method will now trigger an update
+    public render(): TemplateResult {
+        return html`
+            Count is ${this.counter.count}
+            <br />
+            <button @click=${this.incrementCount}>Add</button>
+        `;
+    }
+
+    private incrementCount() {
+        this.counter.increment();
+    }
+}

src/components/list/index.ts

@@ -0,0 +1,11 @@
+html,
+body,
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+}
+
+li{
+  list-style: upper-alpha;
+}