use LitElement and Redux

kherrick · Sep 24, 2019 · 080ce32 · 080ce32
1 parent 9beda1c
commit 080ce32
Show file tree

Hide file tree

Showing 154 changed files with 6,076 additions and 14,587 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,16 +1,16 @@
-
 {
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-object-rest-spread"
+  ],
   "presets": [
-    ["babel-preset-env", {
-      "modules": false,
-      "targets": {
-        "browsers": "ie >= 11"
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "esmodules": true
+        }
       }
-    }]
-  ],
-  "env": {
-    "test": {
-      "presets": [["babel-preset-env"]]
-    }
-  }
+    ]
+  ]
 }
diff --git a/.editorconfig b/.editorconfig
@@ -1,8 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
 root = true
 
-[**]
+
+[*]
+
+# Change these settings to your own preference
 indent_style = space
 indent_size = 2
+
+# We recommend you to keep these unchanged
 end_of_line = lf
+charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,4 @@
+/dist
+
+/dev/index.html
+/index.html
diff --git a/.eslintrc b/.eslintrc
@@ -1,27 +1,16 @@
 {
-  "extends": "eslint:recommended",
-  "env": {
-    "es6": true,
-    "browser": true
-  },
-  "globals": {
-    "__dirname": true,
-    "process": true
-  },
   "parserOptions": {
+    "ecmaVersion": 2018,
     "sourceType": "module"
   },
+  "extends": ["plugin:prettier/recommended"],
   "rules": {
-    "eol-last": [
-      "error",
-      "always"
-    ],
-    "no-multiple-empty-lines": [
+    "prettier/prettier": [
       "error",
       {
-        "max": 1,
-        "maxBOF": 1,
-        "maxEOF": 1
+        "singleQuote": true,
+        "semi": false,
+        "printWidth": 120
       }
     ]
   }

diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,16 @@
-/bundle/
-/dist/
-/node_modules
-/src/index.html
-/tests/jest/coverage
+## editors
+/.vscode
+
+## system files
+.DS_Store
+
+## npm
+/node_modules/
+/npm-debug.log
+
+## temp folders
+/.tmp/
+
+## built files
+/dist
+/service-worker.js
diff --git a/.nojekyll b/.nojekyll
diff --git a/README.md b/README.md
@@ -1,85 +1,71 @@
-x-weather
-======
+# \<x-weather>
 
 ## About
 
-  * A collection of [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) implementing portions of the [OpenWeatherMap API](https://openweathermap.org/api).
+A collection of [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) implementing portions of the [OpenWeatherMap API](https://openweathermap.org/api).
 
-    <a href="https://kherrick.github.io/x-weather/">
-      <img  src="https://raw.githubusercontent.com/kherrick/x-weather/master/assets/x-weather-screenshot.png" width="75%" />
-    </a>
+<a href="https://kherrick.github.io/x-weather/">
+  <img src="https://raw.githubusercontent.com/kherrick/x-weather/master/assets/x-weather-screenshot.png" width="75%" />
+</a>
 
-## Installation
-
-### Add Internet Explorer 11 compatible polyfills
-
-```html
-<div id="ce-es5-shim">
-  <script>
-    if (!window.customElements) {
-      var ceShimContainer = document.querySelector('#ce-es5-shim')
-
-      // This prevents custom-elements-es5-adapter.js from parsing or running.
-      ceShimContainer.parentElement.removeChild(ceShimContainer)
-    }
-  </script>
+## Usage
 
-  <!-- Required, due to a conflict between the polyfills, transpilation, and IE... -->
-  <script
-    charset="utf-8"
-    src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
-  ></script>
-</div>
+### Static Import Example:
 
-<!-- Web component polyfill (only loads what it needs) -->
-<script
-  charset="utf-8"
-  src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
-></script>
+Install:
+```bash
+npm i x-weather
 ```
 
-### Load and register the web component in the CustomElementRegistry
+Render:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/x-weather@latest/lib/build-ie11-iife/iife/main.js"></script>
-```
+<script type="module">
+  import * as XWeather from './node_modules/x-weather/dist/esm/module.js'
 
-## Usage
+  XWeather.defineCustomElements()
+</script>
+<x-weather
+  appid="NOT_A_REAL_APP_ID"
+  location="Detroit, Michigan"
+>
+  <x-current primaryscale="f"></x-current>
+  <x-forecast days="14" primaryscale="f"></x-forecast>
+</x-weather>
+```
 
-* After installation and [signing up for an API key](https://home.openweathermap.org/users/sign_up), use the custom element:
+### Dynamic Import Example:
 
+Render:
 ```html
+<script>
+  import('https://unpkg.com/x-weather/dist/esm/defineCustomElements.js')
+    .then(({
+      defineCustomElements
+    }) => {
+      defineCustomElements()
+    })
+</script>
 <x-weather
-  appid="NOT_A_REAL_API_KEY"
-  host="api.openweathermap.org"
-  location="Phoenix, Arizona"
+  appid="NOT_A_REAL_APP_ID"
+  location="Detroit, Michigan"
 >
-  <style>
-    x-current {
-      float: left;
-      width: 12rem;
-    }
-
-    x-forecast {
-      --x-forecast-item-float: left;
-      --x-forecast-item-width: 12rem;
-    }
-  </style>
-  <x-current scale="F"></x-current>
-  <x-forecast days="2" scale="F"></x-forecast>
+  <x-current primaryscale="f"></x-current>
+  <x-forecast days="14" primaryscale="f"></x-forecast>
 </x-weather>
 ```
 
-## Additional information
+## Development
+```bash
+npm run start
+```
+
+## Lint
+```bash
+npm run lint
+```
 
-* Other builds and examples (including basic service workers) can be found inside the [lib folder](https://github.com/kherrick/x-weather/tree/master/lib)
-* The package can be installed and imported by npm:
-  - `npm i x-weather`
-  - `import 'x-weather/lib/build-no-polyfills-esm/esm/main'`
-* Building basics:
-  - Site
-    * `NODE_ENV=production npm run build`
-  - Module
-    * `NODE_ENV=production npm run bundle-modules`
-  - Template
-    * `npm run build-templates API-KEY SERVICE-WORKER-URL`
+## Build
+```bash
+npm run build
+```
diff --git a/bin/build_templates b/bin/build_templates
diff --git a/bin/npm_check b/bin/npm_check
diff --git a/config/rollup.config.custom.elements.shady.dom-esm.js b/config/rollup.config.custom.elements.shady.dom-esm.js
diff --git a/config/rollup.config.custom.elements.shady.dom-systemjs.js b/config/rollup.config.custom.elements.shady.dom-systemjs.js