@rededor/cura-hydrate 0.3.4-alpha.2 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +4 -3
  2. package/readme.md +27 -0
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@rededor/cura-hydrate",
3
- "version": "0.3.4-alpha.2",
4
- "description": "cura component hydration app.",
3
+ "version": "0.3.4",
4
+ "description": "Cura Design System component hydration app for server side rendering.",
5
5
  "main": "index.js",
6
- "types": "index.d.ts"
6
+ "types": "index.d.ts",
7
+ "author": "Rede D`Or São Luiz"
7
8
  }
package/readme.md ADDED
@@ -0,0 +1,27 @@
1
+ ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
2
+
3
+ # Cura Design System Hydration App.
4
+
5
+ Provides Stencil [hydrate app](https://stenciljs.com/docs/hydrate-app) to server side rendering web components.
6
+
7
+ Install package `npm install @rededor/cura-hydrate`.
8
+
9
+ Usage example on node server:
10
+
11
+ import { renderToString } from '@rededor/cura-hydrate';
12
+
13
+ res.render(indexHtml, { ...options }, async function(err, html) {
14
+ const result = await renderToString(html);
15
+ res.send(result.html);
16
+ });
17
+
18
+ ## Shadow DOM
19
+
20
+ Hydrate app doesn't support shadow dom at the server level.
21
+ The component DOM is exposed and the styles are injected by classes causing some styling divergences.
22
+ To prevent that, make sure the your app don't set global styles for common tags or use some encapsulation strategy.
23
+
24
+ Note that this only happens for the server side rendering response.
25
+ At the client level the shadow dom continues to work as expected.
26
+
27
+ <small>Stencil Version: 3.3.0</small>