Merge pull request #8 from uglow/feature/upgrade-to-svelte-3

Feature/upgrade to svelte 3

.eslintrc.js

@@ -0,0 +1,48 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 2019,
+    sourceType: 'module',
+  },
+  plugins: ['svelte3'],
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: [
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:node/recommended-module',
+    //'plugin:prettier/recommended', // This can't be used with the svelte plugin, but can be used directly :(   See https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/OTHER_PLUGINS.md
+    'plugin:unicorn/recommended',
+  ],
+  overrides: [
+    {
+      files: ['**/*.svelte'],
+      processor: 'svelte3/svelte3',
+    },
+  ],
+
+  rules: {
+    'prettier/prettier': 'error',
+
+    // Allow some flexibility here
+    'unicorn/prevent-abbreviations': 'off',
+
+    // Use camelCase for files (and directories - not enforced)
+    'unicorn/filename-case': ['error', { case: 'camelCase' }],
+
+    // Turn off explicit length checks
+    'unicorn/explicit-length-check': 'off',
+
+    // Turning off because it leads to many uses of the word 'error' in the same block, which is confusing
+    // E.g.
+    // } catch(error) {
+    //   logger.error(error);
+    //   return error(error);
+    // }
+    'unicorn/catch-error-name': 'off',
+
+    // This rule is no good for test specs. Need to find a way to disable this for test specs
+    'unicorn/consistent-function-scoping': 'off',
+  },
+};

.gitignore

@@ -1,7 +1,16 @@
 node_modules/
-dev/
-dist/css/
-dist/*.html
-dist/js/testHarness.*
-reports/
-webdocs/
+
+# Test reports
+test-reports/
+
+# Keep .gitkeep files
+# +----------------------------+-------------------------------+
+# | To keep an empty directory, add a .gitkeep file to it      |
+# | and ignore the directory with a wildcard:                  |
+# |                                                            |
+# |     /path/to/dir/*                                         |
+# |                                                            |
+# | This will ignore the content but not the directory itself. |
+# +------------------------------------------------------------+
+!/**/.gitkeep
+

.npmignore

@@ -0,0 +1 @@
+*.spec.js

.prettierrc.yaml

@@ -0,0 +1,7 @@
+# .prettierrc
+tabWidth: 2
+printWidth: 120
+singleQuote: true
+trailingComma: es5
+plugins:
+  - 'prettier-plugin-svelte'

.travis.yml

@@ -1,8 +1,11 @@
 sudo: false
 language: node_js
 
+services:
+  - xvfb
+
 node_js:
-  - '8'
+  - '10'
 
 matrix:
   fast-finish: true     # https://docs.travis-ci.com/user/customizing-the-build/#Fast-Finishing
@@ -20,27 +23,25 @@ addons:
     packages:
       - g++-4.8
 
-before_install:
-  - npm prune
-  - npm set progress=false
-
 install:
   - npm install
 
 before_script:
   # Allow Firefox to run in virtual frame buffer
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
-  - sleep 3 # give xvfb some time to start
+#  - export DISPLAY=:99.0
+#  - sh -e /etc/init.d/xvfb start
+#  - sleep 3 # give xvfb some time to start
 
 script:
   #- npm run pre-release #disabled due to Chrome headless not working (even locally)
   - npm run verify
+  - npm run test:report
   - npm run build
 
 after_success:
-  #- npm run upload-coverage  # disabled due to tests being disabled
+  - npm run upload-coverage
   - npm run travis-deploy-once "npm run semantic-release"
+  - npm run docs:publish
 
 branches:
   except:

CONTRIBUTING.md

