From 7efce7a7ee944b148ee0afda3c7ee496a1282e0b Mon Sep 17 00:00:00 2001 From: Karsten Schmidt Date: Thu, 2 Aug 2018 17:23:49 +0100 Subject: [PATCH] feat(transducers-hdom): add new package @thi.ng/transducers-hdom --- packages/transducers-hdom/.npmignore | 10 + packages/transducers-hdom/LICENSE | 201 +++++++++++++++++++ packages/transducers-hdom/README.md | 92 +++++++++ packages/transducers-hdom/package.json | 48 +++++ packages/transducers-hdom/src/index.ts | 38 ++++ packages/transducers-hdom/test/index.ts | 6 + packages/transducers-hdom/test/tsconfig.json | 10 + packages/transducers-hdom/tsconfig.json | 9 + 8 files changed, 414 insertions(+) create mode 100644 packages/transducers-hdom/.npmignore create mode 100644 packages/transducers-hdom/LICENSE create mode 100644 packages/transducers-hdom/README.md create mode 100644 packages/transducers-hdom/package.json create mode 100644 packages/transducers-hdom/src/index.ts create mode 100644 packages/transducers-hdom/test/index.ts create mode 100644 packages/transducers-hdom/test/tsconfig.json create mode 100644 packages/transducers-hdom/tsconfig.json diff --git a/packages/transducers-hdom/.npmignore b/packages/transducers-hdom/.npmignore new file mode 100644 index 0000000000..d703bda97a --- /dev/null +++ b/packages/transducers-hdom/.npmignore @@ -0,0 +1,10 @@ +build +coverage +dev +doc +src* +test +.nyc_output +tsconfig.json +*.tgz +*.html diff --git a/packages/transducers-hdom/LICENSE b/packages/transducers-hdom/LICENSE new file mode 100644 index 0000000000..8dada3edaf --- /dev/null +++ b/packages/transducers-hdom/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "{}" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright {yyyy} {name of copyright owner} + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/packages/transducers-hdom/README.md b/packages/transducers-hdom/README.md new file mode 100644 index 0000000000..b555ccc4c5 --- /dev/null +++ b/packages/transducers-hdom/README.md @@ -0,0 +1,92 @@ +# @thi.ng/transducers-hdom + +[![npm (scoped)](https://img.shields.io/npm/v/@thi.ng/transducers-hdom.svg)](https://www.npmjs.com/package/@thi.ng/transducers-hdom) + +This project is part of the +[@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo. + + + +- [About](#about) +- [Installation](#installation) +- [Usage examples](#usage-examples) +- [Authors](#authors) +- [License](#license) + + + +## About + +This package provides a single `updateUI` function, a side-effecting & +stateful transducer which receives +[@thi.ng/hdom](https://github.com/thi-ng/umbrella/tree/master/packages/hdom) +component trees, diffs each against the previous value and applies any +required changes to the browser DOM, starting at given root element. By +default, incoming values are first normalized using @thi.ng/hdom's +`normalizeTree()` function. + +This transducer is primarily intended for +[@thi.ng/rstream](https://github.com/thi-ng/umbrella/tree/master/packages/rstream)-based +dataflow graphs, where this transducer can be used as final leaf +subscription / transformer to reflect UI changes back to the user, +without using the standard RAF update loop used by @thi.ng/hdom by +default. In this setup, UI updates will only be performed if the stream +this transducer is attached to receives new values (i.e. hdom component +trees). + +## Installation + +```bash +yarn add @thi.ng/transducers-hdom +``` + +## Usage examples + +The below example is also available in the +[/examples](https://github.com/thi-ng/umbrella/tree/master/examples/transducers-hdom) +directory. + +[Live demo](https://demo.thi.ng/umbrella/transducers-hdom/) + +```ts +import * as rs from "@thi.ng/rstream"; +import * as tx from "@thi.ng/transducers"; +import { updateUI } from "@thi.ng/transducers-hdom"; + +// root component function +const app = ({ ticks, clicks }) => + ["div", + `${ticks} ticks and `, + ["a", + { href: "#", onclick: () => clickStream.next(0) }, + `${clicks} clicks`] + ]; + +// click stream (click counter) +const clickStream = new rs.Stream().transform(tx.scan(tx.count(-1))); + +// stream combinator +rs.sync({ + src: { + ticks: rs.fromInterval(1000), + clicks: clickStream, + }, + reset: false, +}).transform( + // transform into hdom component + tx.map(app), + // apply as DOM + updateUI(document.body) +); + +// kick off +clickStream.next(0); +``` + +## Authors + +- Karsten Schmidt + +## License + +© 2018 Karsten Schmidt // Apache Software License 2.0 diff --git a/packages/transducers-hdom/package.json b/packages/transducers-hdom/package.json new file mode 100644 index 0000000000..fd76059094 --- /dev/null +++ b/packages/transducers-hdom/package.json @@ -0,0 +1,48 @@ +{ + "name": "@thi.ng/transducers-hdom", + "version": "0.0.1", + "description": "Transducer based UI updater for @thi.ng/hdom", + "main": "./index.js", + "typings": "./index.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/thi-ng/umbrella.git" + }, + "homepage": "https://github.com/thi-ng/umbrella/tree/master/packages/transducers-hdom", + "author": "Karsten Schmidt ", + "license": "Apache-2.0", + "scripts": { + "build": "yarn run clean && tsc --declaration", + "clean": "rm -rf *.js *.d.ts .nyc_output build coverage doc", + "cover": "yarn test && nyc report --reporter=lcov", + "doc": "node_modules/.bin/typedoc --mode modules --out doc src", + "pub": "yarn run build && yarn publish --access public", + "test": "rm -rf build && tsc -p test && nyc mocha build/test/*.js" + }, + "devDependencies": { + "@types/mocha": "^5.2.5", + "@types/node": "^10.5.5", + "mocha": "^5.2.0", + "nyc": "^12.0.2", + "typedoc": "^0.11.1", + "typescript": "^3.0.1" + }, + "dependencies": { + "@thi.ng/hdom": "^3.0.32", + "@thi.ng/checks": "^1.5.7", + "@thi.ng/transducers": "^1.14.3" + }, + "keywords": [ + "diff", + "ES6", + "hdom", + "rstream", + "transducers", + "typescript", + "UI", + "VDOM" + ], + "publishConfig": { + "access": "public" + } +} \ No newline at end of file diff --git a/packages/transducers-hdom/src/index.ts b/packages/transducers-hdom/src/index.ts new file mode 100644 index 0000000000..b6e261af99 --- /dev/null +++ b/packages/transducers-hdom/src/index.ts @@ -0,0 +1,38 @@ +import { isString } from "@thi.ng/checks/is-string"; +import { diffElement } from "@thi.ng/hdom/diff"; +import { normalizeTree } from "@thi.ng/hdom/normalize"; +import { Transducer } from "@thi.ng/transducers/api"; +import { reducer } from "@thi.ng/transducers/reduce"; +import { scan } from "@thi.ng/transducers/xform/scan"; + +/** + * Side-effecting & stateful transducer which receives @thi.ng/hdom + * component trees, diffs each against previous value and applies + * required changes to browser DOM starting at given root element. By + * default, incoming values are first normalized using hdom's + * `normalizeTree()` function. + * + * This transducer is primarily intended for @thi.ng/rstream dataflow + * graph based applications, where this transducer can be used as final + * leaf subscription to reactively reflect UI changes back to the user, + * without using the standard RAF update loop used by hdom by default. + * In this setup, UI updates will only be performed if the stream this + * transducer is attached too receives new values (i.e. hdom component + * trees). + * + * @param el + * @param normalize + */ +export const updateUI = (el: string | Element, normalize = true): Transducer => { + const root = isString(el) ? document.getElementById(el) : el; + return scan( + reducer( + () => [], + (prev, curr) => { + normalize && (curr = normalizeTree(curr, {})); + diffElement(root, prev, curr); + return curr; + } + ) + ); +}; diff --git a/packages/transducers-hdom/test/index.ts b/packages/transducers-hdom/test/index.ts new file mode 100644 index 0000000000..6e92eb2475 --- /dev/null +++ b/packages/transducers-hdom/test/index.ts @@ -0,0 +1,6 @@ +// import * as assert from "assert"; +// import { updateUI } from "../src/index"; + +describe("transducers-hdom", () => { + it("tests pending"); +}); diff --git a/packages/transducers-hdom/test/tsconfig.json b/packages/transducers-hdom/test/tsconfig.json new file mode 100644 index 0000000000..bcf29ace54 --- /dev/null +++ b/packages/transducers-hdom/test/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "outDir": "../build" + }, + "include": [ + "./**/*.ts", + "../src/**/*.ts" + ] +} diff --git a/packages/transducers-hdom/tsconfig.json b/packages/transducers-hdom/tsconfig.json new file mode 100644 index 0000000000..bd6481a5a6 --- /dev/null +++ b/packages/transducers-hdom/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "." + }, + "include": [ + "./src/**/*.ts" + ] +}