Security News
vlt Debuts New JavaScript Package Manager and Serverless Registry at NodeConf EU
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
@sanity/preview-kit
Advanced tools
Sanity.io toolkit for building live-as-you-type content preview experiences. Write GROQ queries like @sanity/client and have them resolve in-memory, locally. Updates from Content Lake are streamed in real-time with sub-second latency.
Requires React 18, support for other libraries like Preact, Solid, Svelte, Vue etc is planned. For vanilla JS subscriptions you can use @sanity/groq-store directly.
npm i @sanity/preview-kit
yarn add @sanity/preview-kit
// pages/index.js
import { PreviewSuspense } from '@sanity/preview-kit'
import sanityClient from '@sanity/client'
import DataTable from 'components/DataTable'
import { lazy } from 'react'
const PreviewDataTable = lazy(() => import('components/PreviewDataTable'))
const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
export const getStaticProps = async ({ preview = false }) => {
if (preview) {
return { props: { preview } }
}
const client = sanityClient({
projectId,
dataset,
useCdn: false,
apiVersion: '2022-11-10',
})
const data = await client.fetch(`*[]`)
return { props: { preview, data } }
}
export default function IndexPage({ preview, data }) {
if (preview) {
return (
<PreviewSuspense fallback="Loading...">
<PreviewDataTable />
</PreviewSuspense>
)
}
return <DataTable data={data} />
}
// components/PreviewDataTable.js
import { definePreview } from '@sanity/preview-kit'
const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
const usePreview = definePreview({ projectId, dataset })
export default function PreviewDataTable() {
const data = usePreview(null, `*[]`)
return <DataTable data={data} />
}
This example have the added benefit that it works in non-chromium browsers like Safari. And without needing a Sanity authenticated session to exist on the origin.
This also means you need to protect your pages/api/preview
handler with a secret, since the token
can be used to query any data in your dataset. Only share preview links with people that you're ok with being able to see everything in your dataset.
// pages/index.js
import { PreviewSuspense } from '@sanity/preview-kit'
import sanityClient from '@sanity/client'
import DataTable from 'components/DataTable'
import { lazy } from 'react'
const PreviewDataTable = lazy(() => import('components/PreviewDataTable'))
const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
export const getStaticProps = async ({ preview = false, previewData = {} }) => {
if (preview) {
return { props: { preview, token: previewData.token } }
}
const client = sanityClient({
projectId,
dataset,
useCdn: false,
apiVersion: '2022-11-10',
})
const data = await client.fetch(`*[]`)
return { props: { preview, data } }
}
export default function IndexPage({ preview, data, token }) {
if (preview) {
return (
<PreviewSuspense fallback="Loading...">
<PreviewDataTable token={token} />
</PreviewSuspense>
)
}
return <DataTable data={data} />
}
// components/PreviewDataTable.js
import { definePreview } from '@sanity/preview-kit'
const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
const usePreview = definePreview({ projectId, dataset })
export default function PreviewDataTable({ token }) {
const data = usePreview(token, `*[]`)
return <DataTable data={data} />
}
// pages/api/preview.js
export default function preview(req, res) {
const secret = process.env.PREVIEW_SECRET
// Check the secret if it's provided, enables running preview mode locally before the env var is setup
if (secret && req.query.secret !== secret) {
return res.status(401).json({ message: 'Invalid secret' })
}
// This token should only have `viewer` access rights in https://manage.sanity.io
const token = process.env.SANITY_API_READ_TOKEN
if (!token) {
throw new TypeError(`Missing SANITY_API_READ_TOKEN`)
}
res.setPreviewData({ token })
res.writeHead(307, { Location: '/' })
res.end()
}
If you have access to the test studio and our Vercel Team, then:
npx vercel link && npx vercel env pull
npm run dev
which gives you the test Next app running on http://localhost:3000
.If you don't have access then you need to:
.env.local
(use .env.local.example
to get started).src/App.tsx
to update projectId
and dataset
.npm run dev
and test things on http://localhost:3000
.FAQs
General purpose utils for live content and visual editing
The npm package @sanity/preview-kit receives a total of 65,102 weekly downloads. As such, @sanity/preview-kit popularity was classified as popular.
We found that @sanity/preview-kit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 63 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.