I am trying to use Project Fluent to translate a webpage using React and SSR (in particular, Remix). The library allows for using markup in the translation texts, e.g.
hello = Hello, and <italic>welcome</italic>
However, the built-in parser uses the document object which is not availble on the server. In their docs, Project Fluent specifies that in this case it is possible to provider your own parser. This must be a function with the following signature:
(str: string) => Node[]
where Node is the default DOM Node interface.
As suggested by Fluent themselves, I have attempted to use cheerio to solve this, but I am unable to produce a function with the correct signature. This is the closest I have gotten this far:
import * as cheerio from 'cheerio';
function parseMarkup(str: string) {
return cheerio.load(str)._root.childNodes;
}
In particular, this solution is missing nodeName and textContent which are the only two properties strictly required by Fluent. I think the best solution would hovewer to implement a function which returns an array of proper Node-objects to avoid having to use // #ts-ignore.
Any help implementing a parser with the correct signature is greatly appreciated.
Related
I'm using Flow and React to create an Azure Static App in VS Code. The app works, but I'm confused by the type definitions of my functions. I've created a small example in a file annotated with //#flow strict
function WhyMismatch(): React.MixedElement {
return <h1></h1>
}
Please refer to this image. The code yields the following two type signatures in the UI.
function WhyMismatch(): any
() => MixedElement
Note the two definitions. Why does the first list the return type as any? Did I apply the return wrong type or misconfigure something?
One of them is the TypeScript definition because vscode and TS are both shipped by Microsoft they basically baked the TS intellisense straight into the application. You can turn it off in the settings but there really is no need and you can usually tell which is which.
In your case, the one that says function(): any is TS because it doesn't understand React.MixedElement
I'm not asking how to embed SVG file or image in React. I need a function of following type signature:
(source: string) => React.ReactNode
This function parse SVG source string and returns a React node. I really need this because I'm handling the output of Graphviz. And because I want to manipulate the resulting React node, dangerouslySetInnerHtml cannot meet my requirements.
Of course, I can parse the SVG source to SVGElement by DOMParser and then translate native SVGElement nodes into ReactElement. But this costs time. I wonder if anyone did this job before? I searched the whole Internet but gained nothing.
I don't know about performance. But maybe smth like https://github.com/egoist/svg-to-component or https://github.com/publitas/svg-to-react.
HI I'm able to smart import Projects in ODI using SDK. but i'm unable to use the predefined method which sets actions like merge, create copy, ignore, reuse, while importing the projects.
Please help me to implement the below method,
setMatchedFCODefaultImportAction(java.lang.String pFCOObjType, int pSmartImportAction)
by using below method i'm directly importing projects.
importObjectsFromXml (fnameAndPath, ExportKey, ExportWithoutCipherData);
I want to implement above mentioned actions, please help me.
thanks
Unfortunately you can not use setMatchedFCODefaultImportAction to specify the action for a specific object like a project as in your code :
smartImpServ.setMatchedFCODefaultImportAction("Dev_ODI_Project", 1);
It can only define the default action for a First Class Object i.e. for all the objects of a specific type. For instance you can set the default actions for any project as CREATE/COPY (equivalent to 1 as you used in your code):
smartImpServ.setMatchedFCODefaultImportAction(ISmartImportService.PROJECT_OBJECT_NAME, ISmartImportService.SMART_IMPORT_ACTION_CREATE_COPY);
The values you can use as the pFCOObjType parameters are all the Fields ending by _OBJECT_NAME in the ISmartImportService interface.
If you want to specify the action for a specific object, you would need to use a response file from a previous import with the importFromXml method.
I have an object that contains content for a page, I import it and try to use it like you'd use any object variable:
import {Variable} from 'data'
const message = defineMessages({
message: {
id: 'component.title',
defaultMessage: Variable.title
}
})
However, I get React Intl] Messages must be statically evaluate-able for extraction.. I googled a lot and found no solution to this. I'm using babel-plugin-react-intl to generate the locale files, and a contributor said that Babel can only parse simple statically messages
It's hard to believe there's no way to be able to import content from another file and have it translated. There must be a way, I couldn't come up with a solution and help would be appreciated.
I struggled with the same problem by myself. As far as I know, there's no way to translate a content of a variable in react-intl.
If you're interested in alternative solutions, I wrote jsLingui i18n library and recently just added support for noop translations, which is exactly what you're looking for.
I use
<gzip-compress-transformer/>
<base64-encoder-transformer/>
after a file connector, and then write a component to deal with the gzip+base64 content.
How can i get the file name in the component?
Note that we introduced annotations in Mule 3 for doing runtime injection, this means you can specify how to invoke a component without needing transformers i.e.
public void save(#Payload String fileContents, #InboundHeaders("originalFilename") String originalFilename)
See: http://www.mulesoft.org/documentation/display/MULE3USER/Creating+Service+Objects+and+Transformers+Using+Annotations
Does your component implement Callable? If not, do you want to keep your component Mule-unaware?
Based on your answers to these questions, different options exist:
With Callable, you get the headers in message.getProperty...
Without implementing Callable, you can access RequestContext to get the current Mule event and from there reach the message properties. But this makes your component Mule aware.
Otherwise, have your component's method take a second parameter (String originalFilename) and use a standard expression transformer to transform the payload in an array that contains: #payload, #[header:originalFilename]. This arrays will then be passed as arguments to your component's method.
[message.outboundproperties[originalFilename]]
with this expression you can get the original file name in the component.