@financial-times/dotcom-ui-data-embed 2.6.0

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 (19) hide show
  1. package/README.md +89 -0
  2. package/browser.js +1 -0
  3. package/component.js +1 -0
  4. package/dist/browser/client/DataEmbedStore.js +11 -0
  5. package/dist/browser/client/index.js +7 -0
  6. package/dist/browser/client/loadDataEmbed.js +13 -0
  7. package/dist/browser/components/DataEmbed.js +4 -0
  8. package/dist/browser/index.js +2 -0
  9. package/dist/node/client/DataEmbedStore.js +14 -0
  10. package/dist/node/client/index.js +14 -0
  11. package/dist/node/client/loadDataEmbed.js +16 -0
  12. package/dist/node/components/DataEmbed.js +11 -0
  13. package/dist/node/index.js +14 -0
  14. package/package.json +36 -0
  15. package/src/client/DataEmbedStore.ts +15 -0
  16. package/src/client/index.ts +9 -0
  17. package/src/client/loadDataEmbed.ts +15 -0
  18. package/src/components/DataEmbed.tsx +5 -0
  19. package/src/index.ts +2 -0
package/README.md ADDED
@@ -0,0 +1,89 @@
1
+ # @financial-times/dotcom-ui-data-embed
2
+
3
+ This package provides methods for putting data into your server-side rendered pages and safely retrieving it again in the browser.
4
+
5
+ ## Getting started
6
+
7
+ This package is compatible with Node 12+ and is distributed on npm.
8
+
9
+ ```sh
10
+ npm install --save @financial-times/dotcom-ui-data-embed
11
+ ```
12
+
13
+ After installing the package you can use it to embed data into your pages on the server-side. This data can then be retrieved and used in your client-side code.
14
+
15
+ ### Server-side integration
16
+
17
+ If you are using React to render your app you can use the `DataEmbed` component to integrate the data embed data with your pages:
18
+
19
+ ```jsx
20
+ import { DataEmbed } from '@financial-times/dotcom-ui-data-embed'
21
+ const DATA_EMBED_ID = 'data-embed'
22
+ const data = { property: 'value', secondProperty: 'second-value' }
23
+
24
+ export default (props) => (
25
+ <html>
26
+ <head>
27
+ <meta charSet="utf-8" />
28
+ <title>My Amazing Website</title>
29
+ </head>
30
+ <body>
31
+ ...
32
+ <DataEmbed id={DATA_EMBED_ID} data={data} />
33
+ </body>
34
+ </html>
35
+ )
36
+ ```
37
+
38
+ Otherwise you can insert a JSON formatted string into a `<script>` element with an ID of `data-embed`.
39
+
40
+ ```html
41
+ <!DOCTYPE html>
42
+ <html>
43
+ <head>
44
+ <meta charset="utf-8">
45
+ <title>My Amazing Website</title>
46
+ </head>
47
+ <body>
48
+ ...
49
+ <script type="application/json" id="data-embed">
50
+ {"property":"value","secondProperty":"second-value"}
51
+ </script>
52
+ </body>
53
+ </html>
54
+ ```
55
+
56
+ ### Client-side integration
57
+
58
+ Once you have data embedded in your page you can use the [data embed client](#client-side-api) in your client-side code. The client provides methods for safely retrieving data.
59
+
60
+ ```js
61
+ import * as dataEmbed from '@financial-times/dotcom-ui-data-embed'
62
+
63
+ const dataEmbedClient = dataEmbed.init({ id: 'data-embed' })
64
+
65
+ if (dataEmbedClient.get('property')) {
66
+ ...
67
+ }
68
+ ```
69
+
70
+ ## Client-side API
71
+
72
+ ### `init({ id }:{ id: string })`
73
+
74
+ Initialises and returns a new [data embed client](#data-embed-client-api) which can be used to safely access the data.
75
+
76
+ This method requires an `id` parameter within an options object.
77
+ This `id` should match the `id` attribute on the embed element within the page.
78
+
79
+ ## Data Embed Client API
80
+
81
+ ### `get(property: string)`
82
+
83
+ Returns the value of the requested property. If the property is not found this will return `undefined`.
84
+
85
+ ### `getAll()`
86
+
87
+ Returns all data embed data.
88
+
89
+ _Please note_ that the data returned is frozen so it cannot be modified.
package/browser.js ADDED
@@ -0,0 +1 @@
1
+ export * from './dist/browser/client/index'
package/component.js ADDED
@@ -0,0 +1 @@
1
+ module.exports = require('./dist/node/index')
package/dist/browser/client/DataEmbedStore.js ADDED
@@ -0,0 +1,11 @@
1
+ export default class DataEmbedStore {
2
+ constructor(data) {
3
+ this.data = Object.freeze(data);
4
+ }
5
+ get(key) {
6
+ return this.data.hasOwnProperty(key) ? this.data[key] : undefined;
7
+ }
8
+ getAll() {
9
+ return this.data;
10
+ }
11
+ }
package/dist/browser/client/index.js ADDED
@@ -0,0 +1,7 @@
1
+ import loadDataEmbed from './loadDataEmbed';
2
+ import DataEmbedStore from './DataEmbedStore';
3
+ const init = ({ id }) => {
4
+ const data = loadDataEmbed(id);
5
+ return new DataEmbedStore(data);
6
+ };
7
+ export { loadDataEmbed, init };
package/dist/browser/client/loadDataEmbed.js ADDED
@@ -0,0 +1,13 @@
1
+ export default function loadDataEmbed(id) {
2
+ const dataEmbedElement = document.getElementById(id);
3
+ let data = {};
4
+ if (dataEmbedElement) {
5
+ try {
6
+ data = JSON.parse(dataEmbedElement.innerHTML);
7
+ }
8
+ catch (error) {
9
+ console.error('Data embed error', error); // eslint-disable-line no-console
10
+ }
11
+ }
12
+ return Object.freeze(data);
13
+ }
package/dist/browser/components/DataEmbed.js ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ export function DataEmbed({ id, data }) {
3
+ return React.createElement("script", { type: "application/json", id: id, dangerouslySetInnerHTML: { __html: JSON.stringify(data) } });
4
+ }
package/dist/browser/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from './components/DataEmbed';
2
+ export * from './client';
package/dist/node/client/DataEmbedStore.js ADDED
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ class DataEmbedStore {
4
+ constructor(data) {
5
+ this.data = Object.freeze(data);
6
+ }
7
+ get(key) {
8
+ return this.data.hasOwnProperty(key) ? this.data[key] : undefined;
9
+ }
10
+ getAll() {
11
+ return this.data;
12
+ }
13
+ }
14
+ exports.default = DataEmbedStore;
package/dist/node/client/index.js ADDED
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.init = exports.loadDataEmbed = void 0;
7
+ const loadDataEmbed_1 = __importDefault(require("./loadDataEmbed"));
8
+ exports.loadDataEmbed = loadDataEmbed_1.default;
9
+ const DataEmbedStore_1 = __importDefault(require("./DataEmbedStore"));
10
+ const init = ({ id }) => {
11
+ const data = loadDataEmbed_1.default(id);
12
+ return new DataEmbedStore_1.default(data);
13
+ };
14
+ exports.init = init;
package/dist/node/client/loadDataEmbed.js ADDED
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ function loadDataEmbed(id) {
4
+ const dataEmbedElement = document.getElementById(id);
5
+ let data = {};
6
+ if (dataEmbedElement) {
7
+ try {
8
+ data = JSON.parse(dataEmbedElement.innerHTML);
9
+ }
10
+ catch (error) {
11
+ console.error('Data embed error', error); // eslint-disable-line no-console
12
+ }
13
+ }
14
+ return Object.freeze(data);
15
+ }
16
+ exports.default = loadDataEmbed;
package/dist/node/components/DataEmbed.js ADDED
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.DataEmbed = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ function DataEmbed({ id, data }) {
9
+ return react_1.default.createElement("script", { type: "application/json", id: id, dangerouslySetInnerHTML: { __html: JSON.stringify(data) } });
10
+ }
11
+ exports.DataEmbed = DataEmbed;
package/dist/node/index.js ADDED
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
10
+ for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
11
+ };
12
+ Object.defineProperty(exports, "__esModule", { value: true });
13
+ __exportStar(require("./components/DataEmbed"), exports);
14
+ __exportStar(require("./client"), exports);
package/package.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "name": "@financial-times/dotcom-ui-data-embed",
3
+ "version": "2.6.0",
4
+ "description": "",
5
+ "main": "component.js",
6
+ "browser": "browser.js",
7
+ "types": "src/index.ts",
8
+ "scripts": {
9
+ "test": "echo \"Error: no test specified\" && exit 1",
10
+ "tsc": "../../node_modules/.bin/tsc --incremental",
11
+ "clean": "npm run clean:dist && npm run clean:node_modules",
12
+ "clean:dist": "rm -rf dist",
13
+ "clean:node_modules": "rm -rf node_modules",
14
+ "clean:install": "npm run clean && npm i",
15
+ "build:node": "npm run tsc -- --module commonjs --outDir ./dist/node",
16
+ "build:browser": "npm run tsc -- --module es2015 --outDir ./dist/browser",
17
+ "build": "npm run build:node && npm run build:browser",
18
+ "dev": "echo -n node browser | parallel -u -d ' ' npm run build:{} -- --watch"
19
+ },
20
+ "keywords": [],
21
+ "author": "",
22
+ "license": "MIT",
23
+ "engines": {
24
+ "node": ">= 12.0.0"
25
+ },
26
+ "peerDependencies": {
27
+ "react": "^16.8.6"
28
+ },
29
+ "repository": {
30
+ "type": "git",
31
+ "repository": "https://github.com/Financial-Times/dotcom-page-kit.git",
32
+ "directory": "packages/dotcom-ui-data-embed"
33
+ },
34
+ "homepage": "https://github.com/Financial-Times/dotcom-page-kit/tree/HEAD/packages/dotcom-ui-data-embed",
35
+ "devDependencies": {}
36
+ }
package/src/client/DataEmbedStore.ts ADDED
@@ -0,0 +1,15 @@
1
+ export default class DataEmbedStore {
2
+ private data
3
+
4
+ constructor(data) {
5
+ this.data = Object.freeze(data)
6
+ }
7
+
8
+ get(key: string) {
9
+ return this.data.hasOwnProperty(key) ? this.data[key] : undefined
10
+ }
11
+
12
+ getAll() {
13
+ return this.data
14
+ }
15
+ }
package/src/client/index.ts ADDED
@@ -0,0 +1,9 @@
1
+ import loadDataEmbed from './loadDataEmbed'
2
+ import DataEmbedStore from './DataEmbedStore'
3
+
4
+ const init = ({ id }: { id: string }) => {
5
+ const data = loadDataEmbed(id)
6
+ return new DataEmbedStore(data)
7
+ }
8
+
9
+ export { loadDataEmbed, init }
package/src/client/loadDataEmbed.ts ADDED
@@ -0,0 +1,15 @@
1
+ export default function loadDataEmbed(id: string) {
2
+ const dataEmbedElement = document.getElementById(id)
3
+
4
+ let data = {}
5
+
6
+ if (dataEmbedElement) {
7
+ try {
8
+ data = JSON.parse(dataEmbedElement.innerHTML)
9
+ } catch (error) {
10
+ console.error('Data embed error', error) // eslint-disable-line no-console
11
+ }
12
+ }
13
+
14
+ return Object.freeze(data)
15
+ }
package/src/components/DataEmbed.tsx ADDED
@@ -0,0 +1,5 @@
1
+ import React from 'react'
2
+
3
+ export function DataEmbed({ id, data }: { id: string; data: object }) {
4
+ return <script type="application/json" id={id} dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />
5
+ }
package/src/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './components/DataEmbed'
2
+ export * from './client'