Skip to content

Commit

Permalink
Merge pull request #59 from nabla-studio/DavideSegullo/improve-vue
Browse files Browse the repository at this point in the history
fix(vue): 🐛 fix reactivity
  • Loading branch information
DavideSegullo authored Jan 30, 2024
2 parents 7cca1ed + 2b548ab commit 94ca8cd
Show file tree
Hide file tree
Showing 10 changed files with 110 additions and 72 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
"vue": "^3.3.4",
"vue-qrcode": "^2.2.2",
"vue-router": "^4.2.4",
"zustand": "^4.5.0",
"zustand-vue": "1.0.0-beta.20"
"vue-zustand": "^0.6.0",
"zustand": "^4.5.0"
}
}
14 changes: 7 additions & 7 deletions packages/vue/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@
"type": "module",
"dependencies": {
"@quirks/store": "*",
"@quirks/core": "*"
},
"peerDependencies": {
"vue": "^3.3.4",
"cosmjs-types": "^0.8.0",
"@cosmjs/amino": "^0.31.3",
"@quirks/core": "*",
"vue-zustand": "^0.6.0",
"eventemitter3": "^5.0.1",
"zustand": "^4.5.0",
"zustand-vue": "1.0.0-beta.20"
"cosmjs-types": "^0.8.0",
"@cosmjs/amino": "^0.31.3"
},
"peerDependencies": {
"vue": "^3.3.4"
},
"main": "./index.js",
"module": "./index.js",
Expand Down
14 changes: 8 additions & 6 deletions packages/vue/src/hooks/chain.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import type { StdSignDoc } from '@cosmjs/amino';
import { computed } from 'vue';

export const useChains = () => {
const accounts = useQuirks()((state) => state.accounts);
const accountName = useQuirks()((state) => state.accountName);
const state = useQuirks()((state) => state);
const accounts = computed(() => state.accounts.value);
const accountName = computed(() => state.accountName);
const getAddresses = useQuirks()((state) => state.getAddresses);
const getAddress = useQuirks()((state) => state.getAddress);
const getChain = useQuirks()((state) => state.getChain);
Expand All @@ -20,9 +21,10 @@ export const useChains = () => {
};

export const useChain = (chainName: string) => {
const chains = useQuirks()((state) => state.chains);
const accounts = useQuirks()((state) => state.accounts);
const accountName = useQuirks()((state) => state.accountName);
const state = useQuirks()((state) => state);
const chains = computed(() => state.chains.value);
const accounts = computed(() => state.accounts.value);
const accountName = computed(() => state.accountName);
const getOfflineSigner = useQuirks()((state) => state.getOfflineSigner);
const getOfflineSignerOnlyAmino = useQuirks()(
(state) => state.getOfflineSignerOnlyAmino,
Expand All @@ -38,7 +40,7 @@ export const useChain = (chainName: string) => {
);

const account = computed(() =>
accounts.value.find((account) => account.chainId === chain.value!.chain_id),
accounts.value.find((account) => account.chainId === chain.value?.chain_id),
);

const address = computed(() => account.value?.bech32Address);
Expand Down
8 changes: 5 additions & 3 deletions packages/vue/src/hooks/config.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { computed } from 'vue';
import { useQuirks } from './quirks';

export const useConfig = () => {
const wallets = useQuirks()((state) => state.wallets);
const chains = useQuirks()((state) => state.chains);
const assetsLists = useQuirks()((state) => state.assetsLists);
const state = useQuirks()((state) => state);
const wallets = computed(() => state.wallets.value);
const chains = computed(() => state.chains.value);
const assetsLists = computed(() => state.assetsLists.value);

return {
wallets,
Expand Down
28 changes: 12 additions & 16 deletions packages/vue/src/hooks/connect.ts
Original file line number Diff line number Diff line change
@@ -1,26 +1,22 @@
import { ConnectionStates } from '@quirks/store';
import { useQuirks } from './quirks';
import { computed } from 'vue';

export const useConnect = () => {
const state = useQuirks()((state) => state);
const connect = useQuirks()((state) => state.connect);
const disconnect = useQuirks()((state) => state.disconnect);
const status = useQuirks()((state) => state.status);
const setupStatus = useQuirks()((state) => state.setupStatus);
const reconnectionStatus = useQuirks()((state) => state.reconnectionStatus);
const wallet = useQuirks()((state) => state.wallet);
const walletName = useQuirks()((state) => state.walletName);
const connected = useQuirks()(
(state) => state.status === ConnectionStates.CONNECTED,
);
const waiting = useQuirks()(
(state) => state.status === ConnectionStates.WAITING,
);
const disconnected = useQuirks()(
(state) => state.status === ConnectionStates.DISCONNECTED,
);
const rejected = useQuirks()(
(state) => state.status === ConnectionStates.REJECTED,
const status = computed(() => state.status.value);
const setupStatus = computed(() => state.setupStatus.value);
const reconnectionStatus = computed(() => state.reconnectionStatus.value);
const wallet = computed(() => state.wallet?.value);
const walletName = computed(() => state.walletName?.value);
const connected = computed(() => status.value === ConnectionStates.CONNECTED);
const waiting = computed(() => status.value === ConnectionStates.WAITING);
const disconnected = computed(
() => status.value === ConnectionStates.DISCONNECTED,
);
const rejected = computed(() => status.value === ConnectionStates.REJECTED);

return {
connect,
Expand Down
12 changes: 6 additions & 6 deletions packages/vue/src/hooks/quirks.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { createConfig } from '@quirks/store';
import { type Ref, inject } from 'vue';
import create from 'zustand-vue';
import { inject } from 'vue';
import create from 'vue-zustand';
import { USE_QUIRKS_KEY } from '../plugin';

export function useQuirks() {
const store = inject<Ref<ReturnType<typeof createConfig>>>(USE_QUIRKS_KEY);
const store = inject<ReturnType<typeof createConfig>>(USE_QUIRKS_KEY);

if (!store?.value)
if (!store)
throw new Error(
['[Quirks]: `useConfig` must be used within `quirksPlugin`'].join('\n'),
['[Quirks]: `useQuirks` must be used within `quirksPlugin`'].join('\n'),
);

return create(store.value);
return create(store);
}
8 changes: 5 additions & 3 deletions packages/vue/src/hooks/wallet-connect.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { computed } from 'vue';
import { useQuirks } from './quirks';

export const useWalletConnect = () => {
const pairingURI = useQuirks()((state) => state.pairingURI);
const namespaces = useQuirks()((state) => state.namespaces);
const providerOpts = useQuirks()((state) => state.providerOpts);
const state = useQuirks()((state) => state);
const pairingURI = computed(() => state.pairingURI?.value);
const namespaces = computed(() => state.namespaces.value);
const providerOpts = computed(() => state.providerOpts?.value);

return {
pairingURI,
Expand Down
19 changes: 4 additions & 15 deletions packages/vue/src/plugin.ts
Original file line number Diff line number Diff line change
@@ -1,29 +1,18 @@
import { type Config, createConfig } from '@quirks/store';
import { markRaw, shallowRef, triggerRef, type Plugin } from 'vue';
import { type Plugin } from 'vue';

export const USE_QUIRKS_KEY = 'USE_QUIRKS' as const;

export const quirksPlugin: Plugin = {
install: (app, config: Config) => {
const store = shallowRef(markRaw(createConfig(config)));

const unsubscribe = store.value.subscribe(() => {
triggerRef(markRaw(store));
});

const originalUnmount = app.unmount;

app.unmount = function vueQueryUnmount() {
unsubscribe();
originalUnmount();
};
const store = createConfig(config);

app.provide(USE_QUIRKS_KEY, store);

const mount = {
mounted() {
if (!store.value.persist.hasHydrated()) {
setTimeout(() => store.value.persist.rehydrate(), 0);
if (!store.persist.hasHydrated()) {
setTimeout(() => store.persist.rehydrate(), 0);
}
},
};
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default defineConfig({
'zustand',
'zustand/vanilla',
'zustand/middleware',
'zustand-vue',
'vue-zustand',
'@quirks/store',
'@quirks/core',
'cosmjs-types',
Expand Down
73 changes: 60 additions & 13 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 94ca8cd

Please sign in to comment.