How to document an web component with jsdoc3 - documentation

What would be the way to document a web component using jsdoc3
Here is an example of web component registered with x-tag.
xtag.register('x-analytics',
{
lifecycle : {
created : function(){
}
},
accessors : {
code : {
attribute : true
},
domain : {
attribute : true
}
}
});

Since X-Tag is also just JavaScript, you can simply use the corresponding annotations provided by jsdoc. So things like #memberof etc.
However, Web Components syntax can have its own kind of additional meaning. For example you probably want an annotation for #element or #lifecycleCallback and stuff like this. This is not provided by jsdoc and therefore e.g. Polymer uses it's own documentation annotation using core-component-page.
You either use what jsdoc provides and see what annotations fit best for your use case, or you use something like dgeni which lets you build a documentation tool pipe entirely from scratch, so you have full control over your annotations etc.

Related

How to add my custom page resolver instead of Spartacus page resolver?

I'm adding my resolver (which extended from PageMetaResolver) into providers in my own home.module. However, my method 'resolve' is not called. Have you got any ideas?
#Injectable({
providedIn: 'root'
})
export class HomePageMetaResolver extends PageMetaResolver implements PageDescriptionResolver {
constructor(
protected routingService: RoutingService,
protected translationService: TranslationService,
protected cms: CmsService
) {
super();
this.pageType = PageType.CONTENT_PAGE;
}
resolve(): Observable<PageMeta> {
console.log('RESOLVE')
return this.cms.getCurrentPage().pipe(
switchMap(page =>
combineLatest([
this.resolveDescription()
])
),
map(([description]) => ({ description }))
);
}
resolveDescription(): Observable<string> {
return new Observable(sub => {
sub.next('test description');
});
}
}
TL;DR
Please specify not only this.pageType, but also this.pageTemplate for your PageMetaResolver.
Detailed explanation
The most specific Page Meta Resolver wins
Guessing from the name of your meta resolver, you want to provide custom meta only for your Home page. Please note that the most specific meta resolver wins thanks to the simple scoring algorithm, which takes into consideration 2 factors: page type and page template (see source https://github.com/SAP/cloud-commerce-spartacus-storefront/blob/develop/projects/core/src/cms/page/page-meta.resolver.ts#L11).
Currently your resolver HomePageMetaResolver has the same specificity as the generic one so your resolve method is not called.
You need to specify more your meta resolver by defining its property this.pageTemplate = '<name-of-page-template-used-only-at-homepage>'. Then your HomePageMetaResolver will get higher score than a default ContentPageMetaResolver whenever you visit a homepage.
Custom scoring algorithms
For custom scoring algorithms (which could take pageId into account, for instance), you can overwrite the method getScore of your PageMetaResolvers. You can even extend the method PageMetaService.getMetaResolver to redefine all rules of chosing the right page meta resolver. But for your case the standard solution (described above) should suffice.

Introspection query for EnumValues as a GraphQL fragment in react-component

I'm building a React Native application using GraphQL (Hosted on graph.cool) with a Relay Schema.
I have a QueryRenderer in the top-level component, fetching data for the presentational components using fragments, which is working fine.
My problem: I want to do an introspection query to fetch possible enum values as a list, for a specific field in my schema and fetch these alongside the fragments.
My current query with fragments:
query ReportingContainerQuery {
viewer {
...MainList_items
...
}
}
The MainList_items fragment:
fragment AnimalList_items on Viewer {
allAnimalCategories {
edges {
node{
id
...AnimalListRow_item
}
}
}
}
I got the following query working for fetching enumValues via introspection (using: https://www.graph.cool/forum/t/how-to-access-the-possible-values-of-an-enum-type-created-inside-the-console/23/2):
query {
__type(name: "JOURNAL_ENTRY_GENDER") {
enumValues {
name
}
}
}
But i can't seem to find a way to create a fragment that can be added to the top-level query.
I could just paste the introspection directly into the top-level query, but that would kind of work against the relay framework, as far as I understand it. Since doing it this way I would have to explicitly pass the result down as a props, instead of letting the presentational component specify what it needs and supplying that as a fragment to the QueryRenderer at the top-level and letting the relay framework implicitly pass the query result down to the component.
After some tinkering around i found a way to solve it - it leaves two places to maintain the fragments query, but it was the only way I found that solved it. :)
In my component i defined the following fragment:
fragment GenderTile_items on __Type {
enumValues{
name
}
}
Then in my main container, i expanded the query in the QueryRenderer with the following
query ReportingContainerQuery {
viewer {
...MainList_items
...
}
__type(name: "JOURNAL_ENTRY_GENDER"){
...GenderTile_items
}
}
The resulting enum data from the QueryRenderer is then available in the successblock by passing 'props.__type' down to the component with the corresponding fragment and from there accessing props.items.enumValues (As the prop for the data was defined as 'items' in the fragment (e.g GenderTile_items when following the naming convention 'FileName_propName'. (https://facebook.github.io/relay/docs/fragment-container.html#data-dependencies-with-graphql)).
I then ran into the problem where i wanted to fetch more than one type of enums and the query returned an error with duplicate __type assignments. This can be fixed this by using alias' like this:
query ReportingContainerQuery {
viewer {
...MainList_items
...
}
genderEnums: __type(name: "JOURNAL_ENTRY_GENDER"){
...GenderTile_items
}
otherEnums: __type(name: "JOURNAL_ENTRY_OTHER"){
...OtherComponent_items
}
}
The data is then available via props.[alias] (e.g. 'props.genderEnums' and 'props.otherEnums'), which you then pass to the component with the fragment and as above access it via props.items.enumValues.
Hope that made sense for anyone else running into the same problem as me. :D

Like swagger/swashbuckle but for node.js?

Is there any tool for node express where you can automatically generate swagger documentation for an existing project? Similar to swashbuckle?
I've been looking into this as well, the project which will help you is swagger-node-express. swagger-ui, should come as a dependency of swagger-node-express. Swagger-node-express wraps express and exposes it as a new interface meaning there will be code changes you to make it work. This is what a route would look like (taken from their docs)
var findById = {
'spec': {
"description" : "Operations about pets",
"path" : "/pet.{format}/{petId}",
"notes" : "Returns a pet based on ID",
"summary" : "Find pet by ID",
"method": "GET",
"parameters" : [swagger.pathParam("petId", "ID of pet that needs to be fetched", "string")],
"type" : "Pet",
"errorResponses" : [swagger.errors.invalid('id'), swagger.errors.notFound('pet')],
"nickname" : "getPetById"
},
'action': function (req,res) {
if (!req.params.petId) {
throw swagger.errors.invalid('id');
}
var id = parseInt(req.params.petId);
var pet = petData.getPetById(id);
if (pet) {
res.send(JSON.stringify(pet));
} else {
throw swagger.errors.notFound('pet');
}
}
};
Where the type "Pet" is still for you to define, I wont rewrite their docs here.
This will then produce a file which swagger-ui can use to give you a self contained self documenting system. The documentation for swagger-node-express is more than good enough to get it setup (dont forget to set swagger path, I did).
swagger.configureSwaggerPaths("", "/docs", "");
Having shown you the tools that in theory offer what your asking for, let me explain why I've come to conclusion that I'm not going to use them.
A lot of code change needed - is it really less work than creating
your own swagger.yml file? I dont think so.
Hand creating a swagger.yml file is much less likely to brake your project.
Whilst swagger-node-express hasnt been depricated it's github repo doesnt exist anymore, its been wrapped into swagger-node, but that project doesnt really mention it
I'd be wary of any tool that means I need to wrap express - it's not something I'd look to do.
TL;DR:
It's possible with a lot of code change - probably not what your after though.

What is dojo equivalent of $('body')?

The following methods returns object
dojo.body()
but we can not addClass on it (or any other operation) ?
Please see http://dojotoolkit.org/reference-guide/1.9/dojo/query.html for information on using dojo/query especialy with AMD. dojo/query returns NodeList - an array just like $('.someSelector'). Note that to do something like $('body').addClass('class') you'll need to require dojo/NodeList-dom.
So basic example of adding class using dojo/query (and AMD) would be
require(["dojo/query", "dojo/NodeList-dom"], function(query){
query("body").addClass('class');
});
For the full list of NodeList methods see Dojo docs. Methods could be defined in different modules so look for "Defined by dojo/NodeList-dom" below method name.
In the current versions of Dojo (see 1.9), the technology has changed. To access the body, one would now code:
require(["dojo/_base/window"], function(win) {
var myBody = win.body();
});
To add a class, one would code:
require(["dojo/_base/window", "dojo/dom-class", function(win, domClass) {
domClass.add(win.body(), "someClass");
});
See also:
http://dojotoolkit.org/reference-guide/1.9/dojo/_base/window.html#dojo-base-window-body
http://dojotoolkit.org/reference-guide/1.9/dojo/dom-class.html#dojo-dom-class-add

Translation of Zend_Validation in ZF2

I have a strange Problem in Zend Framework 2. I've used the Zend Skeleton Application (https://github.com/zendframework/ZendSkeletonApplication) and added PhlyContact as Vendor Module (https://github.com/weierophinney/PhlyContact). I changed the Translation-Type to PhpArray so that i can use the Zend_Validate.php located in the resources-dir of the ZF2-Dist.
Everything translates EXCEPT the validation Messages :/ So i guess i am missing something:
I must pass the Translator to Zend_Validate (but how and where?)
The Translation should use a Text-Domain, but doesn't
When i remember right in ZF1 you had to set the Translator to default to pass it to Zend_Validate. Any Ideas on that !?
have a look at these methods
\Zend\Validator\AbstractValidator::setDefaultTranslator();
\Zend\Validator\AbstractValidator::setDefaultTranslatorTextDomain();
You can even do this with only one line (2nd parameter is text domain):
AbstractValidator::setDefaultTranslator($translator, 'default');
Example within Module.php:
use Zend\Validator\AbstractValidator;
class Module
{
public function onBootstrap(MvcEvent $e)
{
$translator = ....
AbstractValidator::setDefaultTranslator($translator, 'default');
}
}