@@ -27,39 +27,12 @@ npm install
 Code is organised into modules which contain one-or-more components. This a great way to ensure maintainable code by encapsulation of behavior logic. A component is basically a self contained app usually in a single file or a folder with each concern as a file: style, template, specs, e2e, and component class. Here's how it looks:
 ```
 stylesheet-switcher/
- ├──config/                       * configuration files live here (e.g. webpack, docs/, testSystem/, testUnit/, testVisualRegression/, verify/)
- │
  ├──src/                          * source code files should be here
- │   └──modules/                  * all source code modules|components|features should appear as sub-directories under this directory
- │       ├──common/               
- │       ├──featureA/             
- │       └──featureB/             
- │           ├──assets/           
- │           │   ├──font          * fonts for this module
- │           │   └──img           * images for this module
- │           ├──styles/           * css source code for this module
- │           ├──template/         * HTML templates for this module
- │           ├──systemTest/       * system test specs for this module
- │           └──unitTest/         * unit test specs for this module
- │
- ├──dev/                          * development-build code is output here (Webpack may keep it in memory for speed)
- ├──dist/                         * production-build code is output here
- │   ├──assets/                   * all assets appear here, under module sub-folders. e.g.:
- │   │   └──featureB/             
- │   │       ├──font              
- │   │       └──img               
- │   ├──css/                      * compiled CSS files
- │   ├──js/                       * minified JS files
- │   └──vendor/                   * minified vendor JS files
- │
- ├──reports/                      * test reports appear here
+ ├──public/                       * website files (which is also the test harness) live here
+ │   ├──dist/                     * generated component bundle
+ │   └──css/                      * compiled CSS files
  │
- ├──docs/                         * source/content for the documentation website goes here
- ├──webdocs/                      * the documentation website is generated here
- │
- ├──                              * visual regression testing reference images (if enabled)
- │
- ├──confit.yml                    * the project config file generated by 'yo confit'
+ ├──test-reports/                 * test reports appear here
  ├──CONTRIBUTING.md               * how to contribute to the project
  ├──README.md                     * this file
  └──package.json                  * NPM package description file
@@ -132,8 +105,7 @@ Command | Description
 :------ | :----------
 <pre>npm run build</pre> | Generate production build into [dist/](dist/) folder
 <pre>npm run build:serve</pre> | Generate production build and serve on **http://localhost:3000**'
-<pre>npm run dev</pre> | Run project in development mode (verify code, create dev build into dev/ folder, serve on **http://localhost:3000**, watch for changes and reload the browser automatically)
-<pre>npm start</pre> | Alias for `npm run dev` task
+<pre>npm start</pre> | Builds a development build, starts a server and watches for changes
 <pre>npm run build:dev</pre> | Create a development build using Webpack<ul><li>Sourcemaps</li><li>Hot reloading of source code</li></ul>
 <pre>npm run build:prod</pre> | Create a production build using Webpack<ul><li>Minifies source code</li><li>Sourcemaps</li><li>Dead code removal</li><li>Hashes added to file names for cache-busting</li></ul>
 
@@ -147,7 +119,6 @@ Command | Description
 Command | Description
 :------ | :----------
 <pre>npm test</pre> | Alias for `npm run test:unit` task
-<pre>npm run test:coverage</pre> | Alias for test:unit:once, which also does test coverage checks and will fail if test coverage is not sufficient
 <pre>npm run test:unit</pre> | Run unit tests whenever JS source or tests change<ul><li>Uses Karma and Jasmine 2</li><li>Code coverage</li><li>Runs continuously (best to run in a separate window)</li></ul>
 <pre>npm run test:unit:debug</pre> | Run unit tests but disable code coverage to make debugging in a browser easier<ul><li>Runs continuously (best to run in a separate window)</li><li>No code coverage to make it easier to read source & testcode</li></ul>
 <pre>npm run test:unit:once</pre> | Run unit tests once<ul><li>Tests are run a single time</li><li>Good command for continuous integration testing</li></ul>
@@ -162,13 +133,8 @@ Command | Description
 
 Command | Description
 :------ | :----------
-<pre>npm run verify</pre> | Verify code style and syntax<ul><li>Verifies source *and test code* aginst customisable rules (unlike Webpack loaders)</li></ul>
-<pre>npm run verify:css</pre> | Verify CSS code style and syntax
-<pre>npm run verify:css:watch</pre> | Verify CSS code style and syntax and watch files for changes
-<pre>npm run verify:js</pre> | Verify Javascript code style and syntax
-<pre>npm run verify:js:fix</pre> | Verify Javascript code style and syntax and fix any errors that can be fixed automatically
-<pre>npm run verify:js:watch</pre> | Verify Javascript code style and syntax and watch files for changes
-<pre>npm run verify:watch</pre> | Runs verify task whenever JS or CSS code is changed
+<pre>npm run verify</pre> | Verify code style and syntax
+<pre>npm run lint</pre> | Fixes code style and syntax
 
 
 
@@ -186,23 +152,6 @@ Command | Description
 <pre>git push</pre> | Push local repository changes to remote repository
 
 
-<!--[]-->
-
-<!--[CN_DOCUMENTATION_TASKS]-->
-## Documentation Tasks
-
-Command | Description
-:------ | :----------
-<pre>npm run docs:build</pre> | Creates a production-version of the documentation website using Swanky in the `webdocs/`.
-<pre>npm run docs:build:serve</pre> | Builds then serves (via a web server) the production website.
-<pre>npm run docs:clean</pre> | Cleans the docs folder in preparation for building.
-<pre>npm run docs:dev</pre> | Creates a development-version of the documentation website and watches for changes.
-<pre>npm run docs:postpublish</pre> | Updates the information in `swanky.config.yaml` back to the development settings.
-<pre>npm run docs:prepublish</pre> | Updates the information in `swanky.config.yaml` with production settings. This is designed to allow the documentation to be generated AFTER the NPM package has been successfully published.
-<pre>npm run docs:publish</pre> | Publishes the documentation to GitHub's /gh-pages branch
-<pre>npm run docs:serve</pre> | Builds then serves (via a web server) the production website.
-
-
 
 <!--[]-->
 

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ],
+}