Is there any way to use next-intl outside of a react component?
For now I get t by calling the hook useTranslations, and then pass its instance to my function:
function formatFoo(t, foo) {
if ....
t('bar');
}
export default function MyComponent() {
const t = useTranslations();
return <div>{formatFoo(t, "bar")}</div>
}
I wish I could just import t from next-intl as i18next permits for example.
Related
my name is DP, I have 2 years Vue2 experience, but I am new to Vue3. I am learning Vue3 recently, as I found the "setup(Composition API)" just like the "Controller(in MVC)" that I did in other language, so I am trying to build my test Vue3 project in MVC way, but I go some problem can anyone help? thx!
MVC Plan
M - use class
V - use <template> ... </template>
C - use setup
My Problem
working: using loadTopic_inSetup().then() in setup is working, because topicList_inSetup is defined in setup() too.
not working: using loadTopic_inModel() in setup is not working, I guess some kind data keep problem, because in console I can see the data already got from API
as u can see, I am not expert for js/ts, I am a backend developer, so if you know how to do it, plz help thx very much.
BTW, VUE is greet, I love it.
My Code
//APIBased.ts
import { ajax } from "#/lib/eeAxios"
export class APIBased {
//load data with given url and params
loadData(apiPath: string, params?: object): Promise<any> {
apiPath = '/v1/'+apiPath
return ajax.get(apiPath, params)
}
}
//Topic.ts
import { APIBased } from "./APIBased";
import { ref } from 'vue'
export class Topic extends APIBased {
//try keep data in model
topicList: any = ref([]);
constructor() {
super()
}
//direct return ajax.get, let setup do the then+catch
loadTopic_inSetup() {
return super.loadData('topics', { t_type_id: 1 })
}
//run ajax get set return data to this.topicList, keep data in model
loadTopic_inModel() {
super.loadData('topics', { t_type_id: 1 }).then((re) => {
console.log(re.data)
this.topicList = re.data
})
}
}
//EETest.vue
<template>
<EELayoutMainLayout>
<template v-slot:mainContent>
<h1>{{ "Hello Vue3 !!" }}</h1>
<hr/>
{{to.topicList}} //not working... just empty array
<hr/>
{{topicList_inSetup}} //working... topic list return from API show here.
</template>
</EELayoutMainLayout>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from 'vue'
import EELayoutMainLayout from '#/components/eeLayout/EELayoutMainLayout.vue'
import { Topic } from "#/models/Topic";
export default defineComponent({
name: 'EETest',
props: {
},
setup() {
let topicList_inSetup = ref([])
const to = new Topic()
//try keep data in setup, it's working
to.loadTopic_inSetup().then((re) => {
topicList_inSetup.value = re.data
console.log(re.data)
})
//try keep data in model, the function is run, api return get, but data not show, even add ref in model
to.loadTopic_inModel()
return {
topicList,
to,
}
},
components: {
EELayoutMainLayout,
},
})
</script>
A few digressions before solving the problem. Maybe you are a java developer. I personally think it is inappropriate to write the front end with Java ideas. The design of vue3's setup is more inclined to combined functional programming
To fully understand why you need some pre knowledge, Proxy and the get and set method of Object
They correspond to the two core apis in vue, reactive and ref,
The former can only be applied to objects( because proxy can only proxy objects),The latter can be applied to any type(primary for basic javascript types, get and set can apply for any type)
You can modify the code to meet your expectations
loadTopic_inModel() {
super.loadData('topics', { t_type_id: 1 }).then((re) => {
console.log(re.data)
this.topicList.value = re.data
})
}
You cannot modify a ref object directly, a test case to explain what is reactive
when ref function is called, a will be like be wrapped in a class has value properties, and has get and set method
the effect function will call the arrow function, and in this time, the get method of a will be called and it will track as a dependence of the effect function, when a changed, the set method of a will be called, and it will trigger the arrow function,
so when you direct modify the a, the setter method will never trigger, the view will not update
const a = ref(1)
let dummy
let calls = 0
effect(() => {
calls++
dummy = a.value
})
expect(calls).toBe(1)
expect(dummy).toBe(1)
a.value = 2
expect(calls).toBe(2)
expect(dummy).toBe(2)
// same value should not trigger
a.value = 2
expect(calls).toBe(2)
Not sure how I should use components. I'm not using a modular build.
import Glide from '#glidejs/glide'
var glide = new Glide('.glide')
glide.on('build.after', function() {
// How do I access the component Sizes and the property slideWidth here?
})
glide.mount()
You do not have access to the collection of components in events callbacks. You have to create a custom component instead. More info in documentation.
var Example = function (Glide, Components, Events) {
return {
mount () {
// Here you can access `Sizes` module
console.log(Components.Sizes)
}
}
}
new Glide('.glide').mount({
'Example': Example
})
I am experienced, but new to Aurelia and cannot figure out how to call a specific function from the console.
Using this source:
<code>
import {} from 'css/style.css';
import {inject} from 'aurelia-framework';
import {DOM} from 'aurelia-pal';
export class App {
constructor() {
this.message = 'Test Application';
this.todos = ['a','b','c','d'];
this.DOM = DOM;
}
getFish() {
this.DOM.getElementById("#theMessage").style.color="green";
}
}
</code>
I want to call getFish from the console. One may think that App.getFish() would do it, but no so much.
How DOES one call class functions in the debug console for Aurelia?
I would simply log this in the constructor or really in any of the VM's functions:
export class App {
constructor() {
console.log('App VM', this);
}
getFish() {
console.log('get fish called');
}
}
Then I would right click on the the object that is logged and click "Store as global variable." That will give me a variable to use. I can then call the function as desired.
So far I have been following various tutorials. This time I'm trying to build things from scratch (kind of). For now the following is supposed to display part of state. Later on I'll play with making it do calculations,etc. Still I get an error:
Cannot read property 'count' of undefined
So I use mapStateToProps and the first step I'd like to do is to get it to display this.props.count and this.props.step. Once I've done it I'll modify it to do more complex things.
Here's the component and below there's a link to the whole code that I put on github.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import { getCounter } from '../actions';
class CounterBoard extends Component {
render() {
return (
<View>
<Text>BELOW SHOULD DISPLAY 0</Text>
<Text>{this.prop.count}</Text>
</View>
);
}
}
const mapStateToProps = (state) => {
return {
count: state.count,
step: state.step
};
};
export default connect(mapStateToProps, { getCounter })(CounterBoard);
https://github.com/wastelandtime/calculator
Edit: Thank you for the 'prop' => 'props' pointer. Now I have the following error:
ExceptionsManager.js:63 Objects are not valid as a React child (found: object with keys {count, step}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Text`.
After going through your code on Github, I couldn't help but notice that in your action, you return the following object:
export const getCounter = (count) => {
return {
type: GET_COUNTER,
payload: count
};
};
If you intend to return the count, I assume that action.payload should contain a number here and not an object.
However, in your reducer, you return:
case GET_COUNTER:
return action.payload.count;
Assuming from the code in your CounterBoard Component and CalcReducer, you probably wanted to merge your payload into the initial state before returning from the reducer?
You might also need to pass and argument while dispatching the getCounter action, for the component to work as expected.
I'm doing some business logic around an implementation of the Auth0 lock widget and need to call some graphql mutations to sign in. In this case there is no UI to render since it's simply a call to Auth0's lock.show() method. However, looking at all the apollo client examples with react - the graphql method seems to bind the functions to a component.
Can I call a gql mutation directly without binding it to a react component?
What's the best way to get the client from the ApolloProvider if I'm not in a component? Is there a static singleton instance i can reference from ApolloProvider or do I need to pass the client reference from the root application compoment?
You can use the withApollo() decorator exported from apollo-client to access the client as a prop inside a component. The ApolloProvider exposes the client to its child components through context. The withApollo() higher-order component accesses the client on context and passes it to its child as a prop.
So, if the auth.lock() function is being triggered by some type of UI interaction or one of the React lifecycle methods, you can access the client in that component and either call the mutation directly in the component or pass it as an argument through to the function that calls auth.lock().
However, since you want to access the client outside of the React tree, you have to access the client in a different way.
Alternatively, you can export the same client that you pass as a prop to ApolloProvider and import it wherever you need to use it in the app. Note, this singleton pattern won't work with server-side rendering. Example:
root.jsx
import React from 'react';
import { Router, browserHistory } from 'react-router';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { syncHistoryWithStore } from 'react-router-redux';
import routes from './routes';
const networkInterface = createNetworkInterface({
uri: '/graphql',
opts: {
credentials: 'same-origin'
}
});
export const client = new ApolloClient({
networkInterface
});
export const store = configureStore(browserHistory, client);
export const history = syncHistoryWithStore(browserHistory, store);
export default function Root() {
<ApolloProvider client={client} store={store}>
<Router
history={history}
routes={routes}
/>
</ApolloProvider>
}
some-other-module.js
import { client } from 'app/root';
export default function login(username, password) {
return client.mutate({
// ...mutationStuff
});
}
You can import ApolloProvider like this:
import { ApolloProvider } from "#apollo/client";