Display an error dialog in Sanity Studio v2 when a v3 plugin has been installed. 

bjoerge

rexxars

rbotten

mariuslundgard

kmelve

stipsan

sanity-io

skogsmaskin

vicbergquist

atombender

dcilke

evenw

fredcarlsen

hermanw

jorn_georg

judofyr

mikolajsanity

obliadp

radhe_sanity

sgulseth

simenss

svirs

tonina

robinpyon

snorreeb

rankers

simeonsanity

ritasdias

rubioz

michael-sanity

vincentquigley

mattcraig

nina.andal

joneidejohnsen

@sanity/incompatible-plugin

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {

    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {

    var desc = Object.getOwnPropertyDescriptor(m, k);

    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {

      desc = { enumerable: true, get: function() { return m[k]; } };

var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {

    Object.defineProperty(o, "default", { enumerable: true, value: v });

var __importStar = (this && this.__importStar) || function (mod) {

    if (mod && mod.__esModule) return mod;

    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);

var __read = (this && this.__read) || function (o, n) {

    var m = typeof Symbol === "function" && o[Symbol.iterator];

        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);

    catch (error) { e = { error: error }; }

            if (r && !r.done && (m = i["return"])) m.call(i);

        finally { if (e) throw e.error; }

var __importDefault = (this && this.__importDefault) || function (mod) {

    return (mod && mod.__esModule) ? mod : { "default": mod };

Object.defineProperty(exports, "__esModule", { value: true });

var react_1 = __importStar(require("react"));

var react_copy_to_clipboard_1 = require("react-copy-to-clipboard");

var auto_id_1 = require("@reach/auto-id");

var styled_components_1 = __importDefault(require("styled-components"));

var CopyButton = (0, styled_components_1.default)(ui_1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: none;\n  border: none;\n  box-shadow: none;\n  height: 35px;\n\n  &:hover {\n    background: white;\n  }\n"], ["\n  background: none;\n  border: none;\n  box-shadow: none;\n  height: 35px;\n\n  &:hover {\n    background: white;\n  }\n"])));

    var pluginsWithLinks = plugins.filter(function (p) { return !!p.sanityExchangeUrl; });

    return (react_1.default.createElement(ui_1.ThemeProvider, { theme: ui_1.studioTheme },

        react_1.default.createElement(ui_1.Dialog, { id: id || '', header: "Incompatible plugin".concat(plugins.length > 1 ? 's' : ''), width: 1 },

            react_1.default.createElement(ui_1.Card, { padding: 4 },

                react_1.default.createElement(ui_1.Stack, { space: 5 },

                    react_1.default.createElement(ui_1.Stack, { space: 4 },

                        react_1.default.createElement(ui_1.Box, null,

                            react_1.default.createElement(ui_1.Text, null,

                                "The following",

                                plugins.length > 1 ? ' plugins are ' : ' plugin is ',

                                " incompatible with this Sanity Studio (V2):")),

                                " incompatible with this Sanity Studio v2:")),

                        plugins.map(function (p) { return (react_1.default.createElement(ui_1.Card, { key: p.name },

                            react_1.default.createElement(ui_1.Stack, { space: 2 },

                                react_1.default.createElement(ui_1.Text, null,

                                    react_1.default.createElement("strong", null,

                                        react_1.default.createElement("span", { style: { color: '#C3362C' } }, p.name))),

                                    "Version: ",

                                    react_1.default.createElement("span", { style: { color: '#C3362C' } }, p.versions.v3))))); }),

                        react_1.default.createElement(ui_1.Text, null,

                            plugins.length > 1 ? 'These are' : 'It is',

                            " built for",

                            react_1.default.createElement("a", { href: "https://www.sanity.io/studio-v3" }, "Sanity Studio V3"),

                            react_1.default.createElement("a", { href: "https://www.sanity.io/studio-v3" }, "Sanity Studio v3"),

                    react_1.default.createElement(ui_1.Card, null,

                        react_1.default.createElement(ui_1.Stack, { space: 4 },

                            react_1.default.createElement(ui_1.Heading, { size: 2 }, "Resolve the issue"),

                            react_1.default.createElement(DowngradablePlugins, { plugins: plugins }),

                            react_1.default.createElement(RemovePlugins, { plugins: plugins }),

                            react_1.default.createElement(ui_1.Text, null, "... and then restart the Studio."))),

                        react_1.default.createElement(ui_1.Heading, { size: 1 }, "More information"),

                        pluginsWithLinks.length > 0 && (react_1.default.createElement(ui_1.Stack, { space: 2 }, pluginsWithLinks.map(function (p) { return (react_1.default.createElement(react_1.default.Fragment, { key: p.name },

                                react_1.default.createElement("a", { href: p.sanityExchangeUrl }, "Sanity Exchange")))); }))),

                            react_1.default.createElement("a", { href: "https://beta.sanity.io/docs/platform/studio/v2-to-v3" }, "About Sanity Studio versions"))))))));

exports.IncompatiblePlugins = IncompatiblePlugins;

    var _a = __read(useCopy(), 2), copied = _a[0], handleCopy = _a[1];

    var plugins = props.plugins.filter(function (p) { return !!p.versions.v2; });

    var yarnCommand = "yarn add ".concat(plugins.map(function (p) { return "".concat(p.name, "@").concat(p.versions.v2); }).join(' '));

    return (react_1.default.createElement(react_1.default.Fragment, null,

        react_1.default.createElement(ui_1.Text, null,

            plugins.length > 1 ? 's' : '',

            " by running this command in the Studio directory:"),

        react_1.default.createElement(ui_1.Card, { shadow: 1, padding: 4, style: { background: '#F1F3F6' } },

            react_1.default.createElement(ui_1.Flex, { gap: 4 },

                react_1.default.createElement(ui_1.Box, { flex: 1 },

                    react_1.default.createElement(ui_1.Code, { style: {

                            color: '#101112FF',

                            overflowX: 'auto',

                            height: '2.5em',

                            display: 'flex',

                        } }, yarnCommand)),

                react_1.default.createElement(react_copy_to_clipboard_1.CopyToClipboard, { text: yarnCommand, onCopy: handleCopy },

                    react_1.default.createElement(CopyButton, { title: "Copy to clipboard", icon: copied ? icons_1.CheckmarkIcon : icons_1.ClipboardIcon, mode: "bleed" }))))));

    var plugins = props.plugins.filter(function (p) { return !p.versions.v2; });

    var uninstallCommand = plugins.map(function (p) { return "sanity uninstall ".concat(p.name); }).join(' && ');

                        } }, uninstallCommand)),

                react_1.default.createElement(react_copy_to_clipboard_1.CopyToClipboard, { text: uninstallCommand, onCopy: handleCopy },

    var _a = __read((0, react_1.useState)(false), 2), copied = _a[0], setCopied = _a[1];

    var handleCopy = (0, react_1.useCallback)(function () {

        var timeout = setTimeout(function () {

//# sourceMappingURL=IncompatiblePlugin.js.map

  "description": "Display an error dialog in Sanity Studio v2 when a v3 plugin has been installed.",

  "homepage": "https://github.com/sanity-io/incompatible-plugin#readme",

    "url": "https://github.com/sanity-io/incompatible-plugin/issues"

    "url": "git@github.com:sanity-io/incompatible-plugin.git"

  "author": "Sanity.io <hello@sanity.io>",

    "format": "prettier --ignore-path .gitignore -w .",

    "@commitlint/config-conventional": "^17.1.0",

    "@sanity/semantic-release-preset": "^2.0.1",

    "@types/react-copy-to-clipboard": "^5.0.4",

    "@types/styled-components": "^5.1.26",

    "@typescript-eslint/eslint-plugin": "^5.38.1",

    "@typescript-eslint/parser": "^5.38.1",

    "eslint-plugin-react-hooks": "^4.6.0",

    "prettier-plugin-packagejson": "^2.2.18",

Small helper library that will display a warning in Sanity Studio v2 when a plugin built for Studio v3 is installed.

In your plugin root directory, create two files:

const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')

const {name, version} = require('./package.json')

export default showIncompatiblePluginDialog({

    // Optional: If there is not v2 version of your plugin, v2 can be omitted

  // Optional: Feel free to put this as field in package.json and import it alongside name and version above

  sanityExchangeUrl: 'https://www.sanity.io/plugins/<plugin-on-sanity-exchanged>',

      "implements": "part:@sanity/base/sanity-root",

Add these to `files` in the plugin `package.json` alongside anything else already there, for instance:

  "files": ["src", "lib", "v2-incompatible.js", "sanity.json"]

If your v3 plugin gets installed in a V2 studio by mistake, a dialog will display how to fix it.

If your v3 plugin gets installed in a v2 studio by mistake, a dialog will display how to fix it.

Run ["CI & Release" workflow](https://github.com/sanity-io/incompatible-plugin/actions/workflows/main.yml).

Make sure to select the main branch and check "Release new version".

Semantic release will only release on configured branches, so it is safe to run release on any branch.

		{
		"name": "@sanity/incompatible-plugin",
		"version": "1.0.2",
		"version": "1.0.3",
		"description": "Display an error dialog in Sanity Studio v2 when a v3 plugin has been installed.",
		@@ -5,0 +5,0 @@ "keywords": [

		@@ -70,3 +70,3 @@ "use strict";
		plugins.length > 1 ? ' plugins are ' : ' plugin is ',
		" incompatible with this Sanity Studio (V2):")),
		" incompatible with this Sanity Studio v2:")),
		plugins.map(function (p) { return (react_1.default.createElement(ui_1.Card, { key: p.name },
		@@ -84,3 +84,3 @@ react_1.default.createElement(ui_1.Stack, { space: 2 },
		' ',
		react_1.default.createElement("a", { href: "https://www.sanity.io/studio-v3" }, "Sanity Studio V3"),
		react_1.default.createElement("a", { href: "https://www.sanity.io/studio-v3" }, "Sanity Studio v3"),
		".")),
		@@ -87,0 +87,0 @@ react_1.default.createElement(ui_1.Card, null,

		@@ -62,3 +62,3 @@ # @sanity/incompatible-plugin

		If your v3 plugin gets installed in a V2 studio by mistake, a dialog will display how to fix it.
		If your v3 plugin gets installed in a v2 studio by mistake, a dialog will display how to fix it.

		@@ -65,0 +65,0 @@ ## Develop

Worsened metrics