Auto format using Prettier

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 92,
+  "quoteProps": "preserve",
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

README.md

@@ -5,11 +5,13 @@ A TypeScript version of this code is explained in "Your first project", a guide
 ### Getting Started
 
 To use this JavaScript-only version in development mode:
+
 - Clone the repository
 - Run `npm install` (to install Webpack and Typescene itself)
 - Run `npm start`
 
 To create and serve a production version in the `dist/` folder:
+
 - Run `npm build`
 - Run `npx http-server dist` and open the URL provided
 

package.json

@@ -1,32 +1,32 @@
 {
-    "name": "first-project-js",
-    "private": true,
-    "version": "1.0.0",
-    "description": "",
-    "main": "index.js",
-    "keywords": [
-        "Typescene",
-        "example"
-    ],
-    "author": "Jelmer Cormont",
-    "license": "MIT",
-    "scripts": {
-        "start": "webpack-dev-server --hot --config src/webpack.config.js --no-info --open",
-        "build": "webpack -p --config src/webpack.config.js"
-    },
-    "dependencies": {
-        "@typescene/webapp": "^2.0.0"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.5.5",
-        "@babel/plugin-transform-react-jsx": "^7.3.0",
-        "@babel/plugin-transform-runtime": "^7.5.5",
-        "@babel/preset-env": "^7.5.5",
-        "@babel/runtime": "^7.5.5",
-        "babel-loader": "^8.0.6",
-        "webpack": "^4.31.0",
-        "webpack-cli": "^3.3.2",
-        "webpack-dev-server": "^3.3.1",
-        "copy-webpack-plugin": "^5.0.3"
-    }
+  "name": "first-project-js",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "keywords": [
+    "Typescene",
+    "example"
+  ],
+  "author": "Jelmer Cormont",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --hot --config src/webpack.config.js --no-info --open",
+    "build": "webpack -p --config src/webpack.config.js"
+  },
+  "dependencies": {
+    "@typescene/webapp": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/runtime": "^7.5.5",
+    "babel-loader": "^8.0.6",
+    "webpack": "^4.31.0",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.3.1",
+    "copy-webpack-plugin": "^5.0.3"
+  }
 }

src/activities/main/activity.js

@@ -9,7 +9,7 @@ export default class MainActivity extends PageViewActivity.with(view) {
 
     managedChild(this, "formInput");
     this.formInput = ManagedRecord.create({
-      newTask: ""
+      newTask: "",
     });
   }
 

src/activities/main/view.jsx

@@ -1,6 +1,5 @@
 import { HMR } from "@typescene/webapp";
 import JSX, { bind, bindf, UIStyle } from "typescene/JSX";
-JSX // ignore unused warning
 
 export default HMR.enableViewReload(
   module,
@@ -32,45 +31,32 @@ export default HMR.enableViewReload(
             onEnterKeyPress="addTask()"
             requestFocus
           />
-          <borderlessbutton
-            label="Add"
-            onClick="addTask()"
-          />
+          <borderlessbutton label="Add" onClick="addTask()" />
         </row>
       </form>
       <spacer dimensions={{ height: 16 }} />
 
       {/* --- Items list: */}
       <list items={bind("todoService.items")}>
         {/* --- List item template: */}
-        <listcell padding={{ x: 16, y: 8 }}
-          onToggleTask="toggleTask()"
-        >
+        <listcell padding={{ x: 16, y: 8 }} onToggleTask="toggleTask()">
           <row revealTransition="down-fast">
-            <toggle
-              state={bind("object.complete")}
-              onChange="+ToggleTask"
-            />
+            <toggle state={bind("object.complete")} onChange="+ToggleTask" />
             <style
               state={bind("object.complete")}
               styles={{
                 true: UIStyle.create({
-                  textStyle: { strikeThrough: true }
-                })
+                  textStyle: { strikeThrough: true },
+                }),
               }}
             >
-              <expandedlabel onClick="+ToggleTask">
-                {bind("object.text")}
-              </expandedlabel>
+              <expandedlabel onClick="+ToggleTask">{bind("object.text")}</expandedlabel>
             </style>
           </row>
         </listcell>
 
         {/* --- List container: */}
-        <flowcell
-          separator={{ type: "line" }}
-          animatedContentRenderingDuration={200}
-        />
+        <flowcell separator={{ type: "line" }} animatedContentRenderingDuration={200} />
       </list>
 
       {/* --- Footer, if non-empty: */}
