feat: supply `version` param when installing libraries (#4305)

src/components/LibraryMenuItems.tsx

@@ -21,6 +21,7 @@ import { ToolButton } from "./ToolButton";
 import { Tooltip } from "./Tooltip";
 
 import "./LibraryMenuItems.scss";
+import { VERSIONS } from "../constants";
 
 const LibraryMenuItems = ({
   libraryItems,
@@ -293,7 +294,9 @@ const LibraryMenuItems = ({
         <a
           href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
             window.name || "_blank"
-          }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}`}
+          }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}&version=${
+            VERSIONS.excalidrawLibrary
+          }`}
           target="_excalidraw_libraries"
         >
           {t("labels.libraries")}

src/components/PublishLibrary.tsx

@@ -8,7 +8,7 @@ import { ToolButton } from "./ToolButton";
 
 import { AppState, LibraryItems, LibraryItem } from "../types";
 import { exportToBlob } from "../packages/utils";
-import { EXPORT_DATA_TYPES, EXPORT_SOURCE } from "../constants";
+import { EXPORT_DATA_TYPES, EXPORT_SOURCE, VERSIONS } from "../constants";
 import { ExportedLibraryData } from "../data/types";
 
 import "./PublishLibrary.scss";
@@ -181,7 +181,7 @@ const PublishLibrary = ({
 
     const libContent: ExportedLibraryData = {
       type: EXPORT_DATA_TYPES.excalidrawLibrary,
-      version: 2,
+      version: VERSIONS.excalidrawLibrary,
       source: EXPORT_SOURCE,
       libraryItems: clonedLibItems,
     };

src/constants.ts

@@ -176,3 +176,8 @@ export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;
 export const SVG_NS = "http://www.w3.org/2000/svg";
 
 export const ENCRYPTION_KEY_BITS = 128;
+
+export const VERSIONS = {
+  excalidraw: 2,
+  excalidrawLibrary: 2,
+} as const;

src/data/json.ts

@@ -1,6 +1,11 @@
 import { fileOpen, fileSave } from "./filesystem";
 import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState";
-import { EXPORT_DATA_TYPES, EXPORT_SOURCE, MIME_TYPES } from "../constants";
+import {
+  EXPORT_DATA_TYPES,
+  EXPORT_SOURCE,
+  MIME_TYPES,
+  VERSIONS,
+} from "../constants";
 import { clearElementsForDatabase, clearElementsForExport } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles, LibraryItems } from "../types";
@@ -42,7 +47,7 @@ export const serializeAsJSON = (
 ): string => {
   const data: ExportedDataState = {
     type: EXPORT_DATA_TYPES.excalidraw,
-    version: 2,
+    version: VERSIONS.excalidraw,
     source: EXPORT_SOURCE,
     elements:
       type === "local"
@@ -121,7 +126,7 @@ export const isValidLibrary = (json: any) => {
 export const saveLibraryAsJSON = async (libraryItems: LibraryItems) => {
   const data: ExportedLibraryData = {
     type: EXPORT_DATA_TYPES.excalidrawLibrary,
-    version: 2,
+    version: VERSIONS.excalidrawLibrary,
     source: EXPORT_SOURCE,
     libraryItems,
   };

src/data/types.ts

@@ -1,6 +1,7 @@
 import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles, LibraryItems, LibraryItems_v1 } from "../types";
 import type { cleanAppStateForExport } from "../appState";
+import { VERSIONS } from "../constants";
 
 export interface ExportedDataState {
   type: string;
@@ -24,7 +25,7 @@ export interface ImportedDataState {
 
 export interface ExportedLibraryData {
   type: string;
-  version: 2;
+  version: typeof VERSIONS.excalidrawLibrary;
   source: string;
   libraryItems: LibraryItems;
 }

src/tests/fixtures/diagramFixture.ts

@@ -1,3 +1,4 @@
+import { VERSIONS } from "../../constants";
 import {
   diamondFixture,
   ellipseFixture,
@@ -6,7 +7,7 @@ import {
 
 export const diagramFixture = {
   type: "excalidraw",
-  version: 2,
+  version: VERSIONS.excalidraw,
   source: "https://excalidraw.com",
   elements: [diamondFixture, ellipseFixture, rectangleFixture],
   appState: {