From 8588f16041274f548ecd5d41db9ef251b4ceac13 Mon Sep 17 00:00:00 2001 From: Felipe Guizar Diaz Date: Sun, 11 Aug 2019 12:35:01 -0500 Subject: [PATCH] Basic Bindings --- .babelrc | 5 +++++ .editorconfig | 3 +++ .eslintrc | 9 +++++++++ .gitignore | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ .npmignore | 1 + LICENSE | 21 +++++++++++++++++++++ README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 35 +++++++++++++++++++++++++++++++++++ src/index.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 214 insertions(+) create mode 100644 .babelrc create mode 100644 .editorconfig create mode 100644 .eslintrc create mode 100644 .gitignore create mode 100644 .npmignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 package.json create mode 100644 src/index.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..f0753f3 --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + "airbnb" + ] + } \ No newline at end of file diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..3f999da --- /dev/null +++ b/.editorconfig @@ -0,0 +1,3 @@ +[*] +indent_size = 2 +indent_style = space \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..5cf86cc --- /dev/null +++ b/.eslintrc @@ -0,0 +1,9 @@ +{ + "extends": [ + "airbnb-base" + ], + "rules": { + "import/no-unresolved": 0, + "import/prefer-default-export": 0 + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2021497 --- /dev/null +++ b/.gitignore @@ -0,0 +1,48 @@ +# Logs +logs +*.log +npm-debug.log* + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directory +node_modules + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history + +TODO +coverage +lib + +# Only apps should have lockfiles +npm-shrinkwrap.json +yarn.lock +package-lock.json +© 2019 GitHub, Inc. +Terms +Privacy +Security +Status +Help +Contact GitHub +Pricing +API +Training +Blog +About + +example \ No newline at end of file diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.npmignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..e56ea20 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2019 Felipe Guizar Diaz + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..c1b4e14 --- /dev/null +++ b/README.md @@ -0,0 +1,48 @@ +# hypernova-redom + +[RE:DOM](https://github.com/redom/redom) bindings for [Hypernova](https://github.com/airbnb/hypernova). + +On the server, wraps the component in a function to render it to a HTML string given its props. + +On the client, calling this function with your component scans the DOM for any server-side rendered instances of it. It then resumes those components using the server-specified props. + +## Install + +```sh +npm install hypernova-redom +``` + +## Usage + +Here's how to use it in your module: + +```js +import { renderRedom } from 'hypernova-redom' +import Example from './components/Example' + +export default renderRedom('Example', Example) +``` + +### Server Prefetch + +You need to add a method `serverPrefetch` to components that needs to fetch data in the server before be rendered. + + +```js +class Example { + constructor({ items }) { + this.el = // render view using items + } +} + +Example.serverPrefetch = async (props) => { + const items = await // perform request outside the app + + // return new props (original props + fetched data) + return { + ...props, + items + } +} + +``` \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..244c656 --- /dev/null +++ b/package.json @@ -0,0 +1,35 @@ +{ + "name": "hypernova-redom", + "version": "0.1.0", + "description": "RE:DOM Bindings for Hypernova", + "main": "lib/index.js", + "author": "Felipe Guizar Diaz ", + "license": "MIT", + "keywords": [ + "redom", + "hypernova", + "ssr", + "isomorphic" + ], + "repository": { + "type": "git", + "url": "git@github.com:ara-framework/hypernova-redom.git" + }, + "scripts": { + "prepublish": "npm run build", + "lint": "eslint src", + "build": "babel src -d lib" + }, + "peerDependencies": { + "domino": "^2.1.3", + "hypernova": "^2.5.0", + "redom": "^3.24.0" + }, + "devDependencies": { + "babel-cli": "^6.26.0", + "babel-preset-airbnb": "^2.5.3", + "eslint": "^5.14.1", + "eslint-config-airbnb-base": "^13.1.0", + "eslint-plugin-import": "^2.16.0" + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..78d961d --- /dev/null +++ b/src/index.js @@ -0,0 +1,44 @@ + +import hypernova, { serialize, load } from 'hypernova'; +import { mount } from 'redom'; + +export const renderRedom = (name, Component) => hypernova({ + server() { + const domino = require('domino'); + const domImpl = domino.createDOMImplementation() + + return async (props) => { + let newProps = props; + + if (typeof Component.serverPrefetch === 'function') { + newProps = await Component.serverPrefetch(props); + } + + global.document = domImpl.createHTMLDocument(); + global.SVGElement = function SVGElement () {}; + + mount(document.body, new Component(newProps)); + return serialize(name, document.body.innerHTML, newProps); + }; + }, + + client() { + const payloads = load(name); + if (payloads) { + payloads.forEach((payload) => { + const { node, data } = payload; + + const { firstChild } = node + const obj = new Component(data) + + if (firstChild) { + mount(node, obj, firstChild) + node.removeChild(firstChild) + } + mount(node, obj); + }); + } + + return Component; + }, +});