Merge pull request #1539 from klembot/remove-tiny-uuid

Remove tiny-uuid

package.json

@@ -50,7 +50,6 @@
 		"scroll": "^3.0.1",
 		"segseg": "^1.0.0",
 		"semver": "^7.3.4",
-		"tiny-uuid": "^1.0.0",
 		"ua-parser-js": "^0.7.33",
 		"use-error-boundary": "^2.0.6"
 	},

src/externals.d.ts

@@ -12,8 +12,4 @@ declare module 'segseg' {
 		p3: SegSegVector,
 		p4: SegSegVector
 	): boolean;
-}
-
-declare module 'tiny-uuid' {
-	export default function (): string;
-}
+}

src/setupTests.ts

@@ -1,6 +1,7 @@
 import {toHaveNoViolations} from 'jest-axe';
 import {configure} from '@testing-library/dom';
 import '@testing-library/jest-dom';
+import {faker} from '@faker-js/faker';
 import 'jest-canvas-mock';
 
 // Always mock these files so that Jest doesn't see import.meta.
@@ -50,5 +51,9 @@ afterEach(() => delete (window as any).matchMedia);
 	}
 };
 
+// ... and jsdom doesn't implement the crypto module, which we use to generate UUIDs.
+
+(window as any).crypto.randomUUID = () => faker.string.uuid();
+
 window.Element.prototype.releasePointerCapture = () => {};
 window.Element.prototype.setPointerCapture = () => {};

src/store/persistence/electron-ipc/story-formats/load.ts

@@ -1,4 +1,3 @@
-import uuid from 'tiny-uuid';
 import {TwineElectronWindow} from '../../../../electron/shared';
 import {StoryFormatsState} from '../../../story-formats/story-formats.types';
 
