@teamthread/elm-web-components - npm Package Compare versions

Comparing version 0.5.0-beta3 to 0.6.0

lib/index.js

@@ -39,3 +39,7 @@ // adapted from https://github.com/PixelsCommander/ReactiveElements
         _ref$onDetached = _ref.onDetached,
-        onDetached = _ref$onDetached === void 0 ? function () {} : _ref$onDetached;
+        onDetached = _ref$onDetached === void 0 ? function () {} : _ref$onDetached,
+        _ref$mapFlags = _ref.mapFlags,
+        mapFlags = _ref$mapFlags === void 0 ? function (flags) {
+      return flags;
+    } : _ref$mapFlags;
 
@@ -58,2 +62,3 @@ if (!this.__elmVersion) {
       if (Object.keys(props).length === 0) props = undefined;
+      var flags = mapFlags(props);
 
@@ -68,3 +73,3 @@ if (elmVersion === '0.19') {
         var elmElement = ElmComponent.init({
-          flags: props,
+          flags: flags,
           node: elmDiv
@@ -74,3 +79,3 @@ });
       } else if (elmVersion === '0.18') {
-        var _elmElement = ElmComponent.embed(this, props);
+        var _elmElement = ElmComponent.embed(this, flags);
 
@@ -77,0 +82,0 @@ setupPorts(_elmElement.ports);

package.json

 {
   "name": "@teamthread/elm-web-components",
-  "version": "0.5.0-beta3",
+  "version": "0.6.0",
   "description": "Run your Elm apps through web components.",
@@ -15,5 +15,3 @@ "main": "lib/index.js",
   "keywords": [],
-  "files": [
-    "lib/index.js"
-  ],
+  "files": ["lib/index.js"],
   "author": "Team Thread",
@@ -20,0 +18,0 @@ "license": "MIT",

README.md

@@ -5,3 +5,2 @@ # elm-web-components
 
-
 ## Install
@@ -13,3 +12,3 @@
 
-## Configuration
+## Configuration (new in 0.6.0)
 
@@ -120,2 +119,25 @@ We support both Elm 0.18 and 0.19 for now. You must configure the module so it knows which one to support:
 
+## Transforming flags
+
+Sometimes you might want to pre-process the flags a bit in Javascript before giving them to Elm. For
+example, all the attributes from the DOM are strings, but you might want to make one of them an
+integer:
+
+```js
+elmWebComponents.register('component-with-ports', ComponentWithPorts, {
+  mapFlags: flags => {
+    const someId = parseInt(flags.someId)
+    return Object.assign({}, flags, { someId })
+  },
+})
+```
+
+Rendering the component with:
+
+```html
+<component-with-ports some-id="1"></component-with-ports>
+```
+
+Will pass the flags as `{ someId : Int }`, rather than `{ someId : String }`.
+
 ## `onDetached` (new in 0.3.0)
@@ -133,3 +155,3 @@
     console.log('Called when the component is removed from the DOM')
-  }
+  },
 })
@@ -140,25 +162,4 @@ ```
 
-
 ## Examples
 
 You can find full examples in the `example` directory. If you have cloned the repository, you can run `yarn run example` to run them locally.
-
-## Changelog
-
-**v0.5.0** [28 Aug 2018] (in beta)
-
-* Breaking change: we now support Elm 0.19 and 0.18! You must now configure the library before using it: `elmWebComponents.configure('0.18')` or `elmWebComponents.configure('0.19')`.
-
-**v0.4.0** [22 Aug 2018]
-
-* Breaking change: we now convert kebab case properties into camelCase. So `<foo-bar first-name="Jack" />` will be given to Elm as `firstName: "Jack"`.
-
-
-**v0.3.0** [3 May 2018]
-
-* You can now pass `onDetached` as an option. This is a callback function that will be run when component is removed from the DOM.
-
-**v0.2.0** [1 May 2018]
-
-* Added support for static flags via the `staticFlags` option.
-* **Breaking change**: third argument to `register` now takes an object with two (optional) properties: `setupPorts` and `staticFlags`, rather than just a function for setting up the ports.

No alert changes

Improved metrics

Total package byte prevSize

9548

14.13%

Number of package files

4

33.33%

Lines of code

77

6.94%

Number of lines in readme file

161

0.63%

No dependency changes