Merge branch 'native-image'

.github/workflows/node.js.yml

@@ -0,0 +1,21 @@
+name: Node.js CI
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x, 20.x]
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci
+      - run: npm test

.gitignore

@@ -5,4 +5,5 @@ coverage
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.next
+.next
+react-datocms.tgz

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -20,7 +20,7 @@ npm install react-datocms
 
 This package offers different components and hooks. Please refer to one of the following pages to learn more about a specific area of interest:
 
-* [`<Image />` component for responsive/progressive images](./docs/image.md)
+* [`<SRCImage />` and `<Image />` components for responsive/progressive images](./docs/image.md)
 * [`<StructuredText />` component](./docs/structured-text.md)
 * [`<VideoPlayer />` component](./docs/video-player.md)
 * [`useQuerySubscription()` hook for live, real-time updates of content](./docs/live-real-time-updates.md)
@@ -35,23 +35,14 @@ Live demo: [https://react-datocms-example.netlify.com/](https://react-datocms-ex
 
 # Development
 
-This repository contains a number of demos/examples. You can use them to locally test your changes to the package with `npm link`:
+This repository contains a number of demos/examples. You can use them to locally test your changes.
 
 ```
-npm link
-cd examples/images-and-seo/vanilla-react
-npm link react-datocms
+cd examples
+npm setup
 npm run start
 ```
 
-Now on another terminal you can run:
-
-```
-npm run watch
-```
-
-This will re-compile the package everytime you make a change, and the example project will pick those changes instantly.
-
 <!--datocms-autoinclude-footer start-->
 -----------------
 # What is DatoCMS?

docs/live-real-time-updates.md

@@ -13,14 +13,13 @@ Live updates are great both to get instant previews of your content while editin
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
 
-- [Live real-time updates](#live-real-time-updates)
-  - [Table of Contents](#table-of-contents)
-  - [Installation](#installation)
-  - [Reference](#reference)
-  - [Initialization options](#initialization-options)
-  - [Connection status](#connection-status)
-  - [Error object](#error-object)
-  - [Example](#example)
+- [Installation](#installation)
+- [Reference](#reference)
+- [Initialization options](#initialization-options)
+- [Connection status](#connection-status)
+- [Error object](#error-object)
+- [Example](#example)
+- [The `fetcher` option](#the-fetcher-option)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 

docs/meta-tags.md

@@ -8,15 +8,13 @@ Just like for the [image component](./image.md) this package offers a number of
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
 
-- [Social share, SEO and Favicon meta tags](#social-share-seo-and-favicon-meta-tags)
-  - [Table of Contents](#table-of-contents)
-  - [Installation](#installation)
-  - [General usage](#general-usage)
-  - [`renderMetaTags()`](#rendermetatags)
-  - [`renderMetaTagsToString()`](#rendermetatagstostring)
-  - [`toRemixMeta()`](#toremixmeta)
-    - [For Remix v1: `toRemixV1Meta()`](#for-remix-v1-toremixv1meta)
-  - [`toNextMetadata()`](#tonextmetadata)
+- [Installation](#installation)
+- [General usage](#general-usage)
+- [`renderMetaTags()`](#rendermetatags)
+- [`renderMetaTagsToString()`](#rendermetatagstostring)
+- [`toRemixMeta()`](#toremixmeta)
+  - [For Remix v1: `toRemixV1Meta()`](#for-remix-v1-toremixv1meta)
+- [`toNextMetadata()`](#tonextmetadata)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 

docs/video-player.md

@@ -1,3 +1,18 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [`<VideoPlayer/>` component for easy video integration.](#videoplayer-component-for-easy-video-integration)
+  - [Out-of-the-box features](#out-of-the-box-features)
+  - [Installation](#installation)
+  - [Usage](#usage)
+  - [Example](#example)
+  - [Props](#props)
+  - [Advanced usage: the `useVideoPlayer` hook](#advanced-usage-the-usevideoplayer-hook)
+    - [Example](#example-1)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
 # `<VideoPlayer/>` component for easy video integration.
 
 `<VideoPlayer />` is a React component specially designed to work seamlessly with DatoCMS’s [`video` GraphQL query](https://www.datocms.com/docs/content-delivery-api/images-and-videos#videos) that optimizes video streaming for your sites.

examples/video/README.md → examples/README.md

@@ -14,11 +14,6 @@ Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
 The page will reload when you make changes.\
 You may also see any lint errors in the console.
 
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
 ### `npm run build`
 
 Builds the app for production to the `build` folder.\