@@ -16,7 +15,7 @@ export async function load(): Promise<StoryFormatsState> {
 	}
 
 	return storyFormats.map(data => ({
-		id: uuid(),
+		id: window.crypto.randomUUID(),
 		loadState: 'unloaded',
 		name: data.name,
 		selected: false,

src/store/persistence/local-storage/prefs/save.ts

@@ -1,4 +1,3 @@
-import uuid from 'tiny-uuid';
 import {PrefsState} from '../../../prefs';
 
 export function save(state: PrefsState) {
@@ -18,7 +17,7 @@ export function save(state: PrefsState) {
 	const ids: string[] = [];
 
 	for (const name in state) {
-		const id = uuid();
+		const id = window.crypto.randomUUID();
 
 		ids.push(id);
 		window.localStorage.setItem(

src/store/persistence/local-storage/story-formats/save.ts

@@ -1,13 +1,11 @@
-import uuid from 'tiny-uuid';
 import {StoryFormatsState} from '../../../story-formats/story-formats.types';
 
 export function save(state: StoryFormatsState) {
 	// Delete existing formats in local storage, since we aren't bothering to
 	// preserve ids.
 
-	const previouslySerialized = window.localStorage.getItem(
-		'twine-storyformats'
-	);
+	const previouslySerialized =
+		window.localStorage.getItem('twine-storyformats');
 
 	if (previouslySerialized) {
 		previouslySerialized.split(',').forEach(id => {
@@ -20,7 +18,7 @@ export function save(state: StoryFormatsState) {
 	const ids: string[] = [];
 
 	state.forEach(format => {
-		const id = uuid();
+		const id = window.crypto.randomUUID();
 
 		// We have to remove the `properties` property if it exists, as that is
 		// dynamically added when loading.

src/store/stories/action-creators/create-story.ts

@@ -1,5 +1,4 @@
 import {Thunk} from 'react-hook-thunk-reducer';
-import uuid from 'tiny-uuid';
 import {PrefsState} from '../../prefs';
 import {StoriesAction, StoriesState, Story} from '../stories.types';
 
@@ -11,7 +10,7 @@ export function createStory(
 	prefs: PrefsState,
 	props: Partial<Omit<Story, 'id'>> & Pick<Story, 'name'>
 ): Thunk<StoriesState, StoriesAction> {
-	const id = uuid();
+	const id = window.crypto.randomUUID();
 
 	if (props.name.trim() === '') {
 		throw new Error('Story name cannot be empty');

src/store/stories/action-creators/duplicate-story.ts

@@ -1,4 +1,3 @@
-import uuid from 'tiny-uuid';
 import {CreateStoryAction, Story} from '../stories.types';
 import {unusedName} from '../../../util/unused-name';
 
@@ -9,21 +8,21 @@ export function duplicateStory(
 	story: Story,
 	stories: Story[]
 ): CreateStoryAction {
-	const id = uuid();
-	
+	const id = window.crypto.randomUUID();
+
 	return {
 		type: 'createStory',
 		props: {
 			...story,
 			id,
-			ifid: uuid(),
+			ifid: window.crypto.randomUUID(),
 			name: unusedName(
 				story.name,
 				stories.map(story => story.name)
 			),
 			passages: story.passages.map(passage => ({
 				...passage,
-				id: uuid(),
+				id: window.crypto.randomUUID(),
 				story: id
 			}))
 		}

src/store/stories/reducer/create-passage.ts

@@ -1,4 +1,3 @@
-import uuid from 'tiny-uuid';
 import {passageDefaults} from '../defaults';
 import {Passage, Story, StoriesState} from '../stories.types';
 
@@ -35,7 +34,7 @@ export function createPassage(
 
 		const newPassage: Passage = {
 			...passageDefaults(),
-			id: uuid(),
+			id: window.crypto.randomUUID(),
 			...passageProps,
 			story: story.id
 		};

src/store/stories/reducer/create-story.ts

@@ -1,4 +1,3 @@
-import uuid from 'tiny-uuid';
 import {passageDefaults, storyDefaults} from '../defaults';
 import {Story, StoriesState} from '../stories.types';
 
@@ -21,9 +20,9 @@ export function createStory(state: StoriesState, storyProps: Partial<Story>) {
 	}
 
 	const story: Story = {
-		id: uuid(),
+		id: window.crypto.randomUUID(),
 		...storyDefaults(),
-		ifid: uuid().toUpperCase(),
+		ifid: window.crypto.randomUUID().toUpperCase(),
 		lastUpdate: new Date(),
 		passages: [],
 		tags: [],

src/store/stories/reducer/repair/repair-passage.ts

@@ -1,4 +1,3 @@
-import uuid from 'tiny-uuid';
 import {passageDefaults} from '../../defaults';
 import {Passage, Story} from '../../stories.types';
 
@@ -26,10 +25,10 @@ export function repairPassage(passage: Passage, parentStory: Story): Passage {
 	// Give the passage an ID if it has none.
 
 	if (typeof passage.id !== 'string' || passage.id === '') {
-		const newId = uuid();
+		const newId = window.crypto.randomUUID();
 
 		logRepair(passage, 'id', newId, 'was undefined or empty string');
-		repairs.id = uuid();
+		repairs.id = window.crypto.randomUUID();
 	}
 
 	// Apply default properties to the passage.
@@ -92,7 +91,7 @@ export function repairPassage(passage: Passage, parentStory: Story): Passage {
 			return otherPassage.id === passage.id;
 		})
 	) {
-		const newId = uuid();
+		const newId = window.crypto.randomUUID();
 
 		logRepair(
 			passage,

src/store/stories/reducer/repair/repair-story.ts

@@ -1,5 +1,4 @@
 import {satisfies} from 'semver';
-import uuid from 'tiny-uuid';
 import {Story} from '../../stories.types';
 import {storyDefaults} from '../../defaults';
 import {StoryFormat} from '../../../story-formats';
@@ -34,7 +33,7 @@ export function repairStory(
 	// Give the story an ID if it has none.
 
 	if (typeof story.id !== 'string' || story.id === '') {
-		const newId = uuid();
+		const newId = window.crypto.randomUUID();
 
 		logRepair(story, 'id', newId, 'was bad type or empty string');
 		repairs.id = newId;
@@ -43,7 +42,7 @@ export function repairStory(
 	// Give the story an IFID if it has none.
 
 	if (typeof story.ifid !== 'string' || story.id === '') {
-		const newIfid = uuid();
+		const newIfid = window.crypto.randomUUID();
 
 		logRepair(story, 'ifid', newIfid, 'was bad type or empty string');
 		repairs.ifid = newIfid;
@@ -145,7 +144,7 @@ export function repairStory(
 			return otherStory.id === story.id;
 		})
 	) {
-		const newId = uuid();
+		const newId = window.crypto.randomUUID();
 
 		logRepair(story, 'id', newId, "conflicted with another story's ID");
 		repairs.id = newId;

src/store/story-formats/reducer.ts

@@ -1,4 +1,3 @@
-import uuid from 'tiny-uuid';
 import {builtins} from './defaults';
 import {
 	StoryFormat,
@@ -51,7 +50,7 @@ export const reducer: React.Reducer<StoryFormatsState, StoryFormatsAction> = (
 					);
 					result.push({
 						...builtinFormat,
-						id: uuid(),
+						id: window.crypto.randomUUID(),
 						loadState: 'unloaded',
 						selected: false,
 						userAdded: false
@@ -72,7 +71,10 @@ export const reducer: React.Reducer<StoryFormatsState, StoryFormatsAction> = (
 				return state;
 			}
 
-			return [...state, {...action.props, id: uuid(), loadState: 'unloaded'}];
+			return [
+				...state,
+				{...action.props, id: window.crypto.randomUUID(), loadState: 'unloaded'}
+			];
 
 		case 'delete':
 			return state.filter(f => f.id !== action.id);

src/store/story-formats/story-formats-context.tsx

@@ -1,4 +1,3 @@
-import uuid from 'tiny-uuid';
 import * as React from 'react';
 import useThunkReducer from 'react-hook-thunk-reducer';
 import {usePersistence} from '../persistence/use-persistence';
@@ -14,18 +13,17 @@ import {reducer} from './reducer';
 
 const defaultBuiltins: StoryFormat[] = builtins().map(f => ({
 	...f,
-	id: uuid(),
+	id: window.crypto.randomUUID(),
 	loadState: 'unloaded',
 	selected: false,
 	userAdded: false
 }));
 
-export const StoryFormatsContext = React.createContext<StoryFormatsContextProps>(
-	{
+export const StoryFormatsContext =
+	React.createContext<StoryFormatsContextProps>({
 		dispatch: () => {},
 		formats: []
-	}
-);
+	});
 
 StoryFormatsContext.displayName = 'StoryFormats';
 
@@ -35,22 +33,20 @@ export const useStoryFormatsContext = () =>
 export const StoryFormatsContextProvider: React.FC = props => {
 	const {storyFormats} = usePersistence();
 	const {reportError} = useStoreErrorReporter();
-	const persistedReducer: React.Reducer<
-		StoryFormatsState,
-		StoryFormatsAction
-	> = React.useCallback(
-		(state, action) => {
-			const newState = reducer(state, action);
-
-			try {
-				storyFormats.saveMiddleware(newState, action);
-			} catch (error) {
-				reportError(error as Error, 'store.errors.cantPersistStoryFormats');
-			}
-			return newState;
-		},
-		[reportError, storyFormats]
-	);
+	const persistedReducer: React.Reducer<StoryFormatsState, StoryFormatsAction> =
+		React.useCallback(
+			(state, action) => {
+				const newState = reducer(state, action);
+
+				try {
+					storyFormats.saveMiddleware(newState, action);
+				} catch (error) {
+					reportError(error as Error, 'store.errors.cantPersistStoryFormats');
+				}
+				return newState;
+			},
+			[reportError, storyFormats]
+		);
 
 	const [state, dispatch] = useThunkReducer(persistedReducer, defaultBuiltins);
 

src/util/import.ts

@@ -6,7 +6,6 @@
 // the filesystem into local storage, and the app can't begin until it's done.
 
 import defaults from 'lodash/defaults';
-import uuid from 'tiny-uuid';
 import {passageDefaults, storyDefaults, Passage, Story} from '../store/stories';
 
 /**
@@ -70,8 +69,8 @@ function domToObject(storyEl: Element): ImportedStory {
 	const startPassagePid = storyEl.getAttribute('startnode');
 	let startPassageId: string | undefined = undefined;
 	const story: ImportedStory = {
-		ifid: storyEl.getAttribute('ifid') ?? uuid(),
-		id: uuid(),
+		ifid: storyEl.getAttribute('ifid') ?? window.crypto.randomUUID(),
+		id: window.crypto.randomUUID(),
 		lastUpdate: undefined,
 		name: storyEl.getAttribute('name') ?? undefined,
 		storyFormat: storyEl.getAttribute('format') ?? undefined,
@@ -96,7 +95,7 @@ function domToObject(storyEl: Element): ImportedStory {
 			return {...result, [tagName]: el.getAttribute('color')};
 		}, {}),
 		passages: query(storyEl, selectors.passageData).map(passageEl => {
-			const id = uuid();
+			const id = window.crypto.randomUUID();
 			const position = parseDimensions(passageEl.getAttribute('position'));
 			const size = parseDimensions(passageEl.getAttribute('size'));
 
@@ -141,7 +140,11 @@ export function importStories(
 		// Merge in defaults. We can't use object spreads here because undefined
 		// values would override defaults.
 
-		const story: Story = defaults(importedStory, {id: uuid()}, storyDefaults());
+		const story: Story = defaults(
+			importedStory,
+			{id: window.crypto.randomUUID()},
+			storyDefaults()
+		);
 
 		// Override the last update as requested.