synapse-storage 2.1.0

package/dist/_examples/example2.js

@@ -0,0 +1,81 @@
+"use strict";
+// 'use client'
+//
+// import { useEffect, useState } from 'react'
+// import { broadcastMiddleware, IndexedDBStorage, LocalStorage, MemoryStorage } from 'synapse'
+//
+// interface Counter {
+//   value: number
+// }
+//
+// const counter1 = await new MemoryStorage<Counter>({
+//   name: 'counter1',
+//   initialState: { value: 1 },
+// }).initialize()
+//
+// const counter2 = await new IndexedDBStorage<Counter>({
+//   name: 'counter2',
+//   options: {
+//     dbVersion: 2,
+//     storeName: 'counter23',
+//     dbName: 'counter23',
+//   },
+//   initialState: { value: 2 },
+// }).initialize()
+//
+// const counter3 = await new LocalStorage<Counter>({
+//   name: 'counter3',
+//   initialState: { value: 3 },
+// }).initialize()
+//
+// // Подписка на все изменения в данном хранилище
+// counter2.subscribeToAll((event) => {
+//   const { key, type, value } = event
+//   console.log('counter1.subscribeToAll', type, key, value)
+// })
+// // Подписка на конкретное значение (первый параметр - колбэк)
+// counter2.subscribe((s) => s.value, (event) => {
+//   console.log('counter1.subscribe--1', event)
+// })
+// // Подписка на конкретное значение (первый параметр - путь до свойства)
+// counter2.subscribe('value', (event) => {
+//   console.log('counter1.subscribe--2', event)
+// })
+//
+// // React компонент
+// export function TestCounter() {
+//   const [counterValue1, setCounterValue1] = useState(0)
+//   const [counterValue2, setCounterValue2] = useState(0)
+//   const [counterValue3, setCounterValue3] = useState(0)
+//
+//   useEffect(() => {
+//     counter1.subscribe('value', setCounterValue1)
+//   }, [])
+//   useEffect(() => {
+//     counter2.subscribe((s) => s.value, setCounterValue2)
+//   }, [])
+//   useEffect(() => {
+//     counter3.subscribe((s) => s.value, setCounterValue3)
+//   }, [])
+//
+//   const updateCounter1 = async () => {
+//     await counter1.update((state) => {
+//       state.value++
+//     })
+//   }
+//   const updateCounter2 = async () => {
+//     await counter2.set('value', counterValue2 + 1)
+//   }
+//   const updateCounter3 = async () => {
+//     await counter3.update((state) => state.value++)
+//   }
+//
+//   return (
+//     <div style={{ display: 'flex', gap: '50px'}}>
+//         <button onClick={updateCounter1}>{counterValue1}</button>
+//         <button onClick={updateCounter2}>{counterValue2}</button>
+//         <button onClick={updateCounter3}>{counterValue3}</button>
+//     </div>
+//   )
+// }
+//# sourceMappingURL=example2.js.map

package/dist/_examples/example2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example2.js","sourceRoot":"","sources":["../../src/_examples/example2.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,EAAE;AACF,8CAA8C;AAC9C,+FAA+F;AAC/F,EAAE;AACF,sBAAsB;AACtB,kBAAkB;AAClB,IAAI;AACJ,EAAE;AACF,sDAAsD;AACtD,sBAAsB;AACtB,gCAAgC;AAChC,kBAAkB;AAClB,EAAE;AACF,yDAAyD;AACzD,sBAAsB;AACtB,eAAe;AACf,oBAAoB;AACpB,8BAA8B;AAC9B,2BAA2B;AAC3B,OAAO;AACP,gCAAgC;AAChC,kBAAkB;AAClB,EAAE;AACF,qDAAqD;AACrD,sBAAsB;AACtB,gCAAgC;AAChC,kBAAkB;AAClB,EAAE;AACF,kDAAkD;AAClD,uCAAuC;AACvC,uCAAuC;AACvC,6DAA6D;AAC7D,KAAK;AACL,gEAAgE;AAChE,kDAAkD;AAClD,gDAAgD;AAChD,KAAK;AACL,0EAA0E;AAC1E,2CAA2C;AAC3C,gDAAgD;AAChD,KAAK;AACL,EAAE;AACF,qBAAqB;AACrB,kCAAkC;AAClC,0DAA0D;AAC1D,0DAA0D;AAC1D,0DAA0D;AAC1D,EAAE;AACF,sBAAsB;AACtB,oDAAoD;AACpD,WAAW;AACX,sBAAsB;AACtB,2DAA2D;AAC3D,WAAW;AACX,sBAAsB;AACtB,2DAA2D;AAC3D,WAAW;AACX,EAAE;AACF,yCAAyC;AACzC,yCAAyC;AACzC,sBAAsB;AACtB,SAAS;AACT,MAAM;AACN,yCAAyC;AACzC,qDAAqD;AACrD,MAAM;AACN,yCAAyC;AACzC,sDAAsD;AACtD,MAAM;AACN,EAAE;AACF,aAAa;AACb,oDAAoD;AACpD,oEAAoE;AACpE,oEAAoE;AACpE,oEAAoE;AACpE,aAAa;AACb,MAAM;AACN,IAAI"}

package/dist/_examples/example3.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=example3.d.ts.map

package/dist/_examples/example3.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"example3.d.ts","sourceRoot":"","sources":["../../src/_examples/example3.tsx"],"names":[],"mappings":""}

package/dist/_examples/example3.js

@@ -0,0 +1,99 @@
+"use strict";
+// 'use client'
+//
+// import { useEffect, useState } from 'react'
+// import { broadcastMiddleware, IndexedDBStorage, LocalStorage, MemoryStorage } from 'synapse'
+//
+// interface Counter {
+//   value: number
+// }
+//
+// const counter1 = await new MemoryStorage<Counter>({
+//   name: 'counter1',
+//   initialState: { value: 1 },
+//   middlewares: (getDefaultMiddleware) => {
+//     const { shallowCompare, batching } = getDefaultMiddleware()
+//     return [
+//       broadcastMiddleware({
+//         storageName: 'counter1',
+//         storageType: 'memory',
+//       }),
+//       shallowCompare(),
+//       batching(),
+//     ]
+//   },
+// }).initialize()
+//
+// const counter2 = await new IndexedDBStorage<Counter>({
+//   name: 'counter2',
+//   options: {
+//     dbVersion: 2,
+//     storeName: 'counter23',
+//     dbName: 'counter23',
+//   },
+//   initialState: { value: 2 },
+// }).initialize()
+//
+// const counter3 = await new LocalStorage<Counter>({
+//   name: 'counter3',
+//   initialState: { value: 3 },
+// }).initialize()
+//
+// // Подписка на все изменения в данном хранилище
+// // counter1.subscribeToAll((event) => {
+// //   const { key, type, value } = event
+// //   console.log('counter1.subscribeToAll', type, key, value)
+// // })
+// // // Подписка на конкретное значение (первый параметр - колбэк)
+// // counter1.subscribe((s) => s.value, (event) => {
+// //   console.log('counter1.subscribe--1', event)
+// // })
+// // // Подписка на конкретное значение (первый параметр - путь до свойства)
+// // counter1.subscribe('value', (event) => {
+// //   console.log('counter1.subscribe--2', event)
+// // })
+//
+// // React компонент
+// export function TestCounter2() {
+//   const [counterValue1, setCounterValue1] = useState(0)
+//   const [counterValue2, setCounterValue2] = useState(0)
+//   const [counterValue3, setCounterValue3] = useState(0)
+//
+//   useEffect(() => {
+//     const d = counter1.subscribe('value', (v) => {
+//       console.log('ppppp')
+//       setCounterValue1(v)
+//     })
+//
+//     return () => {
+//       d()
+//     }
+//   }, [])
+//   useEffect(() => {
+//     counter2.subscribe((s) => s.value, setCounterValue2)
+//   }, [])
+//   useEffect(() => {
+//     counter3.subscribe((s) => s.value, setCounterValue3)
+//   }, [])
+//
+//   const updateCounter1 = async () => {
+//     await counter1.update((state) => {
+//       state.value++
+//     })
+//   }
+//   const updateCounter2 = async () => {
+//     await counter2.set('value', counterValue2 + 1)
+//   }
+//   const updateCounter3 = async () => {
+//     await counter3.update((state) => state.value++)
+//   }
+//
+//   return (
+//     <div style={{ display: 'flex', gap: '50px' }}>
+//       <button onClick={updateCounter1}>{counterValue1}</button>
+//       <button onClick={updateCounter2}>{counterValue2}</button>
+//       <button onClick={updateCounter3}>{counterValue3}</button>
+//     </div>
+//   )
+// }
+//# sourceMappingURL=example3.js.map

package/dist/_examples/example3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example3.js","sourceRoot":"","sources":["../../src/_examples/example3.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,EAAE;AACF,8CAA8C;AAC9C,+FAA+F;AAC/F,EAAE;AACF,sBAAsB;AACtB,kBAAkB;AAClB,IAAI;AACJ,EAAE;AACF,sDAAsD;AACtD,sBAAsB;AACtB,gCAAgC;AAChC,6CAA6C;AAC7C,kEAAkE;AAClE,eAAe;AACf,8BAA8B;AAC9B,mCAAmC;AACnC,iCAAiC;AACjC,YAAY;AACZ,0BAA0B;AAC1B,oBAAoB;AACpB,QAAQ;AACR,OAAO;AACP,kBAAkB;AAClB,EAAE;AACF,yDAAyD;AACzD,sBAAsB;AACtB,eAAe;AACf,oBAAoB;AACpB,8BAA8B;AAC9B,2BAA2B;AAC3B,OAAO;AACP,gCAAgC;AAChC,kBAAkB;AAClB,EAAE;AACF,qDAAqD;AACrD,sBAAsB;AACtB,gCAAgC;AAChC,kBAAkB;AAClB,EAAE;AACF,kDAAkD;AAClD,0CAA0C;AAC1C,0CAA0C;AAC1C,gEAAgE;AAChE,QAAQ;AACR,mEAAmE;AACnE,qDAAqD;AACrD,mDAAmD;AACnD,QAAQ;AACR,6EAA6E;AAC7E,8CAA8C;AAC9C,mDAAmD;AACnD,QAAQ;AACR,EAAE;AACF,qBAAqB;AACrB,mCAAmC;AACnC,0DAA0D;AAC1D,0DAA0D;AAC1D,0DAA0D;AAC1D,EAAE;AACF,sBAAsB;AACtB,qDAAqD;AACrD,6BAA6B;AAC7B,4BAA4B;AAC5B,SAAS;AACT,EAAE;AACF,qBAAqB;AACrB,YAAY;AACZ,QAAQ;AACR,WAAW;AACX,sBAAsB;AACtB,2DAA2D;AAC3D,WAAW;AACX,sBAAsB;AACtB,2DAA2D;AAC3D,WAAW;AACX,EAAE;AACF,yCAAyC;AACzC,yCAAyC;AACzC,sBAAsB;AACtB,SAAS;AACT,MAAM;AACN,yCAAyC;AACzC,qDAAqD;AACrD,MAAM;AACN,yCAAyC;AACzC,sDAAsD;AACtD,MAAM;AACN,EAAE;AACF,aAAa;AACb,qDAAqD;AACrD,kEAAkE;AAClE,kEAAkE;AAClE,kEAAkE;AAClE,aAAa;AACb,MAAM;AACN,IAAI"}

package/dist/_examples/example4.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=example4.d.ts.map

package/dist/_examples/example4.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"example4.d.ts","sourceRoot":"","sources":["../../src/_examples/example4.tsx"],"names":[],"mappings":""}

package/dist/_examples/example4.js

@@ -0,0 +1,172 @@
+"use strict";
+// import React, { useEffect, useState } from 'react'
+// import { broadcastMiddleware, MemoryStorage } from 'synapse'
+//
+// // Типы данных
+// interface Counter {
+//   value: number;
+//   lastUpdated?: Date;
+// }
+//
+// // Создаем хранилища
+// const counter1 = await new MemoryStorage<Counter>({
+//   name: 'counter1',
+//   initialState: { value: 0 },
+//   middlewares: () => [
+//     broadcastMiddleware({
+//       storageName: 'counter1',
+//       storageType: 'memory',
+//     }),
+//   ],
+// }).initialize()
+//
+// const counter2 = await new MemoryStorage<Counter>({
+//   name: 'counter2',
+//   initialState: { value: 0 },
+//   middlewares: (getDefaultMiddleware) => {
+//     const { shallowCompare } = getDefaultMiddleware()
+//     return [
+//       shallowCompare(),
+//     ]
+//   },
+// }).initialize()
+//
+// counter1.subscribe((s) => s.value, (v) => {
+//   console.log('1_1_1', v)
+// })
+//
+// const counter3 = await new MemoryStorage<Counter>({
+//   name: 'counter3',
+//   initialState: { value: 10 },
+//   middlewares: (getDefaultMiddleware) => {
+//     const { batching } = getDefaultMiddleware()
+//     return [
+//       batching({
+//         batchSize: 4,
+//         batchDelay: 200,
+//       }),
+//     ]
+//   },
+// }).initialize()
+//
+// // Компонент для демонстрации работы middleware
+//
+// export const Example4 = React.memo(() => {
+//   const [counter1Value, setCounter1Value] = useState(0)
+//   const [counter2Value, setCounter2Value] = useState(0)
+//   const [counter3Value, setCounter3Value] = useState(0)
+//
+//   useEffect(() => {
+//     // Подписываемся на изменения counter1
+//     const unsubscribe1 = counter1.subscribe((s) => s.value, (v) => {
+//       console.log('1')
+//       setCounter1Value(v)
+//     })
+//
+//     // Отписываемся при размонтировании
+//     return () => {
+//       unsubscribe1()
+//     }
+//   }, [])
+//
+//   useEffect(() => {
+//     // Подписываемся на изменения counter1
+//     const unsubscribe2 = counter2.subscribe((s) => s.value, (v) => {
+//       console.log('2')
+//       setCounter2Value(v)
+//     })
+//
+//     // Отписываемся при размонтировании
+//     return () => {
+//       unsubscribe2()
+//     }
+//   }, [])
+//   useEffect(() => {
+//     // Подписываемся на изменения counter1
+//     const unsubscribe3 = counter3.subscribe((s) => s.value, (v) => {
+//       console.log('3', v)
+//       setCounter3Value(v)
+//     })
+//
+//     // Отписываемся при размонтировании
+//     return () => {
+//       unsubscribe3()
+//     }
+//   }, [])
+//
+//   // Функции для обновления счетчиков
+//   const updateCounter1 = async () => {
+//     await counter1.update((state) => {
+//       state.value++
+//     })
+//   }
+//
+//   const updateCounter2 = async () => {
+//     await counter2.update((state) => {
+//       state.value = 100
+//     })
+//     await counter2.update((state) => {
+//       state.value = 100
+//     })
+//     await counter2.update((state) => {
+//       state.value = 100
+//     })
+//   }
+//
+//   const updateCounter3 = async () => {
+//     // Отправка нескольких обновлений подряд - должны быть объединены batching
+//     await counter3.set('value', counter3Value + 1)
+//   }
+//
+//   return (
+//     <div style={{ fontFamily: 'Arial', padding: '20px' }}>
+//       <h2>Middleware Testing</h2>
+//
+//       <div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
+//         <div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '5px' }}>
+//           <h3>Counter 1 (Both Middlewares)</h3>
+//           <p>
+//             Value:
+//             {counter1Value}
+//           </p>
+//           <button
+//             onClick={updateCounter1}
+//             style={{ padding: '8px 15px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '4px' }}
+//           >
+//             Increment
+//           </button>
+//         </div>
+//
+//         <div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '5px' }}>
+//           <h3>Counter 2 (ShallowCompare)</h3>
+//           <p>
+//             Value:
+//             {counter2Value}
+//           </p>
+//           <button
+//             onClick={updateCounter2}
+//             style={{ padding: '8px 15px', backgroundColor: '#2196F3', color: 'white', border: 'none', borderRadius: '4px' }}
+//           >
+//             Update
+//           </button>
+//           <p><small>Every 3rd click tries to set the same value</small></p>
+//         </div>
+//
+//         <div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '5px' }}>
+//           <h3>Counter 3 (Batching)</h3>
+//           <p>
+//             Value:
+//             {counter3Value}
+//           </p>
+//           <button
+//             onClick={updateCounter3}
+//             style={{ padding: '8px 15px', backgroundColor: '#FF9800', color: 'white', border: 'none', borderRadius: '4px' }}
+//           >
+//             Batch Update
+//           </button>
+//         </div>
+//       </div>
+//     </div>
+//   )
+// })
+//# sourceMappingURL=example4.js.map

package/dist/_examples/example4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example4.js","sourceRoot":"","sources":["../../src/_examples/example4.tsx"],"names":[],"mappings":"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"}

package/dist/_examples/example5.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=example5.d.ts.map

package/dist/_examples/example5.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"example5.d.ts","sourceRoot":"","sources":["../../src/_examples/example5.tsx"],"names":[],"mappings":""}

package/dist/_examples/example5.js

@@ -0,0 +1,184 @@
+"use strict";
+// import React, { useState } from 'react'
+// import { MemoryStorage, StoragePluginModule, ILogger } from 'synapse'
+// import { LoggingPlugin, ValidationPlugin } from './plugins'
+//
+// // Типы данных
+// interface User {
+//   name: string;
+//   age: number;
+// }
+//
+// // Создаем модуль плагинов
+// const plugins = new StoragePluginModule(undefined, console, 'demoStorage')
+//
+// // Создаем стейт для ошибок, чтобы компоненты могли получить к нему доступ
+// const validationErrors: { [key: string]: string } = {}
+//
+// // Добавляем логирующий плагин
+// await plugins.add(new LoggingPlugin({ logLevel: 'debug' }))
+//
+// // Добавляем плагин валидации с обработчиком ошибок
+// const validation = new ValidationPlugin({
+//   throwOnInvalid: true, // Все равно генерировать ошибку
+//   onValidationError: (key, value, message) => {
+//     // Сохраняем ошибку в общем объекте
+//     validationErrors[key] = message
+//     console.error(`Validation error for ${key}: ${message}`, value)
+//   },
+// })
+//
+// // Настраиваем правила валидации
+// validation.addValidator('user', (value) => {
+//   // Сбрасываем ошибки при каждой валидации
+//   validationErrors.user = ''
+//
+//   if (!value || typeof value !== 'object') {
+//     return { valid: false, message: 'User must be an object' }
+//   }
+//
+//   if (!value.name || value.name.trim() === '') {
+//     return { valid: false, message: 'User must have a name' }
+//   }
+//
+//   if (typeof value.age !== 'number' || value.age < 10) {
+//     return { valid: false, message: 'Возраст должен быть больше 10' }
+//   }
+//
+//   return { valid: true }
+// })
+//
+// await plugins.add(validation)
+//
+//
+// // Создаем хранилище с плагинами
+// const storage = await new MemoryStorage<{user?: User}>({
+//   name: 'demoStorage',
+//   initialState: { version: '1.0.0' },
+// }, plugins).initialize()
+//
+// // Компонент для демонстрации
+// export function Example5() {
+//   const [user, setUser] = useState<User | null>(null)
+//   const [name, setName] = useState('')
+//   const [age, setAge] = useState('')
+//   const [error, setError] = useState<string | null>(null)
+//   const [fieldErrors, setFieldErrors] = useState<{name?: string, age?: string}>({})
+//
+//   // Функция для сохранения пользователя
+//   const saveUser = async () => {
+//     try {
+//       // Сбрасываем ошибки при каждой отправке
+//       setError(null)
+//       setFieldErrors({})
+//
+//       const userData: User = {
+//         name,
+//         age: parseInt(age, 10) || 0, // Преобразуем в число или 0, если невалидно
+//       }
+//
+//       await storage.set('user', userData)
+//       setUser(userData)
+//       console.log('User saved successfully')
+//     } catch (err) {
+//       // Получаем сообщение ошибки
+//       const errorMessage = err instanceof Error ? err.message : String(err)
+//
+//       // Устанавливаем общую ошибку
+//       setError(errorMessage)
+//
+//       // Определяем, какое поле вызвало ошибку и устанавливаем ошибку для него
+//       if (errorMessage.includes('name')) {
+//         setFieldErrors((prev) => ({ ...prev, name: 'Имя обязательно' }))
+//       }
+//
+//       if (errorMessage.includes('возраст') || errorMessage.includes('больше 10')) {
+//         setFieldErrors((prev) => ({ ...prev, age: 'Возраст должен быть больше 10' }))
+//       }
+//
+//       console.error('Error saving user:', errorMessage)
+//     }
+//   }
+//
+//   return (
+//     <div style={{ fontFamily: 'Arial', padding: '20px' }}>
+//       <h2>Пример с валидацией</h2>
+//
+//       {/* Если есть общая ошибка, показываем её */}
+//       {error && (
+//         <div style={{
+//           padding: '10px',
+//           backgroundColor: '#ffebee',
+//           color: '#d32f2f',
+//           borderRadius: '4px',
+//           marginBottom: '15px',
+//         }}
+//         >
+//           {error}
+//         </div>
+//       )}
+//
+//       <div style={{ marginBottom: '20px' }}>
+//         <div style={{ marginBottom: '10px' }}>
+//           <label style={{ display: 'block', marginBottom: '5px' }}>Имя:</label>
+//           <input
+//             type="text"
+//             value={name}
+//             onChange={(e) => setName(e.target.value)}
+//             style={{
+//               padding: '8px',
+//               width: '250px',
+//               border: fieldErrors.name ? '1px solid #d32f2f' : '1px solid #ccc',
+//             }}
+//           />
+//           {fieldErrors.name && (
+//             <div style={{ color: '#d32f2f', fontSize: '14px', marginTop: '5px' }}>
+//               {fieldErrors.name}
+//             </div>
+//           )}
+//         </div>
+//
+//         <div style={{ marginBottom: '15px' }}>
+//           <label style={{ display: 'block', marginBottom: '5px' }}>Возраст:</label>
+//           <input
+//             type="number"
+//             value={age}
+//             onChange={(e) => setAge(e.target.value)}
+//             style={{
+//               padding: '8px',
+//               width: '250px',
+//               border: fieldErrors.age ? '1px solid #d32f2f' : '1px solid #ccc',
+//             }}
+//           />
+//           {fieldErrors.age && (
+//             <div style={{ color: '#d32f2f', fontSize: '14px', marginTop: '5px' }}>
+//               {fieldErrors.age}
+//             </div>
+//           )}
+//         </div>
+//
+//         <button
+//           onClick={saveUser}
+//           style={{
+//             padding: '10px 15px',
+//             backgroundColor: '#4CAF50',
+//             color: 'white',
+//             border: 'none',
+//             borderRadius: '4px',
+//             cursor: 'pointer',
+//           }}
+//         >
+//           Сохранить
+//         </button>
+//       </div>
+//
+//       <div style={{ border: '1px solid #ddd', padding: '15px', borderRadius: '4px' }}>
+//         <h3>Текущие данные:</h3>
+//         <pre style={{ backgroundColor: '#f5f5f5', padding: '10px', borderRadius: '4px' }}>
+//           {user ? JSON.stringify(user, null, 2) : 'Нет данных'}
+//         </pre>
+//       </div>
+//     </div>
+//   )
+// }
+//# sourceMappingURL=example5.js.map

package/dist/_examples/example5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example5.js","sourceRoot":"","sources":["../../src/_examples/example5.tsx"],"names":[],"mappings":"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"}

package/dist/_examples/example6.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=example6.d.ts.map

package/dist/_examples/example6.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"example6.d.ts","sourceRoot":"","sources":["../../src/_examples/example6.tsx"],"names":[],"mappings":""}