@@ -81,14 +67,11 @@ export default HMR.enableViewReload(
           <label textStyle={{ color: "@text/50%" }}>
             {bindf("${todoService.nRemaining} task#{/s} remaining")}
           </label>
-          <linkbutton
-            hidden={bind("!todoService.nCompleted")}
-            onClick="removeCompleted()"
-          >
+          <linkbutton hidden={bind("!todoService.nCompleted")} onClick="removeCompleted()">
             Remove completed
           </linkbutton>
         </centerrow>
       </flowcell>
     </flowcell>
   </scrollcontainer>
-)
+);

src/public/index.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Application</title>
-</head>
-<body>
+  </head>
+  <body>
     <script src="app.bundle.js"></script>
-</body>
+  </body>
 </html>

src/services/TodoService.js

@@ -1,4 +1,11 @@
-import { CHANGE, managedChild, ManagedList, ManagedRecord, ManagedService, observe } from "typescene";
+import {
+  CHANGE,
+  managedChild,
+  ManagedList,
+  ManagedRecord,
+  ManagedService,
+  observe,
+} from "typescene";
 
 /** Represents a single to-do item */
 export class TodoItem extends ManagedRecord {
@@ -16,9 +23,7 @@ export default class TodoService extends ManagedService {
     this.nCompleted = 0;
     this.nRemaining = 0;
     managedChild(this, "items");
-    this.items = new ManagedList()
-      .restrict(TodoItem)
-      .propagateEvents();
+    this.items = new ManagedList().restrict(TodoItem).propagateEvents();
   }
 
   addItem(text) {
@@ -32,15 +37,18 @@ export default class TodoService extends ManagedService {
   }
 }
 
-observe(TodoService, class {
-  constructor(svc) { this.svc = svc }
-  onItemsChangeAsync() {
-    let nCompleted = this.svc.items
-      .pluck("complete")
-      .filter(b => b).length;
-    let total = this.svc.items.count;
-    this.svc.nCompleted = nCompleted;
-    this.svc.nRemaining = total - nCompleted;
-    this.svc.emit(CHANGE);
+observe(
+  TodoService,
+  class {
+    constructor(svc) {
+      this.svc = svc;
+    }
+    onItemsChangeAsync() {
+      let nCompleted = this.svc.items.pluck("complete").filter(b => b).length;
+      let total = this.svc.items.count;
+      this.svc.nCompleted = nCompleted;
+      this.svc.nRemaining = total - nCompleted;
+      this.svc.emit(CHANGE);
+    }
   }
-})
+);

src/webpack.config.js

@@ -1,39 +1,40 @@
 const path = require("path");
-const CopyPlugin = require('copy-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
 
 module.exports = {
-    entry: {
-        app: path.resolve(__dirname, "app.js")
-    },
-    output: {
-        filename: "[name].bundle.js",
-        chunkFilename: "[name].[chunkhash].bundle.js",
-        path: path.resolve(__dirname, "../dist")
-    },
-    resolve: {
-        extensions: [".js", ".jsx"],
-    },
-    module: {
-        rules: [
-            {
-                test: /.m?jsx?$/,
-                exclude: /node_modules/,
-                use: {
-                    loader: 'babel-loader',
-                    options: {
-                        presets: ['@babel/preset-env'],
-                        plugins: [
-                            '@babel/plugin-transform-runtime',
-                            ['@babel/plugin-transform-react-jsx', {
-                                pragma: "JSX"
-                            }]
-                        ]
-                    }
-                }
-            }
-        ]
-    },
-    plugins: [
-        new CopyPlugin([path.resolve(__dirname, "public")])
-    ]
+  entry: {
+    app: path.resolve(__dirname, "app.js"),
+  },
+  output: {
+    filename: "[name].bundle.js",
+    chunkFilename: "[name].[chunkhash].bundle.js",
+    path: path.resolve(__dirname, "../dist"),
+  },
+  resolve: {
+    extensions: [".js", ".jsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /.m?jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-env"],
+            plugins: [
+              "@babel/plugin-transform-runtime",
+              [
+                "@babel/plugin-transform-react-jsx",
+                {
+                  pragma: "JSX",
+                },
+              ],
+            ],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [new CopyPlugin([path.resolve(__dirname, "public")])],
 };