Socket
Socket
Sign inDemoInstall

next-sanity

Package Overview
Dependencies
Maintainers
1
Versions
323
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

next-sanity - npm Package Compare versions

Comparing version 0.1.12 to 0.2.0

2

dist/client.d.ts
import { ClientConfig } from './types';
export declare function createClient(config: ClientConfig): import("picosanity").PicoSanity;
export declare function createClient(config: ClientConfig): import("@sanity/client").SanityClient;

4

dist/next-sanity.cjs.development.js

@@ -26,3 +26,3 @@ 'use strict';

var picoSanity = _interopDefault(require('picosanity'));
var sanityClient = _interopDefault(require('@sanity/client'));
var getImageUrlBuilder = _interopDefault(require('@sanity/image-url'));

@@ -36,3 +36,3 @@ var React = require('react');

function createClient(config) {
return picoSanity(config);
return sanityClient(config);
}

@@ -39,0 +39,0 @@

2

dist/next-sanity.cjs.production.min.js

@@ -1,2 +0,2 @@

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("picosanity")),r=e(require("@sanity/image-url")),n=require("react"),o=e(n),i=require("use-deep-compare-effect"),a=e(require("@sanity/block-content-to-react")),u=e(require("groq"));function c(){return"undefined"==typeof AbortController?{signal:void 0,abort:s}:new AbortController}function s(){}function f(e,t){return fetch("https://"+e+".api.sanity.io/v1/users/me",{credentials:"include",signal:null==t?void 0:t.signal}).then((function(e){return e.json()})).then((function(e){return null!=e&&e.id?e:null})).catch((function(e){return"AbortError"===e.name?null:Promise.reject(e)}))}var l={};exports.groq=u,exports.createClient=function(e){return t(e)},exports.createCurrentUserHook=function(e){var t=e.projectId;return function(){return function(e){var t=n.useState(),r=t[0],o=t[1],i=n.useState(),a=i[0],u=i[1];return n.useEffect((function(){var t=c();return f(e,t).then(o).catch(u),function(){return t.abort()}}),[e]),{data:r,error:a,loading:null!==r||!a}}(t)}},exports.createImageUrlBuilder=function(e){return r({projectId:e.projectId,dataset:e.dataset})},exports.createPortableTextComponent=function(e){var t=e.projectId,r=e.dataset,n=e.serializers;return function(e){return o.createElement(a,Object.assign({projectId:t,dataset:r,serializers:n},e))}},exports.createPreviewSubscriptionHook=function(e){var t,r=e.projectId,o=e.dataset,a=e.documentLimit,u=void 0===a?3e3:a;return function(e,t){void 0===t&&(t={});var o=t.params;return function(e){var t=e.getStore,r=e.projectId,o=e.query,a=e.params,u=e.initialData,s=e.enabled,l=void 0!==s&&s,d=n.useState(),p=d[0],v=d[1],b=n.useState(!1),h=b[0],m=b[1],g=n.useState(),j=g[0],y=g[1];return i.useDeepCompareEffectNoCheck((function(){if(!l)return function(){};m(!0);var e,n=c();return f(r,n).then((function(e){if(!e)throw console.warn("Not authenticated - preview not available"),new Error("Not authenticated - preview not available")})).then(t).then((function(t){e=t.subscribe(o,a,(function(e,t){e?v(e):y(t)}))})).catch(v).finally((function(){return m(!1)})),function(){e&&e.unsubscribe(),n.abort()}}),[t,o,a,l]),{data:void 0===j?u:j,loading:h,error:p}}({getStore:s,projectId:r,query:e,params:void 0===o?l:o,initialData:t.initialData,enabled:!!t.enabled&&"undefined"!=typeof window})};function s(){return t||(t=new Promise((function(e){e(function(e){if(e&&e.__esModule)return e;var t={};return e&&Object.keys(e).forEach((function(r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})})),t.default=e,t}(require("@sanity/groq-store")))})).then((function(e){return(0,e.groqStore)({projectId:r,dataset:o,documentLimit:u,listen:!0,overlayDrafts:!0,subscriptionThrottleMs:10})}))),t}};
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@sanity/client")),r=e(require("@sanity/image-url")),n=require("react"),o=e(n),i=require("use-deep-compare-effect"),a=e(require("@sanity/block-content-to-react")),u=e(require("groq"));function c(){return"undefined"==typeof AbortController?{signal:void 0,abort:s}:new AbortController}function s(){}function f(e,t){return fetch("https://"+e+".api.sanity.io/v1/users/me",{credentials:"include",signal:null==t?void 0:t.signal}).then((function(e){return e.json()})).then((function(e){return null!=e&&e.id?e:null})).catch((function(e){return"AbortError"===e.name?null:Promise.reject(e)}))}var l={};exports.groq=u,exports.createClient=function(e){return t(e)},exports.createCurrentUserHook=function(e){var t=e.projectId;return function(){return function(e){var t=n.useState(),r=t[0],o=t[1],i=n.useState(),a=i[0],u=i[1];return n.useEffect((function(){var t=c();return f(e,t).then(o).catch(u),function(){return t.abort()}}),[e]),{data:r,error:a,loading:null!==r||!a}}(t)}},exports.createImageUrlBuilder=function(e){return r({projectId:e.projectId,dataset:e.dataset})},exports.createPortableTextComponent=function(e){var t=e.projectId,r=e.dataset,n=e.serializers;return function(e){return o.createElement(a,Object.assign({projectId:t,dataset:r,serializers:n},e))}},exports.createPreviewSubscriptionHook=function(e){var t,r=e.projectId,o=e.dataset,a=e.documentLimit,u=void 0===a?3e3:a;return function(e,t){void 0===t&&(t={});var o=t.params;return function(e){var t=e.getStore,r=e.projectId,o=e.query,a=e.params,u=e.initialData,s=e.enabled,l=void 0!==s&&s,d=n.useState(),p=d[0],v=d[1],b=n.useState(!1),h=b[0],m=b[1],g=n.useState(),j=g[0],y=g[1];return i.useDeepCompareEffectNoCheck((function(){if(!l)return function(){};m(!0);var e,n=c();return f(r,n).then((function(e){if(!e)throw console.warn("Not authenticated - preview not available"),new Error("Not authenticated - preview not available")})).then(t).then((function(t){e=t.subscribe(o,a,(function(e,t){e?v(e):y(t)}))})).catch(v).finally((function(){return m(!1)})),function(){e&&e.unsubscribe(),n.abort()}}),[t,o,a,l]),{data:void 0===j?u:j,loading:h,error:p}}({getStore:s,projectId:r,query:e,params:void 0===o?l:o,initialData:t.initialData,enabled:!!t.enabled&&"undefined"!=typeof window})};function s(){return t||(t=new Promise((function(e){e(function(e){if(e&&e.__esModule)return e;var t={};return e&&Object.keys(e).forEach((function(r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})})),t.default=e,t}(require("@sanity/groq-store")))})).then((function(e){return(0,e.groqStore)({projectId:r,dataset:o,documentLimit:u,listen:!0,overlayDrafts:!0,subscriptionThrottleMs:10})}))),t}};
//# sourceMappingURL=next-sanity.cjs.production.min.js.map

4

dist/next-sanity.esm.js

@@ -1,2 +0,2 @@

import picoSanity from 'picosanity';
import sanityClient from '@sanity/client';
import getImageUrlBuilder from '@sanity/image-url';

@@ -9,3 +9,3 @@ import React, { useState, useEffect } from 'react';

function createClient(config) {
return picoSanity(config);
return sanityClient(config);
}

@@ -12,0 +12,0 @@

6

package.json
{
"name": "next-sanity",
"description": "Sanity.io toolkit for Next.js",
"version": "0.1.12",
"version": "0.2.0",
"author": "Sanity.io <hello@sanity.io>",

@@ -16,3 +16,3 @@ "license": "MIT",

"engines": {
"node": ">=10"
"node": ">=12"
},

@@ -30,6 +30,6 @@ "scripts": {

"@sanity/block-content-to-react": "^2.0.7",
"@sanity/client": "^2.8.0",
"@sanity/groq-store": "^0.1.3",
"@sanity/image-url": "^0.140.22",
"groq": "^2.2.6",
"picosanity": "^2.3.0",
"use-deep-compare-effect": "^1.6.1"

@@ -36,0 +36,0 @@ },

89

README.md

@@ -8,3 +8,2 @@ # next-sanity

- Client-side live real-time preview for authenticated users
- Light-weight client for fetching data
- URL-helper for Sanity’s image pipeline

@@ -20,2 +19,3 @@ - Rich-text component for Portable Text

- [Limits](#limits)
- [Optimizing bundle size](#optimizing-bundle-size)
- [Usage](#usage)

@@ -45,12 +45,46 @@ - [Example: Minimal blog post template](#example-minimal-blog-post-template)

## Optimizing bundle size
The first version of `next-sanity` shipped with the [`picosanity`](https://github.com/rexxars/picosanity) client built in. This caused some confusion for people who wants not only to pull data from their Sanity.io content lake, but also send patches and mutations via API routes. Since `picosanity` only supported fetching content, it had a smaller bundle size than the full SDK.
You can leverage Next.js' treeshaking to avoid shipping unnecessary code to the browser. In order to do so, you first need to isolate the client configuration in its own file, and be sure to only use it inside of the data fetching functions (`getStaticProps`, `getServerProps`, and `getStaticPaths`) or in the function that goes into the API routes (`/pages/api/<your-serverless-function>.js`).
You can follow the approach from the official Next.js preview example:
1. Make a `/lib` folder and add `config.js`, `sanity.js`, and `sanity.server.js` to it
2. In `/lib/config.js`, add and export the `projectId`, `dataset`, `apiVersion`, and other client configurations
3. In `/lib/sanity.js`, import and export the configurated helper functions that you need in the client-side code (like `urlFor`, `usePreviewSubscription`, and `PortableText`)
4. In `/lib/sanity.server.js`, create the client(s) you need for interacting with your content in the datafetching functions and in serverless API routes.
Should you want to do queries from the client side but want to avoid bundling the entire `@sanity/client`, you can of course still install and use [picosanity](https://github.com/rexxars/picosanity) manually.
## Usage
It’s practical to set up a decicated file where you import and set up your client etc. Below is a comprehensive example of the different things you can set up.
It’s practical to set up a decicated files where you import and set up your client etc. Below is a comprehensive example of the different things you can set up.
```js
// lib/config.js
export const config = {
/**
* Find your project ID and dataset in `sanity.json` in your studio project.
* These are considered “public”, but you can use environment variables
* if you want differ between local dev and production.
*
* https://nextjs.org/docs/basic-features/environment-variables
**/
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
apiVersion: '2021-03-25',
/**
* Set useCdn to `false` if your application require the freshest possible
* data always (potentially slightly slower and a bit more expensive).
* Authenticated request (like preview) will always bypass the CDN
**/
useCdn: process.env.NODE_ENV === 'production',
}
```
```js
// lib/sanity.js
import {
groq,
createClient,
createImageUrlBuilder,

@@ -61,21 +95,4 @@ createPortableTextComponent,

} from 'next-sanity'
import {config} from './config'
const config = {
/**
* Find your project ID and dataset in `sanity.json` in your studio project.
* These are considered “public”, but you can use environment variables
* if you want differ between local dev and production.
*
* https://nextjs.org/docs/basic-features/environment-variables
**/
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
useCdn: process.env.NODE_ENV === 'production',
/**
* Set useCdn to `false` if your application require the freshest possible
* data always (potentially slightly slower and a bit more expensive).
* Authenticated request (like preview) will always bypass the CDN
**/
}
/**

@@ -85,3 +102,3 @@ * Set up a helper function for generating Image URLs with only the asset reference data in your documents.

**/
export const urlFor = source => createImageUrlBuilder(config).image(source)
export const urlFor = (source) => createImageUrlBuilder(config).image(source)

@@ -99,4 +116,14 @@ // Set up the live preview subscription hook

// Helper function for using the current logged in user account
export const useCurrentUser = createCurrentUserHook(config)
```
```js
// lib/sanity.server.js
import {createClient} from 'next-sanity'
import {config} from './config'
// Set up the client for fetching data in the getProps page functions
export const sanityClient = createClient(config)
// Set up a preview client with serverless authentication for drafts

@@ -111,5 +138,2 @@ export const previewClient = createClient({

export const getClient = (usePreview) => (usePreview ? previewClient : sanityClient)
// Helper function for using the current logged in user account
export const useCurrentUser = createCurrentUserHook(config)
```

@@ -126,8 +150,4 @@

import {groq} from 'next-sanity'
import {
getClient,
usePreviewSubscription,
urlFor,
PortableText
} from '../../lib/sanity'
import {getClient, usePreviewSubscription, urlFor, PortableText} from '../../lib/sanity'
import {getClient} from '../../lib/sanity.server'

@@ -156,3 +176,3 @@ const postQuery = groq`

params: {slug: data.post.slug},
initialData: data,
initialData: data.post,
enabled: preview,

@@ -170,5 +190,2 @@ })

<PortableText blocks={body} />
<aside>
</aside>
</article>

@@ -175,0 +192,0 @@ )

4

src/client.ts

@@ -1,6 +0,6 @@

import picoSanity from 'picosanity'
import sanityClient from '@sanity/client'
import {ClientConfig} from './types'
export function createClient(config: ClientConfig) {
return picoSanity(config)
return sanityClient(config)
}
dist/next-sanity.cjs.development.js.map

Sorry, the diff of this file is not supported yet

dist/next-sanity.cjs.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/next-sanity.esm.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc