├── .travis.yml
├── src
    ├── react-app-env.d.ts
    ├── .eslintrc
    ├── index.ts
    ├── context.ts
    ├── observable.ts
    ├── test-utils.ts
    ├── utils
    │   ├── memoize.ts
    │   └── subscription.ts
    ├── batched.ts
    ├── transaction.ts
    ├── observe.ts
    ├── observe.spec.ts
    ├── derived.spec.ts
    ├── atom.ts
    ├── molecule.spec.ts
    ├── derived.ts
    ├── atom.spec.ts
    └── molecule.ts
├── .eslintignore
├── example
    ├── src
    │   ├── react-app-env.d.ts
    │   ├── index.tsx
    │   ├── setupTests.ts
    │   ├── App.test.tsx
    │   ├── theme.ts
    │   ├── react
    │   │   ├── usePrevious.ts
    │   │   ├── useConstant.ts
    │   │   ├── useObservable.ts
    │   │   └── useConstructor.ts
    │   ├── index.css
    │   ├── Loader.tsx
    │   ├── state
    │   │   ├── interval.ts
    │   │   ├── window-size.ts
    │   │   ├── pagination.ts
    │   │   ├── dialog.ts
    │   │   └── request.ts
    │   ├── ListItem.tsx
    │   ├── App.tsx
    │   ├── Folder.tsx
    │   ├── Folders.tsx
    │   ├── Note.tsx
    │   └── api.ts
    ├── public
    │   ├── favicon.ico
    │   ├── manifest.json
    │   ├── index.html
    │   └── empty.svg
    ├── README.md
    ├── tsconfig.json
    └── package.json
├── tsconfig.test.json
├── .editorconfig
├── .prettierrc
├── .gitignore
├── .eslintrc
├── tsconfig.json
├── package.json
└── README.md


/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 12
4 |   - 10
5 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/src/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "env": {
3 |     "jest": true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/
2 | dist/
3 | node_modules/
4 | .snapshots/
5 | *.min.js


--------------------------------------------------------------------------------
/example/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/malerba118/elementos/HEAD/example/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.json",
3 |   "compilerOptions": {
4 |     "module": "commonjs"
5 |   }
6 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/example/src/index.tsx:
--------------------------------------------------------------------------------
1 | import './index.css'
2 | 
3 | import React from 'react'
4 | import ReactDOM from 'react-dom'
5 | import App from './App'
6 | 
7 | ReactDOM.render(<App />, document.getElementById('root'))
8 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './atom'
2 | export * from './molecule'
3 | export * from './derived'
4 | export * from './observe'
5 | export * from './observable'
6 | export * from './batched'
7 | export * from './context'
8 | export * from './transaction'
9 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "singleQuote": true,
 3 |   "jsxSingleQuote": true,
 4 |   "semi": false,
 5 |   "tabWidth": 2,
 6 |   "bracketSpacing": true,
 7 |   "jsxBracketSameLine": false,
 8 |   "arrowParens": "always",
 9 |   "trailingComma": "none"
10 | }
11 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 | 
3 | It is linked to the elementos package in the parent directory for development purposes.
4 | 
5 | You can run `npm install` and then `npm start` to test your package.
6 | 


--------------------------------------------------------------------------------
/example/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 | 


--------------------------------------------------------------------------------
/example/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import App from './App'
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div')
 7 |   ReactDOM.render(<App />, div)
 8 |   ReactDOM.unmountComponentAtNode(div)
 9 | })
10 | 


--------------------------------------------------------------------------------
/example/src/theme.ts:
--------------------------------------------------------------------------------
 1 | import { extendTheme } from '@chakra-ui/react'
 2 | 
 3 | // 2. Call `extendTheme` and pass your custom values
 4 | export const theme = extendTheme({
 5 |   fonts: {
 6 |     body: 'Poppins, sans-serif',
 7 |     heading: 'Poppins, serif',
 8 |     mono: 'Menlo, monospace'
 9 |   }
10 | })
11 | 


--------------------------------------------------------------------------------
/src/context.ts:
--------------------------------------------------------------------------------
1 | import { Transaction } from './transaction'
2 | 
3 | let currentTransaction: Transaction | undefined
4 | 
5 | export const getCurrentTransaction = () => currentTransaction
6 | export const setCurrentTransaction = (transaction: Transaction | undefined) => {
7 |   currentTransaction = transaction
8 | }
9 | 


--------------------------------------------------------------------------------
/example/src/react/usePrevious.ts:
--------------------------------------------------------------------------------
 1 | import { useRef, useEffect } from 'react'
 2 | 
 3 | function usePrevious<T>(value: T): T | undefined {
 4 |   const ref = useRef<T | undefined>()
 5 |   useEffect(() => {
 6 |     ref.current = value
 7 |   }, [value])
 8 |   return ref.current
 9 | }
10 | 
11 | export default usePrevious
12 | 


--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "elementos",
 3 |   "name": "elementos",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 3 | 
 4 | # dependencies
 5 | node_modules
 6 | 
 7 | # builds
 8 | build
 9 | dist
10 | .rpt2_cache
11 | 
12 | # misc
13 | .DS_Store
14 | .env
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 | 
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | 


--------------------------------------------------------------------------------
/example/src/react/useConstant.ts:
--------------------------------------------------------------------------------
 1 | import { useRef } from 'react'
 2 | 
 3 | const useConstant = <T>(fn: () => T): T => {
 4 |   const ref = useRef<null | { value: T }>(null)
 5 |   if (ref.current == null) {
 6 |     // we instantiate { value } to not conflict with returned null
 7 |     ref.current = { value: fn() }
 8 |   }
 9 |   return ref.current.value
10 | }
11 | 
12 | export default useConstant
13 | 


--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
 1 | html, body, #root {
 2 |   height: 100%;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 0;
 7 |   padding: 0;
 8 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 9 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
10 |     sans-serif;
11 |   -webkit-font-smoothing: antialiased;
12 |   -moz-osx-font-smoothing: grayscale;
13 | }
14 | 
15 | code {
16 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
17 |     monospace;
18 | }
19 | 


--------------------------------------------------------------------------------
/example/src/react/useObservable.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | import { Observable, observe, ExtractObservableType } from 'elementos'
 3 | 
 4 | export const useObservable = <T extends Observable<any>>(
 5 |   observable: T
 6 | ): ExtractObservableType<T> => {
 7 |   const [state, setState] = useState<ExtractObservableType<T>>(observable.get())
 8 | 
 9 |   useEffect(() => {
10 |     return observe(observable, (value) => {
11 |       setState(value)
12 |     })
13 |   }, [observable])
14 | 
15 |   return state
16 | }
17 | 


--------------------------------------------------------------------------------
/example/src/Loader.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { Spinner, Flex } from '@chakra-ui/react'
 3 | 
 4 | interface LoaderProps {
 5 |   active: boolean
 6 | }
 7 | 
 8 | const Loader: FC<LoaderProps> = ({ active }) => {
 9 |   if (!active) {
10 |     return null
11 |   }
12 |   return (
13 |     <Flex
14 |       position='absolute'
15 |       height='100%'
16 |       width='100%'
17 |       align='center'
18 |       justify='center'
19 |       bg='white'
20 |     >
21 |       <Spinner size='lg' color='purple.600' />
22 |     </Flex>
23 |   )
24 | }
25 | 
26 | export default Loader
27 | 


--------------------------------------------------------------------------------
/example/src/state/interval.ts:
--------------------------------------------------------------------------------
 1 | import { atom, observe } from 'elementos'
 2 | 
 3 | export const createInterval = (
 4 |   initialCallback: () => void,
 5 |   interval: number
 6 | ) => {
 7 |   const interval$ = atom(interval)
 8 |   let callback = initialCallback
 9 | 
10 |   const dispose = observe(interval$, (ms) => {
11 |     const id = setInterval(() => {
12 |       callback()
13 |     }, ms)
14 |     return () => {
15 |       clearInterval(id)
16 |     }
17 |   })
18 | 
19 |   return {
20 |     setInterval: (milliseconds: number) => {
21 |       interval$.actions.set(milliseconds)
22 |     },
23 |     setCallback: (nextCallback: () => void) => {
24 |       callback = nextCallback
25 |     },
26 |     dispose
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "@typescript-eslint/parser",
 3 |   "extends": [
 4 |     "standard",
 5 |     "standard-react",
 6 |     "plugin:prettier/recommended",
 7 |     "prettier/standard",
 8 |     "prettier/react",
 9 |     "plugin:@typescript-eslint/eslint-recommended"
10 |   ],
11 |   "env": {
12 |     "node": true
13 |   },
14 |   "parserOptions": {
15 |     "ecmaVersion": 2020,
16 |     "ecmaFeatures": {
17 |       "legacyDecorators": true,
18 |       "jsx": true
19 |     }
20 |   },
21 |   "settings": {
22 |     "react": {
23 |       "version": "16"
24 |     }
25 |   },
26 |   "rules": {
27 |     "space-before-function-paren": 0,
28 |     "react/prop-types": 0,
29 |     "react/jsx-handler-names": 0,
30 |     "react/jsx-fragments": 0,
31 |     "react/no-unused-prop-types": 0,
32 |     "import/export": 0
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/example/src/state/window-size.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'elementos'
 2 | 
 3 | type Size = {
 4 |   width: number
 5 |   height: number
 6 | }
 7 | 
 8 | export const createWindowSize$ = () => {
 9 |   const size$ = atom<Size | null>(null)
10 | 
11 |   let listener: EventListener
12 |   size$.onObserverChange(({ count }) => {
13 |     // if there are no observers, remove listener
14 |     if (count === 0 && listener) {
15 |       window.removeEventListener('resize', listener)
16 |     } else if (count > 0 && !listener) {
17 |       // if there are observers, add listener
18 |       listener = () => {
19 |         size$.actions.set({
20 |           height: window.innerHeight,
21 |           width: window.innerWidth
22 |         })
23 |       }
24 |       window.addEventListener('resize', listener)
25 |     }
26 |   })
27 | 
28 |   return size$
29 | }
30 | 


--------------------------------------------------------------------------------
/src/observable.ts:
--------------------------------------------------------------------------------
 1 | import { Transaction } from './transaction'
 2 | 
 3 | export type ObservableUnsubscriber = () => void
 4 | export type ObservableSubscriber = (transaction: Transaction) => void
 5 | export type ObserverChangeSubscriber = (params: { count: number }) => void
 6 | 
 7 | export interface Observable<State> {
 8 |   get: <Selection = State>(
 9 |     selector?: (val: State) => Selection,
10 |     transaction?: Transaction
11 |   ) => Selection
12 |   subscribe: (subscriber: ObservableSubscriber) => ObservableUnsubscriber
13 |   onObserverChange: (
14 |     subscriber: ObserverChangeSubscriber
15 |   ) => ObservableUnsubscriber
16 | }
17 | 
18 | export type ExtractObservableType<Type> = Type extends Observable<infer X>
19 |   ? X
20 |   : never
21 | 
22 | export type ExtractObservableTypes<Map extends ObservableMap> = {
23 |   [K in keyof Map]: ExtractObservableType<Map[K]>
24 | }
25 | 
26 | export type ObservableMap = Record<string, Observable<any>>
27 | 


--------------------------------------------------------------------------------
/src/test-utils.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from './index'
 2 | 
 3 | export type User = {
 4 |   firstName: string
 5 |   lastName: string
 6 | }
 7 | 
 8 | export const USER: User = {
 9 |   firstName: 'austin',
10 |   lastName: 'malerba'
11 | }
12 | 
13 | export const USER_2: User = {
14 |   firstName: 'frostin',
15 |   lastName: 'malaria'
16 | }
17 | 
18 | export const createUser$ = (user: User) => {
19 |   return atom(user, {
20 |     actions: (set) => ({
21 |       setFirstName: (firstName: string) => {
22 |         set((prev) => ({
23 |           ...prev,
24 |           firstName
25 |         }))
26 |       },
27 |       set
28 |     })
29 |   })
30 | }
31 | 
32 | export const createEffectSpy = () => {
33 |   const effect = jest.fn()
34 |   const cleanup = jest.fn()
35 |   return {
36 |     effect: (...args: any) => {
37 |       effect(...args)
38 |       return cleanup
39 |     },
40 |     spies: {
41 |       effect,
42 |       cleanup
43 |     }
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "outDir": "dist",
 4 |     "module": "esnext",
 5 |     "lib": [
 6 |       "dom",
 7 |       "esnext"
 8 |     ],
 9 |     "moduleResolution": "node",
10 |     "jsx": "react",
11 |     "sourceMap": true,
12 |     "declaration": true,
13 |     "esModuleInterop": true,
14 |     "noImplicitReturns": true,
15 |     "noImplicitThis": true,
16 |     "noImplicitAny": true,
17 |     "strictNullChecks": true,
18 |     "suppressImplicitAnyIndexErrors": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "allowSyntheticDefaultImports": true,
22 |     "target": "es5",
23 |     "allowJs": true,
24 |     "skipLibCheck": true,
25 |     "strict": true,
26 |     "forceConsistentCasingInFileNames": true,
27 |     "resolveJsonModule": true,
28 |     "isolatedModules": true,
29 |     "noEmit": true
30 |   },
31 |   "include": [
32 |     "src"
33 |   ],
34 |   "exclude": [
35 |     "node_modules",
36 |     "build"
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/src/utils/memoize.ts:
--------------------------------------------------------------------------------
 1 | export const defaultParamsEqual = (
 2 |   params1: any[] | undefined,
 3 |   params2: any[]
 4 | ) => {
 5 |   if (params1 === undefined || params1.length !== params2.length) {
 6 |     return false
 7 |   }
 8 |   for (const i in params1) {
 9 |     if (!Object.is(params1[i], params2[i])) {
10 |       return false
11 |     }
12 |   }
13 |   return true
14 | }
15 | 
16 | export interface MemoizedOptions<Params> {
17 |   paramsEqual?: (prevParams: Params | undefined, currParams: Params) => boolean
18 | }
19 | 
20 | export const memoized = <Params extends any[], Return>(
21 |   fn: (...args: Params) => Return,
22 |   { paramsEqual = defaultParamsEqual }: MemoizedOptions<Params> = {}
23 | ): ((...args: Params) => Return) => {
24 |   let prevArgs: Params | undefined
25 |   let prevReturn: any
26 | 
27 |   return (...args) => {
28 |     if (!paramsEqual(prevArgs, args)) {
29 |       prevArgs = args
30 |       prevReturn = fn(...args)
31 |     }
32 |     return prevReturn
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "outDir": "dist",
 4 |     "module": "esnext",
 5 |     "lib": [
 6 |       "dom",
 7 |       "esnext"
 8 |     ],
 9 |     "target": "esnext",
10 |     "moduleResolution": "node",
11 |     "sourceMap": true,
12 |     "declaration": true,
13 |     "esModuleInterop": true,
14 |     "noImplicitReturns": true,
15 |     "noImplicitThis": true,
16 |     "noImplicitAny": true,
17 |     "strictNullChecks": true,
18 |     "suppressImplicitAnyIndexErrors": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "allowSyntheticDefaultImports": true,
22 |     "allowJs": true,
23 |     "skipLibCheck": true,
24 |     "strict": true,
25 |     "forceConsistentCasingInFileNames": true,
26 |     "resolveJsonModule": true,
27 |     "isolatedModules": true,
28 |     "noEmit": true,
29 |     "jsx": "react"
30 |   },
31 |   "include": [
32 |     "src"
33 |   ],
34 |   "exclude": [
35 |     "node_modules",
36 |     "dist",
37 |     "example",
38 |     "src/**/*.spec.ts"
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------
/example/src/ListItem.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import {
 3 |   ListItem as ChakraListItem,
 4 |   ListItemProps as ChakraListItemProps,
 5 |   Text
 6 | } from '@chakra-ui/react'
 7 | 
 8 | interface ListItemProps extends ChakraListItemProps {
 9 |   title: string
10 |   description?: string
11 |   active?: boolean
12 | }
13 | 
14 | const ListItem: FC<ListItemProps> = ({
15 |   title,
16 |   description,
17 |   active,
18 |   ...otherProps
19 | }) => {
20 |   return (
21 |     <ChakraListItem
22 |       w='100%'
23 |       rounded={0}
24 |       bg={active ? 'purple.200' : 'none'}
25 |       p={2}
26 |       _hover={{
27 |         bg: active ? 'purple.200' : 'purple.100'
28 |       }}
29 |       {...otherProps}
30 |     >
31 |       <Text noOfLines={1} casing='uppercase' fontSize='sm'>
32 |         {title}
33 |       </Text>
34 |       {description && (
35 |         <Text noOfLines={2} fontSize='xs'>
36 |           {description}
37 |         </Text>
38 |       )}
39 |     </ChakraListItem>
40 |   )
41 | }
42 | 
43 | export default ListItem
44 | 


--------------------------------------------------------------------------------
/src/batched.ts:
--------------------------------------------------------------------------------
 1 | import { transaction } from './transaction'
 2 | import { getCurrentTransaction, setCurrentTransaction } from './context'
 3 | 
 4 | export const batched = <ExecutorParams extends any[], ExecutorReturn>(
 5 |   executor: (...args: ExecutorParams) => ExecutorReturn
 6 | ) => {
 7 |   return (...args: ExecutorParams): ExecutorReturn => {
 8 |     // nested batch calls should be ignored in favor of the outermost
 9 |     let currentTransaction = getCurrentTransaction()
10 |     if (currentTransaction) {
11 |       //no-op
12 |       return executor(...args)
13 |     } else {
14 |       currentTransaction = transaction()
15 |       setCurrentTransaction(currentTransaction)
16 |       try {
17 |         let returnVal = executor(...args)
18 |         setCurrentTransaction(undefined)
19 |         currentTransaction.commit()
20 |         return returnVal
21 |       } catch (err) {
22 |         setCurrentTransaction(undefined)
23 |         if (currentTransaction) {
24 |           currentTransaction.rollback()
25 |         }
26 |         throw err
27 |       }
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/utils/subscription.ts:
--------------------------------------------------------------------------------
 1 | interface CreateSubscriptionManagerOptions {
 2 |   onSubscriberChange?: (params: { count: number }) => void
 3 |   reverse?: boolean
 4 | }
 5 | 
 6 | export type Unsubscriber = () => void
 7 | 
 8 | export const createSubscriptionManager = <SubscriberArgs extends any[] = []>({
 9 |   onSubscriberChange,
10 |   reverse = false
11 | }: CreateSubscriptionManagerOptions = {}) => {
12 |   type Subscriber = (...args: SubscriberArgs) => void
13 |   let subscribers: Subscriber[] = []
14 |   return {
15 |     subscribe: (subscriber: Subscriber): Unsubscriber => {
16 |       subscribers = reverse
17 |         ? [subscriber, ...subscribers]
18 |         : [...subscribers, subscriber]
19 |       onSubscriberChange && onSubscriberChange({ count: subscribers.length })
20 |       return () => {
21 |         subscribers = subscribers.filter((s) => s !== subscriber)
22 |         onSubscriberChange && onSubscriberChange({ count: subscribers.length })
23 |       }
24 |     },
25 |     notifySubscribers: (...args: SubscriberArgs) => {
26 |       subscribers.forEach((subscriber) => {
27 |         subscriber(...args)
28 |       })
29 |     }
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/example/src/state/pagination.ts:
--------------------------------------------------------------------------------
 1 | import { atom, molecule, batched } from 'elementos'
 2 | 
 3 | export const createPagination = ({
 4 |   page,
 5 |   totalPages
 6 | }: {
 7 |   page: number
 8 |   totalPages: number | null
 9 | }) => {
10 |   const page$ = atom(page, {
11 |     actions: (set) => ({
12 |       next: () => set((prev) => prev + 1),
13 |       prev: () => set((prev) => prev - 1),
14 |       jumpTo: (page: number) => set(page)
15 |     })
16 |   })
17 | 
18 |   const totalPages$ = atom(totalPages)
19 | 
20 |   const pagination$ = molecule(
21 |     {
22 |       page: page$,
23 |       totalPages: totalPages$
24 |     },
25 |     {
26 |       actions: ({ page, totalPages }) => ({
27 |         nextPage: () => {
28 |           let nextPage = page.get() + 1
29 |           const total = totalPages.get()
30 |           if (total && nextPage <= total) {
31 |             page.actions.next()
32 |           }
33 |         },
34 |         prevPage: () => {
35 |           let nextPage = page.get() - 1
36 |           if (nextPage > 0) {
37 |             page.actions.prev()
38 |           }
39 |         },
40 |         setTotalPages: (n: number) => {
41 |           if (page.get() > n) {
42 |             batched(() => {
43 |               totalPages.actions.set(n)
44 |               page.actions.jumpTo(n)
45 |             })()
46 |           } else {
47 |             totalPages.actions.set(n)
48 |           }
49 |         }
50 |       })
51 |     }
52 |   )
53 | 
54 |   return pagination$
55 | }
56 | 


--------------------------------------------------------------------------------
/src/transaction.ts:
--------------------------------------------------------------------------------
 1 | import { createSubscriptionManager } from './utils/subscription'
 2 | 
 3 | export type TransactionSubscriber = () => void
 4 | export type TransactionUnsubscriber = () => void
 5 | 
 6 | export interface Transaction {
 7 |   commit: () => void
 8 |   rollback: () => void
 9 |   onCommitPhaseOne: (
10 |     subscriber: TransactionSubscriber
11 |   ) => TransactionUnsubscriber
12 |   onCommitPhaseTwo: (
13 |     subscriber: TransactionSubscriber
14 |   ) => TransactionUnsubscriber
15 |   onRollback: (subscriber: TransactionSubscriber) => TransactionUnsubscriber
16 | }
17 | 
18 | export const transaction = (): Transaction => {
19 |   const managers = {
20 |     commitPhaseOne: createSubscriptionManager(),
21 |     commitPhaseTwo: createSubscriptionManager(),
22 |     rollback: createSubscriptionManager()
23 |   }
24 | 
25 |   const commit = () => {
26 |     managers.commitPhaseOne.notifySubscribers()
27 |     managers.commitPhaseTwo.notifySubscribers()
28 |   }
29 |   const rollback = () => {
30 |     managers.rollback.notifySubscribers()
31 |   }
32 |   const onCommitPhaseOne = (subscriber: () => void) => {
33 |     return managers.commitPhaseOne.subscribe(subscriber)
34 |   }
35 |   const onCommitPhaseTwo = (subscriber: () => void) => {
36 |     return managers.commitPhaseTwo.subscribe(subscriber)
37 |   }
38 |   const onRollback = (subscriber: () => void) => {
39 |     return managers.rollback.subscribe(subscriber)
40 |   }
41 |   return {
42 |     commit,
43 |     rollback,
44 |     onCommitPhaseOne,
45 |     onCommitPhaseTwo,
46 |     onRollback
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/observe.ts:
--------------------------------------------------------------------------------
 1 | import { Transaction } from './transaction'
 2 | import { Observable } from './observable'
 3 | 
 4 | export type EffectCleanup = () => void
 5 | export type Effect<State> = (value: State) => EffectCleanup | void
 6 | export type Dispose = () => void
 7 | 
 8 | export const observe = <State>(
 9 |   observable: Observable<State>,
10 |   effect: Effect<State>
11 | ): Dispose => {
12 |   let cleanup: EffectCleanup | void
13 |   let prevState: State
14 |   let firstInvocation = true
15 |   const transactions = new Set<Transaction>()
16 |   const runCleanup = () => {
17 |     if (typeof cleanup === 'function') {
18 |       cleanup()
19 |     }
20 |   }
21 |   const runEffect = () => {
22 |     let state = observable.get()
23 |     if (firstInvocation || !Object.is(prevState, state)) {
24 |       runCleanup()
25 |       cleanup = effect(state)
26 |       prevState = state
27 |       firstInvocation = false
28 |     }
29 |   }
30 | 
31 |   const unsubscribe = observable.subscribe((transaction) => {
32 |     if (transaction) {
33 |       if (!transactions.has(transaction)) {
34 |         transactions.add(transaction)
35 |         transaction.onCommitPhaseTwo(() => {
36 |           runEffect()
37 |           transactions.delete(transaction)
38 |         })
39 |         transaction.onRollback(() => {
40 |           transactions.delete(transaction)
41 |         })
42 |       }
43 |     } else {
44 |       runEffect()
45 |     }
46 |   })
47 | 
48 |   runEffect()
49 | 
50 |   const dispose = () => {
51 |     unsubscribe()
52 |     runCleanup()
53 |   }
54 | 
55 |   return dispose
56 | }
57 | 


--------------------------------------------------------------------------------
/example/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Flex, ChakraProvider } from '@chakra-ui/react'
 3 | import { atom } from 'elementos'
 4 | import { useConstructor } from './react/useConstructor'
 5 | import { useObservable } from './react/useObservable'
 6 | import Folders from './Folders'
 7 | import Folder from './Folder'
 8 | import Note from './Note'
 9 | import { theme } from './theme'
10 | 
11 | const App = () => {
12 |   const { selectedFolder$, selectedNote$ } = useConstructor(() => {
13 |     const selectedFolder$ = atom<string | null>(null)
14 |     const selectedNote$ = atom<number | null>(null)
15 | 
16 |     return {
17 |       selectedFolder$,
18 |       selectedNote$
19 |     }
20 |   })
21 | 
22 |   const selectedFolder = useObservable(selectedFolder$)
23 |   const selectedNote = useObservable(selectedNote$)
24 | 
25 |   return (
26 |     <ChakraProvider theme={theme}>
27 |       <Flex h='100%' color='purple.700'>
28 |         <Folders
29 |           w={240}
30 |           selectedFolder={selectedFolder}
31 |           onFolderSelect={selectedFolder$.actions.set}
32 |           borderRight='2px'
33 |           borderColor='purple.300'
34 |         />
35 |         <Folder
36 |           folder={selectedFolder}
37 |           selectedNote={selectedNote}
38 |           onNoteSelect={selectedNote$.actions.set}
39 |           w={320}
40 |           borderRight='2px'
41 |           borderColor='purple.300'
42 |         />
43 |         <Note noteId={selectedNote || null} flex={1} />
44 |       </Flex>
45 |     </ChakraProvider>
46 |   )
47 | }
48 | 
49 | export default App
50 | 


--------------------------------------------------------------------------------
/example/src/state/dialog.ts:
--------------------------------------------------------------------------------
 1 | import { atom, molecule, batched } from 'elementos'
 2 | 
 3 | const createVisibility$ = (defaultValue: boolean) => {
 4 |   return atom(defaultValue, {
 5 |     actions: (set) => ({
 6 |       open: () => set(true),
 7 |       close: () => set(false)
 8 |     })
 9 |   })
10 | }
11 | 
12 | type CreateDialogOptions<Context> = {
13 |   defaultVisibility?: boolean
14 |   defaultContext?: Context | null
15 | }
16 | 
17 | export const createDialog$ = <Context>({
18 |   defaultVisibility = false,
19 |   defaultContext = null
20 | }: CreateDialogOptions<Context> = {}) => {
21 |   const visibility$ = createVisibility$(defaultVisibility)
22 |   const context$ = atom<Context | null>(defaultContext)
23 | 
24 |   const dialog$ = molecule(
25 |     {
26 |       visibility: visibility$,
27 |       context: context$
28 |     },
29 |     {
30 |       actions: ({ visibility, context }) => ({
31 |         open: batched((nextContext: Context) => {
32 |           context.actions.set(nextContext)
33 |           visibility.actions.open()
34 |         }),
35 |         close: batched(() => {
36 |           context.actions.set(null)
37 |           visibility.actions.close()
38 |         })
39 |       }),
40 |       deriver: ({ visibility, context }) => ({
41 |         isOpen: visibility,
42 |         context
43 |       })
44 |     }
45 |   )
46 | 
47 |   return dialog$
48 | }
49 | 
50 | type User = {
51 |   firstName: string
52 |   lastName: string
53 |   email: string
54 | }
55 | 
56 | const dialog$ = createDialog$<User>()
57 | 
58 | dialog$.actions.open({
59 |   firstName: '1',
60 |   lastName: '1',
61 |   email: '1'
62 | })
63 | 


--------------------------------------------------------------------------------
/example/src/Folder.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { Stack, StackProps, List } from '@chakra-ui/react'
 3 | import { observe } from 'elementos'
 4 | import { useConstructor } from './react/useConstructor'
 5 | import { createRequest$ } from './state/request'
 6 | import { useObservable } from './react/useObservable'
 7 | import Loader from './Loader'
 8 | import ListItem from './ListItem'
 9 | import * as api from './api'
10 | 
11 | interface FolderProps extends StackProps {
12 |   folder: string | null
13 |   selectedNote: number | null
14 |   onNoteSelect: (noteId: number) => void
15 | }
16 | 
17 | const Folder: FC<FolderProps> = ({
18 |   folder,
19 |   selectedNote,
20 |   onNoteSelect,
21 |   ...otherProps
22 | }) => {
23 |   const { request$ } = useConstructor(
24 |     ({ atoms, beforeUnmount }) => {
25 |       const request$ = createRequest$(api.fetchNotes)
26 |       beforeUnmount(
27 |         observe(atoms.folder, (folder) => {
28 |           request$.actions.execute({ folder })
29 |         })
30 |       )
31 |       return {
32 |         request$
33 |       }
34 |     },
35 |     {
36 |       folder
37 |     }
38 |   )
39 | 
40 |   const request = useObservable(request$)
41 | 
42 |   return (
43 |     <Stack {...otherProps} position='relative'>
44 |       <Loader active={request.isPending} />
45 |       <List h='100%' overflow='auto'>
46 |         {request.data?.map((note) => (
47 |           <ListItem
48 |             key={note.id}
49 |             onClick={() => {
50 |               onNoteSelect(note.id)
51 |             }}
52 |             active={selectedNote === note.id}
53 |             title={note.title}
54 |             description={note.description}
55 |           />
56 |         ))}
57 |       </List>
58 |     </Stack>
59 |   )
60 | }
61 | 
62 | export default Folder
63 | 


--------------------------------------------------------------------------------
/example/src/Folders.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FC } from 'react'
 2 | import { Stack, StackProps, List } from '@chakra-ui/react'
 3 | import { useConstructor } from './react/useConstructor'
 4 | import { createRequest$ } from './state/request'
 5 | import { useObservable } from './react/useObservable'
 6 | import Loader from './Loader'
 7 | import ListItem from './ListItem'
 8 | import * as api from './api'
 9 | 
10 | interface FoldersProps extends StackProps {
11 |   selectedFolder: string | null
12 |   onFolderSelect: (folder: string | null) => void
13 | }
14 | 
15 | const Folders: FC<FoldersProps> = ({
16 |   selectedFolder,
17 |   onFolderSelect,
18 |   ...otherProps
19 | }) => {
20 |   // initializer runs only once on first render
21 |   const { request$ } = useConstructor(() => {
22 |     const request$ = createRequest$(api.fetchFolders)
23 |     request$.actions.execute()
24 |     return {
25 |       request$
26 |     }
27 |   })
28 | 
29 |   // request$ observable is translated to react state
30 |   const request = useObservable(request$)
31 | 
32 |   return (
33 |     <Stack {...otherProps} position='relative'>
34 |       <Loader active={request.isPending} />
35 |       <List h='100%' overflow='auto'>
36 |         <ListItem
37 |           key={'all'}
38 |           onClick={() => {
39 |             onFolderSelect(null)
40 |           }}
41 |           active={selectedFolder === null}
42 |           title={'All'}
43 |         />
44 |         {request.data?.map((folder) => (
45 |           <ListItem
46 |             key={folder}
47 |             onClick={() => {
48 |               onFolderSelect(folder)
49 |             }}
50 |             active={selectedFolder === folder}
51 |             title={folder}
52 |           />
53 |         ))}
54 |       </List>
55 |     </Stack>
56 |   )
57 | }
58 | 
59 | export default Folders
60 | 


--------------------------------------------------------------------------------
/src/observe.spec.ts:
--------------------------------------------------------------------------------
 1 | import { molecule, observe, derived } from './index'
 2 | import { createUser$, USER, USER_2, createEffectSpy } from './test-utils'
 3 | 
 4 | describe('observe', () => {
 5 |   let user$ = createUser$(USER)
 6 | 
 7 |   beforeEach(() => {
 8 |     user$ = createUser$(USER)
 9 |   })
10 | 
11 |   it('should run effect when intialized', () => {
12 |     const { effect, spies } = createEffectSpy()
13 |     observe(user$, effect)
14 |     expect(spies.effect).toHaveBeenCalledTimes(1)
15 |     expect(spies.effect).toBeCalledWith(USER)
16 |     expect(spies.cleanup).toHaveBeenCalledTimes(0)
17 |   })
18 | 
19 |   it('should run effect when value changed', () => {
20 |     const { effect, spies } = createEffectSpy()
21 |     observe(user$, effect)
22 |     user$.actions.set(USER_2)
23 |     expect(spies.effect).toHaveBeenNthCalledWith(1, USER)
24 |     expect(spies.effect).toHaveBeenNthCalledWith(2, USER_2)
25 |     expect(spies.cleanup).toHaveBeenCalledTimes(1)
26 |   })
27 | 
28 |   it('should run effect when value changed', () => {
29 |     const fullName$ = derived(
30 |       user$,
31 |       ({ firstName, lastName }) => firstName + ' ' + lastName
32 |     )
33 | 
34 |     const { effect, spies } = createEffectSpy()
35 |     observe(
36 |       molecule({
37 |         fullName: fullName$,
38 |         user: user$
39 |       }),
40 |       effect
41 |     )
42 |     user$.actions.set(USER_2)
43 |     expect(spies.effect).toHaveBeenCalledTimes(2)
44 |     expect(spies.cleanup).toHaveBeenCalledTimes(1)
45 |   })
46 | 
47 |   it('should not run after dispose', () => {
48 |     const { effect, spies } = createEffectSpy()
49 |     const dispose = observe(user$, effect)
50 |     dispose()
51 |     user$.actions.set(USER_2)
52 |     user$.actions.setFirstName('frostin')
53 |     expect(spies.effect).toHaveBeenCalledTimes(1)
54 |     expect(spies.cleanup).toHaveBeenCalledTimes(1)
55 |   })
56 | })
57 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "elementos-example",
 3 |   "homepage": ".",
 4 |   "version": "0.0.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
 8 |     "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
 9 |     "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
10 |     "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
11 |   },
12 |   "dependencies": {
13 |     "@chakra-ui/react": "^1.0.0",
14 |     "@emotion/core": "^11.0.0",
15 |     "@emotion/react": "^11.0.0",
16 |     "@emotion/styled": "^11.0.0",
17 |     "@testing-library/jest-dom": "file:../node_modules/@testing-library/jest-dom",
18 |     "@testing-library/react": "file:../node_modules/@testing-library/react",
19 |     "@testing-library/user-event": "file:../node_modules/@testing-library/user-event",
20 |     "@types/jest": "file:../node_modules/@types/jest",
21 |     "@types/node": "file:../node_modules/@types/node",
22 |     "@types/react": "file:../node_modules/@types/react",
23 |     "@types/react-dom": "file:../node_modules/@types/react-dom",
24 |     "elementos": "file:..",
25 |     "framer-motion": "^2.9.4",
26 |     "lodash": "^4.17.20",
27 |     "react": "file:../node_modules/react",
28 |     "react-dom": "file:../node_modules/react-dom",
29 |     "react-scripts": "file:../node_modules/react-scripts",
30 |     "typescript": "file:../node_modules/typescript"
31 |   },
32 |   "devDependencies": {
33 |     "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
34 |     "@types/lodash": "^4.14.165"
35 |   },
36 |   "eslintConfig": {
37 |     "extends": "react-app"
38 |   },
39 |   "browserslist": {
40 |     "production": [
41 |       ">0.2%",
42 |       "not dead",
43 |       "not op_mini all"
44 |     ],
45 |     "development": [
46 |       "last 1 chrome version",
47 |       "last 1 firefox version",
48 |       "last 1 safari version"
49 |     ]
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/example/src/react/useConstructor.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef } from 'react'
 2 | import { Atom, atom, batched } from 'elementos'
 3 | import usePrevious from './usePrevious'
 4 | import useConstant from './useConstant'
 5 | 
 6 | export type UnmountSubscriber = () => void
 7 | export type Constructor<T, Atoms> = (params: {
 8 |   beforeUnmount: (subscriber: UnmountSubscriber) => void
 9 |   atoms: Atoms
10 | }) => T
11 | 
12 | const mapValues = <Obj extends {}>(obj: Obj, mapper: (val: any) => any) => {
13 |   var k, result, v
14 |   result = {}
15 |   for (k in obj) {
16 |     v = obj[k]
17 |     result[k] = mapper(v)
18 |   }
19 |   return result as { [K in keyof Obj]: any }
20 | }
21 | 
22 | type Atoms<Observed> = { [K in keyof Observed]: Atom<Observed[K]> }
23 | 
24 | export const useConstructor = <T, Observed extends {} = {}>(
25 |   constructor: Constructor<T, Atoms<Observed>>,
26 |   observed: Observed = {} as Observed
27 | ): T => {
28 |   const unmountSubscribersRef = useRef<UnmountSubscriber[]>([])
29 |   const atoms = useConstant<Atoms<Observed>>(() => {
30 |     return mapValues(observed, (val) => atom(val))
31 |   })
32 | 
33 |   const state = useConstant(() => {
34 |     const beforeUnmount = (subscriber: UnmountSubscriber) => {
35 |       unmountSubscribersRef.current.push(subscriber)
36 |     }
37 |     return constructor({ beforeUnmount, atoms })
38 |   })
39 | 
40 |   const prevObserved = usePrevious(observed)
41 | 
42 |   useEffect(() => {
43 |     if (!prevObserved) {
44 |       return
45 |     }
46 |     // update atoms if pbserved values have changed
47 |     batched(() => {
48 |       Object.keys(atoms).forEach((key) => {
49 |         if (!Object.is(prevObserved[key], observed[key])) {
50 |           atoms[key].actions.set(() => observed[key])
51 |         }
52 |       })
53 |     })()
54 |   })
55 | 
56 |   useEffect(() => {
57 |     return () => {
58 |       unmountSubscribersRef.current.forEach((subscriber) => {
59 |         subscriber()
60 |       })
61 |     }
62 |   }, [])
63 | 
64 |   return state
65 | }
66 | 


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 |     />
10 |     <meta name="theme-color" content="#000000" />
11 | 
12 |     <!--
13 |       manifest.json provides metadata used when your web app is added to the
14 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
15 |     -->
16 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
17 |     <link rel="preconnect" href="https://fonts.gstatic.com">
18 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=block" rel="stylesheet">
19 | 
20 |     <!--
21 |       Notice the use of %PUBLIC_URL% in the tags above.
22 |       It will be replaced with the URL of the `public` folder during the build.
23 |       Only files inside the `public` folder can be referenced from the HTML.
24 | 
25 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
26 |       work correctly both with client-side routing and a non-root public URL.
27 |       Learn how to configure a non-root public URL by running `npm run build`.
28 |     -->
29 |     <title>elementos</title>
30 |   </head>
31 | 
32 |   <body>
33 |     <noscript>
34 |       You need to enable JavaScript to run this app.
35 |     </noscript>
36 | 
37 |     <div id="root"></div>
38 | 
39 |     <!--
40 |       This HTML file is a template.
41 |       If you open it directly in the browser, you will see an empty page.
42 | 
43 |       You can add webfonts, meta tags, or analytics to this file.
44 |       The build step will place the bundled scripts into the <body> tag.
45 | 
46 |       To begin the development, run `npm start` or `yarn start`.
47 |       To create a production bundle, use `npm run build` or `yarn build`.
48 |     -->
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "elementos",
 3 |   "version": "1.0.0",
 4 |   "description": "Composable reactive state management",
 5 |   "author": "malerba118",
 6 |   "license": "MIT",
 7 |   "repository": "malerba118/elementos",
 8 |   "main": "dist/index.js",
 9 |   "module": "dist/index.modern.js",
10 |   "source": "src/index.ts",
11 |   "engines": {
12 |     "node": ">=10"
13 |   },
14 |   "scripts": {
15 |     "build": "microbundle-crl --no-compress --format modern,cjs",
16 |     "start": "microbundle-crl watch --no-compress --format modern,cjs",
17 |     "prepare": "run-s build",
18 |     "test": "run-s test:unit test:lint test:build",
19 |     "test:build": "run-s build",
20 |     "test:lint": "eslint src/**/*",
21 |     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
22 |     "test:watch": "react-scripts test --env=jsdom",
23 |     "predeploy": "cd example && npm install && npm run build",
24 |     "deploy": "gh-pages -d example/build"
25 |   },
26 |   "devDependencies": {
27 |     "@testing-library/jest-dom": "^4.2.4",
28 |     "@testing-library/react": "^9.5.0",
29 |     "@testing-library/user-event": "^7.2.1",
30 |     "@types/jest": "^25.1.4",
31 |     "@types/node": "^12.12.38",
32 |     "@types/react": "^16.9.27",
33 |     "@types/react-dom": "^16.9.7",
34 |     "@typescript-eslint/eslint-plugin": "^2.26.0",
35 |     "@typescript-eslint/parser": "^2.26.0",
36 |     "microbundle-crl": "^0.13.10",
37 |     "babel-eslint": "^10.0.3",
38 |     "cross-env": "^7.0.2",
39 |     "eslint": "^6.8.0",
40 |     "eslint-config-prettier": "^6.7.0",
41 |     "eslint-config-standard": "^14.1.0",
42 |     "eslint-config-standard-react": "^9.2.0",
43 |     "eslint-plugin-import": "^2.18.2",
44 |     "eslint-plugin-node": "^11.0.0",
45 |     "eslint-plugin-prettier": "^3.1.1",
46 |     "eslint-plugin-promise": "^4.2.1",
47 |     "eslint-plugin-react": "^7.17.0",
48 |     "eslint-plugin-standard": "^4.0.1",
49 |     "gh-pages": "^2.2.0",
50 |     "npm-run-all": "^4.1.5",
51 |     "prettier": "^2.0.4",
52 |     "react": "^16.13.1",
53 |     "react-dom": "^16.13.1",
54 |     "react-scripts": "^3.4.1",
55 |     "typescript": "^3.7.5"
56 |   },
57 |   "files": [
58 |     "dist"
59 |   ]
60 | }
61 | 


--------------------------------------------------------------------------------
/src/derived.spec.ts:
--------------------------------------------------------------------------------
 1 | import { observe, derived } from './index'
 2 | import { createUser$, USER } from './test-utils'
 3 | 
 4 | const createFullName$ = () => {
 5 |   return derived(
 6 |     createUser$(USER),
 7 |     (user) => `${user.firstName} ${user.lastName}`
 8 |   )
 9 | }
10 | 
11 | describe('derived', () => {
12 |   let fullName$ = createFullName$()
13 | 
14 |   beforeEach(() => {
15 |     fullName$ = createFullName$()
16 |   })
17 | 
18 |   it('should get correct state when unobserved', () => {
19 |     expect(fullName$.get()).toBe('austin malerba')
20 |   })
21 | 
22 |   it('should update when child updates', () => {
23 |     fullName$.child.actions.setFirstName('foo')
24 |     expect(fullName$.get()).toBe('foo malerba')
25 |   })
26 | 
27 |   it('should notify observer when child updated', () => {
28 |     const effect = jest.fn()
29 |     const dispose = observe(fullName$, effect)
30 |     fullName$.child.actions.setFirstName('foo')
31 |     fullName$.child.actions.setFirstName('foo')
32 |     expect(effect).toBeCalledTimes(2)
33 |     expect(effect).toHaveBeenNthCalledWith(1, 'austin malerba')
34 |     expect(effect).toHaveBeenNthCalledWith(2, 'foo malerba')
35 |     dispose()
36 |   })
37 | 
38 |   it('should receive updates through onObserverChange', () => {
39 |     const listener = jest.fn()
40 |     fullName$.onObserverChange(listener)
41 |     expect(listener).toHaveBeenCalledTimes(0)
42 |     const dispose1 = observe(fullName$, () => {})
43 |     expect(listener).toHaveBeenCalledTimes(1)
44 |     expect(listener).toHaveBeenNthCalledWith(1, { count: 1 })
45 |     const dispose2 = observe(fullName$, () => {})
46 |     expect(listener).toHaveBeenCalledTimes(2)
47 |     expect(listener).toHaveBeenNthCalledWith(2, { count: 2 })
48 |     dispose1()
49 |     expect(listener).toHaveBeenCalledTimes(3)
50 |     expect(listener).toHaveBeenNthCalledWith(3, { count: 1 })
51 |     dispose2()
52 |     expect(listener).toHaveBeenCalledTimes(4)
53 |     expect(listener).toHaveBeenNthCalledWith(4, { count: 0 })
54 |   })
55 | 
56 |   it('effect should not run if not changed', () => {
57 |     const lastName$ = derived(createUser$(USER), (user) => user.lastName)
58 |     const effect = jest.fn()
59 |     observe(lastName$, effect)
60 |     expect(effect).toHaveBeenCalledTimes(1)
61 |     lastName$.child.actions.setFirstName('foo')
62 |     expect(effect).toHaveBeenCalledTimes(1)
63 |   })
64 | })
65 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![foo](https://github.com/malerba118/elementos-docs/blob/main/static/img/logo.svg)
 2 | 
 3 | [![NPM](https://img.shields.io/npm/v/elementos.svg)](https://www.npmjs.com/package/elementos) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 4 | 
 5 | Elementos is a framework-agnostic, reactive state management library with an emphasis on state composition and encapsulation.
 6 | 
 7 | **Please see the [full documentation](https://malerba118.github.io/elementos-docs)!**
 8 |  
 9 | ## Install
10 | 
11 | ```bash
12 | npm install --save elementos
13 | ```
14 | 
15 | ## Basic Usage
16 | 
17 | [Open in CodeSandbox](https://codesandbox.io/s/elementos-basic-usage-7yng7?file=/src/index.js)
18 | 
19 | ```js
20 | import { atom, molecule, observe } from "elementos";
21 | 
22 | document.getElementById("app").innerHTML = `
23 |   <button id="inc-count-one">
24 |     Increment Count One
25 |   </button>
26 |   <button id="inc-count-two">
27 |     Increment Count Two
28 |   </button>
29 |   <p>
30 |     Count One: <span id="count-one"></span>
31 |   </p>
32 |   <p>
33 |     Count Two: <span id="count-two"></span>
34 |   </p>
35 |   <p>
36 |     Sum: <span id="sum"></span>
37 |   </p>
38 | `;
39 | 
40 | const createCount$ = (defaultVal) => {
41 |   return atom(defaultVal, {
42 |     actions: (set) => ({
43 |       increment: () => set((prev) => prev + 1)
44 |     })
45 |   });
46 | };
47 | 
48 | const countOne$ = createCount$(0);
49 | const countTwo$ = createCount$(0);
50 | const sum$ = molecule(
51 |   {
52 |     countOne: countOne$,
53 |     countTwo: countTwo$
54 |   },
55 |   {
56 |     deriver: ({ countOne, countTwo }) => countOne + countTwo
57 |   }
58 | );
59 | 
60 | const elements = {
61 |   incCountOne: document.getElementById("inc-count-one"),
62 |   incCountTwo: document.getElementById("inc-count-two"),
63 |   countOne: document.getElementById("count-one"),
64 |   countTwo: document.getElementById("count-two"),
65 |   sum: document.getElementById("sum")
66 | };
67 | 
68 | elements.incCountOne.onclick = () => {
69 |   countOne$.actions.increment();
70 | };
71 | 
72 | elements.incCountTwo.onclick = () => {
73 |   countTwo$.actions.increment();
74 | };
75 | 
76 | observe(countOne$, (countOne) => {
77 |   elements.countOne.innerHTML = countOne;
78 | });
79 | 
80 | observe(countTwo$, (countTwo) => {
81 |   elements.countTwo.innerHTML = countTwo;
82 | });
83 | 
84 | observe(sum$, (sum) => {
85 |   elements.sum.innerHTML = sum;
86 | });
87 | ```
88 | 
89 | ## License
90 | 
91 | MIT © [malerba118](https://github.com/malerba118)
92 | 


--------------------------------------------------------------------------------
/example/src/state/request.ts:
--------------------------------------------------------------------------------
 1 | import { atom, molecule, batched } from 'elementos'
 2 | 
 3 | enum Status {
 4 |   Initial = 'initial',
 5 |   Pending = 'pending',
 6 |   Fulfilled = 'fulfilled',
 7 |   Rejected = 'rejected'
 8 | }
 9 | 
10 | export type CreateRequestOptions<T> = {
11 |   defaultData?: T
12 | }
13 | 
14 | export const createRequest$ = <ExecutorParams extends any[], ExecutorReturn>(
15 |   executor: (...args: ExecutorParams) => Promise<ExecutorReturn>,
16 |   { defaultData }: CreateRequestOptions<ExecutorReturn> = {}
17 | ) => {
18 |   return molecule(
19 |     {
20 |       status: atom(Status.Initial),
21 |       data: atom(defaultData),
22 |       error: atom(null as Error | null)
23 |     },
24 |     {
25 |       actions: ({ status, data, error }) => {
26 |         const baseActions = {
27 |           setPending: batched(() => {
28 |             status.actions.set(Status.Pending)
29 |             error.actions.set(null)
30 |           }),
31 |           setFulfilled: batched((result) => {
32 |             status.actions.set(Status.Fulfilled)
33 |             data.actions.set(result)
34 |             error.actions.set(null)
35 |           }),
36 |           setRejected: batched((err) => {
37 |             status.actions.set(Status.Rejected)
38 |             error.actions.set(err)
39 |           })
40 |         }
41 |         let invocationCount = 0
42 |         const execute = async (
43 |           ...args: ExecutorParams
44 |         ): Promise<ExecutorReturn> => {
45 |           let invocationNumber = ++invocationCount
46 |           baseActions.setPending()
47 |           const prom = executor(...args)
48 |           prom
49 |             .then((data) => {
50 |               if (invocationNumber !== invocationCount) {
51 |                 return
52 |               }
53 |               baseActions.setFulfilled(data)
54 |             })
55 |             .catch((err) => {
56 |               if (invocationNumber !== invocationCount) {
57 |                 return
58 |               }
59 |               baseActions.setRejected(err)
60 |             })
61 |           return prom
62 |         }
63 |         return {
64 |           ...baseActions,
65 |           execute
66 |         }
67 |       },
68 |       deriver: ({ status, data, error }) => {
69 |         return {
70 |           isInitial: status === Status.Initial,
71 |           isPending: status === Status.Pending,
72 |           isFulfilled: status === Status.Fulfilled,
73 |           isRejected: status === Status.Rejected,
74 |           status,
75 |           data,
76 |           error
77 |         }
78 |       }
79 |     }
80 |   )
81 | }
82 | 


--------------------------------------------------------------------------------
/src/atom.ts:
--------------------------------------------------------------------------------
 1 | import { createSubscriptionManager } from './utils/subscription'
 2 | import { Transaction } from './transaction'
 3 | import { Observable, ObserverChangeSubscriber } from './observable'
 4 | import { batched } from './batched'
 5 | import { getCurrentTransaction } from './context'
 6 | 
 7 | export type Setter<State> = (value: State) => State
 8 | 
 9 | export type Set<State> = (
10 |   setter: State | Setter<State>,
11 |   transaction?: Transaction
12 | ) => void
13 | 
14 | export interface AtomDefaultActions<State> {
15 |   set: Set<State>
16 | }
17 | 
18 | export interface Atom<State, Actions extends {} = AtomDefaultActions<State>>
19 |   extends Observable<State> {
20 |   actions: Actions
21 | }
22 | 
23 | export interface AtomOptions<
24 |   State,
25 |   Actions extends {} = AtomDefaultActions<State>
26 | > {
27 |   actions: (set: Set<State>) => Actions
28 | }
29 | 
30 | export const atom = <State, Actions extends {} = AtomDefaultActions<State>>(
31 |   defaultValue: State,
32 |   options?: AtomOptions<State, Actions>
33 | ): Atom<State, Actions> => {
34 |   let value: State = defaultValue
35 |   const transactionValues = new WeakMap<Transaction, State>()
36 |   const observerChangeManager = createSubscriptionManager<
37 |     Parameters<ObserverChangeSubscriber>
38 |   >()
39 |   const manager = createSubscriptionManager<[Transaction]>({
40 |     onSubscriberChange: ({ count }) => {
41 |       observerChangeManager.notifySubscribers({ count })
42 |     }
43 |   })
44 |   const set = batched(
45 |     (
46 |       setter: Setter<State> | State,
47 |       transaction: Transaction = getCurrentTransaction() as Transaction
48 |     ) => {
49 |       // transaction will always exist because this function is batched
50 |       if (!transactionValues.has(transaction)) {
51 |         transaction.onCommitPhaseOne(() => {
52 |           value = transactionValues.get(transaction) as State
53 |           transactionValues.delete(transaction)
54 |         })
55 |         transaction.onRollback(() => {
56 |           transactionValues.delete(transaction)
57 |         })
58 |         transactionValues.set(transaction, value)
59 |       }
60 |       let nextValue: State
61 |       if (typeof setter === 'function') {
62 |         nextValue = (setter as Setter<State>)(
63 |           transactionValues.get(transaction) as State
64 |         )
65 |       } else {
66 |         nextValue = setter
67 |       }
68 |       transactionValues.set(transaction, nextValue)
69 |       manager.notifySubscribers(transaction)
70 |     }
71 |   )
72 | 
73 |   return {
74 |     get: (
75 |       selector = (x) => x as any,
76 |       transaction = getCurrentTransaction()
77 |     ) => {
78 |       if (transaction && transactionValues.has(transaction)) {
79 |         return selector(transactionValues.get(transaction) as State)
80 |       }
81 |       return selector(value)
82 |     },
83 |     subscribe: (subscriber: (transaction: Transaction) => void) => {
84 |       return manager.subscribe(subscriber)
85 |     },
86 |     onObserverChange: (subscriber) => {
87 |       return observerChangeManager.subscribe(subscriber)
88 |     },
89 |     actions: options?.actions?.(set) || (({ set } as any) as Actions)
90 |   }
91 | }
92 | 


--------------------------------------------------------------------------------
/src/molecule.spec.ts:
--------------------------------------------------------------------------------
  1 | import { observe, molecule, batched } from './index'
  2 | import { createUser$, USER, USER_2 } from './test-utils'
  3 | 
  4 | const createMol$ = () => {
  5 |   return molecule(
  6 |     {
  7 |       user1: createUser$(USER),
  8 |       user2: createUser$(USER_2)
  9 |     },
 10 |     {
 11 |       actions: (children) => children
 12 |     }
 13 |   )
 14 | }
 15 | 
 16 | describe('molecule', () => {
 17 |   let mol$ = createMol$()
 18 | 
 19 |   beforeEach(() => {
 20 |     mol$ = createMol$()
 21 |   })
 22 | 
 23 |   it('should get correct state when unobserved', () => {
 24 |     const USER_3 = {
 25 |       firstName: 'foo',
 26 |       lastName: 'bar'
 27 |     }
 28 |     expect(mol$.get()).toBe(mol$.get())
 29 |     mol$.actions.user1.actions.set(USER_3)
 30 |     expect(mol$.get().user1).toBe(USER_3)
 31 |   })
 32 | 
 33 |   it('should get correct state when observed', () => {
 34 |     const dispose = observe(mol$, () => {})
 35 |     const USER_3 = {
 36 |       firstName: 'foo',
 37 |       lastName: 'bar'
 38 |     }
 39 |     expect(mol$.get()).toBe(mol$.get())
 40 |     mol$.actions.user1.actions.set(USER_3)
 41 |     expect(mol$.get().user1).toBe(USER_3)
 42 |     dispose()
 43 |   })
 44 | 
 45 |   it('should get/set transactional state during batched and rollback', () => {
 46 |     const effect = jest.fn()
 47 |     const dispose = observe(mol$, effect)
 48 |     const USER_3 = {
 49 |       firstName: 'foo',
 50 |       lastName: 'bar'
 51 |     }
 52 |     const spy1 = jest.fn()
 53 |     const spy2 = jest.fn()
 54 |     const spy3 = jest.fn()
 55 |     const spy4 = jest.fn()
 56 |     const run = batched(() => {
 57 |       mol$.actions.user1.actions.set(USER_3)
 58 |       mol$.actions.user1.actions.set((prev) => {
 59 |         spy1(prev)
 60 |         return prev
 61 |       })
 62 |       spy2(mol$.get().user1)
 63 |       spy3(mol$.actions.user1.get())
 64 |       spy4(mol$.actions.user2.get())
 65 |       throw new Error('rollback')
 66 |     })
 67 | 
 68 |     try {
 69 |       run()
 70 |     } catch (err) {}
 71 | 
 72 |     expect(spy1).toBeCalledWith(USER_3)
 73 |     expect(spy2).toBeCalledWith(USER_3)
 74 |     expect(spy3).toBeCalledWith(USER_3)
 75 |     expect(spy4).toBeCalledWith(USER_2)
 76 |     expect(mol$.get().user1).toBe(USER)
 77 |     expect(effect).toBeCalledTimes(1)
 78 |     dispose()
 79 |   })
 80 | 
 81 |   it('should get/set transactional state during batched and commit', () => {
 82 |     const effect = jest.fn()
 83 |     const dispose = observe(mol$, effect)
 84 |     const USER_3 = {
 85 |       firstName: 'foo',
 86 |       lastName: 'bar'
 87 |     }
 88 |     const spy1 = jest.fn()
 89 |     const spy2 = jest.fn()
 90 |     const run = batched(() => {
 91 |       mol$.actions.user1.actions.set(USER_3)
 92 |       mol$.actions.user1.actions.set((prev) => {
 93 |         spy1(prev)
 94 |         return prev
 95 |       })
 96 |       spy2(mol$.get().user1)
 97 |     })
 98 | 
 99 |     try {
100 |       run()
101 |     } catch (err) {}
102 | 
103 |     expect(spy1).toBeCalledWith(USER_3)
104 |     expect(spy2).toBeCalledWith(USER_3)
105 |     expect(mol$.get().user1).toBe(USER_3)
106 |     expect(effect).toBeCalledTimes(2)
107 |     dispose()
108 |   })
109 | })
110 | 


--------------------------------------------------------------------------------
/src/derived.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Observable,
 3 |   ExtractObservableType,
 4 |   ObserverChangeSubscriber
 5 | } from './observable'
 6 | import { getCurrentTransaction } from './context'
 7 | import { Transaction } from './transaction'
 8 | import { createSubscriptionManager, Unsubscriber } from './utils/subscription'
 9 | import { memoized } from './utils/memoize'
10 | 
11 | export type Deriver<Child, DerivedState> = (
12 |   state: ExtractObservableType<Child>
13 | ) => DerivedState
14 | 
15 | export interface Derived<
16 |   Child extends Observable<any>,
17 |   DerivedState = ExtractObservableType<Child>
18 | > extends Observable<DerivedState> {
19 |   child: Child
20 | }
21 | 
22 | export const derived = <
23 |   Child extends Observable<any>,
24 |   DerivedState = ExtractObservableType<Child>
25 | >(
26 |   child: Child,
27 |   deriver: (state: ExtractObservableType<Child>) => DerivedState
28 | ): Derived<Child, DerivedState> => {
29 |   const getChildValue = (transaction?: Transaction) => {
30 |     return child.get((x) => x, transaction)
31 |   }
32 |   const memoizedDeriver = memoized(deriver)
33 |   const observerChangeManager = createSubscriptionManager<
34 |     Parameters<ObserverChangeSubscriber>
35 |   >()
36 |   let unsubscribeFromChild: Unsubscriber | undefined
37 |   const manager = createSubscriptionManager<[Transaction]>({
38 |     onSubscriberChange: ({ count }) => {
39 |       observerChangeManager.notifySubscribers({ count })
40 |       if (count > 0 && !unsubscribeFromChild) {
41 |         unsubscribeFromChild = subscribeToChild()
42 |       } else if (count === 0 && unsubscribeFromChild) {
43 |         unsubscribeFromChild()
44 |         unsubscribeFromChild = undefined
45 |       }
46 |     }
47 |   })
48 |   const transactionDerivers = new WeakMap<
49 |     Transaction,
50 |     Deriver<Child, DerivedState>
51 |   >()
52 | 
53 |   const subscribeToChild = () => {
54 |     const unsubscribe = child.subscribe((transaction: Transaction) => {
55 |       if (!transactionDerivers.has(transaction)) {
56 |         transaction.onCommitPhaseOne(() => {
57 |           transactionDerivers.delete(transaction)
58 |         })
59 |         transaction.onRollback(() => {
60 |           transactionDerivers.delete(transaction)
61 |         })
62 |         transactionDerivers.set(transaction, memoized(deriver))
63 |       }
64 |       manager.notifySubscribers(transaction)
65 |     })
66 | 
67 |     return unsubscribe
68 |   }
69 | 
70 |   let observable: Observable<DerivedState> = {
71 |     get: (
72 |       selector = (x) => x as any,
73 |       transaction = getCurrentTransaction()
74 |     ) => {
75 |       if (transaction && transactionDerivers.has(transaction)) {
76 |         const transactionDeriver = transactionDerivers.get(transaction)
77 |         return selector(
78 |           transactionDeriver?.(getChildValue(transaction)) as DerivedState
79 |         )
80 |       }
81 |       return selector(memoizedDeriver(getChildValue()))
82 |     },
83 |     subscribe: (subscriber: (transaction: Transaction) => void) => {
84 |       return manager.subscribe(subscriber)
85 |     },
86 |     onObserverChange: (subscriber) => {
87 |       return observerChangeManager.subscribe(subscriber)
88 |     }
89 |   }
90 | 
91 |   return {
92 |     ...observable,
93 |     child
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/src/atom.spec.ts:
--------------------------------------------------------------------------------
  1 | import { atom } from './index'
  2 | import { getCurrentTransaction } from './context'
  3 | import { createUser$, USER, USER_2 } from './test-utils'
  4 | import { derived } from './derived'
  5 | import { observe } from './observe'
  6 | 
  7 | describe('atom', () => {
  8 |   let user$ = createUser$(USER)
  9 | 
 10 |   beforeEach(() => {
 11 |     user$ = createUser$(USER)
 12 |   })
 13 | 
 14 |   it('should get state with default selector', () => {
 15 |     expect(user$.get()).toBe(USER)
 16 |   })
 17 | 
 18 |   it('should get state with passed selector', () => {
 19 |     expect(user$.get((u) => u.firstName)).toEqual(USER.firstName)
 20 |   })
 21 | 
 22 |   it('should partially update state', () => {
 23 |     user$.actions.setFirstName('frostin')
 24 |     expect(user$.get((u) => u.firstName)).toEqual('frostin')
 25 |     expect(user$.get((u) => u.lastName)).toEqual('malerba')
 26 |     expect(user$.get()).not.toEqual(USER)
 27 |     expect(user$.get()).not.toBe(USER)
 28 |   })
 29 | 
 30 |   it('should fully update state', () => {
 31 |     user$.actions.set(USER_2)
 32 |     expect(user$.get((u) => u.firstName)).toEqual(USER_2.firstName)
 33 |     expect(user$.get((u) => u.lastName)).toEqual(USER_2.lastName)
 34 |     expect(user$.get()).not.toEqual(USER)
 35 |     expect(user$.get()).not.toBe(USER)
 36 |   })
 37 | 
 38 |   it('should work with no options', () => {
 39 |     const count$ = atom(10)
 40 |     expect(count$.get()).toEqual(10)
 41 |     count$.actions.set(11)
 42 |     expect(count$.get()).toEqual(11)
 43 |     count$.actions.set((p) => p + 1)
 44 |     expect(count$.get()).toEqual(12)
 45 |   })
 46 | 
 47 |   it('should commit at the end of setting', () => {
 48 |     const count$ = atom(10)
 49 |     expect(count$.get()).toEqual(10)
 50 |     count$.actions.set(() => {
 51 |       count$.actions.set(11)
 52 |       const snapshot = count$.get()
 53 |       count$.actions.set(12)
 54 |       return snapshot
 55 |     })
 56 |     expect(count$.get()).toEqual(11)
 57 |   })
 58 | 
 59 |   it('should rollback if error thrown', () => {
 60 |     const count$ = atom(10)
 61 |     expect(count$.get()).toEqual(10)
 62 |     try {
 63 |       count$.actions.set(() => {
 64 |         count$.actions.set(11)
 65 |         throw new Error('foo')
 66 |       })
 67 |     } catch (err) {}
 68 |     expect(count$.get()).toEqual(10)
 69 |   })
 70 | 
 71 |   it('should lazy subscribe with calls to onObserverChange', () => {
 72 |     const count$ = atom(10)
 73 |     const doubled$ = derived(count$, (count) => count * 2)
 74 |     const observerChangeListeners = {
 75 |       count: jest.fn(),
 76 |       doubled: jest.fn()
 77 |     }
 78 |     count$.onObserverChange(observerChangeListeners.count)
 79 |     doubled$.onObserverChange(observerChangeListeners.doubled)
 80 |     expect(observerChangeListeners.count).toHaveBeenCalledTimes(0)
 81 |     expect(observerChangeListeners.doubled).toHaveBeenCalledTimes(0)
 82 |     const dispose = observe(doubled$, () => {})
 83 |     expect(observerChangeListeners.count).toHaveBeenCalledTimes(1)
 84 |     expect(observerChangeListeners.doubled).toHaveBeenCalledTimes(1)
 85 |     expect(observerChangeListeners.count).toHaveBeenNthCalledWith(1, {
 86 |       count: 1
 87 |     })
 88 |     expect(observerChangeListeners.doubled).toHaveBeenNthCalledWith(1, {
 89 |       count: 1
 90 |     })
 91 |     dispose()
 92 |     expect(observerChangeListeners.count).toHaveBeenNthCalledWith(2, {
 93 |       count: 0
 94 |     })
 95 |     expect(observerChangeListeners.doubled).toHaveBeenNthCalledWith(2, {
 96 |       count: 0
 97 |     })
 98 |   })
 99 | })
100 | 


--------------------------------------------------------------------------------
/example/src/Note.tsx:
--------------------------------------------------------------------------------
  1 | import React, { FC } from 'react'
  2 | import debounce from 'lodash/debounce'
  3 | import { Textarea, Flex, FlexProps, Text } from '@chakra-ui/react'
  4 | import { molecule, observe, atom, batched } from 'elementos'
  5 | import { useConstructor } from './react/useConstructor'
  6 | import { createRequest$ } from './state/request'
  7 | import { useObservable } from './react/useObservable'
  8 | import Loader from './Loader'
  9 | import * as api from './api'
 10 | 
 11 | interface NoteProps extends FlexProps {
 12 |   noteId: number | null
 13 | }
 14 | 
 15 | const Note: FC<NoteProps> = ({ noteId, ...otherProps }) => {
 16 |   const { form$, fetchRequest$ } = useConstructor(
 17 |     ({ atoms, beforeUnmount }) => {
 18 |       const form$ = molecule(
 19 |         {
 20 |           title: atom(''),
 21 |           description: atom('')
 22 |         },
 23 |         {
 24 |           actions: ({ title, description }) => ({
 25 |             setData: batched((data: any) => {
 26 |               title.actions.set(data.title)
 27 |               description.actions.set(data.description)
 28 |             }),
 29 |             title,
 30 |             description
 31 |           })
 32 |         }
 33 |       )
 34 | 
 35 |       const debouncedUpdateNote = debounce(api.updateNote, 1000)
 36 | 
 37 |       const fetchRequest$ = createRequest$(api.fetchNote)
 38 |       const updateRequest$ = createRequest$(async (id, payload) => {
 39 |         debouncedUpdateNote(id, payload)
 40 |       })
 41 | 
 42 |       beforeUnmount(
 43 |         observe(atoms.noteId, (id) => {
 44 |           // whenever noteId changes via props, refetch note
 45 |           if (id) {
 46 |             fetchRequest$.actions.execute(id)
 47 |           }
 48 |         })
 49 |       )
 50 | 
 51 |       beforeUnmount(
 52 |         observe(fetchRequest$, ({ isFulfilled, data }) => {
 53 |           // whenever refetch succeeds, update the form data
 54 |           if (isFulfilled) {
 55 |             form$.actions.setData(data)
 56 |           }
 57 |         })
 58 |       )
 59 | 
 60 |       beforeUnmount(
 61 |         observe(form$, (form) => {
 62 |           // whenever form data changes, get note id and update note
 63 |           updateRequest$.actions.execute(atoms.noteId.get(), form)
 64 |         })
 65 |       )
 66 | 
 67 |       return {
 68 |         form$,
 69 |         fetchRequest$
 70 |       }
 71 |     },
 72 |     {
 73 |       noteId // track value of noteId over time as an atom
 74 |     }
 75 |   )
 76 | 
 77 |   const request = useObservable(fetchRequest$)
 78 |   const form = useObservable(form$)
 79 | 
 80 |   return (
 81 |     <Flex {...otherProps} direction='column' position='relative'>
 82 |       {noteId === null && (
 83 |         <Flex h='100%' direction='column' justify='center' align='center'>
 84 |           <img src='empty.svg' alt='No note selected' width='200' />
 85 |           <Text fontWeight='600' size='xl' p='4'>
 86 |             No note selected
 87 |           </Text>
 88 |         </Flex>
 89 |       )}
 90 |       {noteId && (
 91 |         <>
 92 |           <Loader active={request.isPending} />
 93 |           {request.isFulfilled && (
 94 |             <>
 95 |               <Textarea
 96 |                 value={form.title}
 97 |                 onChange={(e) => {
 98 |                   form$.actions.title.actions.set(e.target.value)
 99 |                 }}
100 |                 resize='none'
101 |                 rounded='0'
102 |                 p={2}
103 |                 display='block'
104 |                 focusBorderColor='transparent'
105 |                 boxSizing='border-box'
106 |                 size='lg'
107 |                 fontStyle='bold'
108 |                 minHeight='64px'
109 |                 border='none'
110 |               />
111 |               <Flex borderBottom='2px' borderBottomColor='purple.300' />
112 |               <Textarea
113 |                 value={form.description}
114 |                 onChange={(e) => {
115 |                   form$.actions.description.actions.set(e.target.value)
116 |                 }}
117 |                 flex='1'
118 |                 resize='none'
119 |                 rounded='0'
120 |                 p={2}
121 |                 display='block'
122 |                 focusBorderColor='transparent'
123 |                 boxSizing='border-box'
124 |                 size='sm'
125 |                 border='none'
126 |               />
127 |             </>
128 |           )}
129 |         </>
130 |       )}
131 |     </Flex>
132 |   )
133 | }
134 | 
135 | export default Note
136 | 


--------------------------------------------------------------------------------
/src/molecule.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Observable,
  3 |   ObservableMap,
  4 |   ExtractObservableTypes,
  5 |   ExtractObservableType,
  6 |   ObserverChangeSubscriber,
  7 |   ObservableUnsubscriber
  8 | } from './observable'
  9 | import { Transaction } from './transaction'
 10 | import { getCurrentTransaction } from './context'
 11 | import { createSubscriptionManager, Unsubscriber } from './utils/subscription'
 12 | import { memoized, defaultParamsEqual } from './utils/memoize'
 13 | 
 14 | const paramsEqual = (params1: any[] | undefined, params2: any[]) => {
 15 |   return defaultParamsEqual(
 16 |     params1 && Object.values(params1[0]),
 17 |     Object.values(params2[0])
 18 |   )
 19 | }
 20 | 
 21 | export type MoleculeDeriver<Deps extends ObservableMap, DerivedState> = (
 22 |   args: {
 23 |     [Index in keyof Deps]: ExtractObservableType<Deps[Index]>
 24 |   }
 25 | ) => DerivedState
 26 | 
 27 | export interface Molecule<
 28 |   Children extends ObservableMap,
 29 |   Actions extends {} = Children,
 30 |   DerivedState = ExtractObservableTypes<Children>
 31 | > extends Observable<DerivedState> {
 32 |   children: Children
 33 |   actions: Actions
 34 | }
 35 | 
 36 | export interface MoleculeOptions<
 37 |   Children extends ObservableMap,
 38 |   Actions extends {} = Children,
 39 |   DerivedState = ExtractObservableTypes<Children>
 40 | > {
 41 |   actions?: (children: Children) => Actions
 42 |   deriver?: MoleculeDeriver<Children, DerivedState>
 43 | }
 44 | 
 45 | export const molecule = <
 46 |   Children extends ObservableMap,
 47 |   Actions extends {} = Children,
 48 |   DerivedState = ExtractObservableTypes<Children>
 49 | >(
 50 |   children: Children,
 51 |   {
 52 |     actions,
 53 |     deriver = (x) => x as DerivedState
 54 |   }: MoleculeOptions<Children, Actions, DerivedState> = {}
 55 | ): Molecule<Children, Actions, DerivedState> => {
 56 |   const getChildrenValues = (transaction?: Transaction): any => {
 57 |     let args: any = {}
 58 |     Object.keys(children).forEach((key) => {
 59 |       const observable: any = children[key]
 60 |       args[key] = observable.get((x: any) => x, transaction)
 61 |     })
 62 |     return args
 63 |   }
 64 |   const memoizedDeriver = memoized(deriver, { paramsEqual })
 65 |   const observerChangeManager = createSubscriptionManager<
 66 |     Parameters<ObserverChangeSubscriber>
 67 |   >()
 68 |   let unsubscribeFromChildren: Unsubscriber | undefined
 69 |   const manager = createSubscriptionManager<[Transaction]>({
 70 |     onSubscriberChange: ({ count }) => {
 71 |       observerChangeManager.notifySubscribers({ count })
 72 |       if (count > 0 && !unsubscribeFromChildren) {
 73 |         unsubscribeFromChildren = subscribeToChildren()
 74 |       } else if (count === 0 && unsubscribeFromChildren) {
 75 |         unsubscribeFromChildren()
 76 |         unsubscribeFromChildren = undefined
 77 |       }
 78 |     }
 79 |   })
 80 |   const transactionDerivers = new WeakMap<
 81 |     Transaction,
 82 |     MoleculeDeriver<Children, DerivedState>
 83 |   >()
 84 | 
 85 |   const subscribeToChildren = () => {
 86 |     const unsubscribers: ObservableUnsubscriber[] = []
 87 |     Object.values(children).forEach((observable: any) => {
 88 |       const unsubscribe = observable.subscribe((transaction: Transaction) => {
 89 |         if (!transactionDerivers.has(transaction)) {
 90 |           transaction.onCommitPhaseOne(() => {
 91 |             transactionDerivers.delete(transaction)
 92 |           })
 93 |           transaction.onRollback(() => {
 94 |             transactionDerivers.delete(transaction)
 95 |           })
 96 |           transactionDerivers.set(
 97 |             transaction,
 98 |             memoized(deriver, { paramsEqual })
 99 |           )
100 |         }
101 |         manager.notifySubscribers(transaction)
102 |       })
103 |       unsubscribers.push(unsubscribe)
104 |     })
105 | 
106 |     const unsubscribeFromChildren = () => {
107 |       unsubscribers.forEach((unsubscribe) => unsubscribe())
108 |     }
109 |     return unsubscribeFromChildren
110 |   }
111 | 
112 |   let observable: Observable<DerivedState> = {
113 |     get: (
114 |       selector = (x) => x as any,
115 |       transaction = getCurrentTransaction()
116 |     ) => {
117 |       if (transaction && transactionDerivers.has(transaction)) {
118 |         const transactionDeriver = transactionDerivers.get(transaction)
119 |         return selector(
120 |           transactionDeriver?.(getChildrenValues(transaction)) as DerivedState
121 |         )
122 |       }
123 |       return selector(memoizedDeriver(getChildrenValues()))
124 |     },
125 |     subscribe: (subscriber: (transaction: Transaction) => void) => {
126 |       return manager.subscribe(subscriber)
127 |     },
128 |     onObserverChange: (subscriber) => {
129 |       return observerChangeManager.subscribe(subscriber)
130 |     }
131 |   }
132 | 
133 |   return {
134 |     ...observable,
135 |     children,
136 |     actions: actions?.(children) || ((children as any) as Actions)
137 |   }
138 | }
139 | 


--------------------------------------------------------------------------------
/example/src/api.ts:
--------------------------------------------------------------------------------
  1 | export type FetchNotesOptions = {
  2 |   page?: number
  3 |   perPage?: number
  4 |   folder?: string | null
  5 | }
  6 | 
  7 | export type Note = {
  8 |   id: number
  9 |   folder: string | null
 10 |   title: string
 11 |   description: string
 12 | }
 13 | 
 14 | let notes: Note[] = [
 15 |   {
 16 |     id: 1,
 17 |     folder: 'recipes',
 18 |     title:
 19 |       'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
 20 |     description:
 21 |       'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto'
 22 |   },
 23 |   {
 24 |     id: 2,
 25 |     folder: 'project ideas',
 26 |     title: 'qui est esse',
 27 |     description:
 28 |       'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla'
 29 |   },
 30 |   {
 31 |     id: 3,
 32 |     folder: 'gift ideas',
 33 |     title: 'ea molestias quasi exercitationem repellat qui ipsa sit aut',
 34 |     description:
 35 |       'et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut'
 36 |   },
 37 |   {
 38 |     id: 4,
 39 |     folder: 'recipes',
 40 |     title: 'eum et est occaecati',
 41 |     description:
 42 |       'ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit'
 43 |   },
 44 |   {
 45 |     id: 5,
 46 |     folder: 'recipes',
 47 |     title: 'nesciunt quas odio',
 48 |     description:
 49 |       'repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque'
 50 |   },
 51 |   {
 52 |     id: 6,
 53 |     folder: 'gift ideas',
 54 |     title: 'dolorem eum magni eos aperiam quia',
 55 |     description:
 56 |       'ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae'
 57 |   },
 58 |   {
 59 |     id: 7,
 60 |     folder: 'gift ideas',
 61 |     title: 'magnam facilis autem',
 62 |     description:
 63 |       'dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas'
 64 |   },
 65 |   {
 66 |     id: 8,
 67 |     folder: null,
 68 |     title: 'dolorem dolore est ipsam',
 69 |     description:
 70 |       'dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae'
 71 |   },
 72 |   {
 73 |     id: 9,
 74 |     folder: 'project ideas',
 75 |     title: 'nesciunt iure omnis dolorem tempora et accusantium',
 76 |     description:
 77 |       'consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas'
 78 |   },
 79 |   {
 80 |     id: 10,
 81 |     folder: null,
 82 |     title: 'optio molestias id quia eum',
 83 |     description:
 84 |       'quo et expedita modi cum officia vel magni\ndoloribus qui repudiandae\nvero nisi sit\nquos veniam quod sed accusamus veritatis error'
 85 |   },
 86 |   {
 87 |     id: 11,
 88 |     folder: 'project ideas',
 89 |     title: 'et ea vero quia laudantium autem',
 90 |     description:
 91 |       'delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi'
 92 |   },
 93 |   {
 94 |     id: 12,
 95 |     folder: 'project ideas',
 96 |     title: 'in quibusdam tempore odit est dolorem',
 97 |     description:
 98 |       'itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio'
 99 |   },
100 |   {
101 |     id: 13,
102 |     folder: 'gift ideas',
103 |     title: 'dolorum ut in voluptas mollitia et saepe quo animi',
104 |     description:
105 |       'aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam'
106 |   },
107 |   {
108 |     id: 14,
109 |     folder: 'project ideas',
110 |     title: 'voluptatem eligendi optio',
111 |     description:
112 |       'fuga et accusamus dolorum perferendis illo voluptas\nnon doloremque neque facere\nad qui dolorum molestiae beatae\nsed aut voluptas totam sit illum'
113 |   },
114 |   {
115 |     id: 15,
116 |     folder: null,
117 |     title: 'eveniet quod temporibus',
118 |     description:
119 |       'reprehenderit quos placeat\nvelit minima officia dolores impedit repudiandae molestiae nam\nvoluptas recusandae quis delectus\nofficiis harum fugiat vitae'
120 |   }
121 | ]
122 | 
123 | const timeout = (ms: number) =>
124 |   new Promise((resolve) => setTimeout(resolve, ms))
125 | 
126 | export const fetchFolders = async () => {
127 |   await timeout(750)
128 |   const folders = notes.reduce((set, note) => {
129 |     if (note.folder) {
130 |       set.add(note.folder)
131 |     }
132 |     return set
133 |   }, new Set<string>())
134 |   return Array.from(folders)
135 | }
136 | 
137 | export const fetchNotes = async ({
138 |   page = 1,
139 |   perPage = 10,
140 |   folder
141 | }: FetchNotesOptions = {}) => {
142 |   console.log('FETCHING NOTES')
143 |   await timeout(750)
144 |   let filteredNotes = notes.filter((note) => {
145 |     return folder == null ? true : note.folder === folder
146 |   })
147 |   return filteredNotes.slice((page - 1) * perPage, page * perPage)
148 | }
149 | 
150 | export const fetchNote = async (id: number) => {
151 |   console.log('FETCHING NOTE: ' + id)
152 |   await timeout(750)
153 |   const note = notes.find((note) => note.id === id)
154 |   return note != null
155 |     ? {
156 |         ...note
157 |       }
158 |     : null
159 | }
160 | 
161 | type UpdateNotePayload = {
162 |   title?: string
163 |   description?: string
164 | }
165 | 
166 | export const updateNote = async (id: number, payload: UpdateNotePayload) => {
167 |   console.log('UPDATING NOTE: ' + id)
168 |   await timeout(750)
169 |   notes = notes.map((note) => {
170 |     if (note.id === id) {
171 |       return {
172 |         ...note,
173 |         ...payload
174 |       }
175 |     }
176 |     return note
177 |   })
178 | }
179 | 


--------------------------------------------------------------------------------
/example/public/empty.svg:
--------------------------------------------------------------------------------
1 | <svg id="9af98f83-10c5-4067-bc84-20554b2827d8" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1009.54" height="789.93" viewBox="0 0 1009.54 789.93"><defs><linearGradient id="07c62293-c0d3-4921-8e06-4e39241449cd" x1="318.22" y1="488.45" x2="630.35" y2="488.45" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>empty</title><ellipse cx="354.13" cy="741.27" rx="176.1" ry="33.36" fill="#553c9a" opacity="0.1"/><path d="M681.78,166.43c-64.72-2.24-126.36-23.14-185.22-46S379.4,72.25,316.23,60.14C275.6,52.35,229.13,51.24,196.4,73c-31.51,21-41.69,57.15-47.16,90.72-4.12,25.26-6.54,51.85,4.74,75.5,7.84,16.42,21.74,30.22,31.36,45.95,33.47,54.72,9.81,122.2-26.45,175.63-17,25.06-36.75,49-49.88,75.65S89.81,593.74,101.3,621c11.38,27,38.51,47.24,67.9,61.49,59.69,28.95,130,37.23,198.61,41.93,151.83,10.38,304.46,5.89,456.69,1.38,56.34-1.66,112.92-3.35,168.34-12.06,30.78-4.84,62.55-12.52,84.9-31.06,28.36-23.53,35.39-63.37,16.38-92.87-31.88-49.5-120-61.79-142.31-114.9-12.26-29.24.33-61.8,18.16-88.91,38.24-58.17,102.33-109.2,105.7-175.68,2.32-45.66-28.49-91.39-76.13-113-49.93-22.65-119.18-19.8-156,17.69C805.59,153.57,738.93,168.42,681.78,166.43Z" transform="translate(-95.23 -55.03)" fill="#553c9a" opacity="0.1"/><path d="M630.35,416.77l-30.63-20.65h0l15.45-23-80.9-6.45L505.2,389.15l-36.39-20.4-30.35,3.65-.36-8a225.78,225.78,0,0,0-2.51-24.9c.13-2.5.22-5.37.21-8.49,0-13.15-1.78-30.58-9.6-42.2L428,272.63,413.4,255.38a110.37,110.37,0,0,1,8-13.46c.5-.72,1-1.42,1.54-2.1,18.95-1.37,33.9-16.95,33.9-36,0-.88,0-1.76-.1-2.63,0-.35-.07-.71-.11-1.06,1.85,1,3.72,2,5.59,3,.35.5.75,1,1.19,1.59l0,0,.09.11.56.69.18.21c.2.24.41.47.62.71l.14.16c.53.59,1.09,1.19,1.69,1.78a1.8,1.8,0,0,1,.2.19l.75.7.21.19c.64.57,1.32,1.12,2,1.64l.22.16.86.59.28.18c.33.2.67.41,1,.6l.12.07c.39.21.79.41,1.19.6l.2.08q.51.22,1,.42l.31.11c.35.12.69.23,1.05.33l.22.06c.44.11.88.2,1.33.27h.05a10.88,10.88,0,0,0,1.28.13h.29a11,11,0,0,0,1.15,0h.25a11.85,11.85,0,0,0,1.43-.17,15.78,15.78,0,0,0,6.3-2.26,5.5,5.5,0,0,0,1.28-1.19c2-2.62-.2-5.49-.2-5.49h0c-.78-1.86-5.84-3.17-5.84-3.17s-16-6.68-16-12-4-32.92-45.29-39.23c0,0-26.86-1.51-34.41,12.87l-.16,1.68c-2.22,1.39-4.06,4.18-6.25,5a10.21,10.21,0,0,0-2.71,1l0-.19h0a2.58,2.58,0,0,0-.61.79,8,8,0,0,0-.83,3,11.3,11.3,0,0,1-1.31,3.63,8.07,8.07,0,0,1-.6.92h0l-.17.27a7.3,7.3,0,0,0,3.4-.55,16.93,16.93,0,0,1-1,4,3.32,3.32,0,0,0,3.08-1.84l0-.08.13-.18a8.44,8.44,0,0,0,.62-1.45l-.11.12c.2-.65.38-1.31.6-1.95a3.06,3.06,0,0,1,.49-1,2.42,2.42,0,0,1,2.07-.69l-.41,8.67h.18a11.83,11.83,0,0,1-.88,1.82c-1.42,2.3-4,3.87-4.95,6.39a9.4,9.4,0,0,0-.46,3.78c0,.75.09,1.51.15,2.26v-.06c.14,2,.18,3.9-.9,5.51-.74,1.1-1.93,1.93-2.34,3.18a3.1,3.1,0,0,0-.15,1.08,12.13,12.13,0,0,0,.68,3.21.14.14,0,0,0,0-.06,4.88,4.88,0,0,1,.17,2.36c-.45,2-2.88,3.67-2.76,5.58a2.15,2.15,0,0,0,.11.74,4.05,4.05,0,0,0,2.26,2,8.8,8.8,0,0,0,5.08,1.12,6.68,6.68,0,0,0,1.9-.65c-.7,1.61-1.42,3.2-2.15,4.71-.11.24-.23.48-.35.72,0,0-6.18-4.13-9.69,4.29a18.68,18.68,0,0,0-2.17,5.64,13.42,13.42,0,0,1-.74,2.32,14.93,14.93,0,0,1-6.68,6c-7.16,3.28-36.08,39.35-36.59,48.69a54.49,54.49,0,0,1-1.84,10.78,64.15,64.15,0,0,0-1.72,25.49,48.77,48.77,0,0,0,1.77,8.13c3.07,9.33,5.12,26.74,5.12,26.74l3.32,30.22a86,86,0,0,0,.54,12.49c-3.39,3.87-17,20-11.8,24.39,4,3.46,11,2.89,14.93,2.18-3.31,8.19-8.52,22.43-9.21,32.21-1,14.47,1.71,33.64,6,41s18.59,26.24,18.59,26.24-.67,25.9,4.44,35.31,7.17,28.93,7.17,28.93,4.77,16.48,2.38,22.54,4.43,11.1-2.73,15.13-16.32,94.86-16.32,94.86-3.69,59.53,0,62.56a3.75,3.75,0,0,0,.63.37v20s-2.56,4.2,7.85,5.05c7.13.57,27.34,1.86,39.33,2.61l9.29.58s22,4.38,31.72,0,26.95-4.28,24.39-15.85a32.92,32.92,0,0,0-1.36-4.63c-2.81-7.18-7.58-8-16.37-10-.51-.11-1-.21-1.45-.29-9.26-1.61-12.3,2.7-17.49-2.91-4.51-4.85-18.87-10.28-23.76-12,.12-.36.27-.71.39-1.08a7.32,7.32,0,0,1-3.71-1.81l13.25.84,7.89.49s18.7,3.73,27,0,22.9-3.63,20.72-13.46a28.21,28.21,0,0,0-1.15-3.94c-2.39-6.1-6.45-6.77-13.92-8.46-.43-.09-.83-.18-1.23-.25-7.87-1.37-10.45,2.29-14.86-2.47-3.78-4.06-15.71-8.61-20-10.16,0-2.22-3-5.38-4.89-8.55-2.22-3.7,1.88-16.65,1.88-16.65L411,658.74a10.38,10.38,0,0,1,2.8-.8s10.58-10.1,8.19-20.86a69.13,69.13,0,0,1-.76-9.83c3.48-3.23,8.27-8,9.63-10.94,2.22-4.79,0-28,0-28V499.56l17.7,1.79L464.62,503l4.89.5,16.06,1.62,36.91,3.73,33.26-6.3,14.39-2.72,29.59-5.6V421.83ZM386.74,176.86l-2.06-.22C385.36,176.67,386.08,176.8,386.74,176.86Z" transform="translate(-95.23 -55.03)" fill="url(#07c62293-c0d3-4921-8e06-4e39241449cd)"/><path d="M558.56,463.78c-10,14.31-45.95,6.73-45.95,6.73l-27.86-26.07L481,440.91l6.29-13.36s2,.55,5.43,1.53C510.73,434.31,567,451.75,558.56,463.78Z" transform="translate(-95.23 -55.03)" fill="#efb7b9"/><path d="M492.7,429.08c-1.23,4.28-4.6,10.69-7.95,15.36L481,440.91l6.29-13.36S489.31,428.1,492.7,429.08Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M397.15,278.42s-25.68,11.39-24.42,39.36a461.14,461.14,0,0,0,5.88,53.76s-5.25,42.09,16.61,52.94,42.09,19.77,42.09,19.77,34.2,3.68,38.45,5.2,17.53-21.72,15.08-25.34S457,412.9,453,406.86s-13.25-9.77-13.25-9.77-9.55-5.78-10.2-11,1.87-9.11,2.51-11.4,2.26-24.4,2.26-24.4S445.1,271.59,397.15,278.42Z" transform="translate(-95.23 -55.03)" fill="#dce6f2"/><path d="M414.1,370.39s-35.23,5.9-31.82,18.23C382.28,388.62,395.07,375.31,414.1,370.39Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M414.37,375.38S395,391.19,398.79,392,414.37,375.38,414.37,375.38Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M423.68,380.89s-5.19,10.63-2,9.91S423.68,380.89,423.68,380.89Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M494,430.21l-2.14-.61c.61-2,.78-3.62.28-4.37-2.45-3.62-33.82-11.2-37.81-17.25s-13.25-9.77-13.25-9.77-9.55-5.78-10.2-11,1.87-9.11,2.51-11.4,2.26-24.41,2.26-24.41,10.75-78.69-37.2-71.86c0,0-25.68,11.4-24.43,39.37a459.85,459.85,0,0,0,5.89,53.76s-5.25,42.09,16.61,52.94,42.09,19.77,42.09,19.77,34.19,3.67,38.45,5.2c1.61.58,4.52-2.41,7.37-6.52l1.62,1.51,27.86,26.06s35.95,7.59,45.95-6.72C568.31,452.87,512.05,435.43,494,430.21Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M382.37,173.44a8.5,8.5,0,0,0-2.77,1.07c-1,.83-1,2.25-1.25,3.49a11.48,11.48,0,0,1-2,4.78,7.19,7.19,0,0,0,3.33-.55,17.14,17.14,0,0,1-1,4,3.24,3.24,0,0,0,3-1.83,19.26,19.26,0,0,0,1.25-3.51,2.89,2.89,0,0,1,.48-1c.92-1.09,2.63-.6,4.05-.46a6.65,6.65,0,0,0,6.08-2.92c1.51-2.29,1.6-8.15-2-8.77C387.78,167.12,385.44,172.3,382.37,173.44Z" transform="translate(-95.23 -55.03)" fill="#965d7b"/><g opacity="0.1"><path d="M379.5,175.74c.09-.49.15-1,.26-1.49h0c-.95.83-1,2.24-1.25,3.49a11,11,0,0,1-.59,2.11A11.46,11.46,0,0,0,379.5,175.74Z" transform="translate(-95.23 -55.03)"/><path d="M379.82,184a16.63,16.63,0,0,0,1-4,7.16,7.16,0,0,1-3.17.55,11.57,11.57,0,0,1-1.15,2,7.12,7.12,0,0,0,3.32-.54,16.63,16.63,0,0,1-1,4,3.25,3.25,0,0,0,3-1.83,7.46,7.46,0,0,0,.6-1.43A3,3,0,0,1,379.82,184Z" transform="translate(-95.23 -55.03)"/><path d="M388.6,177.2c-1.42-.14-3.14-.63-4.06.46a3.09,3.09,0,0,0-.48,1c-.09.26-.17.53-.24.8.95-.75,2.49-.35,3.78-.22a6.68,6.68,0,0,0,6.08-2.92,5.54,5.54,0,0,0,.67-1.57A6.66,6.66,0,0,1,388.6,177.2Z" transform="translate(-95.23 -55.03)"/></g><polygon points="317.24 201 332.49 219.34 330.5 237.85 312.07 209 317.24 201" fill="#dce6f2"/><polygon points="332.48 219.34 330.61 236.75 330.49 237.85 313.86 211.81 312.07 209 312.59 208.19 317.23 201 318.26 202.24 332.48 219.34" opacity="0.1"/><path d="M435.63,231.2c-5.16,1.48-10.09,6.56-14.38,12.73a108.65,108.65,0,0,0-7.76,13.34c-1.41,2.82-2.65,5.53-3.68,7.89l-.72,1.68c-1.74,4.11-2.71,6.86-2.71,6.86S366.88,244,373.13,242c2.1-.67,4.86-5.17,7.59-10.84l.34-.72c1.73-3.64,3.43-7.7,4.94-11.52,3.09-7.85,5.38-14.67,5.38-14.67S451.38,226.7,435.63,231.2Z" transform="translate(-95.23 -55.03)" fill="#efb7b9"/><path d="M459.26,202.58s9.12,16.5,21.37,14.25,7.21-8.86,7.21-8.86Z" transform="translate(-95.23 -55.03)" fill="#444053"/><path d="M441.59,773.73c-8.08,3.69-26.35,0-26.35,0l-7.7-.48c-10-.64-26.74-1.72-32.66-2.2-8.64-.71-6.52-4.25-6.52-4.25V745.41l41.92-10.62s16.57,5.67,21.11,10.62c4.31,4.72,6.83,1.09,14.52,2.45.38.07.78.15,1.2.25,7.3,1.67,11.26,2.33,13.6,8.38a28.1,28.1,0,0,1,1.13,3.9C464,770.13,449.66,770.06,441.59,773.73Z" transform="translate(-95.23 -55.03)" fill="#a36468"/><path d="M460.71,756.49a31.34,31.34,0,0,1-4.72,2.42c-5.5,2.51-10.73,5.57-16.29,7.94s-11.55,4.06-17.57,3.61c-3.15-.23-6.37-1-9.38-.1a21.66,21.66,0,0,0-5.21,2.89c-10-.64-26.74-1.72-32.66-2.2-8.64-.71-6.52-4.25-6.52-4.25v-2.5c.31,0,.66-.09,1.06-.12a18.88,18.88,0,0,1,6.1.91c4.34,1.18,8.66,2.34,13,3.5a10.27,10.27,0,0,1,5-6.38,15.94,15.94,0,0,1,8.06-1.85c6.73.09,13.1,3.28,19.82,3.6a10.92,10.92,0,0,0,5.49-.92c.92-.46,1.73-1.13,2.63-1.64a19.2,19.2,0,0,1,4.53-1.53A99.76,99.76,0,0,0,447,755.69c1.2-.47,2.6-1.32,2.44-2.6-.21-1.7-2.88-1.9-3.58-3.46a2,2,0,0,1,.08-1.77c.38.07.78.15,1.2.25C454.41,749.78,458.37,750.44,460.71,756.49Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M433.05,820.53c-9.5,4.34-31,0-31,0L393,820c-11.72-.75-31.46-2-38.43-2.59-10.17-.84-7.67-5-7.67-5V787.2l49.33-12.5s19.5,6.67,24.84,12.5c5.07,5.55,8,1.28,17.09,2.88.45.08.92.18,1.41.29,8.59,2,13.25,2.75,16,9.87a32.1,32.1,0,0,1,1.33,4.59C459.38,816.29,442.55,816.2,433.05,820.53Z" transform="translate(-95.23 -55.03)" fill="#a36468"/><path d="M455.55,800.24a37.23,37.23,0,0,1-5.55,2.85c-6.47,2.95-12.63,6.55-19.17,9.34s-13.59,4.77-20.68,4.25c-3.7-.27-7.49-1.2-11-.12A25.5,25.5,0,0,0,393,820c-11.72-.75-31.46-2-38.43-2.59-10.17-.84-7.67-5-7.67-5v-2.94a12.5,12.5,0,0,1,1.25-.14,21.94,21.94,0,0,1,7.18,1.07l15.29,4.12a12.1,12.1,0,0,1,5.93-7.51,18.66,18.66,0,0,1,9.49-2.18c7.92.11,15.41,3.86,23.32,4.24A12.91,12.91,0,0,0,415.8,808c1.09-.55,2-1.34,3.1-1.93a21.75,21.75,0,0,1,5.33-1.8,119.69,119.69,0,0,0,15.16-4.92c1.41-.56,3.06-1.56,2.87-3.06-.25-2-3.39-2.24-4.22-4.08a2.41,2.41,0,0,1,.1-2.08c.45.08.92.18,1.41.29C448.14,792.34,452.8,793.12,455.55,800.24Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M411.55,647.54l-2.67,62.83s-4,12.83-1.83,16.5,5.83,7.33,4.5,9.5S394.22,762,389.05,753s-10.27-48-10.27-48l4.77-48.17Z" transform="translate(-95.23 -55.03)" fill="#444053"/><path d="M423.13,491l7.42,9.92V587.2s2.17,23,0,27.75-13.17,14.25-13.17,14.25l-9.25-47.5,2-50.25Z" transform="translate(-95.23 -55.03)" fill="#444053"/><path d="M411.55,647.54l-2.67,62.83s-4,12.83-1.83,16.5,5.83,7.33,4.5,9.5S394.22,762,389.05,753s-10.27-48-10.27-48l4.77-48.17Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M423.13,491l7.42,9.92V587.2s2.17,23,0,27.75-13.17,14.25-13.17,14.25l-9.25-47.5,2-50.25Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M430.55,454.2v46.67l-8.33,36.33s-2.67,87.67-.34,98.33-8,20.67-8,20.67-6,.67-6,5.33-10,18-10,18l.33,26s4.34,48.67-2.33,58,2.33,10.67,2.33,10.67c-8.33,27.33-48.33,21-51.94,18s0-62,0-62,8.94-90,15.94-94,.34-9,2.67-15-2.33-22.33-2.33-22.33-2-19.34-7-28.67-4.34-35-4.34-35-14-18.67-18.16-26-6.84-26.33-5.84-40.67c.68-9.69,5.77-23.8,9-31.92,1.55-3.89,2.67-6.41,2.67-6.41l.95.25,54.62,14.3Z" transform="translate(-95.23 -55.03)" fill="#444053"/><path d="M435.63,231.2c-5.16,1.48-10.09,6.56-14.38,12.73l-1.12,0a35.72,35.72,0,0,1-31-17.93,35.18,35.18,0,0,1-3.14-7.15c3.09-7.85,5.38-14.67,5.38-14.67S451.38,226.7,435.63,231.2Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M455.88,206.2A35.75,35.75,0,1,1,389,188.68a34.93,34.93,0,0,1,3.78-5.46A36.18,36.18,0,0,1,401,176a35.75,35.75,0,0,1,54.83,27.58C455.85,204.46,455.88,205.33,455.88,206.2Z" transform="translate(-95.23 -55.03)" fill="#efb7b9"/><path d="M425.84,291.78l-.12,1.1-16.63-26c-1.74,4.11-2.71,6.86-2.71,6.86S366.88,244,373.13,242c2.1-.67,4.86-5.17,7.59-10.84l.34-.72c2.9,8.64,19.75,25.91,26.76,32.83.81.8,1.48,1.46,2,1.94l1.07,1,.56.56C414,269.4,424.76,281,425.84,291.78Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M438.27,380l-1.82,58.57L436.13,449s-21.56-2-41.68-4.2c-16.2-1.77-31.47-3.68-33.82-4.8-3-1.41-9.43-2.5-14.5-3.19-3.92-.53-7-.81-7-.81s-1.15.34-2.92.66c-3.86.7-10.64,1.27-14.59-2.16-5.05-4.39,8.22-20.34,11.53-24.17l.73-.83-1.25-11.55L329.38,368s-2-17.25-5-26.5a48.88,48.88,0,0,1-1.73-8.05,64.48,64.48,0,0,1,1.68-25.26,55.08,55.08,0,0,0,1.8-10.69c.5-9.25,28.75-45,35.75-48.25a14.84,14.84,0,0,0,7.16-7.14,13.64,13.64,0,0,0,1.09-3.11c3-13,10.59-7.84,10.59-7.84,1.83,10.17,30.16,37.09,30.16,37.09l.56.56c2.81,2.88,15.33,16.4,14.44,27.94a33.87,33.87,0,0,0,1.89,12.64,213.75,213.75,0,0,1,9.85,56Z" transform="translate(-95.23 -55.03)" fill="#dce6f2"/><path d="M398.13,310.45s-7,17-12.25,19.75S400.63,336,398.13,310.45Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M403.38,342.2s-16,2-16,5S403.38,342.2,403.38,342.2Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M420.13,361.7s-23.25,49.5-29.75,51S420.13,361.7,420.13,361.7Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M410.44,270.76l-19.23,8.36L368,244.06a13.64,13.64,0,0,0,1.09-3.11c3-13,10.59-7.84,10.59-7.84,1.83,10.17,30.16,37.09,30.16,37.09Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M411.44,268.76l-19.23,8.36L369,242.06a13.64,13.64,0,0,0,1.09-3.11c3-13,10.59-7.84,10.59-7.84,1.83,10.17,30.16,37.09,30.16,37.09Z" transform="translate(-95.23 -55.03)" fill="#dce6f2"/><path d="M436.13,449s-21.56-2-41.68-4.2l36.1,9.45v11c-1.58,1.43-2.95,2.17-3.84,1.79-4.16-1.75-38.11-7.25-38.11-7.25s-19.72-10-41-22a16.43,16.43,0,0,1-1.5-.94,23.64,23.64,0,0,1-6.3-6.31c-3.93-5.69-5.85-13-6.68-20.17a87.22,87.22,0,0,1-.52-12.38A101.51,101.51,0,0,1,333.88,384a460.08,460.08,0,0,1-3-54c.25-28,26.5-38,26.5-38,48.25-4.25,33.29,73.75,33.29,73.75s-2.79,22-3.55,24.25-3.49,6-3.12,11.25,9.59,11.53,9.59,11.53,9,4.22,12.71,10.47c2.7,4.61,20.24,10.86,30.15,15.32Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M452.29,184a11.32,11.32,0,0,1-1,4.78,29.55,29.55,0,0,1-1.78,3.56,16.4,16.4,0,0,1-4.38,5.44c-2.31,1.65-5.23,2.11-8,2.78s-5.65,1.74-7.23,4.1a14.34,14.34,0,0,0-1.69,4.9,10.54,10.54,0,0,1-2,4.74,3.93,3.93,0,0,1-4.68,1.12,4.73,4.73,0,0,1-1.81-2.33c-1.14-2.57-1.43-5.42-1.89-8.19s-1.11-5.62-2.81-7.85-4.71-3.7-7.38-2.83a7.11,7.11,0,0,0-4,3.88,22.24,22.24,0,0,0-1.51,5.52q-1.86,10.18-4.39,20.24a1.86,1.86,0,0,1-.33.76,1.44,1.44,0,0,1-1,.42c-2.24.3-4.39-1.27-6.65-1.1a3.82,3.82,0,0,0-.69.11,35.73,35.73,0,0,1,3.61-40.8l.18-.05a10.78,10.78,0,0,0,4-2.52,42.22,42.22,0,0,0,4-4.63l.8-1a45.61,45.61,0,0,1,7.8-7.41,8,8,0,0,1,2.66-1.44,7.88,7.88,0,0,1,2.52-.08,63.57,63.57,0,0,0,10.41.39,66.79,66.79,0,0,1,7.31-.74c6.33.18,11.73,4.65,15.73,9.55C450.24,177.83,452.16,180.72,452.29,184Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M384.33,189.63c-1.39,2.28-3.9,3.83-4.84,6.33-1.38,3.63.95,8.15-1.19,11.39-.71,1.09-1.88,1.9-2.28,3.15-.68,2.11,1.18,4.36.7,6.53s-3.34,4-2.58,6.12a4,4,0,0,0,2.2,2,8.6,8.6,0,0,0,5,1.11c2.73-.45,4.76-3.13,7.53-3.33,2.25-.16,4.4,1.4,6.64,1.11a1.5,1.5,0,0,0,1-.43,1.73,1.73,0,0,0,.33-.76q2.52-10.05,4.4-20.24a21.8,21.8,0,0,1,1.5-5.52,7.17,7.17,0,0,1,4-3.88c2.67-.86,5.67.6,7.38,2.83s2.36,5.08,2.82,7.85.75,5.62,1.88,8.19a4.78,4.78,0,0,0,1.82,2.34c1.5.87,3.52.18,4.67-1.12a10.43,10.43,0,0,0,2-4.75,14.28,14.28,0,0,1,1.69-4.89c1.58-2.36,4.47-3.43,7.23-4.1s5.67-1.14,8-2.79a16.46,16.46,0,0,0,4.38-5.43c1.48-2.58,2.86-5.38,2.74-8.35-.13-3.24-2.05-6.13-4.1-8.65-4-4.9-9.41-9.37-15.74-9.54a62.2,62.2,0,0,0-7.31.74,62.57,62.57,0,0,1-10.41-.4,8.18,8.18,0,0,0-2.52.09,7.54,7.54,0,0,0-2.65,1.44,45.63,45.63,0,0,0-7.81,7.4,57.31,57.31,0,0,1-4.82,5.6,10.85,10.85,0,0,1-4,2.53c-1,.28-2,.08-2.95.39C386.09,183.52,385.7,187.37,384.33,189.63Z" transform="translate(-95.23 -55.03)" fill="#965d7b"/><path d="M480.63,216.82c-8,1.47-14.63-5-18.3-9.72a39.22,39.22,0,0,1-3.07-4.52l27.46,5.18,1.11.21S492.88,214.58,480.63,216.82Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><g opacity="0.1"><path d="M376.72,214.17a8.33,8.33,0,0,0-.58-3.84c0,.1-.09.2-.12.3-.43,1.34.15,2.73.52,4.12A3,3,0,0,0,376.72,214.17Z" transform="translate(-95.23 -55.03)"/><path d="M379.1,197.8a22.22,22.22,0,0,0,.08,4.15A22.28,22.28,0,0,0,379.1,197.8Z" transform="translate(-95.23 -55.03)"/><path d="M448.55,188.45a16.4,16.4,0,0,1-4.38,5.44c-2.31,1.65-5.22,2.11-8,2.78s-5.65,1.74-7.23,4.1a14.41,14.41,0,0,0-1.69,4.9,10.47,10.47,0,0,1-2,4.75c-1.15,1.3-3.17,2-4.67,1.12a4.78,4.78,0,0,1-1.82-2.34c-1.13-2.57-1.43-5.41-1.88-8.19s-1.12-5.62-2.82-7.85-4.71-3.7-7.38-2.83a7.14,7.14,0,0,0-4,3.88,21.8,21.8,0,0,0-1.5,5.52q-1.87,10.19-4.4,20.24a1.73,1.73,0,0,1-.33.76,1.5,1.5,0,0,1-1,.43c-2.24.29-4.39-1.27-6.64-1.11-2.77.2-4.8,2.88-7.53,3.32a8.45,8.45,0,0,1-5-1.11,5.35,5.35,0,0,1-1.83-1.3,2.7,2.7,0,0,0-.37,2.33,3.9,3.9,0,0,0,2.2,2,8.45,8.45,0,0,0,5,1.11c2.73-.44,4.76-3.12,7.53-3.32,2.25-.16,4.4,1.4,6.64,1.11a1.5,1.5,0,0,0,1-.43,1.73,1.73,0,0,0,.33-.76q2.52-10,4.4-20.24a21.8,21.8,0,0,1,1.5-5.52,7.14,7.14,0,0,1,4-3.88c2.67-.87,5.67.6,7.38,2.83s2.36,5.08,2.82,7.85.75,5.62,1.88,8.19a4.78,4.78,0,0,0,1.82,2.34c1.5.87,3.52.18,4.67-1.12a10.47,10.47,0,0,0,2-4.75,14.41,14.41,0,0,1,1.69-4.9c1.58-2.36,4.47-3.42,7.23-4.1s5.67-1.13,8-2.78a16.4,16.4,0,0,0,4.38-5.44c1.48-2.57,2.86-5.37,2.74-8.34a10.74,10.74,0,0,0-.12-1.14A19.65,19.65,0,0,1,448.55,188.45Z" transform="translate(-95.23 -55.03)"/></g><path d="M451.33,188.75a35.33,35.33,0,0,1,4.45,14.85c-8.91-5-17.29-10.49-21.52-12.4-7.37-3.33-34.93-2.83-45.29-2.52a34.93,34.93,0,0,1,3.78-5.46A36.18,36.18,0,0,1,401,176a35.77,35.77,0,0,1,50.38,12.73Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M483.13,212.58c-4.81,1.48-12.66-1.38-20.8-5.48a39.22,39.22,0,0,1-3.07-4.52l27.46,5.18C488.54,209,489,210.77,483.13,212.58Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M422.26,154.08s-26.25-1.5-33.63,12.75l-1.19,12.63-2-.22-.4,8.59s40.12-1.75,49.25,2.37,37.5,24.88,48.87,21.38-1-6.75-1-6.75S466.51,198.2,466.51,193,462.63,160.33,422.26,154.08Z" transform="translate(-95.23 -55.03)" fill="#444053"/><path d="M371.63,622.28s16.75,16.25,24,15C395.63,637.28,375.13,635.53,371.63,622.28Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M368.13,629.81s1.5,8.36,5.5,7.54S368.13,629.81,368.13,629.81Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M394.38,769.53s-23.78,18.5-19.77,19S394.38,769.53,394.38,769.53Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><polygon points="330.96 347.33 407.96 334.8 407.96 407.7 334.8 403.87 330.96 347.33" fill="#553c9a"/><polygon points="330.96 347.33 407.96 334.8 407.96 407.7 334.8 403.87 330.96 347.33" opacity="0.05"/><polygon points="407.96 334.8 500.3 341.71 495.19 405.15 407.96 407.7 407.96 334.8" fill="#553c9a"/><polygon points="407.96 334.8 500.3 341.71 495.19 405.15 407.96 407.7 407.96 334.8" opacity="0.1"/><polygon points="436.35 312.55 407.96 334.8 500.3 341.71 515.39 318.94 436.35 312.55" fill="#553c9a"/><polygon points="303.08 323.03 372.4 314.59 407.96 334.8 330.96 347.33 303.08 323.03" fill="#553c9a"/><polygon points="424.84 353.73 424.84 453.4 388.77 449.7 373.08 448.1 368.3 447.6 352.62 445.99 330.96 443.77 330.96 347.33 407.95 352.57 424.84 353.73" fill="#553c9a"/><polygon points="500.3 341.71 500.3 438.91 471.39 444.46 457.33 447.16 424.84 453.4 424.84 353.73 500.3 341.71" fill="#553c9a"/><polygon points="500.3 341.71 500.3 438.91 471.39 444.46 457.33 447.16 424.84 453.4 424.84 353.73 500.3 341.71" opacity="0.05"/><polygon points="303.08 368.31 330.96 347.33 424.84 353.73 411.02 377.01 303.08 368.31" fill="#553c9a"/><polygon points="303.08 368.31 330.96 347.33 424.84 353.73 411.02 377.01 303.08 368.31" fill="#fff" opacity="0.1"/><polygon points="500.3 341.71 424.84 353.73 449.4 375.73 530.23 362.17 500.3 341.71" fill="#553c9a"/><polygon points="500.3 341.71 424.84 353.73 449.4 375.73 530.23 362.17 500.3 341.71" fill="#fff" opacity="0.1"/><polygon points="471.39 444.46 457.33 447.16 457.33 426.39 470.5 423.07 471.39 444.46" fill="#fff" opacity="0.1"/><polygon points="388.77 435.96 388.77 449.7 373.08 448.1 373.08 435.96 388.77 435.96" fill="#fff" opacity="0.1"/><polygon points="368.3 440.29 368.3 447.6 352.62 445.99 352.62 440.29 368.3 440.29" fill="#fff" opacity="0.1"/><path d="M510.63,483.7c-10.75,13.75-46.25,4.25-46.25,4.25L438,460.43l-3.58-3.73,7-13s2,.66,5.34,1.82C464.44,451.7,519.68,472.13,510.63,483.7Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M509.63,481.7c-10.75,13.75-46.25,4.25-46.25,4.25L437,458.43l-3.58-3.73,7-13s2,.66,5.34,1.82C463.44,449.7,518.68,470.13,509.63,481.7Z" transform="translate(-95.23 -55.03)" fill="#efb7b9"/><path d="M445.72,443.52c-1.46,4.2-5.17,10.42-8.76,14.91l-3.58-3.73,7-13S442.39,442.36,445.72,443.52Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M358.38,288s-26.25,10-26.5,38a460.08,460.08,0,0,0,3,54s-7.5,41.75,13.75,53.75,41,22,41,22,33.95,5.5,38.12,7.25,18.66-20.75,16.41-24.5-33.16-13-36.83-19.25-12.71-10.46-12.71-10.46-9.22-6.29-9.59-11.54,2.35-9,3.12-11.25,3.56-24.25,3.56-24.25S406.63,283.7,358.38,288Z" transform="translate(-95.23 -55.03)" fill="#dce6f2"/><path d="M370.38,380.7s-35.5,4-32.75,16.5C337.63,397.2,351.12,384.59,370.38,380.7Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M370.38,385.7s-20.15,14.75-16.45,15.75S370.38,385.7,370.38,385.7Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M379.38,391.7s-5.75,10.34-2.5,9.8S379.38,391.7,379.38,391.7Z" transform="translate(-95.23 -55.03)" opacity="0.1"/><path d="M749,167.42s-38-2.29-33.56,24.37c0,0-.89,4.71,3.38,6.85,0,0,.07-2,3.9-1.31a17.51,17.51,0,0,0,4.13.2,8.57,8.57,0,0,0,5.06-2.09h0s10.69-4.41,14.85-21.89c0,0,3.08-3.82,3-4.8l-6.42,2.75s2.19,4.63.46,8.48c0,0-.2-8.31-1.44-8.12-.25,0-3.33,1.61-3.33,1.61s3.77,8.06.92,13.93c0,0,1.08-9.94-2.1-13.35l-4.52,2.64s4.41,8.33,1.42,15.13c0,0,.77-10.43-2.37-14.49l-4.1,3.19s4.15,8.22,1.62,13.86c0,0-.33-12.14-2.51-13.06,0,0-3.58,3.16-4.12,4.46,0,0,2.83,6,1.07,9.11,0,0-1.08-8.09-2-8.13,0,0-3.57,5.36-3.94,9a19.46,19.46,0,0,1,3.07-9.54,10.71,10.71,0,0,0-5.46,2.83s.55-3.79,6.34-4.12c0,0,3-4.07,3.74-4.32,0,0-5.76-.48-9.25,1.07,0,0,3.07-3.57,10.31-2l4-3.3s-7.58-1-10.8.11c0,0,3.7-3.16,11.89-.86l4.4-2.63s-6.46-1.4-10.31-.89c0,0,4.06-2.19,11.6.18l3.15-1.41s-4.74-.93-6.12-1.08-1.46-.53-1.46-.53a16.36,16.36,0,0,1,8.89,1S749.14,167.84,749,167.42Z" transform="translate(-95.23 -55.03)" fill="#553c9a"/><path d="M864.46,300.76s-38-2.29-33.56,24.37c0,0-.89,4.71,3.38,6.85,0,0,.07-2,3.91-1.31a17.51,17.51,0,0,0,4.13.2,8.56,8.56,0,0,0,5-2.08h0s10.7-4.42,14.86-21.9c0,0,3.07-3.81,2.95-4.79l-6.42,2.74s2.19,4.63.47,8.48c0,0-.21-8.31-1.44-8.12-.25,0-3.34,1.61-3.34,1.61s3.78,8.07.93,13.93c0,0,1.08-9.94-2.11-13.35L848.75,310s4.41,8.33,1.42,15.13c0,0,.77-10.43-2.37-14.49l-4.09,3.2s4.14,8.21,1.62,13.85c0,0-.33-12.14-2.51-13.06,0,0-3.58,3.16-4.13,4.46,0,0,2.84,6,1.08,9.11,0,0-1.08-8.09-2-8.13,0,0-3.57,5.36-3.94,9a19.52,19.52,0,0,1,3.08-9.54,10.76,10.76,0,0,0-5.47,2.83s.56-3.79,6.35-4.12c0,0,2.95-4.07,3.74-4.32,0,0-5.76-.48-9.25,1.07,0,0,3.07-3.57,10.3-1.95l4-3.3s-7.59-1-10.8.11c0,0,3.7-3.16,11.89-.86l4.4-2.63s-6.47-1.39-10.32-.89c0,0,4.07-2.19,11.61.18l3.15-1.41s-4.74-.93-6.13-1.08-1.46-.53-1.46-.53a16.39,16.39,0,0,1,8.9,1S864.58,301.18,864.46,300.76Z" transform="translate(-95.23 -55.03)" fill="#553c9a" opacity="0.1"/><path d="M633.61,277.09s8.75-37.09-18.29-37.22c0,0-4.49-1.68-7.32,2.16,0,0,1.93.41.62,4.07a17.8,17.8,0,0,0-.9,4,8.59,8.59,0,0,0,1.19,5.33h0s2.53,11.3,19,18.38c0,0,3.24,3.68,4.22,3.72l-1.6-6.79s-4.94,1.37-8.44-1c0,0,8.23,1.21,8.24,0,0-.25-1-3.56-1-3.56s-8.59,2.34-13.89-1.47c0,0,9.61,2.76,13.52.21L627.16,260s-9,2.93-15.16-1.18c0,0,10.15,2.54,14.69.14l-2.45-4.58s-8.8,2.68-13.93-.77c0,0,12,1.74,13.3-.24,0,0-2.5-4.07-3.69-4.83,0,0-6.36,1.78-9.16-.49,0,0,8.15.31,8.34-.55,0,0-4.67-4.43-8.23-5.43a19.6,19.6,0,0,1,8.89,4.66,10.79,10.79,0,0,0-1.86-5.87s3.64,1.2,3,7c0,0,3.5,3.6,3.61,4.42,0,0,1.45-5.59.52-9.3,0,0,3,3.64.17,10.49l2.56,4.55s2.32-7.3,1.73-10.66c0,0,2.49,4.18-1.18,11.86l1.85,4.79s2.47-6.14,2.63-10c0,0,1.47,4.38-2.16,11.41l.86,3.34s1.72-4.51,2.1-5.85.77-1.35.77-1.35a16.38,16.38,0,0,1-2.49,8.6S633.18,277.14,633.61,277.09Z" transform="translate(-95.23 -55.03)" fill="#553c9a" opacity="0.1"/><path d="M550.39,289.73s-30.52-22.83-41.43,1.9c0,0-3.33,3.45-.94,7.58,0,0,1.14-1.61,4,1.06a17.51,17.51,0,0,0,3.34,2.44,8.58,8.58,0,0,0,5.37,1h0s11.36,2.19,24.44-10.12c0,0,4.67-1.5,5.11-2.38L543.39,290s-.72,5.07-4.27,7.34c0,0,4.39-7.06,3.25-7.57-.23-.11-3.67-.5-3.67-.5s-1.28,8.82-6.88,12.15c0,0,6.37-7.71,5.58-12.31l-5.23-.28s-.89,9.39-7.13,13.43c0,0,6.37-8.29,6-13.41l-5.18.42s-1.05,9.13-6.26,12.45c0,0,6.39-10.32,5.08-12.28,0,0-4.73.67-5.9,1.45,0,0-.91,6.54-4.11,8.2,0,0,3.55-7.35,2.83-7.86,0,0-5.93,2.51-8.26,5.37a19.53,19.53,0,0,1,7.82-6.28,10.77,10.77,0,0,0-6.12-.64s2.54-2.86,7.56.05c0,0,4.7-1.77,5.5-1.55,0,0-4.55-3.57-8.32-4.19,0,0,4.54-1.3,9.69,4l5.19-.53s-5.77-5-9.08-5.84c0,0,4.83-.61,10.4,5.81l5.12.23s-4.63-4.72-8.12-6.42c0,0,4.59.4,9.59,6.53l3.41.55s-3.45-3.38-4.53-4.26-.93-1.25-.93-1.25a16.43,16.43,0,0,1,6.89,5.72S550.26,290.14,550.39,289.73Z" transform="translate(-95.23 -55.03)" fill="#553c9a" opacity="0.1"/><path d="M652,77.62s-30.52-22.84-41.43,1.9c0,0-3.33,3.45-.94,7.58,0,0,1.14-1.61,4,1.06a17.79,17.79,0,0,0,3.35,2.43,8.57,8.57,0,0,0,5.37,1h0s11.36,2.19,24.44-10.13c0,0,4.67-1.49,5.1-2.38L645,77.89s-.71,5.07-4.27,7.34c0,0,4.4-7.06,3.26-7.57-.23-.11-3.67-.5-3.67-.5S639,86,633.4,89.31c0,0,6.36-7.71,5.58-12.31l-5.23-.28s-.9,9.39-7.13,13.42c0,0,6.37-8.29,6-13.41l-5.17.42s-1.06,9.14-6.27,12.46c0,0,6.4-10.32,5.09-12.28,0,0-4.73.67-5.9,1.45,0,0-.91,6.54-4.11,8.2,0,0,3.55-7.35,2.83-7.87,0,0-5.93,2.52-8.26,5.38a19.44,19.44,0,0,1,7.82-6.28,10.7,10.7,0,0,0-6.13-.64s2.55-2.86,7.57.05c0,0,4.7-1.78,5.5-1.55,0,0-4.55-3.57-8.32-4.2,0,0,4.53-1.29,9.68,4l5.19-.53s-5.76-5-9.08-5.85c0,0,4.83-.6,10.41,5.82l5.12.22s-4.63-4.72-8.13-6.41c0,0,4.6.4,9.6,6.53l3.4.55S640,72.86,638.92,72s-.93-1.24-.93-1.24a16.4,16.4,0,0,1,6.89,5.72S651.83,78,652,77.62Z" transform="translate(-95.23 -55.03)" fill="#553c9a" opacity="0.1"/><path d="M768.62,106.55s-12.2-36.11-35.21-21.92c0,0-4.7,1-5.07,5.71,0,0,1.85-.68,2.67,3.12a18,18,0,0,0,1.37,3.91,8.66,8.66,0,0,0,3.84,3.89h0s8.12,8.25,25.88,5.52c0,0,4.69,1.42,5.55.93l-5-4.91s-3.46,3.77-7.68,3.62c0,0,7.63-3.32,7-4.39-.13-.21-2.74-2.48-2.74-2.48s-6.06,6.53-12.56,6.1c0,0,9.61-2.74,11.57-7l-4.14-3.19s-6.06,7.22-13.49,7c0,0,10-3.21,12.53-7.65l-4.5-2.59s-6,6.93-12.22,6.71c0,0,11.12-4.87,11.15-7.23,0,0-4.27-2.13-5.68-2.15,0,0-4.46,4.87-8,4.43,0,0,7.08-4.05,6.78-4.88,0,0-6.3-1.29-9.85-.25a19.49,19.49,0,0,1,10-.75,10.79,10.79,0,0,0-4.69-4s3.72-.91,6.21,4.33c0,0,4.88,1.21,5.4,1.84,0,0-1.72-5.51-4.47-8.17,0,0,4.47,1.51,5.69,8.82l4.58,2.5s-1.89-7.41-4.17-10c0,0,4.33,2.24,5.27,10.69l4.1,3.09s-1.14-6.52-3.06-9.9c0,0,3.56,2.94,4.2,10.83l2.49,2.38s-.92-4.74-1.3-6.08S761,93,761,93a16.49,16.49,0,0,1,2.43,8.62S768.27,106.81,768.62,106.55Z" transform="translate(-95.23 -55.03)" fill="#553c9a" opacity="0.1"/><path d="M689,108.33S651.1,104.11,654.23,131c0,0-1.13,4.66,3,7,0,0,.17-2,4-1.1a18.4,18.4,0,0,0,4.12.41,8.6,8.6,0,0,0,5.15-1.83h0s10.91-3.87,16-21.12c0,0,3.26-3.65,3.19-4.64l-6.55,2.42s2,4.73,0,8.49c0,0,.21-8.31-1-8.18-.25,0-3.41,1.44-3.41,1.44s3.36,8.25.22,14c0,0,1.58-9.88-1.43-13.44l-4.65,2.4s4,8.55.65,15.19c0,0,1.3-10.38-1.63-14.59l-4.25,3s3.72,8.41.91,13.92c0,0,.29-12.14-1.84-13.17,0,0-3.74,3-4.35,4.24,0,0,2.53,6.1.62,9.15,0,0-.67-8.13-1.55-8.21,0,0-3.84,5.17-4.4,8.82a19.47,19.47,0,0,1,3.56-9.38,10.76,10.76,0,0,0-5.6,2.55s.74-3.75,6.54-3.79c0,0,3.15-3.91,4-4.12,0,0-5.73-.77-9.3.6,0,0,3.25-3.42,10.39-1.43l4.21-3.09S663.22,115,660,116c0,0,3.86-3,11.92-.25l4.53-2.41s-6.39-1.72-10.26-1.41c0,0,4.17-2,11.58.77l3.22-1.25s-4.69-1.17-6.07-1.39-1.43-.6-1.43-.6a16.45,16.45,0,0,1,8.84,1.44S689.07,108.75,689,108.33Z" transform="translate(-95.23 -55.03)" fill="#553c9a" opacity="0.1"/><path d="M1020.6,402.5s-37.88-4.22-34.75,22.64c0,0-1.13,4.66,3,7,0,0,.17-2,4-1.11a17.3,17.3,0,0,0,4.12.41,8.53,8.53,0,0,0,5.15-1.83h0s10.91-3.87,15.95-21.11c0,0,3.26-3.66,3.19-4.64l-6.55,2.41s2,4.74,0,8.5c0,0,.21-8.32-1-8.18-.25,0-3.41,1.43-3.41,1.43s3.36,8.25.22,14c0,0,1.58-9.87-1.43-13.44l-4.65,2.41s4,8.55.66,15.19c0,0,1.29-10.38-1.64-14.6l-4.25,3s3.72,8.41.91,13.91c0,0,.29-12.14-1.84-13.16,0,0-3.73,3-4.35,4.24,0,0,2.54,6.1.62,9.15,0,0-.67-8.13-1.55-8.21,0,0-3.84,5.17-4.4,8.82a19.47,19.47,0,0,1,3.56-9.38,10.67,10.67,0,0,0-5.6,2.55s.74-3.76,6.54-3.8c0,0,3.16-3.91,4-4.11,0,0-5.73-.78-9.3.59,0,0,3.25-3.41,10.4-1.42l4.2-3.09s-7.52-1.42-10.79-.44c0,0,3.86-3,11.92-.26l4.53-2.4s-6.39-1.72-10.26-1.41c0,0,4.17-2,11.58.77l3.22-1.26s-4.69-1.17-6.07-1.38-1.43-.6-1.43-.6a16.39,16.39,0,0,1,8.84,1.43S1020.7,402.93,1020.6,402.5Z" transform="translate(-95.23 -55.03)" fill="#553c9a" opacity="0.1"/><path d="M1078.51,437.88s-37.88-4.21-34.75,22.64c0,0-1.12,4.66,3,7,0,0,.17-2,4-1.1a17.65,17.65,0,0,0,4.11.4A8.64,8.64,0,0,0,1060,465h0s10.9-3.87,15.94-21.12c0,0,3.27-3.65,3.19-4.64l-6.55,2.41s2,4.74,0,8.5c0,0,.21-8.31-1-8.18-.25,0-3.41,1.43-3.41,1.43s3.36,8.25.22,14c0,0,1.58-9.87-1.43-13.43l-4.65,2.4s4,8.55.66,15.19c0,0,1.29-10.38-1.64-14.59l-4.25,3s3.72,8.41.92,13.92c0,0,.28-12.15-1.85-13.17,0,0-3.73,3-4.35,4.24,0,0,2.54,6.1.62,9.15,0,0-.67-8.13-1.55-8.21,0,0-3.84,5.17-4.39,8.82a19.52,19.52,0,0,1,3.55-9.38,10.76,10.76,0,0,0-5.6,2.55s.75-3.76,6.55-3.79c0,0,3.15-3.91,4-4.12,0,0-5.73-.77-9.3.6,0,0,3.25-3.42,10.4-1.43l4.2-3.09s-7.52-1.42-10.79-.44c0,0,3.86-3,11.92-.25l4.53-2.41s-6.39-1.72-10.26-1.41c0,0,4.17-2,11.58.77l3.22-1.25s-4.69-1.17-6.06-1.39-1.44-.6-1.44-.6a16.45,16.45,0,0,1,8.84,1.44S1078.61,438.31,1078.51,437.88Z" transform="translate(-95.23 -55.03)" fill="#553c9a" opacity="0.1"/><path d="M949.94,139.87s-30.52-22.83-41.43,1.9c0,0-3.33,3.45-.94,7.58,0,0,1.14-1.61,4,1.06a17.51,17.51,0,0,0,3.34,2.44,8.59,8.59,0,0,0,5.37,1h0s11.36,2.19,24.45-10.12c0,0,4.66-1.5,5.1-2.38l-6.87-1.24s-.72,5.07-4.27,7.34c0,0,4.39-7.06,3.25-7.57-.23-.11-3.66-.5-3.66-.5s-1.29,8.82-6.89,12.15c0,0,6.37-7.71,5.58-12.31l-5.23-.28s-.89,9.39-7.13,13.43c0,0,6.38-8.29,6-13.41l-5.18.42s-1,9.13-6.26,12.45c0,0,6.4-10.32,5.08-12.28,0,0-4.73.67-5.9,1.45,0,0-.9,6.54-4.1,8.2,0,0,3.54-7.35,2.82-7.86,0,0-5.93,2.51-8.26,5.37a19.53,19.53,0,0,1,7.82-6.28,10.77,10.77,0,0,0-6.12-.64s2.55-2.86,7.57.05c0,0,4.69-1.77,5.49-1.55,0,0-4.55-3.57-8.32-4.19,0,0,4.54-1.3,9.69,4l5.19-.53s-5.76-5-9.08-5.84c0,0,4.83-.61,10.4,5.81l5.13.23s-4.64-4.72-8.13-6.42c0,0,4.6.4,9.59,6.53l3.41.55s-3.45-3.38-4.53-4.26S936,133,936,133a16.44,16.44,0,0,1,6.88,5.72S949.81,140.28,949.94,139.87Z" transform="translate(-95.23 -55.03)" fill="#553c9a" opacity="0.1"/><path d="M973.52,304.69S963,268.06,939.34,281.21c0,0-4.74.73-5.33,5.47,0,0,1.88-.59,2.53,3.24a17.73,17.73,0,0,0,1.2,4A8.59,8.59,0,0,0,941.4,298h0s7.74,8.6,25.6,6.68c0,0,4.62,1.62,5.5,1.18l-4.73-5.14s-3.63,3.62-7.83,3.28c0,0,7.76-3,7.16-4.07-.12-.22-2.62-2.61-2.62-2.61s-6.34,6.26-12.82,5.53c0,0,9.73-2.3,11.87-6.44l-4-3.38s-6.38,6.94-13.79,6.4c0,0,10.08-2.77,12.86-7.08l-4.38-2.79s-6.35,6.65-12.51,6.15c0,0,11.33-4.37,11.47-6.72,0,0-4.18-2.32-5.59-2.4,0,0-4.67,4.66-8.22,4.06,0,0,7.26-3.73,7-4.57,0,0-6.24-1.57-9.83-.7a19.51,19.51,0,0,1,10-.29,10.73,10.73,0,0,0-4.5-4.2s3.76-.75,6,4.6c0,0,4.81,1.42,5.31,2.08,0,0-1.47-5.59-4.1-8.36,0,0,4.4,1.7,5.29,9.06l4.46,2.71s-1.56-7.5-3.72-10.14c0,0,4.22,2.43,4.79,10.91l4,3.27s-.85-6.56-2.61-10c0,0,3.43,3.1,3.71,11l2.38,2.5s-.7-4.78-1-6.14,0-1.55,0-1.55a16.39,16.39,0,0,1,2.05,8.72S973.16,304.93,973.52,304.69Z" transform="translate(-95.23 -55.03)" fill="#553c9a" opacity="0.1"/><path d="M739.1,387.23s-20.43-32.18-39.4-12.92c0,0-4.34,2-3.58,6.75,0,0,1.65-1.1,3.35,2.4a17.12,17.12,0,0,0,2.26,3.46,8.54,8.54,0,0,0,4.65,2.88h0s9.85,6.08,26.45-.8c0,0,4.89.26,5.61-.41l-6-3.6s-2.47,4.5-6.6,5.35c0,0,6.62-5,5.73-5.92-.17-.18-3.25-1.76-3.25-1.76s-4.33,7.78-10.75,8.91c0,0,8.69-4.95,9.59-9.53l-4.79-2.11s-4.17,8.45-11.43,10c0,0,8.9-5.49,10.35-10.41l-5-1.44s-4.22,8.17-10.27,9.42c0,0,9.64-7.38,9.11-9.68,0,0-4.66-1.05-6-.73,0,0-3.17,5.79-6.75,6.21,0,0,5.92-5.62,5.43-6.36,0,0-6.43.25-9.63,2.1a19.46,19.46,0,0,1,9.54-3.1,10.73,10.73,0,0,0-5.49-2.77s3.39-1.77,7,2.73c0,0,5,0,5.69.5,0,0-3-5-6.29-6.87,0,0,4.7.4,7.62,7.21l5.05,1.34s-3.61-6.75-6.42-8.68c0,0,4.73,1.14,7.66,9.13l4.72,2s-2.66-6.05-5.33-8.88c0,0,4.16,2,6.65,9.51l3,1.73s-2-4.39-2.71-5.6-.43-1.49-.43-1.49a16.4,16.4,0,0,1,4.41,7.79S738.83,387.57,739.1,387.23Z" transform="translate(-95.23 -55.03)" fill="#553c9a" opacity="0.1"/><path d="M873.37,222.81s-19.43-32.79-39-14.13c0,0-4.4,1.9-3.78,6.64,0,0,1.67-1.06,3.27,2.49a17.28,17.28,0,0,0,2.15,3.54,8.49,8.49,0,0,0,4.56,3h0s9.65,6.38,26.46,0c0,0,4.88.41,5.62-.24l-5.87-3.78s-2.6,4.41-6.76,5.14c0,0,6.77-4.83,5.92-5.74-.18-.19-3.2-1.87-3.2-1.87s-4.57,7.65-11,8.58c0,0,8.84-4.68,9.87-9.22L856.89,215s-4.43,8.33-11.74,9.66c0,0,9.07-5.21,10.67-10.08l-4.94-1.6s-4.48,8-10.56,9.1c0,0,9.86-7.08,9.4-9.39,0,0-4.62-1.2-6-.92,0,0-3.35,5.69-6.94,6,0,0,6.09-5.42,5.63-6.18,0,0-6.44.05-9.69,1.8a19.52,19.52,0,0,1,9.63-2.8,10.75,10.75,0,0,0-5.41-2.94s3.45-1.67,7,2.94c0,0,5,.17,5.67.68,0,0-2.83-5-6.07-7.06,0,0,4.68.54,7.39,7.44l5,1.5s-3.39-6.86-6.15-8.88c0,0,4.7,1.29,7.38,9.36l4.65,2.17s-2.47-6.13-5-9c0,0,4.09,2.13,6.36,9.71l2.93,1.82s-1.88-4.45-2.54-5.68-.38-1.5-.38-1.5a16.43,16.43,0,0,1,4.17,7.92S873.08,223.14,873.37,222.81Z" transform="translate(-95.23 -55.03)" fill="#553c9a"/><path d="M750.44,291.76s1-38.1-25.47-32.73c0,0-4.74-.73-6.74,3.61,0,0,2,0,1.44,3.85a17.56,17.56,0,0,0-.06,4.14,8.55,8.55,0,0,0,2.25,5h0s4.77,10.54,22.38,14.12c0,0,3.91,2.95,4.89,2.79l-3-6.32s-4.55,2.34-8.46.75c0,0,8.3-.49,8.07-1.71,0-.25-1.72-3.29-1.72-3.29s-7.94,4.05-13.89,1.39c0,0,10,.75,13.27-2.54l-2.79-4.43s-8.18,4.68-15.08,1.92c0,0,10.45.42,14.41-2.85l-3.33-4s-8.07,4.42-13.79,2.08c0,0,12.12-.73,13-2.94,0,0-3.28-3.47-4.6-4,0,0-5.86,3-9.06,1.38,0,0,8-1.34,8.05-2.23,0,0-5.47-3.39-9.16-3.64a19.47,19.47,0,0,1,9.65,2.76,10.75,10.75,0,0,0-3-5.37s3.81.43,4.33,6.2c0,0,4.17,2.82,4.44,3.6,0,0,.29-5.77-1.38-9.21,0,0,3.68,2.95,2.3,10.23l3.43,3.94s.78-7.62-.47-10.79c0,0,3.28,3.59,1.26,11.85l2.77,4.31s1.18-6.51.55-10.34c0,0,2.32,4,.2,11.61l1.52,3.1s.77-4.77.87-6.16.48-1.48.48-1.48a16.42,16.42,0,0,1-.69,8.93S750,291.89,750.44,291.76Z" transform="translate(-95.23 -55.03)" fill="#553c9a"/><ellipse cx="698.97" cy="716.3" rx="26.93" ry="4.55" fill="#553c9a" opacity="0.1"/><ellipse cx="600.8" cy="785.38" rx="26.93" ry="4.55" fill="#553c9a" opacity="0.1"/><ellipse cx="93.14" cy="749.99" rx="26.93" ry="4.55" fill="#553c9a" opacity="0.1"/><ellipse cx="805.06" cy="780.83" rx="26.93" ry="4.55" fill="#553c9a" opacity="0.1"/><ellipse cx="833.1" cy="723.1" rx="40.21" ry="6.8" fill="#553c9a"/><path d="M945,767a11.61,11.61,0,0,0,3.83-5.78c.5-2.3-.48-5.05-2.67-5.89-2.46-.94-5.09.76-7.09,2.48s-4.27,3.69-6.88,3.33a10.5,10.5,0,0,0,3.24-9.81,4.11,4.11,0,0,0-.9-2c-1.37-1.46-3.84-.83-5.48.32-5.2,3.66-6.65,10.72-6.68,17.08-.52-2.29-.08-4.68-.09-7s-.66-5-2.65-6.22a7.91,7.91,0,0,0-4-1c-2.34-.08-4.95.15-6.54,1.86-2,2.12-1.47,5.69.25,8s4.35,3.8,6.77,5.42a15.13,15.13,0,0,1,4.84,4.61,4.7,4.7,0,0,1,.35.82h14.66A40.44,40.44,0,0,0,945,767Z" transform="translate(-95.23 -55.03)" fill="#553c9a"/><path d="M170.29,783.87s15.35-.47,20-3.77,23.63-7.23,24.78-1.94,23.08,26.29,5.74,26.43-40.29-2.7-44.91-5.52S170.29,783.87,170.29,783.87Z" transform="translate(-95.23 -55.03)" fill="#a8a8a8"/><path d="M221.1,802.75c-17.34.14-40.29-2.7-44.91-5.52-3.52-2.14-4.92-9.83-5.39-13.38l-.51,0s1,12.39,5.59,15.2,27.57,5.66,44.91,5.52c5,0,6.73-1.82,6.64-4.46C226.73,801.72,224.82,802.72,221.1,802.75Z" transform="translate(-95.23 -55.03)" opacity="0.2"/></svg>


--------------------------------------------------------------------------------