Initial commit

.circleci/config.yml

@@ -0,0 +1,44 @@
+version: 2
+jobs:
+  build_and_test:
+    working_directory: ~/todomvc
+
+    docker:
+      - image: circleci/node:8.12-stretch-browsers
+
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+          - yarn-v1-{{ checksum "yarn.lock" }}
+
+      - run: yarn install --frozen-lockfile
+
+      - save_cache:
+          paths:
+            - ~/.cache/yarn
+            - node_modules
+          key: yarn-v1-{{ checksum "yarn.lock" }}
+
+      - run:
+          name: Run Linting
+          command: yarn lint
+
+      - run:
+            name: Run Build
+            command: yarn build
+
+      - run:
+          name: Run Unit Tests
+          command: yarn test:unit --ci --maxWorkers=2
+
+      - run:
+          name: Run Integration Tests
+          command: yarn test:integration
+
+workflows:
+  version: 2
+  build_and_test:
+    jobs:
+      - build_and_test

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[{*.json,.*.yml}]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "parser": "babel-eslint",
+  "extends": "@salesforce/eslint-config-lwc/recommended",
+  "globals": {
+    "LWC_USE_NATIVE_SHADOW": true,
+    "LWC_CUSTOM_ELEMENT_REGISTRY": true
+  }
+}

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+test/screenshots/
+errorShots/
+
+*.log
+.DS_Store
+.vscode
+public/js/*.js

README.md

@@ -0,0 +1,128 @@
+# LWC TodoMVC
+
+This [TodoMVC app](http://todomvc.com/) works as a proof of concept and boilerplate for standalone applications based on Lightning Web Components (LWC).
+
+## Requirements
+
+ * Node 8.12.x
+ * NPM 6.4.x
+ * Yarn >= 1.10.x
+
+## Supported Browsers
+
+The Lightning Web Components model supports the browsers that Salesforce supports.
+
+These browsers take full advantage of Lightning Web Components performance enhancements.
+
+| Browser Name | Version |
+ --- | --- |
+| Google Chrome™ | 59 |
+| Microsoft® Edge | 15 |
+| Mozilla® Firefox® | 54 |
+| Apple® Safari® | 11 |
+
+For earlier versions of these browsers, and for other browsers, the framework uses compatibility mode. Compatibility mode uses the lowest common denominator—the framework transpiles down to ES5 and adds the required polyfills. Not all modern Web APIs are available by default.
+
+Running in compatibility mode affects performance. For example, Lightning Web Components work correctly in Safari 9 and Microsoft® Internet Explorer® 11, but they miss framework optimizations, don’t perform as well, and not all modern Web APIs are available.
+
+Please note that this sample repo may include some cutting-edge examples that won't work in IE 11 because they use APIs that aren't supported by IE 11.
+
+## Installation
+
+### 1) Download the repository
+
+In order to clone the repo, you need to make sure that you can [connect to Github with SSH](https://help.github.com/enterprise/2.8/user/articles/connecting-to-github-with-ssh/).
+
+```bash
+git clone git@github.com/salesforce/lwc-todomvc.git
+cd lwc-todomvc
+```
+
+### 2) Install dependencies
+
+```bash
+yarn install
+```
+
+### 3) Build the project
+
+```bash
+yarn build
+```
+
+By default the command will generate the application in **development** and **non-compat** mode. You can change the default behavior with the `NODE_ENV` and `COMPAT` environment variable.
+
+```bash
+COMPAT=true NODE_ENV=production yarn build
+```
+
+> **Note:** The server will then take care of sending the right file based on the user agent.
+
+### 4) Build & run in dev mode
+
+For your development convenience, you can build the file bundles into /dist and launch a Node server + browser by running:
+
+```bash
+yarn start
+```
+
+### 5) Running in different modes
+You can run the application in different Shadow DOM modes, you can read `main.js` for mode details.
+To toggle the different configurations use the following queryString parameters:
+
+```bash
+http://localhost:3000/?useNativeShadow=true&useCustomElementRegistry=true
+```
+
+### 6) Run test
+
+```bash
+yarn test:unit          # Run jest unit tests
+yarn test:integration   # Run webdriver integraiton test
+```
+
+Running the webdriver test requires a [selenium](http://www.seleniumhq.org/) server running locally over the port `4444`.
+
+If you don't want to run the webdriver test locally, you will need to run it on [Sauce Labs](https://saucelabs.com). You will need to set the following environment variable to run test over Sauce Labs: `SAUCE_USERNAME` and `SAUCE_ACCESS_KEY`.
+
+```bash
+SAUCE_USERNAME=[my-username] SAUCE_ACCESS_KEY=[my-access-token] yarn run test:integration
+```
+
+## Configurations
+
+Configuring your editor to use our lint and code style rules will help make the
+code review process delightful!
+
+### types
+
+LWC relies on type annotations heavily.
+
+* Make sure your editor supports [typescript](https://www.typescriptlang.org/).
+* Additionally, you can use [flow](https://flowtype.org/).
+
+### eslint
+
+[Configure your editor][eslint-integrations] to use our eslint configurations.
+
+### editorconfig
+
+[Configure your editor][editorconfig-plugins] to use our editor configurations.
+
+If you are using Visual Studio Code then use this:
+
+```
+ext install EditorConfig
+```
+
+### Lint
+
+```bash
+yarn lint
+```
+
+The recommended way to lint this project is to [configure your
+editor][eslint-integrations] to warn you in real-time as you edit the file.
+
+[eslint-integrations]: http://eslint.org/docs/user-guide/integrations
+[editorconfig-plugins]: http://editorconfig.org/#download

index.js

@@ -0,0 +1 @@
+require('./server').start();

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    preset: '@lwc/jest-preset',
+    moduleNameMapper: {
+        '^(todo)/(.+)$': '<rootDir>/src/$1/$2/$2'
+    },
+    testPathIgnorePatterns: [
+        '<rootDir>/node_modules/',
+        '<rootDir>/test/specs/'
+    ]
+};

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "lwc-todo-mvc",
+  "private": true,
+  "version": "1.0.0",
+  "description": "TodoMVC - LWC version",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint src/",
+    "start": "concurrently --kill-others \"yarn build --watch\" \"yarn serve\"",
+    "build": "rollup -c ./scripts/rollup.config.js",
+    "serve": "node index.js",
+    "test": "yarn test:unit && yarn test:integration",
+    "test:unit": "jest",
+    "test:integration": "wdio ./scripts/wdio.conf.js"
+  },
+  "keywords": [
+    "lwc",
+    "todo-mvc"
+  ],
+  "author": "LWC Team",
+  "homepage": "/~https://github.com/salesforce/lwc-todomvc",
+  "repository": {
+    "type": "git",
+    "url": "/~https://github.com/salesforce/lwc-todomvc"
+  },
+  "devDependencies": {
+    "@lwc/compiler": "0.34.0",
+    "@lwc/engine": "0.34.0",
+    "@lwc/jest-preset": "0.34.0",
+    "@lwc/rollup-plugin": "0.34.0",
+    "@salesforce/eslint-config-lwc": "~0.3.0",
+    "babel-eslint": "^10.0.1",
+    "concurrently": "~4.0.1",
+    "eslint": "^5.10.0",
+    "jest": "~23.6.0",
+    "rollup": "~0.66.6",
+    "rollup-plugin-compat": "0.21.1",
+    "rollup-plugin-replace": "~2.1.0",
+    "rollup-plugin-terser": "^3.0.0",
+    "wdio-mocha-framework": "~0.6.3",
+    "wdio-selenium-standalone-service": "0.0.10",
+    "wdio-spec-reporter": "~0.1.5",
+    "webdriverio": "~4.13.2"
+  },
+  "dependencies": {
+    "express": "~4.16.3",
+    "useragent": "~2.3.0"
+  },
+  "engines": {
+    "node": ">=8.12.0",
+    "npm": ">=6.4.1",
+    "yarn": ">=1.9.4"
+  }
+}

public/template.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en" data-framework="lwc">
+<head>
+  <meta charset="UTF-8">
+  <title>LWC TodoMVC</title>
+  <style>
+    html,
+    body {
+        margin: 0;
+        padding: 0;
+    }
+
+    body {
+        font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        line-height: 1.4em;
+        background: #f5f5f5;
+        color: #4d4d4d;
+        min-width: 230px;
+        max-width: 550px;
+        margin: 0 auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-weight: 300;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="main"></div>
+  <script>
+      LWC_CUSTOM_ELEMENT_REGISTRY = "{{useCustomElementRegistry}}";
+      LWC_USE_NATIVE_SHADOW = "{{useNativeShadow}}";
+  </script>
+  <script src="/static/js/{{js_bundle}}.js"></script>
+</body>
+</html>

scripts/rollup.config.js

@@ -0,0 +1,39 @@
+/* eslint-env node */
+
+'use strict';
+
+const path = require('path');
+
+const replace = require('rollup-plugin-replace');
+const lwcCompiler = require('@lwc/rollup-plugin');
+const compat = require('rollup-plugin-compat');
+const { terser } = require('rollup-plugin-terser');
+
+const env = process.env.NODE_ENV || 'development';
+
+const input = path.resolve(__dirname, '../src/main.js');
+const outputDir = path.resolve(__dirname, '../public/js');
+
+function rollupConfig({ target }) {
+    const isCompat = target === 'es5';
+    const isProduction = env === 'production';
+
+    return {
+        input,
+        output: {
+            file: path.join(outputDir, isCompat ? 'compat.js' : 'main.js'),
+            format: 'iife',
+        },
+        plugins: [
+            lwcCompiler(),
+            replace({ 'process.env.NODE_ENV': JSON.stringify(env) }),
+            isCompat && compat(),
+            isProduction && terser()
+        ].filter(Boolean)
+    }
+}
+
+module.exports = [
+    // rollupConfig({ target: 'es5' }), // this is for IE11 and friends
+    rollupConfig({ target: 'es2017' })
+];

scripts/wdio.conf.js

@@ -0,0 +1,38 @@
+/* eslint-env node */
+
+const Server = require('../server');
+const isCI = !!process.env.ENV_CI;
+let HTTPServer;
+
+exports.config = {
+    specs: ['./test-integration/specs/**/*.spec.js'],
+    maxInstances: 10,
+    capabilities: [{
+        maxInstances: 5,
+        browserName: 'chrome',
+        chromeOptions: { args: ['headless', 'disable-gpu']},
+    }],
+    sync: true,
+    logLevel: 'silent',
+    coloredLogs: true,
+    bail: 0,
+    screenshotPath: './errorShots/',
+    baseUrl: 'http://localhost',
+    waitforTimeout: 10000,
+    connectionRetryTimeout: 90000,
+    connectionRetryCount: 3,
+    services: isCI ? [] : ['selenium-standalone'],
+    framework: 'mocha',
+    reporters: ['spec'],
+    mochaOpts: {
+        ui: 'bdd'
+    },
+    onPrepare () {
+        return Server.start().then(server => {
+            HTTPServer = server;
+        });
+    },
+    onComplete() {
+        HTTPServer.close();
+    }
+};