microsoft / nova-facade Goto Github PK
View Code? Open in Web Editor NEWRuntime support for the. JS Nova pattern, which allows sharing of High-Value-Components across M365
License: MIT License
Runtime support for the. JS Nova pattern, which allows sharing of High-Value-Components across M365
License: MIT License
We should perhaps import the 1GQL schema and augment it locally for now with the pieces needed by AppBar and MeControl?
nova-facade/packages/nova-react-test-utils/src/test-utils.tsx
Lines 89 to 93 in 40d05c6
In TMP, the nova-facade-react
package depends on invariant
and imports the default as invariant
:
e.g.
import * as invariant from "invariant";
https://domoreexp.visualstudio.com/Teamspace/_git/teams-modular-packages?path=%2Fpackages%2Fnova%2Ffacade%2Fnova-facade-react%2Fsrc%2Fgraphql%2Fhooks.ts&version=GBmaster
When this code is used in react-native bundles, the result is an object named invariant
instead of a function named invariant
(see zertosh/invariant#32).
For the code to work in web and react native, the imports should change to
import invariant from "invariant";
In 1JS, I patched nova-facade-react
with this change and verified it works in both web and native. https://office.visualstudio.com/Office/_git/1JS/pullrequest/978506
When running Storybook in TMP, we are hitting an issue where we cannot load stories using this file: @nova\react\lib\graphql\taggedNode.mjs
Console shows the following error:
Replacing the contents of the mjs file in node_modules with the below code (removing the require and importing normally) resolves the loading issue.
import invariant from "invariant";
import {graphql as graphql2} from "@graphitation/graphql-js-tag"
function graphql(document, ...fragments) {
invariant(graphql2 !== void 0, "Expected the host application to provide the `@graphitation/graphql-js-tag` package");
return graphql2(document, ...fragments);
}
export {
graphql
};
Apollo has an addon for Storybook: https://storybook.js.org/addons/storybook-addon-apollo-client/
We should provide similar functionality for components built with the Nova facade.
With nova/react version 0.3.5, Midgard started throwing errors during linting. One example is NovaGraphQL
interface which accepts GraphQLDocument
of types any
.
File: nova-graphql.interface.ts
export interface NovaGraphQL<GraphQLDocument = any> {)
Use case example:
return (
<HighlightsContextProvider
hostAppCallbacks={hostAppCallbacks}
logger={logger}
highlightsFragment={highlights_highlightFragment}
>
<NovaGraphQLProvider graphql={novaGraphQL}> // this throws errors during linting
{props.children}
</NovaGraphQLProvider>
</HighlightsContextProvider>
);
yarn lint
reports:
ERROR: 87:8 no-unsafe-any Unsafe use of expression of type 'any'.
ERROR: 89:9 no-unsafe-any Unsafe use of expression of type 'any'.
Info on the error: https://palantir.github.io/tslint/rules/no-unsafe-any/
TSLint is configured with:
{
"extends": ["@1js/linting"],
"rules": {
"no-unsafe-any": true
}
}
A workaround is to tag the codeblock with // tslint:disable: no-unsafe-any
Hi,
Scenario
Org Explorer is an Apollo graphql people experience (aka.ms/orgexplorer) where my team integrated People Highlights (ref on scenario here). Our integration package is implementing the nova data interface.
Background info
Today highlights are integrated in the host app (OrgX) root query. OrgX is a NON-nova host app. Highlights type is embedded inside OrgX root query making the implementation of useLazyLoadQuery difficult. so far we opted for implementing the following methods, while querying happens inside the host app and then it's passed down as props:
useMutation
- this works well because highlights are not embedded in the orgx root mutation (it's decoupled)useFragment
- we are relying on the default implementation where data passed via props is mirrored.Challenge
Since data is passed down via props, we can't ensure proper usage of useFragment
unless we extract from the Fragment$key the data
and forcefully cast it to a ref
.
const highlightRef = props.personaHighlightFragment[" $data"] as unknown as {
readonly " $fragmentRefs": FragmentRefs<"HighlightsFragment">;
};
where personaHighlightFragment
is a Nova fragment constructed this way (on the host app)
// Convert from Apollo fragment to Nova(Relay) fragment
const personaHighlightFragment: NovaHighlightsFragment$key = {
" $fragmentRefs": { HighlightsFragment: true },
" $data": personaHighlight as NovaHighlightsFragment,
};
Ask: Enable nova to handle such object transformations when data is not fetched via useLazyLoadQuery
but rather passed via props.
In TMP, the nova-facade-react
package has a hard dependency on a particular version of "react".
When consumed in 1JS, this causes webpack and react native bundle issues as two versions of react are bundled.
In 1JS, I worked around it by using a yarn workspace resolution:
When nova-facade-react
is ported to GitHub, please use a "peerDependency" to "react" instead of a "dependency".